194 lines
9.4 KiB
HTML
194 lines
9.4 KiB
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) -->
|