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