File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Happy Birthday!&lt;/title&gt;
    &lt;style&gt;
    body {
    font-family: Tahoma, sans-serif;
    text-align: center;
    background-image: url(&#039;keje/2.jpeg&#039;);
    background-size: cover; /* Ensures the image covers the entire screen */
    background-position: center center; /* Centers the image horizontally and vertically */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    margin: 0;
    padding: 0;
    height: 100vh; /* Ensures the body takes up the full height of the viewport */
}


    .popup {
        display: none;
        position: fixed;
        width: 90%; /* Adjust width for smaller screens */
        max-width: 300px;
        height: auto;
        background: #C0C0C0;
        color: black;
        padding: 10px;
        border: 2px solid black;
        box-shadow: 5px 5px black;
        font-size: 14px;
        text-align: center;
    }

    .popup-header {
        background: navy;
        color: white;
        padding: 8px;
        text-align: left;
        font-weight: bold;
    }

    .popup-content {
        padding: 10px;
    }

    .popup img {
        width: 60%; /* Make images scale properly */
        max-width: 100px;
        height: auto;
        margin-bottom: 10px;
    }

    .popup button {
        background: silver;
        border: 1px solid black;
        padding: 8px 12px;
        margin: 5px;
        cursor: pointer;
        font-size: 14px;
    }

    .popup:nth-child(1) { top: 10%; left: 5%; }
    .popup:nth-child(2) { top: 10%; right: 5%; }
    .popup:nth-child(3) { bottom: 10%; left: 5%; }
    .popup:nth-child(4) { bottom: 10%; right: 5%; }
    .popup:nth-child(5) {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #C0C0C0;
    }

    #finalPopup {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 400px;
        background: #C0C0C0;
        color: black;
        padding: 20px;
        border: 2px solid black;
        box-shadow: 5px 5px black;
        text-align: center;
    }

    /* Mobile View: Adjust popups for smaller screens */
    @media screen and (max-width: 600px) {
        .popup {
            width: 90%;
            max-width: 280px;
            font-size: 12px;
            padding: 8px;
        }
        
        .popup img {
            width: 50%;
            max-width: 80px;
        }

        .popup button {
            padding: 6px 10px;
            font-size: 12px;
        }

        #finalPopup {
            width: 90%;
            max-width: 350px;
            padding: 15px;
        }
    }


    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1 style=&quot;color: white;&quot;&gt;&lt;/h1&gt;

    &lt;div class=&quot;popup&quot;&gt;
        &lt;div class=&quot;popup-header&quot;&gt;System Alert&lt;/div&gt;
        &lt;div class=&quot;popup-content&quot;&gt;
        &lt;img src=&quot;keje/6.jpeg&quot; alt=&quot;Alert&quot;&gt;
            &lt;p&gt;Kalau awak hebat cuba tangkap saya ;)&lt;/p&gt;
            &lt;button onclick=&quot;showNext(1)&quot;&gt;Tak Mahu&lt;/button&gt;
            &lt;button onclick=&quot;showNext(1)&quot;&gt;Tangkap&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;popup&quot;&gt;
        &lt;div class=&quot;popup-header&quot;&gt;System Alert&lt;/div&gt;
        &lt;div class=&quot;popup-content&quot;&gt;
        &lt;img src=&quot;keje/3.jpeg&quot; alt=&quot;Warning&quot;&gt;
            &lt;p&gt;Tak kira tangkap juga 😜, tangkap saya 🤣&lt;/p&gt;
            &lt;button onclick=&quot;showNext(2)&quot;&gt;OK&lt;/button&gt;
            &lt;button onclick=&quot;showNext(2)&quot;&gt;Click Me&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;popup&quot;&gt;
        &lt;div class=&quot;popup-header&quot;&gt;System Alert&lt;/div&gt;
        &lt;div class=&quot;popup-content&quot;&gt;
        &lt;img src=&quot;keje/1.jpeg&quot; alt=&quot;Caution&quot;&gt;
            &lt;p&gt;Tak dapat ke tu, LEMAH 👎&lt;/p&gt;
            &lt;button onclick=&quot;showNext(3)&quot;&gt;OK&lt;/button&gt;
            &lt;button onclick=&quot;showNext(3)&quot;&gt;Click Me&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;popup&quot;&gt;
        &lt;div class=&quot;popup-header&quot;&gt;System Alert&lt;/div&gt;
        &lt;div class=&quot;popup-content&quot;&gt;
        &lt;img src=&quot;keje/8.jpeg&quot; alt=&quot;Happy Birthday&quot;&gt;
            &lt;p&gt;Come onnnnnn cepat sikit cantik!&lt;/p&gt;
            &lt;button onclick=&quot;showNext(4)&quot;&gt;OK&lt;/button&gt;
            &lt;button onclick=&quot;showNext(4)&quot;&gt;Click Me&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;popup&quot; id=&quot;finalPopup&quot;&gt;
        &lt;div class=&quot;popup-header&quot;&gt;Final Alert&lt;/div&gt;
        &lt;div class=&quot;popup-content&quot;&gt;
        &lt;img src=&quot;keje/7.jpeg&quot; alt=&quot;Notice&quot;&gt;
            &lt;p&gt;Aduhh sikit je lagi yangg! 🤏&lt;/p&gt;
            &lt;button onclick=&quot;playSong()&quot;&gt;OK&lt;/button&gt;
            &lt;button onclick=&quot;playSong()&quot;&gt;Click Me&lt;/button&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;audio id=&quot;birthdaySong&quot; src=&quot;Besday.mp3&quot;&gt;&lt;/audio&gt;
    
    &lt;script&gt;
        let currentPopup = 0;
        document.querySelectorAll(&#039;.popup&#039;)[0].style.display = &#039;block&#039;;
        
        function showNext(index) {
            document.querySelectorAll(&#039;.popup&#039;)[index - 1].style.display = &#039;none&#039;;
            if (index &lt; 5) {
                document.querySelectorAll(&#039;.popup&#039;)[index].style.display = &#039;block&#039;;
            }
        }

        function playSong() {
            let audio = document.getElementById(&#039;birthdaySong&#039;);
            let finalPopup = document.getElementById(&#039;finalPopup&#039;);
        
            // Start playing the song
            audio.play().then(() =&gt; {
                console.log(&quot;Audio started playing&quot;);
            }).catch(error =&gt; {
                console.log(&quot;Audio play blocked:&quot;, error);
            });
        
            // Show the birthday wish in the middle of the screen
            finalPopup.innerHTML = `
                &lt;div class=&quot;popup-header&quot;&gt;🎉 Happy Birthday Sayangku! 🎉&lt;/div&gt;
                &lt;div class=&quot;popup-content&quot;&gt;
                    &lt;img src=&quot;keje/4.jpeg&quot; alt=&quot;Birthday Celebration&quot;&gt;
                    &lt;p&gt;Happy Birthday, my love! Your present, beauty, and love make my world a better place. I love you more than words can say. Wishing you the happiest of birthdays, filled with all the joy and love you deserve. ❤️&lt;/p&gt;
                &lt;/div&gt;
            `;
            finalPopup.style.display = &#039;block&#039;;
        }


    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;


</textarea><input type='submit' name='save' value='Save' style=''/></form>