body.html
Changed around line 1
+
+
Draw Rabbit
+
Let your creativity hop free! Draw, erase, and have fun!
+
+
+
+
+
+ ✏️
+
+
+ 🧽
+
+
+
+ 🗑️
+
+
+
+
+
+
+
+
Made with ❤️ for creative kids everywhere
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://drawrabbit.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Draw Rabbit - Interactive Whiteboard for Kids
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # drawrabbit.scroll.pub
+ Website generated by DeepSeek from prompt: I want to create a website that has a whiteboard and some basic drawing tools, so my child can play in it like drawing a rabbit in the whiteboard. So it should be interactive. Be creative.
script.js
Changed around line 1
+ const canvas = document.getElementById('whiteboard');
+ const ctx = canvas.getContext('2d');
+ let isDrawing = false;
+ let currentTool = 'pencil';
+ let currentColor = '#000000';
+
+ function resizeCanvas() {
+ canvas.width = canvas.offsetWidth;
+ canvas.height = canvas.offsetHeight;
+ }
+
+ window.addEventListener('resize', resizeCanvas);
+ resizeCanvas();
+
+ canvas.addEventListener('mousedown', startDrawing);
+ canvas.addEventListener('mouseup', stopDrawing);
+ canvas.addEventListener('mousemove', draw);
+
+ canvas.addEventListener('touchstart', startDrawing);
+ canvas.addEventListener('touchend', stopDrawing);
+ canvas.addEventListener('touchmove', draw);
+
+ document.getElementById('pencil').addEventListener('click', () => {
+ currentTool = 'pencil';
+ toggleActiveButton('pencil');
+ });
+
+ document.getElementById('eraser').addEventListener('click', () => {
+ currentTool = 'eraser';
+ toggleActiveButton('eraser');
+ });
+
+ document.getElementById('colorPicker').addEventListener('input', (e) => {
+ currentColor = e.target.value;
+ });
+
+ document.getElementById('clear').addEventListener('click', () => {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ });
+
+ function startDrawing(e) {
+ isDrawing = true;
+ draw(e);
+ }
+
+ function stopDrawing() {
+ isDrawing = false;
+ ctx.beginPath();
+ }
+
+ function draw(e) {
+ if (!isDrawing) return;
+
+ const rect = canvas.getBoundingClientRect();
+ let x, y;
+
+ if (e.touches) {
+ x = e.touches[0].clientX - rect.left;
+ y = e.touches[0].clientY - rect.top;
+ } else {
+ x = e.clientX - rect.left;
+ y = e.clientY - rect.top;
+ }
+
+ ctx.lineWidth = 5;
+ ctx.lineCap = 'round';
+
+ if (currentTool === 'pencil') {
+ ctx.strokeStyle = currentColor;
+ } else if (currentTool === 'eraser') {
+ ctx.strokeStyle = '#ffffff';
+ }
+
+ ctx.lineTo(x, y);
+ ctx.stroke();
+ ctx.beginPath();
+ ctx.moveTo(x, y);
+ }
+
+ function toggleActiveButton(tool) {
+ document.querySelectorAll('.toolbar button').forEach(btn => {
+ btn.classList.remove('active');
+ });
+ document.getElementById(tool).classList.add('active');
+ }
style.css
Changed around line 1
+ :root {
+ --primary-color: #ff6f61;
+ --secondary-color: #fff;
+ --accent-color: #f8e71c;
+ }
+
+ * {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+ }
+
+ body {
+ font-family: 'Comic Sans MS', cursive, sans-serif;
+ background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 2rem;
+ }
+
+ header {
+ text-align: center;
+ margin-bottom: 2rem;
+ }
+
+ h1 {
+ color: var(--primary-color);
+ font-size: 3rem;
+ text-shadow: 2px 2px 0 var(--accent-color);
+ }
+
+ p {
+ color: var(--secondary-color);
+ font-size: 1.2rem;
+ }
+
+ .toolbar {
+ display: flex;
+ gap: 1rem;
+ margin-bottom: 1rem;
+ justify-content: center;
+ flex-wrap: wrap;
+ }
+
+ button {
+ background: var(--primary-color);
+ border: none;
+ padding: 0.8rem;
+ border-radius: 50%;
+ cursor: pointer;
+ transition: transform 0.2s ease;
+ font-size: 1.5rem;
+ }
+
+ button:hover {
+ transform: scale(1.1);
+ }
+
+ button.active {
+ background: var(--accent-color);
+ }
+
+ #whiteboard {
+ background: var(--secondary-color);
+ border: 4px solid var(--primary-color);
+ border-radius: 15px;
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+ width: 100%;
+ max-width: 800px;
+ height: 500px;
+ touch-action: none;
+ }
+
+ footer {
+ margin-top: 2rem;
+ text-align: center;
+ color: var(--secondary-color);
+ }
+
+ @media (max-width: 768px) {
+ h1 {
+ font-size: 2rem;
+ }
+
+ #whiteboard {
+ height: 400px;
+ }
+ }