switch from dark to light theme matching Court Tech brand guide
Replace dark navy backgrounds with soft white, update all CSS variables, Chart.js colors, and inline styles across the app. Add logo to nav and footer. Landing page teaser calculator, planner, and all inherited pages now use the light theme with deep navy headings and electric blue accents. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Deeman
@@ -14,7 +14,7 @@
|
||||
<button hx-delete="{{ url_for('planner.delete_scenario', scenario_id=s.id) }}"
|
||||
hx-target="#scenario-drawer" hx-swap="innerHTML"
|
||||
hx-confirm="Delete this scenario?"
|
||||
style="background:none;border:none;color:var(--rd,#3B82F6);cursor:pointer;font-size:11px;padding:0">Del</button>
|
||||
style="background:none;border:none;color:#EF4444;cursor:pointer;font-size:11px;padding:0">Del</button>
|
||||
</div>
|
||||
</div>
|
||||
{% if s.location %}<div class="scenario-item__meta">{{ s.location }}</div>{% endif %}
|
||||
|
||||
@@ -11,12 +11,13 @@
|
||||
<link rel="canonical" href="{{ config.BASE_URL }}">
|
||||
<style>
|
||||
.teaser-calc {
|
||||
background: #1E293B;
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #E2E8F0;
|
||||
border-radius: 12px;
|
||||
padding: 2rem;
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.06);
|
||||
}
|
||||
.teaser-calc .slider-row {
|
||||
display: flex;
|
||||
@@ -28,7 +29,7 @@
|
||||
width: 140px;
|
||||
flex-shrink: 0;
|
||||
font-size: 13px;
|
||||
color: #94A3B8;
|
||||
color: #64748B;
|
||||
}
|
||||
.teaser-calc .slider-row input[type=range] {
|
||||
flex: 1;
|
||||
@@ -36,7 +37,7 @@
|
||||
appearance: none;
|
||||
height: 5px;
|
||||
border-radius: 3px;
|
||||
background: rgba(255,255,255,0.08);
|
||||
background: #E2E8F0;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -45,14 +46,14 @@
|
||||
width: 16px; height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #3B82F6;
|
||||
border: 2px solid #0F172A;
|
||||
border: 2px solid #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.teaser-calc .slider-row input[type=range]::-moz-range-thumb {
|
||||
width: 16px; height: 16px;
|
||||
border-radius: 50%;
|
||||
background: #3B82F6;
|
||||
border: 2px solid #0F172A;
|
||||
border: 2px solid #FFFFFF;
|
||||
cursor: pointer;
|
||||
}
|
||||
.teaser-calc .slider-row .val {
|
||||
@@ -61,7 +62,7 @@
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #F8FAFC;
|
||||
color: #0F172A;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.teaser-results {
|
||||
@@ -70,7 +71,7 @@
|
||||
gap: 1rem;
|
||||
margin-top: 1.5rem;
|
||||
padding-top: 1.5rem;
|
||||
border-top: 1px solid rgba(255,255,255,0.08);
|
||||
border-top: 1px solid #E2E8F0;
|
||||
}
|
||||
.teaser-metric {
|
||||
text-align: center;
|
||||
@@ -95,7 +96,7 @@
|
||||
}
|
||||
.tm-green { color: #10B981; }
|
||||
.tm-blue { color: #3B82F6; }
|
||||
.tm-white { color: #F8FAFC; }
|
||||
.tm-navy { color: #0F172A; }
|
||||
.tm-red { color: #EF4444; }
|
||||
.teaser-cta {
|
||||
text-align: center;
|
||||
@@ -120,7 +121,7 @@
|
||||
<!-- Hero -->
|
||||
<header style="text-align: center; padding: 4rem 0 2rem;">
|
||||
<h1 style="font-size: 2.5rem; line-height: 1.15;">Plan Your Padel Business<br>in Minutes, Not Months</h1>
|
||||
<p style="font-size: 1.2rem; max-width: 640px; margin: 1rem auto 0; color: #94A3B8;">
|
||||
<p style="font-size: 1.2rem; max-width: 640px; margin: 1rem auto 0; color: #64748B;">
|
||||
Model your padel court investment with 60+ variables, sensitivity analysis, and professional-grade projections. 100% free.
|
||||
</p>
|
||||
</header>
|
||||
@@ -159,7 +160,7 @@
|
||||
<div class="teaser-results">
|
||||
<div class="teaser-metric">
|
||||
<div class="tm-label">Total Investment</div>
|
||||
<div class="tm-value tm-white" id="tr-invest">—</div>
|
||||
<div class="tm-value tm-navy" id="tr-invest">—</div>
|
||||
<div class="tm-sub">CAPEX (rent model)</div>
|
||||
</div>
|
||||
<div class="teaser-metric">
|
||||
@@ -360,7 +361,7 @@ function tCalc() {
|
||||
irrEl.className = 'tm-value ' + (irr >= 0 ? 'tm-green' : 'tm-red');
|
||||
} else {
|
||||
irrEl.innerHTML = '—';
|
||||
irrEl.className = 'tm-value tm-white';
|
||||
irrEl.className = 'tm-value tm-navy';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
/* Padelnomics — Court Tech brand overrides for Pico CSS */
|
||||
|
||||
:root[data-theme="dark"] {
|
||||
/* Background layers — Deep Navy family */
|
||||
--pico-background-color: #0F172A;
|
||||
--pico-card-background-color: #1E293B;
|
||||
--pico-card-sectioning-background-color: #253347;
|
||||
:root[data-theme="light"] {
|
||||
/* Background layers — Soft White family */
|
||||
--pico-background-color: #F8FAFC;
|
||||
--pico-card-background-color: #FFFFFF;
|
||||
--pico-card-sectioning-background-color: #F1F5F9;
|
||||
|
||||
/* Text — Soft White / Slate */
|
||||
--pico-color: #CBD5E1;
|
||||
--pico-muted-color: #94A3B8;
|
||||
--pico-muted-border-color: rgba(255,255,255,0.08);
|
||||
/* Text — Slate / Deep Navy */
|
||||
--pico-color: #475569;
|
||||
--pico-muted-color: #64748B;
|
||||
--pico-muted-border-color: #E2E8F0;
|
||||
|
||||
/* Primary accent — Electric Blue */
|
||||
--pico-primary: #3B82F6;
|
||||
@@ -17,28 +17,28 @@
|
||||
--pico-primary-focus: rgba(59,130,246,0.25);
|
||||
--pico-primary-inverse: #fff;
|
||||
|
||||
/* Secondary — Charcoal */
|
||||
--pico-secondary: #94A3B8;
|
||||
--pico-secondary-hover: #CBD5E1;
|
||||
--pico-secondary-focus: rgba(148,163,184,0.25);
|
||||
--pico-secondary-inverse: #0F172A;
|
||||
/* Secondary — Slate */
|
||||
--pico-secondary: #64748B;
|
||||
--pico-secondary-hover: #475569;
|
||||
--pico-secondary-focus: rgba(100,116,139,0.25);
|
||||
--pico-secondary-inverse: #F8FAFC;
|
||||
|
||||
/* Typography — Inter */
|
||||
--pico-font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
--pico-font-family-monospace: 'JetBrains Mono', monospace;
|
||||
|
||||
/* Borders */
|
||||
--pico-border-color: #334155;
|
||||
--pico-border-color: #E2E8F0;
|
||||
|
||||
/* Form styling */
|
||||
--pico-form-element-background-color: #1E293B;
|
||||
--pico-form-element-border-color: #334155;
|
||||
--pico-form-element-background-color: #FFFFFF;
|
||||
--pico-form-element-border-color: #CBD5E1;
|
||||
--pico-form-element-focus-color: #3B82F6;
|
||||
}
|
||||
|
||||
/* Headings — Soft White, Inter */
|
||||
/* Headings — Deep Navy, Inter */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: #F8FAFC;
|
||||
color: #0F172A;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,26 +1,26 @@
|
||||
/* Padelnomics Planner — scoped under .planner-app */
|
||||
/* Court Tech brand — Deep Navy + Electric Blue */
|
||||
/* Court Tech brand — Light theme */
|
||||
|
||||
.planner-app {
|
||||
--bg: #0F172A;
|
||||
--bg-2: #1E293B;
|
||||
--bg-3: #253347;
|
||||
--bg-4: #2D3F54;
|
||||
--border: rgba(255,255,255,0.08);
|
||||
--border-2: rgba(255,255,255,0.12);
|
||||
--txt: #CBD5E1;
|
||||
--txt-2: #94A3B8;
|
||||
--txt-3: #64748B;
|
||||
--head: #F8FAFC;
|
||||
--wht: #F8FAFC;
|
||||
--bg: #F8FAFC;
|
||||
--bg-2: #FFFFFF;
|
||||
--bg-3: #F1F5F9;
|
||||
--bg-4: #E2E8F0;
|
||||
--border: #E2E8F0;
|
||||
--border-2: #CBD5E1;
|
||||
--txt: #475569;
|
||||
--txt-2: #64748B;
|
||||
--txt-3: #94A3B8;
|
||||
--head: #0F172A;
|
||||
--wht: #0F172A;
|
||||
--rd: #3B82F6;
|
||||
--rd-bg: rgba(59,130,246,0.08);
|
||||
--rd-bg: rgba(59,130,246,0.06);
|
||||
--gn: #10B981;
|
||||
--gn-bg: rgba(16,185,129,0.08);
|
||||
--gn-bg: rgba(16,185,129,0.06);
|
||||
--bl: #3B82F6;
|
||||
--bl-bg: rgba(59,130,246,0.08);
|
||||
--bl-bg: rgba(59,130,246,0.06);
|
||||
--am: #F59E0B;
|
||||
--am-bg: rgba(245,158,11,0.08);
|
||||
--am-bg: rgba(245,158,11,0.06);
|
||||
|
||||
font-family: 'Inter', sans-serif;
|
||||
font-size: 14px;
|
||||
@@ -32,7 +32,7 @@
|
||||
/* Scrollbar */
|
||||
.planner-app ::-webkit-scrollbar { width: 5px; }
|
||||
.planner-app ::-webkit-scrollbar-track { background: transparent; }
|
||||
.planner-app ::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
|
||||
.planner-app ::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 3px; }
|
||||
|
||||
/* ── Header ── */
|
||||
.planner-header {
|
||||
@@ -115,7 +115,7 @@
|
||||
}
|
||||
.tab-btn:hover {
|
||||
color: var(--txt-2);
|
||||
background: rgba(255,255,255,0.02);
|
||||
background: rgba(0,0,0,0.02);
|
||||
}
|
||||
.tab-btn--active {
|
||||
color: var(--rd) !important;
|
||||
@@ -235,7 +235,7 @@
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
background: rgba(255,255,255,0.08);
|
||||
background: #E2E8F0;
|
||||
}
|
||||
.slider-combo input[type=range]::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
@@ -333,7 +333,7 @@
|
||||
text-align: right;
|
||||
}
|
||||
.data-table tr:hover {
|
||||
background: rgba(255,255,255,0.015);
|
||||
background: rgba(0,0,0,0.02);
|
||||
}
|
||||
.data-table .total-row {
|
||||
border-top: 2px solid var(--rd);
|
||||
@@ -376,7 +376,7 @@
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
border-radius: 50%;
|
||||
background: rgba(255,255,255,0.06);
|
||||
background: rgba(0,0,0,0.04);
|
||||
color: var(--txt-3);
|
||||
font-size: 9px;
|
||||
cursor: help;
|
||||
@@ -402,7 +402,7 @@
|
||||
line-height: 1.5;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.4);
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||||
z-index: 200;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
BIN
padelnomics/src/padelnomics/static/images/logo.png
Normal file
BIN
padelnomics/src/padelnomics/static/images/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 312 KiB |
@@ -324,7 +324,7 @@ function renderCapex(d){
|
||||
datasets:[{data:d.capexItems.filter(i=>i.amount>0).map(i=>i.amount),
|
||||
backgroundColor:['#3B82F6','#10B981','#F59E0B','#8B5CF6','#EC4899','#06B6D4','#84CC16','#F97316','#6366F1','#14B8A6','#A855F7','#EF4444','#22C55E','#EAB308','#2563EB'],
|
||||
borderWidth:0}]
|
||||
},{plugins:{legend:{position:'right',labels:{color:'#94A3B8',font:{size:10,family:'Inter'},boxWidth:10,padding:6}}}});
|
||||
},{plugins:{legend:{position:'right',labels:{color:'#64748B',font:{size:10,family:'Inter'},boxWidth:10,padding:6}}}});
|
||||
}
|
||||
|
||||
function renderOperating(d){
|
||||
@@ -362,7 +362,7 @@ function renderOperating(d){
|
||||
{label:'Revenue',data:rampData.map(m=>Math.round(m.totalRev)),backgroundColor:'rgba(16,185,129,0.5)',borderRadius:3},
|
||||
{label:'OpEx+Debt',data:rampData.map(m=>Math.round(Math.abs(m.opex)+Math.abs(m.loan))),backgroundColor:'rgba(239,68,68,0.4)',borderRadius:3},
|
||||
]
|
||||
},{scales:{x:{ticks:{maxTicksLimit:12,color:'#64748B',font:{size:9}}},y:{ticks:{color:'#64748B',font:{size:9}},grid:{color:'rgba(255,255,255,0.03)'}}},plugins:{legend:{labels:{color:'#94A3B8',font:{size:10}}}}});
|
||||
},{scales:{x:{ticks:{maxTicksLimit:12,color:'#94A3B8',font:{size:9}}},y:{ticks:{color:'#94A3B8',font:{size:9}},grid:{color:'rgba(0,0,0,0.04)'}}},plugins:{legend:{labels:{color:'#64748B',font:{size:10}}}}});
|
||||
|
||||
const plData = [
|
||||
{label:'Court Rev',val:Math.round(d.courtRevMonth)},
|
||||
@@ -374,7 +374,7 @@ function renderOperating(d){
|
||||
renderChart('chartPL','bar',{
|
||||
labels:plData.map(p=>p.label),
|
||||
datasets:[{data:plData.map(p=>p.val),backgroundColor:plData.map(p=>p.val>=0?'rgba(16,185,129,0.6)':'rgba(239,68,68,0.5)'),borderRadius:4}]
|
||||
},{indexAxis:'y',scales:{x:{ticks:{color:'#64748B',font:{size:9}},grid:{color:'rgba(255,255,255,0.03)'}},y:{ticks:{color:'#94A3B8',font:{size:10}}}},plugins:{legend:{display:false}}});
|
||||
},{indexAxis:'y',scales:{x:{ticks:{color:'#94A3B8',font:{size:9}},grid:{color:'rgba(0,0,0,0.04)'}},y:{ticks:{color:'#64748B',font:{size:10}}}},plugins:{legend:{display:false}}});
|
||||
}
|
||||
|
||||
function renderCashflow(d){
|
||||
@@ -391,12 +391,12 @@ function renderCashflow(d){
|
||||
labels:d.months.map(m=>m.m%12===1?'Y'+m.yr:''),
|
||||
datasets:[{data:d.months.map(m=>Math.round(m.ncf)),
|
||||
backgroundColor:d.months.map(m=>m.ncf>=0?'rgba(16,185,129,0.5)':'rgba(239,68,68,0.4)'),borderRadius:2}]
|
||||
},{scales:{x:{ticks:{color:'#64748B',font:{size:9}}},y:{ticks:{color:'#64748B',font:{size:9}},grid:{color:'rgba(255,255,255,0.03)'}}},plugins:{legend:{display:false}}});
|
||||
},{scales:{x:{ticks:{color:'#94A3B8',font:{size:9}}},y:{ticks:{color:'#94A3B8',font:{size:9}},grid:{color:'rgba(0,0,0,0.04)'}}},plugins:{legend:{display:false}}});
|
||||
|
||||
renderChart('chartCum','line',{
|
||||
labels:d.months.map(m=>m.m%6===1?'M'+m.m:''),
|
||||
datasets:[{data:d.months.map(m=>Math.round(m.cum)),borderColor:'#3B82F6',backgroundColor:'rgba(59,130,246,0.08)',fill:true,pointRadius:0,tension:0.3}]
|
||||
},{scales:{x:{ticks:{color:'#64748B',font:{size:9}}},y:{ticks:{color:'#64748B',font:{size:9}},grid:{color:'rgba(255,255,255,0.03)'}}},plugins:{legend:{display:false}}});
|
||||
},{scales:{x:{ticks:{color:'#94A3B8',font:{size:9}}},y:{ticks:{color:'#94A3B8',font:{size:9}},grid:{color:'rgba(0,0,0,0.04)'}}},plugins:{legend:{display:false}}});
|
||||
|
||||
let rows = d.annuals.map(y=>{
|
||||
const dscr = y.ds>0?y.ebitda/y.ds:999;
|
||||
@@ -438,7 +438,7 @@ function renderReturns(d){
|
||||
renderChart('chartDSCR','bar',{
|
||||
labels:d.dscr.map(x=>'Y'+x.year),
|
||||
datasets:[{data:d.dscr.map(x=>Math.min(x.dscr,10)),backgroundColor:d.dscr.map(x=>x.dscr>=1.2?'rgba(16,185,129,0.5)':'rgba(239,68,68,0.5)'),borderRadius:4}]
|
||||
},{scales:{x:{ticks:{color:'#94A3B8'}},y:{ticks:{color:'#64748B',font:{size:9}},grid:{color:'rgba(255,255,255,0.03)'}}},plugins:{legend:{display:false}}});
|
||||
},{scales:{x:{ticks:{color:'#94A3B8'}},y:{ticks:{color:'#94A3B8',font:{size:9}},grid:{color:'rgba(0,0,0,0.04)'}}},plugins:{legend:{display:false}}});
|
||||
|
||||
const utils = [15,20,25,30,35,40,45,50,55,60,65,70];
|
||||
const isIn = S.venue==='indoor';
|
||||
@@ -516,7 +516,7 @@ function renderSeasonChart(){
|
||||
renderChart('chartSeason','bar',{
|
||||
labels:months,
|
||||
datasets:[{data:S.season.map(s=>s*100),backgroundColor:S.season.map(s=>s>0?'rgba(16,185,129,0.5)':'rgba(239,68,68,0.2)'),borderRadius:4}]
|
||||
},{scales:{x:{ticks:{color:'#94A3B8'}},y:{max:110,ticks:{color:'#64748B'},grid:{color:'rgba(255,255,255,0.03)'}}},plugins:{legend:{display:false}}});
|
||||
},{scales:{x:{ticks:{color:'#94A3B8'}},y:{max:110,ticks:{color:'#94A3B8'},grid:{color:'rgba(0,0,0,0.04)'}}},plugins:{legend:{display:false}}});
|
||||
}
|
||||
|
||||
// ── Chart Helper ──────────────────────────────────────────
|
||||
@@ -527,15 +527,15 @@ function renderChart(canvasId,type,data,opts={}){
|
||||
const defaults = {
|
||||
responsive:true, maintainAspectRatio:false, animation:{duration:0},
|
||||
scales:{},
|
||||
plugins:{legend:{labels:{color:'#94A3B8',font:{family:'Inter',size:10}}}},
|
||||
plugins:{legend:{labels:{color:'#64748B',font:{family:'Inter',size:10}}}},
|
||||
};
|
||||
if(type==='doughnut'||type==='pie'){
|
||||
delete defaults.scales;
|
||||
defaults.cutout = '55%';
|
||||
} else {
|
||||
defaults.scales = {
|
||||
x:{ticks:{color:'#64748B',font:{size:9,family:'Inter'}},grid:{display:false},border:{color:'rgba(255,255,255,0.08)'}},
|
||||
y:{ticks:{color:'#64748B',font:{size:9,family:'JetBrains Mono'}},grid:{color:'rgba(255,255,255,0.03)'},border:{color:'rgba(255,255,255,0.06)'}},
|
||||
x:{ticks:{color:'#94A3B8',font:{size:9,family:'Inter'}},grid:{display:false},border:{color:'#E2E8F0'}},
|
||||
y:{ticks:{color:'#94A3B8',font:{size:9,family:'JetBrains Mono'}},grid:{color:'rgba(0,0,0,0.04)'},border:{color:'#E2E8F0'}},
|
||||
};
|
||||
}
|
||||
charts[canvasId] = new Chart(ctx,{type,data,options:deepMerge(defaults,opts)});
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<html lang="en" data-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}{{ config.APP_NAME }}{% endblock %}</title>
|
||||
|
||||
<!-- Pico CSS v2 dark theme -->
|
||||
<!-- Pico CSS v2 -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
|
||||
|
||||
<!-- Fonts -->
|
||||
@@ -20,7 +20,7 @@
|
||||
<!-- Navigation -->
|
||||
<nav class="container">
|
||||
<ul>
|
||||
<li><a href="{{ url_for('public.landing') }}"><strong>{{ config.APP_NAME }}</strong></a></li>
|
||||
<li><a href="{{ url_for('public.landing') }}" style="display:flex;align-items:center;gap:0.5rem;text-decoration:none"><img src="{{ url_for('static', filename='images/logo.png') }}" alt="{{ config.APP_NAME }}" height="32"><strong>{{ config.APP_NAME }}</strong></a></li>
|
||||
</ul>
|
||||
<ul>
|
||||
{% if user %}
|
||||
@@ -67,7 +67,7 @@
|
||||
<footer class="container" style="margin-top: 4rem; padding: 2rem 0; border-top: 1px solid var(--pico-muted-border-color);">
|
||||
<div class="grid">
|
||||
<div>
|
||||
<strong>{{ config.APP_NAME }}</strong>
|
||||
<div style="display:flex;align-items:center;gap:0.5rem;margin-bottom:0.25rem"><img src="{{ url_for('static', filename='images/logo.png') }}" alt="{{ config.APP_NAME }}" height="24"><strong>{{ config.APP_NAME }}</strong></div>
|
||||
<p><small>Plan, finance, and build your padel business.</small></p>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user