HTML-JavaScript-Gaming/samples/index.html at main · ToolboxAid/HTML-JavaScript-Gaming · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!--
Toolbox Aid
David Quesenberry
04/19/2026
index.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Samples - HTML JavaScript Gaming</title>
  <link rel="stylesheet" href="../src/engine/theme/main.css" />
  <link rel="stylesheet" href="../src/engine/ui/hubCommon.css" />
  <link rel="stylesheet" href="./index.css" />
</head>
<body class="hub-page-samples">
  <div id="shared-theme-header"></div>

  <main class="page-shell">
    <section class="page-intro">
      <h1>Samples Hub</h1>
      <p>
        Browse phase-based sample collections that demonstrate engine systems and gameplay patterns.
        Start from the phase links below and open individual sample entries from each phase page.
        Tool preset launch samples are listed alongside gameplay samples in this hub.
        Workspace integration samples launch Workspace Manager directly when opened.
      </p>
    </section>

    <section class="content-section">
      <h2>Pinned Samples</h2>
      <div id="samples-pinned-list" class="card-grid"></div>
    </section>

    <section class="content-section">
      <h2>Filter Samples</h2>
      <p>Filter by phase, engine class, tag, or free-text search.</p>
      <div class="samples-filter-grid">
        <div class="samples-filter-field">
          <label for="samples-filter-phase">Phase</label>
          <select id="samples-filter-phase">
            <option value="">All phases</option>
          </select>
        </div>
        <div class="samples-filter-field">
          <label for="samples-filter-class">Class</label>
          <select id="samples-filter-class">
            <option value="">All classes</option>
          </select>
        </div>
        <div class="samples-filter-field">
          <label for="samples-filter-tag">Tag</label>
          <select id="samples-filter-tag">
            <option value="">All tags</option>
          </select>
        </div>
        <div class="samples-filter-field">
          <label for="samples-filter-tool">Tool</label>
          <select id="samples-filter-tool">
            <option value="">All tools</option>
          </select>
        </div>
        <div class="samples-filter-field">
          <label for="samples-phase-filter-input">Search</label>
          <input id="samples-phase-filter-input" type="text" placeholder="Phase 17, rendering, runtime..." autocomplete="off" />
        </div>
      </div>
      <p id="samples-phase-filter-status" aria-live="polite"></p>
    </section>
    <section class="content-section">
      <div id="samples-phase-list"></div>
    </section>
    <div class="footer-note">
      Open sample pages through a local web server for stable module and asset loading.
    </div>
  </main>
  <script type="module" src="../src/engine/theme/mount-shared-header.js"></script>
  <script type="module" src="./index.render.js"></script>
</body>
</html>