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 - Interactive Soccer Ball
+ style.css
+ body.html
+ script.js
prompt.json
Changed around line 1
+ {
+ "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
\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, #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"
+ }
readme.scroll
Changed around line 1
+ # 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
script.js
Changed around line 1
+ 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`;
+ }
+ });
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, #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;
+ }
+ }