Spaces:

ParulPandey
/

Rotational_Symmetry

Running

App Files Files Community

ParulPandey commited on Sep 4, 2025

Commit

4a15e90

verified ·

1 Parent(s): c4700cb

Update index.html

Browse files

Files changed (1) hide show

index.html +395 -18

index.html CHANGED Viewed

@@ -1,19 +1,396 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="Interactive app to teach kids about rotation symmetry in shapes" />
+  <meta name="keywords" content="rotation symmetry, kids education, shapes, interactive learning" />
+  <title>Rotation Symmetry Explorer</title>
+  <style>
+    :root {
+      --bg: #ffffff;
+      --text: #111827; /* gray-900 */
+      --muted: #6b7280; /* gray-500 */
+      --grid: #e5e7eb; /* gray-200 */
+      --accent: #2563eb; /* blue-600 */
+      --good: #16a34a; /* green-600 */
+      --danger: #ef4444; /* red-500 */
+      --card: #f9fafb; /* gray-50 */
+      --shadow: 0 6px 20px rgba(0,0,0,0.08);
+      --radius: 16px;
+    }
+    * { box-sizing: border-box; }
+    body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--text); background: var(--bg); }
+    header { padding: 24px 16px; text-align: center; }
+    header h1 { margin: 0 0 4px; font-size: 2rem; }
+    header p { margin: 0; color: #374151; }
+    main { padding: 16px; max-width: 1200px; margin: 0 auto; }
+    .intro { background: var(--card); padding: 16px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; }
+    .intro h2 { margin-top: 0; font-size: 1.25rem; }
+    .explorer { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; align-items: start; }
+    @media (max-width: 900px) { .explorer { grid-template-columns: 1fr; } }
+    .shape-container { background: var(--card); padding: 12px; border-radius: var(--radius); box-shadow: var(--shadow); }
+    .shape-stage { position: relative; border-radius: 12px; overflow: hidden; background: #fff; height: 420px; border: 1px solid #e5e7eb; }
+    canvas { width: 100%; height: 100%; display: block; cursor: default; }
+    canvas.drawing { cursor: crosshair; }
+    .controls { background: #fff; padding: 16px; border-radius: var(--radius); box-shadow: var(--shadow); display: grid; gap: 12px; }
+    .controls label { font-size: 0.9rem; color: #374151; display: block; margin-bottom: 4px; }
+    .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
+    .row input[type="range"] { flex: 1; }
+    .btn { appearance: none; border: 1px solid #e5e7eb; background: #fff; padding: 8px 12px; border-radius: 12px; box-shadow: var(--shadow); font-weight: 600; cursor: pointer; }
+    .btn:active { transform: translateY(1px); }
+    .btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
+    .btn.ghost { background: #f3f4f6; }
+    .toggle { display: inline-flex; align-items: center; gap: 8px; }
+    select, input[type="range"], input[type="checkbox"] { accent-color: var(--accent); }
+    select { width: 100%; padding: 8px 10px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fff; }
+    .info { background: var(--card); padding: 12px 16px; border-radius: var(--radius); box-shadow: var(--shadow); }
+    .info h3 { margin: 0 0 6px; }
+    .examples { margin-top: 24px; }
+    .shapes-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
+    @media (max-width: 900px) { .shapes-grid { grid-template-columns: repeat(3, 1fr); } }
+    .shape-item { background: #fff; padding: 10px; text-align: center; border: 1px solid #e5e7eb; border-radius: 12px; cursor: pointer; box-shadow: var(--shadow); }
+    .shape-item p { margin: 8px 0 0; font-size: 0.9rem; }
+    .example-shape { width: 56px; height: 56px; margin: 0 auto; background: #f3f4f6; border: 2px solid #d1d5db; }
+    .example-shape.square { }
+    .example-shape.triangle { clip-path: polygon(50% 10%, 90% 90%, 10% 90%); }
+    .example-shape.circle { border-radius: 50%; }
+    .example-shape.rectangle { }
+    .example-shape.star { clip-path: polygon(50% 8%, 61% 35%, 90% 38%, 66% 58%, 72% 86%, 50% 70%, 28% 86%, 34% 58%, 10% 38%, 39% 35%); }
+    .example-shape.hexagon { clip-path: polygon(25% 5%, 75% 5%, 95% 50%, 75% 95%, 25% 95%, 5% 50%); }
+    footer { text-align: center; color: #6b7280; padding: 24px 16px; }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Rotation Symmetry Explorer</h1>
+    <p>Learn about shapes that look the same when rotated!</p>
+  </header>
+  <main>
+    <section class="intro">
+      <h2>What is Rotation Symmetry?</h2>
+      <p>A shape has rotation symmetry when it looks exactly the same after being rotated around its center. The number of times it matches as it rotates through 360° is called its <strong>order</strong>.</p>
+    </section>
+    <section class="explorer">
+      <div class="shape-container">
+        <div class="shape-stage">
+          <canvas id="stage"></canvas>
+        </div>
+      </div>
+      <div class="controls">
+        <div>
+          <label for="rotation-slider">Rotate Shape:</label>
+          <div class="row">
+            <input type="range" id="rotation-slider" min="0" max="360" value="0" />
+            <span id="rotation-value" style="width:48px; text-align:right; font-weight:700;">0°</span>
+          </div>
+        </div>
+        <div>
+          <label for="shape-select">Choose Shape:</label>
+          <select id="shape-select">
+            <option value="square">Square (Order: 4)</option>
+            <option value="triangle">Triangle (Order: 3)</option>
+            <option value="circle">Circle (Order: ∞)</option>
+            <option value="rectangle">Rectangle (Order: 2)</option>
+            <option value="star">Star (Order: 5)</option>
+            <option value="hexagon">Hexagon (Order: 6)</option>
+            <option value="drawing">My drawing</option>
+          </select>
+        </div>
+        <div class="row">
+          <button id="animate-btn" class="btn primary">Animate Rotation</button>
+          <button id="reset-btn" class="btn">Reset</button>
+        </div>
+        <div class="row" style="justify-content: space-between;">
+          <label class="toggle"><input type="checkbox" id="tracing-toggle" checked /> Tracing paper</label>
+          <label class="toggle"><input type="checkbox" id="draw-toggle" /> Draw mode</label>
+        </div>
+        <div class="row" id="pen-row" style="display:none;">
+          <label for="pen-size">Pen size</label>
+          <input type="range" id="pen-size" min="1" max="16" value="4" />
+          <span id="pen-size-value" style="width:36px; text-align:right;">4px</span>
+          <button id="clear-drawing" class="btn ghost">Clear drawing</button>
+        </div>
+        <div class="info">
+          <h3>Symmetry Order: <span id="order-value">4</span></h3>
+          <p id="shape-info">A square looks the same 4 times during a full rotation of 360°.</p>
+          <p style="font-size:12px; color:#6b7280; margin-top:8px;">Tip: Watch the small dark dot on the shape. It is a <strong>reference point</strong> that shows how the shape turns.</p>
+        </div>
+      </div>
+    </section>
+    <section class="examples">
+      <h2>Common Shapes with Rotation Symmetry</h2>
+      <div class="shapes-grid">
+        <div class="shape-item" data-shape="square">
+          <div class="example-shape square"></div>
+          <p>Square</p>
+        </div>
+        <div class="shape-item" data-shape="triangle">
+          <div class="example-shape triangle"></div>
+          <p>Triangle</p>
+        </div>
+        <div class="shape-item" data-shape="circle">
+          <div class="example-shape circle"></div>
+          <p>Circle</p>
+        </div>
+        <div class="shape-item" data-shape="rectangle">
+          <div class="example-shape rectangle"></div>
+          <p>Rectangle</p>
+        </div>
+        <div class="shape-item" data-shape="star">
+          <div class="example-shape star"></div>
+          <p>Star</p>
+        </div>
+        <div class="shape-item" data-shape="hexagon">
+          <div class="example-shape hexagon"></div>
+          <p>Hexagon</p>
+        </div>
+      </div>
+    </section>
+  </main>
+  <footer>
+    <p>Created for kids to learn about rotation symmetry | Made with HTML, CSS, and JavaScript</p>
+  </footer>
+  <script>
+    // --- State ---
+    const canvas = document.getElementById('stage');
+    const slider = document.getElementById('rotation-slider');
+    const rotationValue = document.getElementById('rotation-value');
+    const shapeSelect = document.getElementById('shape-select');
+    const orderValue = document.getElementById('order-value');
+    const shapeInfo = document.getElementById('shape-info');
+    const animateBtn = document.getElementById('animate-btn');
+    const resetBtn = document.getElementById('reset-btn');
+    const tracingToggle = document.getElementById('tracing-toggle');
+    const drawToggle = document.getElementById('draw-toggle');
+    const penRow = document.getElementById('pen-row');
+    const penSizeInput = document.getElementById('pen-size');
+    const penSizeValue = document.getElementById('pen-size-value');
+    const clearDrawingBtn = document.getElementById('clear-drawing');
+    const ctx = canvas.getContext('2d');
+    let angle = 0; // degrees
+    let shape = 'square';
+    let tracing = true;
+    let drawMode = false;
+    let penDown = false;
+    let penSize = 4;
+    let strokes = []; // Array of arrays of points in center coords
+    let animating = false;
+    let rafId = null;
+    let lastTs = 0;
+    function setupCanvas() {
+      const dpr = window.devicePixelRatio || 1;
+      const rect = canvas.getBoundingClientRect();
+      canvas.width = Math.round(rect.width * dpr);
+      canvas.height = Math.round(rect.height * dpr);
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+    }
+    function getCenter() {
+      return { cx: canvas.clientWidth / 2, cy: canvas.clientHeight / 2 };
+    }
+    function deg2rad(d) { return (d * Math.PI) / 180; }
+    function makeShapePath() {
+      const size = Math.min(canvas.clientWidth, canvas.clientHeight) * 0.32;
+      switch (shape) {
+        case 'square':
+          return { type: 'poly', pts: [
+            {x: -size, y: -size}, {x: size, y: -size}, {x: size, y: size}, {x: -size, y: size}
+          ]};
+        case 'triangle':
+          return { type: 'poly', pts: [
+            {x: 0, y: -size}, {x: size, y: size}, {x: -size, y: size}
+          ]};
+        case 'circle':
+          return { type: 'circle', r: size };
+        case 'rectangle': {
+          const w = size * 1.8, h = size; // wider than tall
+          return { type: 'poly', pts: [
+            {x: -w, y: -h}, {x: w, y: -h}, {x: w, y: h}, {x: -w, y: h}
+          ]};
+        }
+        case 'star': {
+          const pts = []; const spikes = 5; const outer = size; const inner = size * 0.45;
+          for (let i = 0; i < spikes * 2; i++) {
+            const r = (i % 2 === 0) ? outer : inner;
+            const a = (i * Math.PI) / spikes - Math.PI / 2;
+            pts.push({ x: r * Math.cos(a), y: r * Math.sin(a) });
+          }
+          return { type: 'poly', pts };
+        }
+        case 'hexagon': {
+          const pts = []; const r = size;
+          for (let i = 0; i < 6; i++) {
+            const a = (i * Math.PI) / 3 - Math.PI / 2;
+            pts.push({ x: r * Math.cos(a), y: r * Math.sin(a) });
+          }
+          return { type: 'poly', pts };
+        }
+        case 'drawing':
+          return { type: 'strokes', strokes };
+      }
+    }
+    function drawGrid(w, h) {
+      ctx.save();
+      ctx.clearRect(0, 0, w, h);
+      ctx.lineWidth = 1; ctx.strokeStyle = '#e5e7eb';
+      for (let x = 0; x < w; x += 40) { ctx.beginPath(); ctx.moveTo(x + 0.5, 0); ctx.lineTo(x + 0.5, h); ctx.stroke(); }
+      for (let y = 0; y < h; y += 40) { ctx.beginPath(); ctx.moveTo(0, y + 0.5); ctx.lineTo(w, y + 0.5); ctx.stroke(); }
+      ctx.restore();
+    }
+    function drawReference(cx, cy) {
+      ctx.save();
+      // center point
+      ctx.fillStyle = '#ef4444';
+      ctx.beginPath(); ctx.arc(cx, cy, 6, 0, Math.PI * 2); ctx.fill();
+      // 0° reference line
+      ctx.strokeStyle = '#2563eb'; ctx.lineWidth = 3; ctx.beginPath(); ctx.moveTo(cx, cy); ctx.lineTo(cx + 160, cy); ctx.stroke();
+      // current angle line
+      ctx.save(); ctx.translate(cx, cy); ctx.rotate(deg2rad(angle));
+      ctx.strokeStyle = '#16a34a'; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(160, 0); ctx.stroke(); ctx.restore();
+      // angle arc
+      const radius = 36; ctx.strokeStyle = '#6b7280'; ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(cx, cy, radius, 0, deg2rad(angle), angle >= 0); ctx.stroke();
+      // label
+      ctx.fillStyle = '#111827'; ctx.font = 'bold 14px ui-sans-serif, system-ui'; ctx.fillText(Math.round(angle) + '°', cx + radius + 10, cy - 8);
+      ctx.restore();
+    }
+    function drawPoly(pts) {
+      if (!pts.length) return; ctx.beginPath(); ctx.moveTo(pts[0].x, pts[0].y); for (let i = 1; i < pts.length; i++) ctx.lineTo(pts[i].x, pts[i].y); ctx.closePath();
+    }
+    function drawStrokesSet(s, lw) {
+      ctx.lineJoin = 'round'; ctx.lineCap = 'round';
+      for (const stroke of s) {
+        if (stroke.length < 2) continue; ctx.beginPath(); ctx.moveTo(stroke[0].x, stroke[0].y); for (let i = 1; i < stroke.length; i++) ctx.lineTo(stroke[i].x, stroke[i].y); ctx.lineWidth = lw; ctx.stroke();
+      }
+    }
+    function drawShapeWithOptions(cx, cy, color, alpha, atAngleDeg, showMarker) {
+      const path = makeShapePath();
+      ctx.save(); ctx.translate(cx, cy); ctx.rotate(deg2rad(atAngleDeg)); ctx.globalAlpha = alpha; ctx.strokeStyle = color; ctx.fillStyle = 'rgba(0,0,0,0)';
+      if (path.type === 'poly') {
+        drawPoly(path.pts); ctx.lineWidth = 4; ctx.stroke();
+        if (showMarker && path.pts.length) { const p = path.pts[0]; ctx.fillStyle = '#111827'; ctx.beginPath(); ctx.arc(p.x, p.y, 6, 0, Math.PI * 2); ctx.fill(); }
+      } else if (path.type === 'circle') {
+        ctx.beginPath(); ctx.arc(0, 0, path.r, 0, Math.PI * 2); ctx.lineWidth = 4; ctx.stroke(); if (showMarker) { ctx.fillStyle = '#111827'; ctx.beginPath(); ctx.arc(path.r, 0, 6, 0, Math.PI * 2); ctx.fill(); }
+      } else if (path.type === 'strokes') {
+        ctx.lineWidth = penSize; drawStrokesSet(path.strokes, penSize);
+        if (showMarker && path.strokes.length && path.strokes[0].length) { const p = path.strokes[0][0]; ctx.fillStyle = '#111827'; ctx.beginPath(); ctx.arc(p.x, p.y, 6, 0, Math.PI * 2); ctx.fill(); }
+      }
+      ctx.restore();
+    }
+    function draw() {
+      const w = canvas.clientWidth, h = canvas.clientHeight; const { cx, cy } = getCenter();
+      drawGrid(w, h); drawReference(cx, cy);
+      if (tracing) drawShapeWithOptions(cx, cy, '#6b7280', 0.35, 0, true); // faint original at 0°
+      drawShapeWithOptions(cx, cy, '#111827', 1, angle, true); // active rotated shape
+    }
+    // --- Drawing (pen) ---
+    function toLocal(clientX, clientY) {
+      const rect = canvas.getBoundingClientRect(); const x = clientX - rect.left; const y = clientY - rect.top; const { cx, cy } = getCenter(); return { x: x - cx, y: y - cy };
+    }
+    canvas.addEventListener('pointerdown', (e) => {
+      if (!drawMode) return; const p = toLocal(e.clientX, e.clientY); penDown = true; strokes.push([p]); if (shape !== 'drawing') { shape = 'drawing'; shapeSelect.value = 'drawing'; updateInfo(); }
+      draw();
+    });
+    canvas.addEventListener('pointermove', (e) => {
+      if (!drawMode || !penDown) return; const p = toLocal(e.clientX, e.clientY); const last = strokes[strokes.length - 1]; last.push(p); draw();
+    });
+    function endStroke() { penDown = false; }
+    canvas.addEventListener('pointerup', endStroke);
+    canvas.addEventListener('pointerleave', endStroke);
+    // --- UI events ---
+    slider.addEventListener('input', () => { angle = Number(slider.value); rotationValue.textContent = Math.round(angle) + '°'; draw(); });
+    shapeSelect.addEventListener('change', () => { shape = shapeSelect.value; updateInfo(); draw(); });
+    animateBtn.addEventListener('click', () => { animating = !animating; animateBtn.textContent = animating ? 'Stop' : 'Animate Rotation'; if (animating) { lastTs = performance.now(); rafId = requestAnimationFrame(loop); } else if (rafId) { cancelAnimationFrame(rafId); } });
+    resetBtn.addEventListener('click', () => { angle = 0; slider.value = '0'; rotationValue.textContent = '0°'; tracing = true; tracingToggle.checked = true; drawMode = false; drawToggle.checked = false; canvas.classList.remove('drawing'); strokes = []; shape = 'square'; shapeSelect.value = 'square'; penSize = 4; penSizeInput.value = '4'; penSizeValue.textContent = '4px'; updateInfo(); draw(); });
+    tracingToggle.addEventListener('change', () => { tracing = tracingToggle.checked; draw(); });
+    drawToggle.addEventListener('change', () => { drawMode = drawToggle.checked; penRow.style.display = drawMode ? 'flex' : 'none'; canvas.classList.toggle('drawing', drawMode); if (drawMode) { shape = 'drawing'; shapeSelect.value = 'drawing'; updateInfo(); } draw(); });
+    penSizeInput.addEventListener('input', () => { penSize = Number(penSizeInput.value); penSizeValue.textContent = penSize + 'px'; draw(); });
+    clearDrawingBtn.addEventListener('click', () => { strokes = []; draw(); });
+    document.querySelectorAll('.shape-item').forEach(card => {
+      card.addEventListener('click', () => { const val = card.getAttribute('data-shape'); shape = val; shapeSelect.value = val; if (val !== 'drawing') { drawMode = false; drawToggle.checked = false; penRow.style.display = 'none'; canvas.classList.remove('drawing'); } updateInfo(); draw(); });
+    });
+    // --- Animate loop ---
+    function loop(ts) {
+      const dt = Math.min(32, ts - lastTs); lastTs = ts; // ms
+      angle = (angle + (dt * 0.12)) % 360; // ~43° per second
+      slider.value = String(angle); rotationValue.textContent = Math.round(angle) + '°';
+      draw();
+      if (animating) rafId = requestAnimationFrame(loop);
+    }
+    // --- Info / order ---
+    function getOrder(s) {
+      switch (s) {
+        case 'square': return 4;
+        case 'triangle': return 3;
+        case 'circle': return '∞';
+        case 'rectangle': return 2;
+        case 'star': return 5; // regular 5-point star
+        case 'hexagon': return 6;
+        case 'drawing': return '?';
+      }
+    }
+    function updateInfo() {
+      const ord = getOrder(shape); orderValue.textContent = ord;
+      const textMap = {
+        square: 'A square looks the same 4 times during a full rotation of 360°.',
+        triangle: 'An equilateral triangle matches itself 3 times in 360°.',
+        circle: 'A circle looks the same at any angle, so its order is infinite.',
+        rectangle: 'A rectangle matches itself 2 times in 360° (every 180°).',
+        star: 'A 5-point star matches itself 5 times in 360°.',
+        hexagon: 'A regular hexagon matches itself 6 times in 360°.',
+        drawing: 'Draw your own shape. The order depends on your design.'
+      };
+      shapeInfo.textContent = textMap[shape];
+    }
+    // --- Init ---
+    window.addEventListener('resize', () => { setupCanvas(); draw(); });
+    setupCanvas(); updateInfo(); draw();
+  </script>
+</body>
 </html>