typing-practice/game-radar.html at main · fishcoco-code/typing-practice · 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
152
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="全球游戏雷达——监控新上线与即将上线的游戏" />
    <title>全球游戏雷达 · 帅气逼人吊炸天</title>
    <link rel="stylesheet" href="game-radar.css?v=2" />
  </head>
  <body>
    <header class="radar-header">
      <a class="back-link" href="./">← 首页</a>
      <a class="radar-brand" href="game-radar.html" aria-label="刷新全球游戏雷达">
        <span class="brand-signal" aria-hidden="true"><i></i></span>
        <span><strong>全球游戏雷达</strong><small>GAME RELEASE MONITOR</small></span>
      </a>
      <div class="header-actions">
        <div class="update-state" id="updateState"><i></i><span>正在读取数据</span></div>
        <button class="watch-filter" id="watchFilter" type="button" aria-pressed="false">
          我的关注 <b id="watchCount">0</b>
        </button>
        <a class="partner-link" href="#developerProgram">开发者合作</a>
      </div>
    </header>

    <main class="radar-shell" id="radarApp" data-load-state="loading">
      <section class="radar-hero">
        <div>
          <span class="edition-label">MVP · 首期覆盖 STEAM PC</span>
          <h1>发现刚刚上线的游戏</h1>
          <p>追踪全球商店新品、即将发售游戏与热度信号。数据每 6 小时自动更新。</p>
        </div>
        <div class="radar-sweep" aria-hidden="true"><i></i><b></b><span></span></div>
      </section>

      <section class="stats-grid" aria-label="游戏数据概览">
        <article class="stat-card">
          <span>今日上线</span>
          <strong id="todayCount">—</strong>
          <small>款游戏</small>
        </article>
        <article class="stat-card">
          <span>近 7 天上线</span>
          <strong id="weekCount">—</strong>
          <small>款游戏</small>
        </article>
        <article class="stat-card">
          <span>即将上线</span>
          <strong id="upcomingCount">—</strong>
          <small>已进入监控</small>
        </article>
        <article class="stat-card source-stat">
          <span>数据源</span>
          <strong id="sourceCount">—</strong>
          <small id="sourceSummary">连接中</small>
        </article>
      </section>

      <section class="curated-section" aria-labelledby="curatedTitle">
        <div class="list-heading">
          <div>
            <span>RADAR PICKS</span>
            <h2 id="curatedTitle">雷达精选</h2>
          </div>
          <small>根据新鲜度、折扣与当前热度筛选</small>
        </div>
        <div class="curated-grid" id="curatedGrid"></div>
      </section>

      <section class="monitor-grid">
        <article class="pulse-panel">
          <div class="panel-heading">
            <div><span>RELEASE PULSE</span><h2>近 7 天上线脉冲</h2></div>
            <small>按发布日期统计</small>
          </div>
          <div class="pulse-chart" id="pulseChart" aria-label="最近七天游戏上线数量图表"></div>
        </article>

        <aside class="source-panel">
          <div class="panel-heading">
            <div><span>SOURCE HEALTH</span><h2>数据源状态</h2></div>
          </div>
          <div id="sourceList" class="source-list"></div>
          <p>当前最简版监控 Steam 全球 PC 新品；主机和手游数据源将在下一阶段接入。</p>
        </aside>
      </section>

      <section class="developer-panel" id="developerProgram" aria-labelledby="developerTitle">
        <div>
          <span>FOR DEVELOPERS</span>
          <h2 id="developerTitle">让你的游戏被更多中文玩家看见</h2>
          <p>免费提交游戏，也可以申请首页推荐、中文介绍和首发推广。付费内容会明确标注“赞助推荐”。</p>
        </div>
        <div class="package-row" aria-label="推广套餐">
          <span><b>免费收录</b> ¥0</span>
          <span><b>推荐 7 天</b> ¥299</span>
          <span><b>首发推广</b> ¥699 起</span>
        </div>
        <a class="developer-cta" href="developer-submit.html">提交游戏 / 申请推广</a>
      </section>

      <section class="games-section" aria-labelledby="gameListTitle">
        <div class="list-heading">
          <div>
            <span>LIVE CATALOG</span>
            <h2 id="gameListTitle">游戏监控列表</h2>
          </div>
          <strong id="resultCount">0 款</strong>
        </div>

        <div class="filter-bar" aria-label="筛选游戏">
          <label class="search-field">
            <span class="sr-only">搜索游戏</span>
            <input id="searchInput" type="search" placeholder="搜索游戏名称" autocomplete="off" />
          </label>
          <div class="status-tabs" id="statusTabs" aria-label="上线状态">
            <button type="button" data-status="all" aria-pressed="true">全部</button>
            <button type="button" data-status="released" aria-pressed="false">已上线</button>
            <button type="button" data-status="upcoming" aria-pressed="false">即将上线</button>
          </div>
          <label>
            <span class="sr-only">平台</span>
            <select id="platformSelect"><option value="all">全部平台</option></select>
          </label>
          <label>
            <span class="sr-only">类型</span>
            <select id="genreSelect"><option value="all">全部类型</option></select>
          </label>
          <label>
            <span class="sr-only">排序</span>
            <select id="sortSelect">
              <option value="newest">最新发布</option>
              <option value="heat">雷达热度</option>
              <option value="name">名称排序</option>
            </select>
          </label>
        </div>

        <div class="game-grid" id="gameGrid" aria-live="polite"></div>
        <div class="empty-state" id="emptyState" hidden>没有找到符合条件的游戏。</div>
        <button class="load-more" id="loadMore" type="button" hidden>显示更多</button>
      </section>
    </main>

    <dialog class="game-dialog" id="gameDialog" aria-labelledby="dialogGameTitle">
      <button class="dialog-close" id="dialogClose" type="button" aria-label="关闭游戏详情">×</button>
      <div id="dialogContent"></div>
    </dialog>

    <script src="game-radar.js?v=2"></script>
  </body>
</html>