-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
111 lines (96 loc) · 5.21 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Melancholy Corner</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="theme-color" content="#000040">
<meta name="author" content="Nour">
<meta name="robots" content="index, follow">
<meta name="description" content="Melancholy Corner is what they'd call an online radio station that really just broadcasts whatever I play on Spotify.">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Melancholy Corner">
<meta name="twitter:description" content="Melancholy Corner is what they'd call an online radio station that really just broadcasts whatever I play on Spotify.">
<meta property="og:type" content="music,radio_station">
<meta property="og:title" content="Melancholy Corner">
<meta property="og:image" content="res/apple-touch-icon.png">
<link rel="stylesheet" type="text/css" href="res/style.css">
<link rel="apple-touch-icon" type="image/png" sizes="192x192" href="res/apple-touch-icon.png">
<link rel="icon" sizes="32x32" type="image/png" href="res/favicon-32x32.png">
<link rel="icon" sizes="16x16" type="image/png" href="res/favicon-16x16.png">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script src="res/window.js"></script>
<script src="res/main.js"></script>
</head>
<body>
<!-- main player -->
<audio id="audio" preload="none"></audio>
<!-- player window -->
<div id="player_window" class="window" style="visibility: hidden;">
<div class="window_inner">
<div class="title" id="player_window_title"><i id="window_icon"></i>Melancholy Corner</div>
<ul class="menu_bar">
<li id="about_menu">About</li>
<li>Recently Played</li>
</ul>
<div class="content">
<div style="width: 100%; height: 76px !important;">
<img id="artwork">
<div id="song_name"> </div>
<div id="artist_name"> </div>
</div>
<div style="display: flex; width: 100%; flex-direction: row;">
<button id="play_stop" style="margin-right: 4px;" disabled>Loading</button>
<button id="settings_button">Settings</button>
</div>
</div>
<div class="status_bar">Listeners: <span id="listeners">N/A</span></div>
</div>
</div>
<!-- /player window -->
<!-- about window -->
<div id="about_window" class="window" style="visibility: hidden;">
<div class="window_inner">
<div class="title" id="about_window_title">About</div>
<div class="content">
<h1>Welcome to Melancholy Corner!</h1>
<p>I'm Nour, and Melancholy Corner is what they'd call an online radio station that really just broadcasts whatever I play on Spotify. It's a way for me to share music while also engage in responsive web design.</p>
<p>I hope you like it.</p>
<h1>Partner Sites</h1>
<ul>
<li>Amar's <a target="_blank" href="http://3ayezaneek.club/">3ayez aneek club</a></li>
</ul>
<h1>Music</h1>
<p>You can have my Spotify playlists or you can also have a direct streaming link.</p>
<h2>Playlists</h2>
<p><a target="_blank" href="https://open.spotify.com/playlist/46RR0ZmlVf1Va0AdKhpHqP?si=VGO56vg_QNO7BMTDyfUN5g">Broadcast</a></p>
<h2>Direct Streaming</h2>
<p><a id="broadcast_link" target="_blank" href=""></a> (mp3, 96 kbps)</p>
<div class="button_container">
<button id="about_close">Close</button>
</div>
</div>
</div>
</div>
<!-- /about window -->
<!-- settings window -->
<div id="settings_window" class="window" style="visibility: hidden;">
<div class="window_inner">
<div class="title" id="settings_window_title">Settings</div>
<div class="content">
<p><strong>Trigger warning:</strong> I feel obligated to say that many of the imagery you will be exposed to through here may be triggering to people suffering from depression, anxiety or PTSD. Some of it also contains flashing colors, which may trigger epilepsy.</p>
<h2>Use the buttons in the bottom to control the background image.</h2>
<div class="source">
<strong>Number:</strong> <span id="bg_number"></span><br>
</div>
<button id="bg_previous" style="width: 25%;"><</button><button id="bg_next" style="width: 25%;">></button><button id="bg_solid" style="width: 25%;">Solid</button><button id="bg_random" style="width: 25%;">Random</button>
<div style="margin-bottom: 10px;"></div>
<div class="button_container">
<button id="settings_close" style="width: 30%;">Close</button>
</div>
</div>
</div>
</div>
<!-- /settings window -->
</body>
</html>