Michael Czechowski
e34d7eb70a
- Module pill now in game-controls between prev/next buttons - Level indicator (e.g. "1 of 3") inside the pill - Updated pill styling for nav bar context
203 lines
9.0 KiB
HTML
203 lines
9.0 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" data-i18n="skipLink">Skip to main content</a>
|
|
<div class="app-container">
|
|
<header class="header">
|
|
<button id="menu-btn" class="menu-toggle" data-i18n-aria-label="menuOpen" 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">
|
|
<button id="lang-btn" class="lang-switch" data-i18n-aria-label="langSwitchLabel" data-i18n="langSwitch" aria-label="Sprache wechseln: Deutsch">DE</button>
|
|
<button id="help-btn" class="help-toggle" data-i18n-aria-label="help" aria-label="Help">?</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="game-layout" id="main-content">
|
|
<!-- Left Panel: Instructions + Editor -->
|
|
<div class="left-panel">
|
|
<section class="instructions">
|
|
<h2 id="lesson-title" data-i18n="loading">Loading...</h2>
|
|
<div class="task-instruction" id="task-instruction"></div>
|
|
<div class="lesson-description" id="lesson-description" data-i18n="selectLesson">
|
|
Please select a lesson to begin.
|
|
</div>
|
|
</section>
|
|
|
|
<section class="editor-section">
|
|
<div class="code-editor">
|
|
<div class="editor-header">
|
|
<label for="code-input" class="editor-label" data-i18n="editorLabel">CSS Editor</label>
|
|
<div class="editor-actions">
|
|
<div class="editor-tools">
|
|
<button id="undo-btn" class="btn btn-icon" data-i18n-title="undoTitle" title="Undo (Ctrl+Z)">↶</button>
|
|
<button id="redo-btn" class="btn btn-icon" data-i18n-title="redoTitle" title="Redo (Ctrl+Shift+Z)">↷</button>
|
|
<button id="reset-code-btn" class="btn btn-icon" data-i18n-title="resetCodeTitle" title="Reset to initial code">⟲</button>
|
|
</div>
|
|
<button id="run-btn" class="btn btn-run">
|
|
<img src="./gear.svg" alt="" /><span data-i18n="run">Run</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div class="editor-content">
|
|
<textarea id="code-input" class="code-input" spellcheck="false" autocomplete="off" style="display: none;"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="hint-area" id="hint-area"></div>
|
|
</section>
|
|
</div>
|
|
|
|
<!-- Right Panel: Preview + Navigation -->
|
|
<div class="right-panel">
|
|
<div class="preview-section">
|
|
<div class="preview-wrapper">
|
|
<div class="preview-frame" id="preview-area"></div>
|
|
<div class="expected-overlay" id="expected-overlay">
|
|
<div class="expected-frame" id="preview-expected"></div>
|
|
</div>
|
|
</div>
|
|
<div class="preview-header">
|
|
<span class="preview-label" data-i18n="yourOutput">Your Output</span>
|
|
<button id="show-expected-btn" class="btn btn-small" data-i18n="showExpected">Show Expected</button>
|
|
</div>
|
|
</div>
|
|
<div class="game-controls">
|
|
<button id="prev-btn" class="btn" data-i18n="previous">Previous</button>
|
|
<span class="module-pill" id="module-pill">
|
|
<span class="module-name" data-i18n="loading">Loading...</span>
|
|
<span class="level-indicator" id="level-indicator">1 of 3</span>
|
|
</span>
|
|
<button id="next-btn" class="btn btn-primary" data-i18n="next">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" data-i18n-aria-label="menu" aria-label="Menu">
|
|
<div class="sidebar-header">
|
|
<h3 data-i18n="menu">Menu</h3>
|
|
<button id="close-sidebar" class="close-btn" data-i18n-aria-label="closeMenu" aria-label="Close menu">×</button>
|
|
</div>
|
|
|
|
<div class="sidebar-section">
|
|
<h4 data-i18n="progress">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" data-i18n="lessons">Lessons</h4>
|
|
<div class="module-list" id="module-list" role="tree" aria-labelledby="lessons-heading"></div>
|
|
</nav>
|
|
|
|
<div class="sidebar-section">
|
|
<h4 data-i18n="settings">Settings</h4>
|
|
<label class="toggle-switch">
|
|
<input type="checkbox" id="disable-feedback-toggle" checked />
|
|
<span class="toggle-slider"></span>
|
|
<span class="toggle-label" data-i18n="showHints">Show Hints</span>
|
|
</label>
|
|
<button id="reset-btn" class="btn btn-text" data-i18n="resetAllProgress">Reset All Progress</button>
|
|
</div>
|
|
|
|
<footer class="app-footer">
|
|
<span data-i18n="openSource">Open Source:</span>
|
|
<a href="https://git.librete.ch/public/code-crispies" target="_blank">Gitea</a>
|
|
<span data-i18n="by">by</span> <a href="https://librete.ch" title="librete.ch">librete.ch</a>
|
|
</footer>
|
|
</aside>
|
|
|
|
<!-- Help Dialog -->
|
|
<dialog id="help-dialog" class="dialog">
|
|
<div class="dialog-header">
|
|
<h3 data-i18n="helpTitle">Help</h3>
|
|
<button id="help-dialog-close" class="dialog-close" aria-label="Close">×</button>
|
|
</div>
|
|
<div class="dialog-content">
|
|
<h4 data-i18n="aboutTitle">About Code Crispies</h4>
|
|
<p data-i18n="aboutText">Code Crispies is a free, open-source platform for learning web development through hands-on exercises. No account required - just start coding!</p>
|
|
|
|
<h4 data-i18n="learningModesTitle">Learning Modes</h4>
|
|
<ul>
|
|
<li data-i18n-html="modeCss"><strong>CSS</strong> - Write CSS rules to style elements</li>
|
|
<li data-i18n-html="modeTailwind"><strong>Tailwind</strong> - Apply utility classes directly in HTML</li>
|
|
<li data-i18n-html="modeHtml"><strong>HTML</strong> - Practice semantic markup and native elements</li>
|
|
</ul>
|
|
|
|
<h4 data-i18n="gettingStartedTitle">Getting Started</h4>
|
|
<p data-i18n="gettingStartedText">Open the menu (☰) to browse lesson modules. Each module covers a specific topic with progressive exercises.</p>
|
|
|
|
<h4 data-i18n="completingLessonsTitle">Completing Lessons</h4>
|
|
<ol>
|
|
<li data-i18n="completingStep1">Read the task instructions on the left</li>
|
|
<li data-i18n="completingStep2">Write your code in the editor</li>
|
|
<li data-i18n="completingStep3">Watch the live preview update as you type</li>
|
|
<li data-i18n="completingStep4">Follow hints to fix any issues</li>
|
|
<li data-i18n-html="completingStep5">Click <strong>Next</strong> when complete</li>
|
|
</ol>
|
|
|
|
<h4 data-i18n="editorToolsTitle">Editor Tools</h4>
|
|
<ul>
|
|
<li data-i18n-html="editorToolUndo"><strong>↶ Undo</strong> / <strong>↷ Redo</strong> - Navigate edit history</li>
|
|
<li data-i18n-html="editorToolReset"><strong>⟲ Reset</strong> - Restore initial code for current lesson</li>
|
|
<li data-i18n-html="editorToolExpected"><strong>Show Expected</strong> - Toggle the target result overlay</li>
|
|
</ul>
|
|
|
|
<h4 data-i18n="keyboardShortcutsTitle">Keyboard Shortcuts</h4>
|
|
<ul>
|
|
<li data-i18n-html="shortcutRun"><kbd>Ctrl+Enter</kbd> - Validate immediately</li>
|
|
<li data-i18n-html="shortcutUndo"><kbd>Ctrl+Z</kbd> - Undo</li>
|
|
<li data-i18n-html="shortcutRedo"><kbd>Ctrl+Shift+Z</kbd> - Redo</li>
|
|
</ul>
|
|
|
|
<h4 data-i18n="emmetTitle">Emmet Shortcuts (HTML mode)</h4>
|
|
<p data-i18n-html="emmetText">Type abbreviations and press <kbd>Tab</kbd> to expand:</p>
|
|
<ul>
|
|
<li data-i18n-html="emmetClass"><kbd>div.box</kbd> → div with class</li>
|
|
<li data-i18n-html="emmetChildren"><kbd>ul>li*3</kbd> → ul with 3 li children</li>
|
|
<li data-i18n-html="emmetNested"><kbd>form>input+button</kbd> → nested structure</li>
|
|
<li data-i18n-html="emmetContent"><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 data-i18n="resetDialogTitle">Reset Progress</h3>
|
|
<button id="reset-dialog-close" class="dialog-close" aria-label="Close">×</button>
|
|
</div>
|
|
<div class="dialog-content">
|
|
<p data-i18n="resetDialogText">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" data-i18n="cancel">Cancel</button>
|
|
<button id="confirm-reset" class="btn btn-ghost" data-i18n="resetAll">Reset All</button>
|
|
</div>
|
|
</div>
|
|
</dialog>
|
|
</div>
|
|
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|