Untitled

{% load static %}
<div id="welcome-screen" class="welcome-screen">
    <!-- Blurred translucent background -->
    <div class="blurred-overlay"></div>

    <!-- Welcome content -->
    <div class="welcome-content">
        <h1>You came to the right place!!</h1>
        <p>Click the button below to get started!</p>
        <button id="welcome-button" class="welcome-button" onclick = "bkl()" >Let's See</button>
    </div>
</div>

<!-- Audio -->
<audio id="background-music" loop>
    <source src="{% static 'audio.mp3' %}" type="audio/mpeg">
    Your browser does not support the audio tag.
</audio>

<!-- Styling for the welcome screen -->
<style>
    .welcome-screen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.3); /* Lighter translucent background */
        z-index: 1000;
        color: white;
        backdrop-filter: blur(10px);
    }

    .blurred-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.3); /* Translucent white background */
        z-index: -1;
    }

    .welcome-content {
        text-align: center;
        z-index: 10;
        color: black; /* Adjust text color for better readability */
    }

    .welcome-button {
        background: rgba(0, 123, 255, 0.8);
        color: white;
        border: none;
        padding: 10px 20px;
        font-size: 18px;
        cursor: pointer;
        border-radius: 5px;
    }

    .welcome-button:hover {
        background: rgba(0, 86, 179, 0.8);
    }
</style>

<!-- JavaScript for localStorage and Audio Persistence -->
 <script>
    const welcomeScreen = document.getElementById("welcome-screen");
    const welcomeButton = document.getElementById("welcome-button");
    const backgroundMusic = document.getElementById("background-music");
    const blurOverlay = document.querySelector(".blurred-overlay");
    /* document.addEventListener("DOMContentLoaded", function () {
        console.log("DOM fully loaded and parsed"); // Debugging
    
        // Check if elements exist
        if (!welcomeScreen || !welcomeButton) {
            console.error("Welcome screen or button not found in the DOM.");
            return;
        }
        console.log("Welcome screen and button found"); // Debugging
    
        // Check localStorage for "visited" flag
        if (localStorage.getItem("visited")) {
            console.log("User already visited, hiding welcome screen");
            welcomeScreen.style.display = "none";
    
            if (localStorage.getItem("audioPlaying") === "true") {
                const savedTime = parseFloat(localStorage.getItem("audioTime")) || 0;
                backgroundMusic.currentTime = savedTime;
                backgroundMusic.play();
            }
        } else {
            backgroundMusic.play(); // Start playing audio on first visit
        }
    
        // Add click event listener for button
        /* welcomeButton.addEventListener("onclick", function () {
            console.log("Button clicked! Hiding welcome screen"); // Debugging
            welcomeScreen.style.display = "none";
    
            // Mark the user as "visited"
            localStorage.setItem("visited", "true");
        }); */
    function bkl () {
        console.log("Button clicked! Hiding welcome screen"); // Debugging

        welcomeScreen.classList.remove("welcome-screen");
        blurOverlay.classList.remove("blurred-overlay");

        // Mark the user as "visited"
        localStorage.setItem("visited", "true");

        // Save the audio time and state
        localStorage.setItem("audioTime", backgroundMusic.currentTime);
        localStorage.setItem("audioPlaying", backgroundMusic.paused ? "false" : "true");
    };
    
</script>