| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Risk Assessment | HeartCare</title> |
| <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=Outfit:wght@300;400;500;600;700;800&display=swap" |
| rel="stylesheet"> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <link rel="stylesheet" href="/static/style.css"> |
| <link rel="icon" |
| href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>❤️</text></svg>"> |
| </head> |
|
|
| <body> |
| |
| <div class="background-glow"></div> |
|
|
| |
| <header class="site-header"> |
| <div class="header-container"> |
| |
| <div class="brand"> |
| <span class="heart-icon">❤️</span> |
| <span class="brand-name">HeartCare</span> |
| </div> |
|
|
| |
| <nav class="nav-links"> |
| <a href="/">Home</a> |
| <a href="/#about">About</a> |
| <a href="/#contact">Contact</a> |
| <a href="/calculate" class="btn-start active">Start Assessment</a> |
| </nav> |
| </div> |
| </header> |
|
|
| <main class="container"> |
|
|
| |
| <section id="calculate" class="calculator-section"> |
| <div class="section-title"> |
| <h2>Assess Your Risk</h2> |
| <p>Fill in the details below for an instant Artificial Intelligence analysis.</p> |
| </div> |
|
|
| <form id="predictionForm" class="glass-panel"> |
| <div class="form-grid"> |
| |
| <div class="form-section"> |
| <h3><i class="fa-regular fa-id-card"></i> Personal Profile</h3> |
|
|
| <div class="input-group"> |
| <label for="Age">Age</label> |
| <input type="number" id="Age" name="Age" min="18" max="100" required placeholder="e.g. 45"> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="Sex">Biological Sex</label> |
| <select id="Sex" name="Sex" required> |
| <option value="" disabled selected>Select...</option> |
| <option value="0">Female</option> |
| <option value="1">Male</option> |
| </select> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="Height">Height (cm)</label> |
| <input type="number" id="Height" name="Height" min="100" max="250" required |
| placeholder="e.g. 175"> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="Weight">Weight (kg)</label> |
| <input type="number" id="Weight" name="Weight" min="30" max="200" required |
| placeholder="e.g. 70"> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="BMI">BMI (Auto-calculated)</label> |
| <input type="number" id="BMI" name="BMI" readonly placeholder="---"> |
| </div> |
| </div> |
|
|
| |
| <div class="form-section"> |
| <h3><i class="fa-solid fa-notes-medical"></i> Medical History</h3> |
|
|
| <div class="input-group"> |
| <label for="General_Health">Self-Rated Health</label> |
| <select id="General_Health" name="General_Health" required> |
| <option value="Excellent">Excellent</option> |
| <option value="Very_Good">Very Good</option> |
| <option value="Good">Good</option> |
| <option value="Fair">Fair</option> |
| <option value="Poor">Poor</option> |
| </select> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="Checkup">Last Checkup</label> |
| <select id="Checkup" name="Checkup" required> |
| <option value="Within 1 year">Within 1 year</option> |
| <option value="1-2 years">1-2 years</option> |
| <option value="2-5 years">2-5 years</option> |
| <option value="5+ years">5+ years</option> |
| <option value="Never">Never</option> |
| </select> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="Diabetes">Diabetes Status</label> |
| <select id="Diabetes" name="Diabetes" required> |
| <option value="No">No</option> |
| <option value="Borderline">Borderline</option> |
| <option value="During Pregnancy">During Pregnancy</option> |
| <option value="Yes">Yes</option> |
| </select> |
| </div> |
|
|
| <div class="checkbox-group"> |
| <label class="checkbox-container"> |
| <input type="checkbox" id="Skin_Cancer" name="Skin_Cancer"> |
| <span class="checkmark"></span> |
| Skin Cancer |
| </label> |
| <label class="checkbox-container"> |
| <input type="checkbox" id="Other_Cancer" name="Other_Cancer"> |
| <span class="checkmark"></span> |
| Other Cancer |
| </label> |
| <label class="checkbox-container"> |
| <input type="checkbox" id="Depression" name="Depression"> |
| <span class="checkmark"></span> |
| Depression |
| </label> |
| <label class="checkbox-container"> |
| <input type="checkbox" id="Arthritis" name="Arthritis"> |
| <span class="checkmark"></span> |
| Arthritis |
| </label> |
| </div> |
| </div> |
|
|
| |
| <div class="form-section full-width"> |
| <h3><i class="fa-solid fa-person-running"></i> Lifestyle Factors</h3> |
|
|
| <div class="lifestyle-grid"> |
| <div class="input-group"> |
| <label for="Exercise">Regular Exercise</label> |
| <select id="Exercise" name="Exercise" required> |
| <option value="0">No</option> |
| <option value="1">Yes</option> |
| </select> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="Smoking">Smoking History</label> |
| <select id="Smoking" name="Smoking" required> |
| <option value="0">No</option> |
| <option value="1">Yes</option> |
| </select> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="Alcohol">Alcohol (Days/Month)</label> |
| <input type="number" id="Alcohol" name="Alcohol" min="0" max="30" value="0"> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="Fruit">Fruit (Servings/Month)</label> |
| <input type="number" id="Fruit" name="Fruit" min="0" max="100" value="0"> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="Green_Vegetables">Green Veggies (Servings/Month)</label> |
| <input type="number" id="Green_Vegetables" name="Green_Vegetables" min="0" max="100" |
| value="0"> |
| </div> |
|
|
| <div class="input-group"> |
| <label for="Fried_Potato">Fried Food (Servings/Month)</label> |
| <input type="number" id="Fried_Potato" name="Fried_Potato" min="0" max="100" value="0"> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="form-actions"> |
| <button type="submit" class="btn-primary"> |
| <span>Analyze Risk Profile</span> |
| <i class="fa-solid fa-arrow-right"></i> |
| </button> |
| </div> |
| </form> |
| </section> |
|
|
| </main> |
|
|
| |
| <footer class="footer"> |
| <div class="footer-container"> |
| <div class="footer-about"> |
| <h3>HeartCare</h3> |
| <p> |
| HeartCare is a heart disease risk prediction platform created to promote early |
| detection, awareness, and prevention of cardiovascular diseases through simple |
| online assessment. |
| </p> |
| </div> |
|
|
| <div class="footer-links"> |
| <h4>Quick Links</h4> |
| <a href="/">Home</a> |
| <a href="/#about">About</a> |
| <a href="/#contact">Contact</a> |
| <a href="/calculate">Start Calculation</a> |
| </div> |
|
|
| <div class="footer-contact"> |
| <h4>Contact Info</h4> |
| <p><strong>Email:</strong> support@heartcare.com</p> |
| <p><strong>Phone:</strong> +91 9876543210</p> |
| <p><strong>Location:</strong> Nanded, Maharashtra, India</p> |
| </div> |
| </div> |
|
|
| <div class="footer-bottom"> |
| <p>© 2025 HeartCare | AI Heart Disease Risk Prediction System | All Rights Reserved</p> |
| </div> |
| </footer> |
|
|
| |
| <div id="livePreview" class="live-preview-card"> |
| <div class="live-preview-header"> |
| <span>Live Risk Preview</span> |
| <i class="fa-solid fa-heart-pulse"></i> |
| </div> |
| <div class="live-risk-score" id="liveRiskScore">--%</div> |
| <div class="live-risk-label" id="liveRiskLabel">Enter details...</div> |
| </div> |
|
|
| |
| <div id="resultModal" class="modal"> |
| <div class="modal-content"> |
| <span class="close-modal" onclick="closeModal()">×</span> |
| <div class="result-header"> |
| <div id="riskIcon" class="risk-icon"></div> |
| <h2 id="riskLevel">High Risk</h2> |
| </div> |
| <div class="result-body"> |
| <p>Based on your health indicators, our AI model estimates your cardiovascular disease risk |
| probability as:</p> |
| <div class="probability-meter"> |
| <div id="probFill" class="prob-fill"></div> |
| <span id="probValue">0%</span> |
| </div> |
| <p class="disclaimer"><strong>Disclaimer:</strong> This tool provides an estimate based on |
| statistical models. It is not a medical diagnosis. Please consult a cardiologist for a proper |
| evaluation.</p> |
| </div> |
| <div class="modal-actions"> |
| <button class="btn-cancel" onclick="closeModal()">Close Result</button> |
| <button type="button" onclick="goToRecommendations()" class="view-btn"> |
| View Recommendations |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <script src="/static/script.js"></script> |
| </body> |
|
|
| </html> |
