3410 lines
175 KiB
HTML
3410 lines
175 KiB
HTML
<!-- Splash Screen - Updated Animation -->
|
|
<!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" name="viewport"/>
|
|
<title>Tripz - Splash</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;600;700&family=Inter:wght@500&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100..900&family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"on-secondary": "#ffffff",
|
|
"on-primary-container": "#ffffff",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"surface-dim": "#d8d9e3",
|
|
"surface-variant": "#e0e2ec",
|
|
"info": "#4285F4",
|
|
"warning": "#FBBC04",
|
|
"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",
|
|
"on-secondary-container": "#5f6368",
|
|
"surface-tint": "#005bc0",
|
|
"error": "#ba1a1a",
|
|
"outline-variant": "#c1c6d6",
|
|
"secondary-container": "#dde0e6",
|
|
"outline": "#727785",
|
|
"on-tertiary-container": "#0e0200",
|
|
"background": "#f9f9ff",
|
|
"danger": "#EA4335",
|
|
"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",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"error-container": "#ffdad6",
|
|
"surface-container-high": "#e6e8f2",
|
|
"inverse-primary": "#adc7ff",
|
|
"success": "#34A853",
|
|
"primary-container": "#1a73e8",
|
|
"primary": "#005bbf",
|
|
"on-error-container": "#93000a",
|
|
"secondary": "#5b5f64",
|
|
"on-surface": "#191c23",
|
|
"on-error": "#ffffff",
|
|
"on-primary-fixed": "#001a41",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"on-secondary-fixed": "#181c20",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"primary-fixed": "#d8e2ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"tertiary-fixed": "#ffdbcb"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"md": "12px",
|
|
"xxl": "48px",
|
|
"xl": "32px",
|
|
"sm": "8px",
|
|
"xs": "4px",
|
|
"base": "16px",
|
|
"lg": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"body": ["IBM Plex Sans Arabic"],
|
|
"body-lg": ["IBM Plex Sans Arabic"],
|
|
"headline-lg-mobile": ["IBM Plex Sans Arabic"],
|
|
"label": ["Inter"],
|
|
"display": ["IBM Plex Sans Arabic"],
|
|
"title": ["IBM Plex Sans Arabic"],
|
|
"headline": ["IBM Plex Sans Arabic"],
|
|
"caption": ["IBM Plex Sans Arabic"]
|
|
},
|
|
"fontSize": {
|
|
"body": ["14px", {"lineHeight": "1.4", "fontWeight": "400"}],
|
|
"body-lg": ["16px", {"lineHeight": "1.4", "fontWeight": "400"}],
|
|
"headline-lg-mobile": ["28px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
|
"label": ["12px", {"lineHeight": "1.2", "fontWeight": "500"}],
|
|
"display": ["32px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
|
"title": ["20px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
|
"headline": ["24px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
|
"caption": ["12px", {"lineHeight": "1.2", "fontWeight": "400"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
background-color: #ffffff;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: 'IBM Plex Sans Arabic', sans-serif;
|
|
}
|
|
|
|
.splash-container {
|
|
width: 390px;
|
|
height: 844px;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
background-color: #ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
@keyframes revealAnimation {
|
|
0% {
|
|
opacity: 0;
|
|
transform: scale(0.8) translateY(10px);
|
|
filter: blur(8px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: scale(1.0) translateY(0);
|
|
filter: blur(0);
|
|
}
|
|
}
|
|
|
|
.animate-splash {
|
|
animation: revealAnimation 1.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
|
|
}
|
|
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-white">
|
|
<!-- Mobile Splash Canvas (390x844 Reference) -->
|
|
<main class="splash-container">
|
|
<!-- Animated Logo Centerpiece -->
|
|
<div class="flex items-center justify-center animate-splash w-full px-xxl">
|
|
<img alt="Tripz Logo" class="w-full max-w-[240px] h-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAExRzebgvE1A_vRyvWI9vwUbV-49_ZAe0-djzocc9gddYtdfRxhkqkiZ61HkwvKFU9EVea1E7gfNq1HIZWIaiSBCEgTtJMaPccHMrCpRBF3yCl2P8LYWAh8CoIgOL2FqqNZzeClIMtCg5EH3zoPhdTho-OVf0zmI1a0ZsHWRe0B0EbZjDdAwK2KPsB5jAP1djzi8LlPVEU2V1IerOkXjo64GzMDWPD5WQv8ZqbNBfMCFrq1PJproDnOj2_oA9khgUhPsQqirxDSog"/>
|
|
</div>
|
|
<!-- Subtle loading indicator (Optional based on "minimal" but adds to UX) -->
|
|
<div class="absolute bottom-16 left-1/2 -translate-x-1/2 opacity-0 animate-[fadeIn_0.5s_ease_1s_forwards]">
|
|
<div class="flex gap-2">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-primary/20 animate-bounce [animation-delay:-0.3s]"></div>
|
|
<div class="w-1.5 h-1.5 rounded-full bg-primary/20 animate-bounce [animation-delay:-0.15s]"></div>
|
|
<div class="w-1.5 h-1.5 rounded-full bg-primary/20 animate-bounce"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
// Micro-interaction: Dynamic background subtle shift on mouse move (desktop preview)
|
|
// Kept very subtle to maintain minimal white background directive
|
|
document.addEventListener('mousemove', (e) => {
|
|
const container = document.querySelector('.splash-container');
|
|
if (window.innerWidth > 600) {
|
|
const xAxis = (window.innerWidth / 2 - e.pageX) / 100;
|
|
const yAxis = (window.innerHeight / 2 - e.pageY) / 100;
|
|
const logo = container.querySelector('img');
|
|
logo.style.transform = `translate(${xAxis}px, ${yAxis}px)`;
|
|
}
|
|
});
|
|
|
|
// Simple Fade out simulation (for demonstration purposes if this was a real flow)
|
|
// window.addEventListener('load', () => {
|
|
// setTimeout(() => {
|
|
// console.log('Splash finished, navigating to home...');
|
|
// }, 2500);
|
|
// });
|
|
</script>
|
|
</body></html>
|
|
|
|
<!-- Onboarding 1 - Request with one tap -->
|
|
<!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 - Onboarding</title>
|
|
<!-- Google Fonts: IBM Plex Sans Arabic -->
|
|
<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"/>
|
|
<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>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-secondary": "#ffffff",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-container": "#5f6368",
|
|
"inverse-primary": "#adc7ff",
|
|
"warning": "#FBBC04",
|
|
"primary-fixed": "#d8e2ff",
|
|
"background": "#f9f9ff",
|
|
"info": "#4285F4",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"primary": "#005bbf",
|
|
"outline-variant": "#c1c6d6",
|
|
"on-error-container": "#93000a",
|
|
"secondary": "#5b5f64",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"surface-container-low": "#f2f3fd",
|
|
"error": "#ba1a1a",
|
|
"surface-container": "#ecedf7",
|
|
"on-background": "#191c23",
|
|
"inverse-surface": "#2d3038",
|
|
"primary-container": "#1a73e8",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"on-primary-container": "#ffffff",
|
|
"on-tertiary-container": "#0e0200",
|
|
"danger": "#EA4335",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"on-surface": "#191c23",
|
|
"on-secondary-fixed": "#181c20",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"surface-variant": "#e0e2ec",
|
|
"success": "#34A853",
|
|
"surface-tint": "#005bc0",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"on-primary": "#ffffff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"tertiary-container": "#c55500",
|
|
"on-error": "#ffffff",
|
|
"surface-bright": "#f9f9ff",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"on-primary-fixed": "#001a41",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-dim": "#d8d9e3",
|
|
"on-tertiary-fixed": "#341100",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"surface": "#f9f9ff",
|
|
"on-surface-variant": "#414754",
|
|
"surface-container-high": "#e6e8f2",
|
|
"outline": "#727785",
|
|
"secondary-container": "#dde0e6",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"tertiary": "#9e4300"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xl": "32px",
|
|
"xxl": "48px",
|
|
"base": "16px",
|
|
"xs": "4px",
|
|
"sm": "8px",
|
|
"md": "12px",
|
|
"lg": "24px"
|
|
},
|
|
"fontFamily": {
|
|
"display": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"body": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"headline": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"body-lg": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"title": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"label": [
|
|
"Inter"
|
|
],
|
|
"headline-lg-mobile": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"caption": [
|
|
"IBM Plex Sans Arabic"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"display": [
|
|
"32px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"body": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"headline": [
|
|
"24px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"body-lg": [
|
|
"16px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"title": [
|
|
"20px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"label": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"headline-lg-mobile": [
|
|
"28px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"caption": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "400"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface-container-lowest font-body text-on-surface antialiased h-screen w-full overflow-hidden flex flex-col items-center">
|
|
<main class="w-full h-full max-w-md flex flex-col relative pt-safe-top pb-safe-bottom">
|
|
<!-- Top Action Bar -->
|
|
<header class="w-full flex justify-end items-center px-base py-sm z-10">
|
|
<button class="text-on-surface-variant font-body-lg text-body-lg hover:text-primary-container transition-colors duration-200 focus:outline-none">
|
|
تخطي
|
|
</button>
|
|
</header>
|
|
<!-- Illustration Canvas -->
|
|
<div class="flex-1 w-full flex items-center justify-center px-lg py-xl">
|
|
<div class="relative w-full max-w-[280px] aspect-[3/4] flex items-center justify-center">
|
|
<img class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD0x7uCBMAY6Gi2dSgqMpRmgBYy4s777uJcBxG4jCYKknaTtObODjSm7K677godkDBFt9ltzgxFa2X9ROfuW8tO01aqNuJELe2_eyfj3ep3H0P1KVYeTWoiIV8MXONN1O0YCPxqGsZ8ZbgVhLfQHxvh9kBOHm_hgQzBB6HQoigpCTXHSyUOmZdmlhjU6UiBvh9ZpEDW5rjn43tDi0vbuToAphi7AtcOidDG9UMy7xUVz1yBv3pzhfGCcRGcqKDQq7tb9QBCka6o9QA"/>
|
|
</div>
|
|
</div>
|
|
<!-- Content & Action Area -->
|
|
<div class="w-full flex flex-col px-base pb-xl">
|
|
<!-- Text Content -->
|
|
<div class="flex flex-col items-center text-center mb-xl">
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface mb-sm">
|
|
اطلب بلمسة واحدة
|
|
</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-[85%]">
|
|
أدخل وجهتك واحصل على سائق فوراً
|
|
</p>
|
|
</div>
|
|
<!-- Page Indicators -->
|
|
<div class="flex justify-center items-center gap-2 mb-xl">
|
|
<div class="h-2 w-6 rounded-full bg-primary-container transition-all duration-300"></div>
|
|
<div class="h-2 w-2 rounded-full bg-surface-variant transition-all duration-300"></div>
|
|
<div class="h-2 w-2 rounded-full bg-surface-variant transition-all duration-300"></div>
|
|
</div>
|
|
<!-- Primary CTA -->
|
|
<button class="w-full h-[52px] rounded-xl bg-primary-container text-on-primary-container font-label text-label flex items-center justify-center hover:bg-primary transition-colors active:scale-[0.98] duration-200 shadow-sm focus:outline-none focus:ring-2 focus:ring-primary-container focus:ring-offset-2">
|
|
التالي
|
|
</button>
|
|
</div>
|
|
</main>
|
|
</body></html>
|
|
|
|
<!-- Onboarding 2 - Track Live -->
|
|
<!DOCTYPE html>
|
|
|
|
<html dir="rtl" lang="ar"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>تتبع رحلتك مباشرة - Onboarding</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&family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&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"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100..900&family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"primary": "#005bbf",
|
|
"on-tertiary-fixed": "#341100",
|
|
"surface-dim": "#d8d9e3",
|
|
"primary-fixed": "#d8e2ff",
|
|
"on-tertiary": "#ffffff",
|
|
"on-primary": "#ffffff",
|
|
"on-background": "#191c23",
|
|
"on-error": "#ffffff",
|
|
"secondary-container": "#dde0e6",
|
|
"outline-variant": "#c1c6d6",
|
|
"on-surface": "#191c23",
|
|
"surface": "#f9f9ff",
|
|
"error-container": "#ffdad6",
|
|
"error": "#ba1a1a",
|
|
"outline": "#727785",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"info": "#4285F4",
|
|
"surface-tint": "#005bc0",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"danger": "#EA4335",
|
|
"surface-container-high": "#e6e8f2",
|
|
"surface-variant": "#e0e2ec",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"on-primary-fixed": "#001a41",
|
|
"on-secondary-fixed": "#181c20",
|
|
"warning": "#FBBC04",
|
|
"on-tertiary-container": "#0e0200",
|
|
"background": "#f9f9ff",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"surface-bright": "#f9f9ff",
|
|
"secondary": "#5b5f64",
|
|
"inverse-surface": "#2d3038",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"tertiary": "#9e4300",
|
|
"tertiary-container": "#c55500",
|
|
"primary-container": "#1a73e8",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"surface-container": "#ecedf7",
|
|
"on-surface-variant": "#414754",
|
|
"surface-container-low": "#f2f3fd",
|
|
"success": "#34A853",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"on-secondary-container": "#5f6368",
|
|
"inverse-primary": "#adc7ff",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"on-primary-container": "#ffffff",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"secondary-fixed": "#dfe3e8"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"base": "16px",
|
|
"md": "12px",
|
|
"sm": "8px",
|
|
"lg": "24px",
|
|
"xxl": "48px",
|
|
"xs": "4px",
|
|
"xl": "32px"
|
|
},
|
|
"fontFamily": {
|
|
"body": ["IBM Plex Sans Arabic"],
|
|
"display": ["IBM Plex Sans Arabic"],
|
|
"headline-lg-mobile": ["IBM Plex Sans Arabic"],
|
|
"caption": ["IBM Plex Sans Arabic"],
|
|
"body-lg": ["IBM Plex Sans Arabic"],
|
|
"title": ["IBM Plex Sans Arabic"],
|
|
"label": ["Inter"],
|
|
"headline": ["IBM Plex Sans Arabic"]
|
|
},
|
|
"fontSize": {
|
|
"body": ["14px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"display": ["32px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"headline-lg-mobile": ["28px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"caption": ["12px", { "lineHeight": "1.2", "fontWeight": "400" }],
|
|
"body-lg": ["16px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"title": ["20px", { "lineHeight": "1.2", "fontWeight": "600" }],
|
|
"label": ["12px", { "lineHeight": "1.2", "fontWeight": "500" }],
|
|
"headline": ["24px", { "lineHeight": "1.2", "fontWeight": "600" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background text-on-background min-h-screen flex flex-col font-body antialiased">
|
|
<!-- Top Action Bar for Onboarding -->
|
|
<div class="w-full flex justify-end px-base pt-xl pb-sm">
|
|
<button class="text-secondary font-label text-label py-sm px-md rounded-full hover:bg-surface-container-high transition-colors">
|
|
تخطي
|
|
</button>
|
|
</div>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 flex flex-col items-center justify-center px-lg w-full max-w-md mx-auto relative z-10">
|
|
<!-- Illustration -->
|
|
<div class="w-full aspect-square mb-xl max-w-[280px]">
|
|
<img alt="تتبع رحلتك مباشرة" class="w-full h-full object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCmIixpKyzkJ87V9YeWiRPWumRci7bje_86oQ7caOuZ9cIuDFBOo4QculwIDO6_R6kQ2FXbcjSunIU1saKv1qmpjap7u7_WNOz4ua8kQ11zwTT5gbSMU10OHIuvdqA_xixyg8gi9WrbIm3lEnZ0chVNCwGkOpHMpHCeagpuRO6C4KCNjHEAI6QzuIniw8wDz9Ri9n2nZOWC4v6Hm1oDH6q78P_MwyZ_udu68PF6ADjXhpMCK1SvrrFGuVGTWmpHzK-MVMsFF_JSbEQ"/>
|
|
</div>
|
|
<!-- Text Content -->
|
|
<div class="text-center mb-xxl w-full">
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-background mb-sm">
|
|
تتبع رحلتك مباشرة
|
|
</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-[300px] mx-auto">
|
|
شاهد سائقك وهو يقترب منك في الوقت الفعلي
|
|
</p>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Action Area -->
|
|
<div class="w-full px-lg pb-[calc(env(safe-area-inset-bottom)+32px)] flex flex-col items-center max-w-md mx-auto bg-background">
|
|
<!-- Page Indicator -->
|
|
<div class="flex gap-sm mb-lg justify-center w-full">
|
|
<div class="w-2 h-2 rounded-full bg-surface-container-highest transition-all duration-300"></div>
|
|
<div class="w-6 h-2 rounded-full bg-primary transition-all duration-300"></div>
|
|
<div class="w-2 h-2 rounded-full bg-surface-container-highest transition-all duration-300"></div>
|
|
</div>
|
|
<!-- Next Button -->
|
|
<button class="w-full h-[52px] bg-primary text-on-primary font-title text-title rounded-xl flex items-center justify-center hover:bg-surface-tint active:scale-[0.98] transition-all shadow-[0_1px_3px_rgba(0,0,0,0.12)]">
|
|
<span>التالي</span>
|
|
</button>
|
|
</div>
|
|
</body></html>
|
|
|
|
<!-- Onboarding 3 - Pay Your Way -->
|
|
<!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 - Onboarding 3</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"/>
|
|
<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": {
|
|
"primary": "#005bbf",
|
|
"on-tertiary-fixed": "#341100",
|
|
"surface-dim": "#d8d9e3",
|
|
"primary-fixed": "#d8e2ff",
|
|
"on-tertiary": "#ffffff",
|
|
"on-primary": "#ffffff",
|
|
"on-background": "#191c23",
|
|
"on-error": "#ffffff",
|
|
"secondary-container": "#dde0e6",
|
|
"outline-variant": "#c1c6d6",
|
|
"on-surface": "#191c23",
|
|
"surface": "#f9f9ff",
|
|
"error-container": "#ffdad6",
|
|
"error": "#ba1a1a",
|
|
"outline": "#727785",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"info": "#4285F4",
|
|
"surface-tint": "#005bc0",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"danger": "#EA4335",
|
|
"surface-container-high": "#e6e8f2",
|
|
"surface-variant": "#e0e2ec",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"on-primary-fixed": "#001a41",
|
|
"on-secondary-fixed": "#181c20",
|
|
"warning": "#FBBC04",
|
|
"on-tertiary-container": "#0e0200",
|
|
"background": "#f9f9ff",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"surface-bright": "#f9f9ff",
|
|
"secondary": "#5b5f64",
|
|
"inverse-surface": "#2d3038",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"tertiary": "#9e4300",
|
|
"tertiary-container": "#c55500",
|
|
"primary-container": "#1a73e8",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"surface-container": "#ecedf7",
|
|
"on-surface-variant": "#414754",
|
|
"surface-container-low": "#f2f3fd",
|
|
"success": "#34A853",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-secondary": "#ffffff",
|
|
"on-secondary-container": "#5f6368",
|
|
"inverse-primary": "#adc7ff",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"on-primary-container": "#ffffff",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"secondary-fixed": "#dfe3e8"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"base": "16px",
|
|
"md": "12px",
|
|
"sm": "8px",
|
|
"lg": "24px",
|
|
"xxl": "48px",
|
|
"xs": "4px",
|
|
"xl": "32px"
|
|
},
|
|
"fontFamily": {
|
|
"body": ["IBM Plex Sans Arabic"],
|
|
"display": ["IBM Plex Sans Arabic"],
|
|
"headline-lg-mobile": ["IBM Plex Sans Arabic"],
|
|
"caption": ["IBM Plex Sans Arabic"],
|
|
"body-lg": ["IBM Plex Sans Arabic"],
|
|
"title": ["IBM Plex Sans Arabic"],
|
|
"label": ["Inter"],
|
|
"headline": ["IBM Plex Sans Arabic"]
|
|
},
|
|
"fontSize": {
|
|
"body": ["14px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"display": ["32px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"headline-lg-mobile": ["28px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"caption": ["12px", { "lineHeight": "1.2", "fontWeight": "400" }],
|
|
"body-lg": ["16px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"title": ["20px", { "lineHeight": "1.2", "fontWeight": "600" }],
|
|
"label": ["12px", { "lineHeight": "1.2", "fontWeight": "500" }],
|
|
"headline": ["24px", { "lineHeight": "1.2", "fontWeight": "600" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</head>
|
|
<body class="bg-background text-on-background font-body min-h-screen flex flex-col items-center justify-center m-0 p-0 overflow-hidden relative">
|
|
<!-- Top Action Area -->
|
|
<div class="absolute top-0 w-full flex justify-between items-center p-base z-10 pt-safe">
|
|
<button class="text-primary font-label text-label flex items-center justify-center p-sm rounded-full active:scale-95 transition-transform">
|
|
تخطي
|
|
</button>
|
|
</div>
|
|
<!-- Main Content Area -->
|
|
<main class="w-full max-w-md flex flex-col items-center justify-center px-base flex-1">
|
|
<!-- Illustration -->
|
|
<div class="w-full flex justify-center items-center mb-xl">
|
|
<img alt="Payment methods illustration" class="w-64 h-auto object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCndNYgxFChRY2evvtZBM5Yq3gcMs9VO0fpVOaxgcDgo2a6AyX4YJwvm29yQU43u0SPrbPfJ_EClXy0Na5G6Ei_hKQu-DFQdLtcWnUkmQ-qw_c_MnMXoxuY_v8tGuGZJwbGCmG43f5czEBLikQmFmLRtJxs1O7KadgjBHjIaIwcPGhJY3eW9xDvYxGuouhn4QjZMj8_iIKcDa82NgcqV04-tAxQ-2cfFhB7jQeOkYAmAWCkD6-tGEamQk1qb7Q5XSZzxmBsMsgpFp0"/>
|
|
</div>
|
|
<!-- Text Content -->
|
|
<div class="text-center w-full mb-xxl flex flex-col gap-sm">
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-background leading-tight">
|
|
ادفع بطريقتك
|
|
</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant max-w-[280px] mx-auto">
|
|
اختر الدفع نقدًا، بالبطاقة، أو عبر المحفظة
|
|
</p>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Action Area -->
|
|
<div class="w-full max-w-md px-base pb-xl pb-safe absolute bottom-0 flex flex-col items-center gap-lg bg-background">
|
|
<!-- Page Indicator -->
|
|
<div class="flex flex-row justify-center items-center gap-sm">
|
|
<div class="w-2 h-2 rounded-full bg-surface-variant transition-all"></div>
|
|
<div class="w-2 h-2 rounded-full bg-surface-variant transition-all"></div>
|
|
<div class="w-8 h-2 rounded-full bg-primary transition-all"></div>
|
|
</div>
|
|
<!-- Primary Action Button -->
|
|
<button class="w-full h-[52px] rounded-xl bg-primary text-on-primary font-title text-title flex flex-row items-center justify-center gap-sm active:scale-95 transition-transform duration-200 shadow-[0_1px_3px_rgba(0,0,0,0.12)]">
|
|
<span>ابدأ الآن</span>
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">arrow_back</span>
|
|
</button>
|
|
</div>
|
|
</body></html>
|
|
|
|
<!-- Phone Login - Variant B (Balanced Split) -->
|
|
<!DOCTYPE html>
|
|
|
|
<html 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" name="viewport"/>
|
|
<title>Tripz - Login</title>
|
|
<!-- 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"/>
|
|
<!-- 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>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-primary-fixed-variant": "#004493",
|
|
"surface-variant": "#e0e2ec",
|
|
"on-primary-fixed": "#001a41",
|
|
"tertiary": "#9e4300",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"secondary-container": "#dde0e6",
|
|
"on-primary": "#ffffff",
|
|
"on-tertiary-fixed": "#341100",
|
|
"warning": "#FBBC04",
|
|
"on-primary-container": "#ffffff",
|
|
"on-error": "#ffffff",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"secondary": "#5b5f64",
|
|
"on-surface-variant": "#414754",
|
|
"tertiary-container": "#c55500",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-tint": "#005bc0",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-bright": "#f9f9ff",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"info": "#4285F4",
|
|
"on-tertiary-container": "#0e0200",
|
|
"inverse-surface": "#2d3038",
|
|
"inverse-primary": "#adc7ff",
|
|
"on-error-container": "#93000a",
|
|
"surface-container-high": "#e6e8f2",
|
|
"primary": "#005bbf",
|
|
"success": "#34A853",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"surface-container-low": "#f2f3fd",
|
|
"on-surface": "#191c23",
|
|
"outline-variant": "#c1c6d6",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"background": "#f9f9ff",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"danger": "#EA4335",
|
|
"error": "#ba1a1a",
|
|
"on-background": "#191c23",
|
|
"surface-dim": "#d8d9e3",
|
|
"on-secondary-fixed": "#181c20",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"surface-container": "#ecedf7",
|
|
"outline": "#727785",
|
|
"error-container": "#ffdad6",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"on-secondary": "#ffffff",
|
|
"primary-container": "#1a73e8",
|
|
"surface": "#f9f9ff",
|
|
"on-secondary-container": "#5f6368",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"primary-fixed": "#d8e2ff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xxl": "48px",
|
|
"xl": "32px",
|
|
"md": "12px",
|
|
"lg": "24px",
|
|
"base": "16px",
|
|
"xs": "4px",
|
|
"sm": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"caption": ["IBM Plex Sans Arabic"],
|
|
"label": ["Inter"],
|
|
"headline-lg-mobile": ["IBM Plex Sans Arabic"],
|
|
"title": ["IBM Plex Sans Arabic"],
|
|
"headline": ["IBM Plex Sans Arabic"],
|
|
"display": ["IBM Plex Sans Arabic"],
|
|
"body-lg": ["IBM Plex Sans Arabic"],
|
|
"body": ["IBM Plex Sans Arabic"]
|
|
},
|
|
"fontSize": {
|
|
"caption": ["12px", {"lineHeight": "1.2", "fontWeight": "400"}],
|
|
"label": ["12px", {"lineHeight": "1.2", "fontWeight": "500"}],
|
|
"headline-lg-mobile": ["28px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
|
"title": ["20px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
|
"headline": ["24px", {"lineHeight": "1.2", "fontWeight": "600"}],
|
|
"display": ["32px", {"lineHeight": "1.2", "fontWeight": "700"}],
|
|
"body-lg": ["16px", {"lineHeight": "1.4", "fontWeight": "400"}],
|
|
"body": ["14px", {"lineHeight": "1.4", "fontWeight": "400"}]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
/* Custom scrollbar hiding for cleaner UI */
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
* {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface-container-low text-on-surface h-screen flex flex-col font-body antialiased selection:bg-primary-fixed selection:text-on-primary-fixed">
|
|
<!-- Top Spacer / Safe Area Placeholder -->
|
|
<div class="h-14 w-full flex-shrink-0 flex items-center px-base">
|
|
<!-- Optional back button could go here, omitting for strict minimal requirement -->
|
|
</div>
|
|
<!-- Graphic Area (Top Half) -->
|
|
<div class="flex-1 flex flex-col items-center justify-center pb-xl px-xl">
|
|
<img alt="Tripz Logo" class="w-full max-w-[200px] object-contain mb-6" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBOhF-Ub26h9zVev5RlaiET6xHsnh6sLB02r0y-bHxsTwWHkGX2x65-VHR7_NSldeaIV8K3ZZrCDeGfGII71G8rTfJ1xk5SVKkuakbLH99ELyZZWvHny5RF__Zb6AVris2p0_h7iKSnittFQpgIrlfJXcHSpmKy58DaEFNKMEJ34qS_J8Bge3kUix2DqK3MYJ3YVxcBHHFL1U8XERL1D9VPSeTmTP_-3D3l1_CSJRo5vga0SzFaq_pP6zGU5ow9AhEw3FCI09JltGA"/>
|
|
</div>
|
|
<!-- Main Content Area (Thumb Zone Bottom Sheet) -->
|
|
<main class="flex-shrink-0 bg-surface-container-lowest rounded-t-[32px] px-base pt-lg pb-[64px] shadow-[0_-8px_30px_rgba(0,0,0,0.05)]">
|
|
<!-- Drag Handle Indicator -->
|
|
<div class="w-12 h-1.5 bg-outline-variant/50 rounded-full mx-auto mb-lg"></div>
|
|
<!-- Header Section -->
|
|
<div class="mb-xl">
|
|
<h1 class="font-headline text-headline text-on-surface mb-sm">أهلاً بك في Tripz</h1>
|
|
<p class="font-body text-body text-on-surface-variant">أدخل رقم هاتفك للبدء</p>
|
|
</div>
|
|
<!-- Form Section -->
|
|
<form class="flex-col flex space-y-lg" onsubmit="event.preventDefault();">
|
|
<!-- Phone Input Group -->
|
|
<div class="relative flex items-stretch h-[52px] border border-outline-variant rounded-lg bg-surface-container-lowest focus-within:border-primary-container focus-within:ring-1 focus-within:ring-primary-container transition-all duration-200 overflow-hidden">
|
|
<!-- Country Code Selector (Start/Right side in RTL) -->
|
|
<button aria-label="Select Country Code" class="flex items-center px-md border-l border-outline-variant bg-surface-container-low hover:bg-surface-container-high transition-colors text-on-surface" type="button">
|
|
<span class="text-title ml-xs">🇯🇴</span>
|
|
<span class="font-body-lg text-body-lg text-on-surface" dir="ltr">+962</span>
|
|
<span class="material-symbols-outlined text-on-surface-variant mr-xs" style="font-size: 20px;">arrow_drop_down</span>
|
|
</button>
|
|
<!-- Phone Number Input -->
|
|
<input autocomplete="tel-national" class="flex-1 w-full bg-transparent border-none outline-none px-md font-body-lg text-body-lg text-on-surface placeholder:text-on-surface-variant/50 focus:ring-0" dir="ltr" id="phone-number" placeholder="79 123 4567" type="tel"/>
|
|
</div>
|
|
<!-- Submit Button -->
|
|
<button class="w-full h-[52px] bg-primary-container text-on-primary-container rounded-xl font-title text-title flex items-center justify-center transition-transform active:scale-[0.98] mt-xl shadow-sm hover:shadow-md" type="submit">
|
|
إرسال الكود
|
|
</button>
|
|
</form>
|
|
</main>
|
|
<script>
|
|
// Simple input formatting script to add spaces for readability (Jordan mobile format example)
|
|
const phoneInput = document.getElementById('phone-number');
|
|
|
|
phoneInput.addEventListener('input', function(e) {
|
|
let value = e.target.value.replace(/\D/g, ''); // Remove non-digits
|
|
if (value.length > 9) value = value.slice(0, 9); // Limit length
|
|
|
|
// Format as XX XXX XXXX
|
|
let formatted = value;
|
|
if (value.length > 2) {
|
|
formatted = value.slice(0, 2) + ' ' + value.slice(2);
|
|
}
|
|
if (value.length > 5) {
|
|
formatted = formatted.slice(0, 6) + ' ' + value.slice(5);
|
|
}
|
|
|
|
e.target.value = formatted;
|
|
});
|
|
</script>
|
|
</body></html>
|
|
|
|
<!-- OTP Verification - Variant 1 (Bold Header) -->
|
|
<!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>تحقق من رقمك - مسار</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&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-fixed": "#ffdbcb",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container-high": "#e6e8f2",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"surface-bright": "#f9f9ff",
|
|
"on-tertiary-fixed": "#341100",
|
|
"surface": "#f9f9ff",
|
|
"secondary": "#5b5f64",
|
|
"error-container": "#ffdad6",
|
|
"danger": "#EA4335",
|
|
"tertiary-container": "#c55500",
|
|
"outline": "#727785",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"surface-container": "#ecedf7",
|
|
"on-primary": "#ffffff",
|
|
"surface-tint": "#005bc0",
|
|
"outline-variant": "#c1c6d6",
|
|
"on-tertiary-container": "#0e0200",
|
|
"info": "#4285F4",
|
|
"surface-variant": "#e0e2ec",
|
|
"surface-container-low": "#f2f3fd",
|
|
"on-error": "#ffffff",
|
|
"on-primary-container": "#ffffff",
|
|
"inverse-surface": "#2d3038",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"primary-container": "#1a73e8",
|
|
"warning": "#FBBC04",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"background": "#f9f9ff",
|
|
"on-secondary-fixed": "#181c20",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"on-secondary": "#ffffff",
|
|
"inverse-primary": "#adc7ff",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"on-error-container": "#93000a",
|
|
"tertiary": "#9e4300",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"surface-dim": "#d8d9e3",
|
|
"on-surface-variant": "#414754",
|
|
"success": "#34A853",
|
|
"error": "#ba1a1a",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"on-tertiary": "#ffffff",
|
|
"on-surface": "#191c23",
|
|
"on-secondary-container": "#5f6368",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"primary-fixed": "#d8e2ff",
|
|
"on-background": "#191c23",
|
|
"on-primary-fixed": "#001a41",
|
|
"primary": "#005bbf",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"secondary-container": "#dde0e6"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xxl": "48px",
|
|
"md": "12px",
|
|
"lg": "24px",
|
|
"base": "16px",
|
|
"xl": "32px",
|
|
"xs": "4px",
|
|
"sm": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"label": ["Inter"],
|
|
"headline-lg-mobile": ["IBM Plex Sans Arabic"],
|
|
"display": ["IBM Plex Sans Arabic"],
|
|
"body-lg": ["IBM Plex Sans Arabic"],
|
|
"caption": ["IBM Plex Sans Arabic"],
|
|
"body": ["IBM Plex Sans Arabic"],
|
|
"title": ["IBM Plex Sans Arabic"],
|
|
"headline": ["IBM Plex Sans Arabic"]
|
|
},
|
|
"fontSize": {
|
|
"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" }],
|
|
"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>
|
|
body { font-family: 'IBM Plex Sans Arabic', sans-serif; }
|
|
/* Hide number input arrows */
|
|
input[type=number]::-webkit-inner-spin-button,
|
|
input[type=number]::-webkit-outer-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
input[type=number] {
|
|
-moz-appearance: textfield;
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface-container-lowest text-on-background min-h-screen flex flex-col antialiased selection:bg-primary-fixed selection:text-on-primary-fixed">
|
|
<!-- TopAppBar -->
|
|
<header class="w-full top-0 sticky bg-primary text-on-primary shadow-md flex items-center px-sm h-16 z-50 gap-sm">
|
|
<!-- Leading Icon (Back Arrow RTL) -->
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-white/10 transition-colors active:scale-95 duration-200 focus:outline-none focus:ring-2 focus:ring-on-primary">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">arrow_forward</span>
|
|
</button>
|
|
<!-- Headline -->
|
|
<div class="flex-1">
|
|
<span class="font-headline text-[20px] font-bold">تحقق من رقمك</span>
|
|
</div>
|
|
</header>
|
|
<!-- Main Canvas -->
|
|
<main class="flex-1 flex flex-col px-lg pt-lg pb-base w-full max-w-md mx-auto relative">
|
|
<!-- Header Text Section -->
|
|
<section class="flex flex-col items-start w-full">
|
|
<div class="flex flex-wrap items-baseline gap-2">
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant leading-relaxed">
|
|
أدخل الكود المرسل إلى <span class="font-semibold text-on-surface tracking-wider ml-1" dir="ltr">+962 7XX XXX XXXX</span>
|
|
</p>
|
|
<button class="font-title text-body text-primary-container hover:text-primary active:scale-95 transition-all focus:outline-none">
|
|
تعديل
|
|
</button>
|
|
</div>
|
|
</section>
|
|
<!-- OTP Input Section -->
|
|
<section class="mt-xl mb-xl w-full flex justify-center" dir="ltr">
|
|
<div class="flex items-center gap-base">
|
|
<input aria-label="Digit 1" class="w-14 h-14 rounded-lg bg-surface-container-lowest border border-outline-variant text-center font-display text-display text-on-surface shadow-sm focus:border-2 focus:border-primary-container focus:ring-0 focus:outline-none transition-all" maxlength="1" type="number"/>
|
|
<input aria-label="Digit 2" class="w-14 h-14 rounded-lg bg-surface-container-lowest border border-outline-variant text-center font-display text-display text-on-surface shadow-sm focus:border-2 focus:border-primary-container focus:ring-0 focus:outline-none transition-all" maxlength="1" type="number"/>
|
|
<input aria-label="Digit 3" class="w-14 h-14 rounded-lg bg-surface-container-lowest border border-outline-variant text-center font-display text-display text-on-surface shadow-sm focus:border-2 focus:border-primary-container focus:ring-0 focus:outline-none transition-all" maxlength="1" type="number"/>
|
|
<input aria-label="Digit 4" class="w-14 h-14 rounded-lg bg-surface-container-lowest border border-outline-variant text-center font-display text-display text-on-surface shadow-sm focus:border-2 focus:border-primary-container focus:ring-0 focus:outline-none transition-all" maxlength="1" type="number"/>
|
|
</div>
|
|
</section>
|
|
<!-- Countdown Section -->
|
|
<section class="w-full text-center">
|
|
<p class="font-body text-body text-on-surface-variant flex items-center justify-center gap-1">
|
|
إعادة إرسال الكود خلال <span class="font-title text-primary-container w-10 text-left block" dir="ltr">0:45</span>
|
|
</p>
|
|
</section>
|
|
<!-- Action / Thumb Zone -->
|
|
<section class="mt-auto pt-xl w-full">
|
|
<button class="w-full h-[52px] bg-primary-container text-on-primary rounded-xl font-title text-title shadow-[0_1px_3px_rgba(0,0,0,0.12),_0_1px_2px_rgba(0,0,0,0.08)] hover:bg-primary transition-colors active:scale-[0.98] duration-150 flex items-center justify-center focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-container">
|
|
تأكيد
|
|
</button>
|
|
</section>
|
|
</main>
|
|
<script>
|
|
// Simple logic to auto-advance OTP inputs
|
|
const inputs = document.querySelectorAll('input[type="number"]');
|
|
|
|
inputs.forEach((input, index) => {
|
|
input.addEventListener('input', (e) => {
|
|
if(e.target.value.length > 1) {
|
|
e.target.value = e.target.value.slice(0, 1);
|
|
}
|
|
if (e.target.value.length === 1 && index < inputs.length - 1) {
|
|
inputs[index + 1].focus();
|
|
}
|
|
});
|
|
|
|
input.addEventListener('keydown', (e) => {
|
|
if (e.key === 'Backspace' && e.target.value === '' && index > 0) {
|
|
inputs[index - 1].focus();
|
|
}
|
|
});
|
|
});
|
|
|
|
// Auto-focus first input on load
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
if(inputs.length > 0) inputs[0].focus();
|
|
});
|
|
</script>
|
|
</body></html>
|
|
|
|
<!-- Name Entry - Variant 4 (Premium Modern) -->
|
|
<!DOCTYPE html>
|
|
|
|
<html 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" name="viewport"/>
|
|
<title>ما هو اسمك؟ - Tripz</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 -->
|
|
<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&display=swap" rel="stylesheet"/>
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-surface": "#191c23",
|
|
"surface-container-lowest": "#ffffff",
|
|
"inverse-primary": "#adc7ff",
|
|
"tertiary": "#9e4300",
|
|
"surface-bright": "#f9f9ff",
|
|
"surface-variant": "#e0e2ec",
|
|
"background": "#f9f9ff",
|
|
"primary-fixed": "#d8e2ff",
|
|
"on-tertiary-fixed": "#341100",
|
|
"on-primary": "#ffffff",
|
|
"danger": "#EA4335",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"on-secondary": "#ffffff",
|
|
"surface-dim": "#d8d9e3",
|
|
"outline": "#727785",
|
|
"on-surface-variant": "#414754",
|
|
"outline-variant": "#c1c6d6",
|
|
"tertiary-container": "#c55500",
|
|
"secondary": "#5b5f64",
|
|
"on-primary-fixed": "#001a41",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"error-container": "#ffdad6",
|
|
"surface-container-low": "#f2f3fd",
|
|
"surface-container-high": "#e6e8f2",
|
|
"secondary-container": "#dde0e6",
|
|
"on-primary-container": "#ffffff",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"on-error-container": "#93000a",
|
|
"on-error": "#ffffff",
|
|
"on-secondary-container": "#5f6368",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"surface": "#f9f9ff",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"on-background": "#191c23",
|
|
"on-secondary-fixed": "#181c20",
|
|
"success": "#34A853",
|
|
"on-tertiary": "#ffffff",
|
|
"error": "#ba1a1a",
|
|
"warning": "#FBBC04",
|
|
"surface-tint": "#005bc0",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"info": "#4285F4",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"primary": "#005bbf",
|
|
"on-tertiary-container": "#0e0200",
|
|
"surface-container": "#ecedf7",
|
|
"primary-container": "#1a73e8",
|
|
"inverse-surface": "#2d3038"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xl": "32px",
|
|
"sm": "8px",
|
|
"md": "12px",
|
|
"base": "16px",
|
|
"xxl": "48px",
|
|
"lg": "24px",
|
|
"xs": "4px"
|
|
},
|
|
"fontFamily": {
|
|
"caption": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"body": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"label": [
|
|
"Inter"
|
|
],
|
|
"headline": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"body-lg": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"title": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"headline-lg-mobile": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"display": [
|
|
"IBM Plex Sans Arabic"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"caption": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"body": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"label": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"headline": [
|
|
"24px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"body-lg": [
|
|
"16px",
|
|
{
|
|
"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"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface-container-low text-on-background min-h-screen font-body antialiased flex flex-col overflow-x-hidden selection:bg-primary-fixed selection:text-on-primary-fixed">
|
|
<!-- Top Navigation -->
|
|
<header class="w-full flex items-center justify-center pt-8 pb-4 px-base relative">
|
|
<button aria-label="العودة" class="absolute right-base w-10 h-10 flex items-center justify-center rounded-full text-on-surface hover:bg-surface-variant/50 transition-colors active:scale-95 duration-200" type="button">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 0;">arrow_forward</span>
|
|
</button>
|
|
<img alt="Tripz" class="h-8 object-contain" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCL2nuztblN5hnrYfa6amFzQa4TW0ZIu5hWeVZHt6w8OGSdw_qfXO-VECvTWysXoDRYUi_UiB7hctMvKIHHC2cBweQazEBTtPQ8P3eYawTdIEcDD03fQSPK--RSmIDHWsX9iIju-w61yf-NzFUBw65Zi3CaEzFbKEJp0eixPfYRD8_8SCPalH7e5okX4HVgK0IYaJBxSINuobSxTE_ELi3KyqOsC6FvD4rh__1KEe6kt7DSys44eRh78pNXF7C9rMiox77dFobQeDs"/>
|
|
</header>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 flex flex-col items-center px-base pt-xl pb-xxl relative z-10 w-full">
|
|
<!-- Title Area -->
|
|
<div class="text-center mb-xs animate-fade-in-up">
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface tracking-tight font-semibold">ما هو اسمك؟</h1>
|
|
</div>
|
|
<!-- Subtitle -->
|
|
<div class="mb-xl animate-fade-in-up text-center" style="animation-delay: 0.1s;">
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">ساعدنا في تخصيص تجربتك</p>
|
|
</div>
|
|
<!-- Input Form -->
|
|
<div class="w-full max-w-sm space-y-base animate-fade-in-up bg-surface-container-lowest p-lg rounded-2xl shadow-sm" style="animation-delay: 0.2s;">
|
|
<!-- First Name -->
|
|
<div class="w-full relative group">
|
|
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-outline flex items-center pointer-events-none">
|
|
<span class="material-symbols-outlined text-[20px]">person</span>
|
|
</div>
|
|
<input autocomplete="given-name" class="peer block w-full h-[56px] rounded-[12px] border border-outline-variant bg-surface-container-lowest pr-12 pl-base pt-4 pb-1 text-on-surface font-body-lg text-body-lg focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-right placeholder-transparent" id="first_name" placeholder="الاسم الأول" type="text"/>
|
|
<label class="absolute right-12 top-1/2 -translate-y-1/2 text-on-surface-variant font-body-lg text-body-lg transition-all peer-focus:top-[10px] peer-focus:-translate-y-0 peer-focus:text-caption peer-focus:text-primary peer-[:not(:placeholder-shown)]:top-[10px] peer-[:not(:placeholder-shown)]:-translate-y-0 peer-[:not(:placeholder-shown)]:text-caption pointer-events-none origin-right" for="first_name">
|
|
الاسم الأول
|
|
</label>
|
|
</div>
|
|
<!-- Last Name -->
|
|
<div class="w-full relative group">
|
|
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-outline flex items-center pointer-events-none">
|
|
<span class="material-symbols-outlined text-[20px]">person</span>
|
|
</div>
|
|
<input autocomplete="family-name" class="peer block w-full h-[56px] rounded-[12px] border border-outline-variant bg-surface-container-lowest pr-12 pl-base pt-4 pb-1 text-on-surface font-body-lg text-body-lg focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-right placeholder-transparent" id="last_name" placeholder="الاسم الأخير" type="text"/>
|
|
<label class="absolute right-12 top-1/2 -translate-y-1/2 text-on-surface-variant font-body-lg text-body-lg transition-all peer-focus:top-[10px] peer-focus:-translate-y-0 peer-focus:text-caption peer-focus:text-primary peer-[:not(:placeholder-shown)]:top-[10px] peer-[:not(:placeholder-shown)]:-translate-y-0 peer-[:not(:placeholder-shown)]:text-caption pointer-events-none origin-right" for="last_name">
|
|
الاسم الأخير
|
|
</label>
|
|
</div>
|
|
<!-- Email -->
|
|
<div class="w-full relative group">
|
|
<div class="absolute right-4 top-1/2 -translate-y-1/2 text-outline flex items-center pointer-events-none">
|
|
<span class="material-symbols-outlined text-[20px]">mail</span>
|
|
</div>
|
|
<input autocomplete="email" class="peer block w-full h-[56px] rounded-[12px] border border-outline-variant bg-surface-container-lowest pr-12 pl-base pt-4 pb-1 text-on-surface font-body-lg text-body-lg focus:outline-none focus:border-primary focus:ring-1 focus:ring-primary transition-all text-right placeholder-transparent" id="email" placeholder="البريد الإلكتروني" type="email"/>
|
|
<label class="absolute right-12 top-1/2 -translate-y-1/2 text-on-surface-variant font-body-lg text-body-lg transition-all peer-focus:top-[10px] peer-focus:-translate-y-0 peer-focus:text-caption peer-focus:text-primary peer-[:not(:placeholder-shown)]:top-[10px] peer-[:not(:placeholder-shown)]:-translate-y-0 peer-[:not(:placeholder-shown)]:text-caption pointer-events-none origin-right flex items-center gap-1" for="email">
|
|
البريد الإلكتروني <span class="text-outline text-caption font-normal">(اختياري)</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Thumb Zone Action (Fixed for Mobile) -->
|
|
<div class="fixed bottom-0 left-0 w-full p-base bg-gradient-to-t from-surface-container-low via-surface-container-low to-transparent z-40 pb-lg flex justify-center">
|
|
<button class="w-full max-w-sm h-[56px] rounded-[12px] bg-primary text-white font-title text-title flex items-center justify-center transition-transform active:scale-95 duration-200 shadow-md hover:shadow-lg" type="button">
|
|
استمرار
|
|
</button>
|
|
</div>
|
|
<!-- Minimal custom styles for animations -->
|
|
<style>
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 0.5s cubic-bezier(0.2, 0, 0, 1) forwards;
|
|
opacity: 0;
|
|
}
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Safe area padding for modern mobile devices */
|
|
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
|
.pb-lg {
|
|
padding-bottom: calc(var(--spacing-lg) + env(safe-area-inset-bottom));
|
|
}
|
|
}
|
|
</style>
|
|
<script>
|
|
// Auto-focus input on load for immediate interaction (kinetic logic)
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const firstNameInput = document.getElementById('first_name');
|
|
if (firstNameInput) {
|
|
setTimeout(() => {
|
|
firstNameInput.focus();
|
|
}, 100);
|
|
}
|
|
});
|
|
</script>
|
|
</body></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 -->
|
|
<!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 -->
|
|
<!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 -->
|
|
<!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 -->
|
|
<!DOCTYPE html>
|
|
|
|
<html 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" name="viewport"/>
|
|
<title>Tripz - Trip Receipt</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"inverse-on-surface": "#eff0fa",
|
|
"on-primary": "#ffffff",
|
|
"success": "#34A853",
|
|
"error": "#ba1a1a",
|
|
"danger": "#EA4335",
|
|
"on-secondary-container": "#5f6368",
|
|
"on-background": "#191c23",
|
|
"on-secondary-fixed": "#181c20",
|
|
"surface-tint": "#005bc0",
|
|
"primary-container": "#1a73e8",
|
|
"surface": "#f9f9ff",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"surface-dim": "#d8d9e3",
|
|
"surface-container-high": "#e6e8f2",
|
|
"surface-container-low": "#f2f3fd",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"secondary-container": "#dde0e6",
|
|
"surface-bright": "#f9f9ff",
|
|
"surface-variant": "#e0e2ec",
|
|
"on-secondary": "#ffffff",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"surface-container-lowest": "#ffffff",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"inverse-primary": "#adc7ff",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"on-tertiary": "#ffffff",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"on-primary-fixed": "#001a41",
|
|
"on-primary-container": "#ffffff",
|
|
"outline-variant": "#c1c6d6",
|
|
"warning": "#FBBC04",
|
|
"on-surface": "#191c23",
|
|
"inverse-surface": "#2d3038",
|
|
"primary": "#005bbf",
|
|
"outline": "#727785",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"on-error": "#ffffff",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"tertiary-container": "#c55500",
|
|
"on-tertiary-container": "#0e0200",
|
|
"on-tertiary-fixed": "#341100",
|
|
"on-surface-variant": "#414754",
|
|
"background": "#f9f9ff",
|
|
"info": "#4285F4",
|
|
"surface-container": "#ecedf7",
|
|
"tertiary": "#9e4300",
|
|
"secondary": "#5b5f64",
|
|
"on-error-container": "#93000a",
|
|
"error-container": "#ffdad6",
|
|
"primary-fixed": "#d8e2ff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xs": "4px",
|
|
"xl": "32px",
|
|
"sm": "8px",
|
|
"md": "12px",
|
|
"xxl": "48px",
|
|
"lg": "24px",
|
|
"base": "16px"
|
|
},
|
|
"fontFamily": {
|
|
"body-lg": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"body": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"label": [
|
|
"Inter"
|
|
],
|
|
"headline-lg-mobile": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"title": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"headline": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"display": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"caption": [
|
|
"IBM Plex Sans Arabic"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"body-lg": [
|
|
"16px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"body": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"label": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "500"
|
|
}
|
|
],
|
|
"headline-lg-mobile": [
|
|
"28px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"title": [
|
|
"20px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"headline": [
|
|
"24px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "600"
|
|
}
|
|
],
|
|
"display": [
|
|
"32px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "700"
|
|
}
|
|
],
|
|
"caption": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "400"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #f9f9ff; /* bg-background */
|
|
}
|
|
/* Map pattern background for a clean modern look without loading real maps in mockup */
|
|
.map-pattern {
|
|
background-image: radial-gradient(#e0e2ec 1px, transparent 1px);
|
|
background-size: 16px 16px;
|
|
background-color: #f9f9ff;
|
|
}
|
|
/* Dashed line for receipt effect */
|
|
.receipt-divider {
|
|
border-top: 2px dashed #e0e2ec;
|
|
}
|
|
|
|
.receipt-bg {
|
|
background-image: radial-gradient(#c1c6d6 1px, transparent 1px);
|
|
background-size: 8px 8px;
|
|
background-color: rgba(249, 249, 255, 0.5); /* slightly transparent surface */
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased text-on-surface font-body font-body selection:bg-primary-container selection:text-on-primary-container flex flex-col h-screen overflow-hidden">
|
|
<!-- TopAppBar -->
|
|
<header class="w-full top-0 sticky bg-surface flex flex-row-reverse justify-between items-center px-base h-16 z-50">
|
|
<button aria-label="Back" class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors active:scale-95 duration-200">
|
|
<span aria-hidden="true" class="material-symbols-outlined text-on-surface-variant" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
<div class="flex-1 text-center">
|
|
<h1 class="font-headline text-headline text-primary font-bold">تمت الرحلة</h1>
|
|
</div>
|
|
<div class="w-10"></div> <!-- Spacer for balance -->
|
|
</header>
|
|
<!-- Main Content Area (Scrollable) -->
|
|
<main class="flex-1 overflow-y-auto px-base py-lg pb-[120px] max-w-md mx-auto w-full">
|
|
<!-- Status Banner -->
|
|
<div class="flex flex-col items-center justify-center mb-lg animate-fade-in-up">
|
|
<div class="flex items-center gap-sm mb-xs">
|
|
<div class="w-8 h-8 bg-success/20 rounded-full flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-success text-xl" data-icon="check">check</span>
|
|
</div>
|
|
<h2 class="font-title text-title text-on-surface font-bold">الرحلة مكتملة بنجاح</h2>
|
|
</div>
|
|
<p class="font-body text-body text-on-surface-variant text-center">شكراً لاختيارك مسار. نأمل أن تكون رحلتك مريحة.</p>
|
|
</div>
|
|
<!-- Receipt Card -->
|
|
<div class="bg-surface-container-lowest rounded-xl border border-surface-variant shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.08)] overflow-hidden">
|
|
<!-- Map Thumbnail -->
|
|
<div class="h-32 w-full map-pattern relative border-b border-surface-variant">
|
|
<!-- Decorative Route Line -->
|
|
<svg class="absolute inset-0 w-full h-full" preserveaspectratio="none" viewbox="0 0 100 100">
|
|
<path class="opacity-80" d="M 20 80 Q 40 40 80 20" fill="none" stroke="#005bbf" stroke-dasharray="8 4" stroke-linecap="round" stroke-width="4"></path>
|
|
</svg>
|
|
<div class="absolute bottom-4 right-4 bg-primary text-on-primary font-label text-label px-3 py-1 rounded-full shadow-md">
|
|
3.2 كم
|
|
</div>
|
|
</div>
|
|
<div class="p-base relative">
|
|
<div class="flex justify-between items-center mb-lg">
|
|
<div class="flex items-center gap-sm">
|
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="payments">payments</span>
|
|
<span class="font-body-lg text-body-lg text-on-surface">طريقة الدفع</span>
|
|
</div>
|
|
<span class="font-title text-title text-primary">نقداً</span>
|
|
</div>
|
|
<div class="receipt-divider my-md"></div>
|
|
<!-- Fare Details with Receipt Background -->
|
|
<div class="receipt-bg -mx-base px-base py-md font-label text-label">
|
|
<div class="space-y-0">
|
|
<div class="flex justify-between items-center py-sm border-b border-surface-variant/50">
|
|
<span class="text-on-surface-variant">الأجرة الأساسية</span>
|
|
<span class="text-on-surface tabular-nums">3.00 د.أ</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-sm border-b border-surface-variant/50">
|
|
<span class="text-on-surface-variant">المسافة (3.2 كم)</span>
|
|
<span class="text-on-surface tabular-nums">2.00 د.أ</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-sm border-b border-surface-variant/50">
|
|
<span class="text-on-surface-variant">الوقت (8 دقائق)</span>
|
|
<span class="text-on-surface tabular-nums">0.50 د.أ</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-sm border-b border-surface-variant/50">
|
|
<span class="text-on-surface-variant">انتظار إضافي</span>
|
|
<span class="text-on-surface tabular-nums">0.00 د.أ</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-sm text-success">
|
|
<span>خصم</span>
|
|
<span class="tabular-nums">-1.00 د.أ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="receipt-divider my-md"></div>
|
|
<!-- Total -->
|
|
<div class="flex justify-between items-center mt-md">
|
|
<span class="font-title text-title text-on-surface font-bold">الإجمالي</span>
|
|
<span class="font-display text-display text-on-surface font-bold tabular-nums">4.50 د.أ</span>
|
|
</div>
|
|
<!-- Payment Status prominent indicator -->
|
|
<div class="mt-lg p-md bg-surface-container rounded-lg flex justify-center items-center gap-sm border border-outline-variant/30">
|
|
<span class="material-symbols-outlined text-success" data-icon="verified">verified</span>
|
|
<span class="font-title text-title text-on-surface">تم الدفع</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Action Area -->
|
|
<div class="fixed bottom-0 w-full bg-surface-container-lowest border-t border-surface-variant p-base pb-[max(16px,env(safe-area-inset-bottom))] z-40 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
|
|
<div class="max-w-md mx-auto w-full">
|
|
<button class="w-full h-[52px] bg-primary text-on-primary rounded-xl font-title text-title font-bold flex items-center justify-center gap-sm active:scale-[0.98] transition-transform duration-200">
|
|
<span class="material-symbols-outlined" data-icon="star">star</span>
|
|
قيم رحلتك
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Inline script for material icons rendering -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const icons = document.querySelectorAll('[data-icon]');
|
|
icons.forEach(icon => {
|
|
const iconName = icon.getAttribute('data-icon');
|
|
if (iconName && !icon.textContent) {
|
|
icon.textContent = iconName;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body></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 -->
|
|
<!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 - تقييم الرحلة</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"/>
|
|
<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-fixed": "#ffdbcb",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"surface-container-lowest": "#ffffff",
|
|
"surface-container-high": "#e6e8f2",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"surface-bright": "#f9f9ff",
|
|
"on-tertiary-fixed": "#341100",
|
|
"surface": "#f9f9ff",
|
|
"secondary": "#5b5f64",
|
|
"error-container": "#ffdad6",
|
|
"danger": "#EA4335",
|
|
"tertiary-container": "#c55500",
|
|
"outline": "#727785",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"surface-container": "#ecedf7",
|
|
"on-primary": "#ffffff",
|
|
"surface-tint": "#005bc0",
|
|
"outline-variant": "#c1c6d6",
|
|
"on-tertiary-container": "#0e0200",
|
|
"info": "#4285F4",
|
|
"surface-variant": "#e0e2ec",
|
|
"surface-container-low": "#f2f3fd",
|
|
"on-error": "#ffffff",
|
|
"on-primary-container": "#ffffff",
|
|
"inverse-surface": "#2d3038",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"primary-container": "#1a73e8",
|
|
"warning": "#FBBC04",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"background": "#f9f9ff",
|
|
"on-secondary-fixed": "#181c20",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"on-secondary": "#ffffff",
|
|
"inverse-primary": "#adc7ff",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"on-error-container": "#93000a",
|
|
"tertiary": "#9e4300",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"surface-dim": "#d8d9e3",
|
|
"on-surface-variant": "#414754",
|
|
"success": "#34A853",
|
|
"error": "#ba1a1a",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"on-tertiary": "#ffffff",
|
|
"on-surface": "#191c23",
|
|
"on-secondary-container": "#5f6368",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"primary-fixed": "#d8e2ff",
|
|
"on-background": "#191c23",
|
|
"on-primary-fixed": "#001a41",
|
|
"primary": "#005bbf",
|
|
"inverse-on-surface": "#eff0fa",
|
|
"secondary-container": "#dde0e6"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xxl": "48px",
|
|
"md": "12px",
|
|
"lg": "24px",
|
|
"base": "16px",
|
|
"xl": "32px",
|
|
"xs": "4px",
|
|
"sm": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"caption": ["IBM Plex Sans Arabic"],
|
|
"body": ["IBM Plex Sans Arabic"],
|
|
"label": ["Inter"],
|
|
"headline-lg-mobile": ["IBM Plex Sans Arabic"],
|
|
"display": ["IBM Plex Sans Arabic"],
|
|
"body-lg": ["IBM Plex Sans Arabic"],
|
|
"headline": ["IBM Plex Sans Arabic"],
|
|
"title": ["IBM Plex Sans Arabic"]
|
|
},
|
|
"fontSize": {
|
|
"caption": ["12px", { "lineHeight": "1.2", "fontWeight": "400" }],
|
|
"body": ["14px", { "lineHeight": "1.4", "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" }],
|
|
"headline": ["24px", { "lineHeight": "1.2", "fontWeight": "600" }],
|
|
"title": ["20px", { "lineHeight": "1.2", "fontWeight": "600" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.star-rating .material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
|
|
transition: all 0.2s ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
.star-rating .material-symbols-outlined.active {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
|
|
color: #FBBC04; /* warning color */
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.feedback-chip.active {
|
|
background-color: #d8e2ff; /* primary-fixed */
|
|
border-color: #1a73e8; /* primary-container */
|
|
color: #001a41; /* on-primary-fixed */
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface font-body h-screen flex flex-col items-center justify-center p-base">
|
|
<!-- Main Container - Mobile Centric -->
|
|
<main class="w-full max-w-md bg-surface-container-lowest rounded-xl shadow-lg border border-outline-variant/30 flex flex-col overflow-hidden relative min-h-[600px]">
|
|
<!-- Top App Bar (Simplified for modal-like feel) -->
|
|
<header class="flex flex-row justify-between items-center px-base h-14 w-full z-10 pt-safe">
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-low transition-colors active:scale-95 text-on-surface-variant">
|
|
<span class="material-symbols-outlined" data-icon="close">close</span>
|
|
</button>
|
|
<div class="font-title text-title text-primary">Tripz</div>
|
|
<div class="w-10 h-10"></div> <!-- Spacer for centering -->
|
|
</header>
|
|
<!-- Content Area -->
|
|
<div class="flex-1 flex flex-col p-lg pt-md gap-xl overflow-y-auto pb-32">
|
|
<!-- Driver Info Section -->
|
|
<section class="flex flex-col items-center text-center gap-sm mt-md">
|
|
<div class="relative">
|
|
<img alt="Ahmad K." class="w-[72px] h-[72px] rounded-full object-cover border-2 border-surface shadow-sm" data-alt="A high-quality, professional portrait of a Middle Eastern male driver named Ahmad in his late 30s. He has a warm, welcoming smile and is wearing a neat, casual button-down shirt. The lighting is soft and flattering, creating a trustworthy and reliable impression suitable for a modern ride-hailing application profile picture. The background is a slightly blurred, neutral gray to ensure focus remains strictly on the subject's face." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1hCXlXCP7IS1r-pYLP1JJuDep4SZlHbcFWHlWB0G1kHEt63jvxJIkUq8yyBPspJtrVvOV4-cRvlyWcUcHzs9j7dTm4utB4ahztfc5JhcE4L3C57_r1L4S0Of323yqFHd5eIs95-i-BSbny16WXdXHbhRz2juLPGcn-sUtWUFblW2Sn6FM-yHEIk_yTD3yocztQWjLPpd1esVzn7XC9AzLYiL51mh42vi7U-wqJCRCESy6j4U4_My-Tbe8QVBYKODrUITsL4DZWY0"/>
|
|
<div class="absolute -bottom-1 -right-1 bg-surface-container-lowest rounded-full p-0.5 shadow-sm border border-outline-variant/50">
|
|
<div class="bg-primary text-on-primary w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold">
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">verified</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-xs mt-sm">
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">أحمد ك.</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">كيف كانت رحلتك مع أحمد؟</p>
|
|
</div>
|
|
</section>
|
|
<!-- Rating Section -->
|
|
<section class="flex flex-col items-center gap-md">
|
|
<div class="flex flex-row-reverse justify-center gap-sm star-rating" id="star-container">
|
|
<!-- Stars added via JS to handle selection logic easily -->
|
|
<span class="material-symbols-outlined text-outline text-5xl" data-value="1">star</span>
|
|
<span class="material-symbols-outlined text-outline text-5xl" data-value="2">star</span>
|
|
<span class="material-symbols-outlined text-outline text-5xl" data-value="3">star</span>
|
|
<span class="material-symbols-outlined text-outline text-5xl" data-value="4">star</span>
|
|
<span class="material-symbols-outlined text-outline text-5xl" data-value="5">star</span>
|
|
</div>
|
|
<p class="font-body text-body text-on-surface-variant h-5 transition-opacity opacity-0" id="rating-text">ممتاز!</p>
|
|
</section>
|
|
<!-- Feedback Chips (Hidden initially, shown after rating) -->
|
|
<section class="flex flex-col gap-md opacity-50 pointer-events-none transition-opacity duration-300" id="feedback-section">
|
|
<p class="font-body-lg text-body-lg text-on-surface font-medium mb-xs">ما الذي أعجبك؟</p>
|
|
<div class="flex flex-wrap gap-sm">
|
|
<button class="feedback-chip px-4 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body text-body hover:bg-surface-container-low transition-colors active:scale-95">سيارة نظيفة</button>
|
|
<button class="feedback-chip px-4 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body text-body hover:bg-surface-container-low transition-colors active:scale-95">قيادة ممتازة</button>
|
|
<button class="feedback-chip px-4 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body text-body hover:bg-surface-container-low transition-colors active:scale-95">ودود</button>
|
|
<button class="feedback-chip px-4 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body text-body hover:bg-surface-container-low transition-colors active:scale-95">في الوقت المحدد</button>
|
|
<button class="feedback-chip px-4 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body text-body hover:bg-surface-container-low transition-colors active:scale-95">موسيقى جيدة</button>
|
|
</div>
|
|
</section>
|
|
<!-- Comment Section -->
|
|
<section class="flex flex-col gap-sm opacity-50 pointer-events-none transition-opacity duration-300" id="comment-section">
|
|
<label class="sr-only" for="comment">أضف تعليقاً</label>
|
|
<textarea class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl p-md font-body text-body text-on-surface placeholder-on-surface-variant focus:ring-2 focus:ring-primary focus:border-primary transition-shadow resize-none" id="comment" placeholder="أضف تعليقاً... (اختياري)" rows="3"></textarea>
|
|
</section>
|
|
</div>
|
|
<!-- Bottom Action Bar (Fixed to bottom of container) -->
|
|
<div class="absolute bottom-0 left-0 w-full p-base bg-surface-container-lowest border-t border-surface-container-highest z-20">
|
|
<button class="w-full h-[52px] bg-primary text-on-primary rounded-[12px] font-title text-title flex items-center justify-center transition-all duration-200 disabled:opacity-50 disabled:bg-surface-variant disabled:text-on-surface-variant disabled:cursor-not-allowed hover:bg-on-primary-fixed-variant active:scale-[0.98]" disabled="" id="submit-btn">
|
|
إرسال
|
|
</button>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const stars = document.querySelectorAll('.star-rating span');
|
|
const ratingTextContainer = document.getElementById('rating-text');
|
|
const feedbackSection = document.getElementById('feedback-section');
|
|
const commentSection = document.getElementById('comment-section');
|
|
const submitBtn = document.getElementById('submit-btn');
|
|
const feedbackChips = document.querySelectorAll('.feedback-chip');
|
|
|
|
let currentRating = 0;
|
|
|
|
const ratingTexts = {
|
|
1: 'سيء جداً',
|
|
2: 'سيء',
|
|
3: 'مقبول',
|
|
4: 'جيد جداً',
|
|
5: 'ممتاز!'
|
|
};
|
|
|
|
// Star Rating Logic
|
|
stars.forEach((star, index) => {
|
|
star.addEventListener('click', () => {
|
|
const value = parseInt(star.getAttribute('data-value'));
|
|
currentRating = value;
|
|
|
|
// Reset all stars
|
|
stars.forEach(s => {
|
|
s.classList.remove('active', 'text-warning');
|
|
s.classList.add('text-outline');
|
|
});
|
|
|
|
// Activate clicked star and all preceding stars (in RTL, preceding are right to left, but DOM order matters)
|
|
// The flex-row-reverse makes them visually right-to-left, but in DOM they are left-to-right (1 to 5)
|
|
// We need to highlight stars from index 0 to the clicked index
|
|
for (let i = 0; i < value; i++) {
|
|
stars[i].classList.add('active', 'text-warning');
|
|
stars[i].classList.remove('text-outline');
|
|
}
|
|
|
|
// Update Text
|
|
ratingTextContainer.textContent = ratingTexts[value] || '';
|
|
ratingTextContainer.classList.remove('opacity-0');
|
|
|
|
// Unlock subsequent sections
|
|
feedbackSection.classList.remove('opacity-50', 'pointer-events-none');
|
|
commentSection.classList.remove('opacity-50', 'pointer-events-none');
|
|
submitBtn.disabled = false;
|
|
|
|
// Add subtle animation to sections appearing
|
|
feedbackSection.classList.add('animate-fade-in-up');
|
|
commentSection.classList.add('animate-fade-in-up');
|
|
});
|
|
});
|
|
|
|
// Feedback Chips Toggle Logic
|
|
feedbackChips.forEach(chip => {
|
|
chip.addEventListener('click', () => {
|
|
chip.classList.toggle('active');
|
|
});
|
|
});
|
|
|
|
// Submit Button Interaction (Mock)
|
|
submitBtn.addEventListener('click', () => {
|
|
if(currentRating > 0) {
|
|
const originalText = submitBtn.textContent;
|
|
submitBtn.innerHTML = '<span class="material-symbols-outlined animate-spin" style="font-variation-settings: \'FILL\' 0;">progress_activity</span>';
|
|
submitBtn.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
submitBtn.innerHTML = '<span class="material-symbols-outlined mr-2">check</span> شكراً لتقييمك';
|
|
submitBtn.classList.replace('bg-primary', 'bg-success');
|
|
submitBtn.classList.replace('hover:bg-on-primary-fixed-variant', 'hover:bg-success');
|
|
}, 1500);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |