|
12 | 12 | <body class="bg-gray-900"> |
13 | 13 |
|
14 | 14 | <div id="app-container" class="main-container bg-gray-900 text-gray-100 font-mono p-4 shadow-lg overflow-hidden"> |
15 | | - <nav class="menu-bar bg-gray-800 p-2 rounded-t-lg flex items-center justify-between relative z-10 flex-shrink-0 border-b border-gray-700"> |
16 | | - <div class="flex space-x-1 sm:space-x-4"> |
17 | | - <div class="relative"> |
18 | | - <button id="file-menu-button" class="menu-button px-2 sm:px-3 py-1 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"> |
19 | | - Fichier |
20 | | - </button> |
21 | | - <div id="file-menu-dropdown" class="hidden absolute top-full left-0 mt-1 w-48 bg-gray-700 rounded-md shadow-lg py-1 z-20"> |
22 | | - <button id="import-code-button" class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base"> |
23 | | - Importer du code... |
24 | | - </button> |
25 | | - <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="app.addOutput('Fonctionnalité \"Nouveau fichier\" en cours de développement.'); app.closeAllMenus();"> |
26 | | - Nouveau fichier |
27 | | - </button> |
28 | | - <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="app.addOutput('Fonctionnalité \"Enregistrer\" en cours de développement.'); app.closeAllMenus();"> |
29 | | - Enregistrer |
| 15 | + <div class="flex flex-col h-screen"> |
| 16 | + <nav class="menu-bar bg-gray-800 p-2 rounded-t-lg flex items-center justify-between relative z-10 flex-shrink-0 border-b border-gray-700"> |
| 17 | + <div class="flex space-x-1 sm:space-x-4"> |
| 18 | + <div class="relative"> |
| 19 | + <button id="file-menu-button" class="menu-button px-2 sm:px-3 py-1 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"> |
| 20 | + Fichier |
30 | 21 | </button> |
| 22 | + <div id="file-menu-dropdown" class="hidden absolute top-full left-0 mt-1 w-48 bg-gray-700 rounded-md shadow-lg py-1 z-20"> |
| 23 | + <button id="import-code-button" class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base"> |
| 24 | + Importer du code... |
| 25 | + </button> |
| 26 | + <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="app.addOutput('Fonctionnalité \"Nouveau fichier\" en cours de développement.'); app.closeAllMenus();"> |
| 27 | + Nouveau fichier |
| 28 | + </button> |
| 29 | + <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="app.addOutput('Fonctionnalité \"Enregistrer\" en cours de développement.'); app.closeAllMenus();"> |
| 30 | + Enregistrer |
| 31 | + </button> |
| 32 | + </div> |
31 | 33 | </div> |
32 | | - </div> |
33 | 34 |
|
34 | | - <div class="relative"> |
35 | | - <button id="tools-menu-button" class="menu-button px-2 sm:px-3 py-1 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"> |
36 | | - Outils |
37 | | - </button> |
38 | | - <div id="tools-menu-dropdown" class="hidden absolute top-full left-0 mt-1 w-48 bg-gray-700 rounded-md shadow-lg py-1 z-20"> |
39 | | - <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" |
40 | | - onclick="document.getElementById('settings-modal').classList.remove('hidden'); app.closeAllMenus();"> |
41 | | - Paramètres |
42 | | - </button> |
43 | | - <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="app.addOutput('Fonctionnalité \"Déboguer\" en cours de développement.'); app.closeAllMenus"> |
44 | | - Déboguer |
45 | | - </button> |
46 | | - <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="(function(){ app.commands.clear.call(app); app.closeAllMenus(); })();"> |
47 | | - Vider la console (Ctrl+L) |
48 | | - </button> |
49 | | - <button id="show-history-button" class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base"> |
50 | | - Afficher l'historique |
| 35 | + <div class="relative"> |
| 36 | + <button id="tools-menu-button" class="menu-button px-2 sm:px-3 py-1 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"> |
| 37 | + Outils |
51 | 38 | </button> |
| 39 | + <div id="tools-menu-dropdown" class="hidden absolute top-full left-0 mt-1 w-48 bg-gray-700 rounded-md shadow-lg py-1 z-20"> |
| 40 | + <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" |
| 41 | + onclick="document.getElementById('settings-modal').classList.remove('hidden'); app.closeAllMenus();"> |
| 42 | + Paramètres |
| 43 | + </button> |
| 44 | + <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="app.addOutput('Fonctionnalité \"Déboguer\" en cours de développement.'); app.closeAllMenus"> |
| 45 | + Déboguer |
| 46 | + </button> |
| 47 | + <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="(function(){ app.commands.clear.call(app); app.closeAllMenus(); })();"> |
| 48 | + Vider la console (Ctrl+L) |
| 49 | + </button> |
| 50 | + <button id="show-history-button" class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base"> |
| 51 | + Afficher l'historique |
| 52 | + </button> |
| 53 | + </div> |
52 | 54 | </div> |
53 | | - </div> |
54 | 55 |
|
55 | | - <div class="relative"> |
56 | | - <button id="help-menu-button" class="menu-button px-2 sm:px-3 py-1 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"> |
57 | | - Aide |
58 | | - </button> |
59 | | - <div id="help-menu-dropdown" class="hidden absolute top-full left-0 mt-1 w-48 bg-gray-700 rounded-md shadow-lg py-1 z-20"> |
60 | | - <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="app.commands.help(); app.closeAllMenus();"> |
61 | | - Commandes |
62 | | - </button> |
63 | | - <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="document.getElementById('about-modal').classList.remove('hidden'); app.closeAllMenus();"> |
64 | | - À propos |
| 56 | + <div class="relative"> |
| 57 | + <button id="help-menu-button" class="menu-button px-2 sm:px-3 py-1 rounded-md hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500 text-sm sm:text-base"> |
| 58 | + Aide |
65 | 59 | </button> |
| 60 | + <div id="help-menu-dropdown" class="hidden absolute top-full left-0 mt-1 w-48 bg-gray-700 rounded-md shadow-lg py-1 z-20"> |
| 61 | + <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="app.commands.help(); app.closeAllMenus();"> |
| 62 | + Commandes |
| 63 | + </button> |
| 64 | + <button class="block w-full text-left px-4 py-2 hover:bg-gray-600 text-sm sm:text-base" onclick="document.getElementById('about-modal').classList.remove('hidden'); app.closeAllMenus();"> |
| 65 | + À propos |
| 66 | + </button> |
| 67 | + </div> |
66 | 68 | </div> |
67 | 69 | </div> |
68 | | - </div> |
69 | | - <span id="console-name" class="text-xs sm:text-sm text-gray-400 mr-3 select-none">Console Linux Web</span> |
70 | | - </nav> |
71 | | - |
72 | | - <div class="flex flex-col h-screen"> |
73 | | - <div id="console-output" class="flex-grow bg-gray-800 p-4 overflow-y-auto custom-scrollbar rounded-b-lg border border-gray-700 shadow-inner min-h-0 "> |
74 | | - <div id="loading-llm-indicator" class="text-yellow-400 hidden animate-pulse"> |
75 | | - <span class="inline-block mr-2">⚡</span>Génération en cours... |
76 | | - </div> |
77 | | - <div id="console-end-ref"></div> |
| 70 | + <span id="console-name" class="text-xs sm:text-sm text-gray-400 mr-3 select-none">Console Linux Web</span> |
| 71 | + </nav> |
| 72 | + <div id="console-output" class="flex-grow bg-gray-800 p-4 overflow-y-auto custom-scrollbar rounded-b-lg border border-gray-700 shadow-inner"> |
| 73 | + <div id="loading-llm-indicator" class="text-yellow-400 hidden animate-pulse"> |
| 74 | + <span class="inline-block mr-2">⚡</span>Génération en cours... |
| 75 | + </div> |
| 76 | + <div id="console-end-ref"></div> |
78 | 77 | </div> |
79 | 78 |
|
80 | 79 | <form id="command-form" class="flex mt-3 flex-shrink-0 bg-gray-800 p-2 rounded-lg border border-gray-700"> |
81 | | - <label for="command-input" id="prompt-label" class="flex-shrink-0 text-green-400 mr-2 flex items-center select-none font-bold"></label> |
82 | | - <input |
83 | | - id="command-input" |
84 | | - type="text" |
85 | | - class="flex-grow bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-3 py-2 rounded-md transition-all duration-200 placeholder-gray-400" |
86 | | - autocomplete="off" |
87 | | - autocapitalize="off" |
88 | | - spellcheck="false" |
89 | | - placeholder="Tapez votre commande..." |
90 | | - /> |
| 80 | + <label for="command-input" id="prompt-label" class="flex-shrink-0 text-green-400 mr-2 flex items-center select-none font-bold"></label> |
| 81 | + </label> |
| 82 | + <input |
| 83 | + id="command-input" |
| 84 | + type="text" |
| 85 | + class="flex-grow bg-gray-700 text-white border border-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 px-3 py-2 rounded-md transition-all duration-200 placeholder-gray-400" |
| 86 | + autocomplete="off" |
| 87 | + autocapitalize="off" |
| 88 | + spellcheck="false" |
| 89 | + placeholder="Tapez votre commande..." |
| 90 | + /> |
91 | 91 | </form> |
92 | 92 | </div> |
93 | 93 |
|
|
0 commit comments