-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (147 loc) · 7.69 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
<!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" />
<link rel="icon" type="image/x-icon" href="favicon.png" />
<meta name="description" content="GlassFinder is a new way to find matching tempered glass for your
mobile phone.">
<title>GlassFinder - A Utility Website to search for mobile glasses</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous" />
<link rel="stylesheet" href="style.css">
<!-- EMAIL JS SCRIPT TAG -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
</head>
<body>
<!-- ----------------------NAVBAR RESPONSIVE--------------------------- -->
<header id="top">
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid">
<a class="navbar-brand" href="#top"><img src="logo-removebg.png" alt="GlassFinder" width="200px" /></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item mx-2">
<a class="navbar-brand active" aria-current="page" href="#top">Home</a>
</li>
<li class="nav-item mx-2">
<a class="navbar-brand" href="#about">About Us</a>
</li>
<li class="nav-item mx-2">
<a class="navbar-brand" href="#contribute">Contribute Us</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="mainContent">
<div id="home">
<!-- ----------------------SEARCH FORM FOR MODELS--------------------------- -->
<div class="container w-75 my-2 border border-secondary rounded p-4">
<h2 class="gradient">Find Your Glass</h2>
<div class="mb-3">
<input type="text" one class="form-control" onkeyup="handleSubmit()" id="queryText"
placeholder="Search Any Model" />
<div id="exampleQuery" class="form-text">
Example :- iPhone 12/ mi 11/ Reno 6
</div>
</div>
<button type="submit" onclick="handleSubmit()" class="btn btn-primary">
Search
</button>
</div>
<!-- ----------------------CARD GENERATION FROM JS FOR RESULTS--------------------------- -->
<div class="container w-75 my-2 border border-secondary rounded p-4 d-flex align-items-center justify-content-center d-none"
id="displayResult"></div>
</div>
<hr />
<!-- ----------------------ABOUT US SECTION--------------------------- -->
<div class="container about" id="about">
<h1 class="gradient text-center mb-4">About Us</h1>
<p class="gradient text-muted">
GlassFinder is a new way to find matching tempered glass for your
mobile phone.
</p>
<p>
Welcome to GlassFinder, where you can find the perfect tempered glass
screen protector for your mobile phone.
</p>
<p>
We understand that protecting your phone's screen is important, and
that's why we offer a wide selection of models which match the same
screen protector as your phone. Our screen protectors are designed to
fit perfectly on your phone, providing maximum protection against
scratches, cracks, and other damage.
</p>
<p>
Our team is dedicated to providing excellent search results and
ensuring that you find the perfect screen protector for your phone. We
offer a simple, easy-to-use website that allows you to search for the
right screen protector by phone make and model, ensuring that you get
a perfect fit every time.
</p>
<p>
Thank you for choosing our website for all of your mobile phone screen
protector searching. We look forward to helping you find the perfect
tempered glass screen protector for your phone.
</p>
<p class="gradientDark text-muted">
GlassFinder is a new way for our customers to find the right glass for
their phones.
</p>
</div>
</div>
<hr>
<!-- ---------------------CONTRIBUTE PAGE--------------------------- -->
<div class="container contribute" id="contribute">
<h1 class="gradient text-center mb-4">Contribute Us</h1>
<p class="gradient text-muted">
You Can Easily contribute to our website to enhance search results for a better match.
You simply have to fill up the form below and click submit.
</p>
<div id="contributeForm">
<div class="mb-3 container">
<input type="text" one class="form-control" autocomplete="off" id="nameContribute"
placeholder="Enter Your Name" />
<input type="text" one class="form-control" autocomplete="off" id="modelOne"
placeholder="Enter A Model" />
<input type="text" one class="form-control" id="modelTwo" placeholder="Enter Matching Model" />
<button class="btn btn-success mt-2" id="submitContribute">Submit Suggestion</button>
</div>
</div>
</div>
<!-- ----------------------FOOTER SECTION--------------------------- -->
<footer class="d-flex align-items-center justify-content-center">
<div class="d-flex container text-center align-items-center justify-content-center">
<p>Copyright © 2022</p>
<ul class="d-flex">
<li>
<a target="_blank" href="https://www.facebook.com/abhiborana.a"><img class="footerIcon"
src="facebook.png" alt="Facebook" /></a>
</li>
<li>
<a target="_blank" href="https://www.instagram.com/abhiborana.a"><img class="footerIcon"
src="instagram.png" alt="Instagram" /></a>
</li>
<li>
<a target="_blank" href="https://github.com/abhiborana"><img class="footerIcon" src="github.png"
alt="Github" /></a>
</li>
</ul>
</div>
</footer>
</body>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
crossorigin="anonymous"></script>
<!-- MAIN SCRIPT JS -->
<script src="script.js"></script>
</html>