Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kids Code Blocks</title> | |
| <link rel="stylesheet" href="styles.css"> | |
| </head> | |
| <body> | |
| <!-- Assignment Panel --> | |
| <div id="assignment-panel" class="assignment-panel"> | |
| <div class="assignment-header"> | |
| <h2>🎯 Mission</h2> | |
| <button id="close-assignment" class="close-btn">✕</button> | |
| </div> | |
| <div class="assignment-content"> | |
| <div class="assignment-title">Loading...</div> | |
| <div class="assignment-description">Getting ready...</div> | |
| <div class="assignment-goal">🎯 Goal: Coming up!</div> | |
| </div> | |
| <div class="assignment-footer"> | |
| <button id="prev-assignment" class="nav-btn">⬅️ Previous</button> | |
| <span class="assignment-counter">1 / 10</span> | |
| <button id="next-assignment" class="nav-btn">Next ➡️</button> | |
| </div> | |
| </div> | |
| <div class="app-container"> | |
| <!-- Block Palette --> | |
| <div class="block-palette"> | |
| <div class="palette-header"> | |
| <h2>🧩 Blocks</h2> | |
| <button id="show-assignment" class="assignment-btn">🎯 Mission</button> | |
| </div> | |
| <div class="block-category"> | |
| <h3>🎬 Actions</h3> | |
| <div class="block action-block" draggable="true" data-block-type="dance"> | |
| <span class="block-icon">💃</span> | |
| <span class="block-text">Dance</span> | |
| </div> | |
| <div class="block action-block" draggable="true" data-block-type="jump"> | |
| <span class="block-icon">🦘</span> | |
| <span class="block-text">Jump</span> | |
| </div> | |
| <div class="block action-block" draggable="true" data-block-type="wave"> | |
| <span class="block-icon">👋</span> | |
| <span class="block-text">Wave</span> | |
| </div> | |
| <div class="block action-block" draggable="true" data-block-type="sound"> | |
| <span class="block-icon">🔊</span> | |
| <span class="block-text">Make Sound</span> | |
| </div> | |
| <div class="block action-block" draggable="true" data-block-type="spin"> | |
| <span class="block-icon">🌀</span> | |
| <span class="block-text">Spin</span> | |
| </div> | |
| <div class="block action-block" draggable="true" data-block-type="sleep"> | |
| <span class="block-icon">😴</span> | |
| <span class="block-text">Sleep</span> | |
| </div> | |
| <div class="block action-block" draggable="true" data-block-type="grow"> | |
| <span class="block-icon">🔍</span> | |
| <span class="block-text">Grow Big</span> | |
| </div> | |
| <div class="block action-block" draggable="true" data-block-type="shrink"> | |
| <span class="block-icon">🔎</span> | |
| <span class="block-text">Get Small</span> | |
| </div> | |
| <div class="block action-block" draggable="true" data-block-type="color"> | |
| <span class="block-icon">🎨</span> | |
| <span class="block-text">Change Color</span> | |
| </div> | |
| </div> | |
| <div class="block-category"> | |
| <h3>🔁 Control</h3> | |
| <div class="block control-block" draggable="true" data-block-type="repeat"> | |
| <span class="block-icon">🔄</span> | |
| <span class="block-text">Repeat 1 time</span> | |
| </div> | |
| <div class="block control-block" draggable="true" data-block-type="wait"> | |
| <span class="block-icon">⏰</span> | |
| <span class="block-text">Wait</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Coding Area --> | |
| <div class="coding-area"> | |
| <div class="coding-header"> | |
| <h2>👨💻 My Code</h2> | |
| <button id="run-button" class="run-button"> | |
| <span class="button-icon">▶️</span> | |
| <span class="button-text">Play</span> | |
| </button> | |
| <button id="check-button" class="check-button" style="display: none;"> | |
| <span class="button-icon">✅</span> | |
| <span class="button-text">Check</span> | |
| </button> | |
| <button id="clear-button" class="clear-button"> | |
| <span class="button-icon">🗑️</span> | |
| <span class="button-text">Clear</span> | |
| </button> | |
| </div> | |
| <div id="drop-zone" class="drop-zone"> | |
| <div class="drop-hint"> | |
| <span class="drop-icon">⬇️</span> | |
| <p>Drag blocks here to make your character do things!</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Character Stage --> | |
| <div class="character-stage"> | |
| <h2>🎭 Stage</h2> | |
| <div class="stage-area"> | |
| <div id="character" class="character"> | |
| <div class="character-body">🐱</div> | |
| <div class="character-name">Cody the Cat</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |