-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
102 lines (95 loc) · 6.6 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./src/style.css">
<title>Naxi Radio</title>
</head>
<body class="dark:bg-[#202029] overflow-x-hidden">
<div id="app">
<div id="theme-btn"
class="fixed z-[1000] right-5 top-6 w-[2.7em] h-[2.7em] bg-[#202029] rounded-full cursor-pointer flex justify-center items-center shadow-xl group overflow-hidden hover:scale-[1.1]">
<img id="moon" src="/moon.svg" class="h-[1.3em] absolute select-none">
<img id="sun" src="/sun.svg" class="h-[1.5em] absolute select-none" style="transform: translateX(3em);">
</div>
<div>
<div class="relative my-5 select-none flex justify-center">
<img src="/naxitext.png" alt="Naxi Radio" class="z-[20]">
<div class="absolute w-full h-[2em] bg-[#005088] top-[4.5em]">
</div>
</div>
</div>
<div class="sticky top-3 flex justify-center z-[100]">
<div id="categories" class="flex flex-row bg-white rounded-lg dark:bg-[#3c3c4a]"
style="box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.3);"></div>
</div>
<div id="content" class="mb-[5em]">
</div>
<div id="info-panel" class="info fixed bottom-[-8em] w-full bg-white flex flex-col dark:bg-[#2a2a36]"
style="box-shadow: 0px -13px 17px -17px rgba(0,0,0,0.93);">
<div class="info-panel-row flex flex-row items-center justify-center h-[4em]">
<div id="info-panel-box"
class="ml-10 relative info-card rounded-xl bg-gray-400 w-[100%] h-[3em] flex items-center justify-between overflow-hidden tablet-xl:justify-center">
<div id="info-dummy"
class="brightness-[0.9] w-[300px] h-[100px] absolute left-[-230px] bg-black rotate-[-10deg] tablet-xl:hidden">
</div>
<span class="text-white text-xl font-bold mx-10 whitespace-nowrap leading-normal relative select-none"
id="info-song-title">Radio</span>
<div class="flex flex-row items-center">
<span class="mr-3 text-white text-right relative z-[20] relative tablet-xl:hidden"
id="info-now-playing">Loading...</span>
<img src="/stop.svg" class="h-[1.5em] mr-3 cursor-pointer tablet-xl:hidden hover:scale-[1.1]"
id="info-stop">
</div>
</div>
<div class="naxi-logo text-xl w-[20em] whitespace-nowrap text-center dark:text-white select-none flex flex-row justify-center items-center">
Naxi <svg class="fill-black dark:fill-white" height="16" width="16" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512">
<path d="M331.328,75.914C313.043,61.805,288,42.477,288,32c0-17.672-14.328-32-32-32s-32,14.328-32,32v293.58
c-10.023-3.549-20.762-5.58-32-5.58c-53.02,0-96,42.98-96,96s42.98,96,96,96s96-42.98,96-96V123.293
c1.414,1.094,2.82,2.203,4.23,3.293c36.105,27.852,59.77,48.078,59.77,74.305c0,40.766-21.684,63.516-22.305,64.164
c-12.672,12.32-12.961,32.578-0.641,45.25c6.273,6.453,14.605,9.695,22.949,9.695c8.035,0,16.082-3.008,22.301-9.055
c4.27-4.148,41.695-42.484,41.695-110.055C416,141.25,369.051,105.023,331.328,75.914z"/>
</svg>
</div>
<div class="flex flex-row w-min justify-center mr-10">
<div class="text-xl whitespace-nowrap mr-1 dark:text-white select-none">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="fill-black dark:fill-white" fill-rule="evenodd" clip-rule="evenodd" d="M19.2942 6.63396C19.7725 6.35782 20.3841 6.52169 20.6603 6.99998C21.5379 8.52018 22 10.2446 22 12C22 13.7553 21.5379 15.4798 20.6603 17C20.3841 17.4783 19.7725 17.6421 19.2942 17.366C18.8159 17.0899 18.6521 16.4783 18.9282 16C19.6304 14.7838 20 13.4043 20 12C20 10.5957 19.6304 9.21614 18.9282 7.99998C18.6521 7.52169 18.8159 6.9101 19.2942 6.63396Z"/>
<path class="fill-black dark:fill-white" fill-rule="evenodd" clip-rule="evenodd" d="M16.399 8.30553C16.8773 8.02939 17.4889 8.19326 17.765 8.67155C18.3493 9.68353 18.6568 10.8315 18.6568 12C18.6568 13.1685 18.3493 14.3164 17.765 15.3284C17.4889 15.8067 16.8773 15.9706 16.399 15.6944C15.9207 15.4183 15.7568 14.8067 16.0329 14.3284C16.4417 13.6205 16.6568 12.8174 16.6568 12C16.6568 11.1825 16.4417 10.3795 16.0329 9.67155C15.7568 9.19326 15.9207 8.58167 16.399 8.30553Z"/>
<path class="fill-black dark:fill-white" fill-rule="evenodd" clip-rule="evenodd" d="M10.8397 4C9.38012 4 7.99337 4.63781 7.04346 5.74604C6.70415 6.1419 6.30972 6.44883 5.78377 6.55109L5.23652 6.6575C3.35695 7.02297 2 8.6692 2 10.584V13.416C2 15.3308 3.35696 16.977 5.23652 17.3425L5.78377 17.4489C6.30972 17.5512 6.70415 17.8581 7.04346 18.254C7.99337 19.3622 9.38012 20 10.8397 20H11C12.6569 20 14 18.6569 14 17V7C14 5.34315 12.6569 4 11 4H10.8397Z"/>
</svg>
</div>
<input id="volume-slider" type="range" min="0" max="100" value="50"
class="range focus:border-transparent focus:ring-0" />
</div>
<div class="cursor-pointer" id="info-expand">
<svg class="fill-black dark:!fill-white h-[2em] w-[5em] hover:scale-[1.1]" height="800px" width="800px"
version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
viewBox="0 0 512 512" xml:space="preserve">
<g>
<g>
<path
d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M377.749,313.749 c-4.16,4.16-9.621,6.251-15.083,6.251c-5.462,0-10.923-2.091-15.083-6.251L256,222.165l-91.584,91.584 c-8.341,8.341-21.824,8.341-30.165,0c-8.341-8.341-8.341-21.824,0-30.165l106.667-106.667c8.341-8.341,21.824-8.341,30.165,0 L377.75,283.584C386.091,291.925,386.091,305.408,377.749,313.749z" />
</g>
</g>
</svg>
</div>
</div>
<div class="info-panel-row flex flex-row h-[4em] w-full items-center justify-center">
<div id="show-info" class="mx-10 font-bold whitespace-nowrap dark:text-white">
</div>
<div class="mx-10 font-bold whitespace-nowrap dark:text-white">
Poslednjih 5 pesama:
</div>
<div id="info-last5"
class="flex flex-col text-center text-black text-base dark:text-white overflow-y-scroll overflow-x-hidden h-[4em] w-1/2">
</div>
</div>
</div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>