commit 4eb76f0ebadcbbd682d0991fbc90196290799134
Author: root <root@hub.scroll.pub>
Date: 2024-12-29 00:21:06 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..cf677f5
--- /dev/null
+++ b/body.html
@@ -0,0 +1,3 @@
+<div class="container">
+ <div id="ball"></div>
+</div>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..6867ce3
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://bounceball.scroll.pub
+metaTags
+editButton /edit.html
+title Bounce Ball - Interactive Soccer Ball
+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..ee847ff
--- /dev/null
+++ b/prompt.json
@@ -0,0 +1,25 @@
+{
+ "id": "c7ae4729-dd16-4f3d-98ac-43b6f1d84f75",
+ "object": "chat.completion",
+ "created": 1735431657,
+ "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 - Interactive Soccer Ball\nstyle.css\nbody.html\nscript.js\n---body.html---\n<div class=\"container\">\n <div 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, #2a5298);\n overflow: hidden;\n font-family: 'Arial', sans-serif;\n}\n\n.container {\n position: relative;\n width: 100%;\n height: 100%;\n}\n\n#ball {\n position: absolute;\n width: 100px;\n height: 100px;\n background: radial-gradient(circle at 30% 30%, #ffffff, #cccccc);\n border-radius: 50%;\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);\n cursor: grab;\n transition: transform 0.1s ease-out;\n}\n\n#ball:active {\n cursor: grabbing;\n transform: scale(1.1);\n}\n\n@media (max-width: 768px) {\n #ball {\n width: 80px;\n height: 80px;\n }\n}\n---script.js---\nconst ball = document.getElementById('ball');\nlet isDragging = false;\nlet offsetX, offsetY;\n\nball.addEventListener('mousedown', (e) => {\n isDragging = true;\n offsetX = e.clientX - ball.getBoundingClientRect().left;\n offsetY = e.clientY - ball.getBoundingClientRect().top;\n ball.style.transition = 'none';\n});\n\ndocument.addEventListener('mousemove', (e) => {\n if (isDragging) {\n const x = e.clientX - offsetX;\n const y = e.clientY - offsetY;\n ball.style.left = `${x}px`;\n ball.style.top = `${y}px`;\n }\n});\n\ndocument.addEventListener('mouseup', () => {\n if (isDragging) {\n isDragging = false;\n ball.style.transition = 'all 0.5s ease-out';\n const ballRect = ball.getBoundingClientRect();\n const containerRect = document.querySelector('.container').getBoundingClientRect();\n\n let newX = ballRect.left;\n let newY = ballRect.top;\n\n if (ballRect.left < containerRect.left) {\n newX = containerRect.left;\n } else if (ballRect.right > containerRect.right) {\n newX = containerRect.right - ballRect.width;\n }\n\n if (ballRect.top < containerRect.top) {\n newY = containerRect.top;\n } else if (ballRect.bottom > containerRect.bottom) {\n newY = containerRect.bottom - ballRect.height;\n }\n\n ball.style.left = `${newX}px`;\n ball.style.top = `${newY}px`;\n }\n});\n---end---"
+ },
+ "logprobs": null,
+ "finish_reason": "stop"
+ }
+ ],
+ "usage": {
+ "prompt_tokens": 257,
+ "completion_tokens": 701,
+ "total_tokens": 958,
+ "prompt_cache_hit_tokens": 0,
+ "prompt_cache_miss_tokens": 257
+ },
+ "system_fingerprint": "fp_f1afce2943"
+}
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..8e8d9a4
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# bounceball.scroll.pub
+Website generated by DeepSeek from prompt: create a site that have a realistics soccer ball that can be hold with the mouse and when released it bounces
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..92ba8bb
--- /dev/null
+++ b/script.js
@@ -0,0 +1,46 @@
+const ball = document.getElementById('ball');
+let isDragging = false;
+let offsetX, offsetY;
+
+ball.addEventListener('mousedown', (e) => {
+ isDragging = true;
+ offsetX = e.clientX - ball.getBoundingClientRect().left;
+ offsetY = e.clientY - ball.getBoundingClientRect().top;
+ ball.style.transition = 'none';
+});
+
+document.addEventListener('mousemove', (e) => {
+ if (isDragging) {
+ const x = e.clientX - offsetX;
+ const y = e.clientY - offsetY;
+ ball.style.left = `${x}px`;
+ ball.style.top = `${y}px`;
+ }
+});
+
+document.addEventListener('mouseup', () => {
+ if (isDragging) {
+ isDragging = false;
+ ball.style.transition = 'all 0.5s ease-out';
+ const ballRect = ball.getBoundingClientRect();
+ const containerRect = document.querySelector('.container').getBoundingClientRect();
+
+ let newX = ballRect.left;
+ let newY = ballRect.top;
+
+ if (ballRect.left < containerRect.left) {
+ newX = containerRect.left;
+ } else if (ballRect.right > containerRect.right) {
+ newX = containerRect.right - ballRect.width;
+ }
+
+ if (ballRect.top < containerRect.top) {
+ newY = containerRect.top;
+ } else if (ballRect.bottom > containerRect.bottom) {
+ newY = containerRect.bottom - ballRect.height;
+ }
+
+ ball.style.left = `${newX}px`;
+ ball.style.top = `${newY}px`;
+ }
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..2b17318
--- /dev/null
+++ b/style.css
@@ -0,0 +1,44 @@
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+ background: linear-gradient(135deg, #1e3c72, #2a5298);
+ overflow: hidden;
+ font-family: 'Arial', sans-serif;
+}
+
+.container {
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+
+#ball {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ background: radial-gradient(circle at 30% 30%, #ffffff, #cccccc);
+ border-radius: 50%;
+ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+ cursor: grab;
+ transition: transform 0.1s ease-out;
+}
+
+#ball:active {
+ cursor: grabbing;
+ transform: scale(1.1);
+}
+
+@media (max-width: 768px) {
+ #ball {
+ width: 80px;
+ height: 80px;
+ }
+}
\ No newline at end of file