Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <title>HealthHub – Your Health, Your Way</title> | |
| <!-- Raleway font --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --scaffold-bg: #EDECF4; | |
| --deep-purple: #432C81; | |
| --light-purple: #a78bfa; | |
| --very-light-purple: #ddd6fe; | |
| --background-purple: #F5F3FF; | |
| --text-purple: #6d28d9; | |
| --shadow: 0 4px 24px rgba(109,40,217,0.07); | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: 'Raleway', sans-serif; | |
| background: var(--scaffold-bg); | |
| color: var(--deep-purple); | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| .animated-bg { | |
| position: fixed; | |
| top: 0; left: 0; | |
| width: 100vw; height: 100vh; | |
| z-index: 0; | |
| pointer-events: none; | |
| } | |
| .circle { | |
| position: absolute; | |
| border-radius: 50%; | |
| opacity: 0.09; | |
| filter: blur(2px); | |
| will-change: transform; | |
| animation: float 9s ease-in-out infinite alternate; | |
| } | |
| .circle1 { width: 340px; height: 340px; background: var(--light-purple); top: 5%; left: 4%; } | |
| .circle2 { width: 200px; height: 200px; background: var(--very-light-purple); top: 65%; left: 74%; } | |
| .circle3 { width: 140px; height: 140px; background: var(--deep-purple); top: 42%; left: 38%; } | |
| @keyframes float { | |
| 0% { transform: translateY(0) scale(1);} | |
| 100% { transform: translateY(-32px) scale(1.04);} | |
| } | |
| .container { | |
| position: relative; | |
| z-index: 2; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 3rem 1.5rem 3rem 1.5rem; | |
| } | |
| .college { | |
| color: var(--deep-purple); | |
| font-weight: 600; | |
| font-size: 1.1rem; | |
| margin-bottom: 0.8rem; | |
| letter-spacing: 0.5px; | |
| text-align: center; | |
| opacity: 0.90; | |
| } | |
| .hero { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| margin-top: 3rem; | |
| margin-bottom: 2.5rem; | |
| padding: 2.5rem 1.5rem 2rem 1.5rem; | |
| background: var(--background-purple); | |
| border-radius: 24px; | |
| box-shadow: var(--shadow); | |
| transition: box-shadow 0.3s; | |
| opacity: 0; | |
| transform: translateY(40px); | |
| animation: heroFadeIn 1.1s 0.2s cubic-bezier(.77,0,.18,1) forwards; | |
| } | |
| @keyframes heroFadeIn { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .logo-wrap { | |
| margin-bottom: 1rem; | |
| animation: logoIn 1.2s 0.3s cubic-bezier(.77,0,.18,1) forwards; | |
| opacity: 0; | |
| transform: translateY(-30px) scale(0.95); | |
| } | |
| @keyframes logoIn { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .logo-img { | |
| width: 80px; | |
| height: 80px; | |
| object-fit: contain; | |
| border-radius: 16px; | |
| box-shadow: 0 2px 12px rgba(109,40,217,0.10); | |
| background: #fff; | |
| transition: box-shadow 0.3s, transform 0.2s; | |
| } | |
| .logo-img:hover { | |
| box-shadow: 0 6px 32px rgba(109,40,217,0.16); | |
| transform: scale(1.06) rotate(-2deg); | |
| } | |
| .hero h1 { | |
| font-size: 2.6rem; | |
| color: var(--deep-purple); | |
| margin-bottom: 0.35rem; | |
| letter-spacing: 1px; | |
| font-weight: 700; | |
| animation: textIn 1s 0.3s cubic-bezier(.77,0,.18,1) forwards; | |
| opacity: 0; | |
| transform: translateY(15px); | |
| } | |
| .hero p { | |
| font-size: 1.18rem; | |
| color: var(--text-purple); | |
| margin-bottom: 2.2rem; | |
| font-weight: 500; | |
| letter-spacing: 0.2px; | |
| max-width: 480px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| animation: textIn 1s 0.4s cubic-bezier(.77,0,.18,1) forwards; | |
| opacity: 0; | |
| transform: translateY(15px); | |
| } | |
| @keyframes textIn { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .download-btn { | |
| display: inline-block; | |
| padding: 1rem 2.5rem; | |
| font-size: 1.1rem; | |
| font-weight: 700; | |
| color: #fff; | |
| background: linear-gradient(90deg, var(--deep-purple) 0%, var(--light-purple) 100%); | |
| border: none; | |
| border-radius: 32px; | |
| box-shadow: 0 2px 8px rgba(67,44,129,0.10); | |
| cursor: pointer; | |
| transition: background 0.25s, box-shadow 0.2s, transform 0.18s; | |
| outline: none; | |
| position: relative; | |
| animation: btnIn 1s 0.6s cubic-bezier(.77,0,.18,1) forwards; | |
| opacity: 0; | |
| transform: translateY(15px) scale(0.97); | |
| } | |
| @keyframes btnIn { | |
| to { | |
| opacity: 1; | |
| transform: translateY(0) scale(1); | |
| } | |
| } | |
| .download-btn:focus-visible { | |
| outline: 2px solid var(--deep-purple); | |
| outline-offset: 2px; | |
| } | |
| .download-btn:hover { | |
| background: linear-gradient(90deg, var(--light-purple) 0%, var(--deep-purple) 100%); | |
| box-shadow: 0 6px 24px rgba(109,40,217,0.12); | |
| transform: translateY(-2px) scale(1.07); | |
| } | |
| .download-btn:active { | |
| transform: scale(0.97); | |
| } | |
| .section { | |
| background: var(--background-purple); | |
| border-radius: 18px; | |
| margin: 2.2rem 0; | |
| padding: 2.2rem 1.5rem; | |
| box-shadow: var(--shadow); | |
| opacity: 0; | |
| transform: translateY(40px); | |
| transition: box-shadow 0.2s; | |
| } | |
| .section h2 { | |
| color: var(--text-purple); | |
| margin-bottom: 1.2rem; | |
| font-size: 1.3rem; | |
| font-weight: 700; | |
| letter-spacing: 0.3px; | |
| } | |
| .section ul, .section ol { | |
| color: var(--deep-purple); | |
| font-size: 1.03rem; | |
| line-height: 1.7; | |
| margin: 0 0 0 1.1rem; | |
| padding: 0; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: 1fr 1fr; | |
| gap: 1.2rem; | |
| margin: 1.2rem 0; | |
| } | |
| .feature-card { | |
| background: var(--very-light-purple); | |
| border-radius: 14px; | |
| padding: 1.1rem 1rem; | |
| box-shadow: 0 1px 6px rgba(109,40,217,0.05); | |
| color: var(--deep-purple); | |
| font-size: 1rem; | |
| font-weight: 500; | |
| transition: background 0.2s, color 0.2s, box-shadow 0.18s, transform 0.18s; | |
| opacity: 0; | |
| transform: translateY(30px) scale(0.98); | |
| } | |
| .feature-card:hover { | |
| background: var(--light-purple); | |
| color: #fff; | |
| box-shadow: 0 4px 18px rgba(109,40,217,0.10); | |
| transform: scale(1.03) translateY(-2px); | |
| } | |
| .footer { | |
| text-align: center; | |
| color: var(--deep-purple); | |
| font-size: 1rem; | |
| margin-top: 2.4rem; | |
| padding-bottom: 1.5rem; | |
| opacity: 0.92; | |
| } | |
| @media (max-width: 800px) { | |
| .features-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .container { | |
| padding: 1rem 0.5rem 2rem 0.5rem; | |
| } | |
| } | |
| @media (max-width: 600px) { | |
| .hero h1 { font-size: 2rem; } | |
| .hero p { font-size: 1rem; } | |
| .download-btn { font-size: 1rem; padding: 0.8rem 1.5rem; } | |
| .section { padding: 1rem 0.6rem; } | |
| .logo-img { width: 54px; height: 54px; } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="animated-bg"> | |
| <div class="circle circle1"></div> | |
| <div class="circle circle2"></div> | |
| <div class="circle circle3"></div> | |
| </div> | |
| <div class="container"> | |
| <div class="college"> | |
| Developed at Shri Bhagubhai Mafatlal Polytechnic and College of Engineering | |
| </div> | |
| <div class="hero" id="hero"> | |
| <div class="logo-wrap"> | |
| <!-- Replace with your actual logo file --> | |
| <img src="healthhub-logo.jpg" alt="HealthHub Logo" class="logo-img" /> | |
| </div> | |
| <h1>HealthHub</h1> | |
| <p>Your AI-Powered Healthcare Companion<br> | |
| <span style="color: var(--text-purple); font-weight:600;">Empowering Health Through Technology</span></p> | |
| <button class="download-btn" onclick="downloadApp()">Download App</button> | |
| </div> | |
| <div class="section"> | |
| <h2>Why HealthHub?</h2> | |
| <ul> | |
| <li>Unified, AI-powered healthcare platform for secure, accessible, and convenient care.</li> | |
| <li>Bridges fragmented services and improves access to specialists.</li> | |
| <li>Ensures privacy with blockchain-inspired secure medical vault.</li> | |
| <li>Delivers faster, more accurate diagnoses with AI and ML.</li> | |
| </ul> | |
| </div> | |
| <div class="section"> | |
| <h2>Features at a Glance</h2> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <strong>AI Symptom Checker</strong><br> | |
| Early-stage disease prediction using ensemble ML models. | |
| </div> | |
| <div class="feature-card"> | |
| <strong>Blockchain Medical Vault</strong><br> | |
| Secure, encrypted, and shareable medical records. | |
| </div> | |
| <div class="feature-card"> | |
| <strong>24/7 Health Chatbot</strong><br> | |
| NLP-based assistant answers health queries and boosts health literacy. | |
| </div> | |
| <div class="feature-card"> | |
| <strong>Medicine Tools</strong><br> | |
| Pill scanner, AI-based recommender, and health quizzes. | |
| </div> | |
| <div class="feature-card"> | |
| <strong>Doctor Finder & Telemedicine</strong><br> | |
| Search, book, and consult with doctors securely and seamlessly. | |
| </div> | |
| <div class="feature-card"> | |
| <strong>Emergency Services</strong><br> | |
| Instant access to hospitals, ambulance booking, and blood donation. | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section"> | |
| <h2>How HealthHub Works</h2> | |
| <ol> | |
| <li><b>Smart Symptom Analysis:</b> Ensemble ML models (Naive Bayes, SVM, Random Forest) for accurate predictions.</li> | |
| <li><b>Secure Data Storage:</b> Records stored via IPFS and encrypted with SHA-256.</li> | |
| <li><b>Controlled Sharing:</b> Time-limited share codes for privacy-preserving doctor access.</li> | |
| <li><b>Doctor-Patient Flow:</b> Search, book, check-in, and consult with seamless record sharing.</li> | |
| </ol> | |
| </div> | |
| <div class="section"> | |
| <h2>Medicine Tools & Rewards</h2> | |
| <ul> | |
| <li>Camera-based pill identification with instant details.</li> | |
| <li>AI-powered medicine recommender for safe OTC options.</li> | |
| <li>Interactive health quizzes and spin-wheel rewards for engagement.</li> | |
| </ul> | |
| </div> | |
| <div class="section"> | |
| <h2>Emergency Services</h2> | |
| <ul> | |
| <li>Nearby hospitals shown on map, color-coded by distance.</li> | |
| <li>Automatic ambulance booking using GPS for fastest response.</li> | |
| <li>Blood donation and request module; earn points and certificates.</li> | |
| </ul> | |
| </div> | |
| <div class="section"> | |
| <h2>Tech Stack</h2> | |
| <ul> | |
| <li><b>Frontend:</b> Flutter for cross-platform mobile UI</li> | |
| <li><b>Backend:</b> Flask (APIs, AI integration), Firebase (auth & storage)</li> | |
| <li><b>AI/ML:</b> Hugging Face Spaces (deployed models)</li> | |
| <li><b>Maps:</b> OpenStreetMap for hospital and emergency tracking</li> | |
| <li><b>Blockchain Storage:</b> IPFS + SHA-256 encryption</li> | |
| </ul> | |
| </div> | |
| <div class="section"> | |
| <h2>Future Scope</h2> | |
| <ul> | |
| <li>Smartwatch integration for real-time health tracking</li> | |
| <li>Multilingual support for inclusivity</li> | |
| <li>AR-based health education modules</li> | |
| <li>Live hospital bed availability</li> | |
| <li>Predictive health insights with AI</li> | |
| </ul> | |
| </div> | |
| <div class="footer"> | |
| <strong>HealthHub</strong> is your vision for the future of healthcare – smarter, more connected, and truly personalized.<br> | |
| <span style="color: var(--text-purple); font-weight:600;">Your health, your way.</span> | |
| <br><br> | |
| <small> | |
| Final Year Diploma Project by Daksh Gopani, Rudra Parmar, Vinit Shah<br> | |
| Guided by Mr. Janardan Kulkarni (HOD - Computer Engineering)<br> | |
| <span style="color: var(--deep-purple);">Shri Bhagubhai Mafatlal Polytechnic and College of Engineering</span> | |
| </small> | |
| </div> | |
| </div> | |
| <script> | |
| function downloadApp() { | |
| window.location.href = 'HealthHub.apk'; | |
| } | |
| // Animate sections and feature cards on scroll for classic, clean reveal | |
| function revealOnScroll(selector, delay=0) { | |
| const elements = document.querySelectorAll(selector); | |
| function reveal() { | |
| elements.forEach((el, i) => { | |
| const rect = el.getBoundingClientRect(); | |
| if(rect.top < window.innerHeight - 60) { | |
| el.style.opacity = 1; | |
| el.style.transform = 'translateY(0)'; | |
| el.style.transition = `opacity 0.7s ${delay + i*0.07}s cubic-bezier(.77,0,.18,1), transform 0.7s ${delay + i*0.07}s cubic-bezier(.77,0,.18,1)`; | |
| } | |
| }); | |
| } | |
| window.addEventListener('scroll', reveal); | |
| window.addEventListener('DOMContentLoaded', reveal); | |
| } | |
| revealOnScroll('.section', 0.1); | |
| revealOnScroll('.feature-card', 0.2); | |
| // Button micro-animation on click | |
| document.querySelector('.download-btn').addEventListener('click', function(e){ | |
| this.style.transform = 'scale(0.97)'; | |
| setTimeout(() => { this.style.transform = 'scale(1)'; }, 170); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |