Spaces:
Running
Running
| <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 - Chị Nguyễn Thị Minh Anh | 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 Chị Minh Anh</h1> | |
| <p class="text-xl text-gray-300 mb-8">18 tháng niềng răng Invisalign đã thay đổi nụ cười và sự tự tin của chị</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="https://randomuser.me/api/portraits/women/32.jpg" alt="Chị Nguyễn Thị Minh Anh" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold">Chị Nguyễn Thị Minh Anh</h3> | |
| <p class="text-teal-400">Khách hàng niềng răng Invisalign</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">18 tháng</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"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 relative"> | |
| <div class="before-after-slider"> | |
| <img src="https://images.unsplash.com/photo-1605497788044-5a32c7078486?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Before" class="before-image"> | |
| <img src="https://images.unsplash.com/photo-1580489944761-15a19d654956?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=761&q=80" 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 Chị Minh Anh</h2> | |
| <div class="grid md:grid-cols-2 gap-8 mb-12"> | |
| <div> | |
| <p class="text-gray-300 mb-4">Chị Minh Anh đến với Nha khoa TTL1979 với hàm răng khấp khểnh và luôn cảm thấy thiếu tự tin khi cười. Sau khi tham khảo nhiều phương pháp, chị đã quyết định lựa chọn niềng răng Invisalign vì tính thẩm mỹ và tiện lợi.</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 18 tháng kiên trì với Invisalign, 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">Niềng răng Invisalign</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Bác sĩ điều trị</p> | |
| <p class="font-medium">BS. Trần Văn Nam</p> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-400">Thời gian</p> | |
| <p class="font-medium">18 tháng (2021-2022)</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"> | |
| <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">Ngày đầu tiên</h4> | |
| </div> | |
| <p class="text-gray-300">Chị Anh được bác sĩ thăm khám tổng quát, chụp phim X-quang và lấy dấu mẫu hàm để thiết kế khay niềng Invisalign phù hợp.</p> | |
| <div class="mt-3 flex"> | |
| <span class="bg-teal-900 bg-opacity-50 text-teal-300 text-xs px-2 py-1 rounded mr-2">Khám tổng quát</span> | |
| <span class="bg-blue-900 bg-opacity-50 text-blue-300 text-xs px-2 py-1 rounded">Lấy dấu mẫu</span> | |
| </div> | |
| </div> | |
| </div> | |
| <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-blue-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-procedures text-white"></i> | |
| </div> | |
| <h4 class="font-bold text-lg">Tuần thứ 2</h4> | |
| </div> | |
| <p class="text-gray-300">Chị nhận bộ khay niềng đầu tiên và được hướng dẫn chi tiết cách đeo, vệ sinh và bảo quản khay niềng.</p> | |
| <div class="mt-3 flex"> | |
| <span class="bg-purple-900 bg-opacity-50 text-purple-300 text-xs px-2 py-1 rounded">Nhận khay niềng</span> | |
| </div> | |
| </div> | |
| </div> | |
| <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-purple-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-tooth text-white"></i> | |
| </div> | |
| <h4 class="font-bold text-lg">Tháng thứ 6</h4> | |
| </div> | |
| <p class="text-gray-300">Tái khám định kỳ và nhận bộ khay niềng mới. Những thay đổi đầu tiên đã xuất hiện rõ rệt, răng bắt đầu dịch chuyển về đúng vị trí.</p> | |
| <div class="mt-3 flex"> | |
| <span class="bg-yellow-900 bg-opacity-50 text-yellow-300 text-xs px-2 py-1 rounded mr-2">Tái khám</span> | |
| <span class="bg-pink-900 bg-opacity-50 text-pink-300 text-xs px-2 py-1 rounded">Thay đổi rõ</span> | |
| </div> | |
| </div> | |
| </div> | |
| <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-yellow-500 flex items-center justify-center mr-4"> | |
| <i class="fas fa-smile-beam text-white"></i> | |
| </div> | |
| <h4 class="font-bold text-lg">Tháng thứ 18</h4> | |
| </div> | |
| <p class="text-gray-300">Kết thúc quá trình niềng răng. Hàm răng đều đẹp như mong đợi, chị Anh tự tin hơn trong giao tiếp và công việc.</p> | |
| <div class="mt-3 flex"> | |
| <span class="bg-green-900 bg-opacity-50 text-green-300 text-xs px-2 py-1 rounded mr-2">Hoàn thành</span> | |
| <span class="bg-red-900 bg-opacity-50 text-red-300 text-xs px-2 py-1 rounded">Kết quả tốt</span> | |
| </div> | |
| </div> | |
| </div> | |
| </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ờ Invisalign 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 18 tháng 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="https://randomuser.me/api/portraits/women/32.jpg" alt="Chị Nguyễn Thị Minh Anh" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Chị Nguyễn Thị Minh Anh</h3> | |
| <p class="text-teal-400 text-sm">Khách hàng niềng răng Invisalign</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 chị Anh là một ví dụ điển hình về hiệu quả của niềng răng Invisalign. Chị đã 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="https://randomuser.me/api/portraits/men/32.jpg" alt="BS. Trần Văn Nam" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <p class="font-medium">BS. Trần Văn Nam</p> | |
| <p class="text-blue-400 text-sm">Chuyên gia chỉnh nha</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"> | |
| <div class="overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Before treatment" class="w-full h-48 object-cover hover:scale-105 transition duration-300"> | |
| <p class="text-center text-sm mt-2 text-gray-400">Trước điều trị</p> | |
| </div> | |
| <div class="overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1621841957884-1210fe19daca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="During treatment" class="w-full h-48 object-cover hover:scale-105 transition duration-300"> | |
| <p class="text-center text-sm mt-2 text-gray-400">Giữa quá trình</p> | |
| </div> | |
| <div class="overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="After treatment" class="w-full h-48 object-cover hover:scale-105 transition duration-300"> | |
| <p class="text-center text-sm mt-2 text-gray-400">Sau điều trị</p> | |
| </div> | |
| <div class="overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1621841957884-1210fe19daca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="X-ray before" class="w-full h-48 object-cover hover:scale-105 transition duration-300"> | |
| <p class="text-center text-sm mt-2 text-gray-400">Phim X-quang trước</p> | |
| </div> | |
| <div class="overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="X-ray after" class="w-full h-48 object-cover hover:scale-105 transition duration-300"> | |
| <p class="text-center text-sm mt-2 text-gray-400">Phim X-quang sau</p> | |
| </div> | |
| <div class="overflow-hidden rounded-lg"> | |
| <img src="https://images.unsplash.com/photo-1621841957884-1210fe19daca?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Happy customer" class="w-full h-48 object-cover hover:scale-105 transition duration-300"> | |
| <p class="text-center text-sm mt-2 text-gray-400">Chị Anh hạnh phúc</p> | |
| </div> | |
| </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> |