body.html
Changed around line 1
+
+
Stickify
+
Create Your Stick Figure Army
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Made with ❤️ for stick figure enthusiasts
+
index.scroll
Changed around line 1
+ buildHtml
+ baseUrl https://stickify.scroll.pub
+ metaTags
+ editButton /edit.html
+ title Stickify - Create Your Stick Figure Army
+ style.css
+ body.html
+ script.js
readme.scroll
Changed around line 1
+ # stickify.scroll.pub
+ Website generated from prompt: make a web site where stick figures fit
script.js
Changed around line 1
+ 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();
+ });
style.css
Changed around line 1
+ :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;
+ }
+ }