<!DOCTYPE html>

<html lang="en" class="h-full bg-[#06080D] text-slate-100 antialiased">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>taxclub Riga • Direct Ride-Hailing Platform Engine</title>

<script src="https://cdn.tailwindcss.com"></script>

<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=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">

<script>

tailwind.config = {

theme: {

extend: {

fontFamily: {

sans: ['Inter', 'sans-serif'],

mono: ['JetBrains Mono', 'monospace'],

},

colors: {

brand: {

50: '#ecfdf5',

500: '#10b981',

600: '#059669',

700: '#047857',

900: '#064e3b',

},

ios: {

bg: '#000000',

card: 'rgba(28, 28, 30, 0.78)',

blur: 'backdrop-blur-2xl',

},

hyperos: {

dark: '#0e1117',

accent: '#ff6700',

card: '#181d27',

waze: '#33ccff',

}

}

}

}

}

</script>

<style>

::-webkit-scrollbar { width: 6px; height: 6px; }

::-webkit-scrollbar-track { background: #06080D; }

::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 9999px; }

::-webkit-scrollbar-thumb:hover { background: #334155; }

@keyframes pulse-ring {

0% { transform: scale(0.95); opacity: 0.8; }

50% { transform: scale(1.1); opacity: 0.3; }

100% { transform: scale(0.95); opacity: 0.8; }

}

.animate-pulse-ring { animation: pulse-ring 2.5s infinite ease-in-out; }


.glass-card {

background: rgba(18, 24, 38, 0.75);

backdrop-filter: blur(16px);

border: 1px solid rgba(255, 255, 255, 0.08);

}


.ios-glass {

background: rgba(22, 26, 36, 0.82);

backdrop-filter: blur(24px);

border: 1px solid rgba(255, 255, 255, 0.12);

}

</style>

</head>

<body class="h-full bg-[#06080D] font-sans selection:bg-emerald-500 selection:text-white flex flex-col overflow-x-hidden">


<header class="h-14 bg-[#0a0d14] border-b border-slate-800/80 px-4 flex items-center justify-between shrink-0 z-50">

<div class="flex items-center gap-3">

<div class="flex items-center gap-2">

<span class="text-xl">🚕</span>

<span class="font-extrabold text-lg tracking-tight bg-gradient-to-r from-emerald-400 to-teal-200 bg-clip-text text-transparent">taxclub</span>

<span class="text-xs font-mono bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 px-2 py-0.5 rounded-full">Riga v3.4</span>

</div>

<div class="hidden md:flex items-center gap-2 text-xs text-slate-400 border-l border-slate-800 pl-3">

<span class="w-2 h-2 rounded-full bg-emerald-500 animate-ping"></span>

<span>Direct Driver Settlement Engine</span>

<span class="text-slate-600">•</span>

<span>RIX Airport ↔ Vecrīga Route</span>

</div>

</div>


<!-- View Switcher -->

<div class="flex items-center bg-slate-900/90 p-1 rounded-xl border border-slate-800 text-xs font-medium">

<button onclick="switchView('all')" id="tab-btn-all" class="view-tab-btn active px-3 py-1.5 rounded-lg transition-all bg-emerald-500 text-slate-950 font-semibold shadow-sm">

👁️ All 3 Apps

</button>

<button onclick="switchView('client')" id="tab-btn-client" class="view-tab-btn px-3 py-1.5 rounded-lg text-slate-400 hover:text-slate-200 transition-all">

📱 Client App

</button>

<button onclick="switchView('driver')" id="tab-btn-driver" class="view-tab-btn px-3 py-1.5 rounded-lg text-slate-400 hover:text-slate-200 transition-all flex items-center gap-1.5">

<span>🚕 Driver APK</span>

<span class="text-[10px] bg-amber-500/20 text-amber-300 px-1 rounded">Redmi 16C</span>

</button>

<button onclick="switchView('admin')" id="tab-btn-admin" class="view-tab-btn px-3 py-1.5 rounded-lg text-slate-400 hover:text-slate-200 transition-all">

👑 Admin HQ

</button>

</div>


<div class="hidden xl:flex items-center gap-3 text-xs font-mono">

<span class="text-slate-400">VID DAC7: <span class="text-emerald-400">Compliant</span></span>

<span class="bg-slate-800 text-slate-300 px-2.5 py-1 rounded-lg border border-slate-700">Valdis (TX-4491)</span>

</div>

</header>


<main class="flex-1 p-4 lg:p-6 overflow-x-auto overflow-y-auto">

<div id="workspace-grid" class="flex flex-row flex-nowrap items-start justify-center gap-6 min-w-max mx-auto pb-8">

<!-- APP 1: CLIENT APP (iPhone 18 Pro Max) -->

<section id="pane-client" class="app-pane shrink-0 transition-all duration-300">

<div class="w-[412px] h-[840px] bg-[#000000] rounded-[52px] p-3 shadow-2xl shadow-emerald-950/20 border-[3px] border-slate-700/60 relative flex flex-col overflow-hidden select-none">

<!-- Hardware Bezel Cues -->

<div class="absolute -left-[5px] top-28 w-[3px] h-10 bg-slate-700 rounded-l-sm"></div> <!-- Action Button -->

<div class="absolute -left-[5px] top-42 w-[3px] h-12 bg-slate-700 rounded-l-sm"></div> <!-- Vol Up -->

<div class="absolute -left-[5px] top-58 w-[3px] h-12 bg-slate-700 rounded-l-sm"></div> <!-- Vol Down -->

<div class="absolute -right-[5px] top-40 w-[3px] h-16 bg-slate-700 rounded-r-sm"></div> <!-- Power -->

<div class="absolute -right-[5px] top-[540px] w-[3px] h-14 bg-slate-700 rounded-r-sm"></div> <!-- Camera Control -->


<!-- Screen Inner Window -->

<div class="w-full h-full bg-[#070a10] rounded-[42px] relative flex flex-col overflow-hidden border border-slate-800">

<!-- Dynamic Island & iOS Status Bar -->

<div class="h-11 px-6 pt-3 flex items-center justify-between z-40 shrink-0 text-white font-medium text-xs">

<span class="font-semibold tracking-tight text-[13px] pl-1">20:42</span>

<!-- Dynamic Island Pill -->

<div id="dynamic-island" class="bg-black border border-slate-800 h-7 px-3 rounded-full flex items-center gap-2 transition-all duration-300 shadow-md">

<div class="w-2.5 h-2.5 rounded-full bg-emerald-500 animate-pulse"></div>

<span id="dynamic-island-text" class="text-[10px] font-mono tracking-tight text-slate-200">taxclub • RIX Ready</span>

</div>


<div class="flex items-center gap-1.5 text-[11px] pr-1">

<span>5G UC</span>

<svg class="w-3.5 h-3.5 fill-current" viewBox="0 0 24 24"><path d="M12 3c-4.97 0-9 4.03-9 9 0 2.12.74 4.07 1.97 5.61L4.35 19.4c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0l1.9-1.9C9.22 19.58 10.57 20 12 20c4.97 0 9-4.03 9-9s-4.03-9-9-9zm0 15c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/></svg>

<div class="w-5 h-2.5 border border-slate-300 rounded-sm p-0.5 flex items-center">

<div class="h-full w-4/5 bg-slate-100 rounded-xs"></div>

</div>

</div>

</div>


<!-- Edge-to-Edge Vector Map Background -->

<div class="absolute inset-0 top-0 z-0 bg-[#0b0f19]">

<!-- SVG Map Canvas -->

<svg id="client-map-svg" class="w-full h-full" viewBox="0 0 412 840">

<!-- Landmass -->

<rect width="412" height="840" fill="#0c111c"/>

<!-- Daugava River -->

<path d="M-20 280 Q 120 260 220 220 T 440 180 L 440 320 Q 220 340 120 360 L -20 380 Z" fill="#061f38" opacity="0.8"/>

<!-- Akmens Tilts Bridge -->

<line x1="210" y1="215" x2="250" y2="295" stroke="#334155" stroke-width="8"/>

<line x1="210" y1="215" x2="250" y2="295" stroke="#38bdf8" stroke-width="3" stroke-dasharray="2 2"/>


<!-- Road Network Layer -->

<path d="M 30 160 Q 120 150 210 215" fill="none" stroke="#1e293b" stroke-width="6"/> <!-- Ulmaņa Gatve -->

<path d="M 250 295 L 360 380" fill="none" stroke="#1e293b" stroke-width="5"/> <!-- 11. Novembra krastmala -->

<path d="M 210 215 L 180 120 L 120 90" fill="none" stroke="#1e293b" stroke-width="4"/> <!-- Airport Access Road -->

<!-- RIX Airport Perimeter -->

<path d="M 80 70 L 160 50 L 190 110 L 110 130 Z" fill="#131c2e" stroke="#1e293b" stroke-width="1.5" stroke-dasharray="3 3"/>

<text x="100" y="85" fill="#475569" font-size="9" font-family="sans-serif" font-weight="bold">RIX AIRPORT TERMINAL B</text>


<!-- Vecrīga Old Town Polygon -->

<path d="M 260 300 L 340 280 L 380 340 L 310 370 Z" fill="#101a2b" stroke="#1e293b" stroke-width="1.5"/>

<text x="285" y="330" fill="#475569" font-size="9" font-family="sans-serif" font-weight="bold">VECRĪGA (OLD TOWN)</text>


<!-- Active Route Approach Trace Line -->

<path id="svg-active-approach" d="M 160 110 Q 180 120 210 215" fill="none" stroke="#10b981" stroke-width="4" stroke-dasharray="6 4" class="hidden"/>


<!-- Active Trip Polyline -->

<path id="svg-active-route" d="M 160 110 Q 180 120 210 215 L 250 295 L 310 330" fill="none" stroke="#38bdf8" stroke-width="4" stroke-linecap="round" class="hidden"/>


<!-- Pickup Pin (Door 3) -->

<g transform="translate(160, 110)">

<circle r="12" fill="#10b981" opacity="0.2" class="animate-ping"/>

<circle r="6" fill="#10b981" stroke="#ffffff" stroke-width="2"/>

<text x="10" y="4" fill="#10b981" font-size="10" font-weight="bold">Door 3 Pickup</text>

</g>


<!-- Destination Pin (Vecrīga Dome Square) -->

<g transform="translate(310, 330)">

<circle r="6" fill="#f43f5e" stroke="#ffffff" stroke-width="2"/>

<text x="10" y="4" fill="#f43f5e" font-size="10" font-weight="bold">Dome Square</text>

</g>


<g id="svg-driver-car" transform="translate(120, 90) rotate(45)" class="transition-transform duration-75">

<!-- Xenon Headlight Projection Beams -->

<polygon points="0,0 -16,-38 16,-38" fill="url(#xenon-beam)" opacity="0.65"/>


<!-- Car Chassis -->

<rect x="-10" y="-20" width="20" height="40" rx="6" fill="#1e293b" stroke="#10b981" stroke-width="2"/>

<!-- Windshield glass -->

<rect x="-7" y="-12" width="14" height="10" rx="2" fill="#38bdf8" opacity="0.7"/>

<!-- Sunroof -->

<rect x="-5" y="2" width="10" height="8" rx="1" fill="#0f172a"/>

<!-- Taillights -->

<circle cx="-7" cy="18" r="1.5" fill="#ef4444"/>

<circle cx="7" cy="18" r="1.5" fill="#ef4444"/>


<!-- Plate Badge -->

<rect x="-12" y="-28" width="24" height="7" rx="1.5" fill="#ffffff" stroke="#000000" stroke-width="0.5"/>

<text x="0" y="-23" fill="#000000" font-size="5" font-family="monospace" font-weight="bold" text-anchor="middle">TX-4491</text>

</g>


<defs>

<linearGradient id="xenon-beam" x1="0%" y1="100%" x2="0%" y2="0%">

<stop offset="0%" stop-color="#38bdf8" stop-opacity="0.8"/>

<stop offset="100%" stop-color="#38bdf8" stop-opacity="0"/>

</linearGradient>

</defs>

</svg>

</div>


<!-- iOS Floating Top Controls -->

<div class="relative z-20 px-4 pt-2 flex items-center justify-between">

<button class="w-10 h-10 rounded-full ios-glass flex items-center justify-center text-white shadow-lg border border-slate-700/50">

☰

</button>

<div class="ios-glass px-3 py-1.5 rounded-full flex items-center gap-2 border border-slate-700/50 text-xs text-slate-200">

<span class="w-2 h-2 rounded-full bg-emerald-400"></span>

<span class="font-medium">Direct Settlement Active</span>

</div>

</div>


<!-- Dynamic iOS Bottom Sheet Lifecycle Container -->

<div class="mt-auto relative z-20 p-3 pb-6">

<!-- STATE 1: BOOKING SELECTION SHEET -->

<div id="client-sheet-booking" class="ios-glass rounded-[32px] p-4 text-white shadow-2xl border border-slate-700/60 space-y-3">

<!-- Pull Bar Handle -->

<div class="w-10 h-1 bg-slate-600/80 rounded-full mx-auto"></div>


<!-- "Where to?" Search & Shortcut Chips -->

<div>

<div class="flex items-center gap-2 bg-slate-900/90 border border-slate-700 px-3 py-2.5 rounded-2xl">

<span class="text-emerald-400 font-bold">🔍</span>

<input type="text" value="Vecrīga (Old Town Dome Square)" readonly class="bg-transparent text-sm font-medium text-slate-100 focus:outline-none w-full">

</div>

<div class="flex gap-2 mt-2">

<button class="bg-slate-800/80 hover:bg-slate-700 text-xs text-slate-300 px-3 py-1.5 rounded-xl border border-slate-700 flex items-center gap-1.5">

<span>✈️</span> RIX Airport

</button>

<button class="bg-emerald-500/20 text-emerald-300 text-xs px-3 py-1.5 rounded-xl border border-emerald-500/40 font-semibold flex items-center gap-1.5">

<span>📍</span> Vecrīga Center

</button>

<button class="bg-slate-800/80 hover:bg-slate-700 text-xs text-slate-300 px-3 py-1.5 rounded-xl border border-slate-700 flex items-center gap-1.5">

<span>💼</span> Work

</button>

</div>

</div>


<!-- Primary Offer Option: "⭐ My Driver" Priority -->

<div class="bg-gradient-to-r from-slate-900 via-slate-900 to-emerald-950/40 p-3.5 rounded-2xl border-2 border-emerald-500/80 shadow-lg relative overflow-hidden">

<div class="absolute -right-6 -top-6 w-20 h-20 bg-emerald-500/10 rounded-full blur-xl"></div>

<div class="flex items-center justify-between">

<div class="flex items-center gap-3">

<div class="relative">

<div class="w-11 h-11 rounded-full bg-slate-800 border-2 border-emerald-400 overflow-hidden flex items-center justify-center font-bold text-slate-200">

VK

</div>

<span class="absolute -bottom-1 -right-1 bg-amber-400 text-slate-950 text-[10px] px-1 font-extrabold rounded-full">5.0★</span>

</div>

<div>

<div class="flex items-center gap-1.5">

<h3 class="font-bold text-sm text-slate-100">Valdis K.</h3>

<span class="bg-emerald-500 text-slate-950 font-extrabold text-[10px] px-1.5 py-0.2 rounded-md">MY DRIVER</span>

</div>

<p class="text-xs text-slate-400">Volvo V90 (TX-4491) • RIX Terminal Door 3</p>

</div>

</div>

<div class="text-right">

<div class="text-lg font-extrabold text-emerald-400">€19.50</div>

<div class="text-[11px] text-slate-400 font-mono">3 min away</div>

</div>

</div>


<!-- Direct Settlement Info Strip -->

<div class="mt-2.5 pt-2 border-t border-slate-800 flex items-center justify-between text-[11px] text-slate-300">

<span class="flex items-center gap-1">

<span class="text-emerald-400">💳</span> Direct Pay: Cash / Driver POS

</span>

<span class="text-amber-400 font-semibold">30s Priority Dispatch</span>

</div>

</div>


<!-- Action Button: Request Valdis -->

<button onclick="requestRideBooking()" class="w-full bg-gradient-to-r from-emerald-500 to-teal-500 hover:from-emerald-400 hover:to-teal-400 text-slate-950 font-extrabold py-3.5 rounded-2xl text-sm shadow-lg shadow-emerald-500/25 transition-all transform active:scale-95 flex items-center justify-center gap-2">

<span>Request Valdis (30s Priority)</span>

<span>➔</span>

</button>

</div>


<!-- STATE 2: ACTIVE RIDE IN-PROGRESS SHEET -->

<div id="client-sheet-active" class="ios-glass rounded-[32px] p-4 text-white shadow-2xl border border-slate-700/60 space-y-3 hidden">

<div class="w-10 h-1 bg-slate-600/80 rounded-full mx-auto"></div>

<div class="flex items-center justify-between">

<div>

<span id="client-status-badge" class="bg-emerald-500/20 text-emerald-300 font-bold text-xs px-2.5 py-1 rounded-full border border-emerald-500/30">

Valdis Approaching Pickup...

</span>

<h3 id="client-eta-heading" class="text-lg font-extrabold text-slate-100 mt-1">ETA: ~3 minutes</h3>

</div>

<div class="text-right">

<span class="text-xs font-mono text-slate-400">Direct Settlement</span>

<div class="text-lg font-extrabold text-emerald-400">€19.50</div>

</div>

</div>


<div class="bg-slate-900/80 p-3 rounded-2xl border border-slate-800 flex items-center justify-between">

<div class="flex items-center gap-3">

<div class="w-10 h-10 rounded-full bg-emerald-600/30 border border-emerald-500 flex items-center justify-center font-bold text-emerald-300">

VK

</div>

<div>

<div class="font-bold text-xs text-slate-100">Valdis K. • Volvo V90</div>

<div class="text-[11px] text-slate-400 font-mono">TX-4491 • Black Platinum</div>

</div>

</div>

<button class="w-9 h-9 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center text-slate-200">

📞

</button>

</div>

</div>


<!-- STATE 3: POST-RIDE RATING & TIPPING SHEET -->

<div id="client-sheet-rating" class="ios-glass rounded-[32px] p-4 text-white shadow-2xl border border-slate-700/60 space-y-3 hidden">

<div class="text-center space-y-1">

<span class="text-2xl">🎉</span>

<h3 class="font-extrabold text-base text-slate-100">Arrived at Vecrīga Dome Square</h3>

<p class="text-xs text-slate-400">Direct settlement completed with Valdis</p>

</div>


<!-- Interactive Tip Selector -->

<div class="bg-slate-900/90 p-3 rounded-2xl border border-slate-800 space-y-2">

<div class="flex justify-between text-xs text-slate-300">

<span>Base Direct Fare:</span>

<span class="font-mono text-emerald-400 font-bold">€19.50</span>

</div>

<div class="text-xs font-semibold text-slate-200">Add Tip for Valdis:</div>

<div class="grid grid-cols-4 gap-2">

<button onclick="selectTip(0)" class="tip-btn border border-slate-700 bg-slate-800/80 hover:bg-slate-700 text-xs font-bold py-1.5 rounded-xl text-slate-300 transition-all">€0</button>

<button onclick="selectTip(2)" class="tip-btn border border-emerald-500/50 bg-emerald-500/20 text-emerald-300 text-xs font-bold py-1.5 rounded-xl transition-all">+€2.00</button>

<button onclick="selectTip(3)" class="tip-btn border border-slate-700 bg-slate-800/80 hover:bg-slate-700 text-xs font-bold py-1.5 rounded-xl text-slate-300 transition-all">+€3.00</button>

<button onclick="selectTip(5)" class="tip-btn border border-slate-700 bg-slate-800/80 hover:bg-slate-700 text-xs font-bold py-1.5 rounded-xl text-slate-300 transition-all">+€5.00</button>

</div>

<div class="pt-2 border-t border-slate-800 flex justify-between text-xs font-extrabold">

<span class="text-slate-200">Total Direct Settlement:</span>

<span id="final-tip-total" class="text-emerald-400 font-mono text-sm">€21.50</span>

</div>

</div>


<!-- My Drivers Toggle -->

<div class="flex items-center justify-between bg-slate-900/60 p-2.5 rounded-xl border border-slate-800 text-xs">

<span class="text-slate-300 font-medium">Keep Valdis in "My Drivers" list</span>

<input type="checkbox" checked class="accent-emerald-500 w-4 h-4 rounded">

</div>


<button onclick="resetTripFlow()" class="w-full bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-extrabold py-3 rounded-2xl text-xs transition-all shadow-md">

Done • Back to Home

</button>

</div>


</div> <!-- End Sheets -->

</div>

</div>

</section>


<!-- APP 2: DRIVER APP (Xiaomi Redmi 16C with HyperOS 2) -->

<section id="pane-driver" class="app-pane shrink-0 transition-all duration-300">

<div class="w-[400px] h-[840px] bg-[#1a1f29] rounded-[44px] p-3 shadow-2xl shadow-amber-950/10 border-[3px] border-slate-700/80 relative flex flex-col overflow-hidden select-none">

<!-- Redmi 16C Flat Frame Hardware Cues -->

<div class="absolute -right-[5px] top-32 w-[3px] h-14 bg-slate-700 rounded-r-md"></div> <!-- Power & Fingerprint -->

<div class="absolute -right-[5px] top-50 w-[3px] h-20 bg-slate-700 rounded-r-md"></div> <!-- Vol Rockers -->

<div class="absolute -left-[5px] top-36 w-[3px] h-10 bg-slate-700 rounded-l-md"></div> <!-- SIM Tray -->


<!-- Screen Inner Window -->

<div class="w-full h-full bg-[#0b0e14] rounded-[34px] relative flex flex-col overflow-hidden border border-slate-800">

<!-- Xiaomi HyperOS 2 Status Bar -->

<div class="h-10 px-5 pt-2.5 flex items-center justify-between z-40 shrink-0 text-white font-medium text-xs bg-[#0b0e14]">

<span class="font-bold font-mono text-[12px] text-slate-200">20:42</span>

<!-- Redmi Top Center Camera Punchhole -->

<div class="w-3.5 h-3.5 rounded-full bg-black border border-slate-800 flex items-center justify-center">

<div class="w-1.5 h-1.5 rounded-full bg-slate-900"></div>

</div>


<!-- HyperOS Battery & Signal -->

<div class="flex items-center gap-1.5 text-[10px] text-slate-300 font-mono">

<span>SIM1</span>

<span class="text-amber-400 font-bold">5G</span>

<div class="bg-slate-800 px-1 py-0.5 rounded border border-slate-700 text-[9px] text-emerald-400 font-bold">96%</div>

</div>

</div>


<!-- Driver Cockpit Top Bar -->

<div class="bg-[#121722] px-4 py-2.5 border-b border-slate-800 flex items-center justify-between z-30 shrink-0">

<div class="flex items-center gap-2">

<div class="w-3 h-3 rounded-full bg-emerald-500 animate-pulse"></div>

<div>

<h2 class="text-xs font-bold text-slate-100">taxclub Driver APK</h2>

<p class="text-[10px] text-slate-400 font-mono">Valdis K. • Volvo V90</p>

</div>

</div>


<!-- TOP-RIGHT CIRCULAR WAZE SWITCH BUTTON -->

<button onclick="toggleWazeNavigation()" id="btn-waze-toggle" class="w-10 h-10 rounded-full bg-[#33ccff] hover:bg-[#2ab8e6] text-slate-950 font-extrabold flex items-center justify-center shadow-lg shadow-cyan-500/20 transition-all transform active:scale-95 border-2 border-white/20">

<span id="waze-btn-icon" class="text-xs">Waze</span>

</button>

</div>


<!-- MAIN DRIVER VIEWPORT CONTAINER -->

<div class="flex-1 relative overflow-hidden flex flex-col">

<!-- VIEW A: NATIVE TAXCLUB DRIVER COCKPIT -->

<div id="driver-view-native" class="absolute inset-0 flex flex-col z-10 bg-[#0b0e14]">

<!-- GPS Map Area -->

<div class="h-44 bg-[#0d131f] relative overflow-hidden border-b border-slate-800">

<svg class="w-full h-full opacity-60" viewBox="0 0 400 180">

<path d="M -20 90 Q 150 70 250 110 T 420 100" fill="none" stroke="#1e293b" stroke-width="24"/>

<path d="M -20 90 Q 150 70 250 110 T 420 100" fill="none" stroke="#38bdf8" stroke-width="4"/>

<circle cx="210" cy="100" r="8" fill="#10b981"/>

</svg>

<!-- Speedometer & Guidance Pill -->

<div class="absolute top-3 left-3 bg-slate-900/90 backdrop-blur-md px-3 py-1.5 rounded-xl border border-slate-700 flex items-center gap-2">

<div class="text-center border-r border-slate-700 pr-2">

<div id="driver-speedometer" class="text-lg font-extrabold font-mono text-emerald-400">0</div>

<div class="text-[8px] text-slate-400 font-bold">KM/H</div>

</div>

<div class="text-[11px] text-slate-200">

<div id="driver-nav-instruction" class="font-bold text-slate-100">Fleet Radar Active</div>

<div class="text-[10px] text-slate-400">RIX Airport / Mārupe Zone</div>

</div>

</div>

</div>


<!-- Driver Dynamic Lifecycle Sheets -->

<div class="flex-1 p-3 flex flex-col justify-between overflow-y-auto">

<!-- STATE A1: INITIAL IDLE STATE (NO ORDER YET) -->

<div id="driver-sheet-idle" class="space-y-3">

<div class="bg-[#131924] p-3.5 rounded-2xl border border-slate-800 space-y-2">

<div class="flex items-center justify-between text-xs">

<span class="flex items-center gap-1.5 font-bold text-emerald-400">

<span class="w-2 h-2 rounded-full bg-emerald-400 animate-ping"></span>

Online & Ready

</span>

<span class="text-slate-400 font-mono">RIX Zone Priority</span>

</div>

<div class="text-xs text-slate-300 font-medium">

Scanning for "My Driver" requests from Terminal B...

</div>

<div class="pt-2 border-t border-slate-800/80 flex items-center justify-between text-[11px] text-slate-400">

<span>⭐ 48 Regulars Saved</span>

<span class="text-amber-400 font-semibold">0% Platform Fee</span>

</div>

</div>


<div class="bg-slate-900/60 p-3 rounded-2xl border border-slate-800 text-xs text-slate-400 space-y-1">

<div class="font-bold text-slate-200">Flight Telemetry:</div>

<div>BT 214 from Berlin • Landing in 8 min</div>

</div>

</div>


<!-- STATE A2: ACTIVE TRIP LIFECYCLE SHEET -->

<div id="driver-sheet-lifecycle" class="space-y-3 hidden">

<!-- REAL-TIME PICKUP DISTANCE HUD -->

<div id="driver-pickup-hud" class="bg-gradient-to-r from-emerald-950/80 to-slate-900 p-3 rounded-2xl border border-emerald-500/40 space-y-1">

<div class="flex justify-between items-center text-xs">

<span class="text-slate-300 font-bold">DISTANCE TO CLIENT:</span>

<span id="driver-pickup-distance" class="font-mono font-extrabold text-emerald-400 text-sm">1.8 km</span>

</div>

<div class="flex justify-between items-center text-[11px] text-slate-400">

<span>Pickup Location:</span>

<span class="text-slate-200 font-semibold">Terminal B (Door 3)</span>

</div>

<div class="flex justify-between items-center text-[11px] text-slate-400">

<span>Pickup ETA:</span>

<span id="driver-pickup-eta" class="text-amber-400 font-mono font-bold">~3 min</span>

</div>

</div>


<!-- Virtual Taximeter Card -->

<div class="bg-[#131924] p-3.5 rounded-2xl border border-slate-800 space-y-2">

<div class="flex justify-between items-center">

<span class="text-xs font-bold text-slate-300">VIRTUAL TAXIMETER</span>

<span class="text-[10px] bg-slate-800 text-slate-400 px-2 py-0.5 rounded font-mono">ATD Verified</span>

</div>

<div class="flex items-baseline justify-between">

<div class="text-3xl font-extrabold font-mono text-emerald-400">€19.50</div>

<div class="text-xs font-mono text-slate-400">9.2 km • Direct Pay</div>

</div>

</div>


<!-- Dynamic Action Buttons -->

<button id="btn-driver-action" onclick="advanceDriverTripPhase()" class="w-full bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-extrabold py-3.5 rounded-2xl text-sm shadow-lg shadow-emerald-500/20 transition-all">

Mark Arrived at Pickup

</button>

</div>


<!-- Bottom Driver Earnings Footer -->

<div class="mt-auto bg-slate-900/90 p-2.5 rounded-xl border border-slate-800 flex items-center justify-between text-xs">

<div>

<span class="text-slate-400">Today's Direct Fares:</span>

<span class="font-bold text-emerald-400 font-mono ml-1">€142.00</span>

</div>

<button onclick="toggleDriverEarningsDrawer()" class="text-slate-300 font-semibold hover:text-white underline">

Ledger ➔

</button>

</div>

</div>

</div>


<!-- VIEW B: WAZE GPS NAVIGATION SCREEN -->

<div id="driver-view-waze" class="absolute inset-0 flex flex-col z-20 bg-[#0d1821] hidden">

<!-- Waze Top Turn Banner -->

<div class="bg-[#33ccff] text-slate-950 p-3.5 flex items-center justify-between shadow-md">

<div class="flex items-center gap-3">

<span class="text-2xl font-extrabold">↱</span>

<div>

<div class="text-xs font-mono font-bold uppercase tracking-wider text-slate-800">In 350 meters</div>

<div id="waze-turn-text" class="text-sm font-extrabold">Keep Right onto Akmens tilts</div>

</div>

</div>

<div class="text-right font-mono font-extrabold text-xs">

<div>14 min</div>

<div class="text-slate-800 font-normal">9.2 km</div>

</div>

</div>


<!-- Waze Map Canvas Simulation -->

<div class="flex-1 relative bg-[#132230] p-4 flex flex-col justify-between overflow-hidden">

<!-- Waze Crowd-Sourced Hazard & Traffic Banners -->

<div class="space-y-2">

<div class="bg-amber-500/20 border border-amber-500/40 text-amber-300 p-2.5 rounded-xl text-xs flex items-center gap-2">

<span class="text-base">🚓</span>

<span>Police reported 400m ahead on K. Ulmaņa gatve</span>

</div>

<div class="bg-red-500/20 border border-red-500/40 text-red-300 p-2.5 rounded-xl text-xs flex items-center gap-2">

<span class="text-base">⚠️</span>

<span>Heavy traffic on 11. Novembra krastmala (+3m)</span>

</div>

</div>


<!-- Waze Bottom Bar & Picture-in-Picture Return Bubble -->

<div class="space-y-3">

<!-- Android Floating Taxclub PiP Widget -->

<div onclick="toggleWazeNavigation()" class="bg-slate-900/95 border-2 border-emerald-500 p-3 rounded-2xl shadow-2xl flex items-center justify-between cursor-pointer hover:bg-slate-800 transition-all">

<div class="flex items-center gap-2.5">

<div class="w-8 h-8 rounded-full bg-emerald-500 text-slate-950 font-extrabold flex items-center justify-center text-xs">

TC

</div>

<div>

<div class="text-xs font-bold text-slate-100">taxclub Ride Active</div>

<div class="text-[10px] text-slate-400 font-mono">Fare: €19.50 • Tap to return</div>

</div>

</div>

<span class="text-xs font-bold text-emerald-400">Return ➔</span>

</div>


<div class="flex justify-between items-center text-xs font-mono text-slate-400 pt-1">

<span>Waze GPS v4.98</span>

<span class="text-cyan-400">RIX ➔ Vecrīga</span>

</div>

</div>

</div>

</div>


</div> <!-- End Driver Viewport -->


<!-- INCOMING OFFER POPUP MODAL (MANUAL ACCEPTANCE) -->

<div id="driver-offer-modal" class="absolute inset-x-3 bottom-14 z-50 bg-[#141b27] border-2 border-emerald-500 rounded-2xl p-4 text-white shadow-2xl space-y-3 hidden animate-bounce-once">

<div class="flex items-center justify-between border-b border-slate-800 pb-2">

<div class="flex items-center gap-2">

<span class="w-3 h-3 rounded-full bg-amber-400 animate-ping"></span>

<span class="font-extrabold text-sm text-amber-300">"MY DRIVER" REQUEST</span>

</div>

<span id="offer-timer" class="font-mono text-sm font-bold bg-amber-500/20 text-amber-300 px-2 py-0.5 rounded border border-amber-500/30">30s</span>

</div>


<div class="space-y-1 text-xs">

<div class="flex justify-between text-slate-300">

<span>Pickup Distance:</span>

<span class="font-mono font-bold text-emerald-400">1.8 km (~3 min drive)</span>

</div>

<div class="flex justify-between text-slate-300">

<span>Route:</span>

<span class="font-semibold text-slate-100">Terminal B ➔ Vecrīga</span>

</div>

<div class="flex justify-between text-slate-300">

<span>Fare Direct:</span>

<span class="font-mono font-extrabold text-emerald-400 text-sm">€19.50</span>

</div>

<div class="flex justify-between text-slate-400 text-[11px] pt-1">

<span>Payment Method:</span>

<span class="text-slate-200 font-medium">Direct Cash / POS Terminal</span>

</div>

</div>


<div class="grid grid-cols-2 gap-2 pt-1">

<button onclick="declineDriverOffer()" class="bg-slate-800 hover:bg-slate-700 text-slate-300 font-bold py-2.5 rounded-xl text-xs border border-slate-700 transition-all">

Pass

</button>

<button onclick="acceptDriverOffer()" class="bg-emerald-500 hover:bg-emerald-400 text-slate-950 font-extrabold py-2.5 rounded-xl text-xs shadow-lg shadow-emerald-500/20 transition-all">

Accept Request

</button>

</div>

</div>


</div>

</div>

</section>


<!-- APP 3: UNIFIED ADMIN CONSOLE -->

<section id="pane-admin" class="app-pane shrink-0 transition-all duration-300">

<div class="w-[420px] h-[840px] bg-[#0c1017] rounded-[36px] p-4 shadow-2xl border border-slate-800 flex flex-col select-none">

<!-- Admin Header -->

<div class="flex items-center justify-between pb-3 border-b border-slate-800 shrink-0">

<div class="flex items-center gap-2">

<span class="text-lg">👑</span>

<div>

<h2 class="font-extrabold text-sm text-slate-100">Unified Admin HQ</h2>

<p class="text-[10px] text-slate-400 font-mono">Riga Platform Controller</p>

</div>

</div>

<span class="text-[10px] bg-emerald-500/10 text-emerald-400 font-mono px-2 py-0.5 rounded border border-emerald-500/20">LIVE</span>

</div>


<!-- Admin Inner Navigation Tabs -->

<div class="flex border-b border-slate-800 text-xs font-semibold text-slate-400 mt-2 shrink-0">

<button onclick="switchAdminTab('fleet')" id="admin-tab-btn-fleet" class="admin-tab-btn flex-1 py-2 text-center border-b-2 border-emerald-500 text-emerald-400">

Fleet (32)

</button>

<button onclick="switchAdminTab('trips')" id="admin-tab-btn-trips" class="admin-tab-btn flex-1 py-2 text-center border-b-2 border-transparent hover:text-slate-200">

Live Rides

</button>

<button onclick="switchAdminTab('ledger')" id="admin-tab-btn-ledger" class="admin-tab-btn flex-1 py-2 text-center border-b-2 border-transparent hover:text-slate-200">

VID DAC7

</button>

<button onclick="switchAdminTab('super')" id="admin-tab-btn-super" class="admin-tab-btn flex-1 py-2 text-center border-b-2 border-transparent hover:text-slate-200">

Super Admin

</button>

</div>


<!-- Admin Content Area -->

<div class="flex-1 py-3 overflow-y-auto space-y-3">

<!-- TAB 1: FLEET DIRECTORY -->

<div id="admin-tab-fleet" class="admin-tab-content space-y-2">

<div class="text-xs font-bold text-slate-300 flex justify-between">

<span>ACTIVE DRIVERS (RIGA)</span>

<span class="text-emerald-400 font-mono">32 Online</span>

</div>


<div class="space-y-2 text-xs">

<div class="bg-slate-900/90 p-3 rounded-xl border border-emerald-500/40 flex items-center justify-between">

<div class="flex items-center gap-2.5">

<div class="w-8 h-8 rounded-full bg-emerald-500/20 text-emerald-400 font-bold flex items-center justify-center">

VK

</div>

<div>

<div class="font-bold text-slate-100">Valdis K. (TX-4491)</div>

<div class="text-[10px] text-slate-400 font-mono">Volvo V90 • 5.0★ Rating</div>

</div>

</div>

<span id="admin-driver-status-badge" class="bg-emerald-500/20 text-emerald-300 text-[10px] px-2 py-0.5 rounded font-bold border border-emerald-500/30">

Online

</span>

</div>


<div class="bg-slate-900/50 p-3 rounded-xl border border-slate-800 flex items-center justify-between opacity-75">

<div class="flex items-center gap-2.5">

<div class="w-8 h-8 rounded-full bg-slate-800 text-slate-300 font-bold flex items-center justify-center">

AN

</div>

<div>

<div class="font-bold text-slate-200">Artūrs N. (TX-8812)</div>

<div class="text-[10px] text-slate-400 font-mono">Mercedes E-Class • 4.92★</div>

</div>

</div>

<span class="bg-slate-800 text-slate-400 text-[10px] px-2 py-0.5 rounded font-mono">

Mārupe Zone

</span>

</div>

</div>

</div>


<!-- TAB 2: LIVE RIDES -->

<div id="admin-tab-trips" class="admin-tab-content space-y-2 hidden">

<div class="text-xs font-bold text-slate-300">ACTIVE DISPATCH SESSION</div>

<div class="bg-slate-900/90 p-3 rounded-xl border border-slate-800 text-xs space-y-2">

<div class="flex justify-between">

<span class="text-slate-400">Order ID:</span>

<span class="font-mono text-emerald-400">#RIX-9941</span>

</div>

<div class="flex justify-between">

<span class="text-slate-400">Passenger:</span>

<span class="text-slate-200 font-medium">Verified Client (Terminal B)</span>

</div>

<div class="flex justify-between">

<span class="text-slate-400">Assigned Driver:</span>

<span class="text-slate-200 font-medium">Valdis K. (Volvo V90)</span>

</div>

<div class="flex justify-between">

<span class="text-slate-400">Fare Direct:</span>

<span class="font-mono text-emerald-400 font-bold">€19.50</span>

</div>

</div>

</div>


<!-- TAB 3: VID DAC7 TAX COMPLIANCE -->

<div id="admin-tab-ledger" class="admin-tab-content space-y-2 hidden">

<div class="text-xs font-bold text-slate-300">VID DAC7 REPORTING LEDGER</div>

<div class="bg-slate-900/90 p-3 rounded-xl border border-slate-800 text-xs space-y-2">

<div class="flex justify-between">

<span class="text-slate-400">EU DAC7 Status:</span>

<span class="text-emerald-400 font-bold">Batch Synchronized</span>

</div>

<div class="flex justify-between">

<span class="text-slate-400">Platform Commission Due (15%):</span>

<span class="font-mono text-amber-300">€2.93</span>

</div>

<div class="flex justify-between">

<span class="text-slate-400">Vendor Royalty (5%):</span>

<span class="font-mono text-emerald-400">€0.98</span>

</div>

</div>

</div>


<!-- TAB 4: SUPER ADMIN CONTROLS -->

<div id="admin-tab-super" class="admin-tab-content space-y-3 hidden">

<div class="text-xs font-bold text-slate-300">MASTER PLATFORM CONTROLS</div>

<div class="bg-slate-900/90 p-3 rounded-xl border border-slate-800 space-y-2 text-xs">

<div class="flex items-center justify-between">

<span class="text-slate-300">Riga Region Killswitch</span>

<button class="bg-emerald-500/20 text-emerald-300 border border-emerald-500/40 px-2 py-1 rounded text-[10px] font-bold">

ACTIVE

</button>

</div>

<div class="flex items-center justify-between">

<span class="text-slate-300">Global Surge Override</span>

<span class="font-mono text-emerald-400 font-bold">1.0x (Standard)</span>

</div>

</div>

</div>


</div>


<!-- Admin Footer Stats -->

<div class="mt-auto pt-3 border-t border-slate-800 flex justify-between items-center text-[11px] font-mono text-slate-400 shrink-0">

<span>GMV Today: <strong class="text-emerald-400">€4,892.40</strong></span>

<span>API 14ms</span>

</div>


</div>

</section>


</div>

</main>


<script>

// MASTER STATE ENGINE

let currentTripPhase = 'IDLE'; // IDLE, APPROACHING, ARRIVED, IN_TRANSIT, COMPLETED

let selectedTipAmount = 2.00;

let baseFare = 19.50;

let carAnimationId = null;

let offerTimerInterval = null;


// Viewport Switcher

function switchView(view) {

document.querySelectorAll('.view-tab-btn').forEach(btn => {

btn.classList.remove('bg-emerald-500', 'text-slate-950', 'font-semibold');

btn.classList.add('text-slate-400');

});

const activeBtn = document.getElementById(`tab-btn-${view}`);

if(activeBtn) {

activeBtn.classList.add('bg-emerald-500', 'text-slate-950', 'font-semibold');

activeBtn.classList.remove('text-slate-400');

}


const clientPane = document.getElementById('pane-client');

const driverPane = document.getElementById('pane-driver');

const adminPane = document.getElementById('pane-admin');


if (view === 'all') {

clientPane.style.display = 'block';

driverPane.style.display = 'block';

adminPane.style.display = 'block';

} else if (view === 'client') {

clientPane.style.display = 'block';

driverPane.style.display = 'none';

adminPane.style.display = 'none';

} else if (view === 'driver') {

clientPane.style.display = 'none';

driverPane.style.display = 'block';

adminPane.style.display = 'none';

} else if (view === 'admin') {

clientPane.style.display = 'none';

driverPane.style.display = 'none';

adminPane.style.display = 'block';

}

}


// Admin Tab Switcher

function switchAdminTab(tab) {

document.querySelectorAll('.admin-tab-btn').forEach(btn => {

btn.classList.remove('border-emerald-500', 'text-emerald-400');

btn.classList.add('border-transparent');

});

document.querySelectorAll('.admin-tab-content').forEach(content => {

content.classList.add('hidden');

});


const activeBtn = document.getElementById(`admin-tab-btn-${tab}`);

if(activeBtn) activeBtn.classList.add('border-emerald-500', 'text-emerald-400');

const activeContent = document.getElementById(`admin-tab-${tab}`);

if(activeContent) activeContent.classList.remove('hidden');

}


// Waze Switcher

function toggleWazeNavigation() {

const nativeView = document.getElementById('driver-view-native');

const wazeView = document.getElementById('driver-view-waze');

const btnIcon = document.getElementById('waze-btn-icon');


if (wazeView.classList.contains('hidden')) {

wazeView.classList.remove('hidden');

nativeView.classList.add('hidden');

btnIcon.innerText = '↺ TC';

} else {

wazeView.classList.add('hidden');

nativeView.classList.remove('hidden');

btnIcon.innerText = 'Waze';

}

}


// Rider Booking Trigger

function requestRideBooking() {

// Show incoming offer on Driver APK

const offerModal = document.getElementById('driver-offer-modal');

const timerSpan = document.getElementById('offer-timer');

offerModal.classList.remove('hidden');


let timeLeft = 30;

timerSpan.innerText = `${timeLeft}s`;


if(offerTimerInterval) clearInterval(offerTimerInterval);

offerTimerInterval = setInterval(() => {

timeLeft--;

timerSpan.innerText = `${timeLeft}s`;

if(timeLeft <= 0) {

clearInterval(offerTimerInterval);

declineDriverOffer();

}

}, 1000);

}


function declineDriverOffer() {

const offerModal = document.getElementById('driver-offer-modal');

offerModal.classList.add('hidden');

if(offerTimerInterval) clearInterval(offerTimerInterval);

}


function acceptDriverOffer() {

declineDriverOffer();

currentTripPhase = 'APPROACHING';


// Update Client UI

document.getElementById('client-sheet-booking').classList.add('hidden');

document.getElementById('client-sheet-active').classList.remove('hidden');

document.getElementById('dynamic-island-text').innerText = 'Valdis ~3 min away';

// Show Active Approach Track on Map

document.getElementById('svg-active-approach').classList.remove('hidden');


// Update Driver UI

document.getElementById('driver-sheet-idle').classList.add('hidden');

document.getElementById('driver-sheet-lifecycle').classList.remove('hidden');

document.getElementById('btn-driver-action').innerText = 'Mark Arrived at Pickup';

document.getElementById('admin-driver-status-badge').innerText = 'En Route to Pickup';


// Start Vehicle Arrival Animation

simulateVehicleApproach();

}


// Smooth Car Arrival Simulation (RIX Terminal B Access Curve)

function simulateVehicleApproach() {

const car = document.getElementById('svg-driver-car');

const pathPoints = [

{x: 120, y: 90},

{x: 140, y: 95},

{x: 155, y: 105},

{x: 160, y: 110}

];


let progress = 0;

if(carAnimationId) cancelAnimationFrame(carAnimationId);


function animateApproach() {

progress += 0.0025; // ~8-10 second smooth driving pace

if (progress > 1) progress = 1;


// Interpolate along path

const idx = Math.min(Math.floor(progress * (pathPoints.length - 1)), pathPoints.length - 2);

const subProgress = (progress * (pathPoints.length - 1)) - idx;


const p1 = pathPoints[idx];

const p2 = pathPoints[idx + 1];


const curX = p1.x + (p2.x - p1.x) * subProgress;

const curY = p1.y + (p2.y - p1.y) * subProgress;


// Tangent Heading Rotation

const angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) * (180 / Math.PI) + 90;


car.setAttribute('transform', `translate(${curX}, ${curY}) rotate(${angle})`);


// Telemetry Countdown

const distKm = (1.8 * (1 - progress)).toFixed(1);

document.getElementById('driver-pickup-distance').innerText = `${distKm} km`;

const speed = Math.round(48 * (1 - Math.pow(progress, 2)));

document.getElementById('driver-speedometer').innerText = speed;


if (progress < 1) {

carAnimationId = requestAnimationFrame(animateApproach);

} else {

// Arrival Reached

currentTripPhase = 'ARRIVED';

document.getElementById('client-status-badge').innerText = 'Valdis Arrived at Door 3';

document.getElementById('client-eta-heading').innerText = 'Driver Waiting at Curb';

document.getElementById('dynamic-island-text').innerText = 'Valdis Arrived!';

document.getElementById('driver-pickup-distance').innerText = '0.0 km (At Client)';

document.getElementById('btn-driver-action').innerText = 'Passenger Onboard • Start Ride';

}

}


carAnimationId = requestAnimationFrame(animateApproach);

}


