-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
108 lines (97 loc) · 4.13 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- All style links including materialize and google fonts -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="./css/style.css"/>
<title>TuneOut</title>
</head>
<body>
<!-- Create sticky navbar that will follow the user down the page -->
<header>
<div class="navbar-fixed">
<nav class="black">
<div class="nav-wrapper">
<a href="" class="brand-logo center">TuneOut</a>
</div>
</nav>
</div>
</header>
<!-- Hero image -->
<div class="row">
<div class="s12 m12 l8">
<img src="./images/HeroImage.jpg" max-width="100%" class="responsive-img">
</div>
<!-- Search form for music, books, podcasts, video games -->
<div class="row">
<form id="artist-search">
<div class="">
<div class="input-field col s3">
<input id="icon_suffix" type="text" class="validate">
<label for="icon_suffix">Search For...</label>
<button id="btnInsert" class="btn grey black-text lighten-2" type="submit" name="action">Search
<i class="material-icons right">search</i>
</button>
<!-- List to hold local storage artist past searches -->
<div>
<ul id="lsOutput"></ul>
</div>
</div>
</div>
</form>
<!-- Container that holds user search description and 5 recommendations -->
<div id="artist-container" class="col s9"></div>
</div>
<!-- Search form for NY Times article -->
<div class="row">
<form id="article-search">
<div class="">
<div class="input-field col s3">
<input id="article-input" type="text" class="validate">
<label for="article-input">Search For...</label>
<button class="btn grey black-text lighten-2" type="submit" name="action">Search
<i class="material-icons right">search</i>
</button>
<!-- List to hold local storage article past searches -->
<div>
<ul id="articleOutput"></ul>
</div>
</div>
</div>
</form>
<!-- Container that holds articles that are searched -->
<div id="news-container" class="col s9">
</div>
</div>
<!-- Modal for webpage instructions -->
<div id="modal1" class="instructions">
<div class="modal-content">
<div class="close">+</div>
<h4>Instructions</h4>
<p>Are you ready to TuneOut? This app is just for you. All you have to
do is type in the search bar an artist, podcast, book or game then TuneOut.
Check up on the lastest entertainment news or watch youtube video of your search. </p>
</div>
</div>
<!-- Footer -->
<footer class="page-footer grey lighten-5">
<div class="footer-copyright">
<div class="container black-text">
🎧 Made for all students around the world
<a class="black-text text-lighten-5 right">© 2020 TuneOut</a>
</div>
<div class="btn-about">
<a href="about.html" class="btn tooltipped" data-position="top" data-tooltip="Click for About Us"><i class="material-icons">group</i></a>
</div>
</div>
</footer>
<!-- All script file links including jquery, materialize and moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js" integrity="sha512-Izh34nqeeR7/nwthfeE0SI3c8uhFSnqxV0sI9TvTcXiFJkMd6fB644O64BRq2P/LA/+7eRvCw4GmLsXksyTHBg==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="./js/script.js"></script>
</body>
</html>