feat: implement reference/cheatsheet pages

- Add reference page container to index.html with tab navigation
- Create comprehensive cheatsheets for CSS properties, selectors,
  flexbox, grid, and HTML elements
- Add showReferencePage function with CodeMirror syntax highlighting
- Add reference_view analytics tracking
- Style reference tables, lists, and navigation with responsive design

Routes: #reference/css, #reference/selectors, #reference/flexbox,
        #reference/grid, #reference/html

🤖 Generated with [Claude Code](https://claude.com/claude-code)
This commit is contained in:
2026-01-15 15:53:05 +01:00
parent aa5292b653
commit 0340a4d4bc
3 changed files with 676 additions and 2 deletions

View File

@@ -135,6 +135,22 @@
</article>
</div>
<!-- Reference/Cheatsheet Pages -->
<div class="reference-page hidden" id="reference-page">
<article class="reference-content">
<nav class="reference-nav" id="reference-nav">
<a href="#reference/css" class="ref-nav-link" data-ref="css">CSS Properties</a>
<a href="#reference/selectors" class="ref-nav-link" data-ref="selectors">Selectors</a>
<a href="#reference/flexbox" class="ref-nav-link" data-ref="flexbox">Flexbox</a>
<a href="#reference/grid" class="ref-nav-link" data-ref="grid">Grid</a>
<a href="#reference/html" class="ref-nav-link" data-ref="html">HTML Elements</a>
</nav>
<div class="reference-body" id="reference-body">
<!-- Reference content injected by JS -->
</div>
</article>
</div>
<main class="game-layout" id="main-content">
<!-- Left Panel: Instructions + Editor -->
<div class="left-panel">