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

feat: UI improvements

Browse Source
This commit is contained in:
0x1d
2025-08-25 10:18:55 +02:00
parent 381dde1b97
commit 91c0be5d0c
2 changed files with 120 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
public/index.html
View File

@@ -8,22 +8,26 @@
</head>
<body>
<div class="container">
<div class="header">
<h1>SPORE UI</h1>
<div class="status">🚀 Cluster Online</div>
</div>
<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-title">🌐 Cluster Members</div>
<div class="cluster-header-left"></div>
<button class="refresh-btn" onclick="refreshClusterMembers()">
🔄 Refresh
<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>
@@ -38,9 +42,13 @@
<div id="firmware-view" class="view-content">
<div class="firmware-section">
<div class="firmware-header">
<div class="firmware-title">📦 Firmware Management</div>
<div class="firmware-header-left"></div>
<button class="refresh-btn" onclick="refreshFirmwareView()">
🔄 Refresh
<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>

144
public/styles.css
View File

@@ -17,21 +17,7 @@ body {
margin: 0 auto;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding: 1.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
h1 {
font-size: 2.5rem;
margin: 0;
font-weight: 700;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Header styles removed - integrated into navigation */
p {
font-size: 1.2rem;
@@ -39,17 +25,6 @@ p {
margin-bottom: 2rem;
}
.status {
background: rgba(0, 0, 0, 0.4);
padding: 0.75rem 1.5rem;
border-radius: 25px;
font-weight: 500;
display: inline-block;
margin: 0;
font-size: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.cluster-section {
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
@@ -64,35 +39,68 @@ p {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cluster-title {
font-size: 1.5rem;
font-weight: 600;
.cluster-header-left {
/* Placeholder for future content if needed */
}
.firmware-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.firmware-header-left {
/* Placeholder for future content if needed */
}
.refresh-btn {
background: rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ecf0f1;
padding: 0.5rem 1rem;
border-radius: 8px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
border: 1px solid rgba(255, 255, 255, 0.15);
color: rgba(255, 255, 255, 0.9);
padding: 0.75rem 1.25rem;
border-radius: 12px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.3s ease;
font-weight: 500;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
align-items: center;
gap: 0.5rem;
backdrop-filter: blur(10px);
margin: 0;
}
.refresh-btn:hover {
background: rgba(0, 0, 0, 0.6);
border-color: rgba(255, 255, 255, 0.3);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
border-color: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.refresh-btn:active {
transform: translateY(0);
}
.refresh-icon {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2;
transition: transform 0.3s ease;
}
.refresh-btn:hover .refresh-icon {
transform: rotate(180deg);
}
.members-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
@@ -502,15 +510,26 @@ p {
/* Main Navigation Styles */
.main-navigation {
display: flex;
gap: 0.25rem;
margin-bottom: 2.5rem;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
background: rgba(0, 0, 0, 0.2);
border-radius: 16px;
padding: 0.5rem;
padding: 1rem 1.5rem;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.nav-left {
display: flex;
gap: 0.25rem;
}
.nav-right {
display: flex;
align-items: center;
}
.nav-tab {
background: transparent;
border: none;
@@ -557,6 +576,19 @@ p {
opacity: 0;
}
/* Cluster Status */
.cluster-status {
background: linear-gradient(135deg, rgba(0, 255, 0, 0.15) 0%, rgba(0, 255, 0, 0.08) 100%);
border: 1px solid rgba(0, 255, 0, 0.25);
color: #00ff88;
padding: 0.75rem 1.25rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
box-shadow: 0 2px 8px rgba(0, 255, 0, 0.1);
}
/* View Content Styles */
.view-content {
display: none;
@@ -573,7 +605,7 @@ p {
backdrop-filter: blur(15px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 2.5rem;
padding: 2rem;
margin-bottom: 2rem;
position: relative;
overflow: hidden;
@@ -589,21 +621,7 @@ p {
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}
.firmware-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.firmware-title {
font-size: 1.75rem;
font-weight: 700;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Firmware header styles moved to general header section above */
/* Firmware Stats */
.firmware-stats {
@@ -821,9 +839,14 @@ p {
/* Mobile navigation */
.main-navigation {
flex-direction: column;
gap: 1rem;
padding: 1rem;
}
.nav-left {
flex-direction: column;
gap: 0.25rem;
padding: 0.75rem;
}
.nav-tab {
@@ -833,6 +856,11 @@ p {
text-align: center;
}
.cluster-status {
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
/* Mobile firmware stats */
.firmware-stats {
grid-template-columns: 1fr;