Changes to moveit.scroll.pub

root

25 days ago

Initial commit

body.html

Changed around line 1
+ 
+   MoveIt
+   Create, manipulate, and move 2D objects with arrow keys
+ 
+ 
+   
+     
+   
+   
+     
+     
+     
+   
+ 
+ 
+   Use arrow keys to move selected object
+ 

index.scroll

Changed around line 1
+ buildHtml
+ baseUrl https://moveit.scroll.pub
+ metaTags
+ editButton /edit.html
+ title MoveIt - Create and Manipulate 2D Objects
+ style.css
+ body.html
+ script.js

prompt.json

Changed around line 1
+ {
+   "id": "72f7ffc4-037b-44b7-8875-51ce7185e625",
+   "object": "chat.completion",
+   "created": 1735343713,
+   "model": "deepseek-chat",
+   "choices": [
+     {
+       "index": 0,
+       "message": {
+         "role": "assistant",
+         "content": "---domain---\nmoveit.scroll.pub\n---index.scroll---\nbuildHtml\nbaseUrl https://moveit.scroll.pub\nmetaTags\neditButton /edit.html\ntitle MoveIt - Create and Manipulate 2D Objects\nstyle.css\nbody.html\nscript.js\n---body.html---\n\n  MoveIt\n  Create, manipulate, and move 2D objects with arrow keys
\n\n\n  \n    \n  
\n  \n    \n    \n    \n  
\n\n\n  Use arrow keys to move selected object
\n\n---style.css---\n:root {\n  --primary-color: #4a90e2;\n  --secondary-color: #50e3c2;\n  --background-color: #f5f5f5;\n  --text-color: #333;\n}\n\nbody {\n  font-family: 'Segoe UI', sans-serif;\n  margin: 0;\n  padding: 0;\n  background-color: var(--background-color);\n  color: var(--text-color);\n  min-height: 100vh;\n  display: flex;\n  flex-direction: column;\n}\n\nheader {\n  background-color: var(--primary-color);\n  color: white;\n  padding: 2rem;\n  text-align: center;\n}\n\nmain {\n  flex: 1;\n  padding: 2rem;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n\n.canvas-container {\n  width: 100%;\n  max-width: 800px;\n  height: 600px;\n  border: 2px solid var(--primary-color);\n  border-radius: 8px;\n  overflow: hidden;\n  background-color: white;\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n}\n\ncanvas {\n  width: 100%;\n  height: 100%;\n}\n\n.controls {\n  margin-top: 1rem;\n  display: flex;\n  gap: 1rem;\n}\n\nbutton {\n  padding: 0.75rem 1.5rem;\n  border: none;\n  border-radius: 4px;\n  background-color: var(--primary-color);\n  color: white;\n  cursor: pointer;\n  transition: background-color 0.3s ease;\n}\n\nbutton:hover {\n  background-color: var(--secondary-color);\n}\n\nfooter {\n  background-color: var(--primary-color);\n  color: white;\n  padding: 1rem;\n  text-align: center;\n}\n\n@media (max-width: 768px) {\n  .canvas-container {\n    height: 400px;\n  }\n  \n  .controls {\n    flex-direction: column;\n    width: 100%;\n  }\n  \n  button {\n    width: 100%;\n  }\n}\n---script.js---\nconst canvas = document.getElementById('canvas');\nconst ctx = canvas.getContext('2d');\nconst addRectangleBtn = document.getElementById('add-rectangle');\nconst addCircleBtn = document.getElementById('add-circle');\nconst clearAllBtn = document.getElementById('clear-all');\n\nlet objects = [];\nlet selectedObject = null;\n\nclass Shape {\n  constructor(x, y, width, height, type) {\n    this.x = x;\n    this.y = y;\n    this.width = width;\n    this.height = height;\n    this.type = type;\n    this.color = `hsl(${Math.random() * 360}, 50%, 50%)`;\n  }\n\n  draw() {\n    ctx.fillStyle = this.color;\n    if (this.type === 'rectangle') {\n      ctx.fillRect(this.x, this.y, this.width, this.height);\n    } else if (this.type === 'circle') {\n      ctx.beginPath();\n      ctx.arc(this.x, this.y, this.width / 2, 0, Math.PI * 2);\n      ctx.fill();\n    }\n  }\n\n  isPointInside(px, py) {\n    if (this.type === 'rectangle') {\n      return px >= this.x && px <= this.x + this.width &&\n             py >= this.y && py <= this.y + this.height;\n    } else if (this.type === 'circle') {\n      const dx = px - this.x;\n      const dy = py - this.y;\n      return Math.sqrt(dx * dx + dy * dy) <= this.width / 2;\n    }\n    return false;\n  }\n}\n\nfunction addRectangle() {\n  const rect = new Shape(100, 100, 100, 100, 'rectangle');\n  objects.push(rect);\n  selectedObject = rect;\n  drawScene();\n}\n\nfunction addCircle() {\n  const circle = new Shape(100, 100, 100, 100, 'circle');\n  objects.push(circle);\n  selectedObject = circle;\n  drawScene();\n}\n\nfunction clearAll() {\n  objects = [];\n  selectedObject = null;\n  drawScene();\n}\n\nfunction drawScene() {\n  ctx.clearRect(0, 0, canvas.width, canvas.height);\n  objects.forEach(obj => obj.draw());\n  if (selectedObject) {\n    ctx.strokeStyle = 'black';\n    ctx.lineWidth = 2;\n    if (selectedObject.type === 'rectangle') {\n      ctx.strokeRect(selectedObject.x, selectedObject.y, selectedObject.width, selectedObject.height);\n    } else if (selectedObject.type === 'circle') {\n      ctx.beginPath();\n      ctx.arc(selectedObject.x, selectedObject.y, selectedObject.width / 2, 0, Math.PI * 2);\n      ctx.stroke();\n    }\n  }\n}\n\nfunction handleMouseDown(e) {\n  const rect = canvas.getBoundingClientRect();\n  const mouseX = e.clientX - rect.left;\n  const mouseY = e.clientY - rect.top;\n\n  selectedObject = objects.find(obj => obj.isPointInside(mouseX, mouseY));\n  drawScene();\n}\n\nfunction handleKeyDown(e) {\n  if (!selectedObject) return;\n\n  const speed = 5;\n  switch (e.key) {\n    case 'ArrowUp':\n      selectedObject.y -= speed;\n      break;\n    case 'ArrowDown':\n      selectedObject.y += speed;\n      break;\n    case 'ArrowLeft':\n      selectedObject.x -= speed;\n      break;\n    case 'ArrowRight':\n      selectedObject.x += speed;\n      break;\n  }\n  drawScene();\n}\n\naddRectangleBtn.addEventListener('click', addRectangle);\naddCircleBtn.addEventListener('click', addCircle);\nclearAllBtn.addEventListener('click', clearAll);\ncanvas.addEventListener('mousedown', handleMouseDown);\nwindow.addEventListener('keydown', handleKeyDown);\n\ndrawScene();\n---end---"
+       },
+       "logprobs": null,
+       "finish_reason": "stop"
+     }
+   ],
+   "usage": {
+     "prompt_tokens": 262,
+     "completion_tokens": 1478,
+     "total_tokens": 1740,
+     "prompt_cache_hit_tokens": 0,
+     "prompt_cache_miss_tokens": 262
+   },
+   "system_fingerprint": "fp_f1afce2943"
+ }

readme.scroll

Changed around line 1

+ # moveit.scroll.pub

+ Website generated by DeepSeek from prompt: make a website where you can make and add an 2d objects and manuiplate it and using arrow keys you can move it around

script.js

Changed around line 1
+ const canvas = document.getElementById('canvas');
+ const ctx = canvas.getContext('2d');
+ const addRectangleBtn = document.getElementById('add-rectangle');
+ const addCircleBtn = document.getElementById('add-circle');
+ const clearAllBtn = document.getElementById('clear-all');
+ 
+ let objects = [];
+ let selectedObject = null;
+ 
+ class Shape {
+   constructor(x, y, width, height, type) {
+     this.x = x;
+     this.y = y;
+     this.width = width;
+     this.height = height;
+     this.type = type;
+     this.color = `hsl(${Math.random() * 360}, 50%, 50%)`;
+   }
+ 
+   draw() {
+     ctx.fillStyle = this.color;
+     if (this.type === 'rectangle') {
+       ctx.fillRect(this.x, this.y, this.width, this.height);
+     } else if (this.type === 'circle') {
+       ctx.beginPath();
+       ctx.arc(this.x, this.y, this.width / 2, 0, Math.PI * 2);
+       ctx.fill();
+     }
+   }
+ 
+   isPointInside(px, py) {
+     if (this.type === 'rectangle') {
+       return px >= this.x && px <= this.x + this.width &&
+              py >= this.y && py <= this.y + this.height;
+     } else if (this.type === 'circle') {
+       const dx = px - this.x;
+       const dy = py - this.y;
+       return Math.sqrt(dx * dx + dy * dy) <= this.width / 2;
+     }
+     return false;
+   }
+ }
+ 
+ function addRectangle() {
+   const rect = new Shape(100, 100, 100, 100, 'rectangle');
+   objects.push(rect);
+   selectedObject = rect;
+   drawScene();
+ }
+ 
+ function addCircle() {
+   const circle = new Shape(100, 100, 100, 100, 'circle');
+   objects.push(circle);
+   selectedObject = circle;
+   drawScene();
+ }
+ 
+ function clearAll() {
+   objects = [];
+   selectedObject = null;
+   drawScene();
+ }
+ 
+ function drawScene() {
+   ctx.clearRect(0, 0, canvas.width, canvas.height);
+   objects.forEach(obj => obj.draw());
+   if (selectedObject) {
+     ctx.strokeStyle = 'black';
+     ctx.lineWidth = 2;
+     if (selectedObject.type === 'rectangle') {
+       ctx.strokeRect(selectedObject.x, selectedObject.y, selectedObject.width, selectedObject.height);
+     } else if (selectedObject.type === 'circle') {
+       ctx.beginPath();
+       ctx.arc(selectedObject.x, selectedObject.y, selectedObject.width / 2, 0, Math.PI * 2);
+       ctx.stroke();
+     }
+   }
+ }
+ 
+ function handleMouseDown(e) {
+   const rect = canvas.getBoundingClientRect();
+   const mouseX = e.clientX - rect.left;
+   const mouseY = e.clientY - rect.top;
+ 
+   selectedObject = objects.find(obj => obj.isPointInside(mouseX, mouseY));
+   drawScene();
+ }
+ 
+ function handleKeyDown(e) {
+   if (!selectedObject) return;
+ 
+   const speed = 5;
+   switch (e.key) {
+     case 'ArrowUp':
+       selectedObject.y -= speed;
+       break;
+     case 'ArrowDown':
+       selectedObject.y += speed;
+       break;
+     case 'ArrowLeft':
+       selectedObject.x -= speed;
+       break;
+     case 'ArrowRight':
+       selectedObject.x += speed;
+       break;
+   }
+   drawScene();
+ }
+ 
+ addRectangleBtn.addEventListener('click', addRectangle);
+ addCircleBtn.addEventListener('click', addCircle);
+ clearAllBtn.addEventListener('click', clearAll);
+ canvas.addEventListener('mousedown', handleMouseDown);
+ window.addEventListener('keydown', handleKeyDown);
+ 
+ drawScene();

style.css

Changed around line 1
+ :root {
+   --primary-color: #4a90e2;
+   --secondary-color: #50e3c2;
+   --background-color: #f5f5f5;
+   --text-color: #333;
+ }
+ 
+ body {
+   font-family: 'Segoe UI', sans-serif;
+   margin: 0;
+   padding: 0;
+   background-color: var(--background-color);
+   color: var(--text-color);
+   min-height: 100vh;
+   display: flex;
+   flex-direction: column;
+ }
+ 
+ header {
+   background-color: var(--primary-color);
+   color: white;
+   padding: 2rem;
+   text-align: center;
+ }
+ 
+ main {
+   flex: 1;
+   padding: 2rem;
+   display: flex;
+   flex-direction: column;
+   align-items: center;
+ }
+ 
+ .canvas-container {
+   width: 100%;
+   max-width: 800px;
+   height: 600px;
+   border: 2px solid var(--primary-color);
+   border-radius: 8px;
+   overflow: hidden;
+   background-color: white;
+   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+ 
+ canvas {
+   width: 100%;
+   height: 100%;
+ }
+ 
+ .controls {
+   margin-top: 1rem;
+   display: flex;
+   gap: 1rem;
+ }
+ 
+ button {
+   padding: 0.75rem 1.5rem;
+   border: none;
+   border-radius: 4px;
+   background-color: var(--primary-color);
+   color: white;
+   cursor: pointer;
+   transition: background-color 0.3s ease;
+ }
+ 
+ button:hover {
+   background-color: var(--secondary-color);
+ }
+ 
+ footer {
+   background-color: var(--primary-color);
+   color: white;
+   padding: 1rem;
+   text-align: center;
+ }
+ 
+ @media (max-width: 768px) {
+   .canvas-container {
+     height: 400px;
+   }
+ 
+   .controls {
+     flex-direction: column;
+     width: 100%;
+   }
+ 
+   button {
+     width: 100%;
+   }
+ }