Secret-Sealing-Club/index.html at main · cloud-oc/Secret-Sealing-Club · 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
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
<!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="秘封俱乐部同人阅读室：在夜色、铁路、星图和旧科学的气味里，边听音乐边读专辑附带故事。"
    />
    <title>秘封俱乐部 | 太空观测记录</title>
    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
    <link rel="stylesheet" href="./styles.css?v=20260617-archive-sky-v10" />
  </head>
  <body>
    <canvas id="starfield" aria-hidden="true"></canvas>
    <div class="site-vfx" aria-hidden="true">
      <span class="vfx-ring vfx-ring-a"></span>
      <span class="vfx-ring vfx-ring-b"></span>
      <span class="vfx-rail vfx-rail-a"></span>
      <span class="vfx-rail vfx-rail-b"></span>
      <span class="vfx-scan"></span>
    </div>
    <svg class="icon-sprite" aria-hidden="true" focusable="false">
      <symbol id="icon-github" viewBox="0 0 24 24">
        <path d="M9 19c-4.3 1.4 -4.3 -2.5 -6 -3m12 5v-3.5c0 -1 .1 -1.4 -.5 -2c2.8 -.3 5.5 -1.4 5.5 -6a4.6 4.6 0 0 0 -1.3 -3.2a4.2 4.2 0 0 0 -.1 -3.2s-1.1 -.3 -3.5 1.3a12.3 12.3 0 0 0 -6.2 0c-2.4 -1.6 -3.5 -1.3 -3.5 -1.3a4.2 4.2 0 0 0 -.1 3.2a4.6 4.6 0 0 0 -1.3 3.2c0 4.6 2.7 5.7 5.5 6c-.6 .6 -.6 1.2 -.5 2v3.5" />
      </symbol>
      <symbol id="icon-info" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="8.25" />
        <path d="M12 11v5.5" />
        <path d="M12 7.5h.01" />
      </symbol>
      <symbol id="icon-language" viewBox="0 0 24 24">
        <path d="M9 6.371c0 4.418 -2.239 6.629 -5 6.629" />
        <path d="M4 6.371h7" />
        <path d="M5 9c0 2.144 2.252 3.908 6 4" />
        <path d="M12 20l4 -9l4 9" />
        <path d="M19.1 18h-6.2" />
        <path d="M6.694 3l.793 .582" />
      </symbol>
      <symbol id="icon-list-music" viewBox="0 0 24 24">
        <path d="M4 6h14" />
        <path d="M4 11h10" />
        <path d="M4 16h7" />
        <path d="M18 14v5" />
        <path d="M18 19a2 2 0 1 0 0 -4" />
      </symbol>
      <symbol id="icon-play" viewBox="0 0 24 24">
        <path d="M7 4v16l13 -8z" />
      </symbol>
      <symbol id="icon-pause" viewBox="0 0 24 24">
        <path d="M7 5v14" />
        <path d="M17 5v14" />
      </symbol>
      <symbol id="icon-chevron-left" viewBox="0 0 24 24">
        <path d="M15 6l-6 6l6 6" />
      </symbol>
      <symbol id="icon-chevron-right" viewBox="0 0 24 24">
        <path d="M9 6l6 6l-6 6" />
      </symbol>
      <symbol id="icon-chevron-down" viewBox="0 0 24 24">
        <path d="M6 9l6 6l6 -6" />
      </symbol>
      <symbol id="icon-book" viewBox="0 0 24 24">
        <path d="M19 4v16h-12a2 2 0 0 1 -2 -2v-12a2 2 0 0 1 2 -2h12" />
        <path d="M19 16h-12a2 2 0 0 0 -2 2" />
        <path d="M9 8h6" />
      </symbol>
      <symbol id="icon-turntable" viewBox="0 0 24 24">
        <path d="M4 5h16v14h-16z" />
        <path d="M9.5 12m-3.5 0a3.5 3.5 0 1 0 7 0a3.5 3.5 0 1 0 -7 0" />
        <path d="M9.5 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0" />
        <path d="M16 9l2 2" />
        <path d="M18 11l-3 3" />
        <path d="M15 14l-2 2" />
      </symbol>
      <symbol id="icon-hifuu" viewBox="0 0 48 48">
        <circle cx="24" cy="24" r="17" />
        <circle cx="24" cy="24" r="4" />
        <path d="M7 24h10" />
        <path d="M31 24h10" />
        <path d="M24 7v10" />
        <path d="M24 31v10" />
        <path d="M12.5 12.5l7 7" />
        <path d="M28.5 28.5l7 7" />
        <path d="M35.5 12.5l-7 7" />
        <path d="M19.5 28.5l-7 7" />
        <path d="M16 24c2.8 -4.5 5.5 -6.8 8 -6.8s5.2 2.3 8 6.8c-2.8 4.5 -5.5 6.8 -8 6.8s-5.2 -2.3 -8 -6.8z" />
      </symbol>
    </svg>

    <section class="archive-gate" id="archive-gate" role="dialog" aria-modal="true" aria-label="点击进入">
      <div class="archive-gate-field" aria-hidden="true">
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="archive-angel-line" aria-hidden="true">
        <span title="SECRET SEALING CLUB / BOUNDARY OBSERVATION">⟊⟟⟒⟔⟁⟐⟡⟠⟑⟓⟒ ⟊⟒⟔⟟⟐⟁⟠⟡⟓⟑ ⟔⟒⟊⟟⟡⟁⟐⟠⟑⟓ ⟊⟟⟒⟔⟁⟐⟡⟠⟑⟓⟒ ⟊⟒⟔⟟⟐⟁⟠⟡⟓⟑</span>
      </div>
      <button class="archive-orb" id="archive-enter" type="button">
        <span class="archive-orb-aura" aria-hidden="true"></span>
        <span class="archive-orb-core" aria-hidden="true"></span>
        <span class="archive-enter-label" id="archive-enter-label">点击进入</span>
      </button>
    </section>

    <header class="site-header">
      <a class="brand" href="#/">
        <span class="brand-mark">
          <svg class="brand-icon" aria-hidden="true"><use href="#icon-hifuu"></use></svg>
        </span>
        <span>
          <strong>秘封俱乐部</strong>
          <small>太空观测记录</small>
        </span>
      </a>

      <nav class="top-nav" aria-label="主导航">
        <div class="language-switcher">
          <button
            class="language-trigger nav-icon-button"
            id="lang-toggle"
            type="button"
            aria-label="切换语言"
            aria-haspopup="true"
            aria-expanded="false"
            aria-controls="language-menu"
          >
            <span class="icon-chip" aria-hidden="true">
              <svg class="ui-icon"><use href="#icon-language"></use></svg>
            </span>
            <span class="visually-hidden" id="language-current">中文</span>
            <span class="language-caret" aria-hidden="true">
              <svg class="ui-icon"><use href="#icon-chevron-down"></use></svg>
            </span>
          </button>
          <div class="language-menu" id="language-menu" role="menu" hidden>
            <button type="button" role="menuitemradio" data-language="zh" aria-checked="true">
              中文
            </button>
            <button type="button" role="menuitemradio" data-language="ja" aria-checked="false">
              日本語
            </button>
          </div>
        </div>
        <button
          class="info-button nav-icon-button"
          id="info-toggle"
          type="button"
          aria-label="关于这个网站"
          aria-haspopup="dialog"
          aria-expanded="false"
          aria-controls="site-intro"
          title="关于这个网站"
        >
          <span class="icon-chip" aria-hidden="true">
            <svg class="ui-icon"><use href="#icon-info"></use></svg>
          </span>
        </button>
      </nav>
    </header>

    <main id="app" tabindex="-1"></main>

    <div class="intro-backdrop" id="intro-backdrop" hidden></div>
    <section class="site-intro" id="site-intro" role="dialog" aria-modal="true" aria-labelledby="intro-title" hidden>
      <div class="intro-heading">
        <h2 id="intro-title">太空观测记录</h2>
        <a class="intro-stars" href="https://github.com/cloud-oc/Secret-Sealing-Club" target="_blank" rel="noreferrer" aria-label="GitHub Stars">
          <img src="https://img.shields.io/github/stars/cloud-oc/Secret-Sealing-Club?style=for-the-badge&logo=github&label=Stars&color=56d6bd&labelColor=16252b" alt="GitHub Stars" />
        </a>
      </div>
      <div class="intro-copy">
        <p id="intro-about">
          秘封俱乐部是《东方Project》及其衍生作品中登场的一个架空的秘密结社。这里收录着九张秘封俱乐部的音乐 CD 读本。
        </p>
        <p id="intro-experience">
          选一张专辑，曲目会带着对应的故事段落一起亮起，就像驶在太空的列车行窗外闪烁的星星。
        </p>
        <p id="intro-note">
          阅读进度、语言与播放位置会保存在你的浏览器里。再次打开时，可以从上次停下的地方继续观测。
        </p>
        <p id="intro-repo">
          该项目位于 <a href="https://github.com/cloud-oc/Secret-Sealing-Club" target="_blank" rel="noreferrer">GitHub</a> 上。喜欢就加个 Star 吧！欢迎贡献。
        </p>
        <p id="intro-feedback">
          在这里发送你的使用反馈或报告 Bug。
        </p>
      </div>
      <button class="intro-close" id="intro-close" type="button" aria-label="关闭简介">关闭</button>
    </section>

    <div class="player-shell" id="player-shell" aria-label="音乐播放器">
      <div class="player-now">
        <a class="player-art" id="player-art" href="#/" aria-label="打开当前专辑">
          <span></span>
        </a>
        <div class="player-meta">
          <span class="player-index" id="player-index">TRACK 00</span>
          <a class="player-track-link" id="player-title" href="#" target="_blank" rel="noreferrer">
            在书架前停留
          </a>
          <small id="player-album">秘封俱乐部</small>
        </div>
      </div>

      <div class="player-center">
        <div class="player-controls">
          <button class="icon-button" id="prev-track" type="button" aria-label="上一首">
            <svg class="ui-icon" aria-hidden="true"><use href="#icon-chevron-left"></use></svg>
          </button>
          <button class="play-button" id="play-toggle" type="button" aria-label="播放或暂停">
            <svg class="ui-icon" aria-hidden="true"><use href="#icon-play"></use></svg>
          </button>
          <button class="icon-button" id="next-track" type="button" aria-label="下一首">
            <svg class="ui-icon" aria-hidden="true"><use href="#icon-chevron-right"></use></svg>
          </button>
        </div>

        <div class="player-timeline">
          <span id="current-time">0:00</span>
          <input id="seek" type="range" min="0" max="1000" value="0" aria-label="播放进度" />
          <span id="duration">0:00</span>
        </div>
      </div>

      <button
        class="playlist-toggle"
        id="playlist-toggle"
        type="button"
        aria-label="展开曲目列表"
        aria-controls="playlist-panel"
        aria-expanded="false"
        disabled
      >
        <svg class="ui-icon" aria-hidden="true"><use href="#icon-list-music"></use></svg>
      </button>

      <audio id="audio" preload="metadata"></audio>

      <div class="playlist-panel" id="playlist-panel" hidden></div>
    </div>

    <script type="module" src="./src/main.js?v=20260617-archive-sky-v10"></script>
  </body>
</html>