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

<head>
    <meta charset="UTF-8">
    <meta content='width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=5'
        name='viewport' />
    <meta content='IE=edge' http-equiv='X-UA-Compatible' />
    <script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
    <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.all.min.js"></script>
    <title><%= name %> - Code Cinta</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
        @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

        :root {
            --main-bg-color: rgba(0, 0, 0, .4);
            --box-bg-color: #fff;
            --bg-transparent-dikit: rgba(0, 0, 0, 0.5);
            --ribbon-span-bg: #8e44ad;
            --ribbon-border: #7b1ba2;
            --warna-bg: rgba(0, 0, 0, .4);
            --warna-teks: white;
            --warna-bingkai: rgba(255, 255, 255, .7);
            --bingkai: 10px;
            --font-ubuntu: 'Ubuntu', sans-serif;
            --font-amatic: 'Amatic SC', cursive;
            --font-dancing-script: 'Dancing Script', cursive;
            --font-pacifico: 'Pacifico', sans-serif;
            --font-great-vibes: 'Great Vibes', cursive;
            --font-sacramento: 'Sacramento', cursive;
        }

        /*CSS ANIMATION*/
        @keyframes nafas {
            0% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.1);
            }

            100% {
                transform: scale(1);
            }
        }

        @keyframes typing {
            0% {
                width: 0;
            }

            100% {
                width: 100%;
            }
        }

        @keyframes underline {

            0%,
            100% {
                width: 0;
            }

            50% {
                width: 100%;
            }
        }

        @keyframes gerak {
            0% {
                left: -1px;
                top: -3px;
            }

            50% {
                left: 1px;
                top: 3px;
            }

            100% {
                left: -1px;
                top: -3px;
            }
        }

        @keyframes shake {
            0% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-10px);
            }

            50% {
                transform: translateX(10px);
            }

            75% {
                transform: translateX(-10px);
            }

            100% {
                transform: translateX(0);
            }
        }

        /*CSS ELEMENT*/
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            overflow: hidden;
            font-family: var(--font-ubuntu);
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--main-bg-color);
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
        }

        .box {
            width: 100vw;
            height: 100vh;
        }

        .box.demo {
            width: 90%;
            max-width: 400px;
            /* Lebar box maksimal 400px */
            height: 450px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 2px 5px rgba(0, 0, 0, 0.3);
        }

        .box::before {
            content: "© <%= creator_name %>";
            position: absolute;
            bottom: 10px;
            left: 10px;
            color: var(--warna-teks);
            background: var(--bg-transparent-dikit);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 12px;
            z-index: 10;
            pointer-events: none;
        }

        .box.loading-audio::before {
            display: none !important;
        }

        .wallpaper {
            width: 100%;
            height: 100%;
            background: var(--box-bg-color);
            background-image: url('<%- background %>');
            background-size: cover;
            background-repeat: no-repeat;
            background-position: center;
        }

        .ribbon {
            width: 150px;
            height: 150px;
            overflow: hidden;
            position: absolute;
            z-index: 2;
        }

        .ribbon span {
            position: absolute;
            width: 225px;
            padding: 15px 0;
            background: var(--ribbon-span-bg);
            display: block;
            text-align: center;
            color: #fff;
        }

        .ribbon::after,
        .ribbon::before {
            content: '';
            border: 5px solid var(--ribbon-border);
            position: absolute;
        }

        .ribbon-top-right {
            top: -10px;
            right: -10px;
        }

        .ribbon-top-right span {
            left: -25px;
            top: 30px;
            transform: rotate(45deg);
        }

        .ribbon-top-right::before,
        .ribbon-top-right::after {
            border-top-color: transparent;
            border-right-color: transparent;
        }

        .ribbon-top-right::after {
            bottom: 0;
            right: 0;
        }

        .ribbon-top-right::before {
            top: 0;
            left: 0;
        }

        .box-content {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            flex-direction: column;
        }

        .loading {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
            height: 100%;
            width: 100%;
            font-size: 15px;
            color: var(--warna-teks);
            background-color: black;
            overflow: hidden;
        }

        .play_button {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            width: 100%;
            font-size: 15px;
            color: var(--warna-teks);
            overflow: hidden;
            transition: opacity 0.5s ease;
        }

        .play_button.hide {
            opacity: 0;
            pointer-events: none;
            display: none;
        }

        .love {
            background: var(--box-bg-color);
            color: #FF0900;
            border-radius: 50%;
            width: 60px;
            height: 60px;
            padding: 10px;
            font-size: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all .3s ease;
            margin: 5px;
        }

        .love svg {
            animation: none;
            stroke: #ff0000;
            stroke-width: 1.3;
            fill: none;
            width: 35px;
            height: 35px;
        }

        .love:hover {
            transform: scale(.8);
            color: #FF0900;
        }

        .content {
            display: none;
            font-family: var(--font-ubuntu);
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            width: 100vw;
            color: var(--warna-teks);
            font-size: 12px;
            position: relative;
            padding: 30px;
        }

        .sticker {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            font-size: 50px;
            text-align: center;
            opacity: 0;
            transform: scale(0);
            transition: all 0.9s ease;
        }

        .sticker img {
            width: 90px;
            height: 90px;
            margin-bottom: 20px;
            box-shadow: 0 4px 30px rgba(255, 255, 255, 0.3);
            backdrop-filter: blur(5px);
            background: rgba(255, 255, 255, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%;
            padding: 10px;
        }

        .content p {
            font-size: 18px;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }

        .scale-in {
            opacity: 1;
            transform: scale(1);
            transition: all .9s ease;
        }

        .scale-out {
            opacity: 0;
            transform: scale(0);
            transition: all 0.9s ease;
        }

        .reply {
            display: none;
            height: auto;
            padding: 5px 10px;
            margin-top: 10px;
            font-size: 16px;
            color: var(--warna-teks);
            /* Warna teks */
            background-color: transparent;
            /* Background transparan */
            border: 2px solid #000;
            /* Border hitam */
            border-radius: 12px;
            /* Sudut rounded */
            cursor: pointer;
            transition: background-color 0.3s ease, color 0.3s ease;
        }

        /* Efek hover ketika elemen diklik atau diarahkan mouse */
        .reply:hover {
            background-color: #000;
            /* Warna background berubah saat hover */
            color: #fff;
            /* Warna teks berubah saat hover */
        }

        /* Modal background (transparent) */
        .modal {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            position: fixed;
            /* Stay in place */
            z-index: 1;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            text-align: center;
           
            /* Transparent black background */
            overflow: none;
            /* Enable scroll if needed */
            animation: fadeIn 0.3s ease-out;
            /* Fade in animation */
        }

        /* Modal content */
        .modal-content {
            background-color: rgba(255, 255, 255, 0.432);
            /* Semi-transparent white background */
            margin: 20% auto;
            /* Center it horizontally */
            padding: 200px;
            border-radius: 15px;
            /* Rounded corners */
            width: 90%;
            /* Width of modal */
            max-width: 600px;
            /* Max width of modal */
            text-align: center;
            justify-content: center;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.027);
            /* Shadow for the modal */
            position: relative;

            /* So that the close button can be positioned absolutely */
        }

        /* Close button (X) */
        .close-btn {
            color: #aaa;
            float: left;
            font-size: 35px;
            font-weight: bold;
            position: absolute;
            top: 5px;
            left: 20px;
        }

        .close-btn:hover,
        .close-btn:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }

        /* Style for textarea */
        textarea {
            padding: 12px;
            width: 100%;
            max-width: 100%;
            height: 20%;
            border-radius: 5px;
            background-color: rgba(240, 248, 255, 0.295);
            border: 1px solid #01020f;
            margin-top: 10px;
            font-size: 16px;
            resize: none;
            /* Prevent resizing */
            transition: border-color 0.3s ease;
        }

        textarea:focus {
            border-color: #007bff;
            outline: none;
        }

        /* Style untuk gambar modal */
        #modalImage {
            max-width: 100%;
            /* Agar gambar tidak melebihi lebar modal */
            height: auto;
            /* Jaga agar gambar tetap proporsional */
            border-radius: 10px;
            /* Membuat gambar sedikit membulat */
            margin-bottom: 10px;
            /* Memberikan sedikit ruang di bawah gambar */
        }

        /* Apply shake effect when closing */
        .modal.shake .modal-content {
            animation: shake 0.5s ease-out;
        }

        /* Button Style */
        button {
            background-color: #007bffa1;
            color: white;
            font-size: 16px;
            padding: 10px 20px;
            border-radius: 5px;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #020a13;
        }

        /* Responsif untuk ukuran layar kecil */
        @media (max-width: 767px) {
            .box.demo {
                width: 90%;
                max-width: 350px;
                height: 450px;
                margin: 20px auto;
            }
            .content p {
            font-size: 14px;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }
            .modal-content {
                width: 90%;
                /* Width of modal */
                padding: 15px;
            }

            /* Responsif untuk gambar */
            #modalImage {
                width: 100%;
                max-width: 100px;
                /* Sesuaikan ukuran gambar agar lebih kecil pada layar kecil */
                margin-bottom: 15px;
            }

            /* Responsif untuk h2 dalam modal */
            .modal-content h2 {
                font-size: 16px;
                /* Sesuaikan ukuran font untuk layar kecil */
            }

            /* Responsif untuk textarea */
            textarea {
                width: 100%;
                font-size: 14px;
            }

            /* Responsif untuk tombol */
            button {
                width: 100%;
                padding: 12px 0;
                font-size: 14px;
            }
        }

        /* Responsif untuk ukuran layar sedang */
        @media (max-width: 992px) and (min-width: 768px) {
            .box.demo {
                width: 90%;
                max-width: 400px;
            }
            .content p {
            font-size: 12px;
            justify-content: center;
            align-items: center;
            text-align: center;
            padding: 20px;
        }
            .modal-content {
                width: 80%;
                /* Modal will take up 80% of screen width on medium screens */
                padding: 20px;
            }

            /* Responsif untuk gambar */
            #modalImage {
                max-width: 250px;
                margin-bottom: 10px;
            }

            /* Responsif untuk h2 dalam modal */
            .modal-content h2 {
                font-size: 18px;
            }

            /* Responsif untuk tombol */
            button {
                width: 100%;
                padding: 12px 0;
            }
        }

        span.highlight {
            color: rgba(238, 255, 6, 0.993);
            border-radius: 5px;
            border: 2px solid #ccc;
            
        }
    </style>


