226 lines
10 KiB
HTML
226 lines
10 KiB
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 -->
|