script

frontend/devices.html

@@ -24,25 +24,29 @@
   </header>
 
   <!-- Main Content -->
-  <main class="container">
-    <!-- Search Bar -->
-    <div class="search-bar">
-      <span class="search-icon">🔍</span>
-      <input
-        type="text"
-        id="searchInput"
-        class="search-input"
-        placeholder="Rechercher par hostname, description ou tags..."
-      >
-    </div>
+  <main class="container" style="max-width: 100%; padding: 0 1rem;">
+    <!-- Two-Panel Layout -->
+    <div style="display: flex; gap: 1rem; height: calc(100vh - 200px); margin-top: 1rem;">
+      <!-- Left Panel: Device List (1/5 width) -->
+      <div style="flex: 0 0 20%; display: flex; flex-direction: column; background: var(--card-bg); border-radius: 8px; overflow: hidden;">
+        <div style="padding: 1rem; border-bottom: 1px solid var(--border-color); font-weight: 600; font-size: 1.1rem;">
+          📋 Devices
+        </div>
+        <div id="deviceList" style="flex: 1; overflow-y: auto; padding: 0.5rem;">
+          <div class="loading">Chargement...</div>
+        </div>
+      </div>
 
-    <!-- Devices Grid -->
-    <div id="devicesContainer">
-      <div class="loading">Chargement des devices</div>
+      <!-- Right Panel: Device Details (4/5 width) -->
+      <div style="flex: 1; background: var(--card-bg); border-radius: 8px; overflow-y: auto;">
+        <div id="deviceDetailsContainer" style="padding: 2rem;">
+          <div style="text-align: center; color: var(--text-secondary); padding: 4rem 2rem;">
+            <div style="font-size: 3rem; margin-bottom: 1rem;">📊</div>
+            <p style="font-size: 1.1rem;">Sélectionnez un device dans la liste pour afficher ses détails</p>
+          </div>
+        </div>
+      </div>
     </div>
-
-    <!-- Pagination -->
-    <div id="paginationContainer"></div>
   </main>
 
   <!-- Footer -->