Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Smile Gallery | DentalArt</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; | |
| overflow-x: hidden; | |
| } | |
| .parallax-bg { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .glow-effect { | |
| position: absolute; | |
| width: 200px; | |
| height: 200px; | |
| border-radius: 50%; | |
| filter: blur(60px); | |
| opacity: 0.3; | |
| z-index: 0; | |
| } | |
| .glow-teal { | |
| background: #38b2ac; | |
| } | |
| .glow-blue { | |
| background: #3b82f6; | |
| } | |
| .glow-purple { | |
| background: #8b5cf6; | |
| } | |
| .gallery-hero { | |
| background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(15, 23, 42, 0.95) 100%); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .gallery-item { | |
| position: relative; | |
| overflow: hidden; | |
| border-radius: 12px; | |
| transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| .gallery-item:hover { | |
| transform: translateY(-8px); | |
| box-shadow: 0 20px 25px rgba(59, 130, 246, 0.2); | |
| } | |
| .gallery-item::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .gallery-item:hover::before { | |
| opacity: 1; | |
| } | |
| .gallery-info { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 1.5rem; | |
| transform: translateY(100%); | |
| transition: transform 0.3s ease; | |
| background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%); | |
| } | |
| .gallery-item:hover .gallery-info { | |
| transform: translateY(0); | |
| } | |
| .filter-btn { | |
| transition: all 0.3s ease; | |
| border: 1px solid rgba(255,255,255,0.1); | |
| } | |
| .filter-btn:hover, .filter-btn.active { | |
| background: linear-gradient(to right, #38b2ac, #3b82f6); | |
| border-color: transparent; | |
| color: white; | |
| } | |
| .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%; | |
| } | |
| .lightbox { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0,0,0,0.9); | |
| z-index: 1000; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| opacity: 0; | |
| pointer-events: none; | |
| transition: opacity 0.3s ease; | |
| } | |
| .lightbox.active { | |
| opacity: 1; | |
| pointer-events: all; | |
| } | |
| .lightbox-content { | |
| position: relative; | |
| max-width: 90%; | |
| max-height: 90%; | |
| } | |
| .lightbox img { | |
| max-width: 100%; | |
| max-height: 80vh; | |
| border-radius: 8px; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.5); | |
| } | |
| .lightbox-close { | |
| position: absolute; | |
| top: -40px; | |
| right: 0; | |
| color: white; | |
| font-size: 2rem; | |
| cursor: pointer; | |
| transition: color 0.3s ease; | |
| } | |
| .lightbox-close:hover { | |
| color: #38b2ac; | |
| } | |
| .lightbox-nav { | |
| position: absolute; | |
| top: 50%; | |
| width: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| padding: 0 20px; | |
| transform: translateY(-50%); | |
| } | |
| .lightbox-nav button { | |
| background: rgba(0,0,0,0.5); | |
| color: white; | |
| border: none; | |
| width: 50px; | |
| height: 50px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| cursor: pointer; | |
| transition: background 0.3s ease; | |
| } | |
| .lightbox-nav button:hover { | |
| background: rgba(59, 130, 246, 0.8); | |
| } | |
| @media (max-width: 768px) { | |
| .parallax-bg { | |
| background-attachment: scroll; | |
| } | |
| .gallery-hero { | |
| padding-top: 120px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Floating Glow Effects --> | |
| <div class="glow-effect glow-teal" style="top: 10%; left: 10%;"></div> | |
| <div class="glow-effect glow-blue" style="top: 60%; right: 5%;"></div> | |
| <div class="glow-effect glow-purple" style="bottom: 10%; left: 20%;"></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">DentalArt</h1> | |
| </div> | |
| <button id="menu-toggle" class="md:hidden text-white"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| <nav id="main-nav" class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link text-white">Home</a> | |
| <a href="#" class="nav-link text-white text-teal-400 font-semibold">Gallery</a> | |
| <a href="#" class="nav-link text-white">Treatments</a> | |
| <a href="#" class="nav-link text-white">Contact</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="fixed inset-0 bg-black bg-opacity-90 z-40 hidden flex-col items-center justify-center space-y-8"> | |
| <button id="close-menu" class="absolute top-6 right-6 text-white text-2xl"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <a href="#" class="text-white text-2xl">Home</a> | |
| <a href="#" class="text-white text-2xl text-teal-400 font-semibold">Gallery</a> | |
| <a href="#" class="text-white text-2xl">Treatments</a> | |
| <a href="#" class="text-white text-2xl">Contact</a> | |
| </div> | |
| <!-- Gallery Hero Section --> | |
| <section class="gallery-hero min-h-[50vh] flex items-center pt-20 relative overflow-hidden parallax-bg" style="background-image: url('https://images.unsplash.com/photo-1588776814546-1ffcf47267a5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');"> | |
| <div class="container mx-auto px-4 py-16 relative z-10"> | |
| <div class="max-w-2xl mx-auto text-center"> | |
| <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">Smile Gallery</h1> | |
| <p class="text-xl text-gray-300 mb-8">Explore our collection of stunning smile transformations. Each case represents our commitment to excellence in cosmetic dentistry.</p> | |
| <div class="flex justify-center"> | |
| <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-3 rounded-full font-semibold hover:opacity-90 transition shadow-lg">View Our Treatments</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute inset-0 bg-gradient-to-b from-black via-transparent to-black opacity-70 z-0"></div> | |
| </section> | |
| <!-- Gallery Filters --> | |
| <section class="py-12 px-4 bg-gray-900 sticky top-0 z-30 shadow-lg"> | |
| <div class="container mx-auto"> | |
| <div class="flex flex-wrap justify-center gap-3"> | |
| <button class="filter-btn active px-6 py-2 rounded-full font-medium" data-filter="all">All Cases</button> | |
| <button class="filter-btn px-6 py-2 rounded-full font-medium" data-filter="veneers">Veneers</button> | |
| <button class="filter-btn px-6 py-2 rounded-full font-medium" data-filter="implants">Implants</button> | |
| <button class="filter-btn px-6 py-2 rounded-full font-medium" data-filter="whitening">Whitening</button> | |
| <button class="filter-btn px-6 py-2 rounded-full font-medium" data-filter="orthodontics">Orthodontics</button> | |
| <button class="filter-btn px-6 py-2 rounded-full font-medium" data-filter="full-mouth">Full Mouth</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Gallery Grid --> | |
| <section class="py-16 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| {% for case in gallery %} | |
| <div class="gallery-item h-80" data-category="{{ case.category | lower }}"> | |
| <img src="{{ case.after_image }}" alt="{{ case.title }}" class="w-full h-full object-cover"> | |
| <div class="gallery-info"> | |
| <h3 class="text-xl font-bold mb-1">{{ case.title }}</h3> | |
| <p class="text-sm text-gray-300 mb-2">{{ case.description }}</p> | |
| <span class="inline-block bg-teal-500 text-white text-xs px-2 py-1 rounded-full">{{ case.treatment }}</span> | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| <div class="text-center mt-16"> | |
| <button class="border-2 border-white px-8 py-3 rounded-full font-semibold hover:bg-white hover:text-black transition">Load More Cases</button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 px-4 bg-gray-900"> | |
| <div class="container mx-auto"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-teal-400 to-blue-500 bg-clip-text text-transparent">Patient Stories</h2> | |
| <p class="text-gray-400 max-w-2xl mx-auto">Hear from our patients about their smile transformation experiences</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| {% for testimonial in testimonials %} | |
| <div class="bg-gray-800 bg-opacity-70 p-8 rounded-xl backdrop-filter backdrop-blur-sm border border-gray-700"> | |
| <div class="flex items-center mb-6"> | |
| <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> | |
| <img src="{{ testimonial.avatar }}" alt="{{ testimonial.patient_name }}" class="w-full h-full object-cover"> | |
| </div> | |
| <div> | |
| <h4 class="font-bold">{{ testimonial.patient_name }}</h4> | |
| <p class="text-sm text-teal-400">{{ testimonial.treatment_type }} Patient</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"{{ testimonial.content }}"</p> | |
| <div class="flex text-yellow-400"> | |
| {% for i in range(testimonial.rating) %} | |
| <i class="fas fa-star"></i> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| {% endfor %} | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-20 px-4 relative overflow-hidden"> | |
| <div class="glow-effect glow-teal" style="top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; height: 300px;"></div> | |
| <div class="container mx-auto 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">Ready for Your Smile Transformation?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto text-gray-300">Book a consultation to discuss your personalized treatment plan</p> | |
| <button class="bg-gradient-to-r from-teal-500 to-blue-600 text-white px-8 py-4 rounded-full font-semibold text-lg hover:opacity-90 transition shadow-lg">Book Your Consultation</button> | |
| <p class="mt-4 text-gray-400 text-sm">or call us at <a href="tel:{{ contact_info.phone }}" class="text-teal-400 hover:underline">{{ contact_info.phone }}</a></p> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12 px-4"> | |
| <div class="container mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-tooth text-2xl text-teal-400 mr-3"></i> | |
| <h3 class="text-xl font-bold">DentalArt</h3> | |
| </div> | |
| <p class="text-gray-400">Specializing in cosmetic dentistry and smile makeovers with cutting-edge technology.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Quick Links</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Gallery</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">Treatments</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-teal-400 transition">About Us</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"><i class="fas fa-map-marker-alt mr-2 text-teal-400"></i> {{ contact_info.address }}</li> | |
| <li class="flex items-center"><i class="fas fa-phone mr-2 text-teal-400"></i> {{ contact_info.phone }}</li> | |
| <li class="flex items-center"><i class="fas fa-envelope mr-2 text-teal-400"></i> {{ contact_info.email }}</li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Follow Us</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-teal-500 transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-blue-500 transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-purple-500 transition"> | |
| <i class="fab fa-tiktok"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-gray-800 rounded-full flex items-center justify-center hover:bg-red-500 transition"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-500"> | |
| <p>© 2023 DentalArt. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Lightbox --> | |
| <div class="lightbox"> | |
| <div class="lightbox-content"> | |
| <span class="lightbox-close"><i class="fas fa-times"></i></span> | |
| <img src="" alt="Gallery image"> | |
| <div class="lightbox-nav"> | |
| <button class="lightbox-prev"><i class="fas fa-chevron-left"></i></button> | |
| <button class="lightbox-next"><i class="fas fa-chevron-right"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menu-toggle').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.remove('hidden'); | |
| document.getElementById('mobile-menu').classList.add('flex'); | |
| }); | |
| document.getElementById('close-menu').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.add('hidden'); | |
| document.getElementById('mobile-menu').classList.remove('flex'); | |
| }); | |
| // Gallery filter functionality | |
| const filterButtons = document.querySelectorAll('.filter-btn'); | |
| const galleryItems = document.querySelectorAll('.gallery-item'); | |
| filterButtons.forEach(button => { | |
| button.addEventListener('click', function() { | |
| // Remove active class from all buttons | |
| filterButtons.forEach(btn => btn.classList.remove('active')); | |
| // Add active class to clicked button | |
| this.classList.add('active'); | |
| const filterValue = this.getAttribute('data-filter'); | |
| // Filter gallery items | |
| galleryItems.forEach(item => { | |
| if (filterValue === 'all' || item.getAttribute('data-category') === filterValue) { | |
| item.style.display = 'block'; | |
| } else { | |
| item.style.display = 'none'; | |
| } | |
| }); | |
| }); | |
| }); | |
| // Lightbox functionality | |
| const lightbox = document.querySelector('.lightbox'); | |
| const lightboxImg = lightbox.querySelector('img'); | |
| const lightboxClose = document.querySelector('.lightbox-close'); | |
| const galleryImages = document.querySelectorAll('.gallery-item img'); | |
| let currentImageIndex = 0; | |
| // Open lightbox when gallery image is clicked | |
| galleryImages.forEach((img, index) => { | |
| img.addEventListener('click', function() { | |
| currentImageIndex = index; | |
| lightboxImg.src = this.src; | |
| lightbox.classList.add('active'); | |
| document.body.style.overflow = 'hidden'; | |
| }); | |
| }); | |
| // Close lightbox | |
| lightboxClose.addEventListener('click', function() { | |
| lightbox.classList.remove('active'); | |
| document.body.style.overflow = 'auto'; | |
| }); | |
| // Lightbox navigation | |
| const lightboxPrev = document.querySelector('.lightbox-prev'); | |
| const lightboxNext = document.querySelector('.lightbox-next'); | |
| lightboxPrev.addEventListener('click', function() { | |
| currentImageIndex = (currentImageIndex - 1 + galleryImages.length) % galleryImages.length; | |
| lightboxImg.src = galleryImages[currentImageIndex].src; | |
| }); | |
| lightboxNext.addEventListener('click', function() { | |
| currentImageIndex = (currentImageIndex + 1) % galleryImages.length; | |
| lightboxImg.src = galleryImages[currentImageIndex].src; | |
| }); | |
| // Close lightbox when clicking outside image | |
| lightbox.addEventListener('click', function(e) { | |
| if (e.target === lightbox) { | |
| lightbox.classList.remove('active'); | |
| document.body.style.overflow = 'auto'; | |
| } | |
| }); | |
| // Parallax effect | |
| window.addEventListener('scroll', function() { | |
| const parallaxSections = document.querySelectorAll('.parallax-bg'); | |
| const scrollPosition = window.pageYOffset; | |
| parallaxSections.forEach(section => { | |
| if (window.innerWidth > 768) { // Only apply parallax on desktop | |
| section.style.backgroundPositionY = (scrollPosition * 0.5) + 'px'; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |