commit 9192f26e9125a09c11a0db218d06bf9c32d886cc
Author: root <root@hub.scroll.pub>
Date: 2025-01-06 19:35:13 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..8af4301
--- /dev/null
+++ b/body.html
@@ -0,0 +1,18 @@
+<main class="container">
+ <div class="orbit-container">
+ <div class="orbit-ring ring1"></div>
+ <div class="orbit-ring ring2"></div>
+ <div class="orbit-ring ring3"></div>
+ <div class="welcome-text">
+ <h1>Welcome</h1>
+ <p class="tagline">To the infinite possibilities</p>
+ </div>
+ </div>
+ <div class="message-container">
+ <p class="message">This is Welcome</p>
+ <p class="submessage">The only limit is yourself</p>
+ </div>
+</main>
+<footer>
+ <p>Welcome to Welcome. Everything is possible at Welcome.</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..525155a
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://welcome.scroll.pub
+metaTags
+editButton /edit.html
+title Welcome | Anything is Possible
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..42735b2
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01XcLv7v8Q4nVxcu4NC94WLn",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll recreate zombo.com's famous \"anything is possible\" spirit with a modern twist.\n\n---domain---\nwelcome.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://welcome.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Welcome | Anything is Possible\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<main class=\"container\">\n <div class=\"orbit-container\">\n <div class=\"orbit-ring ring1\"></div>\n <div class=\"orbit-ring ring2\"></div>\n <div class=\"orbit-ring ring3\"></div>\n <div class=\"welcome-text\">\n <h1>Welcome</h1>\n <p class=\"tagline\">To the infinite possibilities</p>\n </div>\n </div>\n <div class=\"message-container\">\n <p class=\"message\">This is Welcome</p>\n <p class=\"submessage\">The only limit is yourself</p>\n </div>\n</main>\n<footer>\n <p>Welcome to Welcome. Everything is possible at Welcome.</p>\n</footer>\n\n---style.css---\n:root {\n --primary-color: #ff3366;\n --secondary-color: #3366ff;\n --accent-color: #33ff66;\n --bg-color: #000;\n --text-color: #fff;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n background-color: var(--bg-color);\n color: var(--text-color);\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n}\n\n.container {\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 2rem;\n}\n\n.orbit-container {\n position: relative;\n width: 300px;\n height: 300px;\n margin: 2rem auto;\n}\n\n.orbit-ring {\n position: absolute;\n border-radius: 50%;\n border: 2px solid transparent;\n animation: spin 20s linear infinite;\n}\n\n.ring1 {\n width: 100%;\n height: 100%;\n border-color: var(--primary-color);\n animation-duration: 15s;\n}\n\n.ring2 {\n width: 80%;\n height: 80%;\n left: 10%;\n top: 10%;\n border-color: var(--secondary-color);\n animation-duration: 12s;\n animation-direction: reverse;\n}\n\n.ring3 {\n width: 60%;\n height: 60%;\n left: 20%;\n top: 20%;\n border-color: var(--accent-color);\n animation-duration: 9s;\n}\n\n.welcome-text {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n text-align: center;\n width: 100%;\n}\n\nh1 {\n font-size: 3rem;\n font-weight: 700;\n background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color));\n -webkit-background-clip: text;\n background-clip: text;\n color: transparent;\n animation: gradient 8s ease infinite;\n}\n\n.tagline {\n font-size: 1.2rem;\n margin-top: 0.5rem;\n opacity: 0.8;\n}\n\n.message-container {\n text-align: center;\n margin-top: 2rem;\n}\n\n.message {\n font-size: 1.5rem;\n margin-bottom: 1rem;\n}\n\n.submessage {\n font-size: 1.2rem;\n opacity: 0.8;\n}\n\nfooter {\n text-align: center;\n padding: 1rem;\n font-size: 0.9rem;\n opacity: 0.7;\n}\n\n@keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n}\n\n@keyframes gradient {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\n@media (max-width: 768px) {\n .orbit-container {\n width: 200px;\n height: 200px;\n }\n \n h1 {\n font-size: 2rem;\n }\n \n .tagline {\n font-size: 1rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const messages = [\n \"You can do anything\",\n \"The unimaginable is imaginable\",\n \"The impossible is possible\",\n \"Your potential is unlimited\",\n \"This is Welcome\"\n ];\n\n const messageElement = document.querySelector('.message');\n let currentIndex = 0;\n\n function updateMessage() {\n messageElement.style.opacity = 0;\n setTimeout(() => {\n messageElement.textContent = messages[currentIndex];\n messageElement.style.opacity = 1;\n currentIndex = (currentIndex + 1) % messages.length;\n }, 1000);\n }\n\n setInterval(updateMessage, 4000);\n\n // Add interactive cursor effect\n document.addEventListener('mousemove', (e) => {\n const rings = document.querySelectorAll('.orbit-ring');\n const x = e.clientX / window.innerWidth - 0.5;\n const y = e.clientY / window.innerHeight - 0.5;\n \n rings.forEach((ring, index) => {\n const factor = (index + 1) * 5;\n ring.style.transform = `rotate(${e.clientX / 10}deg) translate(${x * factor}px, ${y * factor}px)`;\n });\n });\n});\n\n---end---\n\nThis modern interpretation of zombo.com features:\n\n1. Mesmerizing orbital rings that react to mouse movement\n2. Smooth color gradients and animations\n3. Inspirational rotating messages\n4. Responsive design that works on all devices\n5. Clean, semantic HTML5 structure\n6. Accessible text and color contrast\n7. Performant animations using CSS transforms\n8. Interactive elements that respond to user input\n9. Modern CSS variables for easy theming\n10. Smooth fade transitions between messages\n\nThe domain \"welcome.scroll.pub\" captures the welcoming and infinite possibility spirit of the original zombo.com while being memorable and meaningful."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 274,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1741
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..b1c3096
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# welcome.scroll.pub
+Website generated by Claude from prompt: zombo.com
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8e2cfc1
--- /dev/null
+++ b/script.js
@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const messages = [
+ "You can do anything",
+ "The unimaginable is imaginable",
+ "The impossible is possible",
+ "Your potential is unlimited",
+ "This is Welcome"
+ ];
+
+ const messageElement = document.querySelector('.message');
+ let currentIndex = 0;
+
+ function updateMessage() {
+ messageElement.style.opacity = 0;
+ setTimeout(() => {
+ messageElement.textContent = messages[currentIndex];
+ messageElement.style.opacity = 1;
+ currentIndex = (currentIndex + 1) % messages.length;
+ }, 1000);
+ }
+
+ setInterval(updateMessage, 4000);
+
+ // Add interactive cursor effect
+ document.addEventListener('mousemove', (e) => {
+ const rings = document.querySelectorAll('.orbit-ring');
+ const x = e.clientX / window.innerWidth - 0.5;
+ const y = e.clientY / window.innerHeight - 0.5;
+
+ rings.forEach((ring, index) => {
+ const factor = (index + 1) * 5;
+ ring.style.transform = `rotate(${e.clientX / 10}deg) translate(${x * factor}px, ${y * factor}px)`;
+ });
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..3ab1ebf
--- /dev/null
+++ b/style.css
@@ -0,0 +1,145 @@
+:root {
+ --primary-color: #ff3366;
+ --secondary-color: #3366ff;
+ --accent-color: #33ff66;
+ --bg-color: #000;
+ --text-color: #fff;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ background-color: var(--bg-color);
+ color: var(--text-color);
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 2rem;
+}
+
+.orbit-container {
+ position: relative;
+ width: 300px;
+ height: 300px;
+ margin: 2rem auto;
+}
+
+.orbit-ring {
+ position: absolute;
+ border-radius: 50%;
+ border: 2px solid transparent;
+ animation: spin 20s linear infinite;
+}
+
+.ring1 {
+ width: 100%;
+ height: 100%;
+ border-color: var(--primary-color);
+ animation-duration: 15s;
+}
+
+.ring2 {
+ width: 80%;
+ height: 80%;
+ left: 10%;
+ top: 10%;
+ border-color: var(--secondary-color);
+ animation-duration: 12s;
+ animation-direction: reverse;
+}
+
+.ring3 {
+ width: 60%;
+ height: 60%;
+ left: 20%;
+ top: 20%;
+ border-color: var(--accent-color);
+ animation-duration: 9s;
+}
+
+.welcome-text {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ text-align: center;
+ width: 100%;
+}
+
+h1 {
+ font-size: 3rem;
+ font-weight: 700;
+ background: linear-gradient(45deg, var(--primary-color), var(--secondary-color), var(--accent-color));
+ -webkit-background-clip: text;
+ background-clip: text;
+ color: transparent;
+ animation: gradient 8s ease infinite;
+}
+
+.tagline {
+ font-size: 1.2rem;
+ margin-top: 0.5rem;
+ opacity: 0.8;
+}
+
+.message-container {
+ text-align: center;
+ margin-top: 2rem;
+}
+
+.message {
+ font-size: 1.5rem;
+ margin-bottom: 1rem;
+}
+
+.submessage {
+ font-size: 1.2rem;
+ opacity: 0.8;
+}
+
+footer {
+ text-align: center;
+ padding: 1rem;
+ font-size: 0.9rem;
+ opacity: 0.7;
+}
+
+@keyframes spin {
+ from { transform: rotate(0deg); }
+ to { transform: rotate(360deg); }
+}
+
+@keyframes gradient {
+ 0% { background-position: 0% 50%; }
+ 50% { background-position: 100% 50%; }
+ 100% { background-position: 0% 50%; }
+}
+
+@media (max-width: 768px) {
+ .orbit-container {
+ width: 200px;
+ height: 200px;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ .tagline {
+ font-size: 1rem;
+ }
+}