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

144
public/styles.css
View File

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