diff --git a/public/index.html b/public/index.html index 0a3f9ea..b480a74 100644 --- a/public/index.html +++ b/public/index.html @@ -7,25 +7,29 @@ -
-
-

SPORE UI

-
🚀 Cluster Online
-
- -
- - -
- -
-
-
-
🌐 Cluster Members
- +
+
+
+ +
+
+
🚀 Cluster Online
+
+
+ +
+
+
+
+ +
@@ -35,14 +39,18 @@
-
-
-
-
📦 Firmware Management
- -
+
+
+
+
+ +
diff --git a/public/styles.css b/public/styles.css index adac78f..fc71a47 100644 --- a/public/styles.css +++ b/public/styles.css @@ -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;