diff options
Diffstat (limited to 'static/index.html')
| -rw-r--r-- | static/index.html | 41 |
1 files changed, 20 insertions, 21 deletions
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> |