<title>RL Coder - Ambiente di Sviluppo</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

    :root {
        --vscode-bg: #1e1e1e;
        --vscode-sidebar: #252526;
        --vscode-sidebar-hover: #37373d;
        --vscode-titlebar: #3c3c3c;
        --vscode-statusbar: #007acc;
        --vscode-editor-bg: #1e1e1e;
        --vscode-editor-line: #2d2d2d;
        --vscode-editor-text: #d4d4d4;
        --vscode-editor-gutter: #333333;
        --vscode-editor-gutter-active: #264f78;
        --vscode-button: #0e639c;
        --vscode-button-hover: #1177bb;
        --vscode-accent: #4ec9b0;
        --vscode-warning: #ce9178;
        --vscode-string: #ce9178;
        --vscode-comment: #6a9955;
        --vscode-keyword: #c586c0;
        --vscode-function: #dcdcaa;
        --vscode-variable: #9cdcfe;
    }

    body {
        background-color: var(--vscode-bg);
        color: var(--vscode-editor-text);
        height: 100vh;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* Barra superiore */
    .titlebar {
        background-color: var(--vscode-titlebar);
        height: 30px;
        display: flex;
        align-items: center;
        padding: 0 10px;
        justify-content: space-between;
        -webkit-app-region: drag;
    }

    .titlebar-controls {
        display: flex;
        gap: 10px;
        -webkit-app-region: no-drag;
    }

    .titlebar-btn {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        cursor: pointer;
    }

    .close-btn { background-color: #ff5f57; }
    .minimize-btn { background-color: #ffbd2e; }
    .maximize-btn { background-color: #28c940; }

    /* Barra laterale */
    .sidebar {
        width: 50px;
        background-color: var(--vscode-sidebar);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 10px 0;
        gap: 20px;
    }

    .sidebar-item {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 5px;
        cursor: pointer;
        color: #858585;
        font-size: 18px;
        transition: all 0.2s;
    }

    .sidebar-item:hover, .sidebar-item.active {
        background-color: var(--vscode-sidebar-hover);
        color: white;
    }

    /* Contenuto principale */
    .main-container {
        display: flex;
        flex: 1;
        overflow: hidden;
    }

    /* Pannello di esplorazione */
    .explorer {
        width: 250px;
        background-color: var(--vscode-sidebar);
        display: flex;
        flex-direction: column;
        border-right: 1px solid #3c3c3c;
    }

    .explorer-header {
        padding: 10px 15px;
        font-weight: bold;
        font-size: 12px;
        text-transform: uppercase;
        color: #858585;
        border-bottom: 1px solid #3c3c3c;
    }

    .explorer-content {
        padding: 10px;
        flex: 1;
        overflow-y: auto;
    }

    .folder {
        display: flex;
        align-items: center;
        padding: 4px 0;
        cursor: pointer;
    }

    .folder:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .folder i {
        margin-right: 8px;
        color: #c586c0;
    }

    .file {
        display: flex;
        align-items: center;
        padding: 4px 0 4px 20px;
        cursor: pointer;
        font-size: 13px;
    }

    .file:hover {
        background-color: rgba(255, 255, 255, 0.05);
    }

    .file i {
        margin-right: 8px;
        color: #4ec9b0;
    }

    .file.active {
        background-color: rgba(50, 50, 50, 0.5);
    }

    /* Editor */
    .editor-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        background-color: var(--vscode-editor-bg);
    }

    .tabs {
        display: flex;
        height: 35px;
        background-color: #252526;
        border-bottom: 1px solid #3c3c3c;
    }

    .tab {
        display: flex;
        align-items: center;
        padding: 0 15px;
        font-size: 13px;
        border-right: 1px solid #3c3c3c;
        cursor: pointer;
        position: relative;
    }

    .tab.active {
        background-color: var(--vscode-editor-bg);
        border-bottom: 1px solid var(--vscode-editor-bg);
    }

    .tab i {
        margin-right: 8px;
        font-size: 14px;
    }

    .tab-close {
        margin-left: 8px;
        opacity: 0.7;
        font-size: 12px;
    }

    .tab-close:hover {
        opacity: 1;
    }

    .editor {
        flex: 1;
        display: flex;
        overflow: hidden;
    }

    .gutter {
        width: 50px;
        background-color: var(--vscode-editor-gutter);
        color: #858585;
        font-size: 13px;
        padding: 10px 0;
        text-align: right;
        user-select: none;
    }

    .gutter-line {
        height: 22px;
        padding-right: 10px;
        line-height: 22px;
    }

    .gutter-line.active {
        background-color: var(--vscode-editor-gutter-active);
        color: white;
    }

    .code-editor {
        flex: 1;
        padding: 10px;
        font-family: 'Fira Code', 'Consolas', monospace;
        font-size: 14px;
        line-height: 22px;
        outline: none;
        white-space: pre;
        overflow: auto;
        color: var(--vscode-editor-text);
    }

    /* Barra di stato */
    .statusbar {
        height: 22px;
        background-color: var(--vscode-statusbar);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 10px;
        font-size: 12px;
        color: white;
    }

    .status-item {
        display: flex;
        align-items: center;
        gap: 5px;
    }

    /* Tema scuro per il codice */
    .keyword { color: var(--vscode-keyword); }
    .string { color: var(--vscode-string); }
    .comment { color: var(--vscode-comment); }
    .function { color: var(--vscode-function); }
    .variable { color: var(--vscode-variable); }

    /* Pulsanti */
    .btn {
        background-color: var(--vscode-button);
        color: white;
        border: none;
        padding: 6px 12px;
        border-radius: 3px;
        font-size: 12px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .btn:hover {
        background-color: var(--vscode-button-hover);
    }

    /* Layout completo */
    .app-container {
        display: flex;
        height: calc(100vh - 30px);
    }

    .sidebar-container {
        display: flex;
    }

    /* Animazioni */
    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .code-editor {
        animation: fadeIn 0.3s ease-in;
    }
</style>

RL Coder

<div class="app-container">
    <!-- Barra laterale con icone -->
    <div class="sidebar">
        <div class="sidebar-item active" title="Esplora">
            <i class="fas fa-folder"></i>
        </div>
        <div class="sidebar-item" title="Cerca">
            <i class="fas fa-search"></i>
        </div>
        <div class="sidebar-item" title="Controllo sorgente">
            <i class="fas fa-code-branch"></i>
        </div>
        <div class="sidebar-item" title="Esegui e debug">
            <i class="fas fa-bug"></i>
        </div>
        <div class="sidebar-item" title="Estensioni">
            <i class="fas fa-puzzle-piece"></i>
        </div>
    </div>

    <!-- Pannello di esplorazione -->
    <div class="explorer">
        <div class="explorer-header">ESPLORA</div>
        <div class="explorer-content">
            <div class="folder">
                <i class="fas fa-folder"></i> src
            </div>
            <div class="file active">
                <i class="fab fa-js"></i> main.js
            </div>
            <div class="file">
                <i class="fab fa-css3-alt"></i> styles.css
            </div>
            <div class="file">
                <i class="fab fa-html5"></i> index.html
            </div>
            <div class="folder">
                <i class="fas fa-folder"></i> assets
            </div>
            <div class="file">
                <i class="fas fa-cog"></i> config.json
            </div>
            <div class="file">
                <i class="fas fa-file"></i> README.md
            </div>
        </div>
    </div>

    <!-- Editor principale -->
    <div class="editor-container">
        <div class="tabs">
            <div class="tab active">
                <i class="fab fa-js"></i> main.js
                <span class="tab-close"><i class="fas fa-times"></i></span>
            </div>
            <div class="tab">
                <i class="fab fa-css3-alt"></i> styles.css
                <span class="tab-close"><i class="fas fa-times"></i></span>
            </div>
        </div>
        <div class="editor">
            <div class="gutter">
                <div class="gutter-line">1</div>
                <div class="gutter-line">2</div>
                <div class="gutter-line active">3</div>
                <div class="gutter-line">4</div>
                <div class="gutter-line">5</div>
                <div class="gutter-line">6</div>
                <div class="gutter-line">7</div>
                <div class="gutter-line">8</div>
                <div class="gutter-line">9</div>
                <div class="gutter-line">10</div>
                <div class="gutter-line">11</div>
                <div class="gutter-line">12</div>
            </div>
            <div class="code-editor" contenteditable="true">
                <div>// Funzione principale</div>
                <div><span class="keyword">function</span> <span class="function">saluta</span>(<span class="variable">nome</span>) {</div>
                <div>    <span class="comment">// Stampa un messaggio di benvenuto</span></div>
                <div>    <span class="keyword">return</span> <span class="string">`Ciao, ${nome}! Benvenuto in RL Coder`</span>;</div>
                <div>}</div>
                <div></div>
                <div><span class="comment">// Esempio di utilizzo</span></div>
                <div><span class="keyword">const</span> <span class="variable">messaggio</span> = <span class="function">saluta</span>(<span class="string">"Sviluppatore"</span>);</div>
                <div><span class="keyword">console</span>.<span class="function">log</span>(<span class="variable">messaggio</span>);</div>
                <div></div>
                <div><span class="comment">// Array di esempio</span></div>
                <div><span class="keyword">let</span> <span class="variable">numeri</span> = [<span class="number">1</span>, <span class="number">2</span>, <span class="number">3</span>, <span class="number">4</span>, <span class="number">5</span>];</div>
            </div>
        </div>
    </div>
</div>

<!-- Barra di stato -->
<div class="statusbar">
    <div class="status-item">
        <i class="fas fa-code"></i> JavaScript
    </div>
    <div class="status-item">
        <i class="fas fa-indent"></i> Spazi: 4
    </div>
    <div class="status-item">
        <i class="fas fa-check-circle"></i> Pronto
    </div>
    <div class="status-item">
        <i class="fas fa-terminal"></i> Terminale
    </div>
</div>

<script>
    // Funzionalità di base per l'editor
    document.addEventListener('DOMContentLoaded', function() {
        // Gestione selezione file
        const files = document.querySelectorAll('.file');
        files.forEach(file => {
            file.addEventListener('click', function() {
                files.forEach(f => f.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // Gestione selezione tab
        const tabs = document.querySelectorAll('.tab');
        tabs.forEach(tab => {
            tab.addEventListener('click', function(e) {
                if (e.target.classList.contains('fa-times')) return;
                
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // Chiusura tab
        const closeButtons = document.querySelectorAll('.tab-close');
        closeButtons.forEach(button => {
            button.addEventListener('click', function(e) {
                e.stopPropagation();
                const tab = this.closest('.tab');
                if (tabs.length > 1) {
                    tab.remove();
                    // Attiva il primo tab rimanente
                    if (document.querySelector('.tab')) {
                        document.querySelector('.tab').classList.add('active');
                    }
                }
            });
        });
        
        // Aggiorna numeri di riga
        const codeEditor = document.querySelector('.code-editor');
        const gutter = document.querySelector('.gutter');
        
        function updateLineNumbers() {
            const lines = codeEditor.innerText.split('\n').length;
            gutter.innerHTML = '';
            for (let i = 1; i <= lines; i++) {
                const line = document.createElement('div');
                line.className = 'gutter-line';
                if (i === 3) line.classList.add('active'); // Simula riga attiva
                line.textContent = i;
                gutter.appendChild(line);
            }
        }
        
        // Aggiorna numeri di riga all'avvio
        updateLineNumbers();
        
        // Aggiorna numeri di riga durante la digitazione
        codeEditor.addEventListener('input', updateLineNumbers);
        
        // Simula sintassi colorata (in un editor reale userebbe un parser)
        function highlightSyntax() {
            const text = codeEditor.innerText;
            const highlighted = text
                .replace(/(function|const|let|return|console)/g, '<span class="keyword">$1</span>')
                .replace(/(saluta|log)/g, '<span class="function">$1</span>')
                .replace(/(nome|messaggio|numeri)/g, '<span class="variable">$1</span>')
                .replace(/(".*?"|'.*?'|`.*?`)/g, '<span class="string">$1</span>')
                .replace(/(\/\/.*$)/gm, '<span class="comment">$1</span>');
            
            codeEditor.innerHTML = highlighted;
        }
        
        // Applica evidenziazione iniziale
        highlightSyntax();
        
        // Applica evidenziazione durante la digitazione (con ritardo per prestazioni)
        let highlightTimeout;
        codeEditor.addEventListener('input', function() {
            clearTimeout(highlightTimeout);
            highlightTimeout = setTimeout(highlightSyntax, 300);
        });
    });
</script>