Hugging Face's logo

Spaces:
Saurabh502
/
vedic-face-reader
Running

App Files Community
Saurabh502 commited on
Commit
d9ff337
·
verified ·
1 Parent(s): d633131

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +1248 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Vedic Face Reader
3
- emoji: 📊
4
- colorFrom: red
5
- colorTo: pink
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: vedic-face-reader
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,1248 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </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>Vedic Face Reader - Samudrik Shastra Analysis</title>
7
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
+ <style>
9
+ :root {
10
+ --primary: #8e44ad;
11
+ --secondary: #f39c12;
12
+ --dark: #2c3e50;
13
+ --light: #ecf0f1;
14
+ --success: #27ae60;
15
+ --warning: #e74c3c;
16
+ }
17
+
18
+ * {
19
+ margin: 0;
20
+ padding: 0;
21
+ box-sizing: border-box;
22
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
23
+ }
24
+
25
+ body {
26
+ background-color: #f5f5f5;
27
+ color: #333;
28
+ line-height: 1.6;
29
+ overflow-x: hidden;
30
+ }
31
+
32
+ .container {
33
+ max-width: 100%;
34
+ padding: 0 15px;
35
+ margin: 0 auto;
36
+ }
37
+
38
+ header {
39
+ background: linear-gradient(135deg, var(--primary), #6c5ce7);
40
+ color: white;
41
+ padding: 1rem 0;
42
+ text-align: center;
43
+ position: relative;
44
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
45
+ }
46
+
47
+ .header-content {
48
+ display: flex;
49
+ flex-direction: column;
50
+ align-items: center;
51
+ }
52
+
53
+ .logo {
54
+ width: 80px;
55
+ height: 80px;
56
+ background-color: white;
57
+ border-radius: 50%;
58
+ display: flex;
59
+ align-items: center;
60
+ justify-content: center;
61
+ margin-bottom: 10px;
62
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
63
+ }
64
+
65
+ .logo i {
66
+ color: var(--primary);
67
+ font-size: 2.5rem;
68
+ }
69
+
70
+ h1 {
71
+ font-size: 1.8rem;
72
+ margin-bottom: 0.5rem;
73
+ font-weight: 600;
74
+ }
75
+
76
+ .tagline {
77
+ font-size: 0.9rem;
78
+ opacity: 0.9;
79
+ font-style: italic;
80
+ }
81
+
82
+ .language-selector {
83
+ position: absolute;
84
+ top: 15px;
85
+ right: 15px;
86
+ }
87
+
88
+ .language-selector select {
89
+ background-color: rgba(255, 255, 255, 0.2);
90
+ color: white;
91
+ border: 1px solid rgba(255, 255, 255, 0.3);
92
+ border-radius: 20px;
93
+ padding: 3px 10px;
94
+ font-size: 0.8rem;
95
+ }
96
+
97
+ .language-selector select option {
98
+ color: var(--dark);
99
+ }
100
+
101
+ main {
102
+ padding: 20px 0;
103
+ }
104
+
105
+ .intro-section {
106
+ text-align: center;
107
+ margin-bottom: 30px;
108
+ padding: 0 15px;
109
+ }
110
+
111
+ .intro-text {
112
+ margin-bottom: 20px;
113
+ font-size: 1rem;
114
+ }
115
+
116
+ .features-grid {
117
+ display: grid;
118
+ grid-template-columns: repeat(2, 1fr);
119
+ gap: 15px;
120
+ margin-bottom: 25px;
121
+ }
122
+
123
+ .feature-card {
124
+ background-color: white;
125
+ border-radius: 12px;
126
+ padding: 15px;
127
+ text-align: center;
128
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
129
+ transition: transform 0.3s ease;
130
+ }
131
+
132
+ .feature-card:hover {
133
+ transform: translateY(-5px);
134
+ }
135
+
136
+ .feature-icon {
137
+ width: 50px;
138
+ height: 50px;
139
+ background: linear-gradient(135deg, var(--secondary), #e67e22);
140
+ border-radius: 50%;
141
+ display: flex;
142
+ align-items: center;
143
+ justify-content: center;
144
+ margin: 0 auto 10px;
145
+ color: white;
146
+ font-size: 1.5rem;
147
+ }
148
+
149
+ .feature-title {
150
+ font-size: 0.9rem;
151
+ font-weight: 600;
152
+ margin-bottom: 5px;
153
+ color: var(--dark);
154
+ }
155
+
156
+ .feature-desc {
157
+ font-size: 0.8rem;
158
+ color: #666;
159
+ }
160
+
161
+ .upload-section {
162
+ background-color: white;
163
+ border-radius: 15px;
164
+ padding: 20px;
165
+ margin: 0 15px 30px;
166
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
167
+ text-align: center;
168
+ position: relative;
169
+ overflow: hidden;
170
+ }
171
+
172
+ .upload-section::before {
173
+ content: "";
174
+ position: absolute;
175
+ top: 0;
176
+ left: 0;
177
+ width: 100%;
178
+ height: 5px;
179
+ background: linear-gradient(90deg, var(--primary), var(--secondary));
180
+ }
181
+
182
+ .upload-title {
183
+ font-size: 1.2rem;
184
+ margin-bottom: 15px;
185
+ color: var(--dark);
186
+ font-weight: 600;
187
+ }
188
+
189
+ .upload-instructions {
190
+ font-size: 0.85rem;
191
+ color: #666;
192
+ margin-bottom: 20px;
193
+ }
194
+
195
+ .upload-area {
196
+ border: 2px dashed #ccc;
197
+ border-radius: 10px;
198
+ padding: 30px;
199
+ margin-bottom: 15px;
200
+ cursor: pointer;
201
+ transition: all 0.3s ease;
202
+ position: relative;
203
+ }
204
+
205
+ .upload-area:hover {
206
+ border-color: var(--primary);
207
+ background-color: rgba(142, 68, 173, 0.05);
208
+ }
209
+
210
+ .upload-area i {
211
+ font-size: 2.5rem;
212
+ color: var(--primary);
213
+ margin-bottom: 10px;
214
+ }
215
+
216
+ .upload-area-text {
217
+ font-size: 0.9rem;
218
+ color: #666;
219
+ }
220
+
221
+ .btn {
222
+ display: inline-block;
223
+ padding: 12px 25px;
224
+ background: linear-gradient(135deg, var(--primary), #6c5ce7);
225
+ color: white;
226
+ border: none;
227
+ border-radius: 30px;
228
+ font-size: 1rem;
229
+ font-weight: 500;
230
+ cursor: pointer;
231
+ transition: all 0.3s ease;
232
+ box-shadow: 0 4px 10px rgba(142, 68, 173, 0.3);
233
+ margin: 5px;
234
+ }
235
+
236
+ .btn:hover {
237
+ transform: translateY(-2px);
238
+ box-shadow: 0 6px 15px rgba(142, 68, 173, 0.4);
239
+ }
240
+
241
+ .btn-outline {
242
+ background: transparent;
243
+ border: 2px solid var(--primary);
244
+ color: var(--primary);
245
+ box-shadow: none;
246
+ }
247
+
248
+ .btn-outline:hover {
249
+ background: rgba(142, 68, 173, 0.1);
250
+ }
251
+
252
+ .result-section {
253
+ display: none;
254
+ background-color: white;
255
+ border-radius: 15px;
256
+ padding: 20px;
257
+ margin: 0 15px 30px;
258
+ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
259
+ }
260
+
261
+ .result-header {
262
+ display: flex;
263
+ align-items: center;
264
+ margin-bottom: 20px;
265
+ padding-bottom: 15px;
266
+ border-bottom: 1px solid #eee;
267
+ }
268
+
269
+ .result-avatar {
270
+ width: 80px;
271
+ height: 80px;
272
+ border-radius: 50%;
273
+ object-fit: cover;
274
+ border: 3px solid var(--secondary);
275
+ margin-right: 15px;
276
+ }
277
+
278
+ .result-title {
279
+ flex: 1;
280
+ }
281
+
282
+ .result-name {
283
+ font-size: 1.2rem;
284
+ font-weight: 600;
285
+ margin-bottom: 5px;
286
+ color: var(--dark);
287
+ }
288
+
289
+ .result-confidence {
290
+ display: inline-block;
291
+ background-color: rgba(39, 174, 96, 0.2);
292
+ color: var(--success);
293
+ padding: 3px 10px;
294
+ border-radius: 20px;
295
+ font-size: 0.8rem;
296
+ font-weight: 500;
297
+ }
298
+
299
+ .result-tabs {
300
+ display: flex;
301
+ margin-bottom: 20px;
302
+ border-bottom: 1px solid #eee;
303
+ }
304
+
305
+ .result-tab {
306
+ padding: 10px 15px;
307
+ font-size: 0.9rem;
308
+ font-weight: 500;
309
+ color: #666;
310
+ cursor: pointer;
311
+ border-bottom: 2px solid transparent;
312
+ transition: all 0.3s ease;
313
+ }
314
+
315
+ .result-tab.active {
316
+ color: var(--primary);
317
+ border-bottom-color: var(--primary);
318
+ }
319
+
320
+ .result-content {
321
+ display: none;
322
+ }
323
+
324
+ .result-content.active {
325
+ display: block;
326
+ }
327
+
328
+ .feature-analysis {
329
+ margin-bottom: 20px;
330
+ }
331
+
332
+ .feature-title {
333
+ font-size: 1rem;
334
+ font-weight: 600;
335
+ color: var(--dark);
336
+ margin-bottom: 10px;
337
+ display: flex;
338
+ align-items: center;
339
+ }
340
+
341
+ .feature-title i {
342
+ margin-right: 8px;
343
+ color: var(--secondary);
344
+ }
345
+
346
+ .feature-desc {
347
+ font-size: 0.9rem;
348
+ color: #555;
349
+ margin-bottom: 5px;
350
+ }
351
+
352
+ .feature-match {
353
+ display: flex;
354
+ align-items: center;
355
+ margin-top: 10px;
356
+ }
357
+
358
+ .match-bar {
359
+ flex: 1;
360
+ height: 8px;
361
+ background-color: #eee;
362
+ border-radius: 4px;
363
+ margin-right: 10px;
364
+ overflow: hidden;
365
+ }
366
+
367
+ .match-fill {
368
+ height: 100%;
369
+ background: linear-gradient(90deg, var(--secondary), var(--primary));
370
+ border-radius: 4px;
371
+ }
372
+
373
+ .match-percent {
374
+ font-size: 0.85rem;
375
+ color: var(--success);
376
+ font-weight: 500;
377
+ }
378
+
379
+ .face-image-container {
380
+ position: relative;
381
+ margin: 20px 0;
382
+ border-radius: 10px;
383
+ overflow: hidden;
384
+ background-color: #f9f9f9;
385
+ }
386
+
387
+ .face-image {
388
+ width: 100%;
389
+ display: block;
390
+ }
391
+
392
+ .face-overlay {
393
+ position: absolute;
394
+ top: 0;
395
+ left: 0;
396
+ width: 100%;
397
+ height: 100%;
398
+ }
399
+
400
+ .face-point {
401
+ position: absolute;
402
+ width: 18px;
403
+ height: 18px;
404
+ background-color: var(--warning);
405
+ border-radius: 50%;
406
+ transform: translate(-50%, -50%);
407
+ }
408
+
409
+ .face-point:hover .face-tooltip {
410
+ display: block;
411
+ }
412
+
413
+ .face-tooltip {
414
+ display: none;
415
+ position: absolute;
416
+ bottom: 100%;
417
+ left: 50%;
418
+ transform: translateX(-50%);
419
+ background-color: white;
420
+ padding: 8px 12px;
421
+ border-radius: 8px;
422
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
423
+ font-size: 0.8rem;
424
+ white-space: nowrap;
425
+ z-index: 10;
426
+ margin-bottom: 5px;
427
+ }
428
+
429
+ .face-tooltip::after {
430
+ content: "";
431
+ position: absolute;
432
+ top: 100%;
433
+ left: 50%;
434
+ transform: translateX(-50%);
435
+ border-width: 5px;
436
+ border-style: solid;
437
+ border-color: white transparent transparent transparent;
438
+ }
439
+
440
+ .modal {
441
+ display: none;
442
+ position: fixed;
443
+ top: 0;
444
+ left: 0;
445
+ width: 100%;
446
+ height: 100%;
447
+ background-color: rgba(0, 0, 0, 0.7);
448
+ z-index: 100;
449
+ align-items: center;
450
+ justify-content: center;
451
+ }
452
+
453
+ .modal-content {
454
+ background-color: white;
455
+ border-radius: 15px;
456
+ width: 90%;
457
+ max-width: 500px;
458
+ max-height: 90vh;
459
+ overflow-y: auto;
460
+ padding: 25px;
461
+ position: relative;
462
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
463
+ }
464
+
465
+ .close-modal {
466
+ position: absolute;
467
+ top: 15px;
468
+ right: 15px;
469
+ font-size: 1.5rem;
470
+ color: #666;
471
+ cursor: pointer;
472
+ }
473
+
474
+ .disclaimer {
475
+ background-color: rgba(231, 76, 60, 0.1);
476
+ color: var(--warning);
477
+ padding: 15px;
478
+ border-radius: 10px;
479
+ margin: 20px 0;
480
+ font-size: 0.85rem;
481
+ }
482
+
483
+ footer {
484
+ background-color: var(--dark);
485
+ color: white;
486
+ padding: 25px 15px;
487
+ text-align: center;
488
+ font-size: 0.85rem;
489
+ }
490
+
491
+ .footer-links {
492
+ display: flex;
493
+ justify-content: center;
494
+ margin-bottom: 15px;
495
+ }
496
+
497
+ .footer-link {
498
+ color: white;
499
+ margin: 0 10px;
500
+ text-decoration: none;
501
+ opacity: 0.8;
502
+ transition: opacity 0.3s ease;
503
+ }
504
+
505
+ .footer-link:hover {
506
+ opacity: 1;
507
+ }
508
+
509
+ .social-icons {
510
+ margin: 20px 0;
511
+ }
512
+
513
+ .social-icon {
514
+ display: inline-block;
515
+ width: 40px;
516
+ height: 40px;
517
+ background-color: rgba(255, 255, 255, 0.1);
518
+ border-radius: 50%;
519
+ margin: 0 5px;
520
+ display: inline-flex;
521
+ align-items: center;
522
+ justify-content: center;
523
+ color: white;
524
+ font-size: 1.2rem;
525
+ transition: all 0.3s ease;
526
+ }
527
+
528
+ .social-icon:hover {
529
+ background-color: var(--primary);
530
+ transform: translateY(-3px);
531
+ }
532
+
533
+ @media (min-width: 768px) {
534
+ .container {
535
+ max-width: 750px;
536
+ }
537
+
538
+ .features-grid {
539
+ grid-template-columns: repeat(4, 1fr);
540
+ }
541
+
542
+ .upload-section {
543
+ margin-left: 0;
544
+ margin-right: 0;
545
+ }
546
+
547
+ .result-section {
548
+ margin-left: 0;
549
+ margin-right: 0;
550
+ }
551
+ }
552
+
553
+ /* Animation classes */
554
+ @keyframes float {
555
+ 0% { transform: translateY(0px); }
556
+ 50% { transform: translateY(-10px); }
557
+ 100% { transform: translateY(0px); }
558
+ }
559
+
560
+ .floating {
561
+ animation: float 3s ease-in-out infinite;
562
+ }
563
+
564
+ @keyframes pulse {
565
+ 0% { transform: scale(1); }
566
+ 50% { transform: scale(1.05); }
567
+ 100% { transform: scale(1); }
568
+ }
569
+
570
+ .pulse {
571
+ animation: pulse 2s ease-in-out infinite;
572
+ }
573
+
574
+ /* Sample results for demonstration */
575
+ .sample-results {
576
+ display: flex;
577
+ flex-wrap: wrap;
578
+ justify-content: center;
579
+ margin: 30px 0;
580
+ gap: 15px;
581
+ }
582
+
583
+ .sample-card {
584
+ width: 150px;
585
+ background-color: white;
586
+ border-radius: 10px;
587
+ overflow: hidden;
588
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
589
+ transition: all 0.3s ease;
590
+ text-decoration: none;
591
+ color: inherit;
592
+ }
593
+
594
+ .sample-card:hover {
595
+ transform: translateY(-5px);
596
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
597
+ }
598
+
599
+ .sample-image {
600
+ width: 100%;
601
+ height: 120px;
602
+ object-fit: cover;
603
+ }
604
+
605
+ .sample-info {
606
+ padding: 10px;
607
+ }
608
+
609
+ .sample-name {
610
+ font-size: 0.9rem;
611
+ font-weight: 600;
612
+ margin-bottom: 3px;
613
+ color: var(--dark);
614
+ }
615
+
616
+ .sample-feature {
617
+ font-size: 0.8rem;
618
+ color: #666;
619
+ }
620
+
621
+ .loading {
622
+ display: none;
623
+ text-align: center;
624
+ padding: 30px;
625
+ }
626
+
627
+ .loading-spinner {
628
+ width: 50px;
629
+ height: 50px;
630
+ border: 5px solid rgba(142, 68, 173, 0.2);
631
+ border-top-color: var(--primary);
632
+ border-radius: 50%;
633
+ animation: spin 1s linear infinite;
634
+ margin: 0 auto 20px;
635
+ }
636
+
637
+ @keyframes spin {
638
+ to { transform: rotate(360deg); }
639
+ }
640
+
641
+ .loading-text {
642
+ font-size: 1rem;
643
+ color: var(--dark);
644
+ }
645
+ </style>
646
+ </head>
647
+ <body>
648
+ <header>
649
+ <div class="container">
650
+ <div class="header-content">
651
+ <div class="language-selector">
652
+ <select id="language-select">
653
+ <option value="en">English</option>
654
+ <option value="hi">हिंदी</option>
655
+ <option value="ta">தமிழ்</option>
656
+ <option value="te">తెలుగు</option>
657
+ <option value="bn">বাংলা</option>
658
+ </select>
659
+ </div>
660
+ <div class="logo floating">
661
+ <i class="fas fa-eye"></i>
662
+ </div>
663
+ <h1>Vedic Face Reader</h1>
664
+ <p class="tagline">Discover Yourself Through Ancient Eyes</p>
665
+ </div>
666
+ </div>
667
+ </header>
668
+
669
+ <main>
670
+ <div class="container">
671
+ <section class="intro-section">
672
+ <p class="intro-text">
673
+ Unlock the secrets of your face with ancient Samudrik Shastra wisdom. Our AI-powered analysis reveals
674
+ your personality traits, future possibilities, and hidden potentials based on 5,000-year-old Vedic knowledge.
675
+ </p>
676
+ <div class="features-grid">
677
+ <div class="feature-card">
678
+ <div class="feature-icon">
679
+ <i class="fas fa-user-tie"></i>
680
+ </div>
681
+ <h3 class="feature-title">Career Guidance</h3>
682
+ <p class="feature-desc">Discover your ideal professions based on facial features</p>
683
+ </div>
684
+ <div class="feature-card">
685
+ <div class="feature-icon">
686
+ <i class="fas fa-heart"></i>
687
+ </div>
688
+ <h3 class="feature-title">Relationship Insights</h3>
689
+ <p class="feature-desc">Understand compatibility with partners based on facial analysis</p>
690
+ </div>
691
+ <div class="feature-card">
692
+ <div class="feature-icon">
693
+ <i class="fas fa-star"></i>
694
+ </div>
695
+ <h3 class="feature-title">Personality Traits</h3>
696
+ <p class="feature-desc">Learn about your character strengths and weaknesses</p>
697
+ </div>
698
+ <div class="feature-card">
699
+ <div class="feature-icon">
700
+ <i class="fas fa-gem"></i>
701
+ </div>
702
+ <h3 class="feature-title">Fortune Lines</h3>
703
+ <p class="feature-desc">Identify Bhagya Rekha and other destiny lines on your forehead</p>
704
+ </div>
705
+ </div>
706
+ <p><strong>25,000+</strong> faces analyzed with <strong>92%</strong> user satisfaction</p>
707
+ </section>
708
+
709
+ <section class="upload-section pulse">
710
+ <h2 class="upload-title">Upload Your Face Photo</h2>
711
+ <p class="upload-instructions">For best results, use a clear front-facing photo (minimum 720p resolution) with neutral expression and good lighting.</p>
712
+
713
+ <div class="upload-area" id="upload-area">
714
+ <i class="fas fa-cloud-upload-alt"></i>
715
+ <p class="upload-area-text">Tap to upload photo or drag & drop here</p>
716
+ </div>
717
+ <input type="file" id="file-input" accept="image/*" style="display: none;">
718
+
719
+ <div class="loading" id="loading-indicator">
720
+ <div class="loading-spinner"></div>
721
+ <p class="loading-text">Analyzing your facial features with ancient wisdom...</p>
722
+ </div>
723
+
724
+ <button class="btn" id="analyze-btn" disabled>Analyze My Face</button>
725
+ <button class="btn btn-outline" id="use-sample">Try Sample Instead</button>
726
+
727
+ <div class="sample-results" id="sample-results">
728
+ <a href="#" class="sample-card sample-selector" data-sample="1">
729
+ <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sample 1" class="sample-image">
730
+ <div class="sample-info">
731
+ <h4 class="sample-name">Sample 1</h4>
732
+ <p class="sample-feature">Round face</p>
733
+ </div>
734
+ </a>
735
+ <a href="#" class="sample-card sample-selector" data-sample="2">
736
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Sample 2" class="sample-image">
737
+ <div class="sample-info">
738
+ <h4 class="sample-name">Sample 2</h4>
739
+ <p class="sample-feature">Square face</p>
740
+ </div>
741
+ </a>
742
+ <a href="#" class="sample-card sample-selector" data-sample="3">
743
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sample 3" class="sample-image">
744
+ <div class="sample-info">
745
+ <h4 class="sample-name">Sample 3</h4>
746
+ <p class="sample-feature">Oval face</p>
747
+ </div>
748
+ </a>
749
+ <a href="#" class="sample-card sample-selector" data-sample="4">
750
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Sample 4" class="sample-image">
751
+ <div class="sample-info">
752
+ <h4 class="sample-name">Sample 4</h4>
753
+ <p class="sample-feature">Rectangular face</p>
754
+ </div>
755
+ </a>
756
+ </div>
757
+ </section>
758
+
759
+ <section class="result-section" id="result-section">
760
+ <div class="result-header">
761
+ <img id="result-avatar" src="" alt="User photo" class="result-avatar">
762
+ <div class="result-title">
763
+ <h2 id="result-name" class="result-name">Your Vedic Analysis</h2>
764
+ <span class="result-confidence">87% Confidence Match</span>
765
+ </div>
766
+ </div>
767
+
768
+ <div class="result-tabs">
769
+ <div class="result-tab active" data-tab="personality">Personality</div>
770
+ <div class="result-tab" data-tab="career">Career</div>
771
+ <div class="result-tab" data-tab="relationships">Relationships</div>
772
+ <div class="result-tab" data-tab="face-map">Face Map</div>
773
+ </div>
774
+
775
+ <div class="result-content active" id="personality-tab">
776
+ <div class="feature-analysis">
777
+ <h3 class="feature-title"><i class="fas fa-shapes"></i> Face Shape</h3>
778
+ <p class="feature-desc">Your <strong>oval face shape</strong> indicates a sensitive, intuitive and artistic personality.</p>
779
+ <div class="feature-match">
780
+ <div class="match-bar"><div class="match-fill" style="width: 92%;"></div></div>
781
+ <div class="match-percent">92% match</div>
782
+ </div>
783
+ </div>
784
+
785
+ <div class="feature-analysis">
786
+ <h3 class="feature-title"><i class="fas fa-brain"></i> Forehead</h3>
787
+ <p class="feature-desc">Your <strong>well-developed forehead</strong> with faint Bhagya Rekha shows intelligence and potential for good fortune.</p>
788
+ <div class="feature-match">
789
+ <div class="match-bar"><div class="match-fill" style="width: 87%;"></div></div>
790
+ <div class="match-percent">87% match</div>
791
+ </div>
792
+ </div>
793
+
794
+ <div class="feature-analysis">
795
+ <h3 class="feature-title"><i class="fas fa-eye"></i> Eyes</h3>
796
+ <p class="feature-desc">Your <strong>large, round eyes</strong> indicate warmth, emotional depth and caring personality.</p>
797
+ <div class="feature-match">
798
+ <div class="match-bar"><div class="match-fill" style="width: 95%;"></div></div>
799
+ <div class="match-percent">95% match</div>
800
+ </div>
801
+ </div>
802
+
803
+ <div class="feature-analysis">
804
+ <h3 class="feature-title"><i class="fas fa-bullseye"></i> Nose</h3>
805
+ <p class="feature-desc">Your <strong>medium-sized nose</strong> suggests balanced ambition and practical approach to life.</p>
806
+ <div class="feature-match">
807
+ <div class="match-bar"><div class="match-fill" style="width: 78%;"></div></div>
808
+ <div class="match-percent">78% match</div>
809
+ </div>
810
+ </div>
811
+
812
+ <div class="feature-analysis">
813
+ <h3 class="feature-title"><i class="fas fa-grin"></i> Cheeks</h3>
814
+ <p class="feature-desc">Your <strong>moderate cheekbones</strong> show leadership potential without being autocratic.</p>
815
+ <div class="feature-match">
816
+ <div class="match-bar"><div class="match-fill" style="width: 83%;"></div></div>
817
+ <div class="match-percent">83% match</div>
818
+ </div>
819
+ </div>
820
+
821
+ <div class="disclaimer">
822
+ <i class="fas fa-info-circle"></i> These insights are based on ancient Samudrik Shastra principles for entertainment and self-reflection purposes only.
823
+ </div>
824
+
825
+ <button class="btn" id="see-career">See Career Predictions</button>
826
+ </div>
827
+
828
+ <div class="result-content" id="career-tab">
829
+ <div class="feature-analysis">
830
+ <h3 class="feature-title"><i class="fas fa-chart-line"></i> Career Strengths</h3>
831
+ <p class="feature-desc">Your facial features suggest you would excel in creative and people-oriented professions.</p>
832
+ </div>
833
+
834
+ <div class="feature-analysis">
835
+ <h3 class="feature-title"><i class="fas fa-briefcase"></i> Recommended Fields</h3>
836
+ <p class="feature-desc">
837
+ - Arts and creative industries<br>
838
+ - Counseling and psychology<br>
839
+ - Teaching and education<br>
840
+ - Healthcare professions<br>
841
+ - Human resources management
842
+ </p>
843
+ </div>
844
+
845
+ <div class="feature-analysis">
846
+ <h3 class="feature-title"><i class="fas fa-calendar-alt"></i> Future Prospects</h3>
847
+ <p class="feature-desc">Your Bhagya Rekha indicates upcoming opportunities between ages 32-36. Stay open to unexpected career changes during this period.</p>
848
+ </div>
849
+
850
+ <button class="btn" id="see-relationships">See Relationship Insights</button>
851
+ </div>
852
+
853
+ <div class="result-content" id="relationships-tab">
854
+ <div class="feature-analysis">
855
+ <h3 class="feature-title"><i class="fas fa-heart"></i> Romantic Compatibility</h3>
856
+ <p class="feature-desc">You are most compatible with partners who have strong, angular facial features to balance your softness.</p>
857
+ </div>
858
+
859
+ <div class="feature-analysis">
860
+ <h3 class="feature-title"><i class="fas fa-users"></i> Friendship Style</h3>
861
+ <p class="feature-desc">Your warm eyes indicate deep loyalty in friendships. You tend to maintain long-term connections.</p>
862
+ </div>
863
+
864
+ <div class="feature-analysis">
865
+ <h3 class="feature-title"><i class="fas fa-hands-helping"></i> Family Relations</h3>
866
+ <p class="feature-desc">Your facial symmetry suggests good family karma. You play the role of peacemaker in family conflicts.</p>
867
+ </div>
868
+
869
+ <button class="btn" id="see-face-map">View Detailed Face Map</button>
870
+ </div>
871
+
872
+ <div class="result-content" id="face-map-tab">
873
+ <div class="face-image-container">
874
+ <img id="analyzed-face" src="" alt="Analyzed face" class="face-image">
875
+ <div class="face-overlay">
876
+ <div class="face-point" style="top: 20%; left: 50%;" data-feature="forehead-line">
877
+ <div class="face-tooltip">Bhagya Rekha (Fortune Line)</div>
878
+ </div>
879
+ <div class="face-point" style="top: 45%; left: 30%;" data-feature="left-eye">
880
+ <div class="face-tooltip">Large, Round Eye</div>
881
+ </div>
882
+ <div class="face-point" style="top: 45%; left: 70%;" data-feature="right-eye">
883
+ <div class="face-tooltip">Large, Round Eye</div>
884
+ </div>
885
+ <div class="face-point" style="top: 60%; left: 50%;" data-feature="nose">
886
+ <div class="face-tooltip">Medium Nose</div>
887
+ </div>
888
+ <div class="face-point" style="top: 70%; left: 30%;" data-feature="left-cheek">
889
+ <div class="face-tooltip">Moderate Cheekbone</div>
890
+ </div>
891
+ <div class="face-point" style="top: 70%; left: 70%;" data-feature="right-cheek">
892
+ <div class="face-tooltip">Moderate Cheekbone</div>
893
+ </div>
894
+ </div>
895
+ </div>
896
+
897
+ <p class="feature-desc" style="text-align: center;">Click on the marked features to learn more about their significance in Samudrik Shastra.</p>
898
+
899
+ <button class="btn" id="explore-premium">Explore Premium Features</button>
900
+ </div>
901
+ </section>
902
+ </div>
903
+ </main>
904
+
905
+ <footer>
906
+ <div class="container">
907
+ <div class="footer-links">
908
+ <a href="#" class="footer-link" id="about-link">About</a>
909
+ <a href="#" class="footer-link" id="privacy-link">Privacy</a>
910
+ <a href="#" class="footer-link" id="terms-link">Terms</a>
911
+ <a href="#" class="footer-link" id="contact-link">Contact</a>
912
+ <a href="#" class="footer-link" id="faq-link">FAQ</a>
913
+ </div>
914
+
915
+ <div class="social-icons">
916
+ <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a>
917
+ <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a>
918
+ <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a>
919
+ <a href="#" class="social-icon"><i class="fab fa-youtube"></i></a>
920
+ </div>
921
+
922
+ <p>© 2023 Vedic Face Reader. All rights reserved.</p>
923
+ <p>This application is for entertainment purposes only.</p>
924
+ </div>
925
+ </footer>
926
+
927
+ <!-- About Modal -->
928
+ <div class="modal" id="about-modal">
929
+ <div class="modal-content">
930
+ <span class="close-modal">&times;</span>
931
+ <h2>About Vedic Face Reader</h2>
932
+ <p>Vedic Face Reader combines ancient Samudrik Shastra wisdom with modern technology to provide personality insights and future predictions based on facial features.</p>
933
+ <p>Samudrik Shastra is a 5,000-year-old Vedic science of body reading mentioned in texts like Brihat Samhita and Garuda Purana. It was traditionally used for:</p>
934
+ <ul style="margin: 15px 0 15px 20px;">
935
+ <li>Matchmaking and marriage compatibility</li>
936
+ <li>Predicting destiny and fortune lines</li>
937
+ <li>Understanding personality traits and potentials</li>
938
+ <li>Identifying leadership qualities and career aptitudes</li>
939
+ </ul>
940
+ <p>Our advanced AI analyzes 128 facial landmarks to provide accurate readings based on these ancient principles.</p>
941
+ <div class="disclaimer">
942
+ <i class="fas fa-exclamation-triangle"></i> These insights are cultural interpretations, not scientifically validated. Use for entertainment and self-reflection only.
943
+ </div>
944
+ </div>
945
+ </div>
946
+
947
+ <!-- Privacy Modal -->
948
+ <div class="modal" id="privacy-modal">
949
+ <div class="modal-content">
950
+ <span class="close-modal">&times;</span>
951
+ <h2>Privacy Policy</h2>
952
+ <p>Your privacy is important to us. Here's how we handle your data:</p>
953
+ <ul style="margin: 15px 0 15px 20px;">
954
+ <li>All face processing happens locally on your device - we don't store your photos on our servers</li>
955
+ <li>If you choose to create an account, we store only necessary profile information with strong encryption</li>
956
+ <li>We never sell or share your personal data with third parties</li>
957
+ <li>Analytics are collected anonymously to improve our service</li>
958
+ <li>You can delete your account and all associated data at any time</li>
959
+ </ul>
960
+ <p>Our full privacy policy is available upon request.</p>
961
+ </div>
962
+ </div>
963
+
964
+ <script>
965
+ document.addEventListener('DOMContentLoaded', function() {
966
+ // DOM Elements
967
+ const uploadArea = document.getElementById('upload-area');
968
+ const fileInput = document.getElementById('file-input');
969
+ const analyzeBtn = document.getElementById('analyze-btn');
970
+ const useSampleBtn = document.getElementById('use-sample');
971
+ const sampleResults = document.getElementById('sample-results');
972
+ const resultSection = document.getElementById('result-section');
973
+ const loadingIndicator = document.getElementById('loading-indicator');
974
+ const sampleSelectors = document.querySelectorAll('.sample-selector');
975
+ const languageSelect = document.getElementById('language-select');
976
+
977
+ // Tab elements
978
+ const resultTabs = document.querySelectorAll('.result-tab');
979
+ const tabContents = document.querySelectorAll('.result-content');
980
+
981
+ // Modal elements
982
+ const aboutLink = document.getElementById('about-link');
983
+ const privacyLink = document.getElementById('privacy-link');
984
+ const aboutModal = document.getElementById('about-modal');
985
+ const privacyModal = document.getElementById('privacy-modal');
986
+ const closeModals = document.querySelectorAll('.close-modal');
987
+
988
+ // Button navigators
989
+ const seeCareerBtn = document.getElementById('see-career');
990
+ const seeRelationshipsBtn = document.getElementById('see-relationships');
991
+ const seeFaceMapBtn = document.getElementById('see-face-map');
992
+ const explorePremiumBtn = document.getElementById('explore-premium');
993
+
994
+ // Upload area click handler
995
+ uploadArea.addEventListener('click', function() {
996
+ fileInput.click();
997
+ });
998
+
999
+ // File input change handler
1000
+ fileInput.addEventListener('change', function(e) {
1001
+ if (e.target.files.length > 0) {
1002
+ const file = e.target.files[0];
1003
+ const reader = new FileReader();
1004
+
1005
+ reader.onload = function(event) {
1006
+ uploadArea.innerHTML = `<i class="fas fa-check-circle"></i>
1007
+ <p class="upload-area-text">${file.name} (${formatFileSize(file.size)})</p>`;
1008
+ analyzeBtn.disabled = false;
1009
+ };
1010
+
1011
+ reader.readAsDataURL(file);
1012
+ }
1013
+ });
1014
+
1015
+ // Format file size
1016
+ function formatFileSize(bytes) {
1017
+ if (bytes < 1024) return bytes + ' bytes';
1018
+ else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB';
1019
+ else return (bytes / 1048576).toFixed(1) + ' MB';
1020
+ }
1021
+
1022
+ // Analyze button click handler - simulate analysis
1023
+ analyzeBtn.addEventListener('click', function() {
1024
+ loadingIndicator.style.display = 'block';
1025
+ uploadArea.style.display = 'none';
1026
+ analyzeBtn.style.display = 'none';
1027
+ useSampleBtn.style.display = 'none';
1028
+
1029
+ setTimeout(function() {
1030
+ loadingIndicator.style.display = 'none';
1031
+ resultSection.style.display = 'block';
1032
+
1033
+ // Set the uploaded image as result
1034
+ if (fileInput.files.length > 0) {
1035
+ const reader = new FileReader();
1036
+ reader.onload = function(e) {
1037
+ document.getElementById('result-avatar').src = e.target.result;
1038
+ document.getElementById('analyzed-face').src = e.target.result;
1039
+ };
1040
+ reader.readAsDataURL(fileInput.files[0]);
1041
+ }
1042
+
1043
+ // Scroll to results
1044
+ resultSection.scrollIntoView({ behavior: 'smooth' });
1045
+ }, 3000);
1046
+ });
1047
+
1048
+ // Use sample button - demo with sample 1
1049
+ useSampleBtn.addEventListener('click', function() {
1050
+ // Use sample 1 image
1051
+ document.getElementById('result-avatar').src = 'https://randomuser.me/api/portraits/women/43.jpg';
1052
+ document.getElementById('analyzed-face').src = 'https://randomuser.me/api/portraits/women/43.jpg';
1053
+
1054
+ loadingIndicator.style.display = 'block';
1055
+ uploadArea.style.display = 'none';
1056
+ analyzeBtn.style.display = 'none';
1057
+ useSampleBtn.style.display = 'none';
1058
+
1059
+ setTimeout(function() {
1060
+ loadingIndicator.style.display = 'none';
1061
+ resultSection.style.display = 'block';
1062
+ resultSection.scrollIntoView({ behavior: 'smooth' });
1063
+ }, 2000);
1064
+ });
1065
+
1066
+ // Sample selector click handlers
1067
+ sampleSelectors.forEach(selector => {
1068
+ selector.addEventListener('click', function(e) {
1069
+ e.preventDefault();
1070
+ const sample = this.getAttribute('data-sample');
1071
+ let imgSrc = '';
1072
+ let name = '';
1073
+ let feature = '';
1074
+
1075
+ switch(sample) {
1076
+ case '1':
1077
+ imgSrc = 'https://randomuser.me/api/portraits/women/43.jpg';
1078
+ name = 'Sample Analysis';
1079
+ feature = 'Round Face';
1080
+ break;
1081
+ case '2':
1082
+ imgSrc = 'https://randomuser.me/api/portraits/men/32.jpg';
1083
+ name = 'Sample Analysis';
1084
+ feature = 'Square Face';
1085
+ break;
1086
+ case '3':
1087
+ imgSrc = 'https://randomuser.me/api/portraits/women/68.jpg';
1088
+ name = 'Sample Analysis';
1089
+ feature = 'Oval Face';
1090
+ break;
1091
+ case '4':
1092
+ imgSrc = 'https://randomuser.me/api/portraits/men/75.jpg';
1093
+ name = 'Sample Analysis';
1094
+ feature = 'Rectangular Face';
1095
+ break;
1096
+ }
1097
+
1098
+ document.getElementById('result-avatar').src = imgSrc;
1099
+ document.getElementById('analyzed-face').src = imgSrc;
1100
+ document.getElementById('result-name').textContent = name + ' (' + feature + ')';
1101
+
1102
+ loadingIndicator.style.display = 'block';
1103
+ uploadArea.style.display = 'none';
1104
+ analyzeBtn.style.display = 'none';
1105
+ useSampleBtn.style.display = 'none';
1106
+
1107
+ setTimeout(function() {
1108
+ loadingIndicator.style.display = 'none';
1109
+ resultSection.style.display = 'block';
1110
+ resultSection.scrollIntoView({ behavior: 'smooth' });
1111
+ }, 2000);
1112
+ });
1113
+ });
1114
+
1115
+ // Tab switching
1116
+ resultTabs.forEach(tab => {
1117
+ tab.addEventListener('click', function() {
1118
+ const tabId = this.getAttribute('data-tab');
1119
+
1120
+ // Update active tab
1121
+ resultTabs.forEach(t => t.classList.remove('active'));
1122
+ this.classList.add('active');
1123
+
1124
+ // Show corresponding content
1125
+ tabContents.forEach(content => {
1126
+ content.classList.remove('active');
1127
+ if (content.id === tabId + '-tab') {
1128
+ content.classList.add('active');
1129
+ }
1130
+ });
1131
+ });
1132
+ });
1133
+
1134
+ // Button navigators
1135
+ seeCareerBtn.addEventListener('click', function() {
1136
+ document.querySelector('.result-tab[data-tab="career"]').click();
1137
+ });
1138
+
1139
+ seeRelationshipsBtn.addEventListener('click', function() {
1140
+ document.querySelector('.result-tab[data-tab="relationships"]').click();
1141
+ });
1142
+
1143
+ seeFaceMapBtn.addEventListener('click', function() {
1144
+ document.querySelector('.result-tab[data-tab="face-map"]').click();
1145
+ });
1146
+
1147
+ explorePremiumBtn.addEventListener('click', function() {
1148
+ alert('Premium features include detailed birth chart integration, advanced mole analysis, and personalized vedic remedies. Coming soon!');
1149
+ });
1150
+
1151
+ // Modal handling
1152
+ aboutLink.addEventListener('click', function(e) {
1153
+ e.preventDefault();
1154
+ aboutModal.style.display = 'flex';
1155
+ });
1156
+
1157
+ privacyLink.addEventListener('click', function(e) {
1158
+ e.preventDefault();
1159
+ privacyModal.style.display = 'flex';
1160
+ });
1161
+
1162
+ closeModals.forEach(close => {
1163
+ close.addEventListener('click', function() {
1164
+ aboutModal.style.display = 'none';
1165
+ privacyModal.style.display = 'none';
1166
+ });
1167
+ });
1168
+
1169
+ // Close modal when clicking outside content
1170
+ window.addEventListener('click', function(e) {
1171
+ if (e.target === aboutModal) {
1172
+ aboutModal.style.display = 'none';
1173
+ }
1174
+ if (e.target === privacyModal) {
1175
+ privacyModal.style.display = 'none';
1176
+ }
1177
+ });
1178
+
1179
+ // Language selector
1180
+ languageSelect.addEventListener('change', function() {
1181
+ alert('Language change functionality would be implemented in a production app.');
1182
+ });
1183
+
1184
+ // Drag and drop functionality
1185
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
1186
+ uploadArea.addEventListener(eventName, preventDefaults, false);
1187
+ });
1188
+
1189
+ function preventDefaults(e) {
1190
+ e.preventDefault();
1191
+ e.stopPropagation();
1192
+ }
1193
+
1194
+ ['dragenter', 'dragover'].forEach(eventName => {
1195
+ uploadArea.addEventListener(eventName, highlight, false);
1196
+ });
1197
+
1198
+ ['dragleave', 'drop'].forEach(eventName => {
1199
+ uploadArea.addEventListener(eventName, unhighlight, false);
1200
+ });
1201
+
1202
+ function highlight() {
1203
+ uploadArea.classList.add('highlight');
1204
+ }
1205
+
1206
+ function unhighlight() {
1207
+ uploadArea.classList.remove('highlight');
1208
+ }
1209
+
1210
+ uploadArea.addEventListener('drop', handleDrop, false);
1211
+
1212
+ function handleDrop(e) {
1213
+ const dt = e.dataTransfer;
1214
+ const files = dt.files;
1215
+
1216
+ if (files.length > 0) {
1217
+ fileInput.files = files;
1218
+
1219
+ const file = files[0];
1220
+ const reader = new FileReader();
1221
+
1222
+ reader.onload = function(event) {
1223
+ uploadArea.innerHTML = `<i class="fas fa-check-circle"></i>
1224
+ <p class="upload-area-text">${file.name} (${formatFileSize(file.size)})</p>`;
1225
+ analyzeBtn.disabled = false;
1226
+ };
1227
+
1228
+ reader.readAsDataURL(file);
1229
+ }
1230
+ }
1231
+
1232
+ // Tooltip hover functionality
1233
+ const facePoints = document.querySelectorAll('.face-point');
1234
+ facePoints.forEach(point => {
1235
+ point.addEventListener('mouseenter', function() {
1236
+ const tooltip = this.querySelector('.face-tooltip');
1237
+ tooltip.style.display = 'block';
1238
+ });
1239
+
1240
+ point.addEventListener('mouseleave', function() {
1241
+ const tooltip = this.querySelector('.face-tooltip');
1242
+ tooltip.style.display = 'none';
1243
+ });
1244
+ });
1245
+ });
1246
+ </script>
1247
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <a href="https://enzostvs-deepsite.hf.space" style="color: #fff;" target="_blank" >DeepSite</a> <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;"></p></body>
1248
+ </html>