1 files changed, 80 insertions, 0 deletions
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..618f523
--- /dev/null
+++ b/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Systemd-networkd Control Panel</title>
+    <script type="module" src="https://unpkg.com/@fluentui/web-components@2.6.1/dist/web-components.min.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 2em;
+        }
+
+        section {
+            margin-bottom: 2em;
+        }
+
+        pre {
+            background: #f5f5f5;
+            padding: 1em;
+            border-radius: 6px;
+            overflow-x: auto;
+        }
+    </style>
+</head>
+
+<body>
+
+    <h1>Systemd-networkd Control Panel</h1>
+    <p>This page shows network status, logs, and allows you to restart network services or reboot the device.
+        For more details see <a href="https://www.freedesktop.org/software/systemd/man/systemd-networkd.service.html"
+            target="_blank">systemd-networkd documentation</a>.</p>
+
+    <section>
+        <h2>1. Network Status</h2>
+        <p>The command <code>networkctl status --json=short</code> shows current interfaces, addresses, and routes.</p>
+        <fluent-button appearance="accent" onclick="loadStatus()">Refresh Status</fluent-button>
+        <pre id="status">[Waiting for data]</pre>
+    </section>
+
+    <section>
+        <h2>2. Network Logs</h2>
+        <p>Logs come from <code>journalctl -u systemd-networkd.service</code>. This helps diagnose DHCP and link issues.
+        </p>
+        <fluent-button onclick="loadLogs()">Show Logs</fluent-button>
+        <pre id="logs">[Waiting for logs]</pre>
+    </section>
+
+    <section>
+        <h2>3. Manage Services</h2>
+        <p>
+            - Reload networkd after configuration changes.<br>
+            - Reboot device if required.
+        </p>
+        <fluent-button appearance="accent" onclick="reloadNetworkd()">Restart networkd</fluent-button>
+        <fluent-button appearance="accent" onclick="rebootDevice()">Reboot device</fluent-button>
+    </section>
+
+    <script>
+        async function loadStatus() {
+            let res = await fetch('/api/status');
+            document.getElementById('status').textContent = await res.text();
+        }
+        async function loadLogs() {
+            let res = await fetch('/api/logs');
+            document.getElementById('logs').textContent = await res.text();
+        }
+        async function reloadNetworkd() {
+            let res = await fetch('/api/reload', {method: 'POST'});
+            alert(await res.text());
+        }
+        async function rebootDevice() {
+            let res = await fetch('/api/reboot', {method: 'POST'});
+            alert(await res.text());
+        }
+    </script>
+
+</body>
+
+</html>