<!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>