:root{ --bg:#030811; --panel:#07111d; --panel2:#091827; --line:#173247; --text:#d9f4ff; --muted:#66879a; --cyan:#36d9ff; --cyan2:#138dbb; --green:#55f3b0; --amber:#ffc45c; --red:#ff5168; --violet:#a68cff; } *{box-sizing:border-box} html,body{margin:0;min-height:100%;background: radial-gradient(circle at 50% -20%,#0b2841 0,#040a13 35%,#02060b 75%); color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif} body{min-height:100vh;overflow-x:hidden} body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.22; background-image:linear-gradient(rgba(54,217,255,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(54,217,255,.035) 1px,transparent 1px); background-size:38px 38px} .scanlines{position:fixed;inset:0;z-index:99;pointer-events:none;opacity:.07; background:repeating-linear-gradient(0deg,transparent 0,transparent 3px,#9defff 4px)} .topbar{height:92px;padding:18px 26px;display:flex;align-items:center;justify-content:space-between; border-bottom:1px solid var(--line);background:rgba(3,9,16,.78);backdrop-filter:blur(8px)} .eyebrow{font:700 10px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.28em;color:#5f9ab5} h1{margin:5px 0 0;font-size:28px;letter-spacing:.06em;font-weight:760} h1 span{color:var(--cyan)} .top-status{display:flex;align-items:center;gap:20px} .status-pill{padding:9px 12px;border:1px solid #1c5f64;background:#062122;color:#7effd0; font:700 11px ui-monospace,monospace;letter-spacing:.08em} .status-pill i,.tiny-led{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green); box-shadow:0 0 12px var(--green);margin-right:7px;animation:pulse 1.2s infinite} .clock{font:700 18px ui-monospace,monospace;color:#dffaff;min-width:88px;text-align:right} .dashboard{padding:16px;display:grid;grid-template-columns:270px minmax(520px,1.45fr) minmax(360px,.95fr); gap:12px;max-width:1900px;margin:auto} .panel{border:1px solid #132f43;background:linear-gradient(180deg,rgba(8,22,35,.92),rgba(4,12,21,.94)); box-shadow:inset 0 1px 0 rgba(137,229,255,.04),0 14px 35px rgba(0,0,0,.22);position:relative;overflow:hidden} .panel:before{content:"";position:absolute;left:0;top:0;width:38px;height:2px;background:var(--cyan);box-shadow:0 0 12px var(--cyan)} .panel-head{height:38px;padding:0 11px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #102a3d; font:700 10px ui-monospace,monospace;letter-spacing:.12em;color:#85b8cb} .panel-head b{color:#7ce7ff;font-weight:700} .projects{grid-row:span 2} .project-list{padding:7px} .project{padding:11px 9px;border-bottom:1px solid #102535;display:grid;grid-template-columns:1fr auto;gap:4px 8px} .project:last-child{border-bottom:0} .project strong{font-size:12px;letter-spacing:.02em} .project small{grid-column:1/3;color:#6f93a7;font:10px ui-monospace,monospace} .project .state{font:700 9px ui-monospace,monospace;color:var(--green);align-self:center} .rack-panel{min-height:460px} .rack-image-wrap{position:relative;height:calc(100% - 38px);min-height:420px;background:#02070c;overflow:hidden} .rack-image-wrap img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.85) contrast(1.04) brightness(.72)} .rack-image-wrap:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px #000} .rack-led-layer{position:absolute;inset:0;z-index:3;pointer-events:none} .rack-led{position:absolute;width:4px;height:4px;border-radius:50%;background:#4ae5ff;box-shadow:0 0 7px #36d9ff,0 0 14px #36d9ff; opacity:.12;transition:opacity .12s} .rack-led.hot{background:#7dffd2;box-shadow:0 0 7px #55f3b0,0 0 15px #55f3b0} .rack-led.warn{background:#ff7b67;box-shadow:0 0 7px #ff5168,0 0 15px #ff5168} .rack-scan{position:absolute;z-index:2;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#35d9ff,transparent); box-shadow:0 0 16px #35d9ff;opacity:.42;animation:scan 6s linear infinite} .rack-caption{position:absolute;z-index:4;left:12px;right:12px;bottom:9px;display:flex;justify-content:space-between; font:700 9px ui-monospace,monospace;color:#7bcde9;text-shadow:0 2px 6px #000} .map-panel{min-height:460px} #europeMap{width:100%;height:390px;display:block} .europe-shape{fill:#071a28;stroke:#153c54;stroke-width:1.4} .route{stroke:#1b6687;stroke-width:1.25;fill:none;opacity:.58} .route.attack{stroke:#c63b50} .node-halo{fill:url(#nodeGlow);opacity:.28} .node-core{fill:#dffcff;filter:url(#glow)} .node-label{font:700 10px ui-monospace,monospace;fill:#7eaec2;letter-spacing:.05em} .node-dc{fill:#59f2c2} .packet{filter:url(#glow)} .map-legend{position:absolute;bottom:10px;left:12px;right:12px;display:flex;gap:15px; font:9px ui-monospace,monospace;color:#668a9f} .dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:5px}.normal{background:var(--cyan)}.blocked{background:var(--red)}.ai{background:var(--violet)} .metrics-panel{grid-column:2/4;display:grid;grid-template-columns:repeat(6,1fr)} .metric{padding:13px 14px;border-right:1px solid #102b3d;min-height:82px} .metric:last-child{border-right:0} .metric span{display:block;font:700 9px ui-monospace,monospace;color:#668da1;letter-spacing:.1em} .metric strong{display:inline-block;margin-top:7px;font:800 24px ui-monospace,monospace;color:#e3faff} .metric em{font:9px ui-monospace,monospace;color:#5c8497;margin-left:5px;font-style:normal} .chart-panel{grid-column:1/3;height:210px} #trafficChart{width:100%;height:170px;display:block} .queue-panel{height:210px} .queue-row{display:grid;grid-template-columns:54px 1fr 1.2fr 38px;align-items:center;gap:8px;padding:12px;border-bottom:1px solid #102536; font:9px ui-monospace,monospace} .queue-row span{color:#5db4d0}.queue-row strong{font-weight:600;color:#9dc4d3}.queue-row em{font-style:normal;color:#7adff8} .queue-row i{height:5px;background:#0c2332;display:block;overflow:hidden}.queue-row u{height:100%;display:block;background:#38d9ff;box-shadow:0 0 8px #38d9ff;text-decoration:none} .log-panel{grid-column:1/4;min-height:280px} .event-log{padding:7px 10px 12px;height:235px;overflow:hidden;font:11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace} .event-row{display:grid;grid-template-columns:70px 110px 1fr;gap:8px;padding:2px 0;border-bottom:1px solid rgba(19,51,70,.45)} .event-row .ts{color:#426d82}.event-row .sys{color:#4bd9ff;font-weight:700}.event-row.warn .msg{color:#ff8d9c}.event-row.ai .sys{color:#ba9fff}.event-row.ai .msg{color:#cebfff} footer{max-width:1900px;margin:0 auto 20px;padding:0 17px;display:flex;justify-content:space-between;color:#456a7d; font:9px ui-monospace,monospace;letter-spacing:.08em} .maintenance-page{display:grid;place-items:center;min-height:100vh} .maintenance{width:min(720px,90vw);text-align:center;padding:52px 40px;border:1px solid #16354b;background:rgba(4,13,22,.88); box-shadow:0 30px 90px rgba(0,0,0,.45);position:relative} .maintenance-mark{font:800 12px ui-monospace,monospace;letter-spacing:.35em;color:#7cdcf8;margin-bottom:28px} .maintenance-ring{width:120px;height:120px;margin:0 auto 32px;position:relative} .maintenance-ring span{position:absolute;inset:0;border:1px solid #1a7593;border-radius:50%;animation:ring 2.4s ease-out infinite} .maintenance-ring span:nth-child(2){animation-delay:.8s}.maintenance-ring span:nth-child(3){animation-delay:1.6s} .maintenance h1{font-size:34px}.maintenance p{max-width:570px;margin:18px auto 30px;color:#7395a8;line-height:1.6} .maintenance-status{display:inline-flex;align-items:center;text-align:left;gap:12px;padding:11px 15px;border:1px solid #264354;background:#07131e} .maintenance-status i{width:9px;height:9px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber);animation:pulse .8s infinite} .maintenance-status strong,.maintenance-status span{display:block;font:700 9px ui-monospace,monospace;letter-spacing:.1em} .maintenance-status span{margin-top:3px;color:#b38d4e}.maintenance-code{margin-top:28px;color:#446b80;font:12px ui-monospace,monospace} @keyframes pulse{50%{opacity:.25}} @keyframes scan{0%{top:0}100%{top:100%}} @keyframes ring{0%{transform:scale(.35);opacity:1}100%{transform:scale(1.1);opacity:0}} @media(max-width:1200px){ .dashboard{grid-template-columns:240px 1fr}.map-panel{grid-column:1/3}.metrics-panel{grid-column:1/3}.queue-panel{grid-column:1/3} .log-panel{grid-column:1/3}.chart-panel{grid-column:1/3} } @media(max-width:760px){ .topbar{height:auto;padding:14px;align-items:flex-start}.topbar h1{font-size:19px}.top-status{display:block;text-align:right}.status-pill{font-size:8px}.clock{margin-top:8px} .dashboard{display:block;padding:8px}.panel{margin-bottom:8px}.projects{min-height:auto}.rack-panel,.map-panel{min-height:390px} .rack-image-wrap{min-height:350px}.metrics-panel{display:grid;grid-template-columns:repeat(2,1fr)}.metric{border-bottom:1px solid #102b3d} .queue-row{grid-template-columns:45px 1fr 80px 34px}.event-row{grid-template-columns:58px 82px 1fr;font-size:9px} footer{padding:0 10px;gap:8px;flex-wrap:wrap} } .host-panel{grid-column:1/4} .host-grid{display:grid;grid-template-columns:repeat(6,1fr)} .host-grid>div{padding:12px 14px;border-right:1px solid #102b3d} .host-grid>div:last-child{border-right:0} .host-grid span{display:block;font:700 9px ui-monospace,monospace;color:#668da1;letter-spacing:.1em} .host-grid strong{display:inline-block;margin-top:5px;font:800 18px ui-monospace,monospace;color:#e3faff} .host-grid em{display:block;margin-top:3px;font:9px ui-monospace,monospace;color:#5c8497;font-style:normal} @media(max-width:760px){.host-grid{grid-template-columns:repeat(2,1fr)}.host-grid>div{border-bottom:1px solid #102b3d}} .infra-panel{grid-column:1/4} .infra-summary{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid #102a3d} .infra-summary>div{padding:9px 12px;border-right:1px solid #102a3d} .infra-summary>div:last-child{border-right:0} .infra-summary span{display:block;font:700 8px ui-monospace,monospace;color:#567e93;letter-spacing:.1em} .infra-summary strong{display:block;margin-top:3px;font:800 16px ui-monospace,monospace;color:#dffaff} .infra-layout{display:grid;grid-template-columns:1.05fr 1.7fr 2.25fr;gap:10px;padding:10px} .infra-subhead{font:700 9px ui-monospace,monospace;color:#5f9bb5;letter-spacing:.12em;margin:2px 0 7px} .real-infra{display:grid;grid-template-columns:1fr;gap:4px} .real-node{display:grid;grid-template-columns:10px 108px 1fr;gap:7px;align-items:center;padding:6px 7px;border:1px solid #123148;background:#071522} .real-node i,.node-card i{width:6px;height:6px;border-radius:50%;background:#55f3b0;box-shadow:0 0 8px #55f3b0;display:block} .real-node strong{font:700 9px ui-monospace,monospace;color:#cdefff} .real-node span{font:8px ui-monospace,monospace;color:#6f93a7} .node-grid{display:grid;gap:4px} .gpu-grid{grid-template-columns:repeat(3,1fr)} .server-grid{grid-template-columns:repeat(4,1fr)} .node-card{position:relative;min-height:39px;padding:5px 6px;border:1px solid #123047;background:#06131f;overflow:hidden} .node-card:after{content:"";position:absolute;left:0;bottom:0;height:2px;width:var(--load,30%);background:#2ecff3;box-shadow:0 0 7px #2ecff3} .node-card.gpu:after{background:#a68cff;box-shadow:0 0 8px #a68cff} .node-card.storage:after{background:#55f3b0;box-shadow:0 0 8px #55f3b0} .node-card.backup:after{background:#ffc45c;box-shadow:0 0 8px #ffc45c} .node-card strong{display:block;font:700 8px ui-monospace,monospace;color:#c5e8f5;white-space:nowrap} .node-card span{display:block;margin-top:2px;font:7px ui-monospace,monospace;color:#567b8e;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .node-card em{position:absolute;right:5px;top:5px;font:7px ui-monospace,monospace;color:#729cb0;font-style:normal} @media(max-width:1200px){ .infra-layout{grid-template-columns:1fr 1.4fr}.infra-layout>div:last-child{grid-column:1/3} } @media(max-width:760px){ .infra-summary{grid-template-columns:repeat(3,1fr)} .infra-layout{display:block}.infra-layout>div{margin-bottom:12px} .infra-layout>div:last-child{grid-column:auto} .gpu-grid{grid-template-columns:repeat(3,1fr)} .server-grid{grid-template-columns:repeat(3,1fr)} } /* ELKTECH-CLEAN-LAYOUT-V4 */ /* Datacenter-Foto / Primary Compute Floor komplett ausblenden */ .rack-panel { display: none !important; } /* Europakarte übernimmt den kompletten rechten Bereich */ .map-panel { grid-column: 2 / 4 !important; } /* Reale Host-Telemetrie ausblenden */ .host-panel { display: none !important; } /* Infrastructure-Kopf + Summenleiste entfernen */ .infra-panel > .panel-head { display: none !important; } .infra-panel > .infra-summary { display: none !important; } /* REAL CORE komplett entfernen */ .infra-layout > div:first-child { display: none !important; } /* Zwischenüberschriften entfernen */ .infra-layout .infra-subhead { display: none !important; } /* Nur noch Fake-GPU-Cluster + Server-Fabric */ .infra-layout { grid-template-columns: minmax(360px, 0.9fr) minmax(650px, 1.6fr) !important; gap: 10px !important; padding: 12px !important; } /* GPU-Matrix etwas kompakter */ .gpu-grid { grid-template-columns: repeat(3, 1fr) !important; } /* Normale Server kompakt nebeneinander */ .server-grid { grid-template-columns: repeat(4, 1fr) !important; } @media (max-width: 1200px) { .map-panel { grid-column: 2 / 3 !important; } .infra-layout { grid-template-columns: 1fr !important; } .infra-layout > div:last-child { grid-column: auto !important; } } @media (max-width: 760px) { .map-panel { grid-column: auto !important; } .infra-layout { display: block !important; } .gpu-grid, .server-grid { grid-template-columns: repeat(3, 1fr) !important; } } /* ============================================================ ELKTECH-COMPACT-LIVE-V5 ============================================================ */ /* * Ziel: * * ┌──────────────┬──────────────────┬───────────────────────────┐ * │ ACTIVE │ EUROPE MAP │ LIVE SERVER FABRIC │ * │ SYSTEMS │ │ AI / COMPUTE / STORAGE │ * │ ├──────────────────┤ / EDGE / BACKUP │ * │ │ METRICS 3 x 2 │ │ * │ ├──────────────────┤ │ * │ │ AI QUEUE │ │ * └──────────────┴──────────────────┴───────────────────────────┘ * * ┌────────────────────────────────┬─────────────────────────────┐ * │ NETWORK LOAD │ LIVE OPERATIONS │ * └────────────────────────────────┴─────────────────────────────┘ */ /* ------------------------------------------------------------ GLOBAL KOMPAKTER ------------------------------------------------------------ */ .topbar { height: 78px !important; padding: 12px 26px !important; } .topbar h1, .topbar > div > h1 { margin-top: 4px !important; font-size: 25px !important; } .topbar .eyebrow { font-size: 9px !important; } .dashboard { max-width: 1920px !important; display: grid !important; grid-template-columns: 300px 450px minmax(690px, 1fr) !important; grid-template-rows: 292px 108px 148px 186px !important; gap: 8px !important; padding: 10px 14px !important; margin: 0 auto !important; } /* ------------------------------------------------------------ DAS ALTE FOTO BLEIBT WEG ------------------------------------------------------------ */ .rack-panel { display: none !important; } /* ------------------------------------------------------------ ECHTE HOST-TELEMETRIE BLEIBT WEG ------------------------------------------------------------ */ .host-panel { display: none !important; } /* ------------------------------------------------------------ ACTIVE SYSTEMS ------------------------------------------------------------ */ .projects { grid-column: 1 !important; grid-row: 1 / 4 !important; min-height: 0 !important; height: auto !important; } .project-list { padding: 4px 7px !important; } .project { padding: 8px 7px !important; gap: 3px 7px !important; } .project strong { font-size: 11px !important; } .project small { font-size: 9px !important; } .project .state { font-size: 8px !important; } /* ------------------------------------------------------------ EUROPAKARTE ------------------------------------------------------------ */ .map-panel { grid-column: 2 !important; grid-row: 1 !important; height: 292px !important; min-height: 0 !important; } #europeMap { width: 100% !important; height: 237px !important; } .map-legend { bottom: 6px !important; left: 9px !important; right: 9px !important; gap: 10px !important; font-size: 7px !important; } .node-label { font-size: 8px !important; } /* ------------------------------------------------------------ METRICS UNTER DER KARTE 3 SPALTEN × 2 ZEILEN ------------------------------------------------------------ */ .metrics-panel { grid-column: 2 !important; grid-row: 2 !important; height: 108px !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, 1fr) !important; } .metric { min-height: 0 !important; padding: 6px 9px !important; border-right: 1px solid #102b3d !important; border-bottom: 1px solid #102b3d !important; overflow: hidden !important; } .metric:nth-child(3n) { border-right: 0 !important; } .metric:nth-child(n+4) { border-bottom: 0 !important; } .metric span { font-size: 7px !important; letter-spacing: .08em !important; } /* * Wert erste Zeile */ .metric strong { display: block !important; margin-top: 3px !important; font-size: 17px !important; line-height: 17px !important; } /* * Einheit zweite Zeile: * * 676 * Mbit/s * * statt: * * 676 Mbit/s */ .metric em { display: block !important; margin: 2px 0 0 0 !important; font-size: 7px !important; line-height: 8px !important; white-space: nowrap !important; } /* ------------------------------------------------------------ AI COMPUTE QUEUE ------------------------------------------------------------ */ .queue-panel { grid-column: 2 !important; grid-row: 3 !important; height: 148px !important; min-height: 0 !important; } .queue-row { min-height: 0 !important; grid-template-columns: 50px minmax(100px, 1fr) 100px 32px !important; padding: 7px 9px !important; gap: 6px !important; font-size: 7px !important; } .queue-row strong { line-height: 1.15 !important; } /* ------------------------------------------------------------ INFRASTRUCTURE FABRIC ------------------------------------------------------------ */ .infra-panel { display: block !important; grid-column: 3 !important; grid-row: 1 / 4 !important; min-height: 0 !important; height: auto !important; overflow: hidden !important; } /* * Der große INFRASTRUCTURE-FABRIC-Kopf bleibt weg. */ .infra-panel > .panel-head { display: none !important; } /* * 2 / 5 / 15 / 24 / 8 / 10 Zusammenfassung bleibt weg. */ .infra-panel > .infra-summary { display: none !important; } /* * REAL CORE bleibt weg. */ .infra-layout > div:first-child { display: none !important; } /* * Die beiden verbleibenden Bereiche: * * LIVE GPU CLUSTER * LIVE SERVER FABRIC */ .infra-layout { display: block !important; padding: 6px !important; gap: 0 !important; } /* * Vorherige Regel aus V4 zurücksetzen. */ .infra-layout .infra-subhead { display: block !important; margin: 2px 0 4px !important; color: #6faec8 !important; font: 700 7px ui-monospace, SFMono-Regular, Consolas, monospace !important; letter-spacing: .12em !important; } /* ------------------------------------------------------------ 15 GPU-MASCHINEN ------------------------------------------------------------ */ .gpu-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 3px !important; margin-bottom: 6px !important; } /* ------------------------------------------------------------ COMPUTE / STORAGE / EDGE / BACKUP ------------------------------------------------------------ */ .server-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 3px !important; } /* * Karten deutlich kompakter. */ .node-card { min-height: 28px !important; padding: 3px 5px !important; border-color: #123047 !important; } .node-card strong { font-size: 7px !important; line-height: 8px !important; } .node-card span { margin-top: 1px !important; font-size: 6px !important; line-height: 7px !important; } .node-card em { top: 3px !important; right: 4px !important; font-size: 6px !important; } .node-card:after { height: 2px !important; } /* ------------------------------------------------------------ NETWORK GRAPH ------------------------------------------------------------ */ .chart-panel { grid-column: 1 / 3 !important; grid-row: 4 !important; height: 186px !important; min-height: 0 !important; } #trafficChart { height: 147px !important; } /* ------------------------------------------------------------ LIVE OPERATIONS STREAM ------------------------------------------------------------ */ .log-panel { grid-column: 3 !important; grid-row: 4 !important; height: 186px !important; min-height: 0 !important; } .event-log { height: 145px !important; padding: 5px 9px !important; font-size: 9px !important; line-height: 1.35 !important; } .event-row { grid-template-columns: 57px 96px minmax(0, 1fr) !important; gap: 6px !important; padding: 1px 0 !important; } /* ------------------------------------------------------------ PANEL HEADERS ALLE KOMPAKTER ------------------------------------------------------------ */ .panel-head { height: 31px !important; padding: 0 9px !important; font-size: 8px !important; } /* ------------------------------------------------------------ GROSSER ROTER BUTTON UNTEN ------------------------------------------------------------ */ .back-elknet-wrap { max-width: 1920px; margin: 3px auto 8px; padding: 0 14px; text-align: center; } .back-elknet-btn { display: flex; width: min(620px, 100%); height: 48px; margin: 0 auto; align-items: center; justify-content: center; gap: 13px; border: 1px solid #ff4157; border-radius: 2px; background: linear-gradient( 180deg, #b7182d 0%, #8f1021 100% ); box-shadow: 0 0 18px rgba(255, 44, 71, .18), inset 0 1px 0 rgba(255,255,255,.12); color: #fff; text-decoration: none; font: 800 13px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .14em; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease, background .15s ease; } .back-elknet-btn span { font-size: 19px; line-height: 1; } .back-elknet-btn:hover { transform: translateY(-1px); border-color: #ff7384; background: linear-gradient( 180deg, #d11b35 0%, #a20e25 100% ); box-shadow: 0 0 27px rgba(255, 44, 71, .35), inset 0 1px 0 rgba(255,255,255,.16); } /* ------------------------------------------------------------ FOOTER KOMPAKT ------------------------------------------------------------ */ footer { margin-bottom: 7px !important; padding: 0 15px !important; font-size: 7px !important; } /* ------------------------------------------------------------ DESKTOP KLEINER ALS ~1450 ------------------------------------------------------------ */ @media (max-width: 1450px) { .dashboard { grid-template-columns: 270px 410px minmax(620px, 1fr) !important; } .node-card { min-height: 27px !important; } .node-card strong { font-size: 6.5px !important; } .node-card span { font-size: 5.8px !important; } } /* ------------------------------------------------------------ TABLET / KLEINERE BILDSCHIRME ------------------------------------------------------------ */ @media (max-width: 1180px) { .dashboard { display: grid !important; grid-template-columns: 230px minmax(0, 1fr) !important; grid-template-rows: auto !important; } .projects { grid-column: 1 !important; grid-row: 1 / 3 !important; } .map-panel { grid-column: 2 !important; grid-row: 1 !important; } .metrics-panel { grid-column: 2 !important; grid-row: 2 !important; } .queue-panel { grid-column: 1 / 3 !important; grid-row: auto !important; } .infra-panel { grid-column: 1 / 3 !important; grid-row: auto !important; } .chart-panel { grid-column: 1 / 3 !important; grid-row: auto !important; } .log-panel { grid-column: 1 / 3 !important; grid-row: auto !important; } } /* ------------------------------------------------------------ MOBIL ------------------------------------------------------------ */ @media (max-width: 760px) { .dashboard { display: block !important; } .projects, .map-panel, .metrics-panel, .queue-panel, .infra-panel, .chart-panel, .log-panel { height: auto !important; min-height: 0 !important; margin-bottom: 8px !important; } .metrics-panel { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; } .gpu-grid { grid-template-columns: repeat(3, 1fr) !important; } .server-grid { grid-template-columns: repeat(3, 1fr) !important; } #europeMap { height: 290px !important; } .event-log { height: 220px !important; } .back-elknet-btn { height: 46px; font-size: 11px; } } /* ELKTECH-MAP-STORAGE-MOBILE-V6 */ /* ============================================================ DESKTOP-HAUPTLAYOUT ============================================================ */ .dashboard { max-width: 1920px !important; display: grid !important; grid-template-columns: 320px minmax(500px, 1fr) minmax(470px, .92fr) !important; grid-template-rows: 292px 108px 185px 158px !important; gap: 8px !important; padding: 10px 14px !important; } /* ============================================================ HEADER KOMPAKT ============================================================ */ .topbar { height: 72px !important; padding: 10px 28px !important; } .topbar h1, .topbar > div > h1 { font-size: 24px !important; } .topbar .eyebrow { font-size: 8px !important; } /* ============================================================ ACTIVE SYSTEMS ============================================================ */ .projects { grid-column: 1 !important; grid-row: 1 / 3 !important; height: auto !important; min-height: 0 !important; } .project { padding: 7px 7px !important; } .project strong { font-size: 10px !important; } .project small { font-size: 8px !important; } /* ============================================================ EUROPÄISCHE KARTE ============================================================ */ .map-panel { grid-column: 2 !important; grid-row: 1 !important; height: 292px !important; min-height: 0 !important; overflow: hidden !important; } /* * Das SVG füllt praktisch das ganze Kartenpanel. */ #europeMap { display: block !important; width: 96% !important; height: 250px !important; margin: -1px auto 0 !important; overflow: visible !important; } /* * Karte selbst stärker sichtbar. */ .europe-shape { stroke-width: 1.8px !important; } .node-halo { opacity: .38 !important; } .node-core, .node-dc { filter: url(#glow) !important; } .node-label { font-size: 8px !important; } /* * Legende unten sehr flach halten. */ .map-legend { position: absolute !important; bottom: 5px !important; left: 10px !important; right: 10px !important; font-size: 7px !important; gap: 10px !important; } /* ============================================================ STORAGE DIREKT RECHTS NEBEN KARTE ============================================================ */ .storage-panel { grid-column: 3 !important; grid-row: 1 / 3 !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; } .storage-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #102b3d; } .storage-kpis > div { padding: 7px 9px; border-right: 1px solid #102b3d; } .storage-kpis > div:last-child { border-right: 0; } .storage-kpis span { display: block; color: #607f91; font: 700 7px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .10em; } .storage-kpis strong { display: block; margin-top: 3px; color: #ddf8ff; font: 800 14px ui-monospace, SFMono-Regular, Consolas, monospace; } .storage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; padding: 7px; } .storage-card { position: relative; min-height: 67px; padding: 7px 8px; border: 1px solid #144153; background: linear-gradient( 180deg, #071824, #05121c ); overflow: hidden; } .storage-card-head { display: grid; grid-template-columns: 8px 1fr auto; align-items: center; gap: 5px; } .storage-card-head i { display: block; width: 6px; height: 6px; border-radius: 50%; background: #55f3b0; box-shadow: 0 0 8px #55f3b0; } .storage-card-head strong { color: #d6f5ff; font: 700 9px ui-monospace, SFMono-Regular, Consolas, monospace; } .storage-card-head em { color: #70b5c9; font: normal 7px ui-monospace, SFMono-Regular, Consolas, monospace; } .storage-card > span { display: block; margin-top: 6px; color: #668c9e; font: 7px ui-monospace, SFMono-Regular, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .storage-bar { position: absolute; left: 8px; right: 8px; bottom: 7px; height: 3px; background: #0b2631; overflow: hidden; } .storage-bar u { display: block; height: 100%; background: #55f3b0; box-shadow: 0 0 8px #55f3b0; text-decoration: none; } /* ============================================================ METRICS UNTER DER KARTE ============================================================ */ .metrics-panel { grid-column: 2 !important; grid-row: 2 !important; height: 108px !important; display: grid !important; grid-template-columns: repeat(3, 1fr) !important; grid-template-rows: repeat(2, 1fr) !important; } .metric { min-height: 0 !important; padding: 5px 10px !important; } .metric span { font-size: 7px !important; } .metric strong { display: block !important; margin-top: 2px !important; font-size: 17px !important; line-height: 17px !important; } .metric em { display: block !important; margin: 2px 0 0 !important; font-size: 7px !important; } /* ============================================================ INFRASTRUCTURE FABRIC ============================================================ */ .infra-panel { display: block !important; grid-column: 1 / 4 !important; grid-row: 3 !important; height: 185px !important; min-height: 0 !important; overflow: hidden !important; } /* * Alte Summary und Real-Core weiterhin weg. */ .infra-panel > .panel-head, .infra-panel > .infra-summary, .infra-layout > div:first-child { display: none !important; } .infra-layout { display: grid !important; grid-template-columns: .78fr 1.55fr !important; gap: 9px !important; padding: 6px !important; } .infra-layout .infra-subhead { display: block !important; margin: 1px 0 4px !important; color: #68a9c4 !important; font: 700 7px ui-monospace, SFMono-Regular, Consolas, monospace !important; letter-spacing: .12em !important; } /* * 15 AI-GPU: * 5 nebeneinander = nur 3 Reihen. */ .gpu-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 3px !important; margin: 0 !important; } /* * Compute / Edge / Backup: * Storage ist hier NICHT mehr enthalten. */ .server-grid { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)) !important; gap: 3px !important; } .node-card { min-height: 25px !important; padding: 2px 4px !important; } .node-card strong { font-size: 6.5px !important; line-height: 7px !important; } .node-card span { margin-top: 1px !important; font-size: 5.5px !important; line-height: 6px !important; } .node-card em { top: 2px !important; right: 3px !important; font-size: 5.5px !important; } /* ============================================================ UNTERE REIHE: NETWORK | AI QUEUE | LIVE STREAM ============================================================ */ .chart-panel { grid-column: 1 !important; grid-row: 4 !important; height: 158px !important; min-height: 0 !important; } #trafficChart { height: 120px !important; } .queue-panel { display: block !important; grid-column: 2 !important; grid-row: 4 !important; height: 158px !important; min-height: 0 !important; } .queue-row { grid-template-columns: 45px minmax(85px, 1fr) 85px 30px !important; padding: 6px 7px !important; gap: 5px !important; font-size: 6.5px !important; } .log-panel { grid-column: 3 !important; grid-row: 4 !important; height: 158px !important; min-height: 0 !important; } .event-log { height: 121px !important; padding: 4px 7px !important; font-size: 8px !important; line-height: 1.25 !important; } .event-row { grid-template-columns: 51px 82px minmax(0, 1fr) !important; gap: 5px !important; padding: 1px 0 !important; } /* ============================================================ ALLGEMEINE PANEL-HÖHE ============================================================ */ .panel-head { height: 30px !important; padding: 0 9px !important; font-size: 8px !important; } /* ============================================================ BACK BUTTON ============================================================ */ .back-elknet-wrap { margin: 5px auto 6px !important; } .back-elknet-btn { height: 44px !important; width: min( 620px, calc(100% - 28px) ) !important; } /* ============================================================ FOOTER ============================================================ */ footer { margin-bottom: 5px !important; font-size: 7px !important; } /* ============================================================ MITTELGROSSE DESKTOPS / NOTEBOOKS ============================================================ */ @media (max-width: 1380px) { .dashboard { grid-template-columns: 275px minmax(430px, 1fr) minmax(390px, .9fr) !important; } .storage-card { min-height: 64px; } .gpu-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } .server-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } /* ============================================================ TABLET / SCHMALER DESKTOP ============================================================ */ @media (max-width: 1050px) { .dashboard { display: grid !important; grid-template-columns: minmax(260px, .8fr) minmax(420px, 1.2fr) !important; grid-template-rows: auto !important; } .projects { grid-column: 1 !important; grid-row: 1 / 3 !important; } .map-panel { grid-column: 2 !important; grid-row: 1 !important; height: 300px !important; } #europeMap { height: 256px !important; } .metrics-panel { grid-column: 2 !important; grid-row: 2 !important; } .storage-panel { grid-column: 1 / 3 !important; grid-row: auto !important; height: auto !important; } .storage-grid { grid-template-columns: repeat(4, 1fr); } .infra-panel { grid-column: 1 / 3 !important; grid-row: auto !important; height: auto !important; } .infra-layout { grid-template-columns: 1fr !important; } .gpu-grid { grid-template-columns: repeat(5, 1fr) !important; margin-bottom: 7px !important; } .server-grid { grid-template-columns: repeat(5, 1fr) !important; } .chart-panel, .queue-panel, .log-panel { grid-row: auto !important; } .chart-panel { grid-column: 1 / 3 !important; } .queue-panel { grid-column: 1 / 3 !important; } .log-panel { grid-column: 1 / 3 !important; } } /* ============================================================ MOBILE ============================================================ */ @media (max-width: 760px) { body { overflow-x: hidden; } .topbar { min-height: 82px !important; height: auto !important; padding: 11px 12px !important; gap: 8px; } .topbar h1, .topbar > div > h1 { font-size: 18px !important; line-height: 1.05; } .topbar .eyebrow { font-size: 6px !important; } .top-status { gap: 6px !important; } .status-pill { padding: 6px 7px !important; font-size: 6px !important; } .clock { font-size: 13px !important; min-width: auto !important; } .dashboard { display: flex !important; flex-direction: column; width: 100% !important; padding: 7px !important; gap: 7px !important; } /* * Reihenfolge auf Mobil: * * 1 Active * 2 Map * 3 Storage * 4 Metrics * 5 GPU / Compute * 6 Network * 7 AI Queue * 8 Log */ .projects { order: 1; width: 100%; height: auto !important; } /* * Active Systems auf Mobile 2-spaltig, * damit nicht acht lange Zeilen entstehen. */ .project-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; } .project { border: 1px solid #102b3d !important; padding: 7px !important; } .project small { font-size: 7px !important; } .map-panel { order: 2; width: 100%; height: 330px !important; } #europeMap { width: 100% !important; height: 288px !important; margin: 0 !important; } .storage-panel { order: 3; width: 100%; height: auto !important; } .storage-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 6px; } .storage-card { min-height: 62px; } .metrics-panel { order: 4; width: 100%; height: auto !important; grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: repeat(3, 58px) !important; } .metric { border: 1px solid #102b3d !important; } .infra-panel { order: 5; width: 100%; height: auto !important; } .infra-layout { display: block !important; padding: 6px !important; } /* * GPU auf Handy 3-spaltig. */ .gpu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-bottom: 8px !important; } /* * Compute/Edge/Backup ebenfalls 3-spaltig. */ .server-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .node-card { min-height: 31px !important; padding: 3px 5px !important; } .node-card strong { font-size: 7px !important; } .node-card span { font-size: 6px !important; } .chart-panel { order: 6; width: 100%; height: 180px !important; } #trafficChart { height: 143px !important; } .queue-panel { order: 7; width: 100%; height: auto !important; } .queue-row { grid-template-columns: 42px minmax(100px, 1fr) 70px 30px !important; min-height: 37px; } .log-panel { order: 8; width: 100%; height: 270px !important; } .event-log { height: 230px !important; font-size: 7px !important; overflow: hidden; } .event-row { grid-template-columns: 47px 74px minmax(0, 1fr) !important; } .back-elknet-wrap { padding: 0 7px !important; } .back-elknet-btn { width: 100% !important; height: 48px !important; font-size: 10px !important; } footer { padding: 0 8px !important; gap: 5px !important; font-size: 6px !important; } } /* ============================================================ SEHR KLEINE HANDYS ============================================================ */ @media (max-width: 440px) { .project-list { grid-template-columns: 1fr !important; } .storage-kpis { grid-template-columns: repeat(3, 1fr); } .storage-kpis strong { font-size: 11px; } .gpu-grid, .server-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .map-panel { height: 300px !important; } #europeMap { height: 258px !important; } }