commit 32c2f0d9d53c9fdc71e2cbed95fd3fa4835162f3
Author: root <root@hub.scroll.pub>
Date: 2024-12-27 01:03:30 +0000
Subject: Initial commit
diff --git a/body.html b/body.html
new file mode 100644
index 0000000..ccc029c
--- /dev/null
+++ b/body.html
@@ -0,0 +1,41 @@
+<header>
+ <h1>Stickify</h1>
+ <p class="tagline">Create Your Stick Figure Army</p>
+</header>
+
+<main>
+ <section id="canvas-container">
+ <canvas id="stickCanvas" aria-label="Stick figure drawing canvas"></canvas>
+ </section>
+
+ <section id="controls">
+ <div class="control-group">
+ <button id="addFigure" class="btn">Add Figure</button>
+ <button id="clear" class="btn">Clear All</button>
+ </div>
+
+ <div class="control-group">
+ <label for="figureSize">Size:</label>
+ <input type="range" id="figureSize" min="30" max="150" value="80">
+ </div>
+
+ <div class="control-group">
+ <label for="figureColor">Color:</label>
+ <input type="color" id="figureColor" value="#000000">
+ </div>
+
+ <div class="control-group">
+ <label for="animation">Animation:</label>
+ <select id="animation">
+ <option value="none">None</option>
+ <option value="dance">Dance</option>
+ <option value="wave">Wave</option>
+ <option value="jump">Jump</option>
+ </select>
+ </div>
+ </section>
+</main>
+
+<footer>
+ <p>Made with ❤️ for stick figure enthusiasts</p>
+</footer>
diff --git a/index.scroll b/index.scroll
new file mode 100644
index 0000000..29ab6aa
--- /dev/null
+++ b/index.scroll
@@ -0,0 +1,8 @@
+buildHtml
+baseUrl https://stickify.scroll.pub
+metaTags
+editButton /edit.html
+title Stickify - Create Your Stick Figure Army
+style.css
+body.html
+script.js
diff --git a/readme.scroll b/readme.scroll
new file mode 100644
index 0000000..ef5c126
--- /dev/null
+++ b/readme.scroll
@@ -0,0 +1,2 @@
+# stickify.scroll.pub
+Website generated from prompt: make a web site where stick figures fit
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..8402035
--- /dev/null
+++ b/script.js
@@ -0,0 +1,99 @@
+class StickFigure {
+ constructor(x, y, size, color) {
+ this.x = x;
+ this.y = y;
+ this.size = size;
+ this.color = color;
+ this.animation = 'none';
+ this.frame = 0;
+ }
+
+ draw(ctx) {
+ ctx.save();
+ ctx.strokeStyle = this.color;
+ ctx.lineWidth = 2;
+ ctx.beginPath();
+
+ // Apply animations
+ let headBob = 0;
+ let armWave = 0;
+ let legKick = 0;
+
+ if (this.animation === 'dance') {
+ headBob = Math.sin(this.frame * 0.1) * 5;
+ armWave = Math.sin(this.frame * 0.2) * 30;
+ legKick = Math.sin(this.frame * 0.15) * 20;
+ } else if (this.animation === 'wave') {
+ armWave = Math.sin(this.frame * 0.1) * 45;
+ } else if (this.animation === 'jump') {
+ headBob = Math.abs(Math.sin(this.frame * 0.1)) * -20;
+ }
+
+ // Head
+ ctx.arc(this.x, this.y + headBob, this.size * 0.15, 0, Math.PI * 2);
+
+ // Body
+ ctx.moveTo(this.x, this.y + this.size * 0.3 + headBob);
+ ctx.lineTo(this.x, this.y + this.size * 0.7 + headBob);
+
+ // Arms
+ ctx.moveTo(this.x, this.y + this.size * 0.4 + headBob);
+ ctx.lineTo(this.x - this.size * 0.3, this.y + this.size * 0.5 + armWave + headBob);
+ ctx.moveTo(this.x, this.y + this.size * 0.4 + headBob);
+ ctx.lineTo(this.x + this.size * 0.3, this.y + this.size * 0.5 - armWave + headBob);
+
+ // Legs
+ ctx.moveTo(this.x, this.y + this.size * 0.7 + headBob);
+ ctx.lineTo(this.x - this.size * 0.2, this.y + this.size + legKick + headBob);
+ ctx.moveTo(this.x, this.y + this.size * 0.7 + headBob);
+ ctx.lineTo(this.x + this.size * 0.2, this.y + this.size - legKick + headBob);
+
+ ctx.stroke();
+ ctx.restore();
+
+ this.frame++;
+ }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ const canvas = document.getElementById('stickCanvas');
+ const ctx = canvas.getContext('2d');
+ const figures = [];
+
+ // Set canvas size
+ function resizeCanvas() {
+ canvas.width = canvas.offsetWidth;
+ canvas.height = canvas.offsetHeight;
+ }
+
+ resizeCanvas();
+ window.addEventListener('resize', resizeCanvas);
+
+ // Controls
+ const addButton = document.getElementById('addFigure');
+ const clearButton = document.getElementById('clear');
+ const sizeInput = document.getElementById('figureSize');
+ const colorInput = document.getElementById('figureColor');
+ const animationSelect = document.getElementById('animation');
+
+ addButton.addEventListener('click', () => {
+ const x = Math.random() * (canvas.width - 100) + 50;
+ const y = Math.random() * (canvas.height - 200) + 50;
+ const figure = new StickFigure(x, y, sizeInput.value, colorInput.value);
+ figure.animation = animationSelect.value;
+ figures.push(figure);
+ });
+
+ clearButton.addEventListener('click', () => {
+ figures.length = 0;
+ });
+
+ // Animation loop
+ function animate() {
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ figures.forEach(figure => figure.draw(ctx));
+ requestAnimationFrame(animate);
+ }
+
+ animate();
+});
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..7aad571
--- /dev/null
+++ b/style.css
@@ -0,0 +1,121 @@
+:root {
+ --primary-color: #2a9d8f;
+ --secondary-color: #e76f51;
+ --bg-color: #f8f9fa;
+ --text-color: #264653;
+}
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+body {
+ font-family: 'Segoe UI', system-ui, sans-serif;
+ background: var(--bg-color);
+ color: var(--text-color);
+ line-height: 1.6;
+}
+
+header {
+ text-align: center;
+ padding: 2rem;
+ background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+ color: white;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+h1 {
+ font-size: 3rem;
+ margin-bottom: 0.5rem;
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.tagline {
+ font-size: 1.2rem;
+ opacity: 0.9;
+}
+
+main {
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ display: grid;
+ gap: 2rem;
+ grid-template-columns: 1fr 300px;
+}
+
+#canvas-container {
+ background: white;
+ border-radius: 10px;
+ box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+ overflow: hidden;
+}
+
+#stickCanvas {
+ width: 100%;
+ height: 600px;
+ cursor: pointer;
+}
+
+.control-group {
+ background: white;
+ padding: 1rem;
+ border-radius: 8px;
+ margin-bottom: 1rem;
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
+}
+
+.btn {
+ background: var(--primary-color);
+ color: white;
+ border: none;
+ padding: 0.8rem 1.5rem;
+ border-radius: 6px;
+ cursor: pointer;
+ transition: transform 0.2s, background 0.2s;
+ font-weight: 600;
+}
+
+.btn:hover {
+ background: var(--secondary-color);
+ transform: translateY(-2px);
+}
+
+label {
+ display: block;
+ margin-bottom: 0.5rem;
+ font-weight: 500;
+}
+
+input[type="range"],
+input[type="color"],
+select {
+ width: 100%;
+ padding: 0.5rem;
+ border-radius: 4px;
+ border: 1px solid #ddd;
+}
+
+footer {
+ text-align: center;
+ padding: 2rem;
+ background: var(--text-color);
+ color: white;
+ margin-top: 2rem;
+}
+
+@media (max-width: 768px) {
+ main {
+ grid-template-columns: 1fr;
+ }
+
+ h1 {
+ font-size: 2rem;
+ }
+
+ #stickCanvas {
+ height: 400px;
+ }
+}