Hugging Face's logo

Spaces:
nonamelife
/
garbage-detection-demo
Sleeping

App Files Community
nonamelife commited on
Commit
1e003fd
·
verified ·
1 Parent(s): 02d0963

Update templates/contact.html

Browse files
Files changed (1) hide show
  1. templates/contact.html +239 -221
templates/contact.html CHANGED
@@ -1,221 +1,239 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8" />
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
- <title>Contact Us</title>
7
- <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet" />
8
- <style>
9
- * {
10
- margin: 0;
11
- padding: 0;
12
- box-sizing: border-box;
13
- font-family: 'Roboto Mono', monospace;
14
- }
15
-
16
- html, body {
17
- height: 100%;
18
- display: flex;
19
- flex-direction: column;
20
- background: linear-gradient(135deg, #1C2526 0%, #252C2D 100%);
21
- color: #E0E7E8;
22
- }
23
-
24
- .navbar {
25
- background: #2E3536;
26
- padding: 15px 30px;
27
- display: flex;
28
- justify-content: space-between;
29
- align-items: center;
30
- }
31
-
32
- .nav-brand {
33
- font-size: 1.5rem;
34
- color: #26A69A;
35
- }
36
-
37
- .nav-links {
38
- list-style: none;
39
- display: flex;
40
- gap: 20px;
41
- }
42
-
43
- .nav-links a {
44
- text-decoration: none;
45
- color: #E0E7E8;
46
- font-weight: 500;
47
- transition: color 0.3s ease;
48
- }
49
-
50
- .nav-links a:hover,
51
- .nav-links .active {
52
- color: #26A69A;
53
- }
54
-
55
- .container {
56
- flex: 1;
57
- max-width: 1000px;
58
- margin: auto;
59
- padding: 40px 20px;
60
- text-align: center;
61
- }
62
-
63
- .contact-header h1 {
64
- font-size: 2.5rem;
65
- }
66
-
67
- .contact-header p {
68
- font-size: 1.2rem;
69
- color: #A0A8A9;
70
- margin: 10px auto 30px;
71
- }
72
-
73
- .team-list {
74
- display: grid;
75
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
76
- gap: 30px;
77
- justify-content: center;
78
- margin-top: 40px;
79
- }
80
-
81
- .team-card {
82
- height: 260px;
83
- position: relative;
84
- perspective: 1000px;
85
- }
86
-
87
- .card-content {
88
- position: absolute;
89
- width: 100%;
90
- height: 100%;
91
- transition: transform 0.6s ease-in-out;
92
- transform-style: preserve-3d;
93
- }
94
-
95
- .card-front,
96
- .card-back {
97
- position: absolute;
98
- width: 100%;
99
- height: 100%;
100
- border-radius: 12px;
101
- display: flex;
102
- align-items: center;
103
- justify-content: center;
104
- flex-direction: column;
105
- padding: 15px;
106
- text-align: center;
107
- font-weight: 600;
108
- backface-visibility: hidden;
109
- }
110
-
111
- .card-front {
112
- background: #557C8D;
113
- color: white;
114
- }
115
-
116
- .card-back {
117
- background: #2F4156;
118
- color: white;
119
- transform: rotateY(180deg);
120
- }
121
-
122
- .team-card:hover .card-content {
123
- transform: rotateY(180deg);
124
- }
125
-
126
- .card-front h3 {
127
- opacity: 1;
128
- transition: opacity 0.3s ease-in-out;
129
- }
130
-
131
- .team-card:hover .card-front h3 {
132
- opacity: 0;
133
- }
134
-
135
- .card-back p {
136
- opacity: 0;
137
- transition: opacity 0.3s ease-in-out;
138
- }
139
-
140
- .team-card:hover .card-back p {
141
- opacity: 1;
142
- }
143
-
144
- .footer {
145
- background: #2E3536;
146
- padding: 15px;
147
- text-align: center;
148
- color: #A0A8A9;
149
- font-size: 0.9rem;
150
- margin-top: auto;
151
- width: 100%;
152
- }
153
- </style>
154
- </head>
155
- <body>
156
- <nav class="navbar">
157
- <div class="nav-brand">Garbage Detection</div>
158
- <ul class="nav-links">
159
- <li><a href="/">Home</a></li>
160
- <li><a href="/tool">Tool</a></li>
161
- <li><a href="/about">About</a></li>
162
- <li><a href="/contact" class="active">Contact</a></li>
163
- </ul>
164
- </nav>
165
-
166
- <main class="container">
167
- <div class="contact-header">
168
- <h1>Meet the Team</h1>
169
- <p>Get to know the people behind Garbage Detection</p>
170
- </div>
171
-
172
- <section class="team-list">
173
- <div class="team-card">
174
- <div class="card-content">
175
- <div class="card-front"><h3>Sanjay Murali</h3></div>
176
- <div class="card-back"><p>RA2312701010006</p><p>[email protected]</p></div>
177
- </div>
178
- </div>
179
-
180
- <div class="team-card">
181
- <div class="card-content">
182
- <div class="card-front"><h3>Adithyan E</h3></div>
183
- <div class="card-back"><p>RA2312701010004</p><p>[email protected]</p></div>
184
- </div>
185
- </div>
186
-
187
- <div class="team-card">
188
- <div class="card-content">
189
- <div class="card-front"><h3>K Athmapriyan</h3></div>
190
- <div class="card-back"><p>RA2312701010007</p><p>[email protected]</p></div>
191
- </div>
192
- </div>
193
-
194
- <div class="team-card">
195
- <div class="card-content">
196
- <div class="card-front"><h3>R Supriya Rao</h3></div>
197
- <div class="card-back"><p>RA2312701010027</p><p>[email protected]</p></div>
198
- </div>
199
- </div>
200
-
201
- <div class="team-card">
202
- <div class="card-content">
203
- <div class="card-front"><h3>Joel Sheno G</h3></div>
204
- <div class="card-back"><p>RA2312701010024</p><p>[email protected]</p></div>
205
- </div>
206
- </div>
207
-
208
- <div class="team-card">
209
- <div class="card-content">
210
- <div class="card-front"><h3>Sriyaraj Kotagond</h3></div>
211
- <div class="card-back"><p>RA2312701010026</p><p>[email protected]</p></div>
212
- </div>
213
- </div>
214
- </section>
215
- </main>
216
-
217
- <footer class="footer">
218
- <p>© 2025 Garbage Detection</p>
219
- </footer>
220
- </body>
221
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>Contact Us</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400;500&display=swap" rel="stylesheet" />
8
+ <style>
9
+ /* Color Palette Variables for easy reference (copied from style.css) */
10
+ :root {
11
+ --floral-white: #fffcf2;
12
+ --timberwolf: #ccc5b9;
13
+ --black-olive: #403d39;
14
+ --eerie-black: #252422;
15
+ --flame: #eb5e28;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ font-family: 'Roboto Mono', monospace;
23
+ }
24
+
25
+ html, body {
26
+ height: 100%;
27
+ display: flex;
28
+ flex-direction: column;
29
+ /* Use eerie-black as base with a subtle gradient */
30
+ background: linear-gradient(135deg, var(--eerie-black) 0%, #2e2d2aff 100%);
31
+ color: var(--floral-white); /* Main text color */
32
+ }
33
+
34
+ .navbar {
35
+ background: var(--black-olive); /* Darker, grounded color for navbar */
36
+ padding: 15px 30px;
37
+ display: flex;
38
+ justify-content: space-between;
39
+ align-items: center;
40
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
41
+ }
42
+
43
+ .nav-brand {
44
+ font-size: 1.5rem;
45
+ color: var(--flame); /* Vibrant accent for brand */
46
+ }
47
+
48
+ .nav-links {
49
+ list-style: none;
50
+ display: flex;
51
+ gap: 20px;
52
+ }
53
+
54
+ .nav-links a {
55
+ text-decoration: none;
56
+ color: var(--floral-white);
57
+ font-weight: 500;
58
+ transition: color 0.3s ease;
59
+ }
60
+
61
+ .nav-links a:hover,
62
+ .nav-links .active {
63
+ color: var(--flame); /* Vibrant accent on hover/active */
64
+ }
65
+
66
+ .container {
67
+ flex: 1;
68
+ max-width: 1000px;
69
+ margin: auto;
70
+ padding: 40px 20px;
71
+ text-align: center;
72
+ }
73
+
74
+ .contact-header h1 {
75
+ font-size: 2.5rem;
76
+ color: var(--floral-white); /* Use floral-white for main heading */
77
+ font-family: 'Montserrat', sans-serif; /* Add Montserrat if you want consistency with other pages */
78
+ }
79
+
80
+ .contact-header p {
81
+ font-size: 1.2rem;
82
+ color: var(--timberwolf); /* Softer, slightly muted color for subtitle */
83
+ margin: 10px auto 30px;
84
+ }
85
+
86
+ .team-list {
87
+ display: grid;
88
+ grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
89
+ gap: 30px;
90
+ justify-content: center;
91
+ margin-top: 40px;
92
+ }
93
+
94
+ .team-card {
95
+ height: 260px;
96
+ position: relative;
97
+ perspective: 1000px;
98
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Add shadow for depth */
99
+ border-radius: 12px; /* Ensure shadow matches card border-radius */
100
+ }
101
+
102
+ .card-content {
103
+ position: absolute;
104
+ width: 100%;
105
+ height: 100%;
106
+ transition: transform 0.6s ease-in-out;
107
+ transform-style: preserve-3d;
108
+ }
109
+
110
+ .card-front,
111
+ .card-back {
112
+ position: absolute;
113
+ width: 100%;
114
+ height: 100%;
115
+ border-radius: 12px;
116
+ display: flex;
117
+ align-items: center;
118
+ justify-content: center;
119
+ flex-direction: column;
120
+ padding: 15px;
121
+ text-align: center;
122
+ font-weight: 600;
123
+ backface-visibility: hidden;
124
+ }
125
+
126
+ .card-front {
127
+ background: var(--eerie-black); /* Dark background for the front */
128
+ color: var(--floral-white); /* Light text */
129
+ }
130
+
131
+ .card-front h3 {
132
+ color: var(--flame); /* Make the name vibrant */
133
+ opacity: 1;
134
+ transition: opacity 0.3s ease-in-out;
135
+ }
136
+
137
+ .team-card:hover .card-front h3 {
138
+ opacity: 0;
139
+ }
140
+
141
+ .card-back {
142
+ background: var(--black-olive); /* Slightly lighter dark for the back */
143
+ color: var(--floral-white); /* Light text for details */
144
+ transform: rotateY(180deg);
145
+ }
146
+
147
+ .card-back p {
148
+ color: var(--timberwolf); /* Use timberwolf for email/ID for consistency */
149
+ opacity: 0;
150
+ transition: opacity 0.3s ease-in-out;
151
+ }
152
+
153
+ .team-card:hover .card-content {
154
+ transform: rotateY(180deg);
155
+ }
156
+
157
+ .team-card:hover .card-back p {
158
+ opacity: 1;
159
+ }
160
+
161
+ .footer {
162
+ background: var(--black-olive); /* Matching navbar background */
163
+ padding: 15px;
164
+ text-align: center;
165
+ color: var(--timberwolf); /* Softer text color for footer */
166
+ font-size: 0.9rem;
167
+ margin-top: auto;
168
+ width: 100%;
169
+ box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
170
+ }
171
+ </style>
172
+ </head>
173
+ <body>
174
+ <nav class="navbar">
175
+ <div class="nav-brand">Garbage Detection</div>
176
+ <ul class="nav-links">
177
+ <li><a href="/">Home</a></li>
178
+ <li><a href="/tool">Tool</a></li>
179
+ <li><a href="/about">About</a></li>
180
+ <li><a href="/contact" class="active">Contact</a></li>
181
+ </ul>
182
+ </nav>
183
+
184
+ <main class="container">
185
+ <div class="contact-header">
186
+ <h1>Meet the Team</h1>
187
+ <p>Get to know the people behind Garbage Detection</p>
188
+ </div>
189
+
190
+ <section class="team-list">
191
+ <div class="team-card">
192
+ <div class="card-content">
193
+ <div class="card-front"><h3>Sanjay Murali</h3></div>
194
+ <div class="card-back"><p>RA2312701010006</p><p>[email protected]</p></div>
195
+ </div>
196
+ </div>
197
+
198
+ <div class="team-card">
199
+ <div class="card-content">
200
+ <div class="card-front"><h3>Adithyan E</h3></div>
201
+ <div class="card-back"><p>RA2312701010004</p><p>[email protected]</p></div>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="team-card">
206
+ <div class="card-content">
207
+ <div class="card-front"><h3>K Athmapriyan</h3></div>
208
+ <div class="card-back"><p>RA2312701010007</p><p>[email protected]</p></div>
209
+ </div>
210
+ </div>
211
+
212
+ <div class="team-card">
213
+ <div class="card-content">
214
+ <div class="card-front"><h3>R Supriya Rao</h3></div>
215
+ <div class="card-back"><p>RA2312701010027</p><p>[email protected]</p></div>
216
+ </div>
217
+ </div>
218
+
219
+ <div class="team-card">
220
+ <div class="card-content">
221
+ <div class="card-front"><h3>Joel Sheno G</h3></div>
222
+ <div class="card-back"><p>RA2312701010024</p><p>[email protected]</p></div>
223
+ </div>
224
+ </div>
225
+
226
+ <div class="team-card">
227
+ <div class="card-content">
228
+ <div class="card-front"><h3>Sriyaraj Kotagond</h3></div>
229
+ <div class="card-back"><p>RA2312701010026</p><p>[email protected]</p></div>
230
+ </div>
231
+ </div>
232
+ </section>
233
+ </main>
234
+
235
+ <footer class="footer">
236
+ <p>© 2025 Garbage Detection</p>
237
+ </footer>
238
+ </body>
239
+ </html>