308 lines
14 KiB
HTML
308 lines
14 KiB
HTML
<!-- Trip Invoice - Polished Refinement 2 -->
|
|
<!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 - Trip Receipt</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<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@400;500;600;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"inverse-on-surface": "#eff0fa",
|
|
"on-primary": "#ffffff",
|
|
"success": "#34A853",
|
|
"error": "#ba1a1a",
|
|
"danger": "#EA4335",
|
|
"on-secondary-container": "#5f6368",
|
|
"on-background": "#191c23",
|
|
"on-secondary-fixed": "#181c20",
|
|
"surface-tint": "#005bc0",
|
|
"primary-container": "#1a73e8",
|
|
"surface": "#f9f9ff",
|
|
"on-primary-fixed-variant": "#004493",
|
|
"tertiary-fixed-dim": "#ffb691",
|
|
"surface-dim": "#d8d9e3",
|
|
"surface-container-high": "#e6e8f2",
|
|
"surface-container-low": "#f2f3fd",
|
|
"secondary-fixed-dim": "#c3c7cc",
|
|
"surface-raised-dark": "#2D2D2D",
|
|
"secondary-container": "#dde0e6",
|
|
"surface-bright": "#f9f9ff",
|
|
"surface-variant": "#e0e2ec",
|
|
"on-secondary": "#ffffff",
|
|
"on-secondary-fixed-variant": "#43474c",
|
|
"surface-container-lowest": "#ffffff",
|
|
"tertiary-fixed": "#ffdbcb",
|
|
"surface-container-highest": "#e0e2ec",
|
|
"inverse-primary": "#adc7ff",
|
|
"primary-fixed-dim": "#adc7ff",
|
|
"on-tertiary": "#ffffff",
|
|
"sidebar-dark": "#1A1A2E",
|
|
"on-primary-fixed": "#001a41",
|
|
"on-primary-container": "#ffffff",
|
|
"outline-variant": "#c1c6d6",
|
|
"warning": "#FBBC04",
|
|
"on-surface": "#191c23",
|
|
"inverse-surface": "#2d3038",
|
|
"primary": "#005bbf",
|
|
"outline": "#727785",
|
|
"on-tertiary-fixed-variant": "#783100",
|
|
"on-error": "#ffffff",
|
|
"secondary-fixed": "#dfe3e8",
|
|
"tertiary-container": "#c55500",
|
|
"on-tertiary-container": "#0e0200",
|
|
"on-tertiary-fixed": "#341100",
|
|
"on-surface-variant": "#414754",
|
|
"background": "#f9f9ff",
|
|
"info": "#4285F4",
|
|
"surface-container": "#ecedf7",
|
|
"tertiary": "#9e4300",
|
|
"secondary": "#5b5f64",
|
|
"on-error-container": "#93000a",
|
|
"error-container": "#ffdad6",
|
|
"primary-fixed": "#d8e2ff"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xs": "4px",
|
|
"xl": "32px",
|
|
"sm": "8px",
|
|
"md": "12px",
|
|
"xxl": "48px",
|
|
"lg": "24px",
|
|
"base": "16px"
|
|
},
|
|
"fontFamily": {
|
|
"body-lg": [
|
|
"IBM Plex Sans Arabic"
|
|
],
|
|
"body": [
|
|
"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"
|
|
],
|
|
"caption": [
|
|
"IBM Plex Sans Arabic"
|
|
]
|
|
},
|
|
"fontSize": {
|
|
"body-lg": [
|
|
"16px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"fontWeight": "400"
|
|
}
|
|
],
|
|
"body": [
|
|
"14px",
|
|
{
|
|
"lineHeight": "1.4",
|
|
"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"
|
|
}
|
|
],
|
|
"caption": [
|
|
"12px",
|
|
{
|
|
"lineHeight": "1.2",
|
|
"fontWeight": "400"
|
|
}
|
|
]
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
background-color: #f9f9ff; /* bg-background */
|
|
}
|
|
/* Map pattern background for a clean modern look without loading real maps in mockup */
|
|
.map-pattern {
|
|
background-image: radial-gradient(#e0e2ec 1px, transparent 1px);
|
|
background-size: 16px 16px;
|
|
background-color: #f9f9ff;
|
|
}
|
|
/* Dashed line for receipt effect */
|
|
.receipt-divider {
|
|
border-top: 2px dashed #e0e2ec;
|
|
}
|
|
|
|
.receipt-bg {
|
|
background-image: radial-gradient(#c1c6d6 1px, transparent 1px);
|
|
background-size: 8px 8px;
|
|
background-color: rgba(249, 249, 255, 0.5); /* slightly transparent surface */
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="antialiased text-on-surface font-body font-body selection:bg-primary-container selection:text-on-primary-container flex flex-col h-screen overflow-hidden">
|
|
<!-- TopAppBar -->
|
|
<header class="w-full top-0 sticky bg-surface flex flex-row-reverse justify-between items-center px-base h-16 z-50">
|
|
<button aria-label="Back" class="p-2 rounded-full hover:bg-surface-variant/50 transition-colors active:scale-95 duration-200">
|
|
<span aria-hidden="true" class="material-symbols-outlined text-on-surface-variant" data-icon="arrow_forward">arrow_forward</span>
|
|
</button>
|
|
<div class="flex-1 text-center">
|
|
<h1 class="font-headline text-headline text-primary font-bold">تمت الرحلة</h1>
|
|
</div>
|
|
<div class="w-10"></div> <!-- Spacer for balance -->
|
|
</header>
|
|
<!-- Main Content Area (Scrollable) -->
|
|
<main class="flex-1 overflow-y-auto px-base py-lg pb-[120px] max-w-md mx-auto w-full">
|
|
<!-- Status Banner -->
|
|
<div class="flex flex-col items-center justify-center mb-lg animate-fade-in-up">
|
|
<div class="flex items-center gap-sm mb-xs">
|
|
<div class="w-8 h-8 bg-success/20 rounded-full flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-success text-xl" data-icon="check">check</span>
|
|
</div>
|
|
<h2 class="font-title text-title text-on-surface font-bold">الرحلة مكتملة بنجاح</h2>
|
|
</div>
|
|
<p class="font-body text-body text-on-surface-variant text-center">شكراً لاختيارك مسار. نأمل أن تكون رحلتك مريحة.</p>
|
|
</div>
|
|
<!-- Receipt Card -->
|
|
<div class="bg-surface-container-lowest rounded-xl border border-surface-variant shadow-[0_1px_3px_rgba(0,0,0,0.12),0_1px_2px_rgba(0,0,0,0.08)] overflow-hidden">
|
|
<!-- Map Thumbnail -->
|
|
<div class="h-32 w-full map-pattern relative border-b border-surface-variant">
|
|
<!-- Decorative Route Line -->
|
|
<svg class="absolute inset-0 w-full h-full" preserveaspectratio="none" viewbox="0 0 100 100">
|
|
<path class="opacity-80" d="M 20 80 Q 40 40 80 20" fill="none" stroke="#005bbf" stroke-dasharray="8 4" stroke-linecap="round" stroke-width="4"></path>
|
|
</svg>
|
|
<div class="absolute bottom-4 right-4 bg-primary text-on-primary font-label text-label px-3 py-1 rounded-full shadow-md">
|
|
3.2 كم
|
|
</div>
|
|
</div>
|
|
<div class="p-base relative">
|
|
<div class="flex justify-between items-center mb-lg">
|
|
<div class="flex items-center gap-sm">
|
|
<span class="material-symbols-outlined text-on-surface-variant" data-icon="payments">payments</span>
|
|
<span class="font-body-lg text-body-lg text-on-surface">طريقة الدفع</span>
|
|
</div>
|
|
<span class="font-title text-title text-primary">نقداً</span>
|
|
</div>
|
|
<div class="receipt-divider my-md"></div>
|
|
<!-- Fare Details with Receipt Background -->
|
|
<div class="receipt-bg -mx-base px-base py-md font-label text-label">
|
|
<div class="space-y-0">
|
|
<div class="flex justify-between items-center py-sm border-b border-surface-variant/50">
|
|
<span class="text-on-surface-variant">الأجرة الأساسية</span>
|
|
<span class="text-on-surface tabular-nums">3.00 د.أ</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-sm border-b border-surface-variant/50">
|
|
<span class="text-on-surface-variant">المسافة (3.2 كم)</span>
|
|
<span class="text-on-surface tabular-nums">2.00 د.أ</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-sm border-b border-surface-variant/50">
|
|
<span class="text-on-surface-variant">الوقت (8 دقائق)</span>
|
|
<span class="text-on-surface tabular-nums">0.50 د.أ</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-sm border-b border-surface-variant/50">
|
|
<span class="text-on-surface-variant">انتظار إضافي</span>
|
|
<span class="text-on-surface tabular-nums">0.00 د.أ</span>
|
|
</div>
|
|
<div class="flex justify-between items-center py-sm text-success">
|
|
<span>خصم</span>
|
|
<span class="tabular-nums">-1.00 د.أ</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="receipt-divider my-md"></div>
|
|
<!-- Total -->
|
|
<div class="flex justify-between items-center mt-md">
|
|
<span class="font-title text-title text-on-surface font-bold">الإجمالي</span>
|
|
<span class="font-display text-display text-on-surface font-bold tabular-nums">4.50 د.أ</span>
|
|
</div>
|
|
<!-- Payment Status prominent indicator -->
|
|
<div class="mt-lg p-md bg-surface-container rounded-lg flex justify-center items-center gap-sm border border-outline-variant/30">
|
|
<span class="material-symbols-outlined text-success" data-icon="verified">verified</span>
|
|
<span class="font-title text-title text-on-surface">تم الدفع</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Action Area -->
|
|
<div class="fixed bottom-0 w-full bg-surface-container-lowest border-t border-surface-variant p-base pb-[max(16px,env(safe-area-inset-bottom))] z-40 shadow-[0_-4px_6px_-1px_rgba(0,0,0,0.05)]">
|
|
<div class="max-w-md mx-auto w-full">
|
|
<button class="w-full h-[52px] bg-primary text-on-primary rounded-xl font-title text-title font-bold flex items-center justify-center gap-sm active:scale-[0.98] transition-transform duration-200">
|
|
<span class="material-symbols-outlined" data-icon="star">star</span>
|
|
قيم رحلتك
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- Inline script for material icons rendering -->
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const icons = document.querySelectorAll('[data-icon]');
|
|
icons.forEach(icon => {
|
|
const iconName = icon.getAttribute('data-icon');
|
|
if (iconName && !icon.textContent) {
|
|
icon.textContent = iconName;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body></html>
|
|
|
|
<!-- During Trip - Map Focused (No Nav) -->
|