-
Notifications
You must be signed in to change notification settings - Fork 17
/
Copy pathindex.html
158 lines (145 loc) · 9.11 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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<!--
* ChillingMusic
* https://github.com/GreenTreeTeam/ChillingMusic/
* Licensed MIT © GreenTree Team
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="icon" href="/images/logo.png" type="image/png" sizes="16x16">
<title>Chilling Music</title>
<meta name="author" content="Chilling Music">
<meta name="description" content="Welcome to Chilling Music, The place where you can listen to music and relax and enjoy your time 24/7!"/>
<link rel="apple-touch-icon" href="/images/logo.png" />
<meta property="og:title" content="Chilling Music" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://chillingmusic.cf" />
<meta property="og:image" content="https://chillingmusic.cf/images/logo.png" />
<meta property="og:description" content="Welcome to Chilling Music, The place where you can listen to music and relax and enjoy your time 24/7!" />
<meta name="theme-color" content="#7701F7">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.2.3/pace.min.js"></script>
<link href="/css/pace-theme.css" rel="stylesheet" />
<link rel="stylesheet" href="/css/main.scss">
</head>
<body>
<div class="mainHeader">
<h1 class="ui center aligned inverted header" style="font-family: 'Balsamiq Sans', cursive;">Chilling Music</h1>
<h2 class="ui center aligned inverted sub header" style="font-family: 'Balsamiq Sans', cursive;">Welcome to Chilling Music, The place where you can listen to music and relax and enjoy your time 24/7!</h2>
</div>
<div class="controlingArea">
<h4 class="ui horizontal divider inverted header" style="font-family: 'Balsamiq Sans', cursive;"><i class="music icon"></i> Music Control <i class="music icon"></i></h4>
<div class="controlButtons">
<button id="playButton" class="ui blue labeled icon button" style="font-family: 'Balsamiq Sans', cursive;"><i class="play icon"></i>Play</button>
<button id="pauseButton" class="ui purple labeled icon button" style="font-family: 'Balsamiq Sans', cursive;"><i class="pause icon"></i>Pause</button>
<button id="restartButton" class="ui green labeled icon button" style="font-family: 'Balsamiq Sans', cursive;"><i class="redo icon"></i>Restart</button>
<button id="loopButton" class="ui orange labeled icon button" style="font-family: 'Balsamiq Sans', cursive;"><i class="sync icon"></i>Loop Song</button>
<button id="songsListButton" class="ui red labeled icon button" style="font-family: 'Balsamiq Sans', cursive;"><i class="list icon"></i>Songs List</button>
<button id="todaySongButton" class="ui yellow labeled icon button" style="font-family: 'Balsamiq Sans', cursive;"><i class="music icon"></i>Today's Song</button>
<button id="nextButton" class="ui violet labeled icon button" style="font-family: 'Balsamiq Sans', cursive;"><i class="arrow circle right icon"></i>Next</button>
</div>
</div>
<div class="volumeControlArea centered">
<h4 class="ui horizontal divider inverted header" style="font-family: 'Balsamiq Sans', cursive;"><i class="volume up icon"></i> Volume Control <i class="volume up icon"></i></h4>
<input type="range" name="Volume" id="VolumeControl" min="1" max="10">
</div>
<div class="musicInformantion">
<h4 class="ui horizontal divider inverted header" style="font-family: 'Balsamiq Sans', cursive;"><i class="headphones icon"></i> Music Information <i class="headphones icon"></i></h4>
<div class="centered">
<div id="songName" class="ui inverted header"></div>
<div id="songAuthor"></div>
<div id="songDuration"></div>
<div id="songCurrentSecond"></div>
<div id="songLoop"></div>
<br>
<div id="songStatus">Status: Loading <i class="spinner loading icon"></i></div>
<div class="ui purple inverted progress" id="songStatusBar" style="width: 50%;margin-left: 25%;">
<div class="bar">
<div class="progress"></div>
</div>
</div>
</div>
</div>
<div id="SongsListModel" class="ui inverted modal">
<div class="header">Songs List</div>
<div class="ui inverted input">
<input id='SongSearchInput' type="text" placeholder="Search...">
</div>
<div class="scrolling content" style="color: black;">
<table class="ui selectable inverted table">
<thead>
<tr>
<th class="center aligned">Song ID</th>
<th class="center aligned">Song Name</th>
<th class="center aligned">Song Author</th>
</tr>
</thead>
<tbody id="SongsListArea">
</tbody>
</table>
</div>
<div class="actions">
<div class="ui approve button">Got it!</div>
</div>
</div>
<div id="TodaySongModel" class="ui modal">
<h1 class="ui header">
Today's Song
<div class="sub header">A random song which is selected by Automatically Eachday</div>
</h1>
<div class="scrolling content" style="color: black;">
<table class="ui selectable inverted table">
<thead>
<tr>
<th class="center aligned">Song ID</th>
<th class="center aligned">Song Name</th>
<th class="center aligned">Song Author</th>
</tr>
</thead>
<tbody id="TodaySongList">
</tbody>
</table>
</div>
<div class="actions">
<div class="ui violet button" id="TodaySongPlay">Play</div>
<div class="ui grey approve button">Got it!</div>
</div>
</div>
<div class="customSongClass">
<h4 class="ui horizontal divider inverted header" style="font-family: 'Balsamiq Sans', cursive;"><i class="microphone icon"></i> Add Custom Song <i class="microphone icon"></i></h4>
<div class="centered">
<div class="ui invverted input">
<input type="text" id="customSongInput" placeholder="Enter song ID">
</div>
<br>
<button id="CustomPlayButton" class="ui yellow labeled icon button" style="font-family: 'Balsamiq Sans', cursive;padding-top: 10px;"><i class="play icon"></i>Quick Play</button>
<button id="CustomQueueButton" class="ui pink labeled icon button" style="font-family: 'Balsamiq Sans', cursive;"><i class="play icon"></i>Add to queue</button>
</div>
</div>
<div class="songQueue">
<h4 class="ui horizontal divider inverted header" style="font-family: 'Balsamiq Sans', cursive;"><i class="volume up icon"></i> Songs Queue <i class="volume up icon"></i></h4>
<div class="centered" id="AllSongsQueue">
<div class="ui centered card">
<div class="content">
<div class="header">ChillingMusic</div>
<div class="meta">by GreenTree Team</div>
</div>
</div>
</div>
</div>
<div class="socialLinks">
<h4 class="ui horizontal divider inverted header" style="font-family: 'Balsamiq Sans', cursive;"><i class="share alternate up icon"></i> Social Media <i class="share alternate up icon"></i></h4>
<div class="centered" id="SocialButtons">
<button id="DiscordButton" class="ui violet button" style="font-family: 'Balsamiq Sans', cursive;"><i class="discord icon"></i>Discord</button>
<button id="YouTubeButton" class="ui youtube button" style="font-family: 'Balsamiq Sans', cursive;"><i class="youtube icon"></i>YouTube</button>
<button id="GithubButton" class="ui secondary button" style="font-family: 'Balsamiq Sans', cursive;"><i class="github icon"></i>GitHub</button>
</div>
</div>
<div id="snackbar" style="color: black;">Sup ;)</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
<script type="module" src="/src/index.ts"></script>
</body>
</html>