// Driver Action Button Transitions

function advanceDriverTripPhase() {

if (currentTripPhase === 'ARRIVED') {

currentTripPhase = 'IN_TRANSIT';

document.getElementById('client-status-badge').innerText = 'Trip in Progress ➔ Vecrīga';

document.getElementById('client-eta-heading').innerText = 'Crossing Akmens Tilts';

document.getElementById('dynamic-island-text').innerText = 'Trip to Vecrīga';

document.getElementById('svg-active-approach').classList.add('hidden');

document.getElementById('svg-active-route').classList.remove('hidden');


document.getElementById('btn-driver-action').innerText = 'Complete Ride & Settle';

simulateVehicleTransit();

} else if (currentTripPhase === 'IN_TRANSIT') {

currentTripPhase = 'COMPLETED';

document.getElementById('client-sheet-active').classList.add('hidden');

document.getElementById('client-sheet-rating').classList.remove('hidden');

document.getElementById('dynamic-island-text').innerText = 'Trip Completed';

// Reset Driver to Idle

document.getElementById('driver-sheet-lifecycle').classList.add('hidden');

document.getElementById('driver-sheet-idle').classList.remove('hidden');

}

}


// Vehicle In-Transit Simulation to Old Town

function simulateVehicleTransit() {

const car = document.getElementById('svg-driver-car');

const routePoints = [

{x: 160, y: 110},

{x: 180, y: 120},

{x: 210, y: 215}, // Approach to Akmens Tilts

{x: 250, y: 295}, // Bridge Crossing

{x: 310, y: 330} // Dome Square

];


let progress = 0;

if(carAnimationId) cancelAnimationFrame(carAnimationId);


function animateTransit() {

progress += 0.0018;

if (progress > 1) progress = 1;


const idx = Math.min(Math.floor(progress * (routePoints.length - 1)), routePoints.length - 2);

const subProgress = (progress * (routePoints.length - 1)) - idx;


const p1 = routePoints[idx];

const p2 = routePoints[idx + 1];


const curX = p1.x + (p2.x - p1.x) * subProgress;

const curY = p1.y + (p2.y - p1.y) * subProgress;


const angle = Math.atan2(p2.y - p1.y, p2.x - p1.x) * (180 / Math.PI) + 90;


car.setAttribute('transform', `translate(${curX}, ${curY}) rotate(${angle})`);


const speed = Math.round(52 * Math.sin(progress * Math.PI));

document.getElementById('driver-speedometer').innerText = speed;


if (progress < 1) {

carAnimationId = requestAnimationFrame(animateTransit);

} else {

document.getElementById('driver-speedometer').innerText = 0;

}

}


carAnimationId = requestAnimationFrame(animateTransit);

}


