-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
156 lines (125 loc) · 6.75 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tweet Tracks</title>
<script src="https://kit.fontawesome.com/715d22d8c7.js" crossorigin="anonymous"></script>
<link rel="shortcut icon" type="image/jpg" href="./assets/images/tweet-tracks-logo.svg" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/base-min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/grids-responsive-min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/build/menus-min.css">
<link rel="stylesheet" href="./assets/css/style.css" />
</head>
<body>
<div class="pure-g flex-row">
<div class="pure-u-1 topbar shadow-dark">
<div class="p-1 flex-row align-center justify-center-between">
<header class="flex-row align-center justify-center-between">
<div class="flex-row align-center mb-1">
<img src="./assets/images/tweet-tracks-logo.svg" alt="Tweet Tracks Logo" class="logo" />
<div class="ml-1">
<h1>Tweet Tracks</h1>
<h2>A daily musical time capsule</h2>
</div>
</div>
<ol class="ml-1 mb-1">
<!-- will revise this wording -->
<li>See what's trending in your area</li>
<li>Click a trending topic to get a song</li>
<li>Add songs to your playlist</li>
</ol>
</header>
<section class="section-white">
<div class="section-header">
<h3>Select Your City</h3>
</div>
<div class="section-content">
<form class="flex-row justify-center align-center m-5" id="city-form">
<label class="d-none" for="country">Select your country</label>
<select class="m-5" name="country" id="country"></select>
<label class="d-none" for="city">Select your city</label>
<select class="m-5" name="city" id="city"></select>
<button class="btn btn-enabled m-5 shadow-light" type="click">Go</button>
</form>
</div>
</section>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3 pure-u-xl-1-5">
<div class="p-1">
<section class="section-white">
<h3 class="section-header">Trending In <span id="city-name"></span></h3>
<div class="section-content">
<div id="trending">
<div class="loader d-none" id="trendsLoader"></div>
<ul id="trending-ul">
</ul>
</div>
</div>
</section>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3 pure-u-xl-2-5">
<div class="p-1">
<section class="section-black">
<h3 class="section-header" id="searched-trend"></h3>
<div class="section-content" id="songs">
<div class="loader d-none" id="videoLoader"></div>
<div id="youtube-video">
</div>
<div class="flex-row justify-center mt-1">
<button class="btn btn-enabled m-5 shadow-dark" id="add-to-playlist">Add To Playlist</button>
<button class="btn btn-enabled m-5 shadow-dark" id="change-song">New Song</button>
</div>
</section>
</div>
</div>
<div class="pure-u-1 pure-u-md-1-3 pure-u-xl-2-5">
<div class="p-1">
<section class="section-black">
<h3 class="section-header">Your Playlist For <span id="date"></span></h3>
<div class="" id="playlist">
<ul id="playlist-ul">
</ul>
</div>
<div class="flex-row justify-center pb-1">
<button class="btn btn-enabled m-5 shadow-dark" id="clear-playlist">Clear All Playlists</button>
<button class="btn btn-enabled m-5 shadow-dark" id="get-saved">View Saved Playlists</button>
</div>
</section>
</div>
</div>
</div>
<!-- this will be collapsible -->
<!-- and go to the bottom on small screens-->
<footer class="">
<div class="pure-menu pure-menu-horizontal our-team">
<ul class="p-5" id="expand">
<li class="pure-menu-item">
Our Team <a class="a-dark" href="https://github.com/projone" target="_blank"><i class="fab fa-github"></i> </a>
</li> <!-- our github link -->
<!-- link to everyone's github accounts -->
<li class="pure-menu-item opacity-0 appear" id=""><a class="a-dark" href="https://github.com/bluesatyr"
target="_blank">Shawn Evans</a></li>
<li class="pure-menu-item opacity-0 appear"><a class="a-dark" href="https://github.com/Yusufjavid"
target="_blank">Mohammed Yusuf Javid</a></li>
<li class="pure-menu-item opacity-0 appear"><a class="a-dark" href="https://github.com/Lim95"
target="_blank">Richard Lim</a></li>
<li class="pure-menu-item opacity-0 appear"><a class="a-dark" href="https://github.com/zohamumtaz"
target="_blank">Zoha Mumtaz</a></li>
<li class="pure-menu-item opacity-0 appear"><a class="a-dark" href="https://github.com/Amelia-was"
target="_blank">Amelia Wasowski</a></li>
<li class="pure-menu-item opacity-0 appear"><a class="a-dark" href="https://github.com/0726hayate"
target="_blank">Jason Yau</a></li>
</ul>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"
integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ=="
crossorigin="anonymous"></script>
<script src=https://code.jquery.com/jquery-3.5.1.min.js></script>
<script src="./assets/js/script.js"></script>
</body>
</html>