| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PrivaMed - Federated Learning for Hospitals</title> |
| <style> |
| * { margin: 0; padding: 0; box-sizing: border-box; } |
| body { font-family: 'Segoe UI', sans-serif; background: #0f172a; color: #e2e8f0; } |
| nav { background: #1e293b; padding: 20px 60px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #334155; } |
| nav h1 { color: #38bdf8; font-size: 22px; } |
| nav div { display: flex; gap: 10px; } |
| nav a { color: #0f172a; background: #38bdf8; padding: 10px 24px; border-radius: 8px; font-weight: bold; font-size: 14px; text-decoration: none; } |
| nav a.secondary { background: #334155; color: #e2e8f0; } |
| .hero { text-align: center; padding: 100px 20px 80px; } |
| .hero h2 { font-size: 48px; font-weight: bold; line-height: 1.2; margin-bottom: 20px; } |
| .hero h2 span { color: #38bdf8; } |
| .hero p { font-size: 18px; color: #94a3b8; max-width: 600px; margin: 0 auto 40px; line-height: 1.7; } |
| .hero a { background: #38bdf8; color: #0f172a; padding: 16px 40px; border-radius: 10px; font-size: 16px; font-weight: bold; text-decoration: none; } |
| .problem { background: #1e293b; padding: 80px 60px; text-align: center; } |
| .problem h2 { font-size: 32px; margin-bottom: 16px; } |
| .problem p { color: #94a3b8; font-size: 16px; max-width: 650px; margin: 0 auto; line-height: 1.7; } |
| .steps { padding: 80px 60px; max-width: 1000px; margin: 0 auto; } |
| .steps h2 { font-size: 32px; text-align: center; margin-bottom: 50px; } |
| .steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } |
| .step { background: #1e293b; border-radius: 12px; padding: 30px; border: 1px solid #334155; text-align: center; } |
| .step .number { font-size: 36px; font-weight: bold; color: #38bdf8; margin-bottom: 16px; } |
| .step h3 { font-size: 18px; margin-bottom: 10px; } |
| .step p { color: #94a3b8; font-size: 14px; line-height: 1.6; } |
| .benefits { background: #1e293b; padding: 80px 60px; } |
| .benefits h2 { font-size: 32px; text-align: center; margin-bottom: 50px; } |
| .benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 900px; margin: 0 auto; } |
| .benefit { background: #0f172a; border-radius: 12px; padding: 24px; border: 1px solid #334155; } |
| .benefit h3 { color: #38bdf8; font-size: 16px; margin-bottom: 8px; } |
| .benefit p { color: #94a3b8; font-size: 14px; line-height: 1.6; } |
| .cta { text-align: center; padding: 80px 20px; } |
| .cta h2 { font-size: 36px; margin-bottom: 16px; } |
| .cta p { color: #94a3b8; font-size: 16px; margin-bottom: 40px; } |
| .cta a { background: #38bdf8; color: #0f172a; padding: 16px 40px; border-radius: 10px; font-size: 16px; font-weight: bold; text-decoration: none; } |
| footer { background: #1e293b; padding: 30px 60px; text-align: center; color: #475569; font-size: 13px; border-top: 1px solid #334155; line-height: 2; } |
| footer a { color: #38bdf8; text-decoration: none; } |
| footer a:hover { color: #7dd3fc; } |
| </style> |
| </head> |
| <body> |
| <nav> |
| <h1>PrivaMed</h1> |
| <div> |
| <a href="/predict" class="secondary">Predict Risk</a> |
| <a href="/dashboard">Try Demo</a> |
| </div> |
| </nav> |
| <div class="hero"> |
| <h2>Train AI Together.<br><span>Share Nothing.</span></h2> |
| <p>PrivaMed lets hospitals collaborate to build powerful medical AI models without ever sharing patient data. Privacy guaranteed.</p> |
| <a href="/dashboard">See It In Action</a> |
| </div> |
| <div class="problem"> |
| <h2>The Problem with Medical AI Today</h2> |
| <p>Building accurate AI models requires large datasets. But hospitals can't share patient data due to privacy laws like HIPAA and GDPR. This means each hospital trains on limited data — and gets limited results.</p> |
| </div> |
| <div class="steps"> |
| <h2>How PrivaMed Works</h2> |
| <div class="steps-grid"> |
| <div class="step"> |
| <div class="number">1</div> |
| <h3>Each Hospital Trains Locally</h3> |
| <p>Your data never leaves your servers. The AI model trains directly on your local dataset.</p> |
| </div> |
| <div class="step"> |
| <div class="number">2</div> |
| <h3>Only Weights Are Shared</h3> |
| <p>Instead of data, only the model's learned parameters are sent to the central server.</p> |
| </div> |
| <div class="step"> |
| <div class="number">3</div> |
| <h3>Everyone Gets a Better Model</h3> |
| <p>The server combines all weights using FedAvg. Every hospital receives a stronger global model.</p> |
| </div> |
| </div> |
| </div> |
| <div class="benefits"> |
| <h2>Why Hospitals Choose PrivaMed</h2> |
| <div class="benefits-grid"> |
| <div class="benefit"> |
| <h3>Patient Privacy Protected</h3> |
| <p>Raw patient data is never transmitted or stored outside your hospital's infrastructure.</p> |
| </div> |
| <div class="benefit"> |
| <h3>Better AI with More Data</h3> |
| <p>Collaborate with other hospitals to train on larger, more diverse datasets without sharing them.</p> |
| </div> |
| <div class="benefit"> |
| <h3>HIPAA & GDPR Compliant</h3> |
| <p>Designed from the ground up with privacy regulations in mind.</p> |
| </div> |
| <div class="benefit"> |
| <h3>Works with Your Data</h3> |
| <p>Upload any CSV medical dataset and start training immediately. No complex setup required.</p> |
| </div> |
| </div> |
| </div> |
| <div class="cta"> |
| <h2>Ready to See It Work?</h2> |
| <p>Upload your dataset and watch federated learning in action.</p> |
| <a href="/dashboard">Try the Demo</a> |
| </div> |
| <footer> |
| PrivaMed — Federated Learning System — Train Together, Share Nothing<br> |
| © 2026 Nour Maaita. All rights reserved.<br> |
| <a href="https://github.com/nmaaitallh">GitHub</a> | |
| <a href="https://www.linkedin.com/in/nour-maaita-197733243/">LinkedIn</a> |
| </footer> |
| </body> |
| </html> |
