Spaces:
Runtime error
Runtime error
| <html lang="vi"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Hành trình khách hàng - {{ case.patient_name }} | Nha khoa TTL1979</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| body { | |
| background-color: #000; | |
| color: #fff; | |
| font-family: 'Arial', sans-serif; | |
| } | |
| .glow-effect { | |
| position: fixed; | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 50%; | |
| filter: blur(60px); | |
| opacity: 0.3; | |
| z-index: 0; | |
| } | |
| .journey-hero { | |
| background: linear-gradient(135deg, #111827 0%, #1e3a8a 100%); | |
| } | |
| .journey-card { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 16px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.5); | |
| background: rgba(30, 41, 59, 0.7); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .timeline { | |
| position: relative; | |
| padding-left: 30px; | |
| } | |
| .timeline::before { | |
| content: ''; | |
| position: absolute; | |
| left: 10px; | |
| top: 0; | |
| bottom: 0; | |
| width: 2px; | |
| background: linear-gradient(to bottom, #38b2ac, #3b82f6); | |
| } | |
| .timeline-item { | |
| position: relative; | |
| margin-bottom: 30px; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -30px; | |
| top: 5px; | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: #38b2ac; | |
| border: 2px solid #fff; | |
| } | |
| .testimonial-quote { | |
| position: relative; | |
| } | |
| .testimonial-quote::before { | |
| content: '"'; | |
| position: absolute; | |
| top: -20px; | |
| left: -10px; | |
| font-size: 60px; | |
| color: rgba(56, 178, 172, 0.3); | |
| font-family: serif; | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| background: rgba(255,255,255,0.1); | |
| border-radius: 3px; | |
| overflow: hidden; | |
| } | |
| .progress-fill { | |
| height: 100%; | |
| background: linear-gradient(to right, #38b2ac, #3b82f6); | |
| border-radius: 3px; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background: #38b2ac; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .before-after-slider { | |
| position: relative; | |
| height: 400px; | |
| overflow: hidden; | |
| border-radius: 12px; | |
| } | |
| .before-image, .after-image { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| } | |
| .slider-handle { | |
| position: absolute; | |
| width: 4px; | |
| height: 100%; | |
| background: white; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| cursor: ew-resize; | |
| z-index: 10; | |
| } | |
| .slider-handle::after { | |
| content: ''; | |
| position: absolute; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: white; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| box-shadow: 0 0 10px rgba(0,0,0,0.5); | |
| } | |
| .slider-handle::before { | |
| content: '◀ ▶'; | |
| position: absolute; | |
| color: #333; | |
| font-size: 12px; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| z-index: 11; | |
| } | |
| .milestone-card { | |
| transition: all 0.3s ease; | |
| } | |
| .milestone-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(59, 130, 246, 0.3); | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Floating Glow Effects --> | |
| <div class="glow-effect" style="top: 10%; left: 10%; background: #38b2ac;"></div> | |
| <div class="glow-effect" style="top: 60%; right: 5%; background: #3b82f6;"></div> | |
| <!-- Header --> | |
| <header class="py-6 px-4 fixed w-full z-50 bg-black bg-opacity-80 backdrop-filter backdrop-blur-sm"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">TTL1979</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="nav-link text-white">Home</a> | |
| <a href="thuvien.html" class="nav-link text-white">Thư viện</a> | |
| <a href="dichvu.html" class="nav-link text-white">Dịch vụ</a> | |
| <a href="lienhe.html" class="nav-link text-white">Liên hệ</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="min-h-screen flex items-center justify-center pt-20 px-4 relative overflow-hidden journey-hero"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2 relative z-10"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Hành Trình Của {{ case.patient_name }}</h1> | |
| <p class="text-xl text-gray-300 mb-8">{{ case.duration }} {{ case.treatment }} đã thay đổi nụ cười và sự tự tin của {{ case.patient_name | split(' ') | last }}</p> | |
| <div class="flex items-center mb-8"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500 mr-4"> | |
| <img src="{{ case.patient_avatar }}" alt="{{ case.patient_name }}" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold">{{ case.patient_name }}</h3> | |
| <p class="text-teal-400">Khách hàng {{ case.treatment }}</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <div class="bg-gray-800 bg-opacity-50 px-4 py-2 rounded-lg"> | |
| <p class="text-sm text-gray-400">Thời gian</p> | |
| <p class="font-medium">{{ case.duration }}</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 px-4 py-2 rounded-lg"> | |
| <p class="text-sm text-gray-400">Đánh giá</p> | |
| <div class="flex"> | |
| {% for i in range(case.patient_rating | int) %} | |
| <i class="fas fa-star text-yellow-400"></i> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="before-after-slider"> | |
| <img src="{{ case.before_image }}" alt="Before" class="before-image"> | |
| <img src="{{ case.after_image }}" alt="After" class="after-image" style="clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);"> | |
| <div class="slider-handle"></div> | |
| </div> | |
| <div class="flex justify-between mt-2 text-sm text-gray-400"> | |
| <span>Trước điều trị</span> | |
| <span>Sau điều trị</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent"></div> | |
| </section> | |
| <!-- Journey Details --> | |
| <section class="py-20 px-4 relative"> | |
| <div class="container mx-auto max-w-5xl"> | |
| <div class="journey-card p-8 mb-16"> | |
| <h2 class="text-3xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Câu Chuyện Của {{ case.patient_name }}</h2> | |
| <div class="grid md:grid-cols-2 gap-8 mb-12"> | |
| <div> | |
| <p class="text-gray-300 mb-4">{{ case.description }}</p> | |
| <p class="text-gray-300">"Tôi đã từng rất ngại cười vì hàm răng không đều. Nhưng sau {{ case.duration }} kiên trì với {{ case.treatment }}, giờ đây tôi có thể tự tin cười lớn mà không cần phải che miệng nữa."</p> | |
| </div> | |
| <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-bold mb-4">Thông tin điều trị</h3> | |
| <div class="space-y-4"> | |
| <div> | |
| <p class="text-sm text-gray-400">Phương pháp</p> | |
| <p class="font-medium">{{ case.treatment }}</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Bác sĩ điều trị</p> | |
| <p class="font-medium">{{ doctor.name }}</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Thời gian</p> | |
| <p class="font-medium">{{ case.duration }} ({{ case.date }})</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Số lượng khay niềng</p> | |
| <p class="font-medium">32 khay</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 class="text-2xl font-bold mb-6">Các Mốc Quan Trọng</h3> | |
| <div class="timeline"> | |
| {% for milestone in milestones %} | |
| <div class="timeline-item"> | |
| <div class="milestone-card bg-gray-800 bg-opacity-50 p-6 rounded-lg"> | |
| <div class="flex items-center mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-teal-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-calendar-check text-white"></i> | |
| </div> | |
| <h4 class="font-bold text-lg">{{ milestone.milestone_title }}</h4> | |
| </div> | |
| <p class="text-gray-300">{{ milestone.milestone_description }}</p> | |
| <div class="mt-3 flex"> | |
| {% for tag in milestone.tags.split(',') %} | |
| <span class="bg-teal-900 bg-opacity-50 text-teal-300 text-xs px-2 py-1 rounded mr-2">{{ tag }}</span> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| <div class="journey-card p-8"> | |
| <h3 class="text-2xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Cảm Nhận Sau Điều Trị</h3> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div> | |
| <div class="testimonial-quote pl-4 mb-8"> | |
| <p class="text-gray-300 italic text-lg">"Tôi không ngờ {{ case.treatment }} lại hiệu quả đến vậy. Cảm ơn bác sĩ và đội ngũ nha khoa đã đồng hành cùng tôi suốt {{ case.duration }} qua. Giờ đây tôi có thể tự tin cười nói mà không cần phải che miệng nữa."</p> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-16 h-16 rounded-full overflow-hidden border-2 border-teal-500 mr-4"> | |
| <img src="{{ case.patient_avatar }}" alt="{{ case.patient_name }}" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">{{ case.patient_name }}</h3> | |
| <p class="text-teal-400 text-sm">Khách hàng {{ case.treatment }}</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="bg-gray-800 bg-opacity-50 p-6 rounded-lg h-full"> | |
| <h4 class="font-bold text-lg mb-4">Đánh giá của bác sĩ</h4> | |
| <p class="text-gray-300 mb-4">"Trường hợp của {{ case.patient_name | split(' ') | last }} là một ví dụ điển hình về hiệu quả của {{ case.treatment }}. {{ case.patient_name | split(' ') | last }} đã tuân thủ rất tốt phác đồ điều trị và kết quả đạt được vượt ngoài mong đợi."</p> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden border-2 border-blue-500 mr-3"> | |
| <img src="{{ doctor.photo }}" alt="{{ doctor.name }}" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <p class="font-medium">{{ doctor.name }}</p> | |
| <p class="text-blue-400 text-sm">{{ doctor.specialty }}</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Section --> | |
| <section class="py-16 px-4 bg-gray-900 bg-opacity-50"> | |
| <div class="container mx-auto max-w-5xl"> | |
| <h2 class="text-3xl font-bold mb-8 text-center bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Hình Ảnh Quá Trình</h2> | |
| <div class="grid grid-cols-2 md:grid-cols-3 gap-4"> | |
| {% set progress_images = case.progress_images | from_json %} | |
| {% for image in progress_images %} | |
| <div class="overflow-hidden rounded-lg"> | |
| <img src="{{ image.url }}" alt="{{ image.caption }}" class="w-full h-48 object-cover hover:scale-105 transition duration-300"> | |
| <p class="text-center text-sm mt-2 text-gray-400">{{ image.caption }}</p> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-4 relative overflow-hidden" style="background: linear-gradient(135deg, #111827 0%, #1e3a8a 100%);"> | |
| <div class="container mx-auto max-w-4xl text-center relative z-10"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Bạn Cũng Muốn Có Nụ Cười Hoàn Hảo?</h2> | |
| <p class="text-xl text-gray-300 mb-8">Hãy để chúng tôi đồng hành cùng bạn trên hành trình thay đổi nụ cười</p> | |
| <a href="lienhe.html" class="inline-block bg-gradient-to-r from-teal-400 to-blue-500 text-white font-bold py-3 px-8 rounded-full hover:opacity-90 transition duration-300 shadow-lg"> | |
| Đặt lịch tư vấn ngay | |
| </a> | |
| </div> | |
| <div class="absolute top-0 left-0 right-0 h-32 bg-gradient-to-b from-black to-transparent"></div> | |
| <div class="absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black to-transparent"></div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black py-12 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-6 md:mb-0"> | |
| <i class="fas fa-tooth text-3xl text-teal-400 mr-3"></i> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">TTL1979</h1> | |
| </div> | |
| <div class="flex space-x-6 mb-6 md:mb-0"> | |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition duration-300"> | |
| <i class="fab fa-facebook-f text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition duration-300"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-teal-400 transition duration-300"> | |
| <i class="fab fa-youtube text-xl"></i> | |
| </a> | |
| </div> | |
| <div class="text-center md:text-right"> | |
| <p class="text-gray-400">© 2023 Nha khoa TTL1979. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Before-After Slider | |
| const slider = document.querySelector('.before-after-slider'); | |
| const handle = document.querySelector('.slider-handle'); | |
| const beforeImage = document.querySelector('.before-image'); | |
| let isDragging = false; | |
| handle.addEventListener('mousedown', () => { | |
| isDragging = true; | |
| }); | |
| document.addEventListener('mouseup', () => { | |
| isDragging = false; | |
| }); | |
| document.addEventListener('mousemove', (e) => { | |
| if (!isDragging) return; | |
| const sliderRect = slider.getBoundingClientRect(); | |
| let x = e.clientX - sliderRect.left; | |
| // Constrain within slider bounds | |
| x = Math.max(0, Math.min(x, sliderRect.width)); | |
| const percent = (x / sliderRect.width) * 100; | |
| handle.style.left = `${percent}%`; | |
| beforeImage.style.clipPath = `polygon(0 0, ${percent}% 0, ${percent}% 100%, 0 100%)`; | |
| }); | |
| // Touch support for mobile | |
| handle.addEventListener('touchstart', () => { | |
| isDragging = true; | |
| }); | |
| document.addEventListener('touchend', () => { | |
| isDragging = false; | |
| }); | |
| document.addEventListener('touchmove', (e) => { | |
| if (!isDragging) return; | |
| const sliderRect = slider.getBoundingClientRect(); | |
| let x = e.touches[0].clientX - sliderRect.left; | |
| // Constrain within slider bounds | |
| x = Math.max(0, Math.min(x, sliderRect.width)); | |
| const percent = (x / sliderRect.width) * 100; | |
| handle.style.left = `${percent}%`; | |
| beforeImage.style.clipPath = `polygon(0 0, ${percent}% 0, ${percent}% 100%, 0 100%)`; | |
| }); | |
| </script> | |
| </body> | |
| </html> |