-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
328 lines (304 loc) · 15.2 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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Movsi - Watch better movies</title>
<!-- Linking CSS -->
<link rel="stylesheet" href="src/css/main.css" />
<!-- Linking javascript -->
<script defer type="module" src="src/js/controller.js"></script>
<!-- Linking favicons -->
<link rel="apple-touch-icon" sizes="180x180" href="src/img/apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="src/img/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="src/img/favicon-16x16.png" />
<!-- Linking Inter font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@200;300;400;500;600;700;800;900&display=swap" rel="stylesheet" />
</head>
<body>
<div class="spinner">
<svg class="icon icon--spinner">
<use xlink:href="src/img/sprite.svg#icon-loader"></use>
</svg>
</div>
<div class="search__wrapper search-hidden-2">
<div class="search search-hidden">
<div class="search__container">
<div class="search__header">
<svg class="icon icon--x-2">
<use xlink:href="src/img/sprite.svg#icon-x"></use>
</svg>
<input type="text" class="search__input" placeholder="Search for a movie, tv show..." />
<svg class="icon icon--search-2">
<use xlink:href="src/img/sprite.svg#icon-search"></use>
</svg>
</div>
</div>
</div>
</div>
<div class="floating-navbar">
<div class="floating-navbar__container">
<a href="#home" class="floating-navbar__item floating-active home">
<svg class="floating-navbar__icon">
<use class="floating-navbar__icon" xlink:href="src/img/sprite.svg#icon-home"></use>
</svg>
</a>
<a href="#highest-grossing" class="floating-navbar__item trending">
<svg class="floating-navbar__icon">
<use class="floating-navbar__icon" xlink:href="src/img/sprite.svg#icon-coins"></use>
</svg>
</a>
<a href="#top-rated" class="floating-navbar__item toprated">
<svg class="floating-navbar__icon">
<use class="floating-navbar__icon" xlink:href="src/img/sprite.svg#icon-star"></use>
</svg>
</a>
<a href="#tv-shows" class="floating-navbar__item tvshows">
<svg class="floating-navbar__icon">
<use class="floating-navbar__icon" xlink:href="src/img/sprite.svg#icon-tv"></use>
</svg>
</a>
<!-- <a href="#bookmarks" class="floating-navbar__item bookmark bookmarks">
<svg class="floating-navbar__icon">
<use class="floating-navbar__icon" xlink:href="src/img/sprite.svg#icon-bookmark1"></use>
</svg>
</a> -->
</div>
</div>
<div class="container">
<!-- Container-1 -->
<header class="header fixed">
<!-- 1st item -->
<div class="header__logo">
<div class="mainMenu">
<svg class="icon icon--menu">
<use xlink:href="src/img/sprite.svg#icon-align-left"></use>
</svg>
</div>
<div class="header__heading">
<h1 class="header__heading--text-1 h1">| </h1>
<h1 class="header__heading--text h1">MOVSI</h1>
</div>
</div>
<!-- 2nd item -->
<nav class="header__navigation">
<a href="#home" class="header__link active nav-control home">
<svg class="icon--link active">
<use xlink:href="src/img/sprite.svg#icon-home"></use>
</svg>
Home
</a>
<a href="#highest-grossing" class="header__link nav-control trending">
<svg class="icon--link">
<use xlink:href="src/img/sprite.svg#icon-coins"></use>
</svg>
Biggest Hits</a
>
<a href="#top-rated" class="header__link nav-control toprated">
<svg class="icon--link">
<use xlink:href="src/img/sprite.svg#icon-star"></use>
</svg>
Top rated</a
>
<a href="#tv-shows" class="header__link nav-control tvshows">
<svg class="icon--link">
<use xlink:href="src/img/sprite.svg#icon-tv"></use>
</svg>
Tv Shows</a
>
<a href="#" class="header__link header__search ignore-click">
<svg class="icon icon--search">
<use xlink:href="src/img/sprite.svg#icon-search"></use>
</svg>
</a>
<a href="" class="header__link ignore-click">
<svg class="icon icon--moon">
<use xlink:href="src/img/sprite.svg#icon-moon"></use>
</svg>
</a>
<a href="#bookmarks" class="header__link header__settings bookmarks ignore-click">
<svg class="icon icon--user">
<use xlink:href="src/img/sprite.svg#icon-bookmark1"></use>
</svg>
</a>
</nav>
</header>
<!-- Container-2 -->
<main class="main">
<!-- Item 1 -->
<div class="main__left hidden">
<div class="main__up">
<svg class="icon icon--main">
<use xlink:href="src/img/sprite.svg#icon-x"></use>
</svg>
<div class="main__header">
<div class="main__trending--header--text-1 genre-header h3">Sort by genre</div>
<div class="main__trending--header--text-2 genre-subheader h3">| Movies</div>
</div>
<div class="main__buttons movie-genre">
<button class="main__button action btn" data-genre="Action" data-id="28">Action</button>
<button class="main__button comedy btn" data-genre="Comedy" data-id="35">Comedy</button>
<button class="main__button drama btn" data-genre="Drama" data-id="18">Drama</button>
<button class="main__button horror btn" data-genre="Horror" data-id="27">Horror</button>
<button class="main__button romance btn" data-genre="Romance" data-id="10749">Romance</button>
<button class="main__button thriller btn" data-genre="Thriller" data-id="53">Thriller</button>
<button class="main__button scifi btn" data-genre="Scifi" data-id="878">Sci-fi</button>
<button class="main__button fantasy btn" data-genre="Fantasy" data-id="14">Fantasy</button>
<button class="main__button animation btn" data-genre="Animation" data-id="16">Animation</button>
<button class="main__button adventure btn" data-genre="Adventure" data-id="12">Adventure</button>
<button class="main__button crime btn" data-genre="Crime" data-id="80">Crime</button>
<button class="main__button mystery btn" data-genre="Mystery" data-id="9648">Mystery</button>
<button class="main__button family btn" data-genre="Family" data-id="10751">Family</button>
<button class="main__button history btn" data-genre="History" data-id="36">History</button>
<button class="main__button filmnoir btn" data-genre="Documentary" data-id="99">Documentary</button>
<button class="main__button documentary btn" data-genre="Western" data-id="37">Western</button>
</div>
<div class="main__buttons tv-genre display-none">
<button class="main__button action btn tv" data-genre="Action" data-tv="10759">Action</button>
<button class="main__button animation btn tv" data-genre="Animation" data-tv="16">Animation</button>
<button class="main__button comedy btn tv" data-genre="Comedy" data-tv="35">Comedy</button>
<button class="main__button documentary btn tv" data-genre="Documentary" data-tv="99">Documentary</button>
<button class="main__button drama btn tv" data-genre="Drama" data-tv="18">Drama</button>
<button class="main__button family btn tv" data-genre="Family" data-tv="10751">Family</button>
<button class="main__button kids btn tv" data-genre="Kids" data-tv="10762">Kids</button>
<button class="main__button mystery btn tv" data-genre="Mystery" data-tv="9648">Mystery</button>
<button class="main__button news btn tv" data-genre="News" data-tv="10763">News</button>
<button class="main__button reality btn tv" data-genre="Reality" data-tv="10764">Reality</button>
<button class="main__button scifi btn tv" data-genre="Scifi" data-tv="10765">Sci-fi</button>
<button class="main__button soap btn tv" data-genre="Soap" data-tv="10766">Soap</button>
<button class="main__button talk btn tv" data-genre="Talk" data-tv="10767">Talk</button>
<button class="main__button war btn tv" data-genre="War" data-tv="10768">War</button>
<button class="main__button western btn tv" data-genre="Western" data-tv="37">Western</button>
</div>
<!-- <div class="main__header main__header-2">
<div class="main__trending--header--text-1 h3">Sort by</div>
<div class="main__trending--header--text-2 h3">| Minimum ratings</div>
</div> -->
<!-- <div class="main__slider">
<div class="main__slider--range">
<input class="main__input" type="range" min="0" max="10" value="0" class="slider" id="myRange" />
</div>
<div class="main__slider--number">
<svg class="icon icon--chevron up">
<use class="icon--chevron" xlink:href="src/img/sprite.svg#icon-chevron-left"></use>
</svg>
<div class="main__slider--text">0</div>
<svg class="icon icon--chevron down">
<use class="icon--chevron" xlink:href="src/img/sprite.svg#icon-chevron-right"></use>
</svg>
</div>
</div> -->
<!-- <div class="main__header restrictions">
<div class="main__trending--header--text-1 h3">Settings</div>
<div class="main__trending--header--text-2 h3">| Restrictions</div>
</div>
<div class="main__buttons">
<button class="main__button block btn">Allow 18+</button>
</div> -->
</div>
<!-- <div class="main__down">Down</div> -->
</div>
<!-- Item 2 -->
<div class="main__right margin-left">
<div class="error display-none"></div>
<div class="main__trending">
<!-- 1st item -->
<div class="main__trending--header">
<div class="main__trending--header--text-1 main-header h3">Discover movies </div>
<div class="main__trending--header--text-2 sub-header h3">| Latest</div>
<div class="main__trending--header--text-3 sortby-btn h3">
<div class="sort">
Sort by
<svg class="icon icon--link">
<use xlink:href="src/img/sprite.svg#icon-grid"></use>
</svg>
</div>
</div>
</div>
<!-- 2nd item -->
<div class="movies">
<!-- <div class="movie">
<img class="movie__image" src="src/img/sample.jpg" alt="movie-1" />
<div class="movie__info">
<div class="movie__info--rating">
<svg class="icon icon--title">
<use xlink:href="src/img/sprite.svg#icon-star"></use>
</svg>
7.6
</div>
<svg class="icon--heart movie__heart">
<use xlink:href="src/img/sprite.svg#icon-heart"></use>
</svg>
<svg class="icon--maximize movie__maximize">
<use xlink:href="src/img/sprite.svg#icon-maximize"></use>
</svg>
<div class="movie__info--title">Avatar the way of water</div>
</div>
</div> -->
</div>
<div class="pagination">
<!-- <button class="pagination-btn pagination-first">
<svg class="icon icon--chevron">
<use xlink:href="src/img/sprite.svg#icon-chevron-left"></use>
</svg>
First page
</button>
<button class="pagination-btn pagination-back">
<svg class="icon icon--chevron">
<use xlink:href="src/img/sprite.svg#icon-chevron-left"></use>
</svg>
Back
</button> -->
<button class="showMore-btn" data-page="1">
Show more
<svg class="icon icon--chevron">
<use xlink:href="src/img/sprite.svg#icon-chevron-right"></use>
</svg>
</button>
<!-- <button class="pagination-btn p-btn pagination-2" data-page="2">2</button>
<button class="pagination-btn p-btn pagination-3" data-page="3">3</button>
<button class="pagination-btn p-btn pagination-4" data-page="4">4</button>
<button class="pagination-btn pagination-next">
Next
<svg class="icon icon--chevron">
<use xlink:href="src/img/sprite.svg#icon-chevron-right"></use>
</svg>
</button>
<button class="pagination-btn pagination-4">
Last page
<svg class="icon icon--chevron">
<use xlink:href="src/img/sprite.svg#icon-chevron-right"></use>
</svg>
</button> -->
</div>
</div>
</div>
</main>
<footer>
<div class="footer__header">
Copyright © 2023 — by Silson. All rights reserved. Credit to <a href="https://www.themoviedb.org/" class="footer__link">The Movie DB's API</a>
</div>
<!-- <div class="footer__social">
<svg onclick="window.location.href='https://www.facebook.com/silson.sapkota';" class="icon icon--social">
<use xlink:href="src/img/sprite.svg#icon-facebook"></use>
</svg>
<svg onclick="window.location.href='https://www.youtube.com/c/xsls0n';" class="icon icon--social">
<use xlink:href="src/img/sprite.svg#icon-youtube"></use>
</svg>
<svg onclick="window.location.href='https://twitter.com/xsls0n_007';" class="icon icon--social">
<use xlink:href="src/img/sprite.svg#icon-twitter"></use>
</svg>
<svg onclick="window.location.href='https://github.com/Sls0n';" class="icon icon--social">
<use xlink:href="src/img/sprite.svg#icon-github"></use>
</svg>
<svg onclick="window.location.href='https://slson.netlify.app';" class="icon icon--social">
<use xlink:href="src/img/sprite.svg#icon-info"></use>
</svg>
</div> -->
</footer>
</div>
</body>
</html>