273 lines
17 KiB
HTML
273 lines
17 KiB
HTML
<!-- Route Preview - Tripz -->
|
|
<!DOCTYPE html>
|
|
|
|
<html dir="rtl" lang="ar"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Route Preview - مسار</title>
|
|
<!-- Material Symbols -->
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<!-- IBM Plex Sans Arabic -->
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"/>
|
|
<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 Configuration -->
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"background": "#f9f9ff",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"primary-container": "#1a73e8",
|
|
"warning": "#FBBC04",
|
|
"on-primary-container": "#ffffff",
|
|
"inverse-surface": "#2d3038",
|
|
"on-error": "#ffffff",
|
|
"outline-variant": "#c1c6d6",
|
|
"on-tertiary-container": "#0e0200",
|
|
"info": "#4285F4",
|
|
"surface-variant": "#e0e2ec",
|
|
"surface-container-low": "#f2f3fd",
|
|
"on-primary": "#ffffff",
|
|
"surface-tint": "#005bc0",
|
|
"surface-container": "#ecedf7",
|
|
"error-container": "#ffdad6",
|
|
"danger": "#EA4335",
|
|
"tertiary-container": "#c55500",
|
|
"outline": "#727785",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"on-tertiary-fixed": "#341100",
|
|
"surface": "#f9f9ff",
|
|
"secondary": "#5b5f64",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"surface-bright": "#f9f9ff",
|
|
"surface-container-high": "#e6e8f2",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"secondary-container": "#dde0e6",
|
|
"primary": "#005bbf",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"primary-fixed": "#d8e2ff",
|
|
"on-background": "#191c23",
|
|
"on-primary-fixed": "#001a41",
|
|
"on-surface": "#191c23",
|
|
"on-secondary-container": "#5f6368",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"on-tertiary": "#ffffff",
|
|
"success": "#34A853",
|
|
"error": "#ba1a1a",
|
|
"on-surface-variant": "#414754",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"surface-dim": "#d8d9e3",
|
|
"on-error-container": "#93000a",
|
|
"tertiary": "#9e4300",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"on-secondary": "#ffffff",
|
|
"inverse-primary": "#adc7ff",
|
|
"on-secondary-fixed": "#181c20",
|
|
"surface-container-highest": "#e0e2ec"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"sm": "8px",
|
|
"xs": "4px",
|
|
"xl": "32px",
|
|
"xxl": "48px",
|
|
"md": "12px",
|
|
"lg": "24px",
|
|
"base": "16px"
|
|
},
|
|
"fontFamily": {
|
|
"headline-lg-mobile": ["IBM Plex Sans Arabic"],
|
|
"display": ["IBM Plex Sans Arabic"],
|
|
"body-lg": ["IBM Plex Sans Arabic"],
|
|
"label": ["Inter"],
|
|
"caption": ["IBM Plex Sans Arabic"],
|
|
"body": ["IBM Plex Sans Arabic"],
|
|
"title": ["IBM Plex Sans Arabic"],
|
|
"headline": ["IBM Plex Sans Arabic"]
|
|
},
|
|
"fontSize": {
|
|
"headline-lg-mobile": ["28px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"display": ["32px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"body-lg": ["16px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"label": ["12px", { "lineHeight": "1.2", "fontWeight": "500" }],
|
|
"caption": ["12px", { "lineHeight": "1.2", "fontWeight": "400" }],
|
|
"body": ["14px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"title": ["20px", { "lineHeight": "1.2", "fontWeight": "600" }],
|
|
"headline": ["24px", { "lineHeight": "1.2", "fontWeight": "600" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.hide-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.hide-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
.pulse-dot {
|
|
animation: pulse 2s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0.4); }
|
|
70% { box-shadow: 0 0 0 15px rgba(26, 115, 232, 0); }
|
|
100% { box-shadow: 0 0 0 0 rgba(26, 115, 232, 0); }
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface h-screen w-full overflow-hidden text-on-surface font-body selection:bg-primary-container selection:text-on-primary-container">
|
|
<!-- Map Container -->
|
|
<div class="relative w-full h-full">
|
|
<!-- Simulated Map Background -->
|
|
<div class="absolute inset-0 bg-surface-variant w-full h-full z-0 overflow-hidden">
|
|
<img class="w-full h-full object-cover opacity-70" data-alt="A clean, modern top-down street map view showing a complex city grid with major arterial roads. The map uses a light, muted color palette with soft grays and pale blues to represent streets and water bodies, avoiding visual clutter to serve as a background for a ride-hailing interface. The lighting is flat and ambient, perfectly suited for a functional UI canvas." data-location="Amman" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC28L1qSjPvjNOpqtZMQORJipPHnOzgWRNrelbWggTbg9fS0K0xgqnP1EpV9blmgI6rkvwxdwO9kxjNCFcGJ6-MNyZ3H75suNXGGIAns_QYAE5_243eBOSXgzZMLURNaNse4smiTu5rGzQbuLIFu7_wi8sqSvQVCDAhfR04lEWkjf9aJKbA88sO8v8hCNC3Mm3IppAMx5tMAwmC9h8ZTN0JORJUYHL3UeONLrZcfGwB4g87RtYfSTsbn1mjug5PyZMhKHCQGTq-M0o"/>
|
|
<!-- Simulated Route Polyline (SVG for crispness) -->
|
|
<svg class="absolute inset-0 w-full h-full z-10 pointer-events-none" preserveaspectratio="none" viewbox="0 0 100 100">
|
|
<path class="drop-shadow-md" d="M20,80 Q40,50 60,70 T80,30" fill="none" stroke="#1A73E8" stroke-linecap="round" stroke-linejoin="round" stroke-width="0.8"></path>
|
|
</svg>
|
|
<!-- Origin Marker (Blue Dot with Pulse) -->
|
|
<div class="absolute z-20 flex items-center justify-center" style="bottom: 20%; right: 20%;">
|
|
<div class="w-4 h-4 bg-primary-container rounded-full border-2 border-white pulse-dot shadow-sm"></div>
|
|
</div>
|
|
<!-- Stop Marker 1 -->
|
|
<div class="absolute z-20 flex flex-col items-center" style="bottom: 40%; right: 45%;">
|
|
<div class="w-6 h-6 bg-surface text-on-surface text-[10px] font-bold rounded-full flex items-center justify-center border border-outline shadow-sm">1</div>
|
|
</div>
|
|
<!-- Stop Marker 2 -->
|
|
<div class="absolute z-20 flex flex-col items-center" style="bottom: 30%; right: 65%;">
|
|
<div class="w-6 h-6 bg-surface text-on-surface text-[10px] font-bold rounded-full flex items-center justify-center border border-outline shadow-sm">2</div>
|
|
</div>
|
|
<!-- Destination Marker (Red Pin) -->
|
|
<div class="absolute z-20 flex flex-col items-center -translate-y-full" style="top: 30%; left: 20%;">
|
|
<span class="material-symbols-outlined text-danger text-[32px] drop-shadow-md" style="font-variation-settings: 'FILL' 1;">location_on</span>
|
|
<div class="w-1.5 h-1.5 bg-danger/30 rounded-full mt-[-6px]"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Top Controls (Back Button & Safety) -->
|
|
<div class="absolute top-0 left-0 w-full p-base z-30 flex justify-between items-start pt-safe">
|
|
<button class="w-10 h-10 bg-surface rounded-full shadow-[0_1px_3px_rgba(0,0,0,0.12)] flex items-center justify-center text-on-surface active:scale-95 transition-transform">
|
|
<span class="material-symbols-outlined">arrow_forward</span>
|
|
</button>
|
|
<button class="h-10 px-md bg-surface rounded-full shadow-[0_1px_3px_rgba(0,0,0,0.12)] flex items-center gap-xs text-primary font-label text-label active:scale-95 transition-transform">
|
|
<span class="material-symbols-outlined text-[20px]">shield</span>
|
|
مركز الأمان
|
|
</button>
|
|
</div>
|
|
<!-- Bottom Sheet -->
|
|
<div class="absolute bottom-0 w-full bg-surface rounded-t-[24px] shadow-[0_-4px_16px_rgba(0,0,0,0.08)] z-40 flex flex-col pt-sm pb-safe transition-transform duration-300 ease-out">
|
|
<!-- Drag Handle -->
|
|
<div class="w-full flex justify-center mb-md">
|
|
<div class="w-8 h-1 bg-outline-variant rounded-full"></div>
|
|
</div>
|
|
<!-- Trip Summary Header -->
|
|
<div class="px-base flex justify-between items-center mb-lg">
|
|
<div class="flex flex-col">
|
|
<span class="font-headline text-headline text-on-surface">3.2 كم</span>
|
|
<span class="font-body text-body text-on-surface-variant">المسافة الإجمالية</span>
|
|
</div>
|
|
<div class="w-px h-10 bg-outline-variant/50"></div>
|
|
<div class="flex flex-col items-end">
|
|
<span class="font-headline text-headline text-on-surface">8 دقائق</span>
|
|
<span class="font-body text-body text-on-surface-variant">وقت الوصول المتوقع</span>
|
|
</div>
|
|
</div>
|
|
<!-- Ride Categories (Horizontal Scroll) -->
|
|
<div class="w-full overflow-x-auto hide-scrollbar pb-sm">
|
|
<div class="flex gap-md px-base w-max">
|
|
<!-- Card 1: Economy (Selected) -->
|
|
<button class="relative w-[140px] h-[160px] rounded-xl border-2 border-primary-container bg-surface-container-low p-md flex flex-col items-center justify-between text-right transition-all active:scale-95 shrink-0 overflow-hidden">
|
|
<!-- Selection Indicator -->
|
|
<div class="absolute top-sm right-sm w-5 h-5 bg-primary-container rounded-full flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-white text-[14px] font-bold">check</span>
|
|
</div>
|
|
<div class="w-full flex justify-center mt-sm">
|
|
<img class="w-20 h-auto object-contain" data-alt="A clean, minimalist 3D render of a standard compact car, styled primarily in white with subtle gray accents. The image has a transparent background, ensuring the car stands out sharply against the UI card. The lighting is soft studio lighting, creating smooth highlights on the car's body. The angle is an isometric 3/4 front view, perfectly suited for a modern ride-hailing app." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBYBVnMuMrs79LHZpYBvLW3EeYJEsIvImpS0HUxNYUbXEkw6frd3BBfg_pc2tNiNFMqX2aKEzCTZzwvAvug1k6Yqqtmpez9cer8GW-xSirG_cKUn16NbkePjkUFhsXZeihvR4sBv1mLPmQXr_WPuFg7aPt5mcBZv_8tOzBvtO4t7iKvOg3WkM9ij-eVBTujfFGEKddKhf8a9UXAeYj4_ffdceUfs8cMTjXeD14zrunfZkn7uocyRAQwrRjocOATCcYeTr4HMY-jNPo"/>
|
|
</div>
|
|
<div class="w-full flex flex-col items-start gap-xs mt-auto">
|
|
<div class="flex items-center gap-xs w-full">
|
|
<span class="font-title text-title text-on-surface">توفير</span>
|
|
<span class="material-symbols-outlined text-[16px] text-on-surface-variant mr-auto">person</span>
|
|
<span class="font-label text-label text-on-surface-variant">4</span>
|
|
</div>
|
|
<span class="font-caption text-caption text-success font-medium">وصول خلال 3 د</span>
|
|
<span class="font-body-lg text-body-lg text-on-surface font-semibold">15.00 د.أ</span>
|
|
</div>
|
|
</button>
|
|
<!-- Card 2: Comfort -->
|
|
<button class="relative w-[140px] h-[160px] rounded-xl border border-outline-variant bg-surface p-md flex flex-col items-center justify-between text-right transition-all hover:bg-surface-variant/30 active:scale-95 shrink-0">
|
|
<div class="w-full flex justify-center mt-sm">
|
|
<img class="w-20 h-auto object-contain" data-alt="A sleek, modern 3D render of a mid-size luxury sedan, styled in a metallic dark silver or charcoal grey finish. The car features elegant lines and a premium look, rendered against a transparent background. Studio lighting highlights the polished curves. The viewing angle is an isometric 3/4 front perspective, ideal for representing an upgraded 'Comfort' ride tier in a mobile app." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBRDzZUXQ7tCWdLEP8vokAGXuyH-ADpSoiP6uCu3scX8aJhs0jynlVHesh-AY2TVLG8pilVeSVN5vbyWOeMT3i3QzHq13WtfuZVRAzRijwRwdycPKSwn-Z9-0S1nFpP4ifvZu59zf_alX623-yg8Y_sDfBfvDPWS5AponRAPYVLuNnnkr_sGJC7V7k1CvggP3M_jhUI-lt0QOAIewd4V7aZnvMuRtHFdM493cjJ-wdIwGM07duVQyqOPO8139UIWDyDA1eXwfVv7vo"/>
|
|
</div>
|
|
<div class="w-full flex flex-col items-start gap-xs mt-auto">
|
|
<div class="flex items-center gap-xs w-full">
|
|
<span class="font-title text-title text-on-surface text-[18px]">مريح</span>
|
|
<span class="material-symbols-outlined text-[16px] text-on-surface-variant mr-auto">person</span>
|
|
<span class="font-label text-label text-on-surface-variant">4</span>
|
|
</div>
|
|
<span class="font-caption text-caption text-on-surface-variant">وصول خلال 5 د</span>
|
|
<span class="font-body-lg text-body-lg text-on-surface font-semibold">18.50 د.أ</span>
|
|
</div>
|
|
</button>
|
|
<!-- Card 3: XL -->
|
|
<button class="relative w-[140px] h-[160px] rounded-xl border border-outline-variant bg-surface p-md flex flex-col items-center justify-between text-right transition-all hover:bg-surface-variant/30 active:scale-95 shrink-0">
|
|
<div class="w-full flex justify-center mt-sm">
|
|
<img class="w-20 h-auto object-contain" data-alt="A high-quality 3D render of a large family SUV, styled in a deep navy blue or black finish. The vehicle looks robust and spacious, designed for carrying multiple passengers. The render has a transparent background with bright, even studio lighting that emphasizes the vehicle's size. The angle is a 3/4 isometric view, fitting the visual language of a high-capacity 'XL' ride option." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCUdihiDgePK5z81chNaMhsi9fqZX6gJaG4cBEClppkdfd0L2AjYZu3crVUhEIVIrLw5BzdpSUhEIj3lyij0T-g1PK9gmeerFSW251ynPEl_Dl9h_IrRtFr0Tk54pOT_sV-lwZg4G2CGiMmuMSOOZydYk4lvWYQsD-QP7RKGqK4_4Nk1IRdmYb5eAW-ulp9hHsqsokBiDUfsDaMw44S9nYvD-mSl8EuI8ra3HGrJZMilSCGo2A1lpqaFMDVHldaiCmJOI2ddqC9GsU"/>
|
|
</div>
|
|
<div class="w-full flex flex-col items-start gap-xs mt-auto">
|
|
<div class="flex items-center gap-xs w-full">
|
|
<span class="font-title text-title text-on-surface text-[18px]">عائلي</span>
|
|
<span class="material-symbols-outlined text-[16px] text-on-surface-variant mr-auto">person</span>
|
|
<span class="font-label text-label text-on-surface-variant">6</span>
|
|
</div>
|
|
<span class="font-caption text-caption text-on-surface-variant">وصول خلال 8 د</span>
|
|
<span class="font-body-lg text-body-lg text-on-surface font-semibold">24.00 د.أ</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Payment Method Selector (Minimal) -->
|
|
<div class="px-base py-md flex items-center justify-between border-t border-outline-variant/30 mt-sm">
|
|
<button class="flex items-center gap-sm text-on-surface active:opacity-70 transition-opacity">
|
|
<span class="material-symbols-outlined text-primary text-[24px]">payments</span>
|
|
<span class="font-body text-body">نقداً</span>
|
|
<span class="material-symbols-outlined text-[18px] text-on-surface-variant">expand_more</span>
|
|
</button>
|
|
<button class="flex items-center gap-xs text-primary font-body text-body bg-primary/10 px-md py-xs rounded-full active:bg-primary/20 transition-colors">
|
|
<span class="material-symbols-outlined text-[18px]">local_offer</span>
|
|
الرمز الترويجي
|
|
</button>
|
|
</div>
|
|
<!-- Primary Action Button -->
|
|
<div class="px-base pb-base pt-xs">
|
|
<button class="w-full h-[52px] bg-primary-container text-on-primary-container font-title text-title rounded-xl flex items-center justify-center gap-sm shadow-md active:scale-[0.98] transition-transform">
|
|
اختر الرحلة
|
|
<span class="material-symbols-outlined">arrow_back</span> <!-- Right to Left pointing left -->
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body></html>
|
|
|
|
<!-- Category & Price Selection - Tripz -->
|