276 lines
16 KiB
HTML
276 lines
16 KiB
HTML
<!-- Rating Screen - Tripz -->
|
|
<!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>Tripz - تقييم الرحلة</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&family=Inter:wght@400;500;600&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=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": {
|
|
"caption": ["IBM Plex Sans Arabic"],
|
|
"body": ["IBM Plex Sans Arabic"],
|
|
"label": ["Inter"],
|
|
"headline-lg-mobile": ["IBM Plex Sans Arabic"],
|
|
"display": ["IBM Plex Sans Arabic"],
|
|
"body-lg": ["IBM Plex Sans Arabic"],
|
|
"headline": ["IBM Plex Sans Arabic"],
|
|
"title": ["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-lg-mobile": ["28px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"display": ["32px", { "lineHeight": "1.2", "fontWeight": "700" }],
|
|
"body-lg": ["16px", { "lineHeight": "1.4", "fontWeight": "400" }],
|
|
"headline": ["24px", { "lineHeight": "1.2", "fontWeight": "600" }],
|
|
"title": ["20px", { "lineHeight": "1.2", "fontWeight": "600" }]
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
.star-rating .material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48;
|
|
transition: all 0.2s ease-in-out;
|
|
cursor: pointer;
|
|
}
|
|
.star-rating .material-symbols-outlined.active {
|
|
font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 48;
|
|
color: #FBBC04; /* warning color */
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
.feedback-chip.active {
|
|
background-color: #d8e2ff; /* primary-fixed */
|
|
border-color: #1a73e8; /* primary-container */
|
|
color: #001a41; /* on-primary-fixed */
|
|
}
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface font-body h-screen flex flex-col items-center justify-center p-base">
|
|
<!-- Main Container - Mobile Centric -->
|
|
<main class="w-full max-w-md bg-surface-container-lowest rounded-xl shadow-lg border border-outline-variant/30 flex flex-col overflow-hidden relative min-h-[600px]">
|
|
<!-- Top App Bar (Simplified for modal-like feel) -->
|
|
<header class="flex flex-row justify-between items-center px-base h-14 w-full z-10 pt-safe">
|
|
<button class="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container-low transition-colors active:scale-95 text-on-surface-variant">
|
|
<span class="material-symbols-outlined" data-icon="close">close</span>
|
|
</button>
|
|
<div class="font-title text-title text-primary">Tripz</div>
|
|
<div class="w-10 h-10"></div> <!-- Spacer for centering -->
|
|
</header>
|
|
<!-- Content Area -->
|
|
<div class="flex-1 flex flex-col p-lg pt-md gap-xl overflow-y-auto pb-32">
|
|
<!-- Driver Info Section -->
|
|
<section class="flex flex-col items-center text-center gap-sm mt-md">
|
|
<div class="relative">
|
|
<img alt="Ahmad K." class="w-[72px] h-[72px] rounded-full object-cover border-2 border-surface shadow-sm" data-alt="A high-quality, professional portrait of a Middle Eastern male driver named Ahmad in his late 30s. He has a warm, welcoming smile and is wearing a neat, casual button-down shirt. The lighting is soft and flattering, creating a trustworthy and reliable impression suitable for a modern ride-hailing application profile picture. The background is a slightly blurred, neutral gray to ensure focus remains strictly on the subject's face." src="https://lh3.googleusercontent.com/aida-public/AB6AXuB1hCXlXCP7IS1r-pYLP1JJuDep4SZlHbcFWHlWB0G1kHEt63jvxJIkUq8yyBPspJtrVvOV4-cRvlyWcUcHzs9j7dTm4utB4ahztfc5JhcE4L3C57_r1L4S0Of323yqFHd5eIs95-i-BSbny16WXdXHbhRz2juLPGcn-sUtWUFblW2Sn6FM-yHEIk_yTD3yocztQWjLPpd1esVzn7XC9AzLYiL51mh42vi7U-wqJCRCESy6j4U4_My-Tbe8QVBYKODrUITsL4DZWY0"/>
|
|
<div class="absolute -bottom-1 -right-1 bg-surface-container-lowest rounded-full p-0.5 shadow-sm border border-outline-variant/50">
|
|
<div class="bg-primary text-on-primary w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold">
|
|
<span class="material-symbols-outlined text-[14px]" style="font-variation-settings: 'FILL' 1;">verified</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col gap-xs mt-sm">
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-on-surface">أحمد ك.</h1>
|
|
<p class="font-body-lg text-body-lg text-on-surface-variant">كيف كانت رحلتك مع أحمد؟</p>
|
|
</div>
|
|
</section>
|
|
<!-- Rating Section -->
|
|
<section class="flex flex-col items-center gap-md">
|
|
<div class="flex flex-row-reverse justify-center gap-sm star-rating" id="star-container">
|
|
<!-- Stars added via JS to handle selection logic easily -->
|
|
<span class="material-symbols-outlined text-outline text-5xl" data-value="1">star</span>
|
|
<span class="material-symbols-outlined text-outline text-5xl" data-value="2">star</span>
|
|
<span class="material-symbols-outlined text-outline text-5xl" data-value="3">star</span>
|
|
<span class="material-symbols-outlined text-outline text-5xl" data-value="4">star</span>
|
|
<span class="material-symbols-outlined text-outline text-5xl" data-value="5">star</span>
|
|
</div>
|
|
<p class="font-body text-body text-on-surface-variant h-5 transition-opacity opacity-0" id="rating-text">ممتاز!</p>
|
|
</section>
|
|
<!-- Feedback Chips (Hidden initially, shown after rating) -->
|
|
<section class="flex flex-col gap-md opacity-50 pointer-events-none transition-opacity duration-300" id="feedback-section">
|
|
<p class="font-body-lg text-body-lg text-on-surface font-medium mb-xs">ما الذي أعجبك؟</p>
|
|
<div class="flex flex-wrap gap-sm">
|
|
<button class="feedback-chip px-4 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body text-body hover:bg-surface-container-low transition-colors active:scale-95">سيارة نظيفة</button>
|
|
<button class="feedback-chip px-4 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body text-body hover:bg-surface-container-low transition-colors active:scale-95">قيادة ممتازة</button>
|
|
<button class="feedback-chip px-4 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body text-body hover:bg-surface-container-low transition-colors active:scale-95">ودود</button>
|
|
<button class="feedback-chip px-4 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body text-body hover:bg-surface-container-low transition-colors active:scale-95">في الوقت المحدد</button>
|
|
<button class="feedback-chip px-4 py-2 rounded-full border border-outline-variant text-on-surface-variant font-body text-body hover:bg-surface-container-low transition-colors active:scale-95">موسيقى جيدة</button>
|
|
</div>
|
|
</section>
|
|
<!-- Comment Section -->
|
|
<section class="flex flex-col gap-sm opacity-50 pointer-events-none transition-opacity duration-300" id="comment-section">
|
|
<label class="sr-only" for="comment">أضف تعليقاً</label>
|
|
<textarea class="w-full bg-surface-container-lowest border border-outline-variant rounded-xl p-md font-body text-body text-on-surface placeholder-on-surface-variant focus:ring-2 focus:ring-primary focus:border-primary transition-shadow resize-none" id="comment" placeholder="أضف تعليقاً... (اختياري)" rows="3"></textarea>
|
|
</section>
|
|
</div>
|
|
<!-- Bottom Action Bar (Fixed to bottom of container) -->
|
|
<div class="absolute bottom-0 left-0 w-full p-base bg-surface-container-lowest border-t border-surface-container-highest z-20">
|
|
<button class="w-full h-[52px] bg-primary text-on-primary rounded-[12px] font-title text-title flex items-center justify-center transition-all duration-200 disabled:opacity-50 disabled:bg-surface-variant disabled:text-on-surface-variant disabled:cursor-not-allowed hover:bg-on-primary-fixed-variant active:scale-[0.98]" disabled="" id="submit-btn">
|
|
إرسال
|
|
</button>
|
|
</div>
|
|
</main>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const stars = document.querySelectorAll('.star-rating span');
|
|
const ratingTextContainer = document.getElementById('rating-text');
|
|
const feedbackSection = document.getElementById('feedback-section');
|
|
const commentSection = document.getElementById('comment-section');
|
|
const submitBtn = document.getElementById('submit-btn');
|
|
const feedbackChips = document.querySelectorAll('.feedback-chip');
|
|
|
|
let currentRating = 0;
|
|
|
|
const ratingTexts = {
|
|
1: 'سيء جداً',
|
|
2: 'سيء',
|
|
3: 'مقبول',
|
|
4: 'جيد جداً',
|
|
5: 'ممتاز!'
|
|
};
|
|
|
|
// Star Rating Logic
|
|
stars.forEach((star, index) => {
|
|
star.addEventListener('click', () => {
|
|
const value = parseInt(star.getAttribute('data-value'));
|
|
currentRating = value;
|
|
|
|
// Reset all stars
|
|
stars.forEach(s => {
|
|
s.classList.remove('active', 'text-warning');
|
|
s.classList.add('text-outline');
|
|
});
|
|
|
|
// Activate clicked star and all preceding stars (in RTL, preceding are right to left, but DOM order matters)
|
|
// The flex-row-reverse makes them visually right-to-left, but in DOM they are left-to-right (1 to 5)
|
|
// We need to highlight stars from index 0 to the clicked index
|
|
for (let i = 0; i < value; i++) {
|
|
stars[i].classList.add('active', 'text-warning');
|
|
stars[i].classList.remove('text-outline');
|
|
}
|
|
|
|
// Update Text
|
|
ratingTextContainer.textContent = ratingTexts[value] || '';
|
|
ratingTextContainer.classList.remove('opacity-0');
|
|
|
|
// Unlock subsequent sections
|
|
feedbackSection.classList.remove('opacity-50', 'pointer-events-none');
|
|
commentSection.classList.remove('opacity-50', 'pointer-events-none');
|
|
submitBtn.disabled = false;
|
|
|
|
// Add subtle animation to sections appearing
|
|
feedbackSection.classList.add('animate-fade-in-up');
|
|
commentSection.classList.add('animate-fade-in-up');
|
|
});
|
|
});
|
|
|
|
// Feedback Chips Toggle Logic
|
|
feedbackChips.forEach(chip => {
|
|
chip.addEventListener('click', () => {
|
|
chip.classList.toggle('active');
|
|
});
|
|
});
|
|
|
|
// Submit Button Interaction (Mock)
|
|
submitBtn.addEventListener('click', () => {
|
|
if(currentRating > 0) {
|
|
const originalText = submitBtn.textContent;
|
|
submitBtn.innerHTML = '<span class="material-symbols-outlined animate-spin" style="font-variation-settings: \'FILL\' 0;">progress_activity</span>';
|
|
submitBtn.disabled = true;
|
|
|
|
setTimeout(() => {
|
|
submitBtn.innerHTML = '<span class="material-symbols-outlined mr-2">check</span> شكراً لتقييمك';
|
|
submitBtn.classList.replace('bg-primary', 'bg-success');
|
|
submitBtn.classList.replace('hover:bg-on-primary-fixed-variant', 'hover:bg-success');
|
|
}, 1500);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
</body></html> |