185 lines
10 KiB
HTML
185 lines
10 KiB
HTML
<!-- Searching - Minimalist Social Proof Variant -->
|
|
<!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 - Searching for Driver</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<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": {
|
|
"surface-container-highest": "#e0e2ec",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"on-secondary-fixed": "#181c20",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"primary-fixed": "#d8e2ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"success": "#34A853",
|
|
"inverse-primary": "#adc7ff",
|
|
"primary-container": "#1a73e8",
|
|
"primary": "#005bbf",
|
|
"on-error-container": "#93000a",
|
|
"secondary": "#5b5f64",
|
|
"on-surface": "#191c23",
|
|
"on-error": "#ffffff",
|
|
"on-primary-fixed": "#001a41",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"error-container": "#ffdad6",
|
|
"surface-container-high": "#e6e8f2",
|
|
"tertiary": "#9e4300",
|
|
"on-tertiary-fixed": "#341100",
|
|
"on-tertiary": "#ffffff",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"on-background": "#191c23",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"outline": "#727785",
|
|
"on-tertiary-container": "#0e0200",
|
|
"background": "#f9f9ff",
|
|
"danger": "#EA4335",
|
|
"on-secondary-container": "#5f6368",
|
|
"surface-tint": "#005bc0",
|
|
"error": "#ba1a1a",
|
|
"secondary-container": "#dde0e6",
|
|
"outline-variant": "#c1c6d6",
|
|
"surface": "#f9f9ff",
|
|
"inverse-surface": "#2d3038",
|
|
"surface-bright": "#f9f9ff",
|
|
"tertiary-container": "#c55500",
|
|
"surface-container": "#ecedf7",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"on-primary": "#ffffff",
|
|
"on-surface-variant": "#414754",
|
|
"surface-container-low": "#f2f3fd",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary-container": "#ffffff",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"surface-dim": "#d8d9e3",
|
|
"surface-variant": "#e0e2ec",
|
|
"info": "#4285F4",
|
|
"warning": "#FBBC04"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"lg": "24px",
|
|
"base": "16px",
|
|
"xs": "4px",
|
|
"sm": "8px",
|
|
"xxl": "48px",
|
|
"xl": "32px",
|
|
"md": "12px"
|
|
},
|
|
"fontFamily": {
|
|
"body": ["IBM Plex Sans Arabic"],
|
|
"headline": ["IBM Plex Sans Arabic"],
|
|
"caption": ["IBM Plex Sans Arabic"],
|
|
"label": ["Inter"],
|
|
"headline-lg-mobile": ["IBM Plex Sans Arabic"],
|
|
"display": ["IBM Plex Sans Arabic"],
|
|
"body-lg": ["IBM Plex Sans Arabic"],
|
|
"title": ["IBM Plex Sans Arabic"]
|
|
},
|
|
"fontSize": {
|
|
"body": ["14px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"headline": ["24px", { "lineHeight": "1.2", "fontWeight": "600" }],
|
|
"caption": ["12px", { "lineHeight": "1.2", "fontWeight": "400" }],
|
|
"label": ["12px", { "lineHeight": "1.2", "fontWeight": "500" }],
|
|
"headline-lg-mobile": ["28px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"display": ["32px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"body-lg": ["16px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"title": ["20px", { "lineHeight": "1.2", "fontWeight": "600" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>.shimmer-bg {
|
|
background: linear-gradient(90deg, rgba(26, 115, 232, 0.1) 25%, rgba(26, 115, 232, 0.4) 50%, rgba(26, 115, 232, 0.1) 75%);
|
|
background-size: 200% 100%;
|
|
animation: shimmer 1.5s infinite linear
|
|
}
|
|
@keyframes shimmer {
|
|
0% {
|
|
background-position: 200% 0;
|
|
} 100% {
|
|
background-position: -200% 0;
|
|
}
|
|
}
|
|
/* Map background placeholder style */
|
|
.map-bg {
|
|
background-image: url(https://lh3.googleusercontent.com/aida-public/AB6AXuCrUZsCch6zf9l_pS0e8rwL2CP3anUqKjyx1Ne61WLj2wVzTVc2ggPsQUa8ye4QDVncd62tRwa0N45eR4bPMI2xRbAVIUJ7vdyYsz5cr9LRkOZJ2vqC_0CzhyzwI6qjPpaytdn8wcsOv0tOErL_x4o4XpKVW0iF6mQIFrSLQjE-etXIidl3A3Jdlk1EzkykcWoXuLknlAxzf1ncqDrBHvM7GlBppWEOT1_J1EM9YtoT9-cxfkaK_uuu8JsMtrILDYcx602vcX9dR9I);
|
|
background-size: cover;
|
|
background-position: center
|
|
}</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface font-body text-on-surface h-screen w-screen overflow-hidden relative">
|
|
<!-- Full Screen Map Background -->
|
|
<div class="absolute inset-0 z-0 map-bg" data-alt="A clean, modern top-down street map view showing a stylized urban grid in light mode. The map features minimal details, focusing on crisp white and light grey roads against very pale grey-blue background tiles. Soft, ambient lighting creates a calm, professional aesthetic suitable for a modern ride-hailing app. No labels or text." data-location="Riyadh" style=""></div>
|
|
<!-- Centered Radar Pulse Shader -->
|
|
<div class="absolute inset-0 z-10 flex items-center justify-center pb-[30%] pointer-events-none">
|
|
<div class="w-64 h-64 relative">
|
|
|
|
</div>
|
|
</div>
|
|
<!-- Bottom Sheet -->
|
|
<div class="absolute bottom-0 left-0 right-0 z-50 bg-surface-container-lowest rounded-t-[24px] shadow-[0_-4px_24px_rgba(0,0,0,0.08)] flex flex-col pt-sm px-lg pb-xl transform transition-transform duration-300 ease-out translate-y-0">
|
|
<!-- Drag Handle -->
|
|
<div class="w-8 h-1 bg-surface-variant rounded-full mx-auto mb-lg"></div>
|
|
<!-- Content Area -->
|
|
<div class="flex flex-col items-center text-center space-y-md">
|
|
<!-- Icon / Graphic Indicator -->
|
|
<div class="w-16 h-16 rounded-full bg-primary-fixed flex items-center justify-center mb-sm">
|
|
<span class="material-symbols-outlined text-primary text-[32px]" style="font-variation-settings: 'FILL' 1;">directions_car</span>
|
|
</div>
|
|
<!-- Texts -->
|
|
<h1 class="font-title text-title text-on-surface m-0">جاري البحث عن سائق...</h1>
|
|
<p class="font-body text-body text-on-surface-variant m-0 mb-lg">يتم العثور على أقرب سائق لك</p>
|
|
<!-- Loading Indicator -->
|
|
<div class="w-full h-1 bg-surface-container-highest rounded-full overflow-hidden mt-md mb-md">
|
|
<div class="h-full w-full shimmer-bg rounded-full"></div>
|
|
</div>
|
|
<!-- Active Drivers Widget -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-[0_2px_12px_rgba(0,0,0,0.06)] p-md flex items-center justify-between w-full border border-surface-container-highest mb-lg">
|
|
<div class="flex items-center space-x-reverse space-x-sm">
|
|
<div class="flex -space-x-reverse -space-x-2">
|
|
<img alt="Driver 1" class="w-8 h-8 rounded-full border-2 border-surface-container-lowest object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuA53kxTQhb2d3J9-lculU5SGd-NzZ6TsFYgkflb_nR9gswP3qnRRNba62LhBD7vAojrpOl37iV1EY8TPV6uD-HFyAD5dTNBpyIc5sVs7zUYU8IFjvMev5OfExoH0PRSIqVtFijeTopaNlhBHNp0FuI-n69ArCPEKM6Tx90d8emCf6No0D-dM2h0sid0Dx4RI4lRx3fhJSJX4SWPU0zZFDmL0iR85ZCTR87ZB-bEE80QVEA_NOKiX1yNkkwnTpnu2ib-dYQKXRIaUfM"/>
|
|
<img alt="Driver 2" class="w-8 h-8 rounded-full border-2 border-surface-container-lowest object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1prT_qStPpB1oJXMRk0fBAp6J3acLmDbNEjFQwjT8S0T2scRwzeZNdS0CUUn0K__Ud8Aig5SaPrkshcHZHMuAM5Nj-C7B8QBV6_embiddyl7Ma3zyRFGEkjDJxyrMd0we1t4celCL-o-4Q0j9FE8tFVVzaxiKLI4L8DBse4JUW_uvpiPhX-P78cNQGFhR6u01nss5DK8MyA_ylS-h9uf3TEwH5DAb1qwGUrrj_GmRX1dXxkZULiypLAnK_DOV2W884VKcUmJQl6I"/>
|
|
<img alt="Driver 3" class="w-8 h-8 rounded-full border-2 border-surface-container-lowest object-cover" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBfEfkVWAiByc90j5jndAS2HuDklQSy2imrMEPpO7i1wL4LZP2HLqRl39yaVCCMHU6RjDRhUO2BDjchaQFvNKi0uumNDGuNVsRRzNA3Zsw6UntbRRZ8zHFU5Ny6Vn1v_riq-IUW0-wkjmAXGLTobHzfvSoETd789SkzP1oHG3ZZexxYakQ15toyEG1tVZ3qp2_pKNRPuHfZF0SpzkI4Rq_MxmMCZqbZMMsYVX20nYzd-C2mwjfCUmftwHSCtYEiJymukhbPVnM7aKc"/>
|
|
</div>
|
|
<span class="font-label text-label text-primary bg-primary-fixed px-2 py-1 rounded-full">+5</span>
|
|
</div>
|
|
<div class="text-right flex-1 mr-sm">
|
|
<p class="font-body text-[13px] text-on-surface m-0">يتم مراجعة طلبك من قبل السائقين</p>
|
|
</div>
|
|
</div>
|
|
<!-- Cancel Button -->
|
|
<button class="w-full h-[52px] rounded-lg border border-outline-variant font-body-lg text-body-lg text-danger flex items-center justify-center hover:bg-error-container/20 transition-colors active:scale-[0.98]">
|
|
إلغاء
|
|
</button>
|
|
</div>
|
|
<!-- Safe Area Spacing -->
|
|
<div class="h-safe"></div>
|
|
</div>
|
|
</body></html>
|
|
|
|
<!-- Trip Invoice - Polished Refinement 2 -->
|