diff --git a/index.html b/index.html index 84c0998..8f9e423 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,56 @@ - GANDALF (Global Advanced Network Detection And Link Facilitator) + GANDALF - Network Monitor +
-

GANDALF (Global Advanced Network Detection And Link Facilitator)

-

This is my version of a Network State Manager

+
+

GANDALF Network Monitor

+

Ubiquiti Network Management Dashboard

+
+
-
-
-
+
+

Network Overview

+
+
+ + UniFi Dream Machine Pro +
+
+ + UniFi Switch 24 PoE +
+
+
+ +
+

Network Performance

+
+
+
+ +
+

Access Points

+
+
+ + AP Living Room +
+
+ + AP Office +
+
+
+ +
+

Connected Clients

+
+
diff --git a/style.css b/style.css index 15ff071..1bc8698 100644 --- a/style.css +++ b/style.css @@ -1,19 +1,70 @@ +:root { + --primary-color: #006FFF; + --secondary-color: #00439C; + --background-color: #f8f9fa; + --card-background: #ffffff; + --text-color: #2c3e50; + --border-radius: 12px; +} + +body { + font-family: 'Inter', -apple-system, sans-serif; + background-color: var(--background-color); + color: var(--text-color); + margin: 0; + padding: 0; +} + .container { - max-width: 1200px; + max-width: 1400px; margin: 0 auto; padding: 20px; } +.header { + background: linear-gradient(to right, var(--primary-color), var(--secondary-color)); + color: white; + padding: 20px; + border-radius: var(--border-radius); + margin-bottom: 30px; +} + .metrics-container { display: grid; - grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); - gap: 20px; + grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); + gap: 25px; margin-top: 20px; } .metric-card { - background: #f5f5f6; - padding: 20px; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0,0,0,0.1); + background: var(--card-background); + padding: 25px; + border-radius: var(--border-radius); + box-shadow: 0 4px 6px rgba(0,0,0,0.07); + transition: transform 0.2s ease; } + +.metric-card:hover { + transform: translateY(-5px); +} + +.device-status { + display: flex; + align-items: center; + gap: 10px; + margin: 10px 0; +} + +.status-indicator { + width: 12px; + height: 12px; + border-radius: 50%; +} + +.status-up { + background-color: #10B981; +} + +.status-down { + background-color: #EF4444; +} \ No newline at end of file