342 lines
17 KiB
HTML
342 lines
17 KiB
HTML
<!-- Destination Selection - 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>Tripz - Destination 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"/>
|
|
<!-- Google Fonts: IBM Plex Sans Arabic (Title, Headline, Body, Caption, Display) & Inter (Label) -->
|
|
<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"/>
|
|
<!-- 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": {
|
|
"surface-variant": "#e0e2ec",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"on-primary-fixed": "#001a41",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"surface-container-high": "#e6e8f2",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"danger": "#EA4335",
|
|
"surface-tint": "#005bc0",
|
|
"outline": "#727785",
|
|
"error-container": "#ffdad6",
|
|
"error": "#ba1a1a",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"info": "#4285F4",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"on-error-container": "#93000a",
|
|
"on-error": "#ffffff",
|
|
"on-primary": "#ffffff",
|
|
"on-background": "#191c23",
|
|
"primary": "#005bbf",
|
|
"on-tertiary-fixed": "#341100",
|
|
"surface-dim": "#d8d9e3",
|
|
"primary-fixed": "#d8e2ff",
|
|
"on-tertiary": "#ffffff",
|
|
"surface": "#f9f9ff",
|
|
"outline-variant": "#c1c6d6",
|
|
"on-surface": "#191c23",
|
|
"secondary-container": "#dde0e6",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"on-surface-variant": "#414754",
|
|
"surface-container": "#ecedf7",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"on-primary-container": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"on-secondary-container": "#5f6368",
|
|
"inverse-primary": "#adc7ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container-low": "#f2f3fd",
|
|
"success": "#34A853",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"inverse-surface": "#2d3038",
|
|
"surface-bright": "#f9f9ff",
|
|
"secondary": "#5b5f64",
|
|
"primary-container": "#1a73e8",
|
|
"tertiary": "#9e4300",
|
|
"tertiary-container": "#c55500",
|
|
"on-secondary-fixed": "#181c20",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"on-tertiary-container": "#0e0200",
|
|
"background": "#f9f9ff",
|
|
"warning": "#FBBC04"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"sm": "8px",
|
|
"lg": "24px",
|
|
"xxl": "48px",
|
|
"xs": "4px",
|
|
"xl": "32px",
|
|
"base": "16px",
|
|
"md": "12px"
|
|
},
|
|
"fontFamily": {
|
|
"label": [
|
|
"Inter"
|
|
],
|
|
"title": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"headline": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"body": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"headline-lg-mobile": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"caption": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"body-lg": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"display": [
|
|
"IBM Plex Sans Arabic"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"label": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"title": [
|
|
"20px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"headline": [
|
|
"24px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"body": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"headline-lg-mobile": [
|
|
"28px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"caption": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"body-lg": [
|
|
"16px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"display": [
|
|
"32px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "700"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings:
|
|
'FILL' 1,
|
|
'wght' 400,
|
|
'GRAD' 0,
|
|
'opsz' 24
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body relative h-screen w-full overflow-hidden select-none">
|
|
<!-- Edge-to-edge map background -->
|
|
<div class="absolute inset-0 z-0 bg-surface-variant">
|
|
<img class="w-full h-full object-cover opacity-80 mix-blend-multiply" data-alt="A clean, minimalist vector map of Amman, Jordan, optimized for a ride-hailing app. The map uses a light mode color palette with soft grey roads, pale blue water bodies, and subtle beige landmasses. The style is modern, uncluttered, and highly readable, prioritizing spatial clarity over excessive detail, fitting seamlessly into a high-fidelity digital interface." data-location="Amman, Jordan" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCgl1XhJ7dhIcf9w9fdKx4IKXaJQAnFjBGOeME4KrCeV2nZkZ25bPURsIVpuIfznFahJ-Gd8MWf2lRTVezd_UQFXamJFbUUnvkSLOk1jryzDHfO3vd6ycRrZUIWmKLVianqAJrPHceygB0n_b9Nw_1rDO1RmFpMir2DtbBzOGLRwGKsgwORbqyW5y8-o5Zh0p7qIacX_iBTYNN8RUwy3I2tAosbr-W2W_4VrXtiLGEmpHWki4YaGmpcBrk3yl86Px72eEIIz1jZ6fY"/>
|
|
<!-- Map overlay for contrast -->
|
|
<div class="absolute inset-0 bg-gradient-to-b from-black/10 to-black/30"></div>
|
|
</div>
|
|
<!-- Top AppBar (from Shared Components JSON) -->
|
|
<!-- Note: Applying style commands exactly as requested for the TopAppBar. Since this is a destination search (linear task/focused journey), we keep the TopAppBar but with a back button. Navigation tabs (BottomNavBar) are suppressed as per Semantic Shell Mandate (Linear/Task-Focused). -->
|
|
<header class="w-full top-0 sticky bg-transparent flex flex-row-reverse justify-between items-center px-base h-16 z-20">
|
|
<div class="font-display text-display text-primary font-bold shadow-sm">
|
|
مسار
|
|
</div>
|
|
<button aria-label="Back" class="w-10 h-10 flex items-center justify-center rounded-full bg-surface shadow-sm text-on-surface hover:bg-surface-variant/50 transition-colors active:scale-95 duration-200">
|
|
<span class="material-symbols-outlined text-primary">arrow_forward</span>
|
|
</button>
|
|
</header>
|
|
<!-- Bottom Sheet (Medium State ~60%) -->
|
|
<div class="absolute bottom-0 left-0 w-full h-[65%] bg-surface rounded-t-[24px] shadow-[0_-4px_24px_rgba(0,0,0,0.12)] z-30 flex flex-col transition-transform duration-300 ease-out translate-y-0 pb-safe">
|
|
<!-- Drag Handle -->
|
|
<div class="w-full flex justify-center py-sm cursor-grab active:cursor-grabbing">
|
|
<div class="w-12 h-1 bg-outline-variant rounded-full"></div>
|
|
</div>
|
|
<div class="flex-1 overflow-y-auto px-base pb-xl custom-scrollbar">
|
|
<!-- Form Section -->
|
|
<div class="relative mt-sm mb-lg">
|
|
<!-- Visual Connection Line -->
|
|
<div class="absolute right-[22px] top-[24px] bottom-[24px] w-[2px] border-r-2 border-dotted border-outline-variant z-0"></div>
|
|
<div class="flex flex-col gap-sm relative z-10">
|
|
<!-- Origin Field -->
|
|
<div class="flex items-center gap-md">
|
|
<div class="w-12 flex justify-center items-center">
|
|
<div class="w-3 h-3 rounded-full bg-primary ring-4 ring-primary/20"></div>
|
|
</div>
|
|
<div class="flex-1 bg-surface-container-low rounded-xl px-md py-sm border border-outline-variant/30 flex items-center shadow-sm">
|
|
<input class="w-full bg-transparent border-none p-0 text-body-lg text-on-surface-variant focus:ring-0 cursor-default" readonly="" type="text" value="موقعي الحالي"/>
|
|
</div>
|
|
</div>
|
|
<!-- Add Stop Button -->
|
|
<div class="flex items-center gap-md">
|
|
<div class="w-12 flex justify-center"></div>
|
|
<button class="flex items-center gap-xs text-primary hover:text-primary-fixed-dim transition-colors py-xs">
|
|
<span class="material-symbols-outlined text-[18px]">add</span>
|
|
<span class="font-label text-label">إضافة محطة</span>
|
|
</button>
|
|
</div>
|
|
<!-- Destination Field -->
|
|
<div class="flex items-center gap-md">
|
|
<div class="w-12 flex justify-center items-center">
|
|
<div class="w-4 h-4 flex items-center justify-center rounded-sm bg-danger text-on-primary">
|
|
<span class="material-symbols-outlined text-[12px]">stop</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex-1 bg-surface rounded-xl px-md py-sm border-2 border-primary shadow-sm flex items-center relative overflow-hidden group">
|
|
<!-- Focus ring indicator -->
|
|
<div class="absolute inset-y-0 right-0 w-1 bg-primary"></div>
|
|
<input autofocus="" class="w-full bg-transparent border-none p-0 pr-sm text-body-lg text-on-surface placeholder-on-surface-variant/70 focus:ring-0" placeholder="إلى أين؟" type="text"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Divider -->
|
|
<hr class="border-outline-variant/30 mb-md"/>
|
|
<!-- Saved Places (Bento-style chips) -->
|
|
<div class="flex gap-md mb-lg overflow-x-auto pb-xs snap-x">
|
|
<button class="snap-start flex-shrink-0 flex items-center gap-sm bg-surface-container-low border border-outline-variant/30 rounded-xl px-md py-sm hover:bg-surface-variant/50 transition-colors active:scale-95 duration-150">
|
|
<div class="w-8 h-8 rounded-full bg-surface flex items-center justify-center text-primary shadow-sm">
|
|
<span class="material-symbols-outlined text-[20px]" data-weight="fill">home</span>
|
|
</div>
|
|
<span class="font-title text-title text-on-surface text-[16px]">المنزل</span>
|
|
</button>
|
|
<button class="snap-start flex-shrink-0 flex items-center gap-sm bg-surface-container-low border border-outline-variant/30 rounded-xl px-md py-sm hover:bg-surface-variant/50 transition-colors active:scale-95 duration-150">
|
|
<div class="w-8 h-8 rounded-full bg-surface flex items-center justify-center text-primary shadow-sm">
|
|
<span class="material-symbols-outlined text-[20px]" data-weight="fill">work</span>
|
|
</div>
|
|
<span class="font-title text-title text-on-surface text-[16px]">العمل</span>
|
|
</button>
|
|
</div>
|
|
<!-- Middle Section (Search & Results) -->
|
|
<div class="flex flex-col gap-xs">
|
|
<!-- Autocomplete Result 1 -->
|
|
<button class="flex items-center gap-md py-md px-sm rounded-lg hover:bg-surface-variant/30 transition-colors text-right group">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant group-hover:bg-primary-container group-hover:text-on-primary-container transition-colors">
|
|
<span class="material-symbols-outlined">location_on</span>
|
|
</div>
|
|
<div class="flex flex-col items-start flex-1 border-b border-outline-variant/20 pb-md group-last:border-0">
|
|
<span class="font-title text-[16px] text-on-surface group-hover:text-primary transition-colors">سيتي مول</span>
|
|
<span class="font-caption text-caption text-on-surface-variant mt-xs">شارع المدينة الطبية، عمان</span>
|
|
</div>
|
|
</button>
|
|
<!-- Autocomplete Result 2 -->
|
|
<button class="flex items-center gap-md py-md px-sm rounded-lg hover:bg-surface-variant/30 transition-colors text-right group">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant group-hover:bg-primary-container group-hover:text-on-primary-container transition-colors">
|
|
<span class="material-symbols-outlined">location_on</span>
|
|
</div>
|
|
<div class="flex flex-col items-start flex-1 border-b border-outline-variant/20 pb-md group-last:border-0">
|
|
<span class="font-title text-[16px] text-on-surface group-hover:text-primary transition-colors">مطار الملكة علياء الدولي</span>
|
|
<span class="font-caption text-caption text-on-surface-variant mt-xs">طريق المطار، الجيزة</span>
|
|
</div>
|
|
</button>
|
|
<!-- Autocomplete Result 3 -->
|
|
<button class="flex items-center gap-md py-md px-sm rounded-lg hover:bg-surface-variant/30 transition-colors text-right group">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container flex items-center justify-center text-on-surface-variant group-hover:bg-primary-container group-hover:text-on-primary-container transition-colors">
|
|
<span class="material-symbols-outlined">history</span>
|
|
</div>
|
|
<div class="flex flex-col items-start flex-1 border-b border-outline-variant/20 pb-md group-last:border-0">
|
|
<span class="font-title text-[16px] text-on-surface group-hover:text-primary transition-colors">مجمع الملك حسين للأعمال</span>
|
|
<span class="font-caption text-caption text-on-surface-variant mt-xs">شارع الملك عبدالله الثاني، عمان</span>
|
|
</div>
|
|
</button>
|
|
<!-- Pick from map -->
|
|
<button class="flex items-center gap-md py-md px-sm rounded-lg hover:bg-surface-variant/30 transition-colors text-right mt-sm">
|
|
<div class="w-10 h-10 rounded-full bg-surface-container-high flex items-center justify-center text-on-surface">
|
|
<span class="material-symbols-outlined">map</span>
|
|
</div>
|
|
<div class="flex flex-col items-start flex-1">
|
|
<span class="font-title text-[16px] text-on-surface">تحديد الموقع على الخريطة</span>
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Styles for custom scrollbar to keep UI clean -->
|
|
<style>
|
|
.custom-scrollbar::-webkit-scrollbar {
|
|
width: 4px;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
background-color: var(--tw-colors-outline-variant);
|
|
border-radius: 10px;
|
|
}
|
|
/* Hide scrollbar for bento chip container but allow scrolling */
|
|
.overflow-x-auto::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.overflow-x-auto {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
</body></html>
|
|
|
|
<!-- Route Preview - Tripz -->
|