-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
88 lines (75 loc) · 3.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="assets/artistsphere.ico.png" type="image/x-icon" />
<title>ArtistSphere</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.10/handlebars.js"></script>
<link rel="stylesheet" href="public/styles/style.css">
<link href="https://fonts.googleapis.com/css?family=El+Messiri|Raleway" rel="stylesheet">
</head>
<body>
<div id="info-modal" class="modal-back">
<div class="modal-content">
<h1>Welcome To ArtistSphere!</h1>
<h2>What Is ArtistSphere?</h2>
<p>ArtistSphere is a web application created to help you discover new artists and songs based on artists that you already know and love! It is built using the Spotify API, and draws from it's entire library, giving access to millions of songs and artists.
<br>
★ Please have Spotify open to listen to full songs instead of the 30 second preview.</p>
<h2>How Does It Work?</h2>
<p>1. Enter an artist in the search bar below</p>
<p>2. ArtistSphere will reveal 10-25 related artists along with their top 10 tracks! </p>
<p>3. Click the tracks to play music, or click an artist's name to make them the new search point.</p>
<form id="modal-artist-search" name="artist-search-form">
<input type="text" id="artist-input" name="search" value="" placeholder="Search An Artist" aria-label="Search an Artist"/>
<input type="submit" name="submit" />
</form>
</div>
</div>
<main class="hidden">
<aside>
<header>
<h1 id="artistsphere">ARTISTSPHERE</h1>
<form id="artist-search" name="artist-search-form">
<label for="artist-input"><h2>Search An Artist</h2></label>
<input type="text" id="artist-input2" name="search" value=""/>
<button type="submit" name="submit"><span id="submit-desktop">Submit</span><span id="submit-mobile">⌕</span></button>
</form>
</header>
<h1>Main Artist</h1>
<div id="main-artist" class="hidden">
</div>
</aside>
<div id="related-artists" class="clearfix hidden">
</div>
<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>
</main>
<script id="main-artist-template" type="text/x-handlebars-template">
<div class="grid-item">
<h2>{{name}}</h2>
<div class="img">
<img src="{{photo}}"" alt="" />
</div>
<iframe id="main-artist-1" class="tracks" src="https://open.spotify.com/embed?uri={{uri}}&theme=white" width="200" height="80" frameborder="0" allowtransparency="true"></iframe>
<iframe id="main-artist-2" class="tracks" src="https://open.spotify.com/embed?uri={{uri}}&theme=white" width="200" height="300" frameborder="0" allowtransparency="true"></iframe>
</div>
</script>
<script id="related-artists-template" class="hidden" type="text/x-handlebars-template">
<h1 id="related-artist-mobile">Related Artists</h1>
{{#each artist}}
<div class="grid-item clearfix">
<div>
<h2 id='{{id}}' onclick=app.clickArtistNameSearch(id)><a>{{name}}</a></h2>
</div>
<div class="img">
<img src="{{photo}}"" alt="" />
</div>
<iframe class="tracks" src="https://open.spotify.com/embed?uri={{uri}}&theme=white" width="250" height="300" frameborder="0" allowtransparency="true"></iframe>
</div>
{{/each}}
</script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="public/scripts/main.js"></script>
</body>
</html>