// Tip Selector

function selectTip(amount) {

selectedTipAmount = amount;

document.querySelectorAll('.tip-btn').forEach(btn => {

btn.classList.remove('border-emerald-500', 'bg-emerald-500/20', 'text-emerald-300');

btn.classList.add('border-slate-700', 'bg-slate-800/80', 'text-slate-300');

});


event.currentTarget.classList.add('border-emerald-500', 'bg-emerald-500/20', 'text-emerald-300');

event.currentTarget.classList.remove('border-slate-700', 'bg-slate-800/80', 'text-slate-300');


const total = (baseFare + selectedTipAmount).toFixed(2);

document.getElementById('final-tip-total').innerText = `€${total}`;

}


// Reset Flow

function resetTripFlow() {

currentTripPhase = 'IDLE';

document.getElementById('client-sheet-rating').classList.add('hidden');

document.getElementById('client-sheet-booking').classList.remove('hidden');

document.getElementById('dynamic-island-text').innerText = 'taxclub • RIX Ready';

document.getElementById('svg-active-route').classList.add('hidden');

// Reset Car to Airport

const car = document.getElementById('svg-driver-car');

car.setAttribute('transform', 'translate(120, 90) rotate(45)');

}


function toggleDriverEarningsDrawer() {

switchAdminTab('ledger');

switchView('admin');

}

</script>

</body>

</html>