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; For My Love💕&lt;/title&gt;
    &lt;style&gt;
    body {
        font-family: Tahoma, sans-serif;
        text-align: center;
        background-image: url(&#039;keje/1.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 {
    position: relative; /* Ensures the close button positions correctly */
    background: navy; /* Keeps the navy background */
    color: white;
    padding: 8px;
    text-align: center;
    font-weight: bold;
}

.close-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    color: white;
    background: transparent; /* Transparent background to blend with navy */
    border: none;
    outline: none;
}

.close-btn:hover {
    color: red; /* Change color on hover for better UX */
}

    .popup-content {
        padding: 10px;
    }

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

    .popup button {
        background: linear-gradient(to bottom, #e0e0e0, #b0b0b0);
        border: 1px solid #666;
        padding: 10px 16px;
        margin: 5px;
        cursor: pointer;
        font-size: 14px;
        font-weight: bold;
        border-radius: 5px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease-in-out;
        touch-action: manipulation; /* Improves mobile touch responsiveness */
    }

    .popup button:hover {
        background: linear-gradient(to bottom, #cfcfcf, #a0a0a0);
        box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.3);
    }

    .popup button:active,
    .popup button:focus {
        background: #999;
        box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.3);
        transform: scale(0.98); /* Slightly shrink button on tap */
    }

    .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;
            color: black;
        }

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

        .popup:nth-child(1) { top: 5%; left: 50%; transform: translateX(-50%); }
        .popup:nth-child(2) { top: 20%; left: 50%; transform: translateX(-50%); }
        .popup:nth-child(3) { bottom: 20%; left: 50%; transform: translateX(-50%); }
        .popup:nth-child(4) { bottom: 5%; left: 50%; transform: translateX(-50%); }
        .popup:nth-child(5) { top: 5%; left: 50%; transform: translateX(-50%); }
        /* .popup:nth-child(5) {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #C0C0C0;
            width: 90%;
            max-width: 350px;
        } */
    }

    @keyframes zoomIn {
        from { transform: scale(0.5); opacity: 0; }
        to { transform: scale(1); opacity: 1; }
    }


    &lt;/style&gt;

    &lt;script&gt;
        function closePopup(element) {
    element.parentElement.parentElement.style.display = &#039;none&#039;;
}

        &lt;/script&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;!-- &lt;span class=&quot;close-btn&quot; onclick=&quot;closePopup(this)&quot;&gt;✖&lt;/span&gt; --&gt;
        &lt;/div&gt;
        &lt;div class=&quot;popup-content&quot;&gt;
        &lt;img src=&quot;keje/2.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;Uwekk tk kira mahu ke tak, tangkap saya jugook 😜😜😜&lt;/p&gt;
            &lt;button onclick=&quot;showNext(2)&quot;&gt;Give Up&lt;/button&gt;
            &lt;button onclick=&quot;showNext(2)&quot;&gt;Cuba Lagi&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/9.jpeg&quot; alt=&quot;Caution&quot; &gt;
            &lt;p&gt;Takkn dah giveup 😏, tak dapat nyenyenye 🤡&lt;/p&gt;
            &lt;!-- &lt;button onclick=&quot;showNext(3)&quot;&gt;Tak Nak&lt;/button&gt; --&gt;
            &lt;button onclick=&quot;showNext(3)&quot;&gt;Usaha Tangga Kejayaan😤&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/6.jpeg&quot; alt=&quot;Happy Birthday&quot;&gt;
            &lt;p&gt;Ma lob mmg amat cemerlang!😎💕&lt;/p&gt;
            &lt;button onclick=&quot;showNext(4)&quot;&gt;Mestilah 🫣&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/8.png&quot; alt=&quot;Notice&quot; style=&quot;width: 150px; height: auto; max-width: 100%;&quot;&gt;
            &lt;p&gt;🫶🥰💕&lt;/p&gt;
            &lt;button onclick=&quot;playSong()&quot;&gt;Hadiah 🎁&lt;/button&gt;
            &lt;!-- &lt;button onclick=&quot;playSong()&quot;&gt;Click Me&lt;/button&gt; --&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;audio id=&quot;birthdaySong&quot; src=&quot;Besday.mp3&quot;&gt;&lt;/audio&gt;
    
    &lt;script src=&quot;https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2/dist/confetti.browser.min.js&quot;&gt;&lt;/script&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 final popup with transparency
        finalPopup.style.display = &#039;block&#039;;
        finalPopup.style.background = &quot;rgba(192, 192, 192, 0.8)&quot;;
        finalPopup.style.backdropFilter = &quot;blur(5px)&quot;;
        finalPopup.style.animation = &quot;fadeIn 1s ease-in-out&quot;; // Smooth appearance

        // Set the content inside the popup
        finalPopup.innerHTML = `
            &lt;div class=&quot;popup-header&quot; style=&quot;background: rgba(0, 0, 128, 0.8); color: white;&quot;&gt;🎉 Happy Birthday Sayangku! 🎉
                &lt;span class=&quot;close-btn&quot; onclick=&quot;closePopup(this)&quot;&gt;✖&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class=&quot;popup-content&quot;&gt;
                &lt;img src=&quot;keje/10.png&quot; alt=&quot;Birthday Celebration&quot;  style=&quot;width: 200px; height: auto; max-width: 100%;&quot;&gt;
                &lt;p style=&quot;color: black;&quot;&gt;Happy Birthday, sayang! Hari ini bukan sekadar hari lahir awak, tapi juga hari yang mengingatkan betapa berharganya awak dalam hidup saya. Every smile you give, every laugh you share, semuanya adalah cahaya yang menerangi dunia saya. Jangan penat nak layan perangai saya, sebab no matter what, my love for you will never fade. Saya sayang awak lebih dari apa yang kata-kata mampu ungkapkan, lebih dari apa yang masa boleh hitung. I love you in the deepest, purest way beyond words, beyond time. Semoga setiap impian awak menjadi kenyataan, and I&#039;ll always be by your side to love and cherish you, today and forever. 💖✨&lt;/p&gt;
            &lt;/div&gt;
        `;

        // Fireworks &amp; Confetti Effect
        launchFireworks();
    }

    function launchFireworks() {
        // Create multiple bursts of confetti
        let duration = 3 * 1000; // 3 seconds
        let animationEnd = Date.now() + duration;

        let interval = setInterval(() =&gt; {
            if (Date.now() &gt; animationEnd) {
                return clearInterval(interval);
            }

            // Fire confetti in different directions
            confetti({
                particleCount: 50,
                spread: 70,
                origin: { x: Math.random(), y: Math.random() * 0.6 }
            });

        }, 300);
    }
    

    document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
        let buttons = document.querySelectorAll(&quot;.popup button&quot;);

        buttons.forEach(button =&gt; {
            button.addEventListener(&quot;touchstart&quot;, function() {
                this.style.background = &quot;linear-gradient(to bottom, #cfcfcf, #a0a0a0)&quot;;
                this.style.boxShadow = &quot;3px 3px 6px rgba(0, 0, 0, 0.3)&quot;;
            });

            button.addEventListener(&quot;touchend&quot;, function() {
                this.style.background = &quot;linear-gradient(to bottom, #e0e0e0, #b0b0b0)&quot;;
                this.style.boxShadow = &quot;2px 2px 5px rgba(0, 0, 0, 0.2)&quot;;
            });
        });
    });


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


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