body.html
Changed around line 1
+
+
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://bounceball.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Bounce Ball - A Realistic Ball Simulation
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "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
\n \n
\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"
+ }
readme.scroll
Changed around line 1
+ # 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
script.js
Changed around line 1
+ 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);
+ }
+ }
+ }
style.css
Changed around line 1
+ * {
+ 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);
+ }
+ }