-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
161 lines (142 loc) · 7.94 KB
/
index.html
File metadata and controls
161 lines (142 loc) · 7.94 KB
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
<
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EchoGate</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- HEADER -->
<header>
<div id="header-container">
<div class="left-group">
<img src="images/Echo Gate Logo Final.png" alt="EchoGate Logo" width="60" />
<nav class="left-links">
<a href="index.html">Home</a>
<a href="#about">About</a>
<a href="#team">Meet the Makers</a>
<!-- Placeholder for Dashboard tab -->
<a href="dashboard.html" id="dashboard-link">Dashboard</a>
</nav>
</div>
<!-- Greeting -->
<div class="user-greeting"></div>
<div class="right-container">
<div class="right-login">
<a href="login.html" id="login-link">Login</a>
</div>
<a href="signup.html" class="right-link">Get Started</a>
<!-- Placeholder for logout button -->
<button id="logout-btn" style="display:none; background-color:#f87171; color:white; border:none; padding:8px 16px; border-radius:6px; cursor:pointer; font-weight:500; margin-left:10px;">Logout</button>
</div>
</div>
</header>
<!-- HERO SECTION -->
<section class="hero">
<div class="main-container">
<img src="images/Echo Gate Logo Final.png" alt="EchoGate Logo" width="200" />
<h1>EchoGate</h1>
<h2>Make your home <span class="important-text">safer</span> and <span class="important-text">smarter</span>.</h2>
<button id="get-started-btn" >Begin Today</button>
</div>
</section>
<!-- project info -->
<div class="project-info">
<!-- parallax image -->
<div id="team-picture" class="parallax-container">
<img src="images/Image of Team.jpeg" alt="Picture of the team" id="team-image" />
</div>
<!-- What is EchoGate Section -->
<section id="about">
<div class="header">
<h2>What is <span class="important-text">EchoGate</span>.</h2>
<div class="project-content">
<p class="project-desc">
<span class="important-text">EchoGate</span> is an innovative facial recognition security system designed to give homeowners unparalleled peace of mind. By maintaining a personalized database
of familiar faces, <span class="important-text">EchoGate</span> can instantly identify visitors at your doorstep. When an unknown face is detected, the software immediately alerts the homeowner,
sending a picture of the individual directly to their phone, and starting a live feed recording. The system activates only when motion is detected, optimizing
efficiency while ensuring that every potential threat is analyzed in real-time.
<br /><br />
Beyond simple notifications, <span class="important-text">EchoGate</span> empowers homeowners to take immediate action in potential security situations. If an unrecognized individual appears
within the camera's range, it notifies the homeowners giving them a heads-up in potentially unsafe situations.
By combining advanced facial recognition with direct communication, <span class="important-text">EchoGate</span> not only protects homes but also delivers confidence, control,
and rapid response - transforming traditional home security into a smarter, safer, and more proactive experience.
</p>
</div>
</div>
</section>
<!-- Meet the team section -->
<section id="team">
<div class="scroll-container">
<h2>Meet the <span class="important-text">team</span>.</h2>
<div class="carousel">
<button class="arrow left-arrow">❮</button>
<div class="carousel-inner">
<!-- Member 1 -->
<div class="member">
<img class="name-img" src="images\Leo.jpeg" alt="Image of team Leo Canales" />
<h3 class="name">Leo Canales</h3>
<p class="name-desc">
Hi, my name is Leo Canales, I am 18 years old,
and I am a first-year computer engineering major.
I love coding, running, and gaming. I worked on
the facial recognition system and motion detection
systems for <span class="important-text">EchoGate</span>.
</p>
</div>
<!-- Member 2 -->
<div class="member">
<img class="name-img" src="images/Zander.jpeg" alt="Image of team Zander Avery" />
<h3 class="name">Zander Avery</h3>
<p class="name-desc">
My names Zander Avery and I'm an 18 year old
computer science student at the University of
Cincinnati! I love programming, web development,
math, and weightlifting. I worked on the website
and front-end functions for <span class="important-text">EchoGate</span>.
</p>
</div>
<!-- Member 3 -->
<div class="member">
<img class="name-img" src="images/Eric.jpeg" alt="Image of team Eric Ngo" />
<h3 class="name">Eric Ngo</h3>
<p class="name-desc">
Hello, my name is Eric Ngo and I am an 18 year old
electrical engineering student at the University
of Cincinnati! I enjoy gaming, video editing, and
rock climbing. For <span class="important-text">EchoGate</span>
I worked on the logo design and video presentation.
</p>
</div>
<!-- Member 4 -->
<div class="member">
<img class="name-img" src="images/Anirudh.jpeg" alt="Image of team Anirudh Chari" />
<h3 class="name">Anirudh Chari</h3>
<p class="name-desc">
Hi everyone, my name is Anirudh Chari and I am
an 18 year old studying electrical engineering at
UC. I love watching and playing soccer, playing
Clash Royale, and listening to music. I worked on
the logo design and video script for <span class="important-text">EchoGate</span>.
</p>
</div>
</div>
<button class="arrow right-arrow">❯</button>
</div>
</div>
</section>
</div>
<footer>
<p>© EchoGate, 2025 - Made with safety and security in mind.</p>
</footer>
<script async
crossorigin="anonymous"
data-clerk-publishable-key="pk_test_d2lubmluZy1wdXAtNTQuY2xlcmsuYWNjb3VudHMuZGV2JA"
src="https://cdn.jsdelivr.net/npm/@clerk/clerk-js@latest/dist/clerk.browser.js">
</script>
<script src="clerk-dev.js"></script>
<script src="script.js"></script>
</body>
</html>