Michael Czechowski
36c281d7e7
- Add skip-to-content link for keyboard users - Convert module headers and lesson items from divs to buttons - Add ARIA attributes (aria-expanded, aria-controls, aria-label) - Add focus return to trigger element when closing sidebar - Shift main content when sidebar is open using CSS :has() - Add code element styling in instruction boxes
200 lines
7.1 KiB
HTML
200 lines
7.1 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>CODE CRISPIES - Learn CSS Interactively</title>
|
|
<link rel="stylesheet" href="main.css" />
|
|
</head>
|
|
<body>
|
|
<a href="#main-content" class="skip-link">Skip to main content</a>
|
|
<div class="app-container">
|
|
<!-- Minimal Header -->
|
|
<header class="header">
|
|
<button id="menu-btn" class="menu-toggle" aria-label="Open menu">
|
|
<span class="hamburger-line"></span>
|
|
<span class="hamburger-line"></span>
|
|
<span class="hamburger-line"></span>
|
|
</button>
|
|
<div class="logo">
|
|
<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />
|
|
<h1>CODE<span>CRISPIES</span></h1>
|
|
</div>
|
|
<div class="header-actions">
|
|
<a href="./index.de.html" class="lang-switch" aria-label="Sprache wechseln: Deutsch">DE</a>
|
|
<button id="help-btn" class="help-toggle" aria-label="Help">?</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Game Layout -->
|
|
<main class="game-layout" id="main-content">
|
|
<!-- Left Panel: Instructions + Editor -->
|
|
<div class="left-panel">
|
|
<section class="instructions">
|
|
<span class="module-pill" id="module-pill">Loading...</span>
|
|
<h2 id="lesson-title">Loading...</h2>
|
|
<div class="lesson-description" id="lesson-description">
|
|
Please select a lesson to begin.
|
|
</div>
|
|
<div class="task-instruction" id="task-instruction">
|
|
<!-- Task instructions will be shown here -->
|
|
</div>
|
|
</section>
|
|
|
|
<section class="editor-section">
|
|
<div class="code-editor">
|
|
<div class="editor-header">
|
|
<label for="code-input" class="editor-label">CSS Editor</label>
|
|
<div class="editor-actions">
|
|
<div class="editor-tools">
|
|
<button id="undo-btn" class="btn btn-icon" title="Undo (Ctrl+Z)">↶</button>
|
|
<button id="redo-btn" class="btn btn-icon" title="Redo (Ctrl+Shift+Z)">↷</button>
|
|
<button id="reset-code-btn" class="btn btn-icon" title="Reset to initial code">⟲</button>
|
|
</div>
|
|
<button id="run-btn" class="btn btn-run">
|
|
<img src="./gear.svg" alt="" />Run
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="editor-content">
|
|
<!-- Textarea is replaced by CodeMirror; autocomplete off prevents browser form restoration -->
|
|
<textarea id="code-input" class="code-input" spellcheck="false" autocomplete="off" style="display: none;"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="hint-area" id="hint-area">
|
|
<!-- Hints displayed inline here -->
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Right Panel: Preview + Navigation -->
|
|
<div class="right-panel">
|
|
<div class="preview-section">
|
|
<div class="preview-header">
|
|
<span class="preview-label">Your Output</span>
|
|
<button id="show-expected-btn" class="btn btn-small">Show Expected</button>
|
|
</div>
|
|
<div class="preview-wrapper">
|
|
<div class="preview-frame" id="preview-area">
|
|
<!-- User's preview iframe will be shown here -->
|
|
</div>
|
|
<div class="expected-overlay" id="expected-overlay">
|
|
<div class="expected-frame" id="preview-expected">
|
|
<!-- Expected result iframe (toggleable) -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="game-controls">
|
|
<button id="prev-btn" class="btn">Previous</button>
|
|
<div class="level-indicator" id="level-indicator">Level 0/0</div>
|
|
<button id="next-btn" class="btn btn-primary">Next</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Sidebar Backdrop -->
|
|
<div class="sidebar-backdrop" id="sidebar-backdrop"></div>
|
|
|
|
<!-- Slide-out Sidebar -->
|
|
<aside class="sidebar-drawer" id="sidebar-drawer" aria-label="Navigation menu">
|
|
<div class="sidebar-header">
|
|
<h3>Menu</h3>
|
|
<button id="close-sidebar" class="close-btn" aria-label="Close menu">×</button>
|
|
</div>
|
|
|
|
<div class="sidebar-section">
|
|
<h4>Progress</h4>
|
|
<div class="progress-display" id="progress-display">
|
|
<div class="progress-bar">
|
|
<div class="progress-fill" id="progress-fill"></div>
|
|
</div>
|
|
<span class="progress-text" id="progress-text">0% Complete</span>
|
|
</div>
|
|
</div>
|
|
|
|
<nav class="sidebar-section" aria-label="Lesson navigation">
|
|
<h4 id="lessons-heading">Lessons</h4>
|
|
<div class="module-list" id="module-list" role="tree" aria-labelledby="lessons-heading">
|
|
<!-- Module list will be populated here -->
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="sidebar-section">
|
|
<h4>Settings</h4>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="disable-feedback-toggle" checked />
|
|
<span class="toggle-slider"></span>
|
|
<span class="toggle-label">Show Hints</span>
|
|
</label>
|
|
<button id="reset-btn" class="btn btn-text">Reset All Progress</button>
|
|
</div>
|
|
|
|
<footer class="app-footer">
|
|
Open Source:
|
|
<a href="https://github.com/nextlevelshit/code-crispies" target="_blank">GitHub</a>
|
|
by <a href="https://dailysh.it" title="Michael W. Czechowski">mwc</a>
|
|
</footer>
|
|
</aside>
|
|
|
|
<!-- Help Dialog -->
|
|
<dialog id="help-dialog" class="dialog">
|
|
<div class="dialog-header">
|
|
<h3>Help</h3>
|
|
<button id="help-dialog-close" class="dialog-close" aria-label="Close">×</button>
|
|
</div>
|
|
<div class="dialog-content">
|
|
<h4>How to Use Code Crispies</h4>
|
|
<p>Code Crispies is an interactive platform for learning HTML, CSS, and Tailwind through practical exercises.</p>
|
|
|
|
<h4>Getting Started</h4>
|
|
<p>Open the menu (☰) to select a lesson module. Each module contains a series of lessons.</p>
|
|
|
|
<h4>Completing Lessons</h4>
|
|
<ol>
|
|
<li>Read the instructions on the left</li>
|
|
<li>Write your code in the editor</li>
|
|
<li>Click "Run" or press Ctrl+Enter to test</li>
|
|
<li>Follow the hints to fix any issues</li>
|
|
<li>Click "Next" when you're done</li>
|
|
</ol>
|
|
|
|
<h4>Tips</h4>
|
|
<ul>
|
|
<li>Click "Show Expected" to see the target result</li>
|
|
<li>Your progress is saved automatically</li>
|
|
<li>Ctrl+Enter runs your code</li>
|
|
</ul>
|
|
|
|
<h4>Emmet Shortcuts (HTML mode)</h4>
|
|
<p>Type abbreviations and press Tab to expand:</p>
|
|
<ul>
|
|
<li><kbd>div.container</kbd> → div with class</li>
|
|
<li><kbd>ul>li*5</kbd> → ul with 5 li children</li>
|
|
<li><kbd>nav>ul>li*3>a</kbd> → nested structure</li>
|
|
<li><kbd>p{Hello}</kbd> → p with text content</li>
|
|
</ul>
|
|
</div>
|
|
</dialog>
|
|
|
|
<!-- Reset Confirmation Dialog -->
|
|
<dialog id="reset-dialog" class="dialog">
|
|
<div class="dialog-header">
|
|
<h3>Reset Progress</h3>
|
|
<button id="reset-dialog-close" class="dialog-close" aria-label="Close">×</button>
|
|
</div>
|
|
<div class="dialog-content">
|
|
<p>Are you sure you want to reset all your progress? This cannot be undone.</p>
|
|
<div class="dialog-actions">
|
|
<button id="cancel-reset" class="btn">Cancel</button>
|
|
<button id="confirm-reset" class="btn btn-ghost">Reset All</button>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
</div>
|
|
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|