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