mdaleo404/games
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Slightly improve mobile version, rename html file
Build Docker Image & Security / build-scan-push (push) Successful in 2m5s
Details

Browse Source
This commit is contained in:
mdaleo404
2026-07-07 14:34:03 +01:00
parent b0f9855648
commit 6408f280ce
1 changed files with 79 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
games/uptime/uptime-incident-game.html → games/uptime/uptime-incident-response.html
+79 -15
View File
@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UPTIME // Incident Response</title> <title>UPTIME: Incident Response</title>
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<style> <style>
@@ -26,6 +26,11 @@
--rack:#18243b; --rack:#18243b;
--rack-face:#202f4b; --rack-face:#202f4b;
--rack-dark:#0c1220; --rack-dark:#0c1220;
--node-width:94px;
--rack-width:58px;
--rack-height:94px;
--node-label-size:10px;
--edge-width:3;
} }
*{box-sizing:border-box; margin:0; padding:0;} *{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;} html,body{height:100%;}
@@ -36,6 +41,7 @@
color:var(--text); color:var(--text);
font-family:'JetBrains Mono', monospace; font-family:'JetBrains Mono', monospace;
min-height:100vh; min-height:100vh;
min-height:100svh;
display:flex; display:flex;
align-items:center; align-items:center;
justify-content:center; justify-content:center;
@@ -85,7 +91,7 @@
border-radius:10px; border-radius:10px;
position:relative; position:relative;
overflow:hidden; overflow:hidden;
aspect-ratio: 16 / 9; aspect-ratio: 5 / 3;
image-rendering:pixelated; image-rendering:pixelated;
box-shadow:0 0 0 1px #000, 0 24px 80px rgba(0,0,0,0.6), 0 0 60px rgba(70,224,212,0.05) inset; box-shadow:0 0 0 1px #000, 0 24px 80px rgba(0,0,0,0.6), 0 0 60px rgba(70,224,212,0.05) inset;
} }
@@ -174,7 +180,7 @@
text-shadow:0 0 10px rgba(70,224,212,0.38); text-shadow:0 0 10px rgba(70,224,212,0.38);
} }
svg.edges{ position:absolute; inset:0; width:100%; height:100%; z-index:2; filter:drop-shadow(0 0 4px rgba(70,224,212,0.08)); } svg.edges{ position:absolute; inset:0; width:100%; height:100%; z-index:2; filter:drop-shadow(0 0 4px rgba(70,224,212,0.08)); }
.edge-line{ stroke:#293b60; stroke-width:3; stroke-linecap:round; stroke-dasharray:8 6; opacity:0.78; transition:stroke 0.3s, opacity 0.3s; } .edge-line{ stroke:#293b60; stroke-width:var(--edge-width); stroke-linecap:round; stroke-dasharray:8 6; opacity:0.78; transition:stroke 0.3s, opacity 0.3s; }
.edge-line.pulse{ stroke:var(--cyan); opacity:0.9; animation:cableflow 1.7s linear infinite; } .edge-line.pulse{ stroke:var(--cyan); opacity:0.9; animation:cableflow 1.7s linear infinite; }
.edge-line.hot{ stroke:var(--critical); opacity:1; stroke-dasharray:3 4; animation:cableflow 0.55s linear infinite; } .edge-line.hot{ stroke:var(--critical); opacity:1; stroke-dasharray:3 4; animation:cableflow 0.55s linear infinite; }
@keyframes cableflow{ to{ stroke-dashoffset:-28; } } @keyframes cableflow{ to{ stroke-dashoffset:-28; } }
@@ -185,10 +191,10 @@
transform-origin:center bottom; transform-origin:center bottom;
display:flex; flex-direction:column; align-items:center; display:flex; flex-direction:column; align-items:center;
z-index:4; cursor:default; text-align:center; z-index:4; cursor:default; text-align:center;
width:94px; width:var(--node-width);
} }
.node-dot{ .node-dot{
width:58px; height:94px; border-radius:3px; width:var(--rack-width); height:var(--rack-height); border-radius:3px;
background:linear-gradient(90deg, var(--rack-dark) 0 8%, var(--rack) 8% 90%, #0a101d 90%); background:linear-gradient(90deg, var(--rack-dark) 0 8%, var(--rack) 8% 90%, #0a101d 90%);
border:2px solid #263a5a; border:2px solid #263a5a;
display:block; display:block;
@@ -223,10 +229,10 @@
@keyframes badflash{ 0%,100%{ transform:translateX(0); filter:brightness(1); } 40%{ transform:translateX(-3px); filter:brightness(1.6); } 70%{ transform:translateX(3px); filter:brightness(1.2); } } @keyframes badflash{ 0%,100%{ transform:translateX(0); filter:brightness(1); } 40%{ transform:translateX(-3px); filter:brightness(1.6); } 70%{ transform:translateX(3px); filter:brightness(1.2); } }
.node-name{ .node-name{
font-size:10px; font-weight:700; margin-top:5px; letter-spacing:0.08em; color:#fff; font-size:var(--node-label-size); font-weight:700; margin-top:5px; letter-spacing:0.08em; color:#fff;
background:rgba(4,6,12,0.78); border:1px solid rgba(47,67,105,0.85); padding:3px 5px; background:rgba(4,6,12,0.78); border:1px solid rgba(47,67,105,0.85); padding:3px 5px;
} }
.node-bar{ width:58px; height:4px; background:#0c1220; border-radius:0; margin-top:4px; overflow:hidden; border:1px solid #263a5a; } .node-bar{ width:var(--rack-width); height:4px; background:#0c1220; border-radius:0; margin-top:4px; overflow:hidden; border:1px solid #263a5a; }
.node-bar-fill{ height:100%; background:var(--healthy); transition:width 0.2s, background 0.2s; } .node-bar-fill{ height:100%; background:var(--healthy); transition:width 0.2s, background 0.2s; }
/* ---- Incident panel ---- */ /* ---- Incident panel ---- */
@@ -344,22 +350,75 @@
body.game-running .side{ order:1; } body.game-running .side{ order:1; }
.queue{ max-height:58vh; min-height:250px; } .queue{ max-height:58vh; min-height:250px; }
.actions{ grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); } .actions{ grid-template-columns:repeat(auto-fit, minmax(132px, 1fr)); }
.action-btn{ min-height:40px; font-size:11px; } .action-btn{ min-height:44px; font-size:12px; }
} }
@media (max-width:520px){ @media (max-width:520px){
:root{
--node-width:58px;
--rack-width:34px;
--rack-height:50px;
--node-label-size:7px;
--edge-width:2.2;
}
body{ padding:8px; }
.topbar{ align-items:flex-start; } .topbar{ align-items:flex-start; }
.stats{ width:100%; justify-content:space-between; gap:10px; } .subtitle{ font-size:9px; letter-spacing:0.14em; }
.stat{ text-align:left; } .stats{ width:100%; justify-content:space-between; gap:6px; }
.node{ width:76px; } .stat{ flex:1 1 calc(50% - 6px); min-width:0; text-align:left; padding:7px 9px; }
.node-dot{ width:42px; height:70px; border-radius:3px; } .stat .val{ font-size:17px; }
.node-name{ font-size:9px; } .stat .lbl{ font-size:8px; letter-spacing:0.16em; }
.node-bar{ width:42px; } .map-panel{ aspect-ratio: 3 / 4; border-radius:8px; min-height:430px; }
.map-caption{ top:8px; left:9px; font-size:8px; letter-spacing:0.12em; }
.node-name{ margin-top:4px; padding:2px 3px; letter-spacing:0.03em; }
.node-bar{ height:3px; margin-top:3px; }
.side-head{ letter-spacing:1.2px; } .side-head{ letter-spacing:1.2px; }
.queue{ max-height:60vh; } .queue{ max-height:54svh; min-height:220px; padding:8px; }
.debrief-stats{ grid-template-columns:repeat(2, 1fr); } .debrief-stats{ grid-template-columns:repeat(2, 1fr); }
.card{ padding:8px; } .card{ padding:8px; }
.actions{ grid-template-columns:1fr; } .actions{ grid-template-columns:1fr; }
.diff-btn{ padding:7px 9px; font-size:10px; }
}
@media (max-width:380px){
:root{
--node-width:52px;
--rack-width:30px;
--rack-height:44px;
--node-label-size:7px;
--edge-width:2;
}
.map-caption{ display:none; }
.node-name{ padding:2px 3px; letter-spacing:0.03em; }
}
@media (max-width:920px) and (orientation:landscape) and (max-height:560px){
:root{
--node-width:58px;
--rack-width:34px;
--rack-height:50px;
--node-label-size:7px;
--edge-width:2.1;
}
body{ align-items:flex-start; padding:8px; }
.topbar{ align-items:center; padding-bottom:8px; }
.title{ font-size:20px; }
.subtitle{ display:none; }
.stats{ width:auto; gap:6px; }
.stat{ min-width:74px; padding:6px 8px; }
.stat .val{ font-size:16px; }
.stat .lbl{ font-size:7px; letter-spacing:0.12em; }
.board{ grid-template-columns:minmax(0, 1fr) minmax(260px, 330px); gap:8px; }
.map-panel{ aspect-ratio:4 / 3; min-height:0; order:1; }
.side{ order:2; height:calc(100svh - 74px); min-height:250px; }
body.game-running .map-panel{ order:1; }
body.game-running .side{ order:2; }
.queue{ max-height:none; min-height:0; }
.actions{ grid-template-columns:1fr; }
.action-btn{ min-height:40px; }
.overlay{ padding:12px; gap:8px; }
.overlay h2{ font-size:20px; }
.overlay p{ font-size:10px; line-height:1.4; }
} }
/* ---- Overlays ---- */ /* ---- Overlays ---- */
@@ -378,6 +437,11 @@
letter-spacing:1px; cursor:pointer; text-transform:uppercase; margin-top:4px; letter-spacing:1px; cursor:pointer; text-transform:uppercase; margin-top:4px;
} }
.startbtn:hover{ filter:brightness(1.1); } .startbtn:hover{ filter:brightness(1.1); }
@media (max-width:520px){
.overlay{ gap:10px; padding:14px; }
.overlay h2{ font-size:22px; }
.overlay p{ font-size:11px; line-height:1.45; }
}
.hint{ position:relative; } .hint{ position:relative; }
.maprel{ position:relative; height:100%; } .maprel{ position:relative; height:100%; }
body.incident-active .map-panel{ box-shadow:0 0 0 1px #000, 0 24px 80px rgba(0,0,0,0.6), 0 0 72px rgba(255,180,84,0.08) inset; } body.incident-active .map-panel{ box-shadow:0 0 0 1px #000, 0 24px 80px rgba(0,0,0,0.6), 0 0 72px rgba(255,180,84,0.08) inset; }