-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
127 lines (126 loc) · 4.27 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" , href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<script type="module" src="movieApp.js" defer></script>
<title>Movie Streaming Application</title>
</head>
<body>
<header>
<img
src="https://cdn2.iconfinder.com/data/icons/video-36/100/video-film-roll-video-player-media-app-film-roll-movie-512.png"
width="100"
height="100"
/>
<p class="site-name">Reel Hawk</p>
<nav class="nav">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Movies</a></li>
<li><a href="">Series</a></li>
</ul>
</nav>
<div class="forUser">
<span>
<i id="shorting" , class="fa-solid fa-list"></i>
<fieldset id="filters">
<p id="newRelease" class="filter">New Releases</p>
<p id="actors" class="filter">Actors</p>
<p id="releaseYear" class="filter">Release Year</p>
<label for="dropdown"
><select id="dropdown" class="hidden" , placeholder="select">
<option>select one</option>
<option value="before1970">Released before 1970</option>
<option value="1970">1970-1979</option>
<option value="1980">1980-1989</option>
<option value="1990">1990-1999</option>
<option value="2000">2000-2009</option>
<option value="2010">2010-2019</option>
<option value="2020">2020-Till Now</option>
</select></label
><button id="yearSearch" class="hidden">Search</button>
<p id="genres" ,class="filter">genres</p>
</fieldset>
</span>
<span> <i class="fa-solid fa-bell"></i></span>
<span>
<input
type="search"
,
id="keyword-search"
,
placeholder="search"
required
/>
<i id="search-icon" class="fa-solid fa-magnifying-glass"></i>
</span>
<span>
<div id="loginButton"><a href="">Login</a></div>
<fieldset id="logIn">
<label
><input type="email" id="email" placeholder="Enter Email Address"
/></label>
<label
><input
type="password"
id="password"
minlength="8"
placeholder="Your password"
required /></label
><br />
<button id="signIn">Sign In</button>
<p>If not registered! Please Sign up</p>
<button id="signUp">Sign Up</button><br />
<div id="signUpPage">
<label
>Enter Your First Name:
<input type="text" , id="firstName" , required
/></label>
<label
>Enter Your Last Name:
<input type="text" , id="lastName" , required
/></label>
<label
>Email: <input type="email" , id="signUpEmail" , required
/></label>
<label
>Repeat your Email:
<input type="email" , id="repeatSignUpEmail" , required
/></label>
<button id="signUpSubmit">Submit</button>
</div>
</fieldset>
</span>
</div>
<div class="icons"></div>
</header>
<section>
<div class="main-page">
<div class="streamingPage">
<span>Now Streaming</span>
<div class="now-streaming"></div>
<div id="result-container"></div>
</div>
</div>
</section>
<footer>
<div id="activeTime">
<p>Your active time:</p>
<div id="timer">00:00:00</div>
</div>
<div id="countdownTimer">
<p>Countdown</p>
<div id="countdown">00:00</div>
</div>
</footer>
</body>
</html>