iot/spore-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: format index.html

Browse Source
This commit is contained in:
0x1d
2025-08-31 11:02:19 +02:00
parent 17d68c45e1
commit d91eb4d5b6
1 changed files with 61 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
public/index.html
View File

@@ -1,72 +1,66 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SPORE UI</title> <title>SPORE UI</title>
<link rel="stylesheet" href="styles/main.css"> <link rel="stylesheet" href="styles/main.css">
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<div class="main-navigation"> <div class="main-navigation">
<button class="burger-btn" id="burger-btn" aria-label="Menu" title="Menu"> <button class="burger-btn" id="burger-btn" aria-label="Menu" title="Menu">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M3 6h18M3 12h18M3 18h18"/> <path d="M3 6h18M3 12h18M3 18h18" />
</svg> </svg>
</button> </button>
<div class="nav-left"> <div class="nav-left">
<button class="nav-tab active" data-view="cluster">🌐 Cluster</button> <button class="nav-tab active" data-view="cluster">🌐 Cluster</button>
<button class="nav-tab" data-view="topology">🔗 Topology</button> <button class="nav-tab" data-view="topology">🔗 Topology</button>
<button class="nav-tab" data-view="firmware">📦 Firmware</button> <button class="nav-tab" data-view="firmware">📦 Firmware</button>
</div>
<div class="nav-right">
<div class="cluster-status">🚀 Cluster Online</div>
</div>
</div> </div>
<div class="nav-right">
<div id="cluster-view" class="view-content active"> <div class="cluster-status">🚀 Cluster Online</div>
<div class="cluster-section"> </div>
<div class="cluster-header"> </div>
<div class="cluster-header-left">
<div class="primary-node-info"> <div id="cluster-view" class="view-content active">
<span class="primary-node-label">Primary Node:</span> <div class="cluster-section">
<span class="primary-node-ip" id="primary-node-ip">Discovering...</span> <div class="cluster-header">
<button class="primary-node-refresh" id="select-random-primary-btn" title="🎲 Select random primary node"> <div class="cluster-header-left">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"> <div class="primary-node-info">
<path d="M1 4v6h6M23 20v-6h-6"/> <span class="primary-node-label">Primary Node:</span>
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/> <span class="primary-node-ip" id="primary-node-ip">Discovering...</span>
</svg> <button class="primary-node-refresh" id="select-random-primary-btn"
</button> title="🎲 Select random primary node">
</div> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14"
</div> height="14">
<button class="refresh-btn" id="refresh-cluster-btn"> <path d="M1 4v6h6M23 20v-6h-6" />
<svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
<path d="M1 4v6h6M23 20v-6h-6"/> </svg>
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/> </button>
</svg> </div>
Refresh </div>
</button> <button class="refresh-btn" id="refresh-cluster-btn">
</div> <svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor"
stroke-width="2">
<path d="M1 4v6h6M23 20v-6h-6" />
<path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15" />
</svg>
Refresh
</button>
</div>
<div id="cluster-members-container"> <div id="cluster-members-container">
<div class="loading"> <div class="loading">
<div>Loading cluster members...</div> <div>Loading cluster members...</div>
</div> </div>
<!-- Test content to verify scrolling -->
<div style="height: 2000px; background: linear-gradient(to bottom, rgba(255,0,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1)); padding: 20px; margin: 20px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);">
<h3 style="color: white; margin-bottom: 20px;">Test Scrolling Content</h3>
<p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">This is test content to verify that scrolling works properly when elements are outside the visible screen height.</p>
<p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">You should be able to scroll down to see this content and scroll back up to the top.</p>
<p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">If scrolling is not working, there may be CSS issues preventing it.</p>
<div style="text-align: center; margin-top: 50px;">
<span style="color: #4ade80; font-size: 1.2rem;">✓ Scrolling is working if you can see this!</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
<div id="topology-view" class="view-content"> <div id="topology-view" class="view-content">
<div id="topology-graph-container"> <div id="topology-graph-container">
<div class="loading"> <div class="loading">
@@ -74,10 +68,10 @@
</div> </div>
</div> </div>
</div> </div>
<div id="firmware-view" class="view-content"> <div id="firmware-view" class="view-content">
<div class="firmware-section"> <div class="firmware-section">
<!--div class="firmware-header"> <!--div class="firmware-header">
<div class="firmware-header-left"></div> <div class="firmware-header-left"></div>
<button class="refresh-btn" onclick="refreshFirmwareView()"> <button class="refresh-btn" onclick="refreshFirmwareView()">
<svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> <svg class="refresh-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
@@ -87,7 +81,7 @@
Refresh Refresh
</button> </button>
</div--> </div-->
<div id="firmware-container"> <div id="firmware-container">
<div class="firmware-overview"> <div class="firmware-overview">
<div class="firmware-actions"> <div class="firmware-actions">
@@ -114,42 +108,34 @@
<input type="radio" name="target-type" value="labels"> <input type="radio" name="target-type" value="labels">
<span class="radio-custom"></span> <span class="radio-custom"></span>
<span class="target-label">By Label</span> <span class="target-label">By Label</span>
<select id="label-select" class="label-select" style="min-width: 220px; display: inline-block; vertical-align: middle;"> <select id="label-select" class="label-select"
style="min-width: 220px; display: inline-block; vertical-align: middle;">
<option value="">Select a label...</option> <option value="">Select a label...</option>
</select> </select>
<div id="selected-labels-container" class="selected-labels"></div> <div id="selected-labels-container" class="selected-labels"></div>
</label> </label>
</div> </div>
<div class="file-input-wrapper"> <div class="file-input-wrapper">
<input type="file" id="global-firmware-file" accept=".bin,.hex" style="display: none;"> <input type="file" id="global-firmware-file" accept=".bin,.hex"
<button class="upload-btn-compact" onclick="document.getElementById('global-firmware-file').click()"> style="display: none;">
<button class="upload-btn-compact"
onclick="document.getElementById('global-firmware-file').click()">
📁 Choose File 📁 Choose File
</button> </button>
<span class="file-info" id="file-info">No file selected</span> <span class="file-info" id="file-info">No file selected</span>
</div> </div>
</div> </div>
<button class="deploy-btn" id="deploy-btn" disabled>🚀 Deploy</button> <button class="deploy-btn" id="deploy-btn" disabled>🚀 Deploy</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="firmware-nodes-list" id="firmware-nodes-list"> <div class="firmware-nodes-list" id="firmware-nodes-list">
<!-- Nodes will be populated here --> <!-- Nodes will be populated here -->
<!-- Test content to verify scrolling -->
<div style="height: 1500px; background: linear-gradient(to bottom, rgba(255,0,0,0.1), rgba(0,255,0,0.1), rgba(0,0,255,0.1)); padding: 20px; margin: 20px 0; border-radius: 10px; border: 1px solid rgba(255,255,255,0.2);">
<h3 style="color: white; margin-bottom: 20px;">Firmware View Test Scrolling</h3>
<p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">This is test content in the firmware view to verify that scrolling works properly.</p>
<p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">You should be able to scroll down to see this content and scroll back up to the top.</p>
<p style="color: rgba(255,255,255,0.8); margin-bottom: 15px;">If scrolling is not working, there may be CSS issues preventing it.</p>
<div style="text-align: center; margin-top: 50px;">
<span style="color: #4ade80; font-size: 1.2rem;">✓ Firmware scrolling is working if you can see this!</span>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@@ -163,4 +149,5 @@
<script src="./scripts/components.js"></script> <script src="./scripts/components.js"></script>
<script src="./scripts/app.js"></script> <script src="./scripts/app.js"></script>
</body> </body>
</html>
</html>