commit a8e0204a251f8267eb86eacb6c64f787368830e0
Author: root <root@hub.scroll.pub>
Date: 2024-12-28 07:15:58 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..c2b265c
--- /dev/null
+++ b/body.html
@@ -0,0 +1,30 @@
+<header>
+ <h1>Virtual Climb Simulator</h1>
+ <p>Scroll to control your climber's journey</p>
+</header>
+
+<main>
+ <div class="scene">
+ <div class="mountain">
+ <div class="climber" aria-label="Climbing character">
+ <div class="head"></div>
+ <div class="body"></div>
+ <div class="arm-left"></div>
+ <div class="arm-right"></div>
+ <div class="leg-left"></div>
+ <div class="leg-right"></div>
+ </div>
+ </div>
+ <div class="progress-indicator">
+ <div class="altitude">0m</div>
+ </div>
+ </div>
+ <div class="instructions">
+ <h2>How to Play</h2>
+ <p>Scroll up or down to control your climber's movement on the mountain.</p>
+ </div>
+</main>
+
+<footer>
+ <p>Made with passion by Virtual Climb Simulator</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..c74e5a4
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://climb.scroll.pub
+metaTags
+editButton /edit.html
+title Virtual Climb Simulator
+style.css
+body.html
+script.js
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..4905390
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,20 @@
+{
+ "id": "msg_01NShRKbS8UX9U8qMLzmsWrV",
+ "type": "message",
+ "role": "assistant",
+ "model": "claude-3-5-sonnet-20241022",
+ "content": [
+ {
+ "type": "text",
+ "text": "Here's my implementation for a scroll-based climbing simulator website:\n\n---domain---\nclimb.scroll.pub\n\n---index.scroll---\nbuildHtml\nbaseUrl https://climb.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Virtual Climb Simulator\nstyle.css\nbody.html\nscript.js\n\n---body.html---\n<header>\n <h1>Virtual Climb Simulator</h1>\n <p>Scroll to control your climber's journey</p>\n</header>\n\n<main>\n <div class=\"scene\">\n <div class=\"mountain\">\n <div class=\"climber\" aria-label=\"Climbing character\">\n <div class=\"head\"></div>\n <div class=\"body\"></div>\n <div class=\"arm-left\"></div>\n <div class=\"arm-right\"></div>\n <div class=\"leg-left\"></div>\n <div class=\"leg-right\"></div>\n </div>\n </div>\n <div class=\"progress-indicator\">\n <div class=\"altitude\">0m</div>\n </div>\n </div>\n <div class=\"instructions\">\n <h2>How to Play</h2>\n <p>Scroll up or down to control your climber's movement on the mountain.</p>\n </div>\n</main>\n\n<footer>\n <p>Made with passion by Virtual Climb Simulator</p>\n</footer>\n\n---style.css---\n:root {\n --mountain-color: #2d3436;\n --sky-color: #74b9ff;\n --climber-color: #e17055;\n}\n\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n font-family: system-ui, -apple-system, sans-serif;\n background: var(--sky-color);\n min-height: 100vh;\n overflow-x: hidden;\n}\n\nheader {\n text-align: center;\n padding: 2rem;\n color: white;\n text-shadow: 2px 2px 4px rgba(0,0,0,0.3);\n}\n\n.scene {\n position: fixed;\n width: 100%;\n height: 100vh;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.mountain {\n width: 100%;\n height: 200%;\n background: var(--mountain-color);\n clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);\n position: relative;\n transform: translateY(30%);\n}\n\n.climber {\n width: 40px;\n height: 60px;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n transition: top 0.3s ease-out;\n}\n\n.head {\n width: 20px;\n height: 20px;\n background: var(--climber-color);\n border-radius: 50%;\n position: absolute;\n top: 0;\n left: 10px;\n}\n\n.body {\n width: 20px;\n height: 30px;\n background: var(--climber-color);\n position: absolute;\n top: 20px;\n left: 10px;\n}\n\n.arm-left, .arm-right {\n width: 10px;\n height: 20px;\n background: var(--climber-color);\n position: absolute;\n top: 20px;\n}\n\n.arm-left {\n left: 0;\n transform-origin: top right;\n}\n\n.arm-right {\n right: 0;\n transform-origin: top left;\n}\n\n.leg-left, .leg-right {\n width: 10px;\n height: 20px;\n background: var(--climber-color);\n position: absolute;\n top: 45px;\n}\n\n.leg-left {\n left: 5px;\n}\n\n.leg-right {\n right: 5px;\n}\n\n.progress-indicator {\n position: fixed;\n right: 2rem;\n top: 50%;\n transform: translateY(-50%);\n background: rgba(255,255,255,0.9);\n padding: 1rem;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.instructions {\n position: fixed;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(255,255,255,0.9);\n padding: 1rem 2rem;\n border-radius: 8px;\n text-align: center;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\nfooter {\n position: fixed;\n bottom: 0;\n width: 100%;\n text-align: center;\n padding: 1rem;\n color: white;\n text-shadow: 1px 1px 2px rgba(0,0,0,0.3);\n}\n\n@media (max-width: 768px) {\n .instructions {\n width: 90%;\n font-size: 0.9rem;\n }\n}\n\n---script.js---\ndocument.addEventListener('DOMContentLoaded', () => {\n const climber = document.querySelector('.climber');\n const altitudeDisplay = document.querySelector('.altitude');\n const maxScroll = document.documentElement.scrollHeight - window.innerHeight;\n let lastScrollPosition = 0;\n \n // Animation states for climber\n const animateClimber = (scrollDirection) => {\n const arms = document.querySelectorAll('.arm-left, .arm-right');\n const legs = document.querySelectorAll('.leg-left, .leg-right');\n \n arms.forEach(arm => {\n arm.style.transition = 'transform 0.3s ease-out';\n arm.style.transform = scrollDirection === 'up' \n ? 'rotate(-45deg)' \n : 'rotate(45deg)';\n });\n \n legs.forEach(leg => {\n leg.style.transition = 'transform 0.3s ease-out';\n leg.style.transform = scrollDirection === 'up' \n ? 'rotate(45deg)' \n : 'rotate(-45deg)';\n });\n };\n \n // Reset animation\n const resetAnimation = () => {\n const limbs = document.querySelectorAll('.arm-left, .arm-right, .leg-left, .leg-right');\n limbs.forEach(limb => {\n limb.style.transform = 'rotate(0deg)';\n });\n };\n\n window.addEventListener('scroll', () => {\n const currentScroll = window.pageYOffset;\n const scrollDirection = currentScroll > lastScrollPosition ? 'down' : 'up';\n \n // Calculate climber position (inverted for natural climbing feel)\n const scrollPercentage = 1 - (currentScroll / maxScroll);\n const climberPosition = 80 - (scrollPercentage * 60); // Climb range: 20% to 80%\n \n // Update climber position\n climber.style.top = `${climberPosition}%`;\n \n // Update altitude display\n const altitude = Math.round(scrollPercentage * 1000);\n altitudeDisplay.textContent = `${altitude}m`;\n \n // Animate climber\n if (currentScroll !== lastScrollPosition) {\n animateClimber(scrollDirection);\n } else {\n resetAnimation();\n }\n \n lastScrollPosition = currentScroll;\n });\n \n // Set initial position\n climber.style.top = '80%';\n});\n\n---end---\n\nThis implementation creates an engaging climbing simulator where:\n\n1. The climber moves up/down as the user scrolls\n2. The character has basic animations for climbing movements\n3. There's a height indicator showing current altitude\n4. The mountain creates a sense of perspective\n5. The design is clean and responsive\n6. Smooth animations enhance the experience\n7. Clear instructions guide the user\n8. The color scheme is pleasing and cohesive\n\nThe website is fully responsive and works on both desktop and mobile devices. The climbing character is created using pure CSS shapes that animate based on scroll direction."
+ }
+ ],
+ "stop_reason": "end_turn",
+ "stop_sequence": null,
+ "usage": {
+ "input_tokens": 292,
+ "cache_creation_input_tokens": 0,
+ "cache_read_input_tokens": 0,
+ "output_tokens": 2131
+ }
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..f9ad04b
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# climb1.scroll.pub
+Website generated by Claude from prompt: i want a website that simulate the progress of climbing using a virtual character, such as climbing up or descending.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..c61ffe2
--- /dev/null
+++ b/script.js
@@ -0,0 +1,62 @@
+document.addEventListener('DOMContentLoaded', () => {
+ const climber = document.querySelector('.climber');
+ const altitudeDisplay = document.querySelector('.altitude');
+ const maxScroll = document.documentElement.scrollHeight - window.innerHeight;
+ let lastScrollPosition = 0;
+
+ // Animation states for climber
+ const animateClimber = (scrollDirection) => {
+ const arms = document.querySelectorAll('.arm-left, .arm-right');
+ const legs = document.querySelectorAll('.leg-left, .leg-right');
+
+ arms.forEach(arm => {
+ arm.style.transition = 'transform 0.3s ease-out';
+ arm.style.transform = scrollDirection === 'up'
+ ? 'rotate(-45deg)'
+ : 'rotate(45deg)';
+ });
+
+ legs.forEach(leg => {
+ leg.style.transition = 'transform 0.3s ease-out';
+ leg.style.transform = scrollDirection === 'up'
+ ? 'rotate(45deg)'
+ : 'rotate(-45deg)';
+ });
+ };
+
+ // Reset animation
+ const resetAnimation = () => {
+ const limbs = document.querySelectorAll('.arm-left, .arm-right, .leg-left, .leg-right');
+ limbs.forEach(limb => {
+ limb.style.transform = 'rotate(0deg)';
+ });
+ };
+
+ window.addEventListener('scroll', () => {
+ const currentScroll = window.pageYOffset;
+ const scrollDirection = currentScroll > lastScrollPosition ? 'down' : 'up';
+
+ // Calculate climber position (inverted for natural climbing feel)
+ const scrollPercentage = 1 - (currentScroll / maxScroll);
+ const climberPosition = 80 - (scrollPercentage * 60); // Climb range: 20% to 80%
+
+ // Update climber position
+ climber.style.top = `${climberPosition}%`;
+
+ // Update altitude display
+ const altitude = Math.round(scrollPercentage * 1000);
+ altitudeDisplay.textContent = `${altitude}m`;
+
+ // Animate climber
+ if (currentScroll !== lastScrollPosition) {
+ animateClimber(scrollDirection);
+ } else {
+ resetAnimation();
+ }
+
+ lastScrollPosition = currentScroll;
+ });
+
+ // Set initial position
+ climber.style.top = '80%';
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..231502e
--- /dev/null
+++ b/style.css
@@ -0,0 +1,145 @@
+:root {
+ --mountain-color: #2d3436;
+ --sky-color: #74b9ff;
+ --climber-color: #e17055;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: system-ui, -apple-system, sans-serif;
+ background: var(--sky-color);
+ min-height: 100vh;
+ overflow-x: hidden;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ color: white;
+ text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
+}
+
+.scene {
+ position: fixed;
+ width: 100%;
+ height: 100vh;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.mountain {
+ width: 100%;
+ height: 200%;
+ background: var(--mountain-color);
+ clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
+ position: relative;
+ transform: translateY(30%);
+}
+
+.climber {
+ width: 40px;
+ height: 60px;
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ transition: top 0.3s ease-out;
+}
+
+.head {
+ width: 20px;
+ height: 20px;
+ background: var(--climber-color);
+ border-radius: 50%;
+ position: absolute;
+ top: 0;
+ left: 10px;
+}
+
+.body {
+ width: 20px;
+ height: 30px;
+ background: var(--climber-color);
+ position: absolute;
+ top: 20px;
+ left: 10px;
+}
+
+.arm-left, .arm-right {
+ width: 10px;
+ height: 20px;
+ background: var(--climber-color);
+ position: absolute;
+ top: 20px;
+}
+
+.arm-left {
+ left: 0;
+ transform-origin: top right;
+}
+
+.arm-right {
+ right: 0;
+ transform-origin: top left;
+}
+
+.leg-left, .leg-right {
+ width: 10px;
+ height: 20px;
+ background: var(--climber-color);
+ position: absolute;
+ top: 45px;
+}
+
+.leg-left {
+ left: 5px;
+}
+
+.leg-right {
+ right: 5px;
+}
+
+.progress-indicator {
+ position: fixed;
+ right: 2rem;
+ top: 50%;
+ transform: translateY(-50%);
+ background: rgba(255,255,255,0.9);
+ padding: 1rem;
+ border-radius: 8px;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+.instructions {
+ position: fixed;
+ bottom: 2rem;
+ left: 50%;
+ transform: translateX(-50%);
+ background: rgba(255,255,255,0.9);
+ padding: 1rem 2rem;
+ border-radius: 8px;
+ text-align: center;
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+}
+
+footer {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ text-align: center;
+ padding: 1rem;
+ color: white;
+ text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
+}
+
+@media (max-width: 768px) {
+ .instructions {
+ width: 90%;
+ font-size: 0.9rem;
+ }
+}