From a1862888a7818ae9663b02dda48d25ef5f2ab6a6 Mon Sep 17 00:00:00 2001
From: Petri Hienonen <petri.hienonen@gmail.com>
Date: Sun, 28 Sep 2025 13:30:59 +0300
Subject: Iteration 2

---
 static/index.html | 41 ++++++++++++++++++++---------------------
 1 file changed, 20 insertions(+), 21 deletions(-)

(limited to 'static/index.html')
diff --git a/static/index.html b/static/index.html
index 842775a..0e87967 100644
--- a/static/index.html
+++ b/static/index.html
@@ -4,7 +4,7 @@
 
 <head>
     <meta charset="utf-8" />
-    <title>Network UI — Control Panel</title>
+    <title>Network Classroom — Control Panel</title>
     <meta name="viewport" content="width=device-width,initial-scale=1" />
     <link rel="stylesheet" href="./static/styles.css">
 </head>
@@ -13,20 +13,23 @@
     <header>
         <h2>Network Classroom</h2>
         <p class="subtitle">Educational interface for learning network configuration with systemd-networkd</p>
+        <button class="theme-toggle" id="themeToggle" title="Toggle theme">
+            <span id="themeIcon">🌙</span>
+        </button>
     </header>
 
     <main>
-        <nav>
-            <button class="nav-button active" onclick="show('status')">
+        <nav id="mainNav">
+            <button class="nav-button active" data-panel="status">
                 <span>🌐</span> Network Status
             </button>
-            <button class="nav-button" onclick="show('configs')">
+            <button class="nav-button" data-panel="configs">
                 <span>⚙️</span> Configurations
             </button>
-            <button class="nav-button" onclick="show('logs')">
+            <button class="nav-button" data-panel="logs">
                 <span>📋</span> System Logs
             </button>
-            <button class="nav-button accent" onclick="show('commands')">
+            <button class="nav-button accent" data-panel="commands">
                 <span>🔧</span> System Commands
             </button>
 
@@ -47,11 +50,12 @@
                         <h3 class="card-title">Network Status</h3>
                         <p class="card-description">Live view of network interfaces and their configuration</p>
                     </div>
-                    <button class="button" onclick="loadStatus()">
+                    <button class="button" id="refreshStatus">
                         <span>🔄</span> Refresh
                     </button>
                 </div>
-                <div id="ifaces" class="interface-grid"></div>
+                <div id="interfaceTabs" class="interface-tabs"></div>
+                <div id="interfaceDetails" class="interface-details-container"></div>
             </div>
         </section>
 
@@ -64,10 +68,10 @@
                         </p>
                     </div>
                     <div style="display: flex; gap: var(--spacing-s);">
-                        <button class="button secondary" onclick="refreshConfigs()">
+                        <button class="button secondary" id="refreshConfigs">
                             Refresh List
                         </button>
-                        <button class="button" onclick="saveConfig()">
+                        <button class="button" id="saveConfig">
                             <span>💾</span> Save
                         </button>
                     </div>
@@ -77,7 +81,7 @@
             <div class="card">
                 <div class="form-group">
                     <label class="form-label">Configuration File</label>
-                    <select id="configSelect" class="select" onchange="loadConfig()"></select>
+                    <select id="configSelect" class="select"></select>
                 </div>
 
                 <div class="form-group">
@@ -93,7 +97,7 @@
                 </div>
 
                 <div style="display: flex; gap: var(--spacing-s); align-items: center;">
-                    <button class="button secondary" onclick="validateConfig()">
+                    <button class="button secondary" id="validateConfig">
                         Validate Configuration
                     </button>
                     <span id="validateResult"></span>
@@ -108,7 +112,7 @@
                         <h3 class="card-title">System Logs</h3>
                         <p class="card-description">Recent logs from systemd-networkd service</p>
                     </div>
-                    <button class="button" onclick="loadLogs()">
+                    <button class="button" id="refreshLogs">
                         <span>🔄</span> Refresh
                     </button>
                 </div>
@@ -122,10 +126,10 @@
                 <p class="card-description">Manage network services and system state</p>
 
                 <div style="display: flex; gap: var(--spacing-s); margin-top: var(--spacing-xl);">
-                    <button class="button" onclick="restartNetworkd()">
+                    <button class="button" id="restartNetworkd">
                         <span>🔄</span> Restart Network Service
                     </button>
-                    <button class="button warning" onclick="rebootDevice()">
+                    <button class="button warning" id="rebootDevice">
                         <span>⚠️</span> Reboot Device
                     </button>
                 </div>
@@ -135,12 +139,7 @@
         </section>
     </main>
 
-    <script type="module">
-        import {show, api, loadStatus, renderIfaces, arrayToMac, ipFromArray, routeToString, refreshConfigs, loadConfig, validateConfig, saveConfig, loadLogs, restartNetworkd, rebootDevice} from "./static/functions.js";
-        window.onload = function () {
-            loadStatus();
-        }
-    </script>
+    <script type="module" src="./static/app.js"></script>
 </body>
 
 </html>
-- 
cgit v1.2.3-70-g09d2

