Update file structure for Flask

2025-02-07 21:22:43 -05:00
parent 66290e9b51
commit d791312579
3 changed files with 3 additions and 1 deletions
--- a/static/style.css
+++ b/static/style.css
@ -0,0 +1,151 @@
+: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: 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(350px, 1fr));
+    gap: 25px;
+    margin-top: 20px;
+}
+
+.metric-card {
+    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;
+}
+
+.diagnostics-panel {
+    margin-top: 15px;
+}
+
+.diagnostic-item {
+    padding: 10px;
+    border-left: 4px solid var(--primary-color);
+    margin: 10px 0;
+    background: rgba(0,111,255,0.1);
+}
+
+.fiber-diagnostic {
+    border-color: #10B981;
+}
+
+.copper-diagnostic {
+    border-color: #F59E0B;
+}
+
+.device-info {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.device-details {
+    font-size: 0.8em;
+    color: #666;
+}
+
+.diagnostic-details {
+    display: grid;
+    gap: 15px;
+    padding: 10px;
+}
+
+.status-group, .firmware-group, .interfaces-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+}
+
+.interface-item {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.label {
+    font-weight: 500;
+    color: #666;
+}
+
+.value {
+    font-family: monospace;
+}
+
+.state {
+    padding: 2px 8px;
+    border-radius: 12px;
+    font-size: 0.8em;
+}
+
+.state.up {
+    background-color: #10B981;
+    color: white;
+}
+
+.state.down {
+    background-color: #EF4444;
+    color: white;
+}
+
+.online {
+    color: #10B981;
+}
+
+.offline {
+    color: #EF4444;
+}