app/templates/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HeartCare | Advanced Heart Health Assessment</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=Plus+Jakarta+Sans:wght@400;500;600;700&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>">
    <script>
        (function () { if (!window.chatbase || window.chatbase("getState") !== "initialized") { window.chatbase = (...arguments) => { if (!window.chatbase.q) { window.chatbase.q = [] } window.chatbase.q.push(arguments) }; window.chatbase = new Proxy(window.chatbase, { get(target, prop) { if (prop === "q") { return target.q } return (...args) => target(prop, ...args) } }) } const onLoad = function () { const script = document.createElement("script"); script.src = "https://www.chatbase.co/embed.min.js"; script.id = "AS3pcxeyHl1Kl0m0BEkAf"; script.domain = "www.chatbase.co"; document.body.appendChild(script) }; if (document.readyState === "complete") { onLoad() } else { window.addEventListener("load", onLoad) } })();
    </script>
</head>

<body>
    <!-- Background Effect -->
    <div class="background-glow"></div>

    <!-- HEADER -->
    <header class="site-header">
        <div class="header-container">
            <div class="brand">
                <a href="/" class="brand-link" style="text-decoration: none; color: var(--text-main);">
                    <span class="heart-icon">❤️</span>
                    <span class="brand-name">HeartCare</span>
                </a>
            </div>
            <nav class="nav-links">
                <a href="#home">Home</a>
                <a href="#about">About</a>
                <a href="#contact">Contact</a>
                <a href="/calculate" class="btn-start">Start Assessment</a>
            </nav>
        </div>
    </header>

    <main class="container">

        <!-- HERO SECTION -->
        <section id="home" class="hero">
            <div class="hero-content" style="animation: fadeInUp 0.8s ease-out;">
                <div class="badge-new">
                    <i class="fa-solid fa-sparkles"></i> New AI-Powered Analysis
                </div>
                <h1>Your Heart Health, <br> <span class="text-gradient">Understood in Minutes</span></h1>
                <p>
                    Experience the future of preventive cardiology. Our advanced AI assesses your risk with clinical
                    precision and provides personalized, actionable insights—all from the comfort of your home.
                </p>
                <div class="hero-buttons">
                    <a href="/calculate" class="hero-btn primary-btn">
                        Check Your Risk Now <i class="fa-solid fa-arrow-right"></i>
                    </a>
                    <a href="#how-it-works" class="hero-btn secondary-btn">
                        How It Works <i class="fa-solid fa-circle-play"></i>
                    </a>
                </div>
                <div class="hero-trust">
                    <span><i class="fa-solid fa-user-shield"></i> 100% Private & Secure</span>
                    <span><i class="fa-solid fa-check-circle"></i> Clinically Validated Model</span>
                </div>
            </div>
            <div class="hero-image" style="animation: fadeInUp 1s ease-out;">
                <img src="/static/images/heart.png" alt="3D Heart Illustration" class="floating-heart">
            </div>
        </section>

        <!-- TRUST INDICATORS -->
        <section class="trust-section">
            <div class="trust-container">
                <div class="trust-stat">
                    <div class="stat-number count-up" data-target="10000">10,000+</div>
                    <div class="stat-label">Assessments Completed</div>
                </div>
                <div class="trust-stat">
                    <div class="stat-number">98%</div>
                    <div class="stat-label">User Satisfaction</div>
                </div>
                <div class="trust-stat">
                    <div class="stat-number">24/7</div>
                    <div class="stat-label">AI Availability</div>
                </div>
                <div class="trust-stat">
                    <div class="stat-number">100%</div>
                    <div class="stat-label">Data Privacy</div>
                </div>
            </div>
        </section>

        <!-- HOW IT WORKS -->
        <section id="how-it-works" class="how-it-works">
            <div class="section-title">
                <div class="badge-new" style="margin-bottom: 1rem;">Simple Process</div>
                <h2>How It Works</h2>
                <p>Get your personalized heart health assessment in three simple steps</p>
            </div>
            <div class="steps-grid">
                <div class="step-card">
                    <div class="step-number">1</div>
                    <div class="step-icon"><i class="fa-solid fa-clipboard-list"></i></div>
                    <h3>Fill Health Profile</h3>
                    <p>Answer a few questions about your age, lifestyle, medical history, and current health status.
                        Takes only 2-3 minutes.</p>
                </div>
                <div class="step-card">
                    <div class="step-number">2</div>
                    <div class="step-icon"><i class="fa-solid fa-brain"></i></div>
                    <h3>AI Analysis</h3>
                    <p>Our advanced machine learning model analyzes your data against thousands of clinical patterns to
                        assess your risk.</p>
                </div>
                <div class="step-card">
                    <div class="step-number">3</div>
                    <div class="step-icon"><i class="fa-solid fa-file-medical"></i></div>
                    <h3>Get Recommendations</h3>
                    <p>Receive a detailed report with your risk level, personalized diet plans, exercise tips, and
                        nearby cardiologist suggestions.</p>
                </div>
            </div>
        </section>

        <!-- ABOUT SECTION -->
        <section id="about"
            style="background: linear-gradient(180deg, var(--bg-subtle) 0%, white 100%); padding: 6rem 0;">
            <div class="section-title">
                <div class="badge-new" style="margin-bottom: 1rem;">Our Mission</div>
                <h2>Why Choose HeartCare?</h2>
                <p>Empowering you with early detection and preventive knowledge through advanced technology.</p>
            </div>

            <div class="about-grid">
                <div class="about-card">
                    <i class="fa-solid fa-heart-pulse"></i>
                    <h3>AI Risk Analysis</h3>
                    <p>Advanced machine learning algorithms assess multiple health parameters to estimate your risk
                        profile with high accuracy.</p>
                </div>

                <div class="about-card">
                    <i class="fa-solid fa-chart-line"></i>
                    <h3>Data-Driven Accuracy</h3>
                    <p>Trained on thousands of clinical records to ensure reliable and statistical predictions aligned
                        with medical research.</p>
                </div>

                <div class="about-card">
                    <i class="fa-solid fa-user-shield"></i>
                    <h3>Privacy First</h3>
                    <p>Your health data is processed securely and is never stored permanently on our servers. Your
                        privacy is our priority.</p>
                </div>

                <div class="about-card">
                    <i class="fa-solid fa-user-doctor"></i>
                    <h3>Preventive Care</h3>
                    <p>Get actionable recommendations and alerts to consult specialists when necessary, helping you stay
                        ahead of health issues.</p>
                </div>
            </div>
        </section>

        <!-- TESTIMONIALS -->
        <section class="testimonials">
            <div class="section-title">
                <div class="badge-new"
                    style="background: rgba(16, 185, 129, 0.1); color: var(--success); border-color: rgba(16, 185, 129, 0.2); margin-bottom: 1rem;">
                    <i class="fa-solid fa-star"></i> Success Stories
                </div>
                <h2>What Our Users Say</h2>
                <p>Real stories from people who took control of their heart health</p>
            </div>
            <div class="testimonials-grid">
                <div class="testimonial-card">
                    <div class="quote-icon"><i class="fa-solid fa-quote-left"></i></div>
                    <p class="testimonial-text">"HeartCare's assessment helped me identify risk factors I wasn't aware
                        of. I made lifestyle changes and my doctor confirmed significant improvement in my health
                        markers."</p>
                    <div class="testimonial-author">
                        <div class="author-avatar" style="background: #e0e7ff; color: #4338ca;">RS</div>
                        <div>
                            <div class="author-name">Rajesh Sharma <i class="fa-solid fa-circle-check"
                                    style="color: var(--success); font-size: 0.8em;" title="Verified User"></i></div>
                            <div class="author-role">Software Engineer, 45</div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <div class="quote-icon"><i class="fa-solid fa-quote-left"></i></div>
                    <p class="testimonial-text">"As someone with a family history of heart disease, this tool gave me
                        peace of mind. The recommendations were practical and the doctor suggestions were very helpful."
                    </p>
                    <div class="testimonial-author">
                        <div class="author-avatar" style="background: #d1fae5; color: #047857;">PD</div>
                        <div>
                            <div class="author-name">Priya Deshmukh <i class="fa-solid fa-circle-check"
                                    style="color: var(--success); font-size: 0.8em;" title="Verified User"></i></div>
                            <div class="author-role">Teacher, 38</div>
                        </div>
                    </div>
                </div>
                <div class="testimonial-card">
                    <div class="quote-icon"><i class="fa-solid fa-quote-left"></i></div>
                    <p class="testimonial-text">"The detailed report with diet and exercise plans was exactly what I
                        needed. It's like having a personal health advisor available 24/7."</p>
                    <div class="testimonial-author">
                        <div class="author-avatar" style="background: #fee2e2; color: #b91c1c;">AK</div>
                        <div>
                            <div class="author-name">Amit Kulkarni <i class="fa-solid fa-circle-check"
                                    style="color: var(--success); font-size: 0.8em;" title="Verified User"></i></div>
                            <div class="author-role">Business Owner, 52</div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- CONTACT SECTION -->
        <section id="contact" style="background: var(--bg-subtle); padding: 6rem 0;">
            <div class="section-title">
                <div class="badge-new" style="margin-bottom: 1rem;">Support</div>
                <h2>Get in Touch</h2>
                <p>We are always available to help you with your queries and support.</p>
            </div>

            <div class="contact-grid">
                <div class="contact-card">
                    <i class="fa-solid fa-envelope"></i>
                    <h3>Email Us</h3>
                    <p>support@heartcare.com</p>
                    <p class="small text-muted">Response within 24 hours</p>
                </div>

                <div class="contact-card">
                    <i class="fa-solid fa-phone"></i>
                    <h3>Call Us</h3>
                    <p>+91 9876543210</p>
                    <p class="small text-muted">Mon-Fri, 9am - 6pm</p>
                </div>

                <div class="contact-card">
                    <i class="fa-solid fa-location-dot"></i>
                    <h3>Visit Us</h3>
                    <p>Nanded, Maharashtra, India</p>
                    <p class="small text-muted">Main Office</p>
                </div>

                <div class="contact-card">
                    <i class="fa-solid fa-headset"></i>
                    <h3>Live Support</h3>
                    <p>Chat with our AI Agent</p>
                    <p class="small text-muted">Available 24/7</p>
                </div>
            </div>
        </section>

    </main>

    <!-- FOOTER -->
    <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">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><i class="fa-solid fa-envelope" style="margin-right: 8px; color: var(--primary-color);"></i>
                    <strong>Email:</strong> support@heartcare.com
                </p>
                <p><i class="fa-solid fa-phone" style="margin-right: 8px; color: var(--primary-color);"></i>
                    <strong>Phone:</strong> +91 9876543210
                </p>
                <p><i class="fa-solid fa-location-dot" style="margin-right: 8px; color: var(--primary-color);"></i>
                    <strong>Location:</strong> Nanded, Maharashtra, India
                </p>
            </div>
        </div>

        <div class="footer-bottom">
            <p>&copy; 2025 HeartCare | AI Heart Disease Risk Prediction System | All Rights Reserved</p>
        </div>
    </footer>

    <script src="/static/script.js"></script>
</body>

</html>