-
Notifications
You must be signed in to change notification settings - Fork 0
/
movies.html
144 lines (119 loc) · 5.64 KB
/
movies.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
<!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" />
<!-- FAVICON LINK -->
<link rel="icon"
href="https://preview.redd.it/gj1t3nckxyx61.png?auto=webp&s=a0925041ccf11f7453ba4b27cfec24afa0f34594">
<script src="https://cdn.tailwindcss.com"></script>
<!-- MAIN CSS -->
<link rel="stylesheet" href="./styles/output.css">
<link rel="stylesheet" href="./styles/index.css">
<!-- BOOTSTRAP ICON -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<title>Netflix</title>
</head>
<body>
<!-----LOADER COMPONENT START---->
<div class="load_wrapper">
<span class="loader"></span>
</div>
<!-----LOADER COMPONENT END---->
<!---- TOASTER START ----->
<div class="toaster hov">
<span class="toaster-icon"></span>
<span class="toaster-titil"></span>
</div>
<!---- TOASTER END ----->
<!-- HEADER SECTION STARTED -->
<header class="bg-white border-b-2 fixed z-[99999] top-0 w-full">
<div class="container-fluid px-4">
<nav class="flex items-center justify-between">
<a href="./index.html">
<img src="https://images.ctfassets.net/y2ske730sjqp/6bhPChRFLRxc17sR8jgKbe/6fa1c6e6f37acdc97ff635cf16ba6fb3/Logos-Readability-Netflix-logo.png"
alt="logo" class="w-[160px] hover:scale-[120%] duration-300"></a>
<form action="#">
<input id="search-input" type="search" placeholder="Enter movie name" class="w-[320px] rounded-md md:w-[520px] h-[50px] px-4
border focus:outline-none duration-150 focus:ring-red-600 ring-2 ring-red-100">
</form>
<ul class="flex items-center gap-x-4">
<li>
<button id="darcmode-btn"
class=" grid place-content-center hover:bg-black hover:text-white duration-500 p-4 border w-12 h-12 rounded-full ">
<i class="bi bi-moon-stars-fill "></i>
</button>
</li>
<li>
<a href="#"
class="grid hover:bg-red-700 hover:text-white duration-500 text-red-700 place-content-center p-4 border w-12 h-12 rounded-full"><i
class="bi bi-suit-heart-fill"></i>
</a>
</li>
</ul>
</nav>
</div>
</header>
<!-- HEADER SECTION ENDED -->
<!-- MAIN SECTION STARTED -->
<main class="flex py-[90px] min-h-screen">
<!-- ASIDE SECTION STARTED -->
<aside id="aside" class="border min-h-screen fixed p-4 top-[90px] bg-white w-[320px] shadow-lg">
<form action="#" id="filter-form">
<label for="name" class="my-6 block">
<p class="text-gray-500 mb-2">Enter film title:</p>
<input id="name" type="search" placeholder="Enter film title.." class="w-full border-red-500 border rounded-md
h-[40px] px-3 focus:outline-none duration-150 focus:ring-red-600 ring-2 ring- red-100" />
</label>
<label for="category" class="my-6 block">
<p class="text-gray-500 mb-2">Select film category:</p>
<select name="category" id="category" class="w-full border-red-500 border rounded-md h-[40px]
focus:outline-none duration-150 focus:ring-red-600 ring-2 ring-
red-100 px-4">
<option disabled selected value="">Select film category</option>
<!-- dynamic render -->
</select>
</label>
<label for="rating" class="my-6 block">
<p class="text-gray-500 mb-2">Select film rating:</p>
<input id="number" type="number" max="10" min="1" placeholder="Enter film rating..." class="w-full border-red-500 border rounded-md h-[40px]
px-3 focus:outline-none duration-150 focus:ring-red-600 ring-2 ring-
red-100" />
</label>
<button type="submit" class="p-3 ring-4 ring-transparent hover:ring-green-900
duration-300 bg-green-600 w-full rounded-md text-white text-xl flex
justify-center gap-x-4 items-center">
<span>Search </span>
<i class="bi bi-search"></i>
</button>
</form>
</aside>
<!-- ASIDE SECTION ENDED -->
<!-- SECTION-1 STARTED -->
<section id="movies" class="grow ml-[320px] p-8">
<h1 id="search-movies" class="text-3xl font-bold text-red-600 my-5">
<!--search-movies data length ko'rsatuvchi rag -->
</h1>
<div class="grid sm:grid-cols-2 grid-cols-1 md:grid-cols-4 likes-mowis-wrapper gap-4"></div>
<!-- dynamic render -->
</div>
</section>
<!-- SECTION-1 ENDED -->
</main>
<!-- MAIN SECTION ENDED -->
<!-- FOOTER SECTION STARTED -->
<footer class=" h-[60px] border mt-[80px]">
<div class="container-fluid text-center pt-4">
<p>2024 Netflix Movies</p>
</div>
</footer>
<!-- FOOTER SECTION ENDED -->
</body>
<!-- DATA BASE JS -->
<script src="./db.js"></script>
<!-- UTILS JS -->
<script src="./utis/utilis.js"></script>
<!-- INDEX JS -->
<script src="./movies.js"></script>
</html>