-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
162 lines (138 loc) · 6.32 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
<html>
<head>
<title> Movies </title>
<link rel="icon" href="images/logo.png" type="image/png" sizes="16x16" />
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/index_style.css">
</head>
<body>
<!-- SIDE NAV BAR -->
<div id="options-container" class="d-flex ">
<div class="navMenu">
<div class="navList">
<ul>
<li id="now_playing" class="liEle li1 py-2"><a class="nav-category" href="#">Now playing</a></li>
<li id="popular" class="liEle li2 py-2"><a class="nav-category" href="#">Popular</a></li>
<li id="top_rated" class="liEle li3 py-2"><a class="nav-category" href="#">Top Rated</a></li>
<li id="trending" class="liEle li4 py-2"><a class="nav-category" href="#">Trending</a></li>
<li id="upcoming" class="liEle li5 py-2"><a class="nav-category" href="#">Upcoming</a></li>
<li id="contactus" class="li6 py-2"><a class="nav-category" href="#contactUS">Contact Us</a></li>
</ul>
</div>
<div class="navSocial">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fas fa-globe"></i></a>
<h5>Copyright2019 All Rights Reserved.</h5>
</div>
</div>
<div class="drawer">
<div class="drawerLogo py-3">
<img src="images/logo.png">
</div>
<div class="drawerMenu">
<i id="toggleNav" class="fa fa-align-justify"></i>
</div>
<div class="drawerSocial">
<div class="drawerGlobe">
<i class="fas fa-globe"></i>
</div>
<div class="drawerShare py-3">
<i class="fas fa-share-alt"></i>
</div>
</div>
</div>
</div>
<!-- END SIDE NAV BAR -->
<!-- SEARCH MOVIE -->
<section id="search">
<div class="container py-3">
<div class="row">
<div class="col-md-6">
<input onkeyup="searchMovie(this.value)" placeholder="Search movie by name..."
class=" w-100 searchMovieInput" id="searchMovieID">
</div>
<div class="col-md-6">
<input onkeyup="searchMovie(this.value)" placeholder="Search ..." class=" w-100 searchMovieInput">
</div>
</div>
</div>
</section>
<!-- END SEARCH MOVIE -->
<!-- SHOW MOVIEs -->
<section class="showMovie">
<div class="container py-3">
<div class="row mt-5" id="moviesRow">
<!-- added code of movies by JS -->
</div>
</div>
</section>
<!-- END SHOW MOVIES -->
<!-- CONTACT US -->
<section id="contactUS">
<div class="container userForm">
<h1 class="mb-5">Contact Us...</h1>
<div class="row ">
<div class="col-md-6 form-group" id="name">
<input onkeyup="validateName(this.value)" type="text" placeholder="Enter your name" class="w-100 mb-3" id="nameInp">
<div class="alert alert-danger" id="nameAlert" role="alert">
Your name is not valid.
</div>
</div>
<div class="col-md-6 form-group">
<input onkeyup="validateEmail(this.value)" type="text" placeholder="Enter your E-mail" class="w-100 mb-3" id="emailInp">
<div class="alert alert-danger" id="emailAlert" role="alert">
Your e-mail is not valid.
</div>
</div>
<div class="col-md-6 form-group">
<input onkeyup="validatePhone(this.value)" type="text" placeholder="Enter Phone" class="w-100 mb-3" id="phoneInp">
<div class="alert alert-danger" id="phoneAlert" role="alert">
Your phone number is not valid
</div>
</div>
<div class="col-md-6 form-group">
<input onkeyup="validateAge(this.value)" type="text" placeholder="Enter Age" class="w-100 mb-3" id="ageInp">
<div class="alert alert-danger" id="ageAlert" role="alert">
Your age is not valid (between 10 to 100)
</div>
</div>
<div class=" col-md-6 form-group">
<input onkeyup="validatePw(this.value)" type="text" placeholder="Enter Password" class="w-100 mb-3" id="pwInp">
<div class="alert alert-danger" id="pwAlert" role="alert">
Entre valid password *Minimum eight characters, at least one letter and one number:*
</div>
</div>
<div class="col-md-6 form-group">
<input onkeyup="validateRePw(this.value)" type="text" placeholder="Enter Repassword" class="w-100 mb-3" id="rePwInp">
<div class="alert alert-danger" id="rePwAlert" role="alert">
Entre valid Repassword.
</div>
</div>
<button onclick="submit()" class="btn btn-outline-danger ">Submit</button>
</div>
</div>
</section>
<!-- END CONTACT US -->
<!-- LOADING SCREEN -->
<section id="loading" class=" ">
<div class="spinner ">
<div class="dot1"></div>
<div class="dot2"></div>
</div>
</section>
<!-- END LOADING SCREEN -->
<!-- GO UP BUTTON -->
<button id="btnUp" class="btn btn-light p-2 rounded-circle">
<i class="fas fa-arrow-alt-circle-up"></i>
</button>
<!-- END GO UP BUTTON -->
<!-- SCRIPT -->
<script src="js/jquery-3.4.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<!-- END SCRIPT -->
</body>
</html>