</head>

<body>
    <div class="box demo">
        <div style="overflow: hidden; width:100%; height: 100%;">
            <div class="wallpaper">
                <audio src="<%= audio %>" id="audios" class="sembunyi"></audio>
                <div class="box-content">
                    <div class="loading" style="display: none;">Tunggu Dulu ya...</div>
                    <div class="play_button" onclick="playMusic()">
                        <label class="love"><svg class="line" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                                <g transform="translate(2.550170, 3.550158)">
                                    <path
                                        d="M0.371729633,8.89614246 C-0.701270367,5.54614246 0.553729633,1.38114246 4.07072963,0.249142462 C5.92072963,-0.347857538 8.20372963,0.150142462 9.50072963,1.93914246 C10.7237296,0.0841424625 13.0727296,-0.343857538 14.9207296,0.249142462 C18.4367296,1.38114246 19.6987296,5.54614246 18.6267296,8.89614246 C16.9567296,14.2061425 11.1297296,16.9721425 9.50072963,16.9721425 C7.87272963,16.9721425 2.09772963,14.2681425 0.371729633,8.89614246 Z">
                                    </path>
                                    <path d="M13.23843,4.013842 C14.44543,4.137842 15.20043,5.094842 15.15543,6.435842">
                                    </path>
                                </g>
                            </svg></label>
                        <span>Sentuh LoveNya</span>
                    </div>
                    <div class="content">
                        <div class="sticker scale-out">
                            <img id="sticker-repet" src="" alt="">
                        </div>
                        <p id="subtitle"></p>
                        <div class="reply">Balas</div>
                    </div>
                </div>
                <div id="modal" class="modal">
                    <div class="modal-content">
                        <span id="closeModal" class="close-btn">&times;</span>
                        <img id="modalImage" src="/image/gif/mikirin-kamu.gif" alt="Modal Title Image" />
                        <h2>Tulis Pesannya</h2>

                        <!-- Textarea input for comments -->
                        <textarea id="whats" placeholder="Ketik disini..."></textarea>

                        <!-- Button inside modal -->
                        <button onclick="whatsapp(<%= no_whatsapp %>)">Kirim</button>
                    </div>
                </div>
            </div>
        </div>

    </div>

