<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Our Love Story | 2026</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com" rel="stylesheet">
</head>
<body>
    <canvas id="heartCanvas"></canvas>
    
    <div class="progress-container">
        <div class="progress-bar" id="bar"></div>
    </div>

    <div class="slider">
        <!-- Slide 1 -->
        <div class="slide active">
            <div class="glass-card">
                <span class="emoji">💕</span>
                <h1 class="neon-text">OUR LOVE STORY</h1>
                <p class="subtitle">“Written by Destiny, Directed by Heart”</p>
                <div class="footer-line">This Valentine, I celebrate Us ❤️</div>
                <button onclick="next()">Start Our Journey</button>
            </div>
        </div>

        <!-- Slide 2 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">🌹</span>
                <h2>Ek Din Sab Kuch Badal Gaya…</h2>
                <p>“Us din mujhe nahi pata tha ke meri zindagi hamesha ke liye badalne wali hai… Ek simple si mulaqat, ek simple si smile… Aur dil ne chupke se faisla kar liya.”</p>
                <button onclick="next()">Next →</button>
            </div>
        </div>

        <!-- Slide 3 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">💫</span>
                <h2>Jab Hum Pehli Baar Mile</h2>
                <p>“Woh pehli nazar… Woh halki si awkward smile… Aur meri dhadkan ka fast ho jana.”</p>
                <button onclick="next()">Continue...</button>
            </div>
        </div>

        <!-- Slide 4 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">💬</span>
                <h2>Pehli Baat</h2>
                <p>“Ek ‘Hi’ se shuru hui baat… Aur pata hi nahi chala kab ‘Goodnight’ ka intezar hone laga.”</p>
                <button onclick="next()">Then...</button>
            </div>
        </div>

        <!-- Slide 5 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">❤️</span>
                <h2>Shayad Yehi Pyaar Hai…</h2>
                <p>“Jab tumhari awaaz se sukoon milne lage… Jab tumhari fikr apni fikr se zyada hone lage… Tab samajh aata hai… Ye sirf pasand nahi… pyaar hai.”</p>
                <button onclick="next()">Next</button>
            </div>
        </div>

        <!-- Slide 6 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">🎁</span>
                <h2>Our First Special Moment</h2>
                <p>“Woh din chhota tha… Magar meri yaadon mein hamesha ke liye bas gaya.”</p>
                <button onclick="next()">Next</button>
            </div>
        </div>

        <!-- Slide 7 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">😅</span>
                <h2>Har Kahani Perfect Nahi Hoti</h2>
                <p>“Haan, hum lade bhi… Par har ladai ne hume aur kareeb la diya. Kyuki door rehna hum dono ko pasand nahi.”</p>
                <button onclick="next()">Next</button>
            </div>
        </div>

        <!-- Slide 8 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">🥺</span>
                <h2>Sorry & Hug</h2>
                <p>“Ek ‘Sorry’ ne sab theek kar diya… Aur ek hug ne dil phir se jod diya.”</p>
                <button onclick="next()">Next</button>
            </div>
        </div>

        <!-- Slide 9 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">💖</span>
                <h2>Tumhari Smile</h2>
                <p>“Tumhari smile meri duniya roshan kar deti hai.”</p>
                <button onclick="next()">Next</button>
            </div>
        </div>

        <!-- Slide 10 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">💞</span>
                <h2>Tumhara Care</h2>
                <p>“Tumhara ‘khana kha liya?’ Mere liye duniya ka sabse pyara sawaal hai.”</p>
                <button onclick="next()">Next</button>
            </div>
        </div>

        <!-- Slide 11 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">🌍</span>
                <h2>Tumhara Support</h2>
                <p>“Jab sab saath chhod dein… Tumhara ‘Main hoon na’ sab kuch theek kar deta hai.”</p>
                <button onclick="next()">Next</button>
            </div>
        </div>

        <!-- Slide 12 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">🌙</span>
                <h2>3 AM Conversations</h2>
                <p>“Duniya so rahi hoti hai… Aur hum apni choti si duniya mein khoye hote hain.”</p>
                <button onclick="next()">Next</button>
            </div>
        </div>

        <!-- Slide 13 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">💭</span>
                <h2>Humara Kal</h2>
                <p>“Ek din hum saath travel karenge… Ek din hum apna ghar banayenge… Ek din hum rocking chair par baith kar apni kahani yaad karenge.”</p>
                <button onclick="next()">Deep down...</button>
            </div>
        </div>

        <!-- Slide 14 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">💌</span>
                <h2>A Letter To You</h2>
                <p>“Dear Love, Agar zindagi ek kitaab hai… Toh main chahta hoon har chapter tumhare saath likhun. Har khushi, har gham… sirf tumhare saath.”</p>
                <button onclick="next()">Because...</button>
            </div>
        </div>

        <!-- Slide 15 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">🎬</span>
                <h2>Because…</h2>
                <p>“Tum meri aadat nahi… Tum meri zarurat ho. Tum mera waqt nahi… Tum meri zindagi ho.”</p>
                <button onclick="next()">Final Question</button>
            </div>
        </div>

        <!-- Slide 16 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">💍</span>
                <h2>My Question…</h2>
                <p class="big-text">Will You Be My Forever Valentine?</p>
                <div class="btn-group">
                    <button class="neon-btn" onclick="next()">YES! ❤️</button>
                </div>
            </div>
        </div>

        <!-- Slide 17 -->
        <div class="slide">
            <div class="glass-card">
                <span class="emoji">🌹</span>
                <h2>To Be Continued…</h2>
                <p>“Our Love Story is not ending… It’s just getting started.”</p>
                <p class="neon-text small">Forever & Always</p>
            </div>
        </div>
    </div>

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