-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·143 lines (120 loc) · 5.22 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- primary meta tags -->
<title>Radio Player</title>
<meta name="title" content="Radio Player" />
<meta name="description" content="A web radio player html template made by PeWe79" />
<!-- favicon -->
<link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml" />
<!-- google font link -->
<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=Inter:wght@400;500&display=swap" rel="stylesheet" />
<!-- material icon font -->
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,400,0,-25" />
<!-- custom css link -->
<link rel="stylesheet" href="./assets/css/style.css" />
</head>
<body>
<!-- ./top APP bar -->
<div class="top-bar wrapper">
<div class="logo wrapper">
<span class="material-symbols-rounded">graphic_eq</span>
<h1 class="title-lg">Radio Player</h1>
</div>
<div class="top-bar-actions">
<button class="btn-icon" data-playlist-toggler>
<span class="material-symbols-rounded">queue_music</span>
</button>
</div>
</div>
<main>
<article>
<!-- ./player -->
<div class="player">
<div class="container">
<figure class="music-banner">
<img id="artwork" src="./assets/images/poster.jpg" width="800" height="800" alt="Album Art"
class="img-cover" data-player-banner />
</figure>
<div class="music-content">
<h2 id="title" class="headline-sm" data-title>Loading....</h2>
<p class="label-lg label-wrapper wrapper">
<span id="album" data-album>Loading....</span>
</p>
<p id="artist" class="label-md artist" data-artist>Loading....</p>
<div class="seek-control"></div>
<div class="player-control wrapper">
<button class="btn-icon" data-repeat>
<a id="spotify" href="https://open.spotify.com" target="_blank" rel="noopener noreferrer">
<img id="s_logo" src="./assets/images/spotify.png" width="50" height="60" />
</a>
</button>
<button class="btn-icon" data-skip-prev>
<span class="material-symbols-rounded">skip_previous</span>
</button>
<button class="btn-icon play" data-play-btn>
<span class="material-symbols-rounded default-icon">play_arrow</span>
<span class="material-symbols-rounded active-icon">pause</span>
</button>
<button class="btn-icon" data-skip-next>
<span class="material-symbols-rounded">skip_next</span>
</button>
<button class="btn-icon toggle" data-history>
<span title="Recent Song" class="material-symbols-rounded">history</span>
</button>
</div>
</div>
</div>
</div>
<!-- ./station list sidebar -->
<div class="playlist" data-playlist>
<ul class="music-list" data-music-list></ul>
</div>
<div class="overlay" data-playlist-toggler data-overlay></div>
</article>
</main>
<div id="historyModal" class="fixed z-10 inset-0 overflow-y-auto hidden">
<div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-black opacity-70"></div>
</div>
<span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">​</span>
<div
class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-6xl sm:w-full"
role="dialog" aria-modal="true" aria-labelledby="modal-headline">
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 relative" id="historyModalContent">
<button type="button" class="absolute top-3 right-3 text-gray-400 hover:text-gray-500 focus:outline-none"
close-history-modal>
<span class="material-symbols-rounded">close</span>
</button>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-center">
<h3 class="text-lg leading-6 font-bold text-gray-900" id="modal-headline"></h3>
<div class="mt-4">
<span class="text-4xl font-bold text-white">Recent Song</span>
<hr>
<ul class="divide-y divide-gray-200" song-history-list></ul>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- custom js link -->
<script>
const settings = {
title: "Radio Player",
defaultartwork: "./assets/images/poster.jpg",
nowplayingAPI: "https:\/\/s1.cloudmu.id",
};
const FallbackName = settings.title;
const apiUrl = settings.nowplayingAPI;
</script>
<script src="./assets/js/script.js"></script>
</body>
</html>