342 lines
16 KiB
HTML
342 lines
16 KiB
HTML
<!-- Category & Price Selection - Tripz -->
|
|
<!DOCTYPE html>
|
|
|
|
<html class="light" dir="rtl" lang="ar"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Tripz - Ride Category Selection</title>
|
|
<!-- 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>
|
|
<!-- Google 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"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"tertiary-container": "#c55500",
|
|
"outline-variant": "#c1c6d6",
|
|
"surface-dim": "#d8d9e3",
|
|
"outline": "#727785",
|
|
"on-surface-variant": "#414754",
|
|
"on-secondary": "#ffffff",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"on-primary-fixed": "#001a41",
|
|
"secondary": "#5b5f64",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"danger": "#EA4335",
|
|
"on-tertiary-fixed": "#341100",
|
|
"on-primary": "#ffffff",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"surface-bright": "#f9f9ff",
|
|
"tertiary": "#9e4300",
|
|
"primary-fixed": "#d8e2ff",
|
|
"background": "#f9f9ff",
|
|
"surface-variant": "#e0e2ec",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-surface": "#191c23",
|
|
"inverse-primary": "#adc7ff",
|
|
"on-tertiary-container": "#0e0200",
|
|
"primary": "#005bbf",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"info": "#4285F4",
|
|
"primary-container": "#1a73e8",
|
|
"inverse-surface": "#2d3038",
|
|
"surface-container": "#ecedf7",
|
|
"error": "#ba1a1a",
|
|
"on-tertiary": "#ffffff",
|
|
"success": "#34A853",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"warning": "#FBBC04",
|
|
"surface-tint": "#005bc0",
|
|
"surface": "#f9f9ff",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"on-secondary-container": "#5f6368",
|
|
"on-secondary-fixed": "#181c20",
|
|
"on-background": "#191c23",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"surface-container-low": "#f2f3fd",
|
|
"surface-container-high": "#e6e8f2",
|
|
"error-container": "#ffdad6",
|
|
"on-error-container": "#93000a",
|
|
"on-error": "#ffffff",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"secondary-container": "#dde0e6",
|
|
"on-primary-container": "#ffffff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xs": "4px",
|
|
"lg": "24px",
|
|
"xxl": "48px",
|
|
"xl": "32px",
|
|
"sm": "8px",
|
|
"md": "12px",
|
|
"base": "16px"
|
|
},
|
|
"fontFamily": {
|
|
"caption": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"body": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"title": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"headline-lg-mobile": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"display": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"label": [
|
|
"Inter"
|
|
],
|
|
"headline": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"body-lg": [
|
|
"IBM Plex Sans Arabic"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"caption": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"body": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"title": [
|
|
"20px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"headline-lg-mobile": [
|
|
"28px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"display": [
|
|
"32px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"label": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"headline": [
|
|
"24px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"body-lg": [
|
|
"16px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "400"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
/* Hide scrollbar for category cards */
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.no-scrollbar {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body h-screen flex flex-col md:hidden">
|
|
<!-- Top Navigation Placeholder (Hidden for flow, but contextually present) -->
|
|
<!-- TopAppBar -->
|
|
<header class="w-full top-0 sticky bg-surface dark:bg-surface-dim flex flex-row-reverse justify-between items-center px-base h-16 w-full z-10">
|
|
<span class="material-symbols-outlined text-on-surface-variant" style="font-variation-settings: 'FILL' 0;">arrow_forward</span>
|
|
<h1 class="font-headline text-headline-md font-bold text-primary dark:text-primary-fixed-dim">مسار</h1>
|
|
<div class="w-6 h-6"></div> <!-- Spacer for flex balance -->
|
|
</header>
|
|
<!-- Main Map Background (Simulated) -->
|
|
<div class="flex-grow bg-surface-container relative overflow-hidden" data-location="Riyadh" style="">
|
|
<img class="absolute inset-0 w-full h-full object-cover opacity-50" data-alt="A detailed overhead view of a modern city map in a digital interface, showing light gray roads on a pale off-white background with subtle green park areas. A distinct blue route line traces a path between two points. The map style is clean, minimal, and optimized for a light-mode ride-hailing app, reflecting a modern Middle Eastern metropolis aesthetic." src="https://lh3.googleusercontent.com/aida-public/AB6AXuD8VZoIB5UDrVJ5oSn6dQKcVY2alBaCxipP_ZHJ8fnrbeVK5BsDEr_3C-ohyuw-xMNHIwGk9UBbiy4JtMl0ETEM6IdPhR1lwZcvNcCmZ7-MHAkg8qlaAbR5GzeBsVMWyTLPauDeXHvkH0vwCTIlNSWcfBh82hHPenL4DwAE_rHlm2sQWuap57XKyVpH5E7G36F4AWkJHeLYMrLpxkXs5n9A8fRdkxl2HQPCq61fA1DiJq47lQNFnYs1bWpU0P0k2jBkSWdIgebZ-Io"/>
|
|
<!-- Map Pin (Simulated) -->
|
|
<div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
|
|
<div class="w-4 h-4 bg-primary rounded-full border-2 border-white shadow-[0_0_0_4px_rgba(0,91,191,0.2)] animate-pulse"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Sheet / Category Selection Panel -->
|
|
<!-- Snap to full for category selection -->
|
|
<div class="bg-surface-container-lowest w-full rounded-t-xl shadow-[0_-2px_10px_rgba(0,0,0,0.1)] z-20 flex flex-col max-h-[751px]">
|
|
<!-- Handle -->
|
|
<div class="w-full flex justify-center pt-md pb-xs">
|
|
<div class="w-8 h-1 bg-outline-variant rounded-full"></div>
|
|
</div>
|
|
<div class="overflow-y-auto px-base pb-base flex-grow">
|
|
<!-- Route Summary -->
|
|
<div class="bg-surface-container rounded-lg p-md mb-lg border border-surface-variant flex items-center justify-between">
|
|
<div class="flex items-start gap-md w-full">
|
|
<!-- Route Timeline graphic -->
|
|
<div class="flex flex-col items-center mt-1">
|
|
<div class="w-2 h-2 rounded-full border-2 border-primary bg-surface-container-lowest"></div>
|
|
<div class="w-px h-8 bg-outline-variant my-1"></div>
|
|
<div class="w-2 h-2 rounded-full bg-primary"></div>
|
|
</div>
|
|
<div class="flex-grow">
|
|
<div class="flex justify-between items-center mb-sm">
|
|
<p class="font-body text-body text-on-surface truncate pr-2">شارع العليا، الرياض</p>
|
|
<span class="font-label text-label text-on-surface-variant shrink-0">8 min</span>
|
|
</div>
|
|
<div class="w-full h-px bg-outline-variant/30 mb-sm"></div>
|
|
<div class="flex justify-between items-center">
|
|
<p class="font-body text-body text-on-surface font-medium truncate pr-2">مطار الملك خالد الدولي</p>
|
|
<span class="font-label text-label text-on-surface-variant shrink-0">3.2 km</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Category Title -->
|
|
<h2 class="font-title text-title text-on-background mb-md">اختر فئة الرحلة</h2>
|
|
<!-- Horizontal Scrollable Categories -->
|
|
<div class="flex overflow-x-auto gap-md pb-sm mb-lg no-scrollbar snap-x rtl:space-x-reverse -mx-base px-base">
|
|
<!-- Economy Card (Selected) -->
|
|
<button class="snap-start shrink-0 w-32 bg-primary-fixed/20 border-2 border-primary rounded-lg p-md flex flex-col items-center relative transition-colors">
|
|
<div class="absolute top-2 right-2 bg-primary text-on-primary rounded-full p-[2px]">
|
|
<span class="material-symbols-outlined text-[12px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
|
</div>
|
|
<div class="h-12 w-full flex items-center justify-center mb-sm">
|
|
<!-- Simulated small car icon -->
|
|
<span class="material-symbols-outlined text-4xl text-primary">directions_car</span>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3 class="font-title text-body font-semibold text-on-primary-fixed">Economy</h3>
|
|
<div class="flex items-center justify-center gap-1 text-on-surface-variant mt-1 mb-2">
|
|
<span class="font-label text-label">4</span>
|
|
<span class="material-symbols-outlined text-[14px]">person</span>
|
|
</div>
|
|
<p class="font-headline text-headline-md font-bold text-on-primary-fixed">$5.00</p>
|
|
</div>
|
|
</button>
|
|
<!-- Comfort Card -->
|
|
<button class="snap-start shrink-0 w-32 bg-surface-container-lowest border border-outline-variant rounded-lg p-md flex flex-col items-center hover:bg-surface transition-colors">
|
|
<div class="h-12 w-full flex items-center justify-center mb-sm">
|
|
<!-- Simulated larger car icon -->
|
|
<span class="material-symbols-outlined text-4xl text-on-surface-variant">airport_shuttle</span>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3 class="font-title text-body font-semibold text-on-surface">Comfort</h3>
|
|
<div class="flex items-center justify-center gap-1 text-on-surface-variant mt-1 mb-2">
|
|
<span class="font-label text-label">4</span>
|
|
<span class="material-symbols-outlined text-[14px]">person</span>
|
|
</div>
|
|
<p class="font-headline text-headline-md font-bold text-on-surface">$7.50</p>
|
|
</div>
|
|
</button>
|
|
<!-- XL Card -->
|
|
<button class="snap-start shrink-0 w-32 bg-surface-container-lowest border border-outline-variant rounded-lg p-md flex flex-col items-center hover:bg-surface transition-colors">
|
|
<div class="h-12 w-full flex items-center justify-center mb-sm">
|
|
<!-- Simulated SUV car icon -->
|
|
<span class="material-symbols-outlined text-4xl text-on-surface-variant">commute</span>
|
|
</div>
|
|
<div class="text-center">
|
|
<h3 class="font-title text-body font-semibold text-on-surface">XL</h3>
|
|
<div class="flex items-center justify-center gap-1 text-on-surface-variant mt-1 mb-2">
|
|
<span class="font-label text-label">6</span>
|
|
<span class="material-symbols-outlined text-[14px]">person</span>
|
|
</div>
|
|
<p class="font-headline text-headline-md font-bold text-on-surface">$12.00</p>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
<!-- Options Section -->
|
|
<div class="space-y-sm mb-lg">
|
|
<!-- Payment Method -->
|
|
<button class="w-full flex items-center justify-between p-md bg-surface-container-lowest border border-outline-variant rounded-lg hover:bg-surface transition-colors">
|
|
<div class="flex items-center gap-md">
|
|
<div class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined text-[20px]">account_balance_wallet</span>
|
|
</div>
|
|
<div class="text-right">
|
|
<p class="font-body text-body text-on-surface">طريقة الدفع</p>
|
|
<p class="font-caption text-caption text-on-surface-variant">المحفظة (Wallet)</p>
|
|
</div>
|
|
</div>
|
|
<span class="material-symbols-outlined text-on-surface-variant">chevron_left</span>
|
|
</button>
|
|
<!-- Coupon Code -->
|
|
<div class="flex items-center gap-sm">
|
|
<div class="relative flex-grow">
|
|
<span class="material-symbols-outlined absolute right-3 top-1/2 -translate-y-1/2 text-on-surface-variant">local_offer</span>
|
|
<input class="w-full bg-surface-container-lowest border border-outline-variant rounded-lg py-md pr-10 pl-md font-body text-body text-on-surface focus:ring-2 focus:ring-primary focus:border-primary transition-all text-right" dir="rtl" placeholder="أدخل كود الخصم" type="text"/>
|
|
</div>
|
|
<button class="bg-surface-container text-primary font-body text-body font-medium px-lg py-md rounded-lg hover:bg-surface-variant transition-colors border border-outline-variant">
|
|
تطبيق
|
|
</button>
|
|
</div>
|
|
<!-- Schedule -->
|
|
<button class="w-full flex items-center justify-between p-md bg-surface-container-lowest border border-outline-variant rounded-lg hover:bg-surface transition-colors">
|
|
<div class="flex items-center gap-md">
|
|
<div class="w-8 h-8 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant">
|
|
<span class="material-symbols-outlined text-[20px]">calendar_month</span>
|
|
</div>
|
|
<p class="font-body text-body text-on-surface">جدولة لاحقاً</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-on-surface-variant">chevron_left</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Confirm Button (Pinned to bottom of sheet) -->
|
|
<div class="p-base bg-surface-container-lowest shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)] z-30 pb-safe">
|
|
<button class="w-full h-[52px] bg-primary text-on-primary font-title text-title rounded-lg flex items-center justify-center gap-sm hover:bg-primary-container hover:text-on-primary-container transition-colors active:scale-[0.98] duration-150 shadow-[0_1px_3px_rgba(0,0,0,0.12)]">
|
|
تأكيد الرحلة
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</body></html>
|
|
|
|
<!-- Searching - Minimalist Social Proof Variant -->
|