feat: implement splash and onboarding flows, update app assets, and add project design documentation
This commit is contained in:
Hamza-Ayed
@@ -0,0 +1,280 @@
|
||||
<!-- 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 -->
|
||||
Reference in New Issue
Block a user