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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Display</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=Battambang:wght@100;300;400;700;900&display=swap" rel="stylesheet">
    <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=Battambang:wght@100;300;400;700;900&family=Bayon&family=Koulen&display=swap" rel="stylesheet">
    <style>
        @font-face {
            font-family: 'Kh Ang Kampaeng Thmor';
            src: url('font/KhAngKampaengThmor.woff2') format('woff2'),
                url('font/KhAngKampaengThmor.woff') format('woff');
            font-weight: normal;
            font-style: normal;
            font-display: swap;
        }

        body {
            text-align: center;
            background-image: url('./img/amz.jpg');
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            overflow: hidden;
            margin: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-family: 'Battambang', sans-serif;
        }

        .banner {
            width: 100%;
            background-color: white;
            color: black;
            text-align: center;
            padding: 1vw 0;
            position: absolute;
            top: 0;
            left: 0;
            height: 10vh;
            font-size: clamp(30px, 2vw, 50px);
        }

        .banner p {
            font-family: "Koulen", sans-serif;
            font-weight: 500;
            font-style: normal;
            font-size: clamp(30px, 4vw, 70px);
        }

        .banner img {
            max-height: 10vh;
            width: auto;
            float: left;
            margin-left: 2vw;
        }

        marquee {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            font-size: clamp(16px, 2.5vw, 40px);
        }

        .history-container {
            background-color: #4CAF50;
            padding: 20px;
            border-radius: 30px;
            text-align: center;
            width: 80%;
            margin-top: 240px;

        }

        .history-title {
            font-size: 3.5vw;
            font-weight: bold;
            color: white;
            font-family: "Koulen", sans-serif;
            font-size: 120px;
        }

        .history-item {
            font-size: 180px;
            font-weight: bold;
            color: white;
            padding: 10px 0;
            font-family: 'Kh Ang Kampaeng Thmor';

        }

        .latest-number {
            font-size: 260px;
            color: yellow;
            font-family: 'Kh Ang Kampaeng Thmor';
        }

        .history-item:not(:first-child) {
            border-top: 1px solid white;
        }

         @media (max-width: 768px) {
            .history-container {
                width: 90%;
                padding: 2vw;
                margin-top: 140px;
            }

            .history-title {
                font-weight: bold;
                color: white;
                font-family: "Koulen", sans-serif;
                font-size: 60px;
            }

            .history-item {
                font-size: 90px;
                font-weight: bold;
                color: white;
                padding: 10px 0;
                font-family: 'Kh Ang Kampaeng Thmor';
                border-top: 1px solid white;

            }

            .latest-number {
                font-size: 120px;
                color: yellow;
                font-family: 'Kh Ang Kampaeng Thmor';
            }
            /* .history-item:not(:first-child) {*/
            /*border-top: 1px solid white;*/
            /*}*/
        }
              
        /* 📱 Small Screens (Max 480px) */
        @media (max-width: 480px) {
            .history-container {
                width: 95%;
                padding: 4vw;
            }
            
        }
    </style>
    <script>
        let lastNumber = null;

        function playSound(number) {
            let audio = new Audio('Sound/' + number + '.wav'); // Ensure file exists
            audio.play().catch(error => console.error("Audio playback error:", error));
        }

        function fetchNumber() {
            fetch('fetch.php')
                .then(response => response.text())
                .then(number => {
                    number = number.trim();
                    if (number !== '' && number !== lastNumber) {
                        lastNumber = number; // Store last number to avoid duplicates

                        let historyContainer = document.getElementById('historyContainer');
                        let items = historyContainer.children;

                        // Create new history item
                        let div = document.createElement('div');
                        div.className = 'history-item latest-number';
                        div.innerText = number;

                        // Insert at the top after the title
                        historyContainer.insertBefore(div, items[1]);

                        // Update previous numbers
                        for (let i = 2; i < items.length; i++) {
                            items[i].className = 'history-item';
                            items[i].style.color = 'white';
                        }

                        // Remove excess items beyond 5
                        while (historyContainer.children.length > 6) {
                            historyContainer.removeChild(historyContainer.lastChild);
                        }

                        // Play the sound for the new number
                        playSound(number);
                    }
                })
                .catch(error => console.error("Fetch error:", error));
        }

        setInterval(fetchNumber, 5000);

        function toggleFullScreen() {
            if (!document.fullscreenElement) {
                document.documentElement.requestFullscreen();
            } else {
                document.exitFullscreen();
            }
        }

        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && document.fullscreenElement) {
                document.exitFullscreen();
            }
        });

        document.addEventListener('dblclick', toggleFullScreen);
    </script>
</head>

<body>
    <div class="banner">
        <img src="./img/amazon.png" alt="Amazon Logo">

        <marquee behavior="" direction="left">
            <p>សូមស្វាគមន៍ មកកាន់ កាហ្វេអាម៉ាហ្សូន ខនសិបស្តរ សាខា ទួលគោក! សូមស្វាគមន៍ មកកាន់ កាហ្វេអាម៉ាហ្សូន ខនសិបស្តរ សាខា ទួលគោក!</p>
        </marquee>
    </div>
    <div class="history-container" id="historyContainer">
        <div class="history-title">លេខរងចាំ</div>
    </div>
</body>

</html>