<!DOCTYPE html>
<html>

<head>
    <title>Download Chama App</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f8f9fa;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            text-align: center;
        }

        h1 {
            color: #007bff;
        }

        a {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }

        a:hover {
            background-color: #0056b3;
        }

        body {
            font-family: 'Segoe UI', Arial, sans-serif;
            background: linear-gradient(135deg, #e0e7ff 0%, #f8f9fa 100%);
            min-height: 100vh;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Animated gradient background */
        body {
            background: linear-gradient(270deg, #e0e7ff, #f8f9fa, #c3e0ff, #e0e7ff);
            background-size: 800% 800%;
            animation: gradientMove 12s ease infinite;
        }

        @keyframes gradientMove {
            0% {
                background-position: 0% 50%;
            }

            50% {
                background-position: 100% 50%;
            }

            100% {
                background-position: 0% 50%;
            }
        }

        .card {
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 32px rgba(0, 123, 255, 0.15), 0 1.5px 6px rgba(0, 0, 0, 0.07);
            padding: 40px 32px 32px 32px;
            max-width: 350px;
            width: 100%;
            text-align: center;
            animation: fadeIn 1s;
            position: relative;
            z-index: 1;
            transition: transform 0.5s cubic-bezier(.68, -0.55, .27, 1.55), box-shadow 0.3s;
            animation: fadeIn 1s, floatCard 3s ease-in-out infinite;
        }

        @keyframes floatCard {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-12px);
            }
        }

        .card:hover {
            transform: translateY(-8px) scale(1.03) rotate(-1deg);
            box-shadow: 0 16px 48px rgba(0, 123, 255, 0.18), 0 3px 12px rgba(0, 0, 0, 0.10);
        }


        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(30px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        h1 {
            color: #007bff;
            font-size: 2rem;
            margin-bottom: 12px;
            font-weight: 700;
        }

        p {
            color: #444;
            font-size: 1.1rem;
            margin-bottom: 24px;
        }

        .download-btn {
            display: inline-block;
            padding: 14px 32px;
            background: linear-gradient(90deg, #007bff 60%, #0056b3 100%);
            color: #fff;
            font-size: 1.1rem;
            font-weight: 600;
            border: none;
            border-radius: 8px;
            box-shadow: 0 2px 8px rgba(0, 123, 255, 0.12);
            cursor: pointer;
            text-decoration: none;
            transition: background 0.3s, transform 0.2s;
            position: relative;
            overflow: hidden;
        }

        .download-btn:hover {
            background: linear-gradient(90deg, #0056b3 60%, #007bff 100%);
            transform: translateY(-2px) scale(1.04);
            animation: pulse 0.5s;
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(0, 123, 255, 0.3);
            }

            70% {
                box-shadow: 0 0 0 10px rgba(0, 123, 255, 0);
            }

            100% {
                box-shadow: 0 0 0 0 rgba(0, 123, 255, 0);
            }
        }

        /* Ripple effect on button click */
        .ripple {
            position: absolute;
            border-radius: 50%;
            transform: scale(0);
            animation: ripple 0.6s linear;
            background-color: rgba(255, 255, 255, 0.5);
            pointer-events: none;
        }

        @keyframes ripple {
            to {
                transform: scale(4);
                opacity: 0;
            }
        }

        /* Sparkle animation on button hover */
        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: #fff;
            border-radius: 50%;
            opacity: 0.7;
            pointer-events: none;
            animation: sparkle 0.8s linear;
        }

        @keyframes sparkle {
            0% {
                transform: scale(0.5);
                opacity: 1;
            }

            80% {
                transform: scale(1.2);
                opacity: 1;
            }

            100% {
                transform: scale(0.5);
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="card">
        <h1>Download Chama App</h1>
        <p>Get the latest debug version of Chama App for Android. Click below to download the APK file.</p>
        <a class="download-btn" id="downloadBtn" href="chamapp-debug.apk" download>
            &#128190; Download APK
        </a>
    </div>
    <script>
        // Ripple effect
        const btn = document.getElementById('downloadBtn');
        btn.addEventListener('click', function (e) {
            const ripple = document.createElement('span');
            ripple.className = 'ripple';
            const rect = btn.getBoundingClientRect();
            ripple.style.left = (e.clientX - rect.left) + 'px';
            ripple.style.top = (e.clientY - rect.top) + 'px';
            ripple.style.width = ripple.style.height = Math.max(rect.width, rect.height) + 'px';
            btn.appendChild(ripple);
            ripple.addEventListener('animationend', () => ripple.remove());
            // Confetti burst
            for (let i = 0; i < 24; i++) {
                const confetti = document.createElement('span');
                confetti.style.position = 'absolute';
                confetti.style.width = '6px';
                confetti.style.height = '6px';
                confetti.style.borderRadius = '50%';
                confetti.style.background = `hsl(${Math.random() * 360},80%,60%)`;
                confetti.style.left = (rect.width / 2) + 'px';
                confetti.style.top = (rect.height / 2) + 'px';
                confetti.style.pointerEvents = 'none';
                confetti.style.zIndex = 2;
                confetti.animate([
                    { transform: `translate(0,0) scale(1)`, opacity: 1 },
                    { transform: `translate(${Math.cos(i / 12 * Math.PI * 2) * 60}px,${Math.sin(i / 12 * Math.PI * 2) * 60}px) scale(0.7)`, opacity: 0 }
                ], {
                    duration: 900 + Math.random() * 400,
                    easing: 'cubic-bezier(.68,-0.55,.27,1.55)'
                });
                btn.appendChild(confetti);
                setTimeout(() => confetti.remove(), 1200);
            }
        });

        // Sparkle effect on hover
        btn.addEventListener('mouseenter', function () {
            for (let i = 0; i < 8; i++) {
                const sparkle = document.createElement('span');
                sparkle.className = 'sparkle';
                sparkle.style.left = (Math.random() * btn.offsetWidth) + 'px';
                sparkle.style.top = (Math.random() * btn.offsetHeight) + 'px';
                btn.appendChild(sparkle);
                sparkle.addEventListener('animationend', () => sparkle.remove());
            }
        });
    </script>
</body>

</html>