299 lines
18 KiB
HTML
299 lines
18 KiB
HTML
<!-- During Trip - Map Focused (No Nav) -->
|
|
<!DOCTYPE html>
|
|
|
|
<html class="light" dir="rtl" lang="ar"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" name="viewport"/>
|
|
<title>During Trip - Live Tracking</title>
|
|
<!-- Fonts -->
|
|
<link href="https://fonts.googleapis.com" rel="preconnect"/>
|
|
<link crossorigin="" href="https://fonts.gstatic.com" rel="preconnect"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
<!-- Material Symbols -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<!-- Tailwind Config -->
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"warning": "#FBBC04",
|
|
"surface-tint": "#005bc0",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"on-tertiary": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"success": "#34A853",
|
|
"primary-container": "#1a73e8",
|
|
"inverse-surface": "#2d3038",
|
|
"surface-container": "#ecedf7",
|
|
"primary": "#005bbf",
|
|
"on-tertiary-container": "#0e0200",
|
|
"info": "#4285F4",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"on-error-container": "#93000a",
|
|
"on-error": "#ffffff",
|
|
"secondary-container": "#dde0e6",
|
|
"on-primary-container": "#ffffff",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"surface-container-low": "#f2f3fd",
|
|
"surface-container-high": "#e6e8f2",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-fixed": "#181c20",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"on-background": "#191c23",
|
|
"surface": "#f9f9ff",
|
|
"on-secondary-container": "#5f6368",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"danger": "#EA4335",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"on-tertiary-fixed": "#341100",
|
|
"on-primary": "#ffffff",
|
|
"on-primary-fixed": "#001a41",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"secondary": "#5b5f64",
|
|
"surface-dim": "#d8d9e3",
|
|
"outline": "#727785",
|
|
"on-surface-variant": "#414754",
|
|
"outline-variant": "#c1c6d6",
|
|
"tertiary-container": "#c55500",
|
|
"on-secondary": "#ffffff",
|
|
"inverse-primary": "#adc7ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-surface": "#191c23",
|
|
"primary-fixed": "#d8e2ff",
|
|
"surface-variant": "#e0e2ec",
|
|
"background": "#f9f9ff",
|
|
"tertiary": "#9e4300",
|
|
"surface-bright": "#f9f9ff"
|
|
},
|
|
borderRadius: {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
spacing: {
|
|
"xxl": "48px",
|
|
"xl": "32px",
|
|
"sm": "8px",
|
|
"md": "12px",
|
|
"base": "16px",
|
|
"xs": "4px",
|
|
"lg": "24px"
|
|
},
|
|
fontFamily: {
|
|
"body": ["IBM Plex Sans Arabic"],
|
|
"caption": ["IBM Plex Sans Arabic"],
|
|
"body-lg": ["IBM Plex Sans Arabic"],
|
|
"label": ["Inter"],
|
|
"headline": ["IBM Plex Sans Arabic"],
|
|
"display": ["IBM Plex Sans Arabic"],
|
|
"title": ["IBM Plex Sans Arabic"],
|
|
"headline-lg-mobile": ["IBM Plex Sans Arabic"]
|
|
},
|
|
fontSize: {
|
|
"body": ["14px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"caption": ["12px", { "lineHeight": "1.2", "fontWeight": "400" }],
|
|
"body-lg": ["16px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"label": ["12px", { "lineHeight": "1.2", "fontWeight": "500" }],
|
|
"headline": ["24px", { "lineHeight": "1.2", "fontWeight": "600" }],
|
|
"display": ["32px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"title": ["20px", { "lineHeight": "1.2", "fontWeight": "600" }],
|
|
"headline-lg-mobile": ["28px", { "lineHeight": "1.2", "fontWeight": "700" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
/* Base Setup */
|
|
body {
|
|
-webkit-tap-highlight-color: transparent;
|
|
touch-action: pan-y;
|
|
}
|
|
/* Safe Area Utilities */
|
|
.pt-safe { padding-top: env(safe-area-inset-top); }
|
|
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
|
|
.mt-safe { margin-top: env(safe-area-inset-top); }
|
|
.mb-safe { margin-bottom: env(safe-area-inset-bottom); }
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="font-body text-body bg-surface text-on-surface m-0 p-0 overflow-hidden w-full h-screen relative">
|
|
<!-- 1. Map Canvas Layer -->
|
|
<div class="absolute inset-0 z-0">
|
|
<!-- Map Background Image Placeholder -->
|
|
<div class="w-full h-full bg-cover bg-center" data-alt="A clean, modern, high-definition top-down digital map interface for a ride-hailing app, centered on a dense middle eastern city grid. Light mode aesthetic with soft pastel tones, pale gray roads, and subtle green park areas. No labels or text, highly stylized and minimal to serve as a clean UI background." style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDiWKICl-n7zIzHpCY_oowJ9cKbQ6rjPme9xruzdzoOHjCMcmdEMb7xTPjha5qfkWnfl2vT8NjVyTpJC8n5hALwDnAEKaODBWsc91QLdxj_3NJxViAsEiaXTQuOI8UexXO3mrPoEABCy7HIiVtLemaOy-6Vqu2cW9GoMBP_WdpyeRE4uGHfaeridVk_ag3JEAeEd6ayYEQ5BYbstcOjNwifLS8AFrUqMdIZhGwccBOPc8Oo1pJJbIKqbH4a-y841A4TxH7AT-NsYUs')"></div>
|
|
<!-- Simulated Route Overlay (SVG Polyline) -->
|
|
<svg class="absolute inset-0 w-full h-full pointer-events-none" preserveaspectratio="none" viewbox="0 0 100 100">
|
|
<path class="text-primary drop-shadow-[0_2px_4px_rgba(0,91,191,0.3)]" d="M 60,85 Q 65,55 45,45 T 30,15" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8"></path>
|
|
</svg>
|
|
<!-- Dynamic Car Icon on Route -->
|
|
<div class="absolute top-[48%] right-[44%] transform translate-x-1/2 -translate-y-1/2 rotate-[-25deg] z-10 transition-all duration-1000 ease-linear">
|
|
<div class="bg-surface shadow-[0_1px_3px_rgba(0,0,0,0.12),_0_1px_2px_rgba(0,0,0,0.08)] rounded-full p-1.5 flex items-center justify-center border border-surface-variant">
|
|
<span class="material-symbols-outlined text-primary text-[24px]" style="font-variation-settings: 'FILL' 1;">directions_car</span>
|
|
</div>
|
|
</div>
|
|
<!-- Destination Marker -->
|
|
<div class="absolute top-[15%] right-[70%] transform translate-x-1/2 -translate-y-full z-10">
|
|
<span class="material-symbols-outlined text-danger text-[32px] drop-shadow-md" style="font-variation-settings: 'FILL' 1;">location_on</span>
|
|
</div>
|
|
<!-- Pulsing User Location (Origin) -->
|
|
<div class="absolute bottom-[15%] right-[40%] transform translate-x-1/2 translate-y-1/2 z-10">
|
|
<div class="relative w-5 h-5">
|
|
<div class="absolute inset-0 bg-primary opacity-30 rounded-full animate-ping"></div>
|
|
<div class="relative w-5 h-5 bg-primary rounded-full border-[3px] border-surface shadow-sm"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 2. Floating Top Controls (Safe Area) -->
|
|
<div class="absolute top-0 left-0 right-0 px-base pt-safe mt-base flex justify-between items-start z-20 pointer-events-none">
|
|
<!-- Security Shield (Trailing Edge in RTL = Left Side) -->
|
|
<button class="pointer-events-auto bg-surface/90 backdrop-blur-md w-12 h-12 rounded-full shadow-[0_1px_3px_rgba(0,0,0,0.12),_0_1px_2px_rgba(0,0,0,0.08)] flex items-center justify-center text-on-surface hover:bg-surface-container-low transition-colors active:scale-95 border border-surface-container-highest">
|
|
<span class="material-symbols-outlined">shield</span>
|
|
</button>
|
|
</div>
|
|
<!-- 3. Floating Re-center Button -->
|
|
<!-- Positioned precisely above the bottom sheet height -->
|
|
<div class="absolute right-base bottom-[420px] z-20 transition-transform duration-300 ease-out" id="recenterBtn">
|
|
<button class="bg-surface w-12 h-12 rounded-full shadow-[0_1px_3px_rgba(0,0,0,0.12),_0_1px_2px_rgba(0,0,0,0.08)] flex items-center justify-center text-on-surface-variant hover:bg-surface-container-low hover:text-primary transition-colors active:scale-95 border border-surface-container-highest">
|
|
<span class="material-symbols-outlined">my_location</span>
|
|
</button>
|
|
</div>
|
|
<!-- 4. Bottom Sheet (Trip Details) -->
|
|
<div class="absolute bottom-0 left-0 w-full bg-surface rounded-t-[24px] shadow-[0_-4px_24px_rgba(0,0,0,0.08)] z-30 pb-safe border-t border-surface-container-highest overflow-y-auto max-h-[85vh]" id="bottomSheet">
|
|
<!-- Drag Handle Indicator -->
|
|
<div class="w-full flex justify-center pt-3 pb-2 sticky top-0 bg-surface z-10">
|
|
<div class="w-8 h-1 bg-outline-variant/60 rounded-full"></div>
|
|
</div>
|
|
<div class="px-base pb-base flex flex-col gap-md mt-sm">
|
|
<!-- Status, ETA & Progress Bar -->
|
|
<div class="border-b border-surface-variant pb-md">
|
|
<div class="flex items-center justify-between pb-sm">
|
|
<div class="flex items-center gap-md">
|
|
<!-- Icon Container -->
|
|
<div class="w-10 h-10 rounded-full bg-primary-container/20 flex items-center justify-center text-primary relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-primary opacity-10 animate-pulse"></div>
|
|
<span class="material-symbols-outlined relative z-10 text-[20px]" style="font-variation-settings: 'FILL' 1;">route</span>
|
|
</div>
|
|
<!-- Text Info -->
|
|
<div>
|
|
<h2 class="font-title text-[18px] text-on-surface tracking-tight">في الطريق إلى وجهتك</h2>
|
|
<div class="flex items-center gap-1 mt-0.5 text-on-surface-variant">
|
|
<p class="font-body text-caption">الوصول المتوقع:</p>
|
|
<span class="font-body text-caption text-primary font-medium">12:45 م</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Prominent ETA Digits -->
|
|
<div class="text-left flex flex-col items-center justify-center bg-surface-container-lowest border border-surface-variant rounded-lg px-3 py-1 shadow-sm">
|
|
<span class="font-display text-[24px] font-bold text-primary leading-none">12</span>
|
|
<span class="font-label text-[10px] text-on-surface-variant mt-0.5">دقيقة</span>
|
|
</div>
|
|
</div>
|
|
<!-- Progress Bar -->
|
|
<div class="w-full bg-surface-variant rounded-full h-2 mt-1">
|
|
<div class="bg-primary h-2 rounded-full shadow-[0_0_8px_rgba(0,91,191,0.5)]" style="width: 65%"></div>
|
|
</div>
|
|
<div class="flex justify-between mt-1 px-1">
|
|
<span class="text-[10px] text-on-surface-variant">نقطة الانطلاق</span>
|
|
<span class="text-[10px] text-on-surface-variant">الوجهة</span>
|
|
</div>
|
|
</div>
|
|
<!-- Driver Identity Card -->
|
|
<div class="flex items-center justify-between bg-surface-container-low p-md rounded-xl border border-surface-variant/50">
|
|
<div class="flex items-center gap-md">
|
|
<!-- Avatar with Badge -->
|
|
<div class="relative">
|
|
<img class="w-14 h-14 rounded-full object-cover border-2 border-surface shadow-sm" data-alt="A professional, well-lit headshot of a middle-eastern male ride-hailing driver in his 30s. He has a neat beard, is smiling warmly, and wears a clean, casual polo shirt. The background is a soft, out-of-focus light gray. High resolution, realistic photography." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD4jIK-1Fl3KX9ALHm_XhfmYRDrcSjMIxWnDwaEoLt4DN6wfgii2Ded9OSH2PqJi4zxNjQ6KR0Zn9P4NXZn8i62gIkaKkuyl4KOOxboDCfO3ctcBClB680mg9FTpqFuA4XnJd0spnmdoe-skvjFOyCmj2AhglevN3Y30-10eMAoTBU6fzuNab4IKKpqi1mLlcnLXgHOH4k0uYLkmo3kRf9nlcu-IPD646uZoXd5DNbhD_aGvgydvxJRG79dXv8FZMhv7fslaU7pHfc"/>
|
|
<div class="absolute -bottom-1 -right-1 bg-surface rounded-full p-[2px] shadow-sm">
|
|
<div class="bg-warning text-surface-container-lowest flex items-center gap-[2px] px-1.5 py-0.5 rounded-full">
|
|
<span class="font-label text-[10px] font-bold leading-none mt-[1px]">4.9</span>
|
|
<span class="material-symbols-outlined text-[10px] leading-none" style="font-variation-settings: 'FILL' 1;">star</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Driver Details -->
|
|
<div>
|
|
<h3 class="font-title text-[18px] font-semibold text-on-surface">محمد عبدالله</h3>
|
|
<p class="font-body text-body text-on-surface-variant mt-0.5">تويوتا كامري • أبيض</p>
|
|
<!-- License Plate -->
|
|
<div class="mt-1.5 bg-surface border border-outline-variant/60 rounded px-2 py-0.5 inline-flex items-center shadow-[inset_0_1px_2px_rgba(0,0,0,0.05)]">
|
|
<span class="font-label text-label tracking-widest text-on-surface font-medium">أ ب ج ١٢٣٤</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Quick Contact Actions -->
|
|
<div class="flex gap-sm">
|
|
<button class="w-10 h-10 rounded-full bg-surface border border-surface-variant flex items-center justify-center text-primary hover:bg-surface-container transition-colors active:scale-95 shadow-sm">
|
|
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">chat</span>
|
|
</button>
|
|
<button class="w-10 h-10 rounded-full bg-surface border border-surface-variant flex items-center justify-center text-primary hover:bg-surface-container transition-colors active:scale-95 shadow-sm">
|
|
<span class="material-symbols-outlined text-[20px]" style="font-variation-settings: 'FILL' 1;">call</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Safety Hub Section -->
|
|
<div class="mt-2 border-t border-surface-variant pt-md">
|
|
<h3 class="font-title text-[16px] font-semibold text-on-surface mb-3 px-1">مركز السلامة</h3>
|
|
<div class="grid grid-cols-4 gap-2">
|
|
<button class="flex flex-col items-center gap-1.5 bg-surface-container-low p-2 rounded-xl border border-surface-variant/50 hover:bg-surface-container transition-colors active:scale-95">
|
|
<div class="w-10 h-10 rounded-full bg-surface flex items-center justify-center text-primary shadow-sm">
|
|
<span class="material-symbols-outlined text-[20px]">mic</span>
|
|
</div>
|
|
<span class="font-label text-[10px] text-on-surface-variant text-center leading-tight">تسجيل صوت</span>
|
|
</button>
|
|
<button class="flex flex-col items-center gap-1.5 bg-surface-container-low p-2 rounded-xl border border-surface-variant/50 hover:bg-surface-container transition-colors active:scale-95">
|
|
<div class="w-10 h-10 rounded-full bg-surface flex items-center justify-center text-primary shadow-sm">
|
|
<span class="material-symbols-outlined text-[20px]">groups</span>
|
|
</div>
|
|
<span class="font-label text-[10px] text-on-surface-variant text-center leading-tight">مشاركة العائلة</span>
|
|
</button>
|
|
<button class="flex flex-col items-center gap-1.5 bg-surface-container-low p-2 rounded-xl border border-surface-variant/50 hover:bg-surface-container transition-colors active:scale-95">
|
|
<div class="w-10 h-10 rounded-full bg-surface flex items-center justify-center text-warning shadow-sm">
|
|
<span class="material-symbols-outlined text-[20px]">flag</span>
|
|
</div>
|
|
<span class="font-label text-[10px] text-on-surface-variant text-center leading-tight">إبلاغ عن مشكلة</span>
|
|
</button>
|
|
<button class="flex flex-col items-center gap-1.5 bg-error-container p-2 rounded-xl border border-error/20 hover:bg-error-container/80 transition-colors active:scale-95">
|
|
<div class="w-10 h-10 rounded-full bg-error flex items-center justify-center text-on-error shadow-sm animate-pulse">
|
|
<span class="material-symbols-outlined text-[20px]">gpp_maybe</span>
|
|
</div>
|
|
<span class="font-label text-[10px] font-bold text-error text-center leading-tight">طوارئ SOS</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Secondary Actions -->
|
|
<div class="flex gap-sm mt-2">
|
|
<button class="flex-1 h-11 rounded-lg bg-surface border border-surface-variant flex items-center justify-center gap-2 text-on-surface hover:bg-surface-container-low transition-colors font-label text-label shadow-sm">
|
|
<span class="material-symbols-outlined text-[18px]">edit_location_alt</span>
|
|
تغيير الوجهة
|
|
</button>
|
|
<button class="flex-1 h-11 rounded-lg bg-surface border border-surface-variant flex items-center justify-center gap-2 text-on-surface hover:bg-surface-container-low transition-colors font-label text-label shadow-sm">
|
|
<span class="material-symbols-outlined text-[18px]">support_agent</span>
|
|
الدعم الفني
|
|
</button>
|
|
</div>
|
|
<!-- Primary Action -->
|
|
<button class="w-full h-[52px] rounded-xl bg-primary text-on-primary font-title text-title flex items-center justify-center gap-sm hover:bg-on-primary-fixed-variant transition-colors active:scale-[0.98] shadow-[0_2px_4px_rgba(0,91,191,0.2)]">
|
|
<span class="material-symbols-outlined">share</span>
|
|
مشاركة الرحلة
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</body></html>
|
|
|
|
<!-- Rating Screen - Tripz -->
|