AwooMusicBot-Overlay-Default/index.html at main · Enkianssus/AwooMusicBot-Overlay-Default · 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
<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>嗷呜点歌机 OBS 组件</title>
    <link rel="stylesheet" href="styles.css">
    <script src="app.js" defer></script>
  </head>
  <body>
    <main class="widget" aria-live="polite">
      <article class="widget-card">
        <section class="now-playing" id="playback-region" data-paused="false" aria-labelledby="current-heading">
          <div class="cover-frame" id="current-cover-frame" data-artwork-kind="fallback">
            <img id="current-cover" alt="" hidden>
            <span class="cover-fallback" id="current-cover-fallback" aria-hidden="true">♫</span>
          </div>

          <div class="current-copy">
            <div class="widget-topline">
              <div class="brand">
                <span class="brand-mark" aria-hidden="true">♫</span>
                <span>嗷呜点歌机</span>
              </div>
              <div class="connection" id="connection-status" data-state="offline">
                <span class="connection-dot" aria-hidden="true"></span>
                <span id="connection-label">接口未连接</span>
              </div>
            </div>

            <div class="song-copy">
              <span class="section-kicker">NOW PLAYING</span>
              <h1 class="current-title" id="current-heading">
                <span id="current-title">等待播放</span>
              </h1>
              <p class="current-artist" id="current-artist">暂无歌曲</p>
              <p class="current-requester" id="current-requester" hidden>
                点歌人：<span id="current-requester-name"></span>
              </p>
            </div>

            <div class="state-row" aria-label="点歌机异常状态">
              <div class="switch-chip" id="playback-alert" hidden>
                <span class="switch-label">代播</span>
                <span class="switch-state" id="playback-state" data-enabled="false">已暂停</span>
              </div>
              <div class="switch-chip" id="request-alert" hidden>
                <span class="switch-label">点歌</span>
                <span class="switch-state" id="request-state" data-enabled="false">已暂停</span>
              </div>
              <div class="connection player-connection" id="player-status" data-state="offline" hidden>
                <span class="alert-mark" aria-hidden="true">!</span>
                <span id="player-label">播放器未连接</span>
              </div>
            </div>
          </div>
        </section>

        <section class="queue" id="queue-region" data-paused="false" aria-labelledby="queue-heading">
          <div class="queue-heading-row">
            <div>
              <span class="section-kicker">UP NEXT</span>
              <h2 id="queue-heading">待播队列</h2>
            </div>
            <span class="queue-count" id="queue-count">0 首</span>
          </div>
          <ol class="queue-list" id="queue-list"></ol>
          <p class="queue-empty" id="queue-empty">暂无待播歌曲</p>
        </section>
      </article>

      <span class="last-updated" id="last-updated">等待接口数据</span>
    </main>
  </body>
</html>