Skip to content

Commit ddb83d4

Browse files
SentryCoderDevSentryCoderDev
authored
Update index.html
1 parent 90ac388 commit ddb83d4

File tree

1 file changed

+152
-12
lines changed

1 file changed

+152
-12
lines changed

‎templates/index.html‎

Lines changed: 152 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,172 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
45
<meta charset="UTF-8">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0">
67
<title>H3RU Home Control System</title>
7-
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
8+
<style>
9+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
10+
11+
body {
12+
font-family: 'Roboto', sans-serif;
13+
background-color: #000000;
14+
color: #333;
15+
margin: 0;
16+
padding: 0;
17+
display: flex;
18+
flex-direction: column;
19+
justify-content: center;
20+
align-items: center;
21+
min-height: 100vh;
22+
}
23+
24+
.header {
25+
background-color: #fffb00be;
26+
padding: 20px;
27+
text-align: center;
28+
color: rgb(0, 0, 0);
29+
width: 100%;
30+
}
31+
32+
h1 {
33+
margin: 0;
34+
font-size: 2em;
35+
font-weight: 700;
36+
}
37+
38+
.logo-container {
39+
text-align: center;
40+
margin: 20px 0;
41+
}
42+
43+
.logo-container img {
44+
width: 200px;
45+
height: auto;
46+
}
47+
48+
.logo-container p {
49+
margin: 10px 0 0 0;
50+
font-size: 1em;
51+
}
52+
53+
.content {
54+
display: flex;
55+
justify-content: center;
56+
align-items: flex-start;
57+
flex-wrap: wrap;
58+
gap: 20px;
59+
width: 100%;
60+
}
61+
62+
.camera-feed {
63+
background-color: #fff;
64+
padding: 20px;
65+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
66+
border-radius: 8px;
67+
text-align: center;
68+
width: 320px;
69+
}
70+
71+
.camera-feed h3 {
72+
margin-top: 0;
73+
font-weight: 700;
74+
}
75+
76+
.camera-box {
77+
position: relative;
78+
width: 100%;
79+
padding-top: 56.25%;
80+
/* 16:9 Aspect Ratio */
81+
overflow: hidden;
82+
border-radius: 8px;
83+
}
84+
85+
.camera-box img {
86+
position: absolute;
87+
top: 0;
88+
left: 0;
89+
width: 100%;
90+
height: 100%;
91+
object-fit: cover;
92+
}
93+
94+
.centered-button {
95+
text-align: center;
96+
padding: 20px;
97+
width: 100%;
98+
}
99+
100+
#open-door {
101+
font-size: 1.2em;
102+
padding: 12px 24px;
103+
background-color: #fffb00c0;
104+
color: #fff;
105+
border: none;
106+
border-radius: 4px;
107+
cursor: pointer;
108+
transition: background-color 0.3s ease;
109+
}
110+
111+
#open-door:hover {
112+
background-color: #1669c1;
113+
}
114+
115+
#result-message {
116+
text-align: center;
117+
margin-top: 20px;
118+
font-size: 1em;
119+
color: #555;
120+
}
121+
</style>
8122
</head>
123+
9124
<body>
10-
<h1>H3RU Home Control System</h1>
11-
<div class="container">
125+
<header class="header">
126+
<h1>H3RU Home Control System</h1>
127+
</header>
128+
129+
<div class="content">
130+
<!-- Camera Feed Left -->
12131
<div class="camera-feed">
13132
<h3>Outside Garage Camera</h3>
14-
<img src="{{ url_for('video_feed', cam_id=0) }}" alt="Outside Garage Camera" width="320" height="240">
133+
<div class="camera-box">
134+
<img src="{{ url_for('video_feed', cam_id=0) }}" alt="Outside Garage Camera">
135+
</div>
15136
</div>
16-
<div class="camera-feed">
17-
<h3>Inside Garage Camera</h3>
18-
<img src="{{ url_for('video_feed', cam_id=1) }}" alt="Inside Garage Camera" width="320" height="240">
137+
138+
<!-- Logo in the Center -->
139+
<div class="logo-container">
140+
<img src="file:///C:/Users/emohi/Desktop/ra.jpg" alt="H3RU Logo">
141+
<p>To everyone who can't finish what they started<br>- H3RU</p>
19142
</div>
143+
144+
<!-- Camera Feed Right -->
20145
<div class="camera-feed">
21-
<h3>Entrance Camera</h3>
22-
<img src="{{ url_for('video_feed', cam_id=2) }}" alt="Entrance Camera" width="320" height="240">
146+
<h3>Inside Garage Camera</h3>
147+
<div class="camera-box">
148+
<img src="{{ url_for('video_feed', cam_id=1) }}" alt="Inside Garage Camera">
149+
</div>
23150
</div>
24151
</div>
152+
153+
<!-- Button Below the Logo -->
25154
<div class="centered-button">
26155
<button id="open-door">Open Door</button>
27156
</div>
28-
<div id="result-message" style="margin-top: 20px;"></div>
157+
158+
<!-- Third Camera Feed Below the Button -->
159+
<div class="camera-feed">
160+
<h3>Entrance Camera</h3>
161+
<div class="camera-box">
162+
<img src="{{ url_for('video_feed', cam_id=2) }}" alt="Entrance Camera">
163+
</div>
164+
</div>
165+
166+
<div id="result-message"></div>
167+
29168
<script>
30-
document.getElementById('open-door').addEventListener('click', function() {
169+
document.getElementById('open-door').addEventListener('click', function () {
31170
fetch('/open_door', { method: 'POST' })
32171
.then(response => response.text())
33172
.then(data => {
@@ -43,7 +182,8 @@ <h3>Entrance Camera</h3>
43182
});
44183
}
45184

46-
setInterval(fetchResult, 1000); // Her saniye sonuçları kontrol et
185+
setInterval(fetchResult, 1000); // Check results every second
47186
</script>
48187
</body>
188+
49189
</html>

0 commit comments

Comments
 (0)