browser-game-arcade/index.html at main · opanai404/browser-game-arcade · 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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta
    name="description"
    content="DemoCodex 浏览器小游戏与互动实验合集，包含像素风作品、策略关卡和简洁实用的实验页面。"
  />
  <title>DemoCodex 游戏合集</title>
  <link
    rel="icon"
    type="image/svg+xml"
    href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='16' fill='%2307111f'/%3E%3Cpath d='M14 42 32 14l18 28Z' fill='%237dd3fc'/%3E%3Cpath d='M24 39h16v7H24z' fill='%23e2e8f0'/%3E%3C/svg%3E"
  />
  <link rel="stylesheet" href="src/css/index-menu.css" />
</head>
<body>
  <main class="menu-shell">
    <header class="menu-hero">
      <div class="menu-hero__layout">
        <div class="menu-hero__content">
          <p class="menu-hero__eyebrow">DemoCodex</p>
          <h1 class="menu-hero__title">下一页就开玩</h1>
          <p class="menu-hero__subtitle" id="menu-subtitle">
            69 个精选页面，覆盖像素策略、经典街机、互动内容与展示型实验。
          </p>
          <div class="menu-hero__meta" aria-label="页面概览">
            <div class="menu-pill">
              <strong id="menu-total">69</strong>
              <span>个主推作品</span>
            </div>
            <div class="menu-pill">
              <strong id="menu-featured">4</strong>
              <span>个重点推荐</span>
            </div>
            <div class="menu-pill">
              <strong id="menu-visible">69</strong>
              <span>个当前结果</span>
            </div>
          </div>
          <div class="menu-hero__actions">
            <button class="menu-action menu-action--primary" id="menu-random-pick" type="button">
              随机挑一页
            </button>
            <button class="menu-action menu-action--soft" id="menu-share-view" type="button">
              复制当前视图
            </button>
            <button class="menu-action menu-action--ghost" id="menu-reset" type="button">
              清空筛选
            </button>
          </div>
          <p class="menu-share-feedback" id="menu-share-feedback" aria-live="polite">
            当前是默认合集视图。
          </p>
        </div>

        <aside class="menu-spotlight" aria-labelledby="menu-spotlight-title">
          <p class="menu-spotlight__eyebrow" id="menu-spotlight-label">今日推荐</p>
          <h2 class="menu-spotlight__title" id="menu-spotlight-title">磁场工坊</h2>
          <p class="menu-spotlight__description" id="menu-spotlight-description">
            像素风磁力推箱谜局。你既要顶着磁芯电池找角度，也要用脉冲把远处磁芯拖近一格，再赶在巡检火花贴身前点亮 3 座反应座。
          </p>
          <div class="menu-spotlight__tags" id="menu-spotlight-tags" aria-label="推荐关键词"></div>
          <p class="menu-spotlight__meta" id="menu-spotlight-meta">策略谜局 · 4 到 10 分钟 · 紧张但清晰</p>
          <a class="menu-spotlight__link" id="menu-spotlight-link" href="magnet-forge.html">🧲 启动工坊</a>
        </aside>
      </div>
    </header>

    <section class="menu-toolbar" aria-labelledby="menu-browse-title">
      <div class="menu-toolbar__heading">
        <p class="menu-toolbar__eyebrow">Browse Faster</p>
        <h2 id="menu-browse-title">先筛选，再进入你现在最想玩的那一页</h2>
      </div>

      <div class="menu-toolbar__row">
        <label class="menu-field menu-field--search" for="menu-search">
          <span>快速搜索</span>
          <input
            id="menu-search"
            name="menu-search"
            type="search"
            autocomplete="off"
            placeholder="搜索玩法、题材、关键词或页面名"
          />
        </label>

        <label class="menu-field menu-field--compact" for="menu-sort">
          <span>排序方式</span>
          <select id="menu-sort" name="menu-sort">
            <option value="recommended">编辑推荐</option>
            <option value="recent">最近打开</option>
            <option value="quick">短平快优先</option>
            <option value="name">按名称</option>
          </select>
        </label>

        <button
          class="menu-toggle"
          id="menu-favorites-toggle"
          type="button"
          aria-pressed="false"
        >
          只看收藏
        </button>
      </div>

      <div class="menu-chip-list" id="menu-category-chips" aria-label="作品分类"></div>

      <div class="menu-results">
        <p class="menu-results__summary" id="menu-results-summary">
          显示 69 / 69 个作品。
        </p>
        <div class="menu-active-filters" id="menu-active-filters" aria-live="polite"></div>
      </div>
    </section>

    <section class="menu-section" aria-labelledby="menu-section-title">
      <div class="menu-section__header">
        <p class="menu-section__eyebrow">Curated Library</p>
        <h2 id="menu-section-title">点击卡片，直接进入对应页面</h2>
        <p>
          首页承担导航与发现职责，所有内容页仍保持独立可打开、可直达。
        </p>
      </div>
      <div class="menu-grid" id="games-grid" aria-live="polite" aria-busy="true"></div>
      <div class="menu-load-more" id="menu-load-more-wrap" hidden>
        <button class="menu-action menu-action--soft" id="menu-load-more" type="button">
          继续展开
        </button>
      </div>
    </section>

    <footer class="menu-footer">
      <p><strong>DemoCodex</strong> - 精品 HTML5 游戏合集</p>
      <p>纯原生 JavaScript · 零外部依赖 · 开源免费</p>
      <a class="menu-footer__link" href="https://github.com/hrniux/demoCodex">GitHub</a>
    </footer>

    <noscript>
      <p class="menu-noscript">
        这个页面需要 JavaScript 才能渲染导航卡片。请启用脚本后重新打开。
      </p>
    </noscript>
  </main>

  <script src="src/js/index-menu-url-state.js" defer></script>
  <script src="src/js/index-menu.js" defer></script>
</body>
</html>