<!--
    - Copyright (c) 2024 Html Writer (K Karan) All rights reserved.

    -- Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to use the Software for personal and learning purposes only, subject to the following conditions --

##Conditions##

    - The Software may not be used for commercial purposes.
    - The Software may not be distributed, sublicensed, or sold.

##Limitations##

**The Software is provided "as is", without warranty of any kind, express or implied, including but not limited to the warranties of merchantability, fitness for a particular purpose, and noninfringement. In no event shall the authors or copyright holders be liable for any claim, damages, or other liability, whether in an action of contract, tort, or otherwise, arising from, out of, or in connection with the Software or the use or other dealings in the Software.**

-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap"
        rel="stylesheet">

    <!--css-->
    <link rel="stylesheet" href="/styles/main.css">
    <link rel="stylesheet" href="/styles/secondary.css">

    <script async>

        // Cdn Scripts (Ace 1.36.5 - 2024 ) ColorPicker(2.12.3)
        function loadScript(url, callback) {
            const script = document.createElement('script');
            script.src = url;
            script.async = true;

            script.onload = function () {
                console.log(`Script ${url} loaded successfully`);
                callback(true);
            };

            script.onerror = function () {
                console.error(`Failed to load script ${url}. Retrying...`);
                setTimeout(() => {
                    script.remove();
                    loadScript(url, callback);
                }, 1000);
            };

            document.head.appendChild(script);
        }

        // main cdn scripts
        const mainScriptUrls = [
            "https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ace.js",
            "https://cloud9ide.github.io/emmet-core/emmet.js"
        ];

        const otherScriptUrls = [
            "https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ext-emmet.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ext-beautify.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ext-language_tools.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/ext-spellcheck.min.js",
            "https://cdnjs.cloudflare.com/ajax/libs/ace/1.36.5/snippets/javascript.min.js",
            "https://unpkg.com/vanilla-picker@2.12.3"
        ];

        // Load main scripts in parallel
        let mainScriptsLoaded = 0;
        mainScriptUrls.forEach(url => {
            loadScript(url, function (success) {
                if (success) {
                    mainScriptsLoaded++;
                    if (mainScriptsLoaded === mainScriptUrls.length) {
                        loadNextScript();
                    }
                }
            });
        });

        // Load other scripts sequentially
        let index = 0;
        function loadNextScript() {
            if (index >= otherScriptUrls.length) return;

            const url = otherScriptUrls[index];
            loadScript(url, function (success) {
                if (!success) return;
                console.log(`Loaded ${url}`);
                index++;
                loadNextScript();
            });
        }
    </script>

</head>

