111 lines
5.4 KiB
HTML
111 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SPORE UI</title>
|
|
<link rel="stylesheet" href="styles.css">
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<div class="main-navigation">
|
|
<div class="nav-left">
|
|
<button class="nav-tab active" data-view="cluster">🌐 Cluster Members</button>
|
|
<button class="nav-tab" data-view="firmware">📦 Firmware Management</button>
|
|
</div>
|
|
<div class="nav-right">
|
|
<div class="cluster-status">🚀 Cluster Online</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="cluster-view" class="view-content active">
|
|
<div class="cluster-section">
|
|
<div class="cluster-header">
|
|
<div class="cluster-header-left"></div>
|
|
<button class="refresh-btn" onclick="refreshClusterMembers()">
|
|
<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 class="loading">
|
|
<div>Loading cluster members...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="firmware-view" class="view-content">
|
|
<div class="firmware-section">
|
|
<div class="firmware-header">
|
|
<div class="firmware-header-left"></div>
|
|
<button class="refresh-btn" onclick="refreshFirmwareView()">
|
|
<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="firmware-container">
|
|
<div class="firmware-overview">
|
|
<div class="firmware-stats">
|
|
<div class="stat-card">
|
|
<div class="stat-title">Total Nodes</div>
|
|
<div class="stat-value" id="total-nodes">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-title">Available Updates</div>
|
|
<div class="stat-value" id="available-updates">-</div>
|
|
</div>
|
|
<div class="stat-card">
|
|
<div class="stat-title">Last Update</div>
|
|
<div class="stat-value" id="last-update">-</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="firmware-actions">
|
|
<div class="action-group">
|
|
<h3>📁 Upload New Firmware</h3>
|
|
<div class="upload-area-large">
|
|
<input type="file" id="global-firmware-file" accept=".bin,.hex" style="display: none;">
|
|
<button class="upload-btn-large" onclick="document.getElementById('global-firmware-file').click()">
|
|
📁 Choose Firmware File
|
|
</button>
|
|
<div class="upload-info-large">Select a .bin or .hex file to upload to all nodes</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-group">
|
|
<h3>🎯 Target Selection</h3>
|
|
<div class="target-selection">
|
|
<label>
|
|
<input type="radio" name="target-type" value="all" checked> All Nodes
|
|
</label>
|
|
<label>
|
|
<input type="radio" name="target-type" value="specific"> Specific Node
|
|
</label>
|
|
<select id="specific-node-select" style="display: none;">
|
|
<option value="">Select a node...</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="firmware-nodes-list" id="firmware-nodes-list">
|
|
<!-- Nodes will be populated here -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |