typing-practice/index.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
<!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="site.css?v=3" />
  </head>
  <body class="home-page">
    <main class="home-shell">
      <header class="home-header">
        <a class="site-brand" href="./" aria-label="帅气逼人吊炸天首页">
          <span class="brand-mark">帅</span>
          <span>帅气逼人吊炸天</span>
        </a>
        <span class="header-note">PLAY · LEARN · CREATE</span>
      </header>

      <section class="hero" aria-labelledby="heroTitle">
        <p class="eyebrow">欢迎回来</p>
        <h1 id="heroTitle">今天想玩点什么？</h1>
        <p>选择一个板块，马上开始。</p>
      </section>

      <section class="module-grid" aria-label="网站板块">
        <a class="module-card typing-module" href="typing.html">
          <div class="module-topline">
            <span class="module-number">01</span>
            <span class="module-status live"><i></i> 可使用</span>
          </div>
          <div class="typing-visual" aria-hidden="true">
            <span>Q</span><span>W</span><span>E</span><span>R</span><span>T</span>
            <span>A</span><span class="active">S</span><span>D</span><span>F</span><span>G</span>
            <span>Z</span><span>X</span><span>C</span><span>V</span><span>B</span>
          </div>
          <div class="module-copy">
            <div>
              <span class="module-label">练习工具</span>
              <h2>打字</h2>
              <p>跟随键盘与手指提示，练准指法，提高速度。</p>
            </div>
            <span class="enter-button">开始练习 <b>→</b></span>
          </div>
        </a>

        <a class="module-card racing-module" href="racing.html">
          <div class="module-topline">
            <span class="module-number">02</span>
            <span class="module-status live racing-live"><i></i> 可使用</span>
          </div>
          <div class="racing-visual" aria-hidden="true">
            <span class="road-line line-one"></span>
            <span class="road-line line-two"></span>
            <span class="car"><i></i><b></b></span>
          </div>
          <div class="module-copy">
            <div>
              <span class="module-label">游戏</span>
              <h2>赛车</h2>
              <p>弯道、漂移、胎印与烟雾，进入漫画风极速赛道。</p>
            </div>
            <span class="enter-button">进入板块 <b>→</b></span>
          </div>
        </a>

        <a class="module-card radar-module" href="game-radar.html">
          <div class="module-topline">
            <span class="module-number">03</span>
            <span class="module-status live radar-live"><i></i> 自动更新</span>
          </div>
          <div class="radar-visual" aria-hidden="true">
            <span class="radar-ring ring-one"></span>
            <span class="radar-ring ring-two"></span>
            <i class="radar-beam"></i>
            <b class="radar-dot dot-one"></b>
            <b class="radar-dot dot-two"></b>
            <div class="radar-bars"><span></span><span></span><span></span><span></span><span></span></div>
          </div>
          <div class="module-copy">
            <div>
              <span class="module-label">数据监控</span>
              <h2>游戏雷达</h2>
              <p>监控全球新上线与即将上线的游戏，快速发现新品和热度信号。</p>
            </div>
            <span class="enter-button">查看数据 <b>→</b></span>
          </div>
        </a>
      </section>
    </main>
  </body>
</html>