Reelpay

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>ReelPay - Watch Reels, Earn Money</title>

    <style>

        :root {

            --bg: #0b132b;

            --card: #1f2a44;

            --accent: #4f86f7;

            --text: #eef3fb;

            --muted: #a8b4cc;

            --danger: #ff6b6b;

        }

•         { box-sizing: border-box; }

        body {

            margin: 0;

            font-family: Inter, system-ui, sans-serif;

            background: linear-gradient(180deg, #091126 0%, #121c32 100%);

            color: var(--text);

        }

        header {

            padding: 28px 24px 12px;

            display: flex;

            justify-content: space-between;

            align-items: center;

            gap: 16px;

        }

        header h1 { margin: 0; font-size: 1.6rem; }

        header p { margin: 4px 0 0; color: var(--muted); }

        .container {

            max-width: 1100px;

            margin: 0 auto;

            padding: 0 20px 40px;

        }

        .hero {

            display: grid;

            gap: 20px;

            grid-template-columns: 1.5fr 1fr;

            align-items: start;

        }

        .panel, .cards { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; padding: 24px; }

        .panel h2 { margin: 0 0 12px; }

        .stats { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 20px 0; }

        .stat { background: rgba(255,255,255,.04); padding: 18px; border-radius: 18px; }

        .stat h3 { margin: 0 0 6px; font-size: .95rem; color: var(--muted); }

        .stat p { margin: 0; font-size: 1.35rem; font-weight: 700; }

        .btn {

            border: none;

            color: #fff;

            background: var(--accent);

            padding: 14px 20px;

            border-radius: 14px;

            cursor: pointer;

            font-size: 1rem;

            transition: transform .16s ease, background .16s ease;

        }

        .btn:hover { transform: translateY(-1px); background: #3d6ae7; }

        .btn.danger { background: var(--danger); }

        .reel-list { display: grid; gap: 18px; }

        .reel { display: grid; grid-template-columns: 180px 1fr; gap: 18px; align-items: center; background: rgba(255,255,255,.04); padding: 18px; border-radius: 18px; }

        .reel img { width: 100%; border-radius: 16px; object-fit: cover; height: 110px; }

        .reel-info h3 { margin: 0 0 8px; font-size: 1.05rem; }

        .reel-info p { margin: 0 0 10px; color: var(--muted); }

        .badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(79,134,247,.14); color: #d6e4ff; font-size: .88rem; }

        .banner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; align-items: center; margin-top: 14px; }

        .banner p { margin: 0; color: #cbd4e6; }

        .modal {

            position: fixed;

            inset: 0;

            background: rgba(0,0,0,.7);

            display: none;

            justify-content: center;

            align-items: center;

            padding: 20px;

        }

        .modal.active { display: flex; }

        .modal-card {

            width: min(550px, 100%);

            background: #111827;

            border-radius: 24px;

            padding: 24px;

            box-shadow: 0 20px 50px rgba(0,0,0,.35);

        }

        .modal-card h2 { margin: 0 0 14px; }

        .modal-card p { color: var(--muted); line-height: 1.6; }

        .close-btn { position: absolute; top: 18px; right: 20px; width: 42px; height: 42px; background: rgba(255,255,255,.08); border: none; border-radius: 50%; color: #fff; cursor: pointer; }

        @media (max-width: 820px) {

            .hero { grid-template-columns: 1fr; }

            .reel { grid-template-columns: 1fr; }

            header { flex-direction: column; align-items: flex-start; }

        }

    </style>

</head>

<body>

    <div class="container">

        <header>

            <div>

                <h1>ReelPay</h1>

                <p>Watch short reels, unlock earnings, and stay subscribed to cash out.</p>

            </div>

            <button class="btn" id="subscribeButton">Subscribe now</button>

        </header>

        <section class="hero">

            <div class="panel">

                <h2>Welcome back!</h2>

                <p>Subscribe to start earning money for every qualified reel watch session.</p>

                <div class="stats">

                    <div class="stat">

                        <h3>Wallet</h3>

                        <p id="walletBalance">$0.00</p>

                    </div>

                    <div class="stat">

                        <h3>Today</h3>

                        <p id="todayEarned">$0.00</p>

                    </div>

                    <div class="stat">

                        <h3>Status</h3>

                        <p id="statusText">Free Trial</p>

                    </div>

                    <div class="stat">

                        <h3>Reels watched</h3>

                        <p id="watchedCount">0</p>

                    </div>

                </div>

                <div class="banner">

                    <div>

                        <p><strong>Subscription</strong>: $7.99 / month</p>

                        <p>Validates your earnings and unlocks premium reels.</p>

                    </div>

                    <button class="btn" id="earnButton">Start Watching</button>

                </div>

            </div>

            <div class="cards">

                <h2>Featured Reels</h2>

                <div class="reel-list" id="reelList">

                    <article class="reel">

                        <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=500&q=80" alt="Reel thumbnail">

                        <div class="reel-info">

                            <h3>Morning Motivation</h3>

                            <p>Watch the full 30-second reel to earn rewards.</p>

                            <span class="badge">Earn $0.25</span>

                            <div style="margin-top: 12px;">

                                <button class="btn" onclick="watchReel('Morning Motivation', 0.25)">Watch now</button>

                            </div>

                        </div>

                    </article>

                    <article class="reel">

                        <img src="https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?auto=format&fit=crop&w=500&q=80" alt="Reel thumbnail">

                        <div class="reel-info">

                            <h3>Quick Fitness Tip</h3>

                            <p>Learn a short move and earn instantly when subscribed.</p>

                            <span class="badge">Earn $0.30</span>

                            <div style="margin-top: 12px;">

                                <button class="btn" onclick="watchReel('Quick Fitness Tip', 0.30)">Watch now</button>

                            </div>

                        </div>

                    </article>

                    <article class="reel">

                        <img src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=500&q=80" alt="Reel thumbnail">

                        <div class="reel-info">

                            <h3>Business Growth Hacks</h3>

                            <p>Complete this reel to add money to your wallet.</p>

                            <span class="badge">Earn $0.40</span>

                            <div style="margin-top: 12px;">

                                <button class="btn" onclick="watchReel('Business Growth Hacks', 0.40)">Watch now</button>

                            </div>

                        </div>

                    </article>

                </div>

            </div>

        </section>

    </div>

    <div class="modal" id="modal">

        <div class="modal-card">

            <button class="close-btn" onclick="closeModal()">×</button>

            <h2 id="modalTitle">Watch Reel</h2>

            <p id="modalText">You're ready to watch a reel and earn money once your subscription is active.</p>

            <div style="margin-top: 18px; display: flex; justify-content: flex-end; gap: 12px;">

                <button class="btn danger" onclick="closeModal()">Close</button>

                <button class="btn" id="confirmWatch">Play Reel</button>

            </div>

        </div>

    </div>

    <script>

        let subscribed = false;

        let wallet = 0;

        let today = 0;

        let watched = 0;

        let selectedReel = null;

        const walletBalance = document.getElementById('walletBalance');

        const todayEarned = document.getElementById('todayEarned');

        const watchedCount = document.getElementById('watchedCount');

        const statusText = document.getElementById('statusText');

        const subscribeButton = document.getElementById('subscribeButton');

        const modal = document.getElementById('modal');

        const modalTitle = document.getElementById('modalTitle');

        const modalText = document.getElementById('modalText');

        const confirmWatch = document.getElementById('confirmWatch');

        function updateDashboard() {

            walletBalance.textContent = `$${wallet.toFixed(2)}`;

            todayEarned.textContent = `$${today.toFixed(2)}`;

            watchedCount.textContent = watched;

            statusText.textContent = subscribed ? 'Subscribed' : 'Free Tier';

            subscribeButton.textContent = subscribed ? 'Subscribed' : 'Subscribe now';

            subscribeButton.disabled = subscribed;

        }

        function toggleSubscription() {

            if (!subscribed) {

                subscribed = true;

                wallet += 1.50; // welcome bonus on subscribe

                today += 1.50;

                alert('Subscription activated! You earned a $1.50 welcome bonus.');

            }

            updateDashboard();

        }

        function watchReel(title, reward) {

            selectedReel = { title, reward };

            modalTitle.textContent = title;

            modalText.textContent = subscribed

                ? `Complete the short reel to earn $${reward.toFixed(2)}.`

                : 'You need an active subscription to earn. Subscribe now to unlock rewards.';

            confirmWatch.textContent = subscribed ? 'Complete Reel' : 'Subscribe First';

            modal.classList.add('active');

        }

        function closeModal() {

            modal.classList.remove('active');

        }

        confirmWatch.addEventListener('click', () => {

            if (!subscribed) {

                toggleSubscription();

                closeModal();

                return;

            }

            if (!selectedReel) return;

            wallet += selectedReel.reward;

            today += selectedReel.reward;

            watched += 1;

            alert(`Great job! You earned $${selectedReel.reward.toFixed(2)} for watching ${selectedReel.title}.`);

            selectedReel = null;

            updateDashboard();

            closeModal();

        });

        subscribeButton.addEventListener('click', toggleSubscription);

        updateDashboard();

    </script>

</body>

</html>