commit 31bc6d4ca682ab49bbd257eb89bcad4583233a9b
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 14:21:58 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..7c1ba39
--- /dev/null
+++ b/body.html
@@ -0,0 +1,25 @@
+<header>
+ <h1>Draw Rabbit</h1>
+ <p>Let your creativity hop free! Draw, erase, and have fun!</p>
+</header>
+
+<main>
+ <div class="toolbar">
+ <button id="pencil" class="active" title="Pencil">
+ ✏️
+ </button>
+ <button id="eraser" title="Eraser">
+ 🧽
+ </button>
+ <input type="color" id="colorPicker" value="#000000" title="Choose color">
+ <button id="clear" title="Clear board">
+ 🗑️
+ </button>
+ </div>
+
+ <canvas id="whiteboard"></canvas>
+</main>
+
+<footer>
+ <p>Made with ❤️ for creative kids everywhere</p>
+</footer>
\ No newline at end of file
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..f5af2af
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://drawrabbit.scroll.pub
+metaTags
+editButton /edit.html
+title Draw Rabbit - Interactive Whiteboard for Kids
+style.css
+body.html
+script.js
\ No newline at end of file
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..fb5cea8
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# 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.
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..781e5cb
--- /dev/null
+++ b/script.js
@@ -0,0 +1,85 @@
+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');
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..ec8dae9
--- /dev/null
+++ b/style.css
@@ -0,0 +1,90 @@
+: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;
+ }
+}
\ No newline at end of file