1 files changed, 146 insertions, 0 deletions
diff --git a/static/index.html b/static/index.html
new file mode 100644
index 0000000..842775a
--- /dev/null
+++ b/static/index.html
@@ -0,0 +1,146 @@
+<!-- index.html -->
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <title>Network UI — Control Panel</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link rel="stylesheet" href="./static/styles.css">
+</head>
+
+<body>
+    <header>
+        <h2>Network Classroom</h2>
+        <p class="subtitle">Educational interface for learning network configuration with systemd-networkd</p>
+    </header>
+
+    <main>
+        <nav>
+            <button class="nav-button active" onclick="show('status')">
+                <span>🌐</span> Network Status
+            </button>
+            <button class="nav-button" onclick="show('configs')">
+                <span>⚙️</span> Configurations
+            </button>
+            <button class="nav-button" onclick="show('logs')">
+                <span>📋</span> System Logs
+            </button>
+            <button class="nav-button accent" onclick="show('commands')">
+                <span>🔧</span> System Commands
+            </button>
+
+            <div class="tips-section">
+                <div class="tips-title">Learning Tips</div>
+                <ul class="tips-list">
+                    <li>Always validate before saving changes</li>
+                    <li>Automatic backups are created on save</li>
+                    <li>Use the logs to troubleshoot issues</li>
+                </ul>
+            </div>
+        </nav>
+
+        <section id="panelStatus" class="active">
+            <div class="card">
+                <div class="card-header">
+                    <div>
+                        <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()">
+                        <span>🔄</span> Refresh
+                    </button>
+                </div>
+                <div id="ifaces" class="interface-grid"></div>
+            </div>
+        </section>
+
+        <section id="panelConfigs">
+            <div class="card">
+                <div class="card-header">
+                    <div>
+                        <h3 class="card-title">Configuration Files</h3>
+                        <p class="card-description">Edit systemd-networkd configuration files in /etc/systemd/network/
+                        </p>
+                    </div>
+                    <div style="display: flex; gap: var(--spacing-s);">
+                        <button class="button secondary" onclick="refreshConfigs()">
+                            Refresh List
+                        </button>
+                        <button class="button" onclick="saveConfig()">
+                            <span>💾</span> Save
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <div class="card">
+                <div class="form-group">
+                    <label class="form-label">Configuration File</label>
+                    <select id="configSelect" class="select" onchange="loadConfig()"></select>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">File Contents</label>
+                    <textarea id="cfgEditor" class="textarea" spellcheck="false"></textarea>
+                </div>
+
+                <div class="checkbox-group">
+                    <input type="checkbox" id="restartAfterSave" class="checkbox">
+                    <label for="restartAfterSave" class="checkbox-label">
+                        Restart systemd-networkd after saving
+                    </label>
+                </div>
+
+                <div style="display: flex; gap: var(--spacing-s); align-items: center;">
+                    <button class="button secondary" onclick="validateConfig()">
+                        Validate Configuration
+                    </button>
+                    <span id="validateResult"></span>
+                </div>
+            </div>
+        </section>
+
+        <section id="panelLogs">
+            <div class="card">
+                <div class="card-header">
+                    <div>
+                        <h3 class="card-title">System Logs</h3>
+                        <p class="card-description">Recent logs from systemd-networkd service</p>
+                    </div>
+                    <button class="button" onclick="loadLogs()">
+                        <span>🔄</span> Refresh
+                    </button>
+                </div>
+                <div class="logs-container" id="logsArea">[Loading logs...]</div>
+            </div>
+        </section>
+
+        <section id="panelCommands">
+            <div class="card">
+                <h3 class="card-title">System Commands</h3>
+                <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()">
+                        <span>🔄</span> Restart Network Service
+                    </button>
+                    <button class="button warning" onclick="rebootDevice()">
+                        <span>⚠️</span> Reboot Device
+                    </button>
+                </div>
+
+                <div id="cmdResult" class="command-result"></div>
+            </div>
+        </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>
+</body>
+
+</html>