-
Notifications
You must be signed in to change notification settings - Fork 0
/
showPage.html
153 lines (146 loc) · 6.64 KB
/
showPage.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- Importing Google Icon Font -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Importing Materialize.css -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Proprietary CSS -->
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/showPageStyles.css">
<!-- Let the browser know the website is optimized for mobile -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<main>
<!-- Navigation menu -->
<nav class="blue accent-2">
<div class="nav-wrapper">
<div class="row navRow blue accent-2">
<div class="col s12 m5 l2 center">
<a href="#" data-target="mobile-nav" class="sidenav-trigger left"><i class="material-icons">menu</i></a>
<a href="./home.html"><img class="logo clickable" src="img/logo.png" alt="Showify logo"></a>
</div>
<div class="s12 col m7 l5">
<form class="search-input">
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search"><i class="material-icons">search</i></label>
</div>
</form>
</div>
<div class="col l5 hide-on-med-and-down">
<ul class="right">
<li><a href="./followedShows.html"><i class="material-icons left">star</i>Followed Shows</a></li>
<li><a href="./profile.html"><i class="material-icons left">person</i>Profile</a></li>
<li><a class="logout" href="#"><i class="material-icons left">exit_to_app</i>Logout</a></li>
</ul>
</div>
</div>
</div>
</nav>
<!-- Elements that appear in the side navigation menu when it is triggered -->
<ul class="sidenav" id="mobile-nav">
<li><a href="./home.html"><i class="material-icons left">home</i>Home</a></li>
<li><a href="./followedShows.html"><i class="material-icons left">star</i>Followed Shows</a></li>
<li><a href="./profile.html"><i class="material-icons left">person</i>Profile</a></li>
<li><a class="logout" href="#"><i class="material-icons left">exit_to_app</i>Logout</a></li>
</ul>
<!-- Empty space between the navigation menu and the rest of the content of the page -->
<div class="emptySpace"></div>
<!-- Here starts the content of the page -->
<!-- The series information card starts here -->
<div class="col s12 m7">
<div class="title hoverable">
<!--Trying to decide if I keep this or not-->
<div class="little-margin"></div>
<div class="main">
<h2 class="header center" id="showTitle"></h2> <a class="waves-effect waves-light btn bold blue accent-2" id="followbutton"></a>
</div>
<h5 class="center" id="scoreSeries"><b>Rating: </b><span id="showRating"></span>/10</h5>
</div>
<div class="little-margin"></div>
<div class="main">
<form class="col s12">
<div class="row" style="margin:0">
<div class="input-field col s6" style="margin-bottom:0">
<select id="rateSelect">
<option value="0" disabled selected></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
<label>Rate this serie</label>
</div>
<div class="input-field col s6" style="margin-bottom:0">
<a class="waves-effect waves-light btn bold blue accent-2" id="rateNow">Rate Now!</a>
</div>
</div>
</form>
</div>
<div class="row">
<div class="col s10 offset-s1">
<div class="card horizontal hoverable">
<div class="card-image valign-wrapper" id="showImage">
<!--<img src="./img/The_Good_Doctor.jpg">-->
</div>
<div class="card-stacked">
<div class="card-content valign-wrapper">
<div>
<div class="showInfo"><b>Description: </b><span id="showDescription"></span></div>
<div class="showInfo"><b>Genre: </b><span id="showGenre"></span></div>
<div class="showInfo"><b>Status: </b><span id="showStatus"></span></div>
<div class="showInfo"><b>Year: </b><span id="showYear"></span></div>
<div class="showInfo"><b>Episodes: </b><span id="showEpisodes"></span></div>
<div class="showInfo"><b>Seasons: </b><span id="showSeasons"></span></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- The comment section starts here -->
<div class="row" style="margin-left: 0px; margin-right: 0px;"> <!--It didn't take the rules as id-->
<div class="card horizontal hoverable col s12">
<form class="col s12">
<div class="row">
<div class="input-field col s12">
<textarea id="commentArea" class="materialize-textarea"></textarea>
<label for="commentArea">What do you think about this serie?</label>
<a class="waves-effect waves-light btn bold blue accent-2" id="buttonComment">Review!</a>
</div>
</div>
<ul id="commentList" class="collection"></ul>
</form>
</div>
</div>
</main>
<footer class="page-footer blue accent-2">
<div class="row container bold">
© 2018 Showify
<a class="white-text text-lighten-4 right" href="./about.html">About us</a>
</div>
</footer>
<!-- Importing JQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<!--Importing Materialize.js-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<!-- Proprietary scripts -->
<script src="./js/common.js"></script>
<script src="./js/showPage.JQ.js"></script>
<!-- Sweet Alert script -->
<script src="./js/sweetalert2.all.min.js"></script>
<!-- Managing Date script -->
<script src="https://rawgit.com/moment/moment/2.2.1/min/moment.min.js"></script>
</body>
</html>