vscode a la omerlinks

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

Pagination Navigations Menu Notification Navbar Landing Page

Author Omer fils ELENGA

Tailwind v3.4 601 2

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

Previous page - Next page Buttons

Krishna Gudpalle

4 years ago

14.3k
Minimalistic navbar
Responsive navbar

Sophia Baker

3 years ago

21.7k
Navbar compoent

Amit Pachange

3 years ago

17.3k
Back and next navigation buttons

Fagundo67

3 years ago

12.7k
Flour mill website landing page template
flour mill and services template website which comprise of many sections like about us, featured products, why us, visit us

Amit Pachange

2 years ago

16k
New Nav Component
A new navigation component

Amit PR

2 years ago

3.8k
Navbar
E-commerce Navbar

Aman kumar

2 years ago

5.6k
beautifull portfolio page
I create a portfolio page

Akram Khan

2 years ago

3k
Tailwind css navigation header
Tailwind css navigation header

Abid Ullah

2 years ago

3.2k
Animated underline hover navbar
Simple animated underline hover effect navbar.

inbarajan P

2 years ago

3.6k
Hover Animated Navbar
Remove the bg-black in the outer div when using it. Hovering the button and each item in the navbar has a fun animation.

Coastal UI

1 year ago

3.9k
animated navigation bar

Md. Tofayel islam

1 year ago

3.1k