commit 0bc307a2cc152405e891c6f8477ae5ef8561dc04
Author: root <root@hub.scroll.pub>
Date: 2025-01-06 19:36:01 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..9e1fc03
--- /dev/null
+++ b/body.html
@@ -0,0 +1,20 @@
+<main class="welcome-container">
+ <div class="spiral-container">
+ <div class="spiral"></div>
+ </div>
+
+ <div class="welcome-content">
+ <h1>Welcome!</h1>
+ <p class="tagline">This is Welcome.scroll.pub</p>
+ <div class="messages">
+ <p class="message">The infinite is possible</p>
+ <p class="message">You can do anything</p>
+ <p class="message">The only limit is yourself</p>
+ <p class="message">Welcome to Welcome.scroll.pub</p>
+ </div>
+ </div>
+
+ <footer>
+ <p>Made with love for the infinite possibilities of the web</p>
+ </footer>
+</main>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..6fe6e2d
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://welcome.scroll.pub
+metaTags
+editButton /edit.html
+title Welcome to Welcome.scroll.pub - The Infinite Is Possible
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..9fd7b53
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01BKZy9SHK17xPAc6MSqNT7F",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "I'll recreate a modern version of the classic zombo.com with a hypnotic, welcoming experience.\n\n---domain---\nwelcome.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://welcome.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Welcome to Welcome.scroll.pub - The Infinite Is Possible\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<main class=\"welcome-container\">\n <div class=\"spiral-container\">\n <div class=\"spiral\"></div>\n </div>\n \n <div class=\"welcome-content\">\n <h1>Welcome!</h1>\n <p class=\"tagline\">This is Welcome.scroll.pub</p>\n <div class=\"messages\">\n <p class=\"message\">The infinite is possible</p>\n <p class=\"message\">You can do anything</p>\n <p class=\"message\">The only limit is yourself</p>\n <p class=\"message\">Welcome to Welcome.scroll.pub</p>\n </div>\n </div>\n\n <footer>\n <p>Made with love for the infinite possibilities of the web</p>\n </footer>\n</main>\n\n---style.css---\n:root {\n --primary-color: #ff00ff;\n --secondary-color: #00ffff;\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: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;\n min-height: 100vh;\n overflow: hidden;\n}\n\n.welcome-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n padding: 2rem;\n position: relative;\n}\n\n.spiral-container {\n position: fixed;\n width: 100vw;\n height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1;\n}\n\n.spiral {\n width: 80vmin;\n height: 80vmin;\n border: 2px solid var(--primary-color);\n border-radius: 50%;\n animation: spiral 8s linear infinite;\n box-shadow: 0 0 50px var(--primary-color);\n position: relative;\n}\n\n.spiral::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 100%;\n height: 100%;\n border: 2px solid var(--secondary-color);\n border-radius: 50%;\n transform: translate(-50%, -50%);\n animation: spiral-reverse 6s linear infinite;\n}\n\n.welcome-content {\n position: relative;\n z-index: 2;\n text-align: center;\n}\n\nh1 {\n font-size: 4rem;\n margin-bottom: 1rem;\n text-shadow: 0 0 10px var(--primary-color);\n animation: glow 2s ease-in-out infinite alternate;\n}\n\n.tagline {\n font-size: 1.5rem;\n margin-bottom: 2rem;\n opacity: 0.8;\n}\n\n.messages {\n height: 2em;\n overflow: hidden;\n}\n\n.message {\n font-size: 1.25rem;\n opacity: 0;\n transform: translateY(100%);\n animation: messageFloat 16s linear infinite;\n}\n\n.message:nth-child(2) { animation-delay: 4s; }\n.message:nth-child(3) { animation-delay: 8s; }\n.message:nth-child(4) { animation-delay: 12s; }\n\nfooter {\n position: fixed;\n bottom: 1rem;\n text-align: center;\n font-size: 0.875rem;\n opacity: 0.6;\n}\n\n@keyframes spiral {\n from { transform: rotate(0deg) scale(0.8); }\n to { transform: rotate(360deg) scale(1.2); }\n}\n\n@keyframes spiral-reverse {\n from { transform: translate(-50%, -50%) rotate(360deg) scale(1.2); }\n to { transform: translate(-50%, -50%) rotate(0deg) scale(0.8); }\n}\n\n@keyframes glow {\n from { text-shadow: 0 0 10px var(--primary-color); }\n to { text-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--secondary-color); }\n}\n\n@keyframes messageFloat {\n 0% { opacity: 0; transform: translateY(100%); }\n 5% { opacity: 1; transform: translateY(0); }\n 20% { opacity: 1; transform: translateY(0); }\n 25% { opacity: 0; transform: translateY(-100%); }\n 100% { opacity: 0; transform: translateY(-100%); }\n}\n\n@media (max-width: 768px) {\n h1 { font-size: 2.5rem; }\n .tagline { font-size: 1.25rem; }\n .message { font-size: 1rem; }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const spiral = document.querySelector('.spiral');\n let mouseX = 0;\n let mouseY = 0;\n\n // Parallax effect on spiral\n document.addEventListener('mousemove', (e) => {\n mouseX = (e.clientX / window.innerWidth - 0.5) * 20;\n mouseY = (e.clientY / window.innerHeight - 0.5) * 20;\n \n spiral.style.transform = `translate(${mouseX}px, ${mouseY}px) scale(1)`;\n });\n\n // Add touch interaction for mobile\n let touchStartX = 0;\n let touchStartY = 0;\n\n document.addEventListener('touchstart', (e) => {\n touchStartX = e.touches[0].clientX;\n touchStartY = e.touches[0].clientY;\n });\n\n document.addEventListener('touchmove', (e) => {\n e.preventDefault();\n const touchX = (e.touches[0].clientX - touchStartX) / 50;\n const touchY = (e.touches[0].clientY - touchStartY) / 50;\n \n spiral.style.transform = `translate(${touchX}px, ${touchY}px) scale(1)`;\n });\n\n // Reset transform on touch end\n document.addEventListener('touchend', () => {\n spiral.style.transform = 'translate(0, 0) scale(1)';\n });\n});\n\n---end---\n\nThis modern interpretation of zombo.com features:\n\n1. A hypnotic animated spiral with mouse/touch interactivity\n2. Floating welcome messages\n3. Glowing text effects\n4. Responsive design\n5. Smooth animations\n6. Clean, semantic HTML\n7. Modern CSS with variables and animations\n8. Interactive JavaScript elements\n9. Accessibility considerations\n10. Mobile-friendly interface\n\nThe domain \"welcome.scroll.pub\" was chosen to represent the welcoming, infinite nature of the original zombo.com while maintaining a modern, clean approach."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 274,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 1907
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..a49db2d
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# welcome1.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..f02a1e0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,35 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const spiral = document.querySelector('.spiral');
+ let mouseX = 0;
+ let mouseY = 0;
+
+ // Parallax effect on spiral
+ document.addEventListener('mousemove', (e) => {
+ mouseX = (e.clientX / window.innerWidth - 0.5) * 20;
+ mouseY = (e.clientY / window.innerHeight - 0.5) * 20;
+
+ spiral.style.transform = `translate(${mouseX}px, ${mouseY}px) scale(1)`;
+ });
+
+ // Add touch interaction for mobile
+ let touchStartX = 0;
+ let touchStartY = 0;
+
+ document.addEventListener('touchstart', (e) => {
+ touchStartX = e.touches[0].clientX;
+ touchStartY = e.touches[0].clientY;
+ });
+
+ document.addEventListener('touchmove', (e) => {
+ e.preventDefault();
+ const touchX = (e.touches[0].clientX - touchStartX) / 50;
+ const touchY = (e.touches[0].clientY - touchStartY) / 50;
+
+ spiral.style.transform = `translate(${touchX}px, ${touchY}px) scale(1)`;
+ });
+
+ // Reset transform on touch end
+ document.addEventListener('touchend', () => {
+ spiral.style.transform = 'translate(0, 0) scale(1)';
+ });
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..024f568
--- /dev/null
+++ b/style.css
@@ -0,0 +1,135 @@
+:root {
+ --primary-color: #ff00ff;
+ --secondary-color: #00ffff;
+ --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: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
+ min-height: 100vh;
+ overflow: hidden;
+}
+
+.welcome-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ min-height: 100vh;
+ padding: 2rem;
+ position: relative;
+}
+
+.spiral-container {
+ position: fixed;
+ width: 100vw;
+ height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 1;
+}
+
+.spiral {
+ width: 80vmin;
+ height: 80vmin;
+ border: 2px solid var(--primary-color);
+ border-radius: 50%;
+ animation: spiral 8s linear infinite;
+ box-shadow: 0 0 50px var(--primary-color);
+ position: relative;
+}
+
+.spiral::before {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ width: 100%;
+ height: 100%;
+ border: 2px solid var(--secondary-color);
+ border-radius: 50%;
+ transform: translate(-50%, -50%);
+ animation: spiral-reverse 6s linear infinite;
+}
+
+.welcome-content {
+ position: relative;
+ z-index: 2;
+ text-align: center;
+}
+
+h1 {
+ font-size: 4rem;
+ margin-bottom: 1rem;
+ text-shadow: 0 0 10px var(--primary-color);
+ animation: glow 2s ease-in-out infinite alternate;
+}
+
+.tagline {
+ font-size: 1.5rem;
+ margin-bottom: 2rem;
+ opacity: 0.8;
+}
+
+.messages {
+ height: 2em;
+ overflow: hidden;
+}
+
+.message {
+ font-size: 1.25rem;
+ opacity: 0;
+ transform: translateY(100%);
+ animation: messageFloat 16s linear infinite;
+}
+
+.message:nth-child(2) { animation-delay: 4s; }
+.message:nth-child(3) { animation-delay: 8s; }
+.message:nth-child(4) { animation-delay: 12s; }
+
+footer {
+ position: fixed;
+ bottom: 1rem;
+ text-align: center;
+ font-size: 0.875rem;
+ opacity: 0.6;
+}
+
+@keyframes spiral {
+ from { transform: rotate(0deg) scale(0.8); }
+ to { transform: rotate(360deg) scale(1.2); }
+}
+
+@keyframes spiral-reverse {
+ from { transform: translate(-50%, -50%) rotate(360deg) scale(1.2); }
+ to { transform: translate(-50%, -50%) rotate(0deg) scale(0.8); }
+}
+
+@keyframes glow {
+ from { text-shadow: 0 0 10px var(--primary-color); }
+ to { text-shadow: 0 0 20px var(--primary-color), 0 0 30px var(--secondary-color); }
+}
+
+@keyframes messageFloat {
+ 0% { opacity: 0; transform: translateY(100%); }
+ 5% { opacity: 1; transform: translateY(0); }
+ 20% { opacity: 1; transform: translateY(0); }
+ 25% { opacity: 0; transform: translateY(-100%); }
+ 100% { opacity: 0; transform: translateY(-100%); }
+}
+
+@media (max-width: 768px) {
+ h1 { font-size: 2.5rem; }
+ .tagline { font-size: 1.25rem; }
+ .message { font-size: 1rem; }
+}