christian/ProductionGame
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): remove artificial phone bezels, implement responsive full-height layout with sticky header and bottom tabs

Browse source
This commit is contained in:
Christian 2026-10-15 15:36:31 +02:00
parent ae10dc0d34
commit 4d1d0527ee
2 changed files with 140 additions and 120 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

173
frontend/css/style.css
View file

@ -28,53 +28,59 @@
user-select: none; user-select: none;
} }
body { html, body {
width: 100%;
min-height: 100%;
background-color: var(--bg-main); background-color: var(--bg-main);
color: var(--text-primary); color: var(--text-primary);
font-family: var(--font-ui); font-family: var(--font-ui);
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center;
min-height: 100vh;
overflow-x: hidden; overflow-x: hidden;
} }
/* Burner Phone Container (Mobile viewport lock) */ /* App Main Container: Clean, native-feeling layout on both mobile & desktop */
#burner-device { #app-container {
width: 100%; width: 100%;
max-width: 480px; max-width: 640px; /* Comfortable max width on larger screens without feeling like a claustrophobic fake phone */
height: 100vh; min-height: 100vh;
max-height: 940px;
background: var(--bg-main); background: var(--bg-main);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
border: 1px solid var(--border-color); padding-bottom: 84px; /* Space for sticky bottom tab bar */
box-shadow: 0 0 40px rgba(0,0,0,0.85);
overflow: hidden;
} }
@media (min-width: 520px) { @media (min-width: 680px) {
#burner-device { #app-container {
border-radius: 28px; border-left: 1px solid var(--border-color);
margin: 20px 0; border-right: 1px solid var(--border-color);
border: 2px solid #2a3440;
} }
} }
/* System Status Bar (Top) */ /* Sticky Top Navigation & HUD Header */
#system-bar { #sticky-header {
background: var(--bg-header); position: sticky;
top: 0;
left: 0;
right: 0;
z-index: 40;
background: rgba(11, 14, 18, 0.96);
backdrop-filter: blur(10px);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
/* Status / Top Brand Bar */
#system-bar {
padding: 6px 14px; padding: 6px 14px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.75rem; font-size: 0.72rem;
color: var(--text-secondary); color: var(--text-secondary);
letter-spacing: 0.5px; border-bottom: 1px solid rgba(36, 45, 54, 0.5);
z-index: 20;
} }
.status-left, .status-right { .status-left, .status-right {
@ -83,6 +89,15 @@ body {
gap: 8px; gap: 8px;
} }
.brand-tag {
font-weight: 800;
letter-spacing: 1px;
color: var(--brand-gold);
display: inline-flex;
align-items: center;
gap: 4px;
}
.secure-indicator { .secure-indicator {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
@ -107,26 +122,23 @@ body {
/* Hero Financial HUD */ /* Hero Financial HUD */
#hud-summary { #hud-summary {
background: linear-gradient(180deg, #12171e 0%, #0d1117 100%); padding: 10px 14px;
border-bottom: 1px solid var(--border-color);
padding: 12px 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: flex-end; align-items: flex-end;
position: relative;
} }
.hud-title { .hud-title {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.7rem; font-size: 0.68rem;
text-transform: uppercase; text-transform: uppercase;
color: var(--text-secondary); color: var(--text-secondary);
letter-spacing: 1px; letter-spacing: 0.8px;
} }
.hud-cash-val { .hud-cash-val {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 1.6rem; font-size: 1.55rem;
font-weight: 800; font-weight: 800;
color: var(--brand-gold); color: var(--brand-gold);
text-shadow: 0 0 10px rgba(234, 179, 8, 0.2); text-shadow: 0 0 10px rgba(234, 179, 8, 0.2);
@ -135,7 +147,7 @@ body {
.hud-rate-val { .hud-rate-val {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.8rem; font-size: 0.78rem;
color: var(--neon-green); color: var(--neon-green);
margin-top: 2px; margin-top: 2px;
} }
@ -149,7 +161,7 @@ body {
.bonds-val { .bonds-val {
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 1.1rem; font-size: 1.05rem;
font-weight: bold; font-weight: bold;
color: var(--neon-cyan); color: var(--neon-cyan);
display: flex; display: flex;
@ -160,8 +172,7 @@ body {
/* Police Heat Bar */ /* Police Heat Bar */
#heat-container { #heat-container {
background: #090c0f; background: #090c0f;
padding: 4px 16px 8px; padding: 4px 14px 6px;
border-bottom: 1px solid var(--border-color);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3px; gap: 3px;
@ -177,7 +188,7 @@ body {
.heat-bar-track { .heat-bar-track {
width: 100%; width: 100%;
height: 6px; height: 5px;
background: #1c232b; background: #1c232b;
border-radius: 3px; border-radius: 3px;
overflow: hidden; overflow: hidden;
@ -193,30 +204,30 @@ body {
/* Main Viewport Content */ /* Main Viewport Content */
#main-viewport { #main-viewport {
flex: 1; flex: 1;
overflow-y: auto; padding: 12px 14px;
overflow-x: hidden;
padding: 14px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 12px; gap: 12px;
padding-bottom: 90px; /* Space for bottom nav */
} }
/* Bottom Tab Navigation Bar */ /* Bottom Tab Navigation Bar - Fixed at bottom of screen */
#bottom-nav { #bottom-nav {
position: absolute; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 50%;
right: 0; transform: translateX(-50%);
height: 70px; width: 100%;
background: rgba(11, 14, 18, 0.95); max-width: 640px;
backdrop-filter: blur(8px); height: 68px;
background: rgba(11, 14, 18, 0.97);
backdrop-filter: blur(12px);
border-top: 1px solid var(--border-color); border-top: 1px solid var(--border-color);
display: flex; display: flex;
justify-content: space-around; justify-content: space-around;
align-items: center; align-items: center;
z-index: 30; z-index: 50;
padding-bottom: 6px; padding-bottom: env(safe-area-inset-bottom, 4px);
box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.5);
} }
.nav-tab { .nav-tab {
@ -230,14 +241,14 @@ body {
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: 0.7rem; font-size: 0.72rem;
font-family: var(--font-mono); font-family: var(--font-mono);
padding: 8px 0; padding: 8px 0;
transition: color 0.15s, transform 0.1s; transition: color 0.15s, transform 0.1s;
} }
.nav-tab:active { .nav-tab:active {
transform: scale(0.94); transform: scale(0.92);
} }
.nav-tab.active { .nav-tab.active {
@ -249,7 +260,7 @@ body {
} }
.nav-tab iconify-icon { .nav-tab iconify-icon {
font-size: 1.45rem; font-size: 1.5rem;
} }
/* Card Components */ /* Card Components */
@ -260,7 +271,7 @@ body {
padding: 12px 14px; padding: 12px 14px;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
transition: border-color 0.2s; transition: border-color 0.2s, background-color 0.2s;
} }
.card:hover { .card:hover {
@ -277,26 +288,27 @@ body {
.card-title-group { .card-title-group {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 10px;
} }
.drug-icon-box { .drug-icon-box {
width: 36px; width: 38px;
height: 36px; height: 38px;
border-radius: 8px; border-radius: 8px;
background: var(--bg-card-sub); background: var(--bg-card-sub);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border: 1px solid var(--border-color); border: 1px solid var(--border-color);
flex-shrink: 0;
} }
.drug-icon-box iconify-icon { .drug-icon-box iconify-icon {
font-size: 1.5rem; font-size: 1.55rem;
} }
.card-title { .card-title {
font-size: 0.95rem; font-size: 0.98rem;
font-weight: 700; font-weight: 700;
letter-spacing: 0.3px; letter-spacing: 0.3px;
} }
@ -329,7 +341,7 @@ body {
color: var(--text-primary); color: var(--text-primary);
} }
/* Buttons */ /* Touch-Optimized Action Buttons */
.btn-grid-actions { .btn-grid-actions {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
@ -344,13 +356,13 @@ body {
} }
.btn-tactical { .btn-tactical {
background: #192028; background: #181f26;
color: var(--text-primary); color: var(--text-primary);
border: 1px solid #2d3844; border: 1px solid #2d3844;
border-radius: 8px; border-radius: 8px;
padding: 8px 4px; padding: 9px 4px;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.72rem; font-size: 0.74rem;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -358,12 +370,13 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 2px; gap: 2px;
transition: background 0.15s, border-color 0.15s, transform 0.05s; transition: background 0.12s, border-color 0.12s, transform 0.05s;
text-align: center; text-align: center;
min-height: 48px; /* High tactile accessibility for thumbs */
} }
.btn-tactical:active:not(:disabled) { .btn-tactical:active:not(:disabled) {
transform: scale(0.96); transform: scale(0.95);
background: #25313d; background: #25313d;
} }
@ -379,18 +392,18 @@ body {
} }
.btn-primary-action { .btn-primary-action {
background: #1b2e21; background: #172c1f;
border-color: #2e593b; border-color: #2b5637;
color: #4ade80; color: #4ade80;
} }
.btn-primary-action:hover:not(:disabled) { .btn-primary-action:hover:not(:disabled) {
background: #24422e; background: #203f2c;
} }
.btn-sell-action { .btn-sell-action {
background: #2d2613; background: #2b2310;
border-color: #63501a; border-color: #5c4b1a;
color: #facc15; color: #facc15;
} }
@ -406,17 +419,17 @@ body {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 10px; gap: 10px;
padding: 20px 0; padding: 16px 0;
} }
.btn-unlock { .btn-unlock {
background: #201a08; background: #201a08;
border: 1px solid var(--brand-gold); border: 1px solid var(--brand-gold);
color: var(--brand-gold); color: var(--brand-gold);
padding: 10px 18px; padding: 11px 20px;
border-radius: 8px; border-radius: 8px;
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.85rem; font-size: 0.86rem;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
@ -447,7 +460,7 @@ body {
border: 2px solid var(--border-accent); border: 2px solid var(--border-accent);
border-radius: 16px; border-radius: 16px;
width: 100%; width: 100%;
max-width: 380px; max-width: 400px;
padding: 22px; padding: 22px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -507,10 +520,12 @@ body {
/* Toast Messages */ /* Toast Messages */
#toast-container { #toast-container {
position: absolute; position: fixed;
top: 60px; top: 76px;
left: 14px; left: 50%;
right: 14px; transform: translateX(-50%);
width: 90%;
max-width: 580px;
z-index: 80; z-index: 80;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -519,16 +534,16 @@ body {
} }
.toast { .toast {
background: rgba(16, 21, 28, 0.95); background: rgba(16, 21, 28, 0.96);
border: 1px solid var(--border-accent); border: 1px solid var(--border-accent);
border-left: 4px solid var(--neon-green); border-left: 4px solid var(--neon-green);
border-radius: 8px; border-radius: 8px;
padding: 8px 12px; padding: 9px 12px;
font-size: 0.8rem; font-size: 0.8rem;
font-family: var(--font-mono); font-family: var(--font-mono);
color: var(--text-primary); color: var(--text-primary);
box-shadow: 0 4px 14px rgba(0,0,0,0.5); box-shadow: 0 4px 16px rgba(0,0,0,0.6);
animation: slideDown 0.3s ease; animation: slideDown 0.25s ease;
} }
.toast.danger { .toast.danger {

87
frontend/index.html
View file

@ -2,8 +2,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
<title>EL PURO - SilkNet OS</title> <title>EL PURO</title>
<!-- Fonts --> <!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@ -14,59 +14,64 @@
</head> </head>
<body> <body>
<div id="burner-device"> <div id="app-container">
<!-- Top Status Bar --> <!-- Sticky Header (Status bar + Financial HUD + Heat Bar) -->
<div id="system-bar"> <header id="sticky-header">
<div class="status-left"> <!-- Top Status Bar -->
<span class="secure-indicator"> <div id="system-bar">
<span class="secure-dot"></span> SECURE <div class="status-left">
</span> <span class="brand-tag">
<span id="user-badge" style="cursor: pointer;">[ANON]</span> <iconify-icon icon="game-icons:flasks"></iconify-icon> EL PURO
</div> </span>
<div class="status-right"> <span class="secure-indicator">
<span id="system-clock">15:00</span> <span class="secure-dot"></span> SECURE
<iconify-icon icon="lucide:battery-medium"></iconify-icon> </span>
</div> </div>
</div> <div class="status-right">
<span id="user-badge" style="cursor: pointer; text-decoration: underline;">[ANON]</span>
<!-- HUD Summary (Cash, Income, Clean Bonds) --> <span id="system-clock">15:00</span>
<div id="hud-summary">
<div>
<div class="hud-title">Dirty Cash</div>
<div class="hud-cash-val">$<span id="hud-cash">0.00</span></div>
<div class="hud-rate-val">+$<span id="hud-rate">0.00</span>/s</div>
</div>
<div class="hud-bonds">
<div class="hud-title">Clean Bonds</div>
<div class="bonds-val">
<iconify-icon icon="game-icons:tied-scroll"></iconify-icon>
<span id="hud-bonds">0</span>
</div> </div>
<div class="hud-rate-val" style="color: var(--neon-cyan);">+<span id="hud-multiplier">0</span>% Boost</div>
</div> </div>
</div>
<!-- Police Heat Bar --> <!-- HUD Summary (Cash, Income, Clean Bonds) -->
<div id="heat-container"> <div id="hud-summary">
<div class="heat-label-row"> <div>
<span>POLICE HEAT</span> <div class="hud-title">Dirty Cash</div>
<span id="heat-pct">0%</span> <div class="hud-cash-val">$<span id="hud-cash">0.00</span></div>
<div class="hud-rate-val">+$<span id="hud-rate">0.00</span>/s</div>
</div>
<div class="hud-bonds">
<div class="hud-title">Clean Bonds</div>
<div class="bonds-val">
<iconify-icon icon="game-icons:tied-scroll"></iconify-icon>
<span id="hud-bonds">0</span>
</div>
<div class="hud-rate-val" style="color: var(--neon-cyan);">+<span id="hud-multiplier">0</span>% Boost</div>
</div>
</div> </div>
<div class="heat-bar-track">
<div id="heat-bar-fill"></div> <!-- Police Heat Bar -->
<div id="heat-container">
<div class="heat-label-row">
<span>POLICE HEAT</span>
<span id="heat-pct">0%</span>
</div>
<div class="heat-bar-track">
<div id="heat-bar-fill"></div>
</div>
</div> </div>
</div> </header>
<!-- Toast Notifications Container --> <!-- Toast Notifications Container -->
<div id="toast-container"></div> <div id="toast-container"></div>
<!-- Main Viewport with Dynamic Views --> <!-- Main Viewport with Dynamic Views -->
<main id="main-viewport"> <main id="main-viewport">
<!-- Views will be dynamically injected / rendered here --> <!-- Views are rendered dynamically by game.js -->
</main> </main>
<!-- Bottom Navigation Bar --> <!-- Bottom Navigation Bar (Fixed for quick thumb access) -->
<nav id="bottom-nav"> <nav id="bottom-nav">
<button class="nav-tab active" data-tab="lab"> <button class="nav-tab active" data-tab="lab">
<iconify-icon icon="game-icons:flasks"></iconify-icon> <iconify-icon icon="game-icons:flasks"></iconify-icon>