120 lines
6.5 KiB
HTML
120 lines
6.5 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</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 id="cluster-view" class="view-content active">
|
|
<div class="cluster-section">
|
|
<div class="cluster-header">
|
|
<div class="cluster-header-left">
|
|
<div class="primary-node-info">
|
|
<span class="primary-node-label">Primary Node:</span>
|
|
<span class="primary-node-ip" id="primary-node-ip">Discovering...</span>
|
|
<button class="primary-node-refresh" id="select-random-primary-btn" title="🎲 Select random primary node">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14">
|
|
<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>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button class="refresh-btn" id="refresh-cluster-btn">
|
|
<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-actions">
|
|
<div class="action-group">
|
|
<h3>🚀 Firmware Update</h3>
|
|
<div class="firmware-upload-compact">
|
|
<div class="compact-upload-row">
|
|
<div class="file-upload-area">
|
|
<div class="target-options">
|
|
<label class="target-option">
|
|
<input type="radio" name="target-type" value="all" checked>
|
|
<span class="radio-custom"></span>
|
|
<span class="target-label">All Nodes</span>
|
|
</label>
|
|
<label class="target-option specific-node-option">
|
|
<input type="radio" name="target-type" value="specific">
|
|
<span class="radio-custom"></span>
|
|
<span class="target-label">Specific Node</span>
|
|
<select id="specific-node-select" class="node-select">
|
|
<option value="">Select a node...</option>
|
|
</select>
|
|
</label>
|
|
</div>
|
|
|
|
<div class="file-input-wrapper">
|
|
<input type="file" id="global-firmware-file" accept=".bin,.hex" style="display: none;">
|
|
<button class="upload-btn-compact" onclick="document.getElementById('global-firmware-file').click()">
|
|
📁 Choose File
|
|
</button>
|
|
<span class="file-info" id="file-info">No file selected</span>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="deploy-btn" id="deploy-btn" disabled>🚀 Deploy</button>
|
|
</div>
|
|
</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="framework.js"></script>
|
|
<script src="api-client.js"></script>
|
|
<script src="view-models.js"></script>
|
|
<script src="components.js"></script>
|
|
<script src="app.js"></script>
|
|
</body>
|
|
</html> |