templates/views/editor.html

<div class="editor-wrap">
    <div class="file-panel open" id="file-panel">
        <div class="file-panel-header">
            <span class="file-panel-title"><i class="fa-solid fa-folder-tree"></i> Files</span>
            <div class="file-actions">
                <button class="ed-btn icon-only" onclick="newFile()" title="New File" aria-label="New file"><i class="fa-solid fa-file-circle-plus"></i></button>
                <button class="ed-btn icon-only" onclick="createFolder()" title="New Folder" aria-label="New folder"><i class="fa-solid fa-folder-plus"></i></button>
                <button class="ed-btn icon-only danger" onclick="deleteFolder()" title="Delete Folder" aria-label="Delete folder"><i class="fa-solid fa-folder-minus"></i></button>
                <button class="ed-btn icon-only" onclick="document.getElementById('file-panel').classList.toggle('open')" title="Toggle" aria-label="Toggle file panel"><i class="fa-solid fa-chevron-down"></i></button>
            </div>
        </div>
        <div id="file-list" class="file-list" role="list">
            <div style="color:var(--text-3);font-size:12px;text-align:center;padding:var(--sp-5) 0">
                <i class="fa-solid fa-spinner fa-spin"></i> Loading...
            </div>
        </div>
    </div>
    <div class="editor-main" id="editor-main-container">
        <div class="editor-bar">
            <label for="current-filename" class="visually-hidden">Filename</label>
            <input type="text" id="current-filename" class="filename-input" placeholder="untitled.html" autocomplete="off">
            <button class="ed-btn icon-only" onclick="renameFile()" title="Rename" aria-label="Rename file"><i class="fa-solid fa-pen"></i></button>
            <button class="ed-btn primary" onclick="saveFile()" title="Save (Ctrl+S)" aria-label="Save"><i class="fa-solid fa-floppy-disk"></i> Save</button>
            <div style="flex:1"></div>
            <button id="run-btn" class="ed-btn success" onclick="runCode()" style="display:none" aria-label="Run"><i class="fa-solid fa-play"></i> Run</button>
            <button class="ed-btn ai" onclick="aiEdit()" title="AI Edit" aria-label="AI edit"><i class="fa-solid fa-wand-magic-sparkles"></i></button>
        </div>
        <div class="editor-area">
            <div id="ace-editor" role="application" aria-label="Code editor"></div>
            <div id="preview-container">
                <div class="preview-bar">
                    <span><i class="fa-brands fa-html5"></i> Preview</span>
                    <div style="display:flex;gap:var(--sp-1)">
                        <button class="ed-btn icon-only" onclick="toggleFullscreen()" aria-label="Fullscreen"><i id="fs-icon" class="fa-solid fa-expand"></i></button>
                        <button class="ed-btn icon-only" onclick="closePreview()" aria-label="Close preview"><i class="fa-solid fa-xmark"></i></button>
                    </div>
                </div>
                <iframe id="live-preview-frame" title="Live preview"></iframe>
            </div>
        </div>
    </div>
</div>