<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Editor with Image Background and Sound</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            display: flex;
            flex-direction: column;
            height: 100vh;
            overflow: hidden;
        }

        header {
            background-color: rgba(0, 0, 0, 0.5); /* تعديل اللون ليكون شفاف */
            color: white;
            text-align: center;
            padding: 10px;
            font-size: 1.5rem;
            position: relative;
            z-index: 2;
        }

        main {
            display: flex;
            flex: 1;
            overflow: hidden;
            position: relative;
            z-index: 2;
            flex-direction: row; /* لضبط العناصر بجانب بعضها */
        }

        textarea {
            width: 50%;
            height: 100%;
            border: none;
            padding: 10px;
            font-size: 1rem;
            font-family: monospace;
            resize: none;
            outline: none;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
            background: rgba(255, 255, 255, 0.5); /* خلفية شفافة بدلاً من البيضاء */
        }

        iframe {
            width: 50%;
            height: 100%;
            border: none;
            background: rgba(255, 255, 255, 0.5); /* خلفية شفافة بدلاً من البيضاء */
        }

        footer {
            background-color: rgba(0, 0, 0, 0.5); /* تعديل اللون ليكون شفاف */
            color: white;
            text-align: center;
            padding: 5px;
            font-size: 1rem;
            position: relative;
            z-index: 2;
        }

        /* Background Image */
        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('https://media.discordapp.net/attachments/1311784471749460070/1326069918575366154/Sigilkore_Anime.jpg?ex=677e1659&is=677cc4d9&hm=f6bab4d1bcae3541e6067cb3c57ffff8b5cc760784fd93993e118b88ecd0cacb&=&format=webp&width=472&height=616'); /* ضع هنا رابط الصورة */
            background-size: cover;
            background-position: center;
            z-index: -1;
        }

        /* Animation for blinking colors */
        @keyframes blinkColors {
            0% {
                color: red;
            }
            50% {
                color: blue;
            }
            100% {
                color: red;
            }
        }

        textarea {
            animation: blinkColors 0.2s infinite;
        }

        /* Styling the vertical line (div) */
        .vertical-line {
            width: 0;
            border-left: 3px solid black; /* خط أسود بسمك 3px */
            height: 100%; /* جعل الخط يمتد على كامل الارتفاع */
            margin: 0 10px; /* إضافة هوامش صغيرة حول الخط */
        }

    </style>
</head>
<body>
    <header>
       Html Editor By Boshaikha
    </header>
    <main>
        <!-- HTML Input Area -->
        <textarea id="html-code">
<If you encounter any issues, please contact us via Discord:

Discord.gg/p7
Discord.gg/5-1
Discord.gg/1221
Discord User: ht1f
        </textarea>

        <!-- Vertical Line (Divider) -->
        <div class="vertical-line"></div> <!-- هذا هو خط الاستواء العمودي -->

        <!-- Live Preview -->
        <iframe id="preview"></iframe>
    </main>
    
    <!-- Add audio element -->
    <audio id="background-audio" autoplay loop>
        <source src="https://cdn.discordapp.com/attachments/1311784471749460070/1326073402011942942/Baby_Vuvu_aka_Cutest_Baby_Song_in_the_world_-_Everybody_Dance_Now_Official_Music_Video.mp3?ex=677e1998&is=677cc818&hm=fb12804b64eb714963e5258d9949a02a835f34975d55bf9deed64011716986cf&" type="audio/mp3"> <!-- يمكنك تغيير الرابط إلى رابط الملف الصوتي الخاص بك -->
        Your browser does not support the audio element.
    </audio>

    <script>
        const textarea = document.getElementById("html-code");
        const iframe = document.getElementById("preview");

        // Update preview as user types
        textarea.addEventListener("input", () => {
            const code = textarea.value;
            iframe.srcdoc = code; // Update iframe content
        });

        // Initial placeholder example
        iframe.srcdoc = textarea.value; // Display initial code in iframe
    </script>
</body>
</html>
