-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
87 lines (83 loc) · 3.61 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
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="description"
content="Filmingg is a Movie guide web application, which allows users to search for a movie or series to get information!"
/>
<meta
name="keywords"
content="Filmingg, s4shibam, movie database, movie api, omdb api, movie details, movie information, imdb, movie guide app, movie search"
/>
<meta
property="og:description"
content="Filmingg is a Movie guide web application, which allows users to search for a movie or series to get information!"
/>
<meta
property="og:image"
content="https://filmingg.shibamsaha.dev/logo.ico"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Filmingg - Movie Database</title>
<link rel="icon" type="image/x-icon" href="./logo.ico" />
</head>
<body class="text-white bg-black font-poppins">
<main class="min-h-screen flex justify-center items-center">
<canvas id="bg" class="m-0 p-0 w-full h-full absolute"></canvas>
<div
class="container my-4 mx-auto px-10 pt-10 pb-3 w-11/12 max-w-2xl relative rounded-md shadow-lg shadow-black/50 bg-white/5 border-2 border-white/10 backdrop-blur-lg"
>
<div class="search-box flex">
<input
class="p-3 w-9/12 text-sm xsm:text-base text-white rounded-md border-none bg-white/5 focus:outline-none focus:ring-1 focus:ring-[#f2aa4cff] placeholder:font-normal placeholder:text-gray-400 caret-[#C8C8C8]"
type="search"
placeholder="Search for a movie..."
id="movie-name"
autocomplete="off"
/>
<button
class="ml-5 w-3/12 flex justify-center items-center outline-none border-none rounded-md font-medium tracking-wide cursor-pointer bg-white/10 hover:bg-white/20 text-white hover:text-[#f2aa4cff]"
id="search-btn"
>
<span class="xsm:hidden"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
class="w-6 fill-white"
>
<path
d="M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z"
/>
</svg>
</span>
<span class="hidden xsm:inline text-sm xsm:text-base">Search</span>
</button>
</div>
<div id="result" class="mt-4 text-white z-50"></div>
<div
class="credit mt-3 flex justify-center items-center flex-wrap text-xs sm:text-sm text-gray-400 opacity-80"
>
<a
class="hover:text-white"
href="https://github.com/s4shibam/filmingg"
target="_blank"
>Filmingg</a
>
by
<span
class="text-sm sm:text-base hover:text-[#f2aa4cff] hover:opacity-100"
>
<a href="https://shibamsaha.dev" target="_blank">
Shibam Saha
</a>
</span>
</div>
</div>
</main>
<script type="module" src="./main.js"></script>
<script type="module" src="./animation.js"></script>
</body>
</html>
<!-- Developed with love by Shibam Saha -->