feat(ui): CostGuard dark Vauco redesign + mobile-first for CostGuard & OPAX hub
This commit is contained in:
parent
60af0035b6
commit
c59e37295f
|
|
@ -5,37 +5,39 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>CostGuard · Billing</title>
|
||||
<link rel="manifest" href="/manifest.json">
|
||||
<meta name="theme-color" content="#4285f4">
|
||||
<meta name="theme-color" content="#0a0a0f">
|
||||
<link rel="apple-touch-icon" href="/static/icons/icon-192x192.png">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Google+Sans:wght@400;500;700&family=Google+Sans+Mono&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" rel="stylesheet">
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
|
||||
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
|
||||
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-messaging-compat.js"></script>
|
||||
<style>
|
||||
:root{
|
||||
--bg:#0d1117;--surface:#161b22;--surface-2:#1c2128;--surface-3:#242c38;
|
||||
--border:rgba(139,148,158,0.1);--border-h:rgba(139,148,158,0.2);
|
||||
--text:#e6edf3;--muted:#8b949e;--faint:#30363d;
|
||||
--blue:#4285f4;--blue-bg:rgba(66,133,244,0.1);--blue-border:rgba(66,133,244,0.25);
|
||||
--green:#34a853;--green-bg:rgba(52,168,83,0.1);
|
||||
--yellow:#fbbc04;--yellow-bg:rgba(251,188,4,0.1);
|
||||
--red:#ea4335;--red-bg:rgba(234,67,53,0.1);
|
||||
--gem-a:#8ab4f8;--gem-b:#c58af9;--gem-c:#81c995;
|
||||
--font:'Google Sans','Roboto',sans-serif;--mono:'Google Sans Mono','Roboto Mono',monospace;
|
||||
--r:8px;--tr:200ms cubic-bezier(0.2,0,0,1);
|
||||
--bg:#0a0a0f;--surface:#13131c;--surface-2:#1a1a26;--surface-3:#242436;
|
||||
--border:rgba(124,92,255,0.12);--border-h:rgba(124,92,255,0.28);
|
||||
--text:#ececf5;--muted:#8a8aa3;--faint:#3a3a4d;
|
||||
--blue:#7c5cff;--blue-bg:rgba(124,92,255,0.12);--blue-border:rgba(124,92,255,0.3);
|
||||
--primary:#7c5cff;--accent-2:#00d4a8;
|
||||
--green:#00d4a8;--green-bg:rgba(0,212,168,0.12);
|
||||
--yellow:#ffb454;--yellow-bg:rgba(255,180,84,0.12);
|
||||
--red:#ff5c7c;--red-bg:rgba(255,92,124,0.12);
|
||||
--ok:#00d4a8;--warn:#ffb454;
|
||||
--gem-a:#7c5cff;--gem-b:#00d4a8;--gem-c:#a78bfa;
|
||||
--font:'Inter',-apple-system,sans-serif;--mono:'JetBrains Mono',monospace;
|
||||
--r:10px;--tr:200ms cubic-bezier(0.2,0,0,1);
|
||||
}
|
||||
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
|
||||
html{-webkit-font-smoothing:antialiased}
|
||||
body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;min-height:100vh}
|
||||
.topbar{height:56px;background:var(--surface);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 16px;gap:0;position:sticky;top:0;z-index:200}
|
||||
.tb-logo{display:flex;align-items:center;gap:10px;padding:0 16px;border-right:1px solid var(--border)}
|
||||
.tb-logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#4285f4,#8ab4f8);border-radius:6px;display:flex;align-items:center;justify-content:center}
|
||||
.tb-logo-icon{width:28px;height:28px;background:linear-gradient(135deg,#7c5cff,#00d4a8);border-radius:8px;display:flex;align-items:center;justify-content:center}
|
||||
.tb-logo-icon svg{fill:#fff;width:16px;height:16px}
|
||||
.tb-logo-name{font-size:15px;font-weight:500;letter-spacing:-.01em}
|
||||
.tb-logo-name span{color:var(--blue);font-weight:700}
|
||||
.tb-logo-name span{background:linear-gradient(135deg,#7c5cff,#00d4a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-weight:700}
|
||||
.tb-project{display:flex;align-items:center;gap:6px;padding:6px 12px;margin:0 8px;border-radius:6px;font-size:13px;color:var(--muted)}
|
||||
.tb-project .material-symbols-outlined{font-size:16px}
|
||||
.tb-right{margin-left:auto;display:flex;align-items:center;gap:8px}
|
||||
|
|
@ -56,7 +58,7 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14
|
|||
.nav-section{padding:8px 16px 4px;font-size:11px;font-weight:500;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
|
||||
.nav-item{display:flex;align-items:center;gap:12px;padding:8px 16px;font-size:13px;color:var(--muted);cursor:pointer;transition:all var(--tr);border-radius:0 20px 20px 0;margin-right:8px}
|
||||
.nav-item:hover{background:var(--surface-2);color:var(--text)}
|
||||
.nav-item.active{background:var(--blue-bg);color:var(--blue);font-weight:500}
|
||||
.nav-item.active{background:var(--blue-bg);color:var(--blue);font-weight:600;border-left:2px solid var(--blue)}
|
||||
.nav-item .material-symbols-outlined{font-size:18px}
|
||||
.content{flex:1;padding:24px;overflow:hidden}
|
||||
.onboarding-banner{background:linear-gradient(135deg,rgba(66,133,244,0.08),rgba(138,180,248,0.05));border:1px solid var(--blue-border);border-radius:12px;padding:16px 20px;display:flex;align-items:flex-start;gap:14px;margin-bottom:20px}
|
||||
|
|
@ -68,8 +70,8 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14
|
|||
.ob-close{margin-left:auto;cursor:pointer;color:var(--muted);transition:color var(--tr);background:none;border:none;padding:4px}
|
||||
.ob-close:hover{color:var(--text)}
|
||||
.page-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
|
||||
.page-title{font-size:22px;font-weight:400;letter-spacing:-.01em}
|
||||
.page-title strong{font-weight:500}
|
||||
.page-title{font-size:24px;font-weight:600;letter-spacing:-.02em}
|
||||
.page-title strong{font-weight:700;background:linear-gradient(135deg,#7c5cff,#00d4a8);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
|
||||
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
|
||||
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px;transition:box-shadow var(--tr),border-color var(--tr)}
|
||||
.kpi:hover{border-color:var(--border-h);box-shadow:0 1px 8px rgba(0,0,0,.3)}
|
||||
|
|
@ -116,6 +118,27 @@ body{font-family:var(--font);background:var(--bg);color:var(--text);font-size:14
|
|||
.err-banner.show{display:flex}
|
||||
footer{padding:10px 20px 16px;font-size:11px;color:var(--faint);text-align:center}
|
||||
@media(max-width:900px){.kpi-row{grid-template-columns:repeat(2,1fr)}.charts-row,.bottom-row{grid-template-columns:1fr}}
|
||||
@media(max-width:720px){
|
||||
.topbar{height:auto;flex-wrap:wrap;padding:8px 12px;gap:8px}
|
||||
.tb-logo{padding:0 10px 0 0;border-right:none}
|
||||
.tb-project{display:none}
|
||||
.tb-right{width:100%;margin-left:0;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:4px;gap:6px}
|
||||
.tb-right::-webkit-scrollbar{display:none}
|
||||
.tb-right>*{flex-shrink:0}
|
||||
.layout{flex-direction:column}
|
||||
.sidebar{width:100%;display:flex;overflow-x:auto;border-right:none;border-bottom:1px solid var(--border);padding:8px;gap:4px}
|
||||
.sidebar::-webkit-scrollbar{display:none}
|
||||
.nav-section{display:none}
|
||||
.nav-item{flex-shrink:0;border-radius:99px;border-left:none;margin-right:0;padding:8px 14px;white-space:nowrap}
|
||||
.nav-item.active{border-left:none;border:1px solid var(--blue)}
|
||||
.content{padding:16px 12px}
|
||||
.kpi-row{grid-template-columns:1fr 1fr;gap:8px}
|
||||
.kpi{padding:14px}
|
||||
.kpi-val{font-size:20px}
|
||||
.page-title{font-size:20px}
|
||||
.card{padding:14px}
|
||||
}
|
||||
@media(max-width:420px){.kpi-row{grid-template-columns:1fr}}
|
||||
@media print {
|
||||
body {
|
||||
background: #fff;
|
||||
|
|
@ -649,7 +672,7 @@ function buildBar(labels, costs){
|
|||
const avgC=costs.reduce((a,b)=>a+b,0)/costs.length;
|
||||
|
||||
barChart=new Chart(ctx,{type:'bar',data:{labels,datasets:[
|
||||
{label:'Kostnad',data:costs,backgroundColor:'rgba(66,133,244,0.5)',borderRadius:4,borderSkipped:false}
|
||||
{label:'Kostnad',data:costs,backgroundColor:'rgba(124,92,255,0.55)',borderRadius:4,borderSkipped:false}
|
||||
]},options:{responsive:true,maintainAspectRatio:false,
|
||||
plugins:{legend:{display:false},tooltip:{backgroundColor:'rgba(22,21,19,.95)',borderColor:'rgba(255,255,255,.08)',borderWidth:1,titleColor:'#7a7874',bodyColor:'#e8e6e2',titleFont:{family:'Inter',size:11},bodyFont:{family:'JetBrains Mono',size:12,weight:'600'},callbacks:{label:c=>' '+fmtNOK(c.raw,2)}}},
|
||||
scales:{x:{grid:{display:false},ticks:{color:'#3f3d3a',font:{size:10},maxTicksLimit:15}},y:{grid:{color:'rgba(255,255,255,.04)'},ticks:{color:'#3f3d3a',font:{family:'JetBrains Mono',size:10},callback:v=>'kr '+v.toFixed(2)},border:{display:false}}}}});
|
||||
|
|
@ -668,7 +691,7 @@ function buildDonut(summary){
|
|||
const ctx=document.getElementById('donut-chart').getContext('2d');
|
||||
if(donutChart)donutChart.destroy();
|
||||
const top=summary.filter(s=>(s.total_cost||0)>0).slice(0,7);
|
||||
donutChart=new Chart(ctx,{type:'doughnut',data:{labels:top.map(s=>s.service),datasets:[{data:top.map(s=>s.total_cost||0),backgroundColor:['#4285f4','#34a853','#fbbc04','#ea4335','#8ab4f8','#81c995','#c58af9'],borderColor:'#161b22',borderWidth:2,hoverBorderWidth:3}]},
|
||||
donutChart=new Chart(ctx,{type:'doughnut',data:{labels:top.map(s=>s.service),datasets:[{data:top.map(s=>s.total_cost||0),backgroundColor:['#7c5cff','#00d4a8','#ffb454','#ff5c7c','#a78bfa','#5eead4','#c4b5fd'],borderColor:'#13131c',borderWidth:2,hoverBorderWidth:3}]},
|
||||
options:{responsive:true,maintainAspectRatio:false,cutout:'70%',
|
||||
plugins:{legend:{display:false},tooltip:{backgroundColor:'rgba(22,27,34,.97)',borderColor:'rgba(139,148,158,.15)',borderWidth:1,titleColor:'#8b949e',bodyColor:'#e6edf3',callbacks:{label:c=>' '+fmtNOK(c.raw)}}}}});
|
||||
}
|
||||
|
|
@ -685,9 +708,9 @@ function buildSvc(summary){
|
|||
const c=s.total_cost||0;
|
||||
const pct=(Math.abs(c)/max*100).toFixed(1);
|
||||
return`<div class="svc-row">
|
||||
<div class="svc-dot" style="background:${['#4285f4','#34a853','#fbbc04','#ea4335','#8ab4f8','#81c995','#c58af9'][i%7]}"></div>
|
||||
<div class="svc-dot" style="background:${['#7c5cff','#00d4a8','#ffb454','#ff5c7c','#a78bfa','#5eead4','#c4b5fd'][i%7]}"></div>
|
||||
<span class="svc-name">${s.service}</span>
|
||||
<div class="svc-bar-w"><div class="svc-bar" style="width:${pct}%;background:${['#4285f4','#34a853','#fbbc04','#ea4335','#8ab4f8','#81c995','#c58af9'][i%7]}"></div></div>
|
||||
<div class="svc-bar-w"><div class="svc-bar" style="width:${pct}%;background:${['#7c5cff','#00d4a8','#ffb454','#ff5c7c','#a78bfa','#5eead4','#c4b5fd'][i%7]}"></div></div>
|
||||
<span class="svc-cost">${fmtNOK(c)}</span>
|
||||
</div>`;
|
||||
}).join('');
|
||||
|
|
|
|||
|
|
@ -246,10 +246,23 @@
|
|||
|
||||
/* ── Responsive ─────────────────────────────────────────────────────── */
|
||||
@media(max-width:860px){
|
||||
.sidebar{display:none}
|
||||
.main{padding:24px 18px 48px}
|
||||
.topbar{padding:12px 16px}
|
||||
.shell{flex-direction:column}
|
||||
.sidebar{width:100%;height:auto;display:flex;flex-direction:row;align-items:center;overflow-x:auto;
|
||||
border-right:none;border-bottom:1px solid var(--border);padding:8px 12px;gap:6px;
|
||||
position:sticky;top:0;background:var(--bg-2);z-index:50}
|
||||
.sidebar::-webkit-scrollbar{display:none}
|
||||
.side-label{display:none}
|
||||
.nav-item{flex-shrink:0;white-space:nowrap;border-radius:99px;padding:8px 13px;align-self:center}
|
||||
.side-foot{display:none}
|
||||
.main{padding:22px 16px 48px}
|
||||
.topbar{padding:12px 16px;flex-wrap:wrap;gap:8px}
|
||||
.topbar-id{display:none}
|
||||
.topbar-sub{display:none}
|
||||
}
|
||||
@media(max-width:560px){
|
||||
.chat-drawer{width:100vw}
|
||||
.topbar-right{width:100%;overflow-x:auto;flex-wrap:nowrap}
|
||||
.topbar-right::-webkit-scrollbar{display:none}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user