<body>
    <!--Loading Screens-->
    <div class="loading-screen">
        <div class="Loading-bar">
            <div class="loader"></div>
        </div>
    </div>
    <div class="offline-screen" style="display: none;">
        <div class="Offline-screen-icon">
            <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
                <path fill="currentColor"
                    d="M19.8 22.6L17.15 20H6.5q-2.3 0-3.9-1.6T1 14.5q0-1.925 1.188-3.425T5.25 9.15q.075-.2.15-.387t.15-.413L1.4 4.2l1.4-1.4l18.4 18.4zM6.5 18h8.65L7.1 9.95q-.05.275-.075.525T7 11h-.5q-1.45 0-2.475 1.025T3 14.5t1.025 2.475T6.5 18m15.1.75l-1.45-1.4q.425-.35.638-.812T21 15.5q0-1.05-.725-1.775T18.5 13H17v-2q0-2.075-1.463-3.537T12 6q-.675 0-1.3.163t-1.2.512l-1.45-1.45q.875-.6 1.863-.912T12 4q2.925 0 4.963 2.038T19 11q1.725.2 2.863 1.488T23 15.5q0 .975-.375 1.813T21.6 18.75m-6.775-6.725" />
            </svg>
        </div>
        <div class="OfflineHeading">No Internet!</div>
        <p class="OfflineText">You are currently offline. Please check your internet connection.</p>

    </div>

    <!--Main Nav-->
    <nav>
        <a data-id="editorHtml" class="active">
            <svg class="nav-ico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                <g fill="none">
                    <rect width="256" height="256" fill="#e34c26" rx="60" />
                    <path fill="#fff"
                        d="m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z" />
                    <path fill="#ebebeb"
                        d="M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z" />
                </g>
            </svg>
            Html
        </a>
        <a data-id="editorCSS">
            <svg class="nav-ico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                <g fill="none">
                    <rect width="256" height="256" fill="#0277bd" rx="60" />
                    <path fill="#ebebeb"
                        d="m53.753 102.651l2.862 31.942h71.481v-31.942zM128.095 38H48l2.904 31.942h77.191zm0 180.841v-33.233l-.14.037l-35.574-9.605l-2.274-25.476H58.042l4.475 50.154l65.431 18.164z" />
                    <path fill="#fff"
                        d="m167.318 134.593l-3.708 41.426l-35.625 9.616v33.231l65.483-18.148l.48-5.397l7.506-84.092l.779-8.578L208 38h-80.015v31.942h45.009l-2.906 32.709h-42.103v31.942z" />
                </g>
            </svg>
            Style
        </a>
        <a data-id="editorJS">
            <svg class="nav-ico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                <g fill="none">
                    <rect width="256" height="256" fill="#f0db4f" rx="60" />
                    <path fill="#323330"
                        d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.889-3.092 12.889-15.12v-81.798h24.058v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.579c-17.357-7.388-28.871-16.668-28.871-36.258c0-18.044 13.748-31.792 35.229-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.731 12.029c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.139 14.778 14.608l6.014 2.577c20.449 8.765 31.963 17.699 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574" />
                </g>
            </svg>
            Script
        </a>



        <button id="topRightMenuButton">
            <svg xmlns="http://www.w3.org/2000/svg" width="1.8em" height="1.8em" viewBox="0 0 24 24">
                <path fill="currentColor" d="M3 4h18v2H3zm0 7h18v2H3zm0 7h18v2H3z" />
            </svg>
        </button>

    </nav>

    <!-- Top Right Menu-->
    <div id="topRightMenu" class="top-right-menu">
        <div class="menu-item">

            <button id="settingMenu">
                <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46a.5.5 0 0 0-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65A.49.49 0 0 0 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1a.6.6 0 0 0-.18-.03c-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46a.5.5 0 0 0 .61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1q.09.03.18.03c.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64zm-1.98-1.71c.04.31.05.52.05.73s-.02.43-.05.73l-.14 1.13l.89.7l1.08.84l-.7 1.21l-1.27-.51l-1.04-.42l-.9.68c-.43.32-.84.56-1.25.73l-1.06.43l-.16 1.13l-.2 1.35h-1.4l-.19-1.35l-.16-1.13l-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7l-1.06.43l-1.27.51l-.7-1.21l1.08-.84l.89-.7l-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13l-.89-.7l-1.08-.84l.7-1.21l1.27.51l1.04.42l.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43l.16-1.13l.2-1.35h1.39l.19 1.35l.16 1.13l1.06.43c.43.18.83.41 1.23.71l.91.7l1.06-.43l1.27-.51l.7 1.21l-1.07.85l-.89.7zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4s4-1.79 4-4s-1.79-4-4-4m0 6c-1.1 0-2-.9-2-2s.9-2 2-2s2 .9 2 2s-.9 2-2 2" />
                </svg>
            </button>
        </div>

        <div class="menu-item">
            <button class="btn-upload" id="uploadButton" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2"
                        d="m14 11l2 2l-2 2m-4 0l-2-2l2-2M3 6v10.8c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.427.218.987.218 2.105.218h11.606c1.118 0 1.677 0 2.104-.218c.377-.192.683-.498.875-.874C21 18.48 21 17.92 21 16.8V9.2c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874C19.48 6 18.92 6 17.8 6H12M3 6h9M3 6a2 2 0 0 1 2-2h3.675c.489 0 .734 0 .964.055q.308.075.578.24c.202.124.375.297.72.643L12 6" />
                </svg>
            </button>
        </div>

        <div class="menu-item">
            <button class="btn-save" id="saveButton">
                <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M21 7v12q0 .825-.587 1.413T19 21H5q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h12zm-2 .85L16.15 5H5v14h14zM12 18q1.25 0 2.125-.875T15 15t-.875-2.125T12 12t-2.125.875T9 15t.875 2.125T12 18m-6-8h9V6H6zM5 7.85V19V5z" />
                </svg>
            </button>
        </div>

        <div class="menu-item">
            <button id="beautify"><svg width="2em" height="2em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="m12.89 3l1.96.4L11.11 21l-1.96-.4zm6.7 9L16 8.41V5.58L22.42 12L16 18.41v-2.83zM1.58 12L8 5.58v2.83L4.41 12L8 15.58v2.83z" />
                </svg>
            </button>
        </div>
        <div class="menu-item">
            <button id="search">
                <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2" d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6" />
                </svg></button>
        </div>
        <div class="menu-item">
            <button id="menu">
                <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
                    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="1.5"
                        d="m6.75 7.5l3 2.25l-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25" />
                </svg>
            </button>
        </div>
    </div>

    <!--Editor Sections-->
    <div class="editor-wrapper">
        <div id="editorHtml"></div>
        <div id="editorCSS"></div>
        <div id="editorJS"></div>
    </div>
    <div class="preview-btn">
        <button class="preview" id="ot">
            <svg xmlns="http://www.w3.org/2000/svg" width="2.2em" height="2.2em" viewBox="0 0 24 24">
                <path fill="currentColor"
                    d="M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712" />
            </svg>
        </button>
    </div>
    <!--ToolBar -->
    <div class="bottom-nav">
        <button id="picker">
            <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24">
                <path fill="currentColor"
                    d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5c0 .12.05.23.13.33c.41.47.64 1.06.64 1.67A2.5 2.5 0 0 1 12 22m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8c.28 0 .5-.22.5-.5a.54.54 0 0 0-.14-.35c-.41-.46-.63-1.05-.63-1.65a2.5 2.5 0 0 1 2.5-2.5H16c2.21 0 4-1.79 4-4c0-3.86-3.59-7-8-7" />
                <circle cx="6.5" cy="11.5" r="1.5" fill="currentColor" />
                <circle cx="9.5" cy="7.5" r="1.5" fill="currentColor" />
                <circle cx="14.5" cy="7.5" r="1.5" fill="currentColor" />
                <circle cx="17.5" cy="11.5" r="1.5" fill="currentColor" />
            </svg>
        </button>
        <div class="scroll-container">
            <div class="tools">
                <button id="copyButton">
                    <svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                            <path
                                d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
                            <path d="M4.012 16.737A2 2 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1" />
                        </g>
                    </svg>
                </button>
                <button id="pasteButton">
                    <svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path fill="currentColor"
                            d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-7 0c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1m6 18H6c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1h1v1c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V4h1c.55 0 1 .45 1 1v14c0 .55-.45 1-1 1" />
                    </svg>
                </button>

                <button id="tab">
                    <svg class="btnico" viewBox="0 0 12 12" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M2.7832 3H12V3.75H2.7832L4.01367 4.98633L3.48633 5.51367L1.34766 3.375L3.48633 1.23633L4.01367 1.76367L2.7832 3ZM0.75 1.5V5.25H0V1.5H0.75ZM7.98633 7.01367L8.51367 6.48633L10.6523 8.625L8.51367 10.7637L7.98633 10.2363L9.2168 9H0V8.25H9.2168L7.98633 7.01367ZM11.25 10.5V6.75H12V10.5H11.25Z"
                            fill="currentColor" stroke-width="0.4" />
                    </svg>

                </button>

                <button id="undo"><svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            color="currentColor">
                            <path d="M11 6h4.5a4.5 4.5 0 1 1 0 9H4" />
                            <path d="M7 12s-3 2.21-3 3s3 3 3 3" />
                        </g>
                    </svg></button>

                <button id="redo"><svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

                        <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            color="currentColor">
                            <path d="M13 6H8.5a4.5 4.5 0 0 0 0 9H20" />
                            <path d="M17 12s3 2.21 3 3s-3 3-3 3" />
                        </g>
                    </svg></button>




                <button id="moveUp"><svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path fill="currentColor"
                            d="M3 21v-2h18v2zm8-4v-6.175L9.4 12.4L8 11l4-4l4 4l-1.4 1.4l-1.6-1.575V17zM3 5V3h18v2z" />
                    </svg>

                </button>


                <button id="moveDown"><svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

                        <path fill="currentColor"
                            d="M3 5V3h18v2zm9 12l-4-4l1.4-1.4l1.6 1.575V7h2v6.175l1.6-1.575L16 13zm-9 4v-2h18v2z" />
                    </svg></button>



                <button id="copyLinesUp"><svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            d="m15 7.674l1.409-1.487C17.159 5.396 17.534 5 18 5s.841.396 1.591 1.187L21 7.674m-3-2.587v4.375c0 2.234 0 3.35-.447 4.335s-1.287 1.72-2.968 3.191L14 17.5M3 6.5c0-1.225 0-1.838.238-2.306c.21-.411.545-.746.956-.956C4.662 3 5.274 3 6.5 3s1.838 0 2.306.238c.411.21.746.545.956.956C10 4.662 10 5.274 10 6.5s0 1.838-.238 2.306c-.21.411-.545.746-.956.956C8.338 10 7.726 10 6.5 10s-1.838 0-2.306-.238a2.2 2.2 0 0 1-.956-.956C3 8.338 3 7.726 3 6.5m0 11c0-1.225 0-1.838.238-2.306c.21-.411.545-.746.956-.956C4.662 14 5.274 14 6.5 14s1.838 0 2.306.238c.411.21.746.545.956.956c.238.468.238 1.08.238 2.306s0 1.838-.238 2.306c-.21.411-.545.746-.956.956C8.338 21 7.726 21 6.5 21s-1.838 0-2.306-.238a2.2 2.2 0 0 1-.956-.956C3 19.338 3 18.726 3 17.5"
                            color="currentColor" />
                    </svg></button>

                <button id="copyLinesDown"><svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            d="m15 16.327l1.409 1.486C17.159 18.604 17.534 19 18 19s.841-.396 1.591-1.187L21 16.327m-3 2.586v-4.375c0-2.234 0-3.35-.447-4.335s-1.287-1.72-2.968-3.191L14 6.5m-11 0c0-1.225 0-1.838.238-2.306c.21-.411.545-.746.956-.956C4.662 3 5.274 3 6.5 3s1.838 0 2.306.238c.411.21.746.545.956.956C10 4.662 10 5.274 10 6.5s0 1.838-.238 2.306c-.21.411-.545.746-.956.956C8.338 10 7.726 10 6.5 10s-1.838 0-2.306-.238a2.2 2.2 0 0 1-.956-.956C3 8.338 3 7.726 3 6.5m0 11c0-1.225 0-1.838.238-2.306c.21-.411.545-.746.956-.956C4.662 14 5.274 14 6.5 14s1.838 0 2.306.238c.411.21.746.545.956.956c.238.468.238 1.08.238 2.306s0 1.838-.238 2.306c-.21.411-.545.746-.956.956C8.338 21 7.726 21 6.5 21s-1.838 0-2.306-.238a2.2 2.2 0 0 1-.956-.956C3 19.338 3 18.726 3 17.5"
                            color="currentColor" />
                    </svg></button>




                <button id="arrowUp"><svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path fill="currentColor"
                            d="M13 20h-2V8l-5.5 5.5l-1.42-1.42L12 4.16l7.92 7.92l-1.42 1.42L13 8z" />
                    </svg></button>

                <button id="arrowDown"><svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path fill="currentColor" d="m20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z" />
                    </svg></button>


                <button id="arrowLeft"><svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M20 11v2H8l5.5 5.5l-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5L8 11z" />
                    </svg></button>


                <button id="arrowRight"><svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path fill="currentColor"
                            d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11z" />
                    </svg></button>


                <button id="selectWord"><svg class="btnico" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                        <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                            d="M2.998 3.022c2.198-.052 3.272-.117 4 1.493m0 0c.557-1.251 1.39-1.608 4-1.493m-4 1.493V18.95m0 0c.231 1.738 1.136 2.154 4 1.99m-4-1.99c-.303 1.782-1.226 2.224-4 1.99m1-8.958h6m10.972 3.981v4.48m0-4.48c.048-.82.05-1.443-.049-1.953c-.232-1.2-1.491-1.924-2.71-2.072c-1.165-.14-2.1.159-3.047 1.534m5.807 2.491h-2.84c-.436 0-.876.021-1.296.138c-2.569.712-2.38 4.303.196 4.746q.431.075.868.057c.677-.03 1.3-.356 1.837-.769c.627-.484 1.235-1.16 1.235-2.18z"
                            color="currentColor" />
                    </svg></button>



            </div>
        </div>
    </div>

    <!--Setting Page-->
    <div id="settingsPage">
        <div class="setting-header">
            <button class="setting-close-btn" onclick="closeSettingsPage()">

                <svg xmlns="http://www.w3.org/2000/svg" width="1.8em" height="1.8em" viewBox="0 0 24 24">
                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2.5">
                        <path d="M21 12H3.5" />
                        <path d="M3 12L10 19M3 12L10 5" />
                    </g>
                </svg>
            </button>
            <span class="setting-title">Settings</span>

            <button id="appInfoButton">
                <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
                    <path fill="currentColor"
                        d="M11 17h2v-6h-2zm1-8q.425 0 .713-.288T13 8t-.288-.712T12 7t-.712.288T11 8t.288.713T12 9m0 13q-2.075 0-3.9-.788t-3.175-2.137T2.788 15.9T2 12t.788-3.9t2.137-3.175T8.1 2.788T12 2t3.9.788t3.175 2.137T21.213 8.1T22 12t-.788 3.9t-2.137 3.175t-3.175 2.138T12 22m0-2q3.35 0 5.675-2.325T20 12t-2.325-5.675T12 4T6.325 6.325T4 12t2.325 5.675T12 20m0-8" />
                </svg>
            </button>

        </div>
        <div class="Settings-Container">

            <div class="page-section-card">

                <!--Font Size option menu new-->
                <div class="font-size-container">
                    <h3>Editor Font Size</h3>
                    <div class="select-fontsize">
                        <div class="selected-fontsize" data-default="12px" data-eight="8px" data-ten="10px"
                            data-twelve="12px" data-fourteen="14px" data-sixteen="16px" data-eighteen="18px"
                            data-twenty="20px" data-twentytwo="22px" data-twentyfour="24px" data-twentysix="26px"
                            data-twentyeight="28px" data-thirty="30px">
                            <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512" class="arrow">
                                <path
                                    d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z">
                                </path>
                            </svg>
                        </div>
                        <div class="options">
                            <div title="8px">
                                <input id="eight" name="option" type="radio" />
                                <label class="option" for="eight" data-txt="8px"></label>
                            </div>
                            <div title="10px">
                                <input id="ten" name="option" type="radio" />
                                <label class="option" for="ten" data-txt="10px"></label>
                            </div>
                            <div title="12px">
                                <input id="twelve" name="option" type="radio" checked="" />
                                <label class="option" for="twelve" data-txt="12px"></label>
                            </div>
                            <div title="14px">
                                <input id="fourteen" name="option" type="radio" />
                                <label class="option" for="fourteen" data-txt="14px"></label>
                            </div>
                            <div title="16px">
                                <input id="sixteen" name="option" type="radio" />
                                <label class="option" for="sixteen" data-txt="16px"></label>
                            </div>
                            <div title="18px">
                                <input id="eighteen" name="option" type="radio" />
                                <label class="option" for="eighteen" data-txt="18px"></label>
                            </div>
                            <div title="20px">
                                <input id="twenty" name="option" type="radio" />
                                <label class="option" for="twenty" data-txt="20px"></label>
                            </div>
                            <div title="22px">
                                <input id="twentytwo" name="option" type="radio" />
                                <label class="option" for="twentytwo" data-txt="22px"></label>
                            </div>
                            <div title="24px">
                                <input id="twentyfour" name="option" type="radio" />
                                <label class="option" for="twentyfour" data-txt="24px"></label>
                            </div>
                            <div title="26px">
                                <input id="twentysix" name="option" type="radio" />
                                <label class="option" for="twentysix" data-txt="26px"></label>
                            </div>
                            <div title="28px">
                                <input id="twentyeight" name="option" type="radio" />
                                <label class="option" for="twentyeight" data-txt="28px"></label>
                            </div>
                            <div title="30px">
                                <input id="thirty" name="option" type="radio" />
                                <label class="option" for="thirty" data-txt="30px"></label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="Heading-secondary">Font Size: <span id="fontSizeValue">12px</span></div>
                <hr>
                <!-- Theme mode -->
                <div class="toggle-container" id="themeContainer">
                    <h3>Theme mode</h3>
                    <status id="themeStatus">Dark</status>
                    <label class="Toggle-Checkbox">
                        <input type="checkbox" id="themeToggle">
                        <span class="slider"></span>
                    </label>
                </div>
                <p class="Paragraph">Switch between light and dark theme mode. </p>
            </div>

            <div class="page-section-card">

                <!--Line Wrap-->
                <div class="toggle-container" id="lineWrapContainer">
                    <h3>Line Wrap</h3>
                    <status id="lineWrapLabel">Enabled</status>
                    <label class="Toggle-Checkbox">
                        <input type="checkbox" id="lineWrapCheckbox" checked>
                        <span class="slider"></span>
                    </label>
                </div>
                <p class="Paragraph">Enable line wrap to automatically wrap long lines of code to the next line.</p>
                <hr>
                <!--Hide Show Toggle-->
                <div class="toggle-container" id="bottomNavContainer">
                    <h3>ToolBar</h3>
                    <status id="toggleStatus">Visible</status>
                    <label class="Toggle-Checkbox">
                        <input type="checkbox" id="bottomNavToggle">
                        <span class="slider"></span>
                    </label>

                </div>
                <p class="Paragraph">Hide or show the toolbar at the bottom of the editor playground.</p>

            </div>

            <div class="heading-primary">Editor Playground Features</div>

            <div class="details-section">
                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2"
                                d="M11.5 21H8a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8m2 8l2-2l-2-2m-3 0l-2 2l2 2M11 4h2m-1 13v.01" />
                        </svg> Snippets Auto-Completion</summary>
                    <p>Write better code on the go! This powerful feature suggests code snippets as you type HTML tags,
                        CSS properties, and JavaScript code, making coding on your mobile phone easy.</p>
                </details>

                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 32 32">
                            <path fill="currentColor" d="M2 3h8v2H2zm4 6h24v2H6zm0 6h24v2H6zM2 27h8v2H2zm4-6h16v2H6z" />
                        </svg> Syntax Highlighting</summary>
                    <p>Enhance code readability with syntax highlighting. Different colors and styles are used to
                        visually differentiate keywords, operators, and other elements of your code, making it easier to
                        spot errors and understand the structure.</p>
                </details>

                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 256 256">
                            <circle cx="127.555" cy="128.184" r="127.555" fill="var(--primary-color)" />
                            <path fill="var(--primary-heading)"
                                d="m178.496 124.737l-14.205-14.205l7.306-30.035l-30.441 6.9l-13.8-13.8l68.187-17.047z" />
                            <path fill="var(--theme-mode-color)"
                                d="M154.956 218.901L33.192 97.138L101.38 80.09l13.8 13.8l-48.706 12.176l27.6 27.6l32.064-7.712l-8.117 31.658l27.6 27.6l12.176-48.705l14.205 14.206z" />
                        </svg> Integrated Emmet Support</summary>
                    <p>Take HTML and CSS coding to the next level with Emmet. Type HTML or CSS-like expressions that are
                        dynamically expanded into their corresponding code.</p>
                    <p>Use the <strong>"Emmet cheat sheet"</strong> for Emmet expressions.</p>
                    <p>To expand Emmet expressions, simply tap the <svg viewBox="0 0 12 12" stroke="currentColor"
                            xmlns="http://www.w3.org/2000/svg">
                            <path
                                d="M2.7832 3H12V3.75H2.7832L4.01367 4.98633L3.48633 5.51367L1.34766 3.375L3.48633 1.23633L4.01367 1.76367L2.7832 3ZM0.75 1.5V5.25H0V1.5H0.75ZM7.98633 7.01367L8.51367 6.48633L10.6523 8.625L8.51367 10.7637L7.98633 10.2363L9.2168 9H0V8.25H9.2168L7.98633 7.01367ZM11.25 10.5V6.75H12V10.5H11.25Z"
                                fill="currentColor" stroke-width="0.4" />
                        </svg> Tab key from the toolbar.</p>
                    <p><strong>Examples of Emmet expressions for HTML:</strong>
                        <code><ul>
                        <li>a[href=""] or a:link</li>
                        <li>div.container>h1#title+p</li>
                        <li>ul>li*5</li>
                        <li>nav>ul>li*3>a</li>
                    </ul></code>

                    </p>
                </details>

                <details>
                    <summary><svg width="1.4em" height="1.4em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="m12.89 3l1.96.4L11.11 21l-1.96-.4zm6.7 9L16 8.41V5.58L22.42 12L16 18.41v-2.83zM1.58 12L8 5.58v2.83L4.41 12L8 15.58v2.83z" />
                        </svg> Beautify (Code Formatting)</summary>
                    <p>Make your code look neat and professional with just one click. The beautify feature automatically
                        formats your code, improving readability and maintainability.</p>
                </details>

                <details>
                    <summary> <svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2" d="M3 10a7 7 0 1 0 14 0a7 7 0 1 0-14 0m18 11l-6-6" />
                        </svg> Search and Replace</summary>
                    <p>Find and replace specific words, tags, or code lines quickly and efficiently. This feature saves
                        time and helps you make changes accurately.</p>
                </details>

                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="2"
                                d="M7 8h5m3 0h2m0 4h-6m-3 0H7m0 4h5m3 0h2M3 8V6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
                        </svg> Code Sections Folding</summary>
                    <p>Simplify working with large files by collapsing sections of code. Click on the arrow next to the
                        line number to hide <svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em"
                            viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M12 17a1.72 1.72 0 0 1-1.33-.64l-4.21-5.1a2.1 2.1 0 0 1-.26-2.21A1.76 1.76 0 0 1 7.79 8h8.42a1.76 1.76 0 0 1 1.59 1.05a2.1 2.1 0 0 1-.26 2.21l-4.21 5.1A1.72 1.72 0 0 1 12 17" />
                        </svg> or expand <svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em"
                            viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M10.46 18a2.2 2.2 0 0 1-.91-.2a1.76 1.76 0 0 1-1.05-1.59V7.79A1.76 1.76 0 0 1 9.55 6.2a2.1 2.1 0 0 1 2.21.26l5.1 4.21a1.7 1.7 0 0 1 0 2.66l-5.1 4.21a2.06 2.06 0 0 1-1.3.46" />
                        </svg> code blocks, making it easier to focus on the relevant parts.</p>
                </details>

                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                stroke-width="1.5"
                                d="m6.75 7.5l3 2.25l-3 2.25m4.5 0h3m-9 8.25h13.5A2.25 2.25 0 0 0 21 18V6a2.25 2.25 0 0 0-2.25-2.25H5.25A2.25 2.25 0 0 0 3 6v12a2.25 2.25 0 0 0 2.25 2.25" />
                        </svg> Command Palette</summary>
                    <p>Discover hidden settings and more customization options for your code playground.</p>
                    <p><strong>TIP:</strong> Open command palette to quickly change the programming language mode.
                        Search for <strong>"change language mode"</strong> and select the desired section (HTML, CSS, or
                        JavaScript). <br><br>
                        <i>Remember to revert to the original language mode, as this app is specifically designed for
                            these three languages.</i>
                    </p>
                </details>

            </div>

            <div class="heading-primary">Editor Tools Features</div>

            <div class="details-section">
                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
                                <path d="M20 7H4" />
                                <path d="M15 12H4" opacity="0.7" />
                                <path d="M9 17H4" opacity="0.4" />
                            </g>
                        </svg> Line Actions</summary>
                    <p> <strong>Move Cursor:</strong> Navigate your code effortlessly using the <svg
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M20 11v2H8l5.5 5.5l-1.42 1.42L4.16 12l7.92-7.92L13.5 5.5L8 11z" />
                        </svg> Left, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M4 11v2h12l-5.5 5.5l1.42 1.42L19.84 12l-7.92-7.92L10.5 5.5L16 11z" />
                        </svg> Right, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M13 20h-2V8l-5.5 5.5l-1.42-1.42L12 4.16l7.92 7.92l-1.42 1.42L13 8z" />
                        </svg> Up, and
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path fill="currentColor" d="m20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8z" />
                        </svg> Down arrow keys.
                    </p>
                    <p> <strong>Move Code:</strong> Easily move code lines up or down by selecting the desired
                        lines and using the <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M3 21v-2h18v2zm8-4v-6.175L9.4 12.4L8 11l4-4l4 4l-1.4 1.4l-1.6-1.575V17zM3 5V3h18v2z" />
                        </svg> MoveUp and <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

                            <path fill="currentColor"
                                d="M3 5V3h18v2zm9 12l-4-4l1.4-1.4l1.6 1.575V7h2v6.175l1.6-1.575L16 13zm-9 4v-2h18v2z" />
                        </svg> MoveDown buttons.</p>

                    <p><strong>Code Duplication:</strong> Copy code lines up or down by selecting the desired lines and
                        using the <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                d="m15 7.674l1.409-1.487C17.159 5.396 17.534 5 18 5s.841.396 1.591 1.187L21 7.674m-3-2.587v4.375c0 2.234 0 3.35-.447 4.335s-1.287 1.72-2.968 3.191L14 17.5M3 6.5c0-1.225 0-1.838.238-2.306c.21-.411.545-.746.956-.956C4.662 3 5.274 3 6.5 3s1.838 0 2.306.238c.411.21.746.545.956.956C10 4.662 10 5.274 10 6.5s0 1.838-.238 2.306c-.21.411-.545.746-.956.956C8.338 10 7.726 10 6.5 10s-1.838 0-2.306-.238a2.2 2.2 0 0 1-.956-.956C3 8.338 3 7.726 3 6.5m0 11c0-1.225 0-1.838.238-2.306c.21-.411.545-.746.956-.956C4.662 14 5.274 14 6.5 14s1.838 0 2.306.238c.411.21.746.545.956.956c.238.468.238 1.08.238 2.306s0 1.838-.238 2.306c-.21.411-.545.746-.956.956C8.338 21 7.726 21 6.5 21s-1.838 0-2.306-.238a2.2 2.2 0 0 1-.956-.956C3 19.338 3 18.726 3 17.5"
                                color="currentColor" />
                        </svg> CopyUp and <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                d="m15 16.327l1.409 1.486C17.159 18.604 17.534 19 18 19s.841-.396 1.591-1.187L21 16.327m-3 2.586v-4.375c0-2.234 0-3.35-.447-4.335s-1.287-1.72-2.968-3.191L14 6.5m-11 0c0-1.225 0-1.838.238-2.306c.21-.411.545-.746.956-.956C4.662 3 5.274 3 6.5 3s1.838 0 2.306.238c.411.21.746.545.956.956C10 4.662 10 5.274 10 6.5s0 1.838-.238 2.306c-.21.411-.545.746-.956.956C8.338 10 7.726 10 6.5 10s-1.838 0-2.306-.238a2.2 2.2 0 0 1-.956-.956C3 8.338 3 7.726 3 6.5m0 11c0-1.225 0-1.838.238-2.306c.21-.411.545-.746.956-.956C4.662 14 5.274 14 6.5 14s1.838 0 2.306.238c.411.21.746.545.956.956c.238.468.238 1.08.238 2.306s0 1.838-.238 2.306c-.21.411-.545.746-.956.956C8.338 21 7.726 21 6.5 21s-1.838 0-2.306-.238a2.2 2.2 0 0 1-.956-.956C3 19.338 3 18.726 3 17.5"
                                color="currentColor" />
                        </svg> CopyDown buttons.</p>
                </details>

                <details>
                    <summary>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M12 22C6.49 22 2 17.51 2 12S6.49 2 12 2s10 4.04 10 9c0 3.31-2.69 6-6 6h-1.77c-.28 0-.5.22-.5.5c0 .12.05.23.13.33c.41.47.64 1.06.64 1.67A2.5 2.5 0 0 1 12 22m0-18c-4.41 0-8 3.59-8 8s3.59 8 8 8c.28 0 .5-.22.5-.5a.54.54 0 0 0-.14-.35c-.41-.46-.63-1.05-.63-1.65a2.5 2.5 0 0 1 2.5-2.5H16c2.21 0 4-1.79 4-4c0-3.86-3.59-7-8-7" />
                            <circle cx="6.5" cy="11.5" r="1.5" fill="currentColor" />
                            <circle cx="9.5" cy="7.5" r="1.5" fill="currentColor" />
                            <circle cx="14.5" cy="7.5" r="1.5" fill="currentColor" />
                            <circle cx="17.5" cy="11.5" r="1.5" fill="currentColor" />
                        </svg> Hex Color Picker
                    </summary>
                    <p>Quickly select colors for your CSS code using the integrated hex color picker.</p>
                </details>

                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-7 0c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1m6 18H6c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1h1v1c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V4h1c.55 0 1 .45 1 1v14c0 .55-.45 1-1 1" />
                        </svg> Clipboard Copy/Paste</summary>
                    <p><strong>Copy:</strong> Use the <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round">
                                <path
                                    d="M7 9.667A2.667 2.667 0 0 1 9.667 7h8.666A2.667 2.667 0 0 1 21 9.667v8.666A2.667 2.667 0 0 1 18.333 21H9.667A2.667 2.667 0 0 1 7 18.333z" />
                                <path d="M4.012 16.737A2 2 0 0 1 3 15V5c0-1.1.9-2 2-2h10c.75 0 1.158.385 1.5 1" />
                            </g>
                        </svg> Copy button to quickly copy whole section code to your clipboard.</p>

                    <p><strong>Paste:</strong> Use the <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M19 2h-4.18C14.4.84 13.3 0 12 0S9.6.84 9.18 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m-7 0c.55 0 1 .45 1 1s-.45 1-1 1s-1-.45-1-1s.45-1 1-1m6 18H6c-.55 0-1-.45-1-1V5c0-.55.45-1 1-1h1v1c0 1.1.9 2 2 2h6c1.1 0 2-.9 2-2V4h1c.55 0 1 .45 1 1v14c0 .55-.45 1-1 1" />
                        </svg> Paste button to easily paste text\code from your clipboard.</p>
                </details>

                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M12 21q-3.45 0-6.012-2.287T3.05 13H5.1q.35 2.6 2.313 4.3T12 19q2.925 0 4.963-2.037T19 12t-2.037-4.962T12 5q-1.725 0-3.225.8T6.25 8H9v2H3V4h2v2.35q1.275-1.6 3.113-2.475T12 3q1.875 0 3.513.713t2.85 1.924t1.925 2.85T21 12t-.712 3.513t-1.925 2.85t-2.85 1.925T12 21m2.8-4.8L11 12.4V7h2v4.6l3.2 3.2z" />
                        </svg> Undo/Redo Code</summary>
                    <p>Accidentally deleted or modified something? No problem! Use the <svg
                            xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                color="currentColor">
                                <path d="M11 6h4.5a4.5 4.5 0 1 1 0 9H4" />
                                <path d="M7 12s-3 2.21-3 3s3 3 3 3" />
                            </g>
                        </svg> Undo and <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">

                            <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                color="currentColor">
                                <path d="M13 6H8.5a4.5 4.5 0 0 0 0 9H20" />
                                <path d="M17 12s3 2.21 3 3s-3 3-3 3" />
                            </g>
                        </svg> Redo functions to
                        quickly revert changes and recover your code.</p>
                </details>
                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 20 20">
                            <path fill="currentColor"
                                d="M2 5.25a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 2 5.25m0 5a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5a.75.75 0 0 1-.75-.75m.75 4.25a.75.75 0 0 0 0 1.5h8.5a.75.75 0 0 0 0-1.5zM18.308 4.252a.75.75 0 1 0-1.116-1.004l-1.72 1.913l-.692-.691a.75.75 0 1 0-1.06 1.06l1.25 1.25a.75.75 0 0 0 1.088-.028zm-.056 8.94a.75.75 0 0 1 .056 1.06l-2.25 2.5a.75.75 0 0 1-1.088.028l-1.25-1.25a.75.75 0 1 1 1.06-1.06l.691.69l1.721-1.912a.75.75 0 0 1 1.06-.055" />
                        </svg> Multi-Cursor Editing</summary>
                    <p>Increase your coding efficiency by editing multiple locations in your code simultaneously. This
                        feature is especially helpful for making identical or similar changes in multiple places.</p>
                    <p>Place your cursor where you want to create a new editing point. Then, click the <svg
                            mlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                d="M2.998 3.022c2.198-.052 3.272-.117 4 1.493m0 0c.557-1.251 1.39-1.608 4-1.493m-4 1.493V18.95m0 0c.231 1.738 1.136 2.154 4 1.99m-4-1.99c-.303 1.782-1.226 2.224-4 1.99m1-8.958h6m10.972 3.981v4.48m0-4.48c.048-.82.05-1.443-.049-1.953c-.232-1.2-1.491-1.924-2.71-2.072c-1.165-.14-2.1.159-3.047 1.534m5.807 2.491h-2.84c-.436 0-.876.021-1.296.138c-2.569.712-2.38 4.303.196 4.746q.431.075.868.057c.677-.03 1.3-.356 1.837-.769c.627-.484 1.235-1.16 1.235-2.18z"
                                color="currentColor" />
                        </svg> <strong>"Multi-Cursor"</strong> button in your code editor's toolbar.<br><br> Click
                        multiple
                        times to select all similar tags, words, or code. All selected text will be highlighted.
                        Make changes in one cursor, and the same changes will be applied to all other cursors.
                    </p>
                </details>

            </div>
            <p class="End-Text"><code>Happy Coding! :&#45;&#41;</code></p>
        </div>
    </div>

    <!-- appInfoModal -->
    <div id="appInfoModal">
        <div class="app-info-header">
            <span class="closeAppInfoModal-btn" id="closeAppInfoModal"><svg xmlns="http://www.w3.org/2000/svg"
                    width="1.4em" height="1.4em" viewBox="0 0 24 24">
                    <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                        stroke-width="2.5">
                        <path d="M21 12H3.5" />
                        <path d="M3 12L10 19M3 12L10 5" />
                    </g>
                </svg></span>
            <span class="app-info-title">App Information</span>
        </div>
        <div class="app-info-content">
            <div class="page-section-card">
                <div class="app-info">
                    <img src="app-logo.png" alt="App Logo">
                    <div class="app-details">
                        <p class="app-name">HTML Writer</p>
                        <p class="app-version"><code>Version: 2.0.1</code></p>
                    </div>
                </div>
            </div>

            <div class="details-section">
                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M12 12q-1.65 0-2.825-1.175T8 8t1.175-2.825T12 4t2.825 1.175T16 8t-1.175 2.825T12 12m-8 8v-2.8q0-.85.438-1.562T5.6 14.55q1.55-.775 3.15-1.162T12 13t3.25.388t3.15 1.162q.725.375 1.163 1.088T20 17.2V20z" />
                        </svg> About</summary>
                    <p><code><strong>Developer:</strong> KARAN <br>
                        <strong>Country:</strong> INDIA</code>
                    </p>
                </details>

                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M1 18q.225-2.675 1.638-4.925T6.4 9.5L4.55 6.3q-.15-.225-.075-.475T4.8 5.45q.2-.125.45-.05t.4.3L7.5 8.9Q9.65 8 12 8t4.5.9l1.85-3.2q.15-.225.4-.3t.45.05q.25.125.325.375t-.075.475L17.6 9.5q2.35 1.325 3.762 3.575T23 18zm6-2.75q.525 0 .888-.363T8.25 14t-.363-.888T7 12.75t-.888.363T5.75 14t.363.888t.887.362m10 0q.525 0 .888-.363T18.25 14t-.363-.888T17 12.75t-.888.363t-.362.887t.363.888t.887.362" />
                        </svg> App Permissions</summary>
                    <p><strong>Internet:</strong> Required to load application resources, code editor playground
                        libraries. <br><br>
                        <strong>Storage:</strong> If your device is running on Android 10 or below, this permission is
                        required to save files to your device.
                    </p>
                </details>

                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M12 17a2 2 0 0 0 2-2a2 2 0 0 0-2-2a2 2 0 0 0-2 2a2 2 0 0 0 2 2m6-9a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2h1V6a5 5 0 0 1 5-5a5 5 0 0 1 5 5v2zm-6-5a3 3 0 0 0-3 3v2h6V6a3 3 0 0 0-3-3" />
                        </svg> Your Privacy</summary>
                    <p>No personal information or data is collected or transmitted outside of your device. Your code
                        projects are stored locally on your device, ensuring that you have complete control over your
                        work.</p>
                </details>

                <details>
                    <summary><svg xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M19 4H5a3 3 0 0 0-3 3v10a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3M9 8a3 3 0 0 1 2.995 2.824L12 11v4a1 1 0 0 1-1.993.117L10 15v-1H8v1a1 1 0 0 1-1.993.117L6 15v-4a3 3 0 0 1 3-3m0 2a1 1 0 0 0-.993.883L8 11v1h2v-1a1 1 0 0 0-1-1m8-2a1 1 0 0 1 .993.883L18 9v6a1 1 0 0 1-.883.993L17 16h-1.5a2.5 2.5 0 1 1 .326-4.979l.174.029V9a1 1 0 0 1 .883-.993zm-1.41 5.008L15.5 13a.5.5 0 0 0-.09.992l.09.008h.5v-.5l-.008-.09a.5.5 0 0 0-.318-.379z" />
                        </svg> Contain ADS</summary>
                    <p>This application uses Google AdMob advertising services. AdMob may collect anonymized data to
                        provide relevant ads. For more information on Google AdMob's privacy practices, please refer to
                        their privacy policy.</p>
                </details>
            </div>
            <p class="copyRightText"><code>©  HTML Writer - 2024</code></p>
        </div>
    </div>

    <!-- Save File Model-->
    <div id="saveFileModal" class="modal">
        <div class="modal-content">
            <div class="model-title">Save Your Code</div>
            <label class="label-file-name">
                <span class="input-save-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 24 24">
                        <path fill="currentColor"
                            d="M22 4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h6l2 2zM2 6v14h18v2H2a2 2 0 0 1-2-2V6zm4 0v10h16V6z" />
                    </svg>
                </span>
                <input type="text" id="fileNameInput" class="save-input" placeholder="Enter Your File Name">
            </label>
            <div class="modal-btn-container">
                <button class="model-btn" id="cancelSaveButton" onclick="closeModal('saveFileModal')">Cancel</button>
                <button class="model-btn" id="confirmSaveButton">Save</button>
            </div>
        </div>
    </div>
    <!-- Success Save File Modal -->
    <div id="saveFileSuccessModal" class="modal">
        <div class="modal-content">
            <div class="model-title">Files saved successfully!</div>
            <p>Saved to: Downloads &gt; HTML Writer &gt; " "</p>
            <div class="modal-btn-container">
                <button class="model-btn" onclick="closeModal('saveFileSuccessModal')">Close</button>
            </div>
        </div>
    </div>

    <!-- Error Save File Modal -->
    <div id="saveFileErrorModal" class="modal">
        <div class="modal-content">
            <div class="model-title">Oops!</div>
            <p>An error occurred while saving your file.</p>
            <ul>
                <li><strong>Storage permissions:</strong> Please ensure you have granted storage permissions to this
                    app.</li>
                <li><strong>File name:</strong> Verify that your file name is unique and does not contain any special
                    characters (e.g., &lt;, &gt;, &colon;, &ast;, &quest;, &sol;, &verbar;, &bsol;).</li>

            </ul>
            <div class="modal-btn-container">
                <button class="model-btn" onclick="closeModal('saveFileErrorModal')">OK</button>
            </div>
        </div>
    </div>

    <!-- invalid file name or symbols -->
    <div id="saveFileInvalidModel" class="modal">
        <div class="modal-content">
            <div class="model-title">Invalid File Name</div>

            <p>File Name Requirements:</p>
            <ul>
                <li><strong>Non-empty:</strong> Ensure the file name is not blank.</li>
                <li><strong>Special Characters:</strong> Avoid using special characters (e.g., &lt;, &gt;, &colon;,
                    &ast;, &quest;, &sol;, &verbar;, &bsol;).</li>
                <li><strong>Uniqueness:</strong> The file name must be unique within the selected directory.</li>
            </ul>
            <div class="modal-btn-container">
                <button class="model-btn" onclick="closeModal('saveFileInvalidModel')">OK</button>
            </div>
        </div>
    </div>

    <!-- Import File Modal -->
    <div id="importFileModal" class="modal">
        <div class="modal-content">
            <div class="model-title">Import Your Files</div>
            <div class="file-input-container">
                <div class="file-input-wrapper">
                    <div class="file-input-label">
                        <svg class="file-input-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
                            <g fill="none">
                                <rect width="256" height="256" fill="#e34c26" rx="60" />
                                <path fill="#fff"
                                    d="m48 38l8.61 96.593h110.71l-3.715 41.43l-35.646 9.638l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l65.51-18.172l8.783-98.061H85.824l-2.923-32.71h122.238L208 38z" />
                                <path fill="#ebebeb"
                                    d="M128 38H48l8.61 96.593H128v-31.938H85.824l-2.923-32.71H128zm0 147.647l-.041.014l-35.579-9.624l-2.379-26.602H57.94l4.585 51.281l65.427 18.172l.049-.014z" />
                            </g>
                        </svg>
                        <span>Import .html/.txt</span>
                    </div>
                    <input type="file" id="htmlFileInput" class="file-input">
                    <button class="file-input-button" onclick="document.getElementById('htmlFileInput').click()"><svg
                            xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M11 16V7.85l-2.6 2.6L7 9l5-5l5 5l-1.4 1.45l-2.6-2.6V16zm-5 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
                        </svg></button>
                </div>
                <div class="file-input-wrapper">
                    <div class="file-input-label">
                        <svg xmlns="http://www.w3.org/2000/svg" class="file-input-icon" viewBox="0 0 256 256">
                            <g fill="none">
                                <rect width="256" height="256" fill="#0277bd" rx="60" />
                                <path fill="#ebebeb"
                                    d="m53.753 102.651l2.862 31.942h71.481v-31.942zM128.095 38H48l2.904 31.942h77.191zm0 180.841v-33.233l-.14.037l-35.574-9.605l-2.274-25.476H58.042l4.475 50.154l65.431 18.164z" />
                                <path fill="#fff"
                                    d="m167.318 134.593l-3.708 41.426l-35.625 9.616v33.231l65.483-18.148l.48-5.397l7.506-84.092l.779-8.578L208 38h-80.015v31.942h45.009l-2.906 32.709h-42.103v31.942z" />
                            </g>
                        </svg>
                        <span>Import .css</span>
                    </div>
                    <input type="file" id="cssFileInput" class="file-input">
                    <button class="file-input-button" onclick="document.getElementById('cssFileInput').click()"><svg
                            xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M11 16V7.85l-2.6 2.6L7 9l5-5l5 5l-1.4 1.45l-2.6-2.6V16zm-5 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
                        </svg></button>
                </div>
                <div class="file-input-wrapper">
                    <div class="file-input-label">
                        <svg xmlns="http://www.w3.org/2000/svg" class="file-input-icon" viewBox="0 0 256 256">
                            <g fill="none">
                                <rect width="256" height="256" fill="#f0db4f" rx="60" />
                                <path fill="#323330"
                                    d="m67.312 213.932l19.59-11.856c3.78 6.701 7.218 12.371 15.465 12.371c7.905 0 12.889-3.092 12.889-15.12v-81.798h24.058v82.138c0 24.917-14.606 36.259-35.916 36.259c-19.245 0-30.416-9.967-36.087-21.996m85.07-2.576l19.588-11.341c5.157 8.421 11.859 14.607 23.715 14.607c9.969 0 16.325-4.984 16.325-11.858c0-8.248-6.53-11.17-17.528-15.98l-6.013-2.579c-17.357-7.388-28.871-16.668-28.871-36.258c0-18.044 13.748-31.792 35.229-31.792c15.294 0 26.292 5.328 34.196 19.247l-18.731 12.029c-4.125-7.389-8.591-10.31-15.465-10.31c-7.046 0-11.514 4.468-11.514 10.31c0 7.217 4.468 10.139 14.778 14.608l6.014 2.577c20.449 8.765 31.963 17.699 31.963 37.804c0 21.654-17.012 33.51-39.867 33.51c-22.339 0-36.774-10.654-43.819-24.574" />
                            </g>
                        </svg>
                        <span>Import .js</span>
                    </div>
                    <input type="file" id="jsFileInput" class="file-input">
                    <button class="file-input-button" onclick="document.getElementById('jsFileInput').click()"><svg
                            xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                d="M11 16V7.85l-2.6 2.6L7 9l5-5l5 5l-1.4 1.45l-2.6-2.6V16zm-5 4q-.825 0-1.412-.587T4 18v-3h2v3h12v-3h2v3q0 .825-.587 1.413T18 20z" />
                        </svg></button>
                </div>
            </div>
            <div class="modal-btn-container">
                <button class="model-btn" id="cancelImportButton"
                    onclick="closeModal('importFileModal')">Cancel</button>
            </div>
        </div>
    </div>


    <!-- Upload Error file model-->
    <div id="errorFileModal" class="modal">
        <div class="modal-content">
            <div class="model-title">Unsupported File Type</div>

            <p id="errorMessage"></p>
            <div class="modal-btn-container">
                <button class="model-btn" onclick="closeModal('errorFileModal')">OK</button>
            </div>
        </div>
    </div>


    <!--javascript-->
    <script async src="/scripts/main.js"></script>

    <script>
        // Function to receive the pasted text from Android
        function handlePasteFromClipboard(text) {
            const activeEditor = getActiveEditor();
            if (activeEditor) {
                const cursorPosition = activeEditor.getCursorPosition();
                activeEditor.session.insert(cursorPosition, text);
                console.log('Code pasted from clipboard via clipboardFunction');
            } else {
                console.error('No active editor found');
            }
        }

        // Function to get the active editor
        function getActiveEditor() {
            const activeTab = document.querySelector('nav a.active');
            if (activeTab) {
                const editorId = activeTab.getAttribute('data-id');
                return ace.edit(editorId);
            }
            return null;
        }

        document.addEventListener('DOMContentLoaded', function () {
            document.getElementById('copyButton').addEventListener('click', function () {
                const activeEditor = getActiveEditor();
                if (activeEditor) {
                    const code = activeEditor.getValue();
                    navigator.clipboard.writeText(code).then(() => {
                        console.log('Code copied to clipboard');
                    }).catch(err => {
                        console.error('Failed to copy code: ', err);
                    });
                } else {
                    console.error('No active editor found');
                }
            });

            document.getElementById('pasteButton').addEventListener('click', function () {
                // Use the clipboardFunction interface
                if (typeof clipboardFunction !== 'undefined') {
                    clipboardFunction.pasteText();
                } else {
                    console.error('clipboardFunction interface not found');
                }
            });
        });
    </script>

    <script src="/scripts/secondary.js"></script>
    <script src="/scripts/filefunctionality.js"></script>
</body>

</html>