Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Vedic Face Reader - Samudrik Shastra Analysis</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| :root { | |
| --primary: #8e44ad; | |
| --secondary: #f39c12; | |
| --dark: #2c3e50; | |
| --light: #ecf0f1; | |
| --success: #27ae60; | |
| --warning: #e74c3c; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| } | |
| body { | |
| background-color: #f5f5f5; | |
| color: #333; | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| max-width: 100%; | |
| padding: 0 15px; | |
| margin: 0 auto; | |
| } | |
| header { | |
| background: linear-gradient(135deg, var(--primary), #6c5ce7); | |
| color: white; | |
| padding: 1rem 0; | |
| text-align: center; | |
| position: relative; | |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); | |
| } | |
| .header-content { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .logo { | |
| width: 80px; | |
| height: 80px; | |
| background-color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 10px; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | |
| } | |
| .logo i { | |
| color: var(--primary); | |
| font-size: 2.5rem; | |
| } | |
| h1 { | |
| font-size: 1.8rem; | |
| margin-bottom: 0.5rem; | |
| font-weight: 600; | |
| } | |
| .tagline { | |
| font-size: 0.9rem; | |
| opacity: 0.9; | |
| font-style: italic; | |
| } | |
| .language-selector { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| } | |
| .language-selector select { | |
| background-color: rgba(255, 255, 255, 0.2); | |
| color: white; | |
| border: 1px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 20px; | |
| padding: 3px 10px; | |
| font-size: 0.8rem; | |
| } | |
| .language-selector select option { | |
| color: var(--dark); | |
| } | |
| main { | |
| padding: 20px 0; | |
| } | |
| .intro-section { | |
| text-align: center; | |
| margin-bottom: 30px; | |
| padding: 0 15px; | |
| } | |
| .intro-text { | |
| margin-bottom: 20px; | |
| font-size: 1rem; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, 1fr); | |
| gap: 15px; | |
| margin-bottom: 25px; | |
| } | |
| .feature-card { | |
| background-color: white; | |
| border-radius: 12px; | |
| padding: 15px; | |
| text-align: center; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| } | |
| .feature-icon { | |
| width: 50px; | |
| height: 50px; | |
| background: linear-gradient(135deg, var(--secondary), #e67e22); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin: 0 auto 10px; | |
| color: white; | |
| font-size: 1.5rem; | |
| } | |
| .feature-title { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| color: var(--dark); | |
| } | |
| .feature-desc { | |
| font-size: 0.8rem; | |
| color: #666; | |
| } | |
| .upload-section { | |
| background-color: white; | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin: 0 15px 30px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| text-align: center; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .upload-section::before { | |
| content: ""; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 5px; | |
| background: linear-gradient(90deg, var(--primary), var(--secondary)); | |
| } | |
| .upload-title { | |
| font-size: 1.2rem; | |
| margin-bottom: 15px; | |
| color: var(--dark); | |
| font-weight: 600; | |
| } | |
| .upload-instructions { | |
| font-size: 0.85rem; | |
| color: #666; | |
| margin-bottom: 20px; | |
| } | |
| .upload-area { | |
| border: 2px dashed #ccc; | |
| border-radius: 10px; | |
| padding: 30px; | |
| margin-bottom: 15px; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| position: relative; | |
| } | |
| .upload-area:hover { | |
| border-color: var(--primary); | |
| background-color: rgba(142, 68, 173, 0.05); | |
| } | |
| .upload-area i { | |
| font-size: 2.5rem; | |
| color: var(--primary); | |
| margin-bottom: 10px; | |
| } | |
| .upload-area-text { | |
| font-size: 0.9rem; | |
| color: #666; | |
| } | |
| .btn { | |
| display: inline-block; | |
| padding: 12px 25px; | |
| background: linear-gradient(135deg, var(--primary), #6c5ce7); | |
| color: white; | |
| border: none; | |
| border-radius: 30px; | |
| font-size: 1rem; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 10px rgba(142, 68, 173, 0.3); | |
| margin: 5px; | |
| } | |
| .btn:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 6px 15px rgba(142, 68, 173, 0.4); | |
| } | |
| .btn-outline { | |
| background: transparent; | |
| border: 2px solid var(--primary); | |
| color: var(--primary); | |
| box-shadow: none; | |
| } | |
| .btn-outline:hover { | |
| background: rgba(142, 68, 173, 0.1); | |
| } | |
| .result-section { | |
| display: none; | |
| background-color: white; | |
| border-radius: 15px; | |
| padding: 20px; | |
| margin: 0 15px 30px; | |
| box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .result-header { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .result-avatar { | |
| width: 80px; | |
| height: 80px; | |
| border-radius: 50%; | |
| object-fit: cover; | |
| border: 3px solid var(--secondary); | |
| margin-right: 15px; | |
| } | |
| .result-title { | |
| flex: 1; | |
| } | |
| .result-name { | |
| font-size: 1.2rem; | |
| font-weight: 600; | |
| margin-bottom: 5px; | |
| color: var(--dark); | |
| } | |
| .result-confidence { | |
| display: inline-block; | |
| background-color: rgba(39, 174, 96, 0.2); | |
| color: var(--success); | |
| padding: 3px 10px; | |
| border-radius: 20px; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| } | |
| .result-tabs { | |
| display: flex; | |
| margin-bottom: 20px; | |
| border-bottom: 1px solid #eee; | |
| } | |
| .result-tab { | |
| padding: 10px 15px; | |
| font-size: 0.9rem; | |
| font-weight: 500; | |
| color: #666; | |
| cursor: pointer; | |
| border-bottom: 2px solid transparent; | |
| transition: all 0.3s ease; | |
| } | |
| .result-tab.active { | |
| color: var(--primary); | |
| border-bottom-color: var(--primary); | |
| } | |
| .result-content { | |
| display: none; | |
| } | |
| .result-content.active { | |
| display: block; | |
| } | |
| .feature-analysis { | |
| margin-bottom: 20px; | |
| } | |
| .feature-title { | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--dark); | |
| margin-bottom: 10px; | |
| display: flex; | |
| align-items: center; | |
| } | |
| .feature-title i { | |
| margin-right: 8px; | |
| color: var(--secondary); | |
| } | |
| .feature-desc { | |
| font-size: 0.9rem; | |
| color: #555; | |
| margin-bottom: 5px; | |
| } | |
| .feature-match { | |
| display: flex; | |
| align-items: center; | |
| margin-top: 10px; | |
| } | |
| .match-bar { | |
| flex: 1; | |
| height: 8px; | |
| background-color: #eee; | |
| border-radius: 4px; | |
| margin-right: 10px; | |
| overflow: hidden; | |
| } | |
| .match-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--secondary), var(--primary)); | |
| border-radius: 4px; | |
| } | |
| .match-percent { | |
| font-size: 0.85rem; | |
| color: var(--success); | |
| font-weight: 500; | |
| } | |
| .face-image-container { | |
| position: relative; | |
| margin: 20px 0; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| background-color: #f9f9f9; | |
| } | |
| .face-image { | |
| width: 100%; | |
| display: block; | |
| } | |
| .face-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .face-point { | |
| position: absolute; | |
| width: 18px; | |
| height: 18px; | |
| background-color: var(--warning); | |
| border-radius: 50%; | |
| transform: translate(-50%, -50%); | |
| } | |
| .face-point:hover .face-tooltip { | |
| display: block; | |
| } | |
| .face-tooltip { | |
| display: none; | |
| position: absolute; | |
| bottom: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| background-color: white; | |
| padding: 8px 12px; | |
| border-radius: 8px; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); | |
| font-size: 0.8rem; | |
| white-space: nowrap; | |
| z-index: 10; | |
| margin-bottom: 5px; | |
| } | |
| .face-tooltip::after { | |
| content: ""; | |
| position: absolute; | |
| top: 100%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| border-width: 5px; | |
| border-style: solid; | |
| border-color: white transparent transparent transparent; | |
| } | |
| .modal { | |
| display: none; | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background-color: rgba(0, 0, 0, 0.7); | |
| z-index: 100; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .modal-content { | |
| background-color: white; | |
| border-radius: 15px; | |
| width: 90%; | |
| max-width: 500px; | |
| max-height: 90vh; | |
| overflow-y: auto; | |
| padding: 25px; | |
| position: relative; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| .close-modal { | |
| position: absolute; | |
| top: 15px; | |
| right: 15px; | |
| font-size: 1.5rem; | |
| color: #666; | |
| cursor: pointer; | |
| } | |
| .disclaimer { | |
| background-color: rgba(231, 76, 60, 0.1); | |
| color: var(--warning); | |
| padding: 15px; | |
| border-radius: 10px; | |
| margin: 20px 0; | |
| font-size: 0.85rem; | |
| } | |
| footer { | |
| background-color: var(--dark); | |
| color: white; | |
| padding: 25px 15px; | |
| text-align: center; | |
| font-size: 0.85rem; | |
| } | |
| .footer-links { | |
| display: flex; | |
| justify-content: center; | |
| margin-bottom: 15px; | |
| } | |
| .footer-link { | |
| color: white; | |
| margin: 0 10px; | |
| text-decoration: none; | |
| opacity: 0.8; | |
| transition: opacity 0.3s ease; | |
| } | |
| .footer-link:hover { | |
| opacity: 1; | |
| } | |
| .social-icons { | |
| margin: 20px 0; | |
| } | |
| .social-icon { | |
| display: inline-block; | |
| width: 40px; | |
| height: 40px; | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-radius: 50%; | |
| margin: 0 5px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| font-size: 1.2rem; | |
| transition: all 0.3s ease; | |
| } | |
| .social-icon:hover { | |
| background-color: var(--primary); | |
| transform: translateY(-3px); | |
| } | |
| @media (min-width: 768px) { | |
| .container { | |
| max-width: 750px; | |
| } | |
| .features-grid { | |
| grid-template-columns: repeat(4, 1fr); | |
| } | |
| .upload-section { | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| .result-section { | |
| margin-left: 0; | |
| margin-right: 0; | |
| } | |
| } | |
| /* Animation classes */ | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-10px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { transform: scale(1); } | |
| 50% { transform: scale(1.05); } | |
| 100% { transform: scale(1); } | |
| } | |
| .pulse { | |
| animation: pulse 2s ease-in-out infinite; | |
| } | |
| /* Sample results for demonstration */ | |
| .sample-results { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| margin: 30px 0; | |
| gap: 15px; | |
| } | |
| .sample-card { | |
| width: 150px; | |
| background-color: white; | |
| border-radius: 10px; | |
| overflow: hidden; | |
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |
| transition: all 0.3s ease; | |
| text-decoration: none; | |
| color: inherit; | |
| } | |
| .sample-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); | |
| } | |
| .sample-image { | |
| width: 100%; | |
| height: 120px; | |
| object-fit: cover; | |
| } | |
| .sample-info { | |
| padding: 10px; | |
| } | |
| .sample-name { | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| margin-bottom: 3px; | |
| color: var(--dark); | |
| } | |
| .sample-feature { | |
| font-size: 0.8rem; | |
| color: #666; | |
| } | |
| .loading { | |
| display: none; | |
| text-align: center; | |
| padding: 30px; | |
| } | |
| .loading-spinner { | |
| width: 50px; | |
| height: 50px; | |
| border: 5px solid rgba(142, 68, 173, 0.2); | |
| border-top-color: var(--primary); | |
| border-radius: 50%; | |
| animation: spin 1s linear infinite; | |
| margin: 0 auto 20px; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| .loading-text { | |
| font-size: 1rem; | |
| color: var(--dark); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header> | |
| <div class="container"> | |
| <div class="header-content"> | |
| <div class="language-selector"> | |
| <select id="language-select"> | |
| <option value="en">English</option> | |
| <option value="hi">हिंदी</option> | |
| <option value="ta">தமிழ்</option> | |
| <option value="te">తెలుగు</option> | |
| <option value="bn">বাংলা</option> | |
| </select> | |
| </div> | |
| <div class="logo floating"> | |
| <i class="fas fa-eye"></i> | |
| </div> | |
| <h1>Vedic Face Reader</h1> | |
| <p class="tagline">Discover Yourself Through Ancient Eyes</p> | |
| </div> | |
| </div> | |
| </header> | |
| <main> | |
| <div class="container"> | |
| <section class="intro-section"> | |
| <p class="intro-text"> | |
| Unlock the secrets of your face with ancient Samudrik Shastra wisdom. Our AI-powered analysis reveals | |
| your personality traits, future possibilities, and hidden potentials based on 5,000-year-old Vedic knowledge. | |
| </p> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-user-tie"></i> | |
| </div> | |
| <h3 class="feature-title">Career Guidance</h3> | |
| <p class="feature-desc">Discover your ideal professions based on facial features</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-heart"></i> | |
| </div> | |
| <h3 class="feature-title">Relationship Insights</h3> | |
| <p class="feature-desc">Understand compatibility with partners based on facial analysis</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <h3 class="feature-title">Personality Traits</h3> | |
| <p class="feature-desc">Learn about your character strengths and weaknesses</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-gem"></i> | |
| </div> | |
| <h3 class="feature-title">Fortune Lines</h3> | |
| <p class="feature-desc">Identify Bhagya Rekha and other destiny lines on your forehead</p> | |
| </div> | |
| </div> | |
| <p><strong>25,000+</strong> faces analyzed with <strong>92%</strong> user satisfaction</p> | |
| </section> | |
| <section class="upload-section pulse"> | |
| <h2 class="upload-title">Upload Your Face Photo</h2> | |
| <p class="upload-instructions">For best results, use a clear front-facing photo (minimum 720p resolution) with neutral expression and good lighting.</p> | |
| <div class="upload-area" id="upload-area"> | |
| <i class="fas fa-cloud-upload-alt"></i> | |
| <p class="upload-area-text">Tap to upload photo or drag & drop here</p> | |
| </div> | |
| <input type="file" id="file-input" accept="image/*" style="display: none;"> | |
| <div class="loading" id="loading-indicator"> | |
| <div class="loading-spinner"></div> | |
| <p class="loading-text">Analyzing your facial features with ancient wisdom...</p> | |
| </div> | |
| <button class="btn" id="analyze-btn" disabled>Analyze My Face</button> | |
| <button class="btn btn-outline" id="use-sample">Try Sample Instead</button> | |
| <div class="sample-results" id="sample-results"> | |
| <a href="#" class="sample-card sample-selector" data-sample="1"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sample 1" class="sample-image"> | |
| <div class="sample-info"> | |
| <h4 class="sample-name">Sample 1</h4> | |
| <p class="sample-feature">Round face</p> | |
| </div> | |
| </a> | |
| <a href="#" class="sample-card sample-selector" data-sample="2"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Sample 2" class="sample-image"> | |
| <div class="sample-info"> | |
| <h4 class="sample-name">Sample 2</h4> | |
| <p class="sample-feature">Square face</p> | |
| </div> | |
| </a> | |
| <a href="#" class="sample-card sample-selector" data-sample="3"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Sample 3" class="sample-image"> | |
| <div class="sample-info"> | |
| <h4 class="sample-name">Sample 3</h4> | |
| <p class="sample-feature">Oval face</p> | |
| </div> | |
| </a> | |
| <a href="#" class="sample-card sample-selector" data-sample="4"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Sample 4" class="sample-image"> | |
| <div class="sample-info"> | |
| <h4 class="sample-name">Sample 4</h4> | |
| <p class="sample-feature">Rectangular face</p> | |
| </div> | |
| </a> | |
| </div> | |
| </section> | |
| <section class="result-section" id="result-section"> | |
| <div class="result-header"> | |
| <img id="result-avatar" src="" alt="User photo" class="result-avatar"> | |
| <div class="result-title"> | |
| <h2 id="result-name" class="result-name">Your Vedic Analysis</h2> | |
| <span class="result-confidence">87% Confidence Match</span> | |
| </div> | |
| </div> | |
| <div class="result-tabs"> | |
| <div class="result-tab active" data-tab="personality">Personality</div> | |
| <div class="result-tab" data-tab="career">Career</div> | |
| <div class="result-tab" data-tab="relationships">Relationships</div> | |
| <div class="result-tab" data-tab="face-map">Face Map</div> | |
| </div> | |
| <div class="result-content active" id="personality-tab"> | |
| <div class="feature-analysis"> | |
| <h3 class="feature-title"><i class="fas fa-shapes"></i> Face Shape</h3> | |
| <p class="feature-desc">Your <strong>oval face shape</strong> indicates a sensitive, intuitive and artistic personality.</p> | |
| <div class="feature-match"> | |
| <div class="match-bar"><div class="match-fill" style="width: 92%;"></div></div> | |
| <div class="match-percent">92% match</div> | |
| </div> | |
| </div> | |
| <div class="feature-analysis"> | |
| <h3 class="feature-title"><i class="fas fa-brain"></i> Forehead</h3> | |
| <p class="feature-desc">Your <strong>well-developed forehead</strong> with faint Bhagya Rekha shows intelligence and potential for good fortune.</p> | |
| <div class="feature-match"> | |
| <div class="match-bar"><div class="match-fill" style="width: 87%;"></div></div> | |
| <div class="match-percent">87% match</div> | |
| </div> | |
| </div> | |
| <div class="feature-analysis"> | |
| <h3 class="feature-title"><i class="fas fa-eye"></i> Eyes</h3> | |
| <p class="feature-desc">Your <strong>large, round eyes</strong> indicate warmth, emotional depth and caring personality.</p> | |
| <div class="feature-match"> | |
| <div class="match-bar"><div class="match-fill" style="width: 95%;"></div></div> | |
| <div class="match-percent">95% match</div> | |
| </div> | |
| </div> | |
| <div class="feature-analysis"> | |
| <h3 class="feature-title"><i class="fas fa-bullseye"></i> Nose</h3> | |
| <p class="feature-desc">Your <strong>medium-sized nose</strong> suggests balanced ambition and practical approach to life.</p> | |
| <div class="feature-match"> | |
| <div class="match-bar"><div class="match-fill" style="width: 78%;"></div></div> | |
| <div class="match-percent">78% match</div> | |
| </div> | |
| </div> | |
| <div class="feature-analysis"> | |
| <h3 class="feature-title"><i class="fas fa-grin"></i> Cheeks</h3> | |
| <p class="feature-desc">Your <strong>moderate cheekbones</strong> show leadership potential without being autocratic.</p> | |
| <div class="feature-match"> | |
| <div class="match-bar"><div class="match-fill" style="width: 83%;"></div></div> | |
| <div class="match-percent">83% match</div> | |
| </div> | |
| </div> | |
| <div class="disclaimer"> | |
| <i class="fas fa-info-circle"></i> These insights are based on ancient Samudrik Shastra principles for entertainment and self-reflection purposes only. | |
| </div> | |
| <button class="btn" id="see-career">See Career Predictions</button> | |
| </div> | |
| <div class="result-content" id="career-tab"> | |
| <div class="feature-analysis"> | |
| <h3 class="feature-title"><i class="fas fa-chart-line"></i> Career Strengths</h3> | |
| <p class="feature-desc">Your facial features suggest you would excel in creative and people-oriented professions.</p> | |
| </div> | |
| <div class="feature-analysis"> | |
| <h3 class="feature-title"><i class="fas fa-briefcase"></i> Recommended Fields</h3> | |
| <p class="feature-desc"> | |
| - Arts and creative industries<br> | |
| - Counseling and psychology<br> | |
| - Teaching and education<br> | |
| - Healthcare professions<br> | |
| - Human resources management | |
| </p> | |
| </div> | |
| <div class="feature-analysis"> | |
| <h3 class="feature-title"><i class="fas fa-calendar-alt"></i> Future Prospects</h3> | |
| <p class="feature-desc">Your Bhagya Rekha indicates upcoming opportunities between ages 32-36. Stay open to unexpected career changes during this period.</p> | |
| </div> | |
| <button class="btn" id="see-relationships">See Relationship Insights</button> | |
| </div> | |
| <div class="result-content" id="relationships-tab"> | |
| <div class="feature-analysis"> | |
| <h3 class="feature-title"><i class="fas fa-heart"></i> Romantic Compatibility</h3> | |
| <p class="feature-desc">You are most compatible with partners who have strong, angular facial features to balance your softness.</p> | |
| </div> | |
| <div class="feature-analysis"> | |
| <h3 class="feature-title"><i class="fas fa-users"></i> Friendship Style</h3> | |
| <p class="feature-desc">Your warm eyes indicate deep loyalty in friendships. You tend to maintain long-term connections.</p> | |
| </div> | |
| <div class="feature-analysis"> | |
| <h3 class="feature-title"><i class="fas fa-hands-helping"></i> Family Relations</h3> | |
| <p class="feature-desc">Your facial symmetry suggests good family karma. You play the role of peacemaker in family conflicts.</p> | |
| </div> | |
| <button class="btn" id="see-face-map">View Detailed Face Map</button> | |
| </div> | |
| <div class="result-content" id="face-map-tab"> | |
| <div class="face-image-container"> | |
| <img id="analyzed-face" src="" alt="Analyzed face" class="face-image"> | |
| <div class="face-overlay"> | |
| <div class="face-point" style="top: 20%; left: 50%;" data-feature="forehead-line"> | |
| <div class="face-tooltip">Bhagya Rekha (Fortune Line)</div> | |
| </div> | |
| <div class="face-point" style="top: 45%; left: 30%;" data-feature="left-eye"> | |
| <div class="face-tooltip">Large, Round Eye</div> | |
| </div> | |
| <div class="face-point" style="top: 45%; left: 70%;" data-feature="right-eye"> | |
| <div class="face-tooltip">Large, Round Eye</div> | |
| </div> | |
| <div class="face-point" style="top: 60%; left: 50%;" data-feature="nose"> | |
| <div class="face-tooltip">Medium Nose</div> | |
| </div> | |
| <div class="face-point" style="top: 70%; left: 30%;" data-feature="left-cheek"> | |
| <div class="face-tooltip">Moderate Cheekbone</div> | |
| </div> | |
| <div class="face-point" style="top: 70%; left: 70%;" data-feature="right-cheek"> | |
| <div class="face-tooltip">Moderate Cheekbone</div> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="feature-desc" style="text-align: center;">Click on the marked features to learn more about their significance in Samudrik Shastra.</p> | |
| <button class="btn" id="explore-premium">Explore Premium Features</button> | |
| </div> | |
| </section> | |
| </div> | |
| </main> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-links"> | |
| <a href="#" class="footer-link" id="about-link">About</a> | |
| <a href="#" class="footer-link" id="privacy-link">Privacy</a> | |
| <a href="#" class="footer-link" id="terms-link">Terms</a> | |
| <a href="#" class="footer-link" id="contact-link">Contact</a> | |
| <a href="#" class="footer-link" id="faq-link">FAQ</a> | |
| </div> | |
| <div class="social-icons"> | |
| <a href="#" class="social-icon"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="social-icon"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| <p>© 2023 Vedic Face Reader. All rights reserved.</p> | |
| <p>This application is for entertainment purposes only.</p> | |
| </div> | |
| </footer> | |
| <!-- About Modal --> | |
| <div class="modal" id="about-modal"> | |
| <div class="modal-content"> | |
| <span class="close-modal">×</span> | |
| <h2>About Vedic Face Reader</h2> | |
| <p>Vedic Face Reader combines ancient Samudrik Shastra wisdom with modern technology to provide personality insights and future predictions based on facial features.</p> | |
| <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> | |
| <ul style="margin: 15px 0 15px 20px;"> | |
| <li>Matchmaking and marriage compatibility</li> | |
| <li>Predicting destiny and fortune lines</li> | |
| <li>Understanding personality traits and potentials</li> | |
| <li>Identifying leadership qualities and career aptitudes</li> | |
| </ul> | |
| <p>Our advanced AI analyzes 128 facial landmarks to provide accurate readings based on these ancient principles.</p> | |
| <div class="disclaimer"> | |
| <i class="fas fa-exclamation-triangle"></i> These insights are cultural interpretations, not scientifically validated. Use for entertainment and self-reflection only. | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Privacy Modal --> | |
| <div class="modal" id="privacy-modal"> | |
| <div class="modal-content"> | |
| <span class="close-modal">×</span> | |
| <h2>Privacy Policy</h2> | |
| <p>Your privacy is important to us. Here's how we handle your data:</p> | |
| <ul style="margin: 15px 0 15px 20px;"> | |
| <li>All face processing happens locally on your device - we don't store your photos on our servers</li> | |
| <li>If you choose to create an account, we store only necessary profile information with strong encryption</li> | |
| <li>We never sell or share your personal data with third parties</li> | |
| <li>Analytics are collected anonymously to improve our service</li> | |
| <li>You can delete your account and all associated data at any time</li> | |
| </ul> | |
| <p>Our full privacy policy is available upon request.</p> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // DOM Elements | |
| const uploadArea = document.getElementById('upload-area'); | |
| const fileInput = document.getElementById('file-input'); | |
| const analyzeBtn = document.getElementById('analyze-btn'); | |
| const useSampleBtn = document.getElementById('use-sample'); | |
| const sampleResults = document.getElementById('sample-results'); | |
| const resultSection = document.getElementById('result-section'); | |
| const loadingIndicator = document.getElementById('loading-indicator'); | |
| const sampleSelectors = document.querySelectorAll('.sample-selector'); | |
| const languageSelect = document.getElementById('language-select'); | |
| // Tab elements | |
| const resultTabs = document.querySelectorAll('.result-tab'); | |
| const tabContents = document.querySelectorAll('.result-content'); | |
| // Modal elements | |
| const aboutLink = document.getElementById('about-link'); | |
| const privacyLink = document.getElementById('privacy-link'); | |
| const aboutModal = document.getElementById('about-modal'); | |
| const privacyModal = document.getElementById('privacy-modal'); | |
| const closeModals = document.querySelectorAll('.close-modal'); | |
| // Button navigators | |
| const seeCareerBtn = document.getElementById('see-career'); | |
| const seeRelationshipsBtn = document.getElementById('see-relationships'); | |
| const seeFaceMapBtn = document.getElementById('see-face-map'); | |
| const explorePremiumBtn = document.getElementById('explore-premium'); | |
| // Upload area click handler | |
| uploadArea.addEventListener('click', function() { | |
| fileInput.click(); | |
| }); | |
| // File input change handler | |
| fileInput.addEventListener('change', function(e) { | |
| if (e.target.files.length > 0) { | |
| const file = e.target.files[0]; | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| uploadArea.innerHTML = `<i class="fas fa-check-circle"></i> | |
| <p class="upload-area-text">${file.name} (${formatFileSize(file.size)})</p>`; | |
| analyzeBtn.disabled = false; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| }); | |
| // Format file size | |
| function formatFileSize(bytes) { | |
| if (bytes < 1024) return bytes + ' bytes'; | |
| else if (bytes < 1048576) return (bytes / 1024).toFixed(1) + ' KB'; | |
| else return (bytes / 1048576).toFixed(1) + ' MB'; | |
| } | |
| // Analyze button click handler - simulate analysis | |
| analyzeBtn.addEventListener('click', function() { | |
| loadingIndicator.style.display = 'block'; | |
| uploadArea.style.display = 'none'; | |
| analyzeBtn.style.display = 'none'; | |
| useSampleBtn.style.display = 'none'; | |
| setTimeout(function() { | |
| loadingIndicator.style.display = 'none'; | |
| resultSection.style.display = 'block'; | |
| // Set the uploaded image as result | |
| if (fileInput.files.length > 0) { | |
| const reader = new FileReader(); | |
| reader.onload = function(e) { | |
| document.getElementById('result-avatar').src = e.target.result; | |
| document.getElementById('analyzed-face').src = e.target.result; | |
| }; | |
| reader.readAsDataURL(fileInput.files[0]); | |
| } | |
| // Scroll to results | |
| resultSection.scrollIntoView({ behavior: 'smooth' }); | |
| }, 3000); | |
| }); | |
| // Use sample button - demo with sample 1 | |
| useSampleBtn.addEventListener('click', function() { | |
| // Use sample 1 image | |
| document.getElementById('result-avatar').src = 'https://randomuser.me/api/portraits/women/43.jpg'; | |
| document.getElementById('analyzed-face').src = 'https://randomuser.me/api/portraits/women/43.jpg'; | |
| loadingIndicator.style.display = 'block'; | |
| uploadArea.style.display = 'none'; | |
| analyzeBtn.style.display = 'none'; | |
| useSampleBtn.style.display = 'none'; | |
| setTimeout(function() { | |
| loadingIndicator.style.display = 'none'; | |
| resultSection.style.display = 'block'; | |
| resultSection.scrollIntoView({ behavior: 'smooth' }); | |
| }, 2000); | |
| }); | |
| // Sample selector click handlers | |
| sampleSelectors.forEach(selector => { | |
| selector.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const sample = this.getAttribute('data-sample'); | |
| let imgSrc = ''; | |
| let name = ''; | |
| let feature = ''; | |
| switch(sample) { | |
| case '1': | |
| imgSrc = 'https://randomuser.me/api/portraits/women/43.jpg'; | |
| name = 'Sample Analysis'; | |
| feature = 'Round Face'; | |
| break; | |
| case '2': | |
| imgSrc = 'https://randomuser.me/api/portraits/men/32.jpg'; | |
| name = 'Sample Analysis'; | |
| feature = 'Square Face'; | |
| break; | |
| case '3': | |
| imgSrc = 'https://randomuser.me/api/portraits/women/68.jpg'; | |
| name = 'Sample Analysis'; | |
| feature = 'Oval Face'; | |
| break; | |
| case '4': | |
| imgSrc = 'https://randomuser.me/api/portraits/men/75.jpg'; | |
| name = 'Sample Analysis'; | |
| feature = 'Rectangular Face'; | |
| break; | |
| } | |
| document.getElementById('result-avatar').src = imgSrc; | |
| document.getElementById('analyzed-face').src = imgSrc; | |
| document.getElementById('result-name').textContent = name + ' (' + feature + ')'; | |
| loadingIndicator.style.display = 'block'; | |
| uploadArea.style.display = 'none'; | |
| analyzeBtn.style.display = 'none'; | |
| useSampleBtn.style.display = 'none'; | |
| setTimeout(function() { | |
| loadingIndicator.style.display = 'none'; | |
| resultSection.style.display = 'block'; | |
| resultSection.scrollIntoView({ behavior: 'smooth' }); | |
| }, 2000); | |
| }); | |
| }); | |
| // Tab switching | |
| resultTabs.forEach(tab => { | |
| tab.addEventListener('click', function() { | |
| const tabId = this.getAttribute('data-tab'); | |
| // Update active tab | |
| resultTabs.forEach(t => t.classList.remove('active')); | |
| this.classList.add('active'); | |
| // Show corresponding content | |
| tabContents.forEach(content => { | |
| content.classList.remove('active'); | |
| if (content.id === tabId + '-tab') { | |
| content.classList.add('active'); | |
| } | |
| }); | |
| }); | |
| }); | |
| // Button navigators | |
| seeCareerBtn.addEventListener('click', function() { | |
| document.querySelector('.result-tab[data-tab="career"]').click(); | |
| }); | |
| seeRelationshipsBtn.addEventListener('click', function() { | |
| document.querySelector('.result-tab[data-tab="relationships"]').click(); | |
| }); | |
| seeFaceMapBtn.addEventListener('click', function() { | |
| document.querySelector('.result-tab[data-tab="face-map"]').click(); | |
| }); | |
| explorePremiumBtn.addEventListener('click', function() { | |
| alert('Premium features include detailed birth chart integration, advanced mole analysis, and personalized vedic remedies. Coming soon!'); | |
| }); | |
| // Modal handling | |
| aboutLink.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| aboutModal.style.display = 'flex'; | |
| }); | |
| privacyLink.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| privacyModal.style.display = 'flex'; | |
| }); | |
| closeModals.forEach(close => { | |
| close.addEventListener('click', function() { | |
| aboutModal.style.display = 'none'; | |
| privacyModal.style.display = 'none'; | |
| }); | |
| }); | |
| // Close modal when clicking outside content | |
| window.addEventListener('click', function(e) { | |
| if (e.target === aboutModal) { | |
| aboutModal.style.display = 'none'; | |
| } | |
| if (e.target === privacyModal) { | |
| privacyModal.style.display = 'none'; | |
| } | |
| }); | |
| // Language selector | |
| languageSelect.addEventListener('change', function() { | |
| alert('Language change functionality would be implemented in a production app.'); | |
| }); | |
| // Drag and drop functionality | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| uploadArea.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| uploadArea.classList.add('highlight'); | |
| } | |
| function unhighlight() { | |
| uploadArea.classList.remove('highlight'); | |
| } | |
| uploadArea.addEventListener('drop', handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| if (files.length > 0) { | |
| fileInput.files = files; | |
| const file = files[0]; | |
| const reader = new FileReader(); | |
| reader.onload = function(event) { | |
| uploadArea.innerHTML = `<i class="fas fa-check-circle"></i> | |
| <p class="upload-area-text">${file.name} (${formatFileSize(file.size)})</p>`; | |
| analyzeBtn.disabled = false; | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| // Tooltip hover functionality | |
| const facePoints = document.querySelectorAll('.face-point'); | |
| facePoints.forEach(point => { | |
| point.addEventListener('mouseenter', function() { | |
| const tooltip = this.querySelector('.face-tooltip'); | |
| tooltip.style.display = 'block'; | |
| }); | |
| point.addEventListener('mouseleave', function() { | |
| const tooltip = this.querySelector('.face-tooltip'); | |
| tooltip.style.display = 'none'; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <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> | |
| </html> |