Home
Omer fils ELENGA
vscode a la omerlinks

vscode a la omerlinks

This tailwind example is contributed by Omer fils ELENGA, on 04-Dec-2025. Component is made with Tailwind CSS v3. It is responsive. similar terms for this example are Toast, Snackbar,Front page

Pagination Navigations Menu Notification Navbar Landing Page

Author Omer fils ELENGA

111

Fork Fullscreen

<!DOCTYPE html>
<html lang="fr" class="dark overflow-hidden min-h-screen w-screen max-h-screen select-none" x-data="vscodeApp()" x-init="init()">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>OmerLinks - Éditeur de Code Avancé</title>
  
  
  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
  
  
  <script src="https://cdn.tailwindcss.com"></script>
  
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/devicon/2.15.1/devicon.min.css">
  
  
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
  
  
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-html.min.js"></script>
  
  <style>
    :root {
      --bg-body: #1e1e2e;
      --bg-secondary: #181825;
      --bg-tertiary: #313244;
      --bg-hover: #45475a;
      --text-primary: #cdd6f4;
      --text-secondary: #a6adc8;
      --text-tertiary: #6c7086;
      --border-color: #313244;
      --accent: #89b4fa;
      --accent-hover: #74c7ec;
      --success: #a6e3a1;
      --warning: #f9e2af;
      --error: #f38ba8;
      --info: #94e2d5;
    }
    
    * {
      box-sizing: border-box;
    }
    
    body {
      font-family: 'Inter', sans-serif;
      background-color: var(--bg-body);
      color: var(--text-primary);
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    
    .code-font {
      font-family: 'JetBrains Mono', monospace;
    }
    
    .scrollbar-thin {
      scrollbar-width: thin;
      scrollbar-color: var(--bg-hover) transparent;
    }
    
    .scrollbar-thin::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
    
    .scrollbar-thin::-webkit-scrollbar-track {
      background: transparent;
    }
    
    .scrollbar-thin::-webkit-scrollbar-thumb {
      background-color: var(--bg-hover);
      border-radius: 4px;
    }
    
    .scrollbar-thin::-webkit-scrollbar-thumb:hover {
      background-color: var(--text-tertiary);
    }
    
    /* Splash Screen */
    #splashScreen {
      background: linear-gradient(135deg, var(--bg-body) 0%, var(--bg-secondary) 100%);
    }
    
    .splash-logo {
      background: linear-gradient(90deg, var(--accent) 0%, var(--info) 50%, var(--warning) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      filter: drop-shadow(0 0 30px rgba(137, 180, 250, 0.3));
    }
    
    .splash-progress {
      background: linear-gradient(90deg, var(--accent), var(--info), var(--warning));
      background-size: 200% 100%;
      animation: gradient 2s ease infinite;
    }
    
    @keyframes gradient {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    
    /* Tooltips */
    .tooltip {
      position: absolute;
      z-index: 100;
      padding: 6px 12px;
      background: var(--bg-tertiary);
      color: var(--text-primary);
      border-radius: 6px;
      font-size: 12px;
      white-space: nowrap;
      pointer-events: none;
      opacity: 0;
      transform: translateY(10px);
      transition: all 0.2s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      border: 1px solid var(--border-color);
    }
    
    .tooltip:after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 50%;
      transform: translateX(-50%);
      border-width: 5px 5px 0;
      border-style: solid;
      border-color: var(--bg-tertiary) transparent transparent;
    }
    
    .has-tooltip:hover .tooltip {
      opacity: 1;
      transform: translateY(0);
    }
    
    /* Button animations */
    .btn-press {
      transition: transform 0.1s ease;
    }
    
    .btn-press:active {
      transform: scale(0.95);
    }
    
    /* Code editor simulation */
    .line-number {
      color: var(--text-tertiary);
      user-select: none;
    }
    
    .keyword {
      color: var(--warning);
    }
    
    .string {
      color: var(--success);
    }
    
    .comment {
      color: var(--text-tertiary);
    }
    
    .function {
      color: var(--accent);
    }
    
    .variable {
      color: var(--info);
    }
    
    .cursor-blink {
      animation: blink 1s infinite;
    }
    
    @keyframes blink {
      0%, 50% { opacity: 1; }
      51%, 100% { opacity: 0; }
    }
    
    /* File tree animations */
    .file-item {
      transition: all 0.2s ease;
    }
    
    .file-item:hover {
      background: rgba(166, 227, 161, 0.1) !important;
    }
    
    /* Search highlight */
    .search-highlight {
      background: rgba(245, 194, 231, 0.3);
      border-radius: 2px;
      padding: 0 2px;
    }
    
    /* Tab styles */
    .tab-active {
      background-color: var(--bg-body) !important;
      border-bottom: 2px solid var(--accent);
    }
    
    /* Modal styles */
    .modal-backdrop {
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(4px);
    }
    
    /* Context menu */
    .context-menu {
      background-color: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 6px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
      z-index: 1000;
    }
    
    /* Minimap */
    .minimap {
      background-color: var(--bg-secondary);
      border-left: 1px solid var(--border-color);
      width: 120px;
      position: relative;
      overflow: hidden;
    }
    
    .minimap-content {
      transform: scale(0.1);
      transform-origin: top left;
      width: 1000%;
      color: var(--text-tertiary);
      font-size: 10px;
      line-height: 1.5;
      white-space: pre;
      pointer-events: none;
    }
    
    .minimap-viewport {
      position: absolute;
      background-color: rgba(137, 180, 250, 0.2);
      border: 1px solid var(--accent);
      pointer-events: none;
    }
    
    /* Terminal styles */
    .terminal {
      background-color: var(--bg-secondary);
      font-family: 'JetBrains Mono', monospace;
    }
    
    .terminal-input {
      background-color: transparent;
      border: none;
      color: var(--text-primary);
      outline: none;
      font-family: inherit;
      width: 100%;
    }
    
    /* Breadcrumb styles */
    .breadcrumb {
      display: flex;
      align-items: center;
      font-size: 13px;
      color: var(--text-secondary);
    }
    
    .breadcrumb-item {
      display: flex;
      align-items: center;
    }
    
    .breadcrumb-separator {
      margin: 0 4px;
      color: var(--text-tertiary);
    }
    
    /* Status bar styles */
    .status-bar {
      background-color: var(--bg-secondary);
      border-top: 1px solid var(--border-color);
      font-size: 12px;
      color: var(--text-secondary);
    }
    
    /* Activity bar styles */
    .activity-bar {
      background-color: var(--bg-secondary);
      width: 48px;
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 8px 0;
    }
    
    .activity-item {
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 4px 0;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      transition: background-color 0.2s;
    }
    
    .activity-item:hover {
      background-color: var(--bg-hover);
    }
    
    .activity-item.active {
      background-color: var(--bg-hover);
      color: var(--accent);
    }
    
    .activity-item.active::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 3px;
      background-color: var(--accent);
      border-radius: 3px 0 0 3px;
    }
    
    /* Panel styles */
    .panel {
      background-color: var(--bg-body);
      border-right: 1px solid var(--border-color);
      display: flex;
      flex-direction: column;
    }
    
    .panel-header {
      padding: 8px 16px;
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      color: var(--text-secondary);
      background-color: var(--bg-tertiary);
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    
    .panel-content {
      flex: 1;
      overflow-y: auto;
    }
    
    /* Editor styles */
    .editor {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
    
    .editor-tabs {
      display: flex;
      background-color: var(--bg-tertiary);
      overflow-x: auto;
    }
    
    .editor-tab {
      min-width: 120px;
      height: 35px;
      display: flex;
      align-items: center;
      padding: 0 8px;
      background-color: var(--bg-secondary);
      border-right: 1px solid var(--border-color);
      cursor: pointer;
      position: relative;
    }
    
    .editor-tab:hover {
      background-color: var(--bg-hover);
    }
    
    .editor-tab.active {
      background-color: var(--bg-body);
    }
    
    .editor-tab.active::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background-color: var(--accent);
    }
    
    .editor-content {
      flex: 1;
      display: flex;
      overflow: hidden;
    }
    
    .editor-lines {
      width: 50px;
      background-color: var(--bg-body);
      color: var(--text-tertiary);
      text-align: right;
      padding-right: 8px;
      user-select: none;
      font-size: 14px;
      line-height: 1.5;
    }
    
    .editor-code {
      flex: 1;
      background-color: var(--bg-body);
      color: var(--text-primary);
      font-size: 14px;
      line-height: 1.5;
      padding: 0 16px;
      overflow: auto;
    }
    
    /* Command palette styles */
    .command-palette {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      width: 640px;
      max-width: 90vw;
      background-color: var(--bg-tertiary);
      border: 1px solid var(--border-color);
      border-radius: 8px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
      z-index: 1000;
      overflow: hidden;
    }
    
    .command-palette-input {
      padding: 12px 16px;
      border-bottom: 1px solid var(--border-color);
    }
    
    .command-palette-list {
      max-height: 400px;
      overflow-y: auto;
    }
    
    .command-palette-item {
      padding: 8px 16px;
      display: flex;
      align-items: center;
      cursor: pointer;
    }
    
    .command-palette-item:hover {
      background-color: var(--bg-hover);
    }
    
    .command-palette-item.selected {
      background-color: var(--bg-hover);
    }
    
    .command-palette-item-icon {
      width: 24px;
      height: 24px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      color: var(--accent);
    }
    
    .command-palette-item-text {
      flex: 1;
    }
    
    .command-palette-item-shortcut {
      font-size: 12px;
      color: var(--text-tertiary);
    }
  </style>
</head>

<body class="min-h-screen max-h-screen overflow-hidden">
  
  <div id="splashScreen" x-show="showSplash" x-transition:enter="transition ease-out duration-300"
    x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100"
    x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100"
    x-transition:leave-end="opacity-0" class="fixed inset-0 z-50 flex items-center justify-center">
    <div class="text-center">
      <h1 class="splash-logo text-7xl font-bold mb-8 tracking-tighter">omerlinks</h1>
      <p class="text-lg text-gray-400 mb-6">Initialisation de votre environnement de développement...</p>
      <div class="w-64 h-2 bg-gray-800 rounded-full overflow-hidden mx-auto">
        <div class="splash-progress h-full rounded-full" :style="`width: ${splashProgress}%`"></div>
      </div>
      <p class="text-sm text-gray-500 mt-4" x-text="splashStatus"></p>
    </div>
  </div>

<div id="app" class="max-h-screen w-screen overflow-hidden flex flex-col" x-show="!showSplash" x-cloak>
    
    <div class="h-8 bg-[#11111b] border-b border-[#313244] flex items-center px-4 text-sm text-[#cdd6f4]">
      <div class="flex-1 flex items-center">
        <span class="text-[#89b4fa] font-medium">OmerLinks</span>
        <span class="text-gray-400 mx-2">•</span>
        <div class="breadcrumb">
          <template x-for="(item, index) in breadcrumb" :key="index">
            <div class="breadcrumb-item">
              <a href="#" @click.prevent="navigateToBreadcrumb(index)" class="hover:text-[#89b4fa]" x-text="item.name"></a>
              <span x-show="index < breadcrumb.length - 1" class="breadcrumb-separator">›</span>
            </div>
          </template>
        </div>
      </div>
      <div class="flex items-center space-x-4">
        <span class="text-[#cba6f7]" x-text="currentLanguage"></span>
        <span class="text-gray-400">UTF-8</span>
        <span class="text-[#f9e2af]">Live Server</span>
        <div class="flex items-center space-x-4">
          <button @click="toggleTheme" class="has-tooltip relative">
            <i class="fas" :class="darkMode ? 'fa-sun' : 'fa-moon'"></i>
            <span class="tooltip -top-8 left-1/2 transform -translate-x-1/2">
              Changer de thème (Alt+T)
            </span>
          </button>
          <button @click="syncGit" class="has-tooltip relative">
            <i class="fas fa-sync-alt"></i>
            <span class="tooltip -top-8 left-1/2 transform -translate-x-1/2">
              Synchroniser les changements
            </span>
          </button>
        </div>
      </div>
    </div>

<div class="panel" :style="`width: ${sidebarWidth}px`" x-show="showSidebar">
        
        <div x-show="activePanel === 'explorer'" class="h-full flex flex-col">
          <div class="panel-header">
            <span>Explorateur</span>
            <div class="flex space-x-1">
              <button @click="createFile" class="has-tooltip relative btn-press">
                <i class="fas fa-file-plus text-sm"></i>
                <span class="tooltip -top-8 right-0">Nouveau fichier</span>
              </button>
              <button @click="createFolder" class="has-tooltip relative btn-press">
                <i class="fas fa-folder-plus text-sm"></i>
                <span class="tooltip -top-8 right-0">Nouveau dossier</span>
              </button>
              <button @click="refreshExplorer" class="has-tooltip relative btn-press">
                <i class="fas fa-sync-alt text-sm"></i>
                <span class="tooltip -top-8 right-0">Actualiser</span>
              </button>
            </div>
          </div>
          <div class="panel-content p-2">
            <template x-for="(folder, index) in fileSystem" :key="index">
              <div>
                <button @click="toggleFolder(index)" 
                        class="w-full min-h-[32px] flex items-center px-2 py-1 hover:bg-[#313244] transition-colors file-item rounded">
                  <i class="fas text-xs mr-1" 
                     :class="folder.isOpen ? 'fa-chevron-down' : 'fa-chevron-right'"></i>
                  <i class="fas fa-folder mr-2" :class="folder.isOpen ? 'text-[#f9e2af]' : 'text-[#f9e2af]'"></i>
                  <span class="text-sm" x-text="folder.name"></span>
                </button>
                
                <div x-show="folder.isOpen" class="ml-4">
                  <template x-for="(file, fileIndex) in folder.files" :key="fileIndex">
                    <button @click="openFile(file)" 
                            :class="{'bg-[#89b4fa]/20': currentFile === file.name}"
                            class="w-full min-h-[32px] flex items-center px-2 py-1 hover:bg-[#313244] transition-colors file-item rounded">
                      <i :class="getFileIcon(file.type)" class="mr-2"></i>
                      <span class="text-sm" x-text="file.name"></span>
                    </button>
                  </template>
                </div>
              </div>
            </template>
          </div>
        </div>

<div x-show="activePanel === 'search'" class="h-full flex flex-col">
          <div class="panel-header">
            <span>Recherche</span>
            <div class="flex space-x-1">
              <button @click="toggleSearchOption('regex')" 
                      :class="{'text-[#89b4fa]': searchOptions.regex}"
                      class="has-tooltip relative btn-press">
                <i class="fas fa-square-root-alt text-sm"></i>
                <span class="tooltip -top-8 right-0">Expression régulière</span>
              </button>
              <button @click="toggleSearchOption('caseSensitive')" 
                      :class="{'text-[#89b4fa]': searchOptions.caseSensitive}"
                      class="has-tooltip relative btn-press">
                <i class="fas fa-font text-sm"></i>
                <span class="tooltip -top-8 right-0">Respecter la casse</span>
              </button>
              <button @click="toggleSearchOption('wholeWord')" 
                      :class="{'text-[#89b4fa]': searchOptions.wholeWord}"
                      class="has-tooltip relative btn-press">
                <i class="fas fa-text-width text-sm"></i>
                <span class="tooltip -top-8 right-0">Mot entier</span>
              </button>
            </div>
          </div>
          <div class="p-4">
            <div class="relative mb-4">
              <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-[#6c7086]"></i>
              <input x-model="searchQuery" @input="performSearch" 
                     class="w-full bg-[#313244] placeholder:text-[#6c7086] text-[#cdd6f4] text-sm outline-none rounded-lg pl-10 pr-3 py-2.5"
                     placeholder="Rechercher (Ctrl+F)">
            </div>
            <div x-show="searchResults.length > 0" class="mt-4">
              <div class="text-sm text-[#6c7086] mb-2" x-text="`${searchResults.length} résultats trouvés`"></div>
              <div class="space-y-2">
                <template x-for="(result, index) in searchResults" :key="index">
                  <button @click="openSearchResult(result)" 
                          class="w-full p-2 rounded hover:bg-[#313244] text-left">
                    <div class="font-medium text-[#89b4fa]" x-text="result.file"></div>
                    <div class="text-sm text-[#cdd6f4]" x-text="result.preview"></div>
                  </button>
                </template>
              </div>
            </div>
          </div>
        </div>

<div x-show="activePanel === 'sourceControl'" class="h-full flex flex-col">
          <div class="panel-header">
            <span>Contrôle de source</span>
            <div class="flex space-x-1">
              <button @click="initGit" class="has-tooltip relative btn-press">
                <i class="fas fa-code-branch text-sm"></i>
                <span class="tooltip -top-8 right-0">Initialiser Git</span>
              </button>
              <button @click="commitChanges" class="has-tooltip relative btn-press">
                <i class="fas fa-check text-sm"></i>
                <span class="tooltip -top-8 right-0">Valider les changements</span>
              </button>
              <button @click="pushChanges" class="has-tooltip relative btn-press">
                <i class="fas fa-arrow-up text-sm"></i>
                <span class="tooltip -top-8 right-0">Pousser les changements</span>
              </button>
            </div>
          </div>
          <div class="panel-content p-4">
            <div class="mb-4">
              <div class="text-sm font-medium mb-2">Changements</div>
              <template x-for="(change, index) in gitChanges" :key="index">
                <div class="flex items-center p-2 mb-1 bg-[#313244] rounded">
                  <i :class="change.type === 'added' ? 'fas fa-plus text-green-500' : 
                            change.type === 'modified' ? 'fas fa-edit text-yellow-500' : 
                            'fas fa-minus text-red-500'" 
                     class="mr-2"></i>
                  <span class="text-sm" x-text="change.file"></span>
                </div>
              </template>
            </div>
            <div class="mb-4">
              <div class="text-sm font-medium mb-2">Message de commit</div>
              <textarea x-model="commitMessage" 
                        class="w-full bg-[#313244] text-[#cdd6f4] text-sm outline-none rounded-lg p-2.5"
                        placeholder="Message de commit..." rows="3"></textarea>
            </div>
          </div>
        </div>

<div x-show="activePanel === 'extensions'" class="h-full flex flex-col">
          <div class="panel-header">
            <span>Extensions</span>
            <div class="flex space-x-1">
              <button @click="showExtensionSearch = !showExtensionSearch" class="has-tooltip relative btn-press">
                <i class="fas fa-search text-sm"></i>
                <span class="tooltip -top-8 right-0">Rechercher des extensions</span>
              </button>
            </div>
          </div>
          <div class="panel-content p-4">
            <div x-show="showExtensionSearch" class="mb-4">
              <div class="relative">
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-[#6c7086]"></i>
                <input x-model="extensionSearchQuery" 
                       class="w-full bg-[#313244] placeholder:text-[#6c7086] text-[#cdd6f4] text-sm outline-none rounded-lg pl-10 pr-3 py-2.5"
                       placeholder="Rechercher des extensions...">
              </div>
            </div>
            <div class="space-y-3">
              <template x-for="(extension, index) in extensions" :key="index">
                <div class="p-3 bg-[#313244] rounded-lg">
                  <div class="flex items-start justify-between mb-2">
                    <div class="flex items-center">
                      <i :class="extension.icon" class="mr-2 text-lg"></i>
                      <div>
                        <div class="text-sm font-medium" x-text="extension.name"></div>
                        <div class="text-xs text-[#6c7086]" x-text="extension.publisher"></div>
                      </div>
                    </div>
                    <button @click="toggleExtension(index)" 
                            :class="extension.installed ? 'bg-red-600 hover:bg-red-700' : 'bg-blue-600 hover:bg-blue-700'"
                            class="px-2 py-1 text-white text-xs rounded transition-colors">
                      <span x-text="extension.installed ? 'Désinstaller' : 'Installer'"></span>
                    </button>
                  </div>
                  <div class="text-xs text-[#6c7086]" x-text="extension.description"></div>
                </div>
              </template>
            </div>
          </div>
        </div>

<div x-show="activePanel === 'settings'" class="h-full flex flex-col">
          <div class="panel-header">
            <span>Paramètres</span>
          </div>
          <div class="panel-content p-4">
            <div class="mb-6">
              <div class="text-sm font-medium mb-3">Général</div>
              <div class="space-y-3">
                <div class="flex items-center justify-between">
                  <span class="text-sm">Mode sombre</span>
                  <button @click="darkMode = !darkMode" 
                          :class="darkMode ? 'bg-blue-600' : 'bg-gray-600'"
                          class="w-12 h-6 rounded-full relative transition-colors">
                    <div :class="darkMode ? 'translate-x-6' : 'translate-x-1'" 
                         class="absolute top-1 w-4 h-4 bg-white rounded-full transition-transform"></div>
                  </button>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-sm">Minimap</span>
                  <button @click="showMinimap = !showMinimap" 
                          :class="showMinimap ? 'bg-blue-600' : 'bg-gray-600'"
                          class="w-12 h-6 rounded-full relative transition-colors">
                    <div :class="showMinimap ? 'translate-x-6' : 'translate-x-1'" 
                         class="absolute top-1 w-4 h-4 bg-white rounded-full transition-transform"></div>
                  </button>
                </div>
                <div class="flex items-center justify-between">
                  <span class="text-sm">Retour à la ligne</span>
                  <button @click="wordWrap = !wordWrap" 
                          :class="wordWrap ? 'bg-blue-600' : 'bg-gray-600'"
                          class="w-12 h-6 rounded-full relative transition-colors">
                    <div :class="wordWrap ? 'translate-x-6' : 'translate-x-1'" 
                         class="absolute top-1 w-4 h-4 bg-white rounded-full transition-transform"></div>
                  </button>
                </div>
              </div>
            </div>
            <div class="mb-6">
              <div class="text-sm font-medium mb-3">Éditeur</div>
              <div class="space-y-3">
                <div>
                  <label class="text-sm block mb-1">Taille de police</label>
                  <input type="range" x-model="fontSize" min="10" max="24" 
                         class="w-full">
                  <div class="text-xs text-[#6c7086] mt-1" x-text="`${fontSize}px`"></div>
                </div>
                <div>
                  <label class="text-sm block mb-1">Famille de police</label>
                  <select x-model="fontFamily" 
                          class="w-full bg-[#313244] text-[#cdd6f4] text-sm outline-none rounded-lg p-2.5">
                    <option value="'JetBrains Mono', monospace">JetBrains Mono</option>
                    <option value="'Fira Code', monospace">Fira Code</option>
                    <option value="'Source Code Pro', monospace">Source Code Pro</option>
                    <option value="'Consolas', monospace">Consolas</option>
                  </select>
                </div>
              </div>
            </div>
            <div>
              <div class="text-sm font-medium mb-3">Raccourcis clavier</div>
              <div class="space-y-2">
                <div class="flex justify-between">
                  <span class="text-sm">Palette de commandes</span>
                  <kbd class="px-2 py-1 bg-[#313244] rounded text-xs">Ctrl+Shift+P</kbd>
                </div>
                <div class="flex justify-between">
                  <span class="text-sm">Rechercher</span>
                  <kbd class="px-2 py-1 bg-[#313244] rounded text-xs">Ctrl+F</kbd>
                </div>
                <div class="flex justify-between">
                  <span class="text-sm">Terminal</span>
                  <kbd class="px-2 py-1 bg-[#313244] rounded text-xs">Ctrl+`</kbd>
                </div>
                <div class="flex justify-between">
                  <span class="text-sm">Enregistrer</span>
                  <kbd class="px-2 py-1 bg-[#313244] rounded text-xs">Ctrl+S</kbd>
                </div>
              </div>
            </div>
          </div>
        </div>

<div @mousedown="startResize"
          class="absolute top-0 right-0 h-full w-1 bg-transparent hover:bg-[#89b4fa] cursor-col-resize">
        </div>
      </div>

<div class="editor flex-1 flex flex-col">
        
        <div class="editor-tabs">
          <template x-for="(tab, index) in openTabs" :key="index">
            <button @click="switchTab(index)" 
                    :class="{'active': activeTabIndex === index}"
                    class="editor-tab group">
              <i :class="tab.icon" class="mr-2"></i>
              <span class="truncate flex-1 text-left" x-text="tab.name"></span>
              <button @click.stop="closeTab(index)" 
                      class="ml-2 opacity-0 group-hover:opacity-100 hover:text-white">
                <i class="fas fa-times text-xs"></i>
              </button>
            </button>
          </template>
          <button @click="newEditorTab" 
                  class="h-[35px] px-4 hover:bg-[#313244] transition-colors has-tooltip relative">
            <i class="fas fa-plus"></i>
            <span class="tooltip -bottom-10 left-1/2 transform -translate-x-1/2">
              Nouvel éditeur (Ctrl+Shift+N)
            </span>
          </button>
        </div>

<div class="editor-content">
          
          <div class="editor-lines code-font" :style="`font-size: ${fontSize}px`">
            <template x-for="i in (currentFileContent ? currentFileContent.split('\n').length : 30)" :key="i">
              <div class="h-6 leading-6" x-text="i"></div>
            </template>
          </div>
          
          
          <div class="editor-code code-font" :style="`font-size: ${fontSize}px; font-family: ${fontFamily}`">
            <div class="space-y-1">
              <template x-for="(line, index) in (currentFileContent ? currentFileContent.split('\n') : [])" :key="index">
                <div class="h-6 leading-6" x-html="highlightSyntax(line)"></div>
              </template>
            </div>
            
            
            <div class="h-6 flex items-center mt-1">
              <div class="w-2 h-4 bg-[#89b4fa] cursor-blink"></div>
              <span class="ml-1 text-xs text-[#6c7086]" x-text="`Ln ${cursorPosition.line}, Col ${cursorPosition.col}`"></span>
            </div>
          </div>
          
          
          <div x-show="showMinimap" class="minimap">
            <div class="minimap-content" x-text="currentFileContent"></div>
            <div class="minimap-viewport" :style="`height: ${100 / Math.max(1, (currentFileContent ? currentFileContent.split('\n').length : 30) * 0.1)}%; top: ${scrollPosition / Math.max(1, (currentFileContent ? currentFileContent.split('\n').length : 30)) * 100}%`"></div>
          </div>
        </div>

<div class="status-bar h-6 flex items-center px-4">
          <div class="flex-1 flex items-center space-x-4">
            <button @click="toggleTerminal" class="flex items-center space-x-1 hover:text-[#89b4fa]">
              <i class="fas fa-terminal"></i>
              <span>Terminal</span>
            </button>
            <span class="text-[#a6e3a1]">● Aucune erreur</span>
            <span class="text-[#f9e2af]">main</span>
          </div>
          <div class="flex items-center space-x-4">
            <span class="text-[#cba6f7]">UTF-8</span>
            <span class="text-[#89b4fa]" x-text="currentLanguage"></span>
            <span class="text-[#6c7086]" x-text="`Ln ${cursorPosition.line}, Col ${cursorPosition.col}`"></span>
            <span class="text-[#6c7086]">Espaces: 2</span>
          </div>
        </div>

<div x-show="showTerminal" x-transition class="terminal h-64 border-t border-t-[#313244]">
          <div class="h-8 bg-[#181825] flex items-center px-4 border-b border-b-[#313244]">
            <span class="text-sm">TERMINAL</span>
            <button @click="toggleTerminal" class="ml-auto">
              <i class="fas fa-chevron-down"></i>
            </button>
          </div>
          <div class="p-4 code-font text-sm overflow-y-auto" style="max-height: calc(100% - 32px);">
            <template x-for="(line, index) in terminalHistory" :key="index">
              <div :class="line.type === 'command' ? 'text-[#a6e3a1]' : line.type === 'output' ? 'text-[#89b4fa]' : 'text-[#f9e2af]'" x-text="line.content"></div>
            </template>
            <div class="flex items-center">
              <span class="text-[#a6e3a1]">$ </span>
              <input x-model="terminalInput" @keyup.enter="executeCommand" 
                     class="terminal-input ml-1" autofocus>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="fixed top-4 right-4 z-40 space-y-2 w-80">
      <template x-for="(notification, index) in notifications" :key="index">
        <div class="bg-[#313244] border-l-4 border-[#89b4fa] text-[#cdd6f4] p-4 rounded-lg shadow-lg flex items-start"
          x-show="notification.visible" x-transition:enter="transition ease-out duration-300"
          x-transition:enter-start="translate-x-full opacity-0"
          x-transition:enter-end="translate-x-0 opacity-100"
          x-transition:leave="transition ease-in duration-200"
          x-transition:leave-start="translate-x-0 opacity-100"
          x-transition:leave-end="translate-x-full opacity-0">
          <i :class="notification.icon" class="text-xl mr-3 mt-0.5"></i>
          <div class="flex-1">
            <p class="font-medium" x-text="notification.title"></p>
            <p class="text-sm text-gray-300 mt-1" x-text="notification.message"></p>
          </div>
          <button @click="closeNotification(index)" class="ml-2 text-gray-400 hover:text-white">
            <i class="fas fa-times"></i>
          </button>
        </div>
      </template>
    </div>

<div x-show="showCommandPalette" @click.away="showCommandPalette = false" 
         class="command-palette">
      <div class="command-palette-input">
        <input x-model="commandPaletteQuery" @input="filterCommands" 
               class="w-full bg-transparent outline-none text-[#cdd6f4]" 
               placeholder="Tapez une commande ou recherche...">
      </div>
      <div class="command-palette-list">
        <template x-for="(command, index) in filteredCommands" :key="index">
          <button @click="executeCommandAction(command)" 
                  :class="{'selected': commandPaletteIndex === index}"
                  class="command-palette-item">
            <div class="command-palette-item-icon">
              <i :class="command.icon"></i>
            </div>
            <div class="command-palette-item-text" x-text="command.name"></div>
            <div class="command-palette-item-shortcut" x-text="command.shortcut"></div>
          </button>
        </template>
      </div>
    </div>
  </div>

Related Examples