TestSite/index.html at master · headsink/TestSite · 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
<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>This is something new</title>
    <meta
      name="description"
      content="Don't forget to refer to https://codepen.io/spacewalkingninja/pen/VwWdgob"
    />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Doto:wght@100..900&display=swap"
      rel="stylesheet"
    />
    <link href="output.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="font-doto m-3 text-4xl">Nothing</h1>
    <!-- beginning of WinAmp UI -->
    <div
      class="overflow-hidden bg-gradient-to-br from-slate-300 to-black to-90% p-1"
    >
      <div
        class="to-winamp-grey grid bg-radial-[at_40%_65%] from-slate-500 to-99% text-amber-100 shadow-2xl shadow-black"
      >
        <header class="m-2 mb-1 flex">
          <div class="mt-2 ml-2 h-3 flex-auto rounded-3xl bg-orange-400"></div>
          <div class="mx-2 flex-none">
            <h1 class="font-mono text-xl text-pretty">WINAMP CLASSIC</h1>
          </div>
          <div class="mt-2 mr-2 h-3 flex-auto rounded-3xl bg-orange-400"></div>
        </header>

        <div class="mx-3 mb-1 grid border-2 border-slate-900 border-r-slate-400 border-b-slate-300">
          <div class="flex flex-col border-2 border-slate-400 border-r-black border-b-slate-800 backdrop-opacity-70">
            <div class="flex flex-row p-2">
              <div class="font-doto m-2 border-3 border-black border-r-zinc-600 border-b-zinc-600 bg-black p-2 text-6xl text-lime-500 opacity-100">
                01:23
              </div>
              <div class="grid basis-full grid-rows-2">
                <div class="m-1 content-center">
                  <p class="p-1 bg-black text-2xl text-lime-500">1. track-1 (6:12)</p>
                </div>
                <div class="m-1 content-center border-1">
                  <input
                    class="w-full"
                    type="range"
                    min="0"
                    max="100"
                    value="10"
                    step="1"
                  />
                </div>
              </div>
            </div>
            <div class="mx-3 border-2">
              <input
                class="w-full"
                type="range"
                min="0"
                max="100"
                value="10"
                step="1"
              />
            </div>
          </div>
          <div>
            <button class="rounded-lg px-4 py-2 bg-red-600 text-red-100 hover:bg-red-700 duration-300"> This is a button </button>
          </div>
        </div>
      </div>
    </div>
    <!-- end of WinAmp UI -->

    <!-- Main Player Window -->
    <div class="w-full max-w-md bg-[#2D3748] shadow-2xl border-t-2 border-l-2 border-gray-500 border-r-2 border-b-2">
        <!-- Title Bar -->
      <div class="grid bg-radial-[at_40%_65%] from-slate-500 to--grey-900 to-99% shadow-2xl shadow-black text-amber-100">
       <header class="flex m-2 mb-1">
      <div class="flex-auto ml-2 mt-2 rounded-3xl h-3 bg-orange-400"></div>
      <div class="flex-none mx-2">
        <h1 class="font-mono text-xl text-pretty">WINAMP CLASSIC</h1>
      </div>
      <div class="flex-auto mr-2 mt-2 rounded-3xl h-3 bg-orange-400"></div>
    </header>
      </div>
        <div class="p-2 space-y-2">
            <!-- Digital Display -->
            <div class="bg-black p-1.5 border-2 border-gray-900 grid grid-cols-3 gap-2">
                <div class="col-span-1">
                    <div class="flex items-center">
                        <svg width="12" height="12" viewBox="0 0 24 24" class="text-green-400 mr-1"><path fill="currentColor" d="M8 5v14l11-7z"/></svg>
                        <span class="text-green-400 text-3xl display-font">-02:24</span>
                    </div>
                    <div class="flex items-end space-x-0.5 mt-1 h-6">
                        <!-- Static Visualizer -->
                        <div class="w-1.5 bg-green-400"></div>
                        <div class="w-1.5 bg-green-400"></div>
                        <div class="w-1.5 bg-green-400"></div>
                        <div class="w-1.5 bg-green-400"></div>
                        <div class="w-1.5 bg-green-400"></div>
                        <div class="w-1.5 bg-green-400"></div>
                        <div class="w-1.5 bg-green-400"></div>
                        <div class="w-1.5 bg-green-400"></div>
                        <div class="w-1.5 bg-green-400"></div>
                        <div class="w-1.5 bg-green-400"></div>
                        <div class="w-1.5 bg-green-400"></div>
                        <div class="w-1.5 bg-green-400"></div>
                    </div>
                </div>
                <div class="col-span-2 text-green-400 display-font text-lg flex flex-col justify-between">
                     <div class="flex justify-between items-center">
                        <span>7 Mb :::</span>
                        <span>::: 05:26 :: F</span>
                    </div>
                    <div class="flex items-center justify-start space-x-4">
                        <div class="bg-gray-800 border border-gray-600 px-1.5 py-0.5">
                            <span class="text-green-400 text-sm">320</span> <span class="text-gray-400 text-xs">kbps</span>
                        </div>
                         <div class="bg-gray-800 border border-gray-600 px-1.5 py-0.5">
                            <span class="text-green-400 text-sm">44</span> <span class="text-gray-400 text-xs">kHz</span>
                        </div>
                        <button class="bg-gray-600 text-white text-xs px-2 py-0.5 btn-classic">SLEEP</button>
                    </div>
                </div>
            </div>

            <!-- Sliders & Buttons -->
            <div class="flex items-center space-x-2">
                <input type="range" class="w-full h-3 appearance-none bg-red-800" value="30">
                <button class="bg-gray-600 text-white text-xs px-2.5 py-1 btn-classic">EQ</button>
                <button class="bg-gray-600 text-white text-xs px-2.5 py-1 btn-classic">PL</button>
            </div>

            <!-- Progress Bar -->
            <div class="bg-yellow-600 border-t-2 border-l-2 border-yellow-400 border-r-2 border-b-2 p-0.5">
                <div class="bg-black h-3"></div>
            </div>

            <!-- Main Controls -->
            <div class="flex justify-between items-center">
                <div class="flex space-x-0.5">
                    <button aria-label="Back" class="bg-gray-600 p-2 btn-classic text-white">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M4 5h3v10H4V5zm9 0h3v10h-3V5zM8.5 5L13 10l-4.5 5V5z"></path></svg>
                    </button>
                    <button aria-label="Play" class="bg-gray-600 p-2 btn-classic text-white">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M6 5l8 5-8 5V5z">
                          </path></svg>
                    </button>
                    <button aria-label="Pause" class="bg-gray-600 p-2 btn-classic text-white">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M6 5h2v10H6V5zm6 0h2v10h-2V5z"></path></svg>
                    </button>
                    <button aria-label="Stop" class="bg-gray-600 p-2 btn-classic text-white">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M6 6h8v8H6V6z"></path></svg>
                    </button>
                    <button aria-label="Eject" class="bg-gray-600 p-2 btn-classic text-white">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M13 5h3v10h-3V5zM4 5h3v10H4V5zM8.5 5L4 10l4.5 5V5z" transform="rotate(180 10 10)"></path></svg>
                    </button>
                    <button aria-label="Forward" class="bg-gray-600 p-2 btn-classic text-white">
                        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20"><path d="M4 14h12v2H4v-2zM10 4l-4 4h8l-4-4z"></path></svg>
                    </button>
                </div>

                <div class="flex items-center space-x-1">
                    <button class="bg-gray-600 text-white text-xs px-2 py-1 btn-classic">SHUFFLE</button>
                    <button aria-label="loop" class="bg-gray-600 p-1 btn-classic text-white">
                        <svg class="w-5 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M10 4l-4 3h3v6H6l4 3 4-3h-3V7h3l-4-3z"></path></svg>
                    </button>
                </div>

                <div class="w-12 h-12 bg-yellow-500 rounded-full flex items-center justify-center border-2 border-yellow-600 shadow-lg">
                    <span class="text-black font-extrabold text-2xl italic -rotate-12">A</span>
                </div>
            </div>
        </div>
    </div>

    <ul>
      <li>https://madhuranjanui.com/docs/button</li>
      <li>https://uiverse.io/Spacious74/helpless-tiger-55</li>
      <li>https://uiverse.io/dorian_8749/orange-liger-72</li>
      <li>https://uiverse.io/buttons?theme=all&t=tailwind</li>
    </ul>
    <input class="w-full" type="range" min="0" max="1000" value="10" step="1" />
    <div class="flex-col">
      <p>Well, let me tell you something, ...</p>
      <p>Sure, go ahead, laugh...</p>
      <p>Maybe we can live without...</p>
      <p>Look. If you think this is...</p>
    </div>
    <div class="rounded-3xl bg-gradient-to-b from-gray-200 to-transparent p-px">
      <div class="rounded-[calc(1.5rem-1px)] bg-gray-50 p-10">
        <p class="text-gray-700 dark:text-gray-300">
          I absolutely love Tailus! The component blocks are beautifully
          designed and easy to use, which makes creating a great-looking website
          a breeze
        </p>
        <div class="mt-8 flex items-center gap-4">
          <img
            class="h-12 w-12 rounded-full"
            src="https://pbs.twimg.com/profile_images/1599029039297077249/p0znhFdE_400x400.jpg"
            alt=""
          />
          <div>
            <h3 class="text-lg font-medium text-gray-700 dark:text-white">
              Oketa Fred
            </h3>
            <span class="text-sm tracking-wide text-gray-600 dark:text-gray-400"
              >Fullstack Developer</span
            >
          </div>
        </div>
      </div>
    </div>
  </body>
</html>