</body>
<script>
    window.onload = function () {
        var demoBox = document.querySelector('.box.demo');
        if (demoBox) {
            var ribbon = document.createElement('div');
            ribbon.classList.add('ribbon', 'ribbon-top-right');
            var span = document.createElement('span');
            span.textContent = 'Demo Script';
            ribbon.appendChild(span);
            demoBox.appendChild(ribbon);
        }
    };
</script>
<script>
    const audio = document.getElementById('audios');
    const loading = document.querySelector('.loading');
    const play = document.querySelector('.play_button');
    const box = document.querySelector('.box');
    const wp = document.querySelector('.wallpaper');
    const boxContent = document.querySelector('.box-content');
    const content = document.querySelector('.content');
    const sticker = document.querySelector('.sticker');
    // Get modal, open button, and close buttons
    const modal = document.getElementById("modal");
    const openModalBtn = document.querySelector('.reply');
    const closeModalBtn = document.getElementById("closeModal");
    const baseUrl = window.location.origin;

    // Open modal when button is clicked
    openModalBtn.onclick = function () {
        modal.style.display = "block";
    }

    // Close modal when the close button (X) is clicked
    closeModalBtn.onclick = function () {
        modal.style.display = "none"; // Close the modal
    }
    function whatsapp(number) {
    const whats = document.getElementById('whats').value.trim(); // Memastikan kita mendapatkan nilai terbaru
    window.location = "https://api.whatsapp.com/send?phone=" + encodeURIComponent(number) + "&text=" + encodeURIComponent(whats);
}

    // Close modal if the user clicks anywhere outside the modal
    window.onclick = function (event) {
        if (event.target == modal) {
            triggerShakeEffect(); // Trigger shake effect but don't close the modal
        }
    }

    // Function to trigger shake effect
    function triggerShakeEffect() {
        modal.classList.add("shake"); // Add the shake class to trigger the shake animation
        setTimeout(() => {
            modal.classList.remove("shake"); // Remove the shake class after the animation
        }, 500); // Duration of the shake effect
    }

    function checkBrowser(audioSelector, playSelector, boxSelector, wpSelector, loadingSelector) {
        // Ambil elemen DOM berdasarkan selector
        const audio = document.querySelector(audioSelector);
        const play = document.querySelector(playSelector);
        const box = document.querySelector(boxSelector);
        const wp = document.querySelector(wpSelector);
        const loading = document.querySelector(loadingSelector);


        // Cek apakah semua elemen ditemukan
        if (!audio || !play || !box || !wp || !loading) {
            loading.style.display = 'flex';
            loading.textContent = '';
            box.classList.add('loading-audio');
            return;
        }

        // Cek dukungan audio di browser
        const isAudioSupported = !!audio.canPlayType;
        if (!isAudioSupported) {
            loading.style.display = 'flex';
            play.style.display = 'none';
            loading.innerHTML = 'Browser tidak mendukung nih</br>Coba pakai device yang lain untuk membukanya</br>Semangat ;.';
            return;
        }

        // Tambahkan event listener untuk loadstart
        audio.addEventListener('loadstart', () => {
            loading.style.display = 'flex';
            loading.innerHTML = 'Tunggu sebentar ya...<p>Sedang menghubungkan ke server</p>';
            play.style.display = 'none';
            box.classList.add('loading-audio');
        });

        audio.addEventListener('error', (event) => {
            // Cek apakah src yang dipilih sudah benar
            loading.innerHTML = 'Coba lagi nanti. <p>Kalo tetap seperti ini terus, coba cek koneksi internet nya ya :<</p></p>Kalo tidak kasih tau aku;</p>';
            loading.style.display = 'flex';

        });


        // Tambahkan event listener untuk canplaythrough
        audio.addEventListener('loadeddata', () => {
            loading.style.display = 'none';
            play.style.display = 'flex';
            box.classList.remove('loading-audio');
            wp.style.animation = "nafas 5s ease-in-out infinite";
            //console.log('Audio siap diputar');
        });


    }

    //JAVASCRIPT AUDIO SUBTITLE//
    // Data Subtitle dan Sticker
    const data = <%= data %>;
    let currentSubtitleIndex = -1;
    let typedInstance; // Untuk Typed.js
    let highlightInterval;
    let teksSub = "...";
    let lastSticker = baseUrl+"/image/gif/" + data.sticker[0]; // Gambar pertama dari sticker sebagai default

    // Fungsi untuk highlight kata-kata
    function highlight(text, container, audio) {
        clearInterval(highlightInterval); // Hentikan interval sebelumnya jika ada
        container.innerHTML = ""; // Bersihkan kontainer sebelumnya
        const words = text.split(" "); // Pecah teks menjadi kata-kata
        words.forEach((word, index) => {
            const span = document.createElement("span");
            span.textContent = word + " ";
            container.appendChild(span);
        });

        // Tambahkan efek highlight
        let wordIndex = 0;
        const spans = container.querySelectorAll("span");

        highlightInterval = setInterval(() => {
            if (wordIndex > 0) spans[wordIndex - 1].classList.remove("highlight");
            if (wordIndex < spans.length) {
                spans[wordIndex].classList.add("highlight");
                wordIndex++;
            } else {
                clearInterval(highlightInterval);
            }
        }, 393); // Durasi per kata 393ms
    }

    // Fungsi untuk efek typing menggunakan Typed.js
    function typingEffectTyped(text, container) {
        if (typedInstance) typedInstance.destroy(); // Hentikan instansi sebelumnya
        typedInstance = new Typed(container, {
            strings: [text], // Masukkan teks
            typeSpeed: 50, // Kecepatan mengetik per karakter
            showCursor: false // Jangan tampilkan kursor
        });
    }

    // Fungsi untuk menampilkan subtitle dan gambar
    function showSubtitleAndImage(audio) {
        const subtitleDiv = document.getElementById("subtitle");
        const stickerDiv = document.getElementById("sticker-repet");

        // Tampilkan "..." saat audio dimulai
        audio.addEventListener("play", function () {
            subtitleDiv.textContent = teksSub;
            stickerDiv.src = lastSticker;
        });

        // Event untuk memantau waktu audio
        audio.addEventListener("timeupdate", function () {
            const currentTime = audio.currentTime;

            const newSubtitleIndex = data.subtitle.findIndex(
                (subtitle) => currentTime >= subtitle.start && currentTime <= subtitle.end
            );

            if (newSubtitleIndex !== -1 && newSubtitleIndex !== currentSubtitleIndex) {
                currentSubtitleIndex = newSubtitleIndex;
                teksSub = data.subtitle[newSubtitleIndex].text;
                // Pilih efek berdasarkan type
                if (data.type === "highlight") {
                    highlight(teksSub, subtitleDiv, audio);
                } else if (data.type === "typing") {
                    typingEffectTyped(teksSub, "#subtitle");
                } else {
                    subtitleDiv.textContent = teksSub;
                }

                // Update gambar sesuai subtitle
                lastSticker = `${baseUrl}/image/gif/${data.sticker[newSubtitleIndex]}`;
                stickerDiv.src = lastSticker;
            } else if (newSubtitleIndex === -1) {
                if(data.type === "typing"){
                subtitleDiv.textContent = "";
                }else{
                    subtitleDiv.textContent = teksSub;
                }
                stickerDiv.src = lastSticker; // Hapus gambar
            }
        });

        // Tampilkan "Selesai" saat audio selesai diputar
        audio.addEventListener("ended", function () {
            openModalBtn.style.display = "flex";
            subtitleDiv.textContent = "";
        });
    }

    // Fungsi playMusic yang sudah ada


    function playMusic() {
        audio.play();
        showSubtitleAndImage(audio);
        // Pause typing ketika audio dijeda
        // Pause efek ketika audio dijeda
        audio.addEventListener("pause", () => {
            if (typedInstance) typedInstance.stop();
            clearInterval(highlightInterval);
        });

        // Lanjutkan efek ketika audio diputar
        audio.addEventListener("play", () => {
            if (currentSubtitleIndex !== -1) {
                if (data.type === "highlight") {
                    highlight(data.subtitle[currentSubtitleIndex].text, document.getElementById("subtitle"));
                } else if (data.type === "typing") {
                    typingEffectTyped(data.subtitle[currentSubtitleIndex].text, "#subtitle");
                }
            }
        });


        play.style.display = "none";
        content.style.display = 'flex';
        setTimeout(() => {
            sticker.classList.remove('scale-out');
            sticker.classList.add('scale-in');
        }, 50)
        content.style.animation = "5s ease 0s infinite normal gerak";
        // Tambahkan kelas "scale-in" pada sticker untuk memulai transisi
        wp.style.animation = 'none';
        boxContent.style.backgroundColor = 'rgba(0, 0, 0, 0.479)';
    }

    window.addEventListener('load', checkBrowser('#audios', '.play_button', '.box', '.wallpaper', '.loading'));
</script>


</html>