badapple/index.html at main · fluxth/badapple · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bad Apple!</title>
  </head>
  <body class="bg-black text-white">
    <div id="app" class="max-h-screen overflow-hidden">
      <div class="w-full bg-black relative">
        <div id="player-area" class="w-full flex justify-center items-center">
          <canvas id="canvas" class="bg-white"></canvas>
        </div>
        <div
          id="settings-panel"
          class="px-4 py-2 absolute text-sm bg-black/50 right-2 bottom-2 rounded-lg backdrop-blur shadow flex gap-4"
        >
          <div class="flex flex-col">
            <h2 class="font-bold mb-1">Render Mode</h2>
            <label>
              <input name="render-mode" value="block" checked type="radio" />
              Block
            </label>
            <label>
              <input name="render-mode" value="text" type="radio" />
              Text (Light)
            </label>
            <label>
              <input name="render-mode" value="text_inverse" type="radio" />
              Text (Dark)
            </label>
            <label>
              <input name="render-mode" value="size" type="radio" />
              Size (Light)
            </label>
            <label>
              <input name="render-mode" value="size_inverse" type="radio" />
              Size (Dark)
            </label>
            <label>
              <input name="render-mode" value="diff" type="radio" />
              Differential
            </label>
          </div>
          <div class="flex flex-col">
            <h2 class="font-bold mb-1">Scaling</h2>
            <label>
              <input name="render-scaling" value="4" type="radio" />
              480p
            </label>
            <label>
              <input name="render-scaling" value="6" type="radio" />
              720p
            </label>
            <label>
              <input name="render-scaling" value="9" checked type="radio" />
              1080p
            </label>
            <label>
              <input name="render-scaling" value="12" type="radio" />
              1440p
            </label>
            <label>
              <input name="render-scaling" value="18" type="radio" />
              2160p
            </label>
          </div>
        </div>
      </div>
      <div
        id="player-container-controls"
        class="w-full h-10 bg-gradient-to-b from-gray-700 to-gray-900 border-t border-gray-800 select-none"
      >
        <div class="w-full h-full flex gap-4 items-center px-4">
          <button id="player-button-play">
            <i class="fa-solid fa-fw fa-play"></i>
          </button>
          <div id="player-volume" class="relative h-full flex">
            <div
              class="overlay hidden absolute top-0 h-24 w-8 -mt-24 -ml-1 bg-gray-700 rounded-tl rounded-tr"
            >
              <input
                id="player-volume-slider"
                type="range"
                value="100"
                class="-rotate-90 w-20 -ml-6 mt-10"
              />
            </div>
            <button id="player-button-volume">
              <i class="fa-solid fa-fw fa-volume-high"></i>
            </button>
          </div>
          <div id="player-current-time" class="block text-center w-10 text-sm">
            0:00
          </div>
          <div class="flex-1">
            <div class="h-2 relative">
              <div
                id="player-bar"
                class="w-full h-full overflow-hidden cursor-pointer"
              >
                <div
                  class="h-full w-full bg-gradient-to-b from-gray-400 to-gray-200 rounded-full pointer-events-none"
                ></div>
                <div
                  id="player-buffer-bar"
                  class="h-full absolute top-0 bg-gradient-to-b from-gray-500 to-gray-600 rounded-full pointer-events-none"
                ></div>
                <div
                  id="player-progress-bar"
                  class="h-full absolute top-0 bg-gradient-to-b from-red-600 to-red-700 rounded-full pointer-events-none"
                ></div>
              </div>
              <div
                id="player-seek-handle"
                class="h-4 w-4 -ml-2 absolute rounded-full -top-1 left-0 bg-red-600 hover:bg-red-500 active:bg-red-700 drop-shadow-lg cursor-pointer"
              ></div>
            </div>
          </div>
          <button id="player-button-settings">
            <i class="fa-solid fa-fw fa-cog"></i>
          </button>
        </div>
      </div>
      <audio id="music">
        <source src="/media/bad_apple.webm" type='audio/webm; codecs="opus"' />
        <source
          src="/media/bad_apple.m4a"
          type='audio/mp4; codecs="mp4a.40.2"'
        />
      </audio>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>