🚀 Firmware Update
diff --git a/public/script.js b/public/script.js
index f30ebb4..13cda91 100644
--- a/public/script.js
+++ b/public/script.js
@@ -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
}
\ No newline at end of file
diff --git a/public/styles.css b/public/styles.css
index 903ba35..4c5a2e6 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -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;
}