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

feat: harmonize styling

Browse Source
This commit is contained in:
0x1d
2025-08-26 13:40:54 +02:00
parent b23025a6f8
commit 27b07d2aba
3 changed files with 50 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/index.html
View File

@@ -65,21 +65,6 @@
<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>🚀 Firmware Update</h3>

11
public/script.js
View File

@@ -1256,17 +1256,6 @@ function populateNodeSelect() {
// Refresh firmware view
function refreshFirmwareView() {
updateFirmwareStats();
populateNodeSelect();
addRefreshButtonToProgress(); // Add refresh button after populating nodes
}
// Update firmware statistics
function updateFirmwareStats() {
const container = document.getElementById('cluster-members-container');
const memberCards = container.querySelectorAll('.member-card');
document.getElementById('total-nodes').textContent = memberCards.length;
document.getElementById('available-updates').textContent = '0'; // TODO: Implement update checking
document.getElementById('last-update').textContent = 'Never'; // TODO: Implement last update tracking
}

162
public/styles.css
View File

@@ -27,11 +27,11 @@ p {
.cluster-section {
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
border-radius: 16px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem;
padding: 0.75rem;
margin-bottom: 1rem;
}
@@ -51,10 +51,10 @@ p {
.primary-node-info {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
gap: 0.4rem;
padding: 0.4rem 0.75rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
@@ -134,8 +134,8 @@ p {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
margin-bottom: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
@@ -186,14 +186,14 @@ p {
.members-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1rem;
gap: 0.75rem;
}
.member-card {
background: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 1.5rem;
border-radius: 10px;
padding: 1rem;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
@@ -255,7 +255,7 @@ p {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
margin-bottom: 0.75rem;
}
.member-info {
@@ -267,8 +267,8 @@ p {
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
margin-left: auto;
padding: 0.25rem;
border-radius: 8px;
padding: 0.2rem;
border-radius: 6px;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
@@ -277,8 +277,8 @@ p {
}
.expand-icon svg {
width: 20px;
height: 20px;
width: 18px;
height: 18px;
stroke: currentColor;
stroke-width: 2;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
@@ -714,11 +714,11 @@ p {
/* Firmware Section Styles */
.firmware-section {
background: rgba(0, 0, 0, 0.25);
border-radius: 24px;
border-radius: 16px;
backdrop-filter: blur(15px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 1rem;
padding: 0.75rem;
margin-bottom: 1rem;
position: relative;
overflow: hidden;
@@ -736,88 +736,26 @@ p {
/* Firmware header styles moved to general header section above */
/* Firmware Stats */
.firmware-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin-bottom: 3rem;
}
.stat-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 16px;
padding: 2rem 1.5rem;
text-align: center;
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg, #667eea, #764ba2);
opacity: 0.7;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
border-color: rgba(255, 255, 255, 0.15);
}
.stat-title {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.6);
margin-bottom: 0.75rem;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.stat-value {
font-size: 2.5rem;
font-weight: 800;
color: #ffffff;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Firmware Actions */
.firmware-actions {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
margin-bottom: 2.5rem;
gap: 1rem;
margin-bottom: 1.5rem;
}
.action-group {
background: rgba(0, 0, 0, 0.2);
border-radius: 16px;
padding: 1.5rem;
border-radius: 12px;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.06);
position: relative;
overflow: hidden;
}
.action-group::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}
.action-group h3 {
color: #ffffff;
margin-bottom: 1.25rem;
margin-bottom: 1rem;
font-size: 1.1rem;
font-weight: 600;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -827,12 +765,12 @@ p {
.firmware-upload-compact {
display: flex;
flex-direction: column;
gap: 1.25rem;
gap: 1rem;
}
.upload-target-row {
display: flex;
gap: 1.5rem;
gap: 1rem;
align-items: stretch;
position: relative;
}
@@ -854,12 +792,12 @@ p {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1.25rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
border-radius: 8px;
transition: all 0.3s ease;
min-height: 100px;
min-height: 80px;
}
.upload-section:hover {
@@ -872,12 +810,12 @@ p {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1.25rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
border-radius: 8px;
transition: all 0.3s ease;
min-height: 100px;
min-height: 80px;
justify-content: center;
}
@@ -897,8 +835,8 @@ p {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
color: #ffffff;
padding: 0.6rem 1.25rem;
border-radius: 8px;
padding: 0.5rem 1rem;
border-radius: 6px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
@@ -917,9 +855,9 @@ p {
font-size: 0.85rem;
font-style: italic;
transition: all 0.3s ease;
padding: 0.4rem 0.6rem;
padding: 0.3rem 0.5rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
border-radius: 4px;
border: 1px solid transparent;
}
@@ -933,16 +871,16 @@ p {
.target-options {
display: flex;
gap: 1.25rem;
gap: 1rem;
}
.target-option {
display: flex;
align-items: center;
gap: 0.4rem;
gap: 0.3rem;
cursor: pointer;
padding: 0.4rem;
border-radius: 6px;
padding: 0.3rem;
border-radius: 4px;
transition: all 0.2s ease;
}
@@ -955,8 +893,8 @@ p {
}
.radio-custom {
width: 16px;
height: 16px;
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
position: relative;
@@ -976,8 +914,8 @@ p {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 6px;
height: 6px;
width: 5px;
height: 5px;
background: white;
border-radius: 50%;
animation: radioPop 0.2s ease-out;
@@ -1004,12 +942,12 @@ p {
background: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.7) 100%);
border: 1px solid rgba(255, 255, 255, 0.3);
color: #ffffff;
padding: 0.6rem 0.9rem;
border-radius: 8px;
padding: 0.5rem 0.75rem;
border-radius: 6px;
font-size: 0.9rem;
transition: all 0.2s ease;
cursor: pointer;
min-width: 180px;
min-width: 160px;
font-weight: 500;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}
@@ -1059,14 +997,14 @@ p {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: #ffffff;
padding: 0.875rem 1.75rem;
border-radius: 10px;
padding: 0.75rem 1.5rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.95rem;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
align-self: center;
min-width: 180px;
min-width: 160px;
position: relative;
overflow: hidden;
}