commit a71ff55a6263977a8ad719c0ba57f47b84eac700
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 00:22:24 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..2d7f39a
--- /dev/null
+++ b/body.html
@@ -0,0 +1,3 @@
+<div class="container">
+ <div class="ball" id="ball"></div>
+</div>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..8ef9a38
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://bounceball.scroll.pub
+metaTags
+editButton /edit.html
+title Bounce Ball - A Realistic Ball Simulation
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/prompt.json b/prompt.json
new file mode 100644
index 0000000..a70561d
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "a40e9554-2a3b-420b-8bdf-f94a827551fe",
+ "object": "chat.completion",
+ "created": 1735431735,
+ "model": "deepseek-chat",
+ "choices": [
+ {
+ "index": 0,
+ "message": {
+ "role": "assistant",
+ "content": "---domain---\nbounceball.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://bounceball.scroll.pub\nmetaTags\neditButton /edit.html\ntitle Bounce Ball - A Realistic Ball Simulation\nstyle.css\nbody.html\nscript.js\n---body.html---\n<div class=\"container\">\n <div class=\"ball\" id=\"ball\"></div>\n</div>\n---style.css---\n* {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n}\n\nbody {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100vh;\n background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);\n font-family: 'Arial', sans-serif;\n overflow: hidden;\n}\n\n.container {\n position: relative;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n}\n\n.ball {\n width: 100px;\n height: 100px;\n background: radial-gradient(circle at 30% 30%, #ffffff, #ffcc00);\n border-radius: 50%;\n box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);\n cursor: grab;\n position: absolute;\n transition: transform 0.1s ease-out;\n}\n\n.ball:active {\n cursor: grabbing;\n}\n\n@keyframes bounce {\n 0%, 100% {\n transform: translateY(0);\n }\n 50% {\n transform: translateY(-200px);\n }\n}\n---script.js---\nconst ball = document.getElementById('ball');\nlet isHeld = false;\nlet startY = 0;\nlet currentY = 0;\nlet velocity = 0;\nconst gravity = 0.5;\nconst bounceFactor = -0.7;\n\nball.addEventListener('mousedown', (e) => {\n isHeld = true;\n startY = e.clientY - currentY;\n ball.style.transition = 'none';\n});\n\nwindow.addEventListener('mousemove', (e) => {\n if (isHeld) {\n currentY = e.clientY - startY;\n ball.style.transform = `translateY(${currentY}px)`;\n }\n});\n\nwindow.addEventListener('mouseup', () => {\n if (isHeld) {\n isHeld = false;\n velocity = 0;\n ball.style.transition = 'transform 0.1s ease-out';\n animateBall();\n }\n});\n\nfunction animateBall() {\n if (!isHeld) {\n velocity += gravity;\n currentY += velocity;\n\n if (currentY > 0) {\n currentY = 0;\n velocity *= bounceFactor;\n }\n\n ball.style.transform = `translateY(${currentY}px)`;\n\n if (Math.abs(velocity) > 0.1) {\n requestAnimationFrame(animateBall);\n }\n }\n}\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 259,
+ "completion_tokens": 659,
+ "total_tokens": 918,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 259
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..50b347a
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# bounceball1.scroll.pub
+Website generated by DeepSeek from prompt: create a site that have a realistic ball that can be hold with the mouse and when released it bounces up and down vertically
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..864d134
--- /dev/null
+++ b/script.js
@@ -0,0 +1,47 @@
+const ball = document.getElementById('ball');
+let isHeld = false;
+let startY = 0;
+let currentY = 0;
+let velocity = 0;
+const gravity = 0.5;
+const bounceFactor = -0.7;
+
+ball.addEventListener('mousedown', (e) => {
+ isHeld = true;
+ startY = e.clientY - currentY;
+ ball.style.transition = 'none';
+});
+
+window.addEventListener('mousemove', (e) => {
+ if (isHeld) {
+ currentY = e.clientY - startY;
+ ball.style.transform = `translateY(${currentY}px)`;
+ }
+});
+
+window.addEventListener('mouseup', () => {
+ if (isHeld) {
+ isHeld = false;
+ velocity = 0;
+ ball.style.transition = 'transform 0.1s ease-out';
+ animateBall();
+ }
+});
+
+function animateBall() {
+ if (!isHeld) {
+ velocity += gravity;
+ currentY += velocity;
+
+ if (currentY > 0) {
+ currentY = 0;
+ velocity *= bounceFactor;
+ }
+
+ ball.style.transform = `translateY(${currentY}px)`;
+
+ if (Math.abs(velocity) > 0.1) {
+ requestAnimationFrame(animateBall);
+ }
+ }
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..70a3eec
--- /dev/null
+++ b/style.css
@@ -0,0 +1,48 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
+ font-family: 'Arial', sans-serif;
+ overflow: hidden;
+}
+
+.container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.ball {
+ width: 100px;
+ height: 100px;
+ background: radial-gradient(circle at 30% 30%, #ffffff, #ffcc00);
+ border-radius: 50%;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+ cursor: grab;
+ position: absolute;
+ transition: transform 0.1s ease-out;
+}
+
+.ball:active {
+ cursor: grabbing;
+}
+
+@keyframes bounce {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-200px);
+ }
+}
\ No newline at end of file