<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/png" sizes="16x16" href="src/Logo/fav.svg">
    <!-- Google Fonts (Capriola, Montserrat, PT Sans, Righteous) -->
    <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=Capriola&family=Montserrat+Alternates&family=Montserrat:ital,wght@0,100..900;1,100..900&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Righteous&display=swap" rel="stylesheet">
     
    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-NF2714JWJE"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-NF2714JWJE');
    </script>
    <title>Order Confirmed | Fresh Groceries</title>
    <style>
        :root {
            --primary: #3b1e54;
            --background: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Righteous', cursive;
        }

        body {
            background: var(--background);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 1rem;
            animation: fadeIn 1.5s ease-in-out;
        }

        /* Fade-in animation for body */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .container {
            background: rgb(255, 255, 255);
            padding: 2rem;
            border-radius: 1rem;
            max-width: 600px;
            width: 100%;
            text-align: center;
            animation: slideUp 1s ease-in-out;
        }

        /* Slide-in animation for container */
        @keyframes slideUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .success-icon {
            width: 80px;
            height: 80px;
            background: var(--primary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            animation: scaleUp 0.5s ease-in-out;
        }

        /* Scale-up animation for success icon */
        @keyframes scaleUp {
            from {
                transform: scale(0);
            }
            to {
                transform: scale(1);
            }
        }

        .success-icon svg {
            width: 40px;
            height: 40px;
            fill: white;
        }

        h1 {
            color: #0f172a;
            margin-bottom: 1rem;
            animation: fadeIn 1s ease-in-out;
        }

        .message {
            color: #64748b;
            margin-bottom: 2rem;
            animation: fadeIn 1s ease-in-out;
        }

        .illustrative-image {
            max-width: 100%;
            margin: 2rem 0;
            animation: fadeIn 1s ease-in-out;
        }

        .button {
            background-color: transparent;
            color: #000000; /* Blue color for links */
            border: none;
            text-align: left;
            font-size: 16px !important;
            cursor: pointer;
            transition: color 0.3s ease;
            padding: 10px 15px;
        }

        /* Pop-in animation for the button */
        @keyframes buttonPop {
            from {
                transform: scale(0.8);
                opacity: 0;
            }
            to {
                transform: scale(1);
                opacity: 1;
            }
        }

        .button:hover {
            opacity: 0.9;
        }

        @media (max-width: 480px) {
            .container {
                padding: 1.5rem;
            }
        }
    </style>
</head>
<body>

    <div class="container">
        <div class="success-icon">
            <svg viewBox="0 0 24 24">
                <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z"/>
            </svg>
        </div>

        <h1>Order Confirmed!</h1>
        <p class="message" style=" font-family: 'Righteous', cursive;;">Your order has been successfully placed and is on its way!</p>

        <!-- Add an illustrative image related to shopping or groceries -->
        <img src="img/ordered.png" alt="Shopping Illustration" class="illustrative-image">

        <button class="button" id="shopAgain">Shop Again</button>
    </div>

    <!-- Audio element for the success sound -->
    <audio id="successAudio" src="src/audio/sucessfull.mp3" preload="auto"></audio>

    <script>
        // Autoplay audio when page loads
        window.addEventListener('load', function() {
            const audio = document.getElementById('successAudio');
            
            // Attempt to play audio with user interaction fallback
            const playAudio = () => {
                audio.play().catch(error => {
                    console.log('Autoplay prevented. User interaction required.');
                });
            };

            // Try to play audio immediately
            playAudio();

            // Add click event to play audio if autoplay fails
            document.addEventListener('click', function() {
                playAudio();
            }, { once: true });
        });

        // Redirect to the home page after 7 seconds
        setTimeout(() => {
            window.location.href = "index.html";
        }, 7000); // 7000 milliseconds = 7 seconds

        // Redirect to the home page when the "Shop Again" button is clicked
        document.getElementById('shopAgain').addEventListener('click', () => {
            window.location.href = "index.html";
        });
    </script>
</body>
</html>