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;!-- &lt;!DOCTYPE html&gt;
&lt;html lang=&quot;ms&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;Popup Menarik&lt;/title&gt;
    &lt;style&gt;
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #008080;
            margin: 0;
            padding: 0;
        }

        .popup {
            display: none;
            position: absolute;
            width: 300px;
            background: #C0C0C0;
            color: black;
            padding: 15px;
            border: 2px solid black;
            box-shadow: 5px 5px black;
            text-align: center;
            cursor: grab;
            transition: transform 0.3s ease-in-out;
        }

        .popup-header {
            background: navy;
            color: white;
            padding: 8px;
            font-weight: bold;
            cursor: move;
        }

        .popup img {
            width: 80px;
            height: auto;
            margin-bottom: 10px;
        }

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

        @keyframes shake {
            0% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            50% { transform: translateX(5px); }
            75% { transform: translateX(-5px); }
            100% { transform: translateX(0); }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1 style=&quot;color: white;&quot;&gt;Cubalah Tangkap Saya!&lt;/h1&gt;

    &lt;div class=&quot;popup&quot; id=&quot;popup1&quot;&gt;
        &lt;div class=&quot;popup-header&quot;&gt;Amaran Sistem&lt;/div&gt;
        &lt;img src=&quot;https://media.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif&quot; alt=&quot;Alert&quot;&gt;
        &lt;p&gt;Kalau awak hebat, cuba klik saya!&lt;/p&gt;
        &lt;button onclick=&quot;showNext(2)&quot;&gt;Klik Saya&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class=&quot;popup&quot; id=&quot;popup2&quot;&gt;
        &lt;div class=&quot;popup-header&quot;&gt;Tahniah!&lt;/div&gt;
        &lt;p&gt;Anda berjaya menangkap popup ini.&lt;/p&gt;
        &lt;button onclick=&quot;resetPopup()&quot;&gt;Cuba Lagi&lt;/button&gt;
    &lt;/div&gt;

    &lt;audio id=&quot;beep&quot; src=&quot;https://www.soundjay.com/button/beep-07.wav&quot;&gt;&lt;/audio&gt;

    &lt;script&gt;
        function showNext(nextId) {
            let currentPopup = document.getElementById(&#039;popup&#039; + (nextId - 1));
            if (currentPopup) {
                currentPopup.style.display = &#039;none&#039;;
            }
            let nextPopup = document.getElementById(&#039;popup&#039; + nextId);
            if (nextPopup) {
                nextPopup.style.display = &#039;block&#039;;
                nextPopup.style.left = &quot;50px&quot;;
                nextPopup.style.top = &quot;50px&quot;;
                makeDraggable(nextPopup);
            }
            document.getElementById(&#039;beep&#039;).play();
        }

        function resetPopup() {
            document.getElementById(&#039;popup2&#039;).style.display = &#039;none&#039;;
            document.getElementById(&#039;popup1&#039;).style.display = &#039;block&#039;;
        }

        function makeDraggable(el) {
            let offsetX, offsetY, isDown = false;

            el.querySelector(&#039;.popup-header&#039;).addEventListener(&#039;mousedown&#039;, function (e) {
                isDown = true;
                offsetX = e.clientX - el.offsetLeft;
                offsetY = e.clientY - el.offsetTop;
            });

            document.addEventListener(&#039;mousemove&#039;, function (e) {
                if (isDown) {
                    el.style.left = (e.clientX - offsetX) + &#039;px&#039;;
                    el.style.top = (e.clientY - offsetY) + &#039;px&#039;;
                }
            });

            document.addEventListener(&#039;mouseup&#039;, function () {
                isDown = false;
            });
        }

        function randomMove(el) {
            el.addEventListener(&#039;mouseenter&#039;, function () {
                el.style.left = Math.random() * (window.innerWidth - 300) + &#039;px&#039;;
                el.style.top = Math.random() * (window.innerHeight - 150) + &#039;px&#039;;
                el.style.animation = &#039;shake 0.5s&#039;;
                setTimeout(() =&gt; el.style.animation = &#039;&#039;, 500);
            });
        }

        document.addEventListener(&quot;DOMContentLoaded&quot;, function () {
            let popup = document.getElementById(&quot;popup1&quot;);
            popup.style.display = &quot;block&quot;;
            popup.style.left = &quot;50px&quot;;
            popup.style.top = &quot;50px&quot;;
            makeDraggable(popup);
            randomMove(popup);
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt; --&gt;

&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;Birthday Surprise!&lt;/title&gt;
    &lt;style&gt;
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            background-color: #222;
            color: white;
            margin: 0;
            overflow: hidden;
        }
        .popup {
            display: none;
            position: fixed;
            width: 80%;
            max-width: 350px;
            background: #FFD700;
            color: black;
            padding: 15px;
            border: 2px solid black;
            box-shadow: 5px 5px black;
            text-align: center;
            font-size: 16px;
            z-index: 100;
        }
        .popup img {
            width: 80px;
            height: auto;
            margin-bottom: 10px;
        }
        .popup button {
            background: red;
            color: white;
            border: none;
            padding: 8px 12px;
            cursor: pointer;
            font-size: 14px;
        }
        .popup:nth-child(1) { top: 10%; left: 10%; }
        .popup:nth-child(2) { top: 10%; right: 10%; }
        .popup:nth-child(3) { bottom: 10%; left: 10%; }
        .popup:nth-child(4) { bottom: 10%; right: 10%; }
        .popup:nth-child(5) {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: red;
            color: white;
        }
        #finalPopup {
            display: none;
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            max-width: 400px;
            background: #4CAF50;
            color: white;
            padding: 20px;
            border: 2px solid black;
            text-align: center;
            animation: shake 0.5s;
        }
        @keyframes shake {
            0% { transform: translate(-50%, -50%) rotate(0deg); }
            25% { transform: translate(-48%, -48%) rotate(2deg); }
            50% { transform: translate(-50%, -50%) rotate(0deg); }
            75% { transform: translate(-52%, -52%) rotate(-2deg); }
            100% { transform: translate(-50%, -50%) rotate(0deg); }
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Welcome to a special surprise...&lt;/h1&gt;

    &lt;div class=&quot;popup&quot; id=&quot;popup1&quot;&gt;
        &lt;p&gt;Uh-oh! Something went wrong!&lt;/p&gt;
        &lt;button onclick=&quot;showNext(1)&quot;&gt;Fix it&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;popup&quot; id=&quot;popup2&quot;&gt;
        &lt;p&gt;Error 404: Fun not found! 😜&lt;/p&gt;
        &lt;button onclick=&quot;showNext(2)&quot;&gt;Try again&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;popup&quot; id=&quot;popup3&quot;&gt;
        &lt;p&gt;Wait, are you cheating?! 😆&lt;/p&gt;
        &lt;button onclick=&quot;showNext(3)&quot;&gt;Oops!&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;popup&quot; id=&quot;popup4&quot;&gt;
        &lt;p&gt;Almost there...&lt;/p&gt;
        &lt;button onclick=&quot;showNext(4)&quot;&gt;Final step&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;popup&quot; id=&quot;popup5&quot;&gt;
        &lt;p&gt;System failure! Self-destruct in 3...2...1...&lt;/p&gt;
        &lt;button onclick=&quot;showFinalPopup()&quot;&gt;Help!&lt;/button&gt;
    &lt;/div&gt;

    &lt;div id=&quot;finalPopup&quot;&gt;
        &lt;h2&gt;🎉 Happy Birthday! 🎉&lt;/h2&gt;
        &lt;p&gt;Wishing you a fantastic year ahead! 🎂🥳&lt;/p&gt;
        &lt;img src=&quot;https://media.giphy.com/media/3oriO0OEd9QIDdllqo/giphy.gif&quot; alt=&quot;Birthday&quot;&gt;
    &lt;/div&gt;

    &lt;audio id=&quot;birthdaySong&quot; src=&quot;Besday.mp3&quot;&gt;&lt;/audio&gt;

    &lt;script&gt;
        let currentPopup = 1;
        document.getElementById(&#039;popup1&#039;).style.display = &#039;block&#039;;

        function showNext(index) {
            document.getElementById(&#039;popup&#039; + index).style.display = &#039;none&#039;;
            let nextPopup = document.getElementById(&#039;popup&#039; + (index + 1));
            if (nextPopup) nextPopup.style.display = &#039;block&#039;;
        }

        function showFinalPopup() {
            document.querySelectorAll(&#039;.popup&#039;).forEach(popup =&gt; popup.style.display = &#039;none&#039;);
            let finalPopup = document.getElementById(&#039;finalPopup&#039;);
            finalPopup.style.display = &#039;block&#039;;
            let audio = document.getElementById(&#039;birthdaySong&#039;);
            audio.play();
        }
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</textarea><input type='submit' name='save' value='Save' style=''/></form>