Hugging Face's logo

Spaces:
hf1024
/
test
Running

App Files Community
test / index.html
hf1024's picture
hf1024
Add 1 files
b72cb69 verified
Raw
History Blame Contribute Delete
33.5 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Modern Website with Carousel</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>
 /* Custom CSS for the carousel */
 .carousel {
 position: relative;
 overflow: hidden;
 }
.carousel-inner {
 display: flex;
 transition: transform 0.5s ease;
 }
.carousel-item {
 min-width: 100%;
 position: relative;
 }
.carousel-caption {
 position: absolute;
 bottom: 20%;
 left: 10%;
 color: white;
 max-width: 40%;
 }
.carousel-indicators {
 position: absolute;
 bottom: 20px;
 left: 50%;
 transform: translateX(-50%);
 display: flex;
 gap: 10px;
 }
.carousel-indicator {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: rgba(255, 255, 255, 0.5);
 cursor: pointer;
 }
.carousel-indicator.active {
 background-color: white;
 }
.carousel-control {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgba(0, 0, 0, 0.5);
 color: white;
 border: none;
 padding: 10px 15px;
 cursor: pointer;
 border-radius: 50%;
 z-index: 10;
 }
.carousel-control.prev {
 left: 20px;
 }
.carousel-control.next {
 right: 20px;
 }
/* Animation for menu items */
 @keyframes fadeIn {
 from { opacity: 0; transform: translateY(-10px); }
 to { opacity: 1; transform: translateY(0); }
 }
.nav-item {
 animation: fadeIn 0.3s ease forwards;
 }
.nav-item:nth-child(1) { animation-delay: 0.1s; }
 .nav-item:nth-child(2) { animation-delay: 0.2s; }
 .nav-item:nth-child(3) { animation-delay: 0.3s; }
 .nav-item:nth-child(4) { animation-delay: 0.4s; }
 .nav-item:nth-child(5) { animation-delay: 0.5s; }
/* Mobile menu animation */
 .mobile-menu {
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.3s ease-out;
 }
.mobile-menu.open {
 max-height: 500px;
 }
/* Dropdown menu styles */
 .dropdown {
 position: relative;
 display: inline-block;
 }
.dropdown-content {
 display: none;
 position: absolute;
 background-color: white;
 min-width: 200px;
 box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 z-index: 1;
 border-radius: 0.375rem;
 top: 100%;
 left: 0;
 opacity: 0;
 transform: translateY(-10px);
 transition: all 0.3s ease;
 }
.dropdown:hover .dropdown-content {
 display: block;
 opacity: 1;
 transform: translateY(0);
 }
.dropdown-item {
 color: #4b5563;
 padding: 12px 16px;
 text-decoration: none;
 display: block;
 transition: all 0.2s ease;
 }
.dropdown-item:hover {
 background-color: #f3f4f6;
 color: #1d4ed8;
 }
.dropdown-divider {
 border-top: 1px solid #e5e7eb;
 margin: 0;
 }
/* Login Modal Styles */
 .modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(0, 0, 0, 0.5);
 z-index: 1000;
 justify-content: center;
 align-items: center;
 }
.modal-content {
 background-color: white;
 padding: 2rem;
 border-radius: 0.5rem;
 width: 100%;
 max-width: 400px;
 position: relative;
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
 animation: modalFadeIn 0.3s ease-out;
 }
@keyframes modalFadeIn {
 from {
 opacity: 0;
 transform: translateY(-20px);
 }
 to {
 opacity: 1;
 transform: translateY(0);
 }
 }
.close-modal {
 position: absolute;
 top: 1rem;
 right: 1rem;
 font-size: 1.5rem;
 color: #6b7280;
 cursor: pointer;
 transition: color 0.2s;
 }
.close-modal:hover {
 color: #1f2937;
 }
.form-group {
 margin-bottom: 1.5rem;
 }
.form-group label {
 display: block;
 margin-bottom: 0.5rem;
 font-weight: 500;
 color: #374151;
 }
.form-group input {
 width: 100%;
 padding: 0.75rem;
 border: 1px solid #d1d5db;
 border-radius: 0.375rem;
 font-size: 1rem;
 transition: border-color 0.2s;
 }
.form-group input:focus {
 outline: none;
 border-color: #3b82f6;
 box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
 }
.login-btn {
 width: 100%;
 padding: 0.75rem;
 background-color: #3b82f6;
 color: white;
 border: none;
 border-radius: 0.375rem;
 font-weight: 500;
 font-size: 1rem;
 cursor: pointer;
 transition: background-color 0.2s;
 }
.login-btn:hover {
 background-color: #2563eb;
 }
.modal-footer {
 margin-top: 1.5rem;
 text-align: center;
 font-size: 0.875rem;
 color: #6b7280;
 }
.modal-footer a {
 color: #3b82f6;
 text-decoration: none;
 font-weight: 500;
 }
.modal-footer a:hover {
 text-decoration: underline;
 }
.social-login {
 margin-top: 1.5rem;
 display: flex;
 justify-content: center;
 gap: 1rem;
 }
.social-btn {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 padding: 0.5rem;
 border-radius: 0.375rem;
 font-weight: 500;
 cursor: pointer;
 transition: background-color 0.2s;
 }
.social-btn.google {
 background-color: #f3f4f6;
 color: #374151;
 border: 1px solid #d1d5db;
 }
.social-btn.google:hover {
 background-color: #e5e7eb;
 }
.social-btn.facebook {
 background-color: #1877f2;
 color: white;
 border: 1px solid #1877f2;
 }
.social-btn.facebook:hover {
 background-color: #166fe5;
 }
.social-btn i {
 margin-right: 0.5rem;
 font-size: 1.25rem;
 }
.divider {
 display: flex;
 align-items: center;
 margin: 1.5rem 0;
 color: #9ca3af;
 }
.divider::before, .divider::after {
 content: "";
 flex: 1;
 border-bottom: 1px solid #e5e7eb;
 }
.divider-text {
 padding: 0 1rem;
 font-size: 0.875rem;
 }
 </style>
</head>
<body class="bg-gray-50 font-sans">
 <!-- Navigation -->
 <nav class="bg-white shadow-lg sticky top-0 z-50">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="flex justify-between h-16">
 <!-- Logo -->
 <div class="flex-shrink-0 flex items-center">
 <i class="fas fa-rocket text-blue-600 text-2xl mr-2"></i>
 <span class="text-xl font-bold text-gray-900">BrandName</span>
 </div>
<!-- Desktop Menu -->
 <div class="hidden md:flex items-center space-x-8">
 <a href="#" class="nav-item text-gray-900 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Home</a>
<!-- Products Dropdown -->
 <div class="dropdown">
 <button class="nav-item text-gray-500 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition duration-300 flex items-center">
 Products
 <i class="fas fa-chevron-down ml-1 text-xs"></i>
 </button>
 <div class="dropdown-content">
 <a href="#" class="dropdown-item">
 <i class="fas fa-laptop mr-2"></i> Software Solutions
 </a>
 <a href="#" class="dropdown-item">
 <i class="fas fa-mobile-alt mr-2"></i> Mobile Apps
 </a>
 <a href="#" class="dropdown-item">
 <i class="fas fa-cloud mr-2"></i> Cloud Services
 </a>
 <div class="dropdown-divider"></div>
 <a href="#" class="dropdown-item">
 <i class="fas fa-star mr-2"></i> Premium Suite
 </a>
 </div>
 </div>
<a href="#" class="nav-item text-gray-500 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Services</a>
 <a href="#" class="nav-item text-gray-500 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition duration-300">About</a>
 <a href="#" class="nav-item text-gray-500 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition duration-300">Contact</a>
 <button id="login-btn" class="nav-item text-gray-500 hover:text-blue-600 px-3 py-2 rounded-md text-sm font-medium transition duration-300">
 Login
 </button>
 <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-300">
 Get Started
 </button>
 </div>
<!-- Mobile menu button -->
 <div class="md:hidden flex items-center">
 <button id="mobile-menu-button" class="text-gray-500 hover:text-gray-900 focus:outline-none">
 <i class="fas fa-bars text-xl"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Mobile Menu -->
 <div id="mobile-menu" class="mobile-menu md:hidden bg-white">
 <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
 <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-900 hover:text-blue-600 hover:bg-gray-50">Home</a>
<!-- Mobile Products Dropdown -->
 <div class="relative">
 <button id="mobile-products-button" class="w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50 flex justify-between items-center">
 Products
 <i class="fas fa-chevron-down text-xs transition-transform duration-200"></i>
 </button>
 <div id="mobile-products-dropdown" class="pl-4 hidden">
 <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">
 <i class="fas fa-laptop mr-2"></i> Software Solutions
 </a>
 <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">
 <i class="fas fa-mobile-alt mr-2"></i> Mobile Apps
 </a>
 <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">
 <i class="fas fa-cloud mr-2"></i> Cloud Services
 </a>
 <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">
 <i class="fas fa-star mr-2"></i> Premium Suite
 </a>
 </div>
 </div>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">Services</a>
 <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">About</a>
 <a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">Contact</a>
 <button id="mobile-login-btn" class="block w-full text-left px-3 py-2 rounded-md text-base font-medium text-gray-500 hover:text-blue-600 hover:bg-gray-50">
 Login
 </button>
 <button class="w-full mt-2 bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">
 Get Started
 </button>
 </div>
 </div>
 </nav>
<!-- Login Modal -->
 <div id="login-modal" class="modal">
 <div class="modal-content">
 <span class="close-modal">&times;</span>
 <h2 class="text-2xl font-bold text-gray-800 mb-6">Welcome Back</h2>
 <form>
 <div class="form-group">
 <label for="email">Email Address</label>
 <input type="email" id="email" placeholder="Enter your email">
 </div>
 <div class="form-group">
 <label for="password">Password</label>
 <input type="password" id="password" placeholder="Enter your password">
 </div>
 <div class="flex justify-between items-center mb-4">
 <div class="flex items-center">
 <input type="checkbox" id="remember" class="mr-2">
 <label for="remember" class="text-sm text-gray-600">Remember me</label>
 </div>
 <a href="#" class="text-sm text-blue-600 hover:underline">Forgot password?</a>
 </div>
 <button type="submit" class="login-btn">Login</button>
 </form>
<div class="divider">
 <span class="divider-text">OR</span>
 </div>
<div class="social-login">
 <button class="social-btn google">
 <i class="fab fa-google"></i>
 <span>Google</span>
 </button>
 <button class="social-btn facebook">
 <i class="fab fa-facebook-f"></i>
 <span>Facebook</span>
 </button>
 </div>
<div class="modal-footer">
 Don't have an account? <a href="#" class="signup-link">Sign up</a>
 </div>
 </div>
 </div>
<!-- Main Content -->
 <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
 <!-- Carousel Section -->
 <div class="carousel rounded-xl overflow-hidden shadow-xl mb-12">
 <div class="carousel-inner">
 <!-- Slide 1 -->
 <div class="carousel-item">
 <img src="https://source.unsplash.com/random/1600x600/?technology" alt="Technology" class="w-full h-auto">
 <div class="carousel-caption">
 <h2 class="text-4xl font-bold mb-4">Innovative Solutions</h2>
 <p class="text-lg mb-6">Discover our cutting-edge technology that will transform your business.</p>
 <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
 Learn More
 </button>
 </div>
 </div>
<!-- Slide 2 -->
 <div class="carousel-item">
 <img src="https://source.unsplash.com/random/1600x600/?business" alt="Business" class="w-full h-auto">
 <div class="carousel-caption">
 <h2 class="text-4xl font-bold mb-4">Business Growth</h2>
 <p class="text-lg mb-6">Our strategies will help you scale your business to new heights.</p>
 <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
 Get Started
 </button>
 </div>
 </div>
<!-- Slide 3 -->
 <div class="carousel-item">
 <img src="https://source.unsplash.com/random/1600x600/?teamwork" alt="Teamwork" class="w-full h-auto">
 <div class="carousel-caption">
 <h2 class="text-4xl font-bold mb-4">Expert Team</h2>
 <p class="text-lg mb-6">Work with our dedicated professionals to achieve your goals.</p>
 <button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-md font-medium transition duration-300">
 Meet Our Team
 </button>
 </div>
 </div>
 </div>
<!-- Carousel Controls -->
 <button class="carousel-control prev">
 <i class="fas fa-chevron-left"></i>
 </button>
 <button class="carousel-control next">
 <i class="fas fa-chevron-right"></i>
 </button>
<!-- Carousel Indicators -->
 <div class="carousel-indicators">
 <div class="carousel-indicator active" data-slide="0"></div>
 <div class="carousel-indicator" data-slide="1"></div>
 <div class="carousel-indicator" data-slide="2"></div>
 </div>
 </div>
<!-- Content Section -->
 <div class="grid md:grid-cols-3 gap-8 mb-12">
 <!-- Feature 1 -->
 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300">
 <div class="text-blue-600 mb-4">
 <i class="fas fa-lightbulb text-4xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Creative Ideas</h3>
 <p class="text-gray-600 mb-4">We bring fresh perspectives and innovative approaches to solve your business challenges.</p>
 <a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition duration-300">
 Read more <i class="fas fa-arrow-right ml-1"></i>
 </a>
 </div>
<!-- Feature 2 -->
 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300">
 <div class="text-blue-600 mb-4">
 <i class="fas fa-chart-line text-4xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">Data Analytics</h3>
 <p class="text-gray-600 mb-4">Leverage our powerful analytics tools to gain insights and make data-driven decisions.</p>
 <a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition duration-300">
 Read more <i class="fas fa-arrow-right ml-1"></i>
 </a>
 </div>
<!-- Feature 3 -->
 <div class="bg-white p-6 rounded-lg shadow-md hover:shadow-xl transition duration-300">
 <div class="text-blue-600 mb-4">
 <i class="fas fa-headset text-4xl"></i>
 </div>
 <h3 class="text-xl font-bold mb-3">24/7 Support</h3>
 <p class="text-gray-600 mb-4">Our dedicated support team is always available to assist you with any questions or issues.</p>
 <a href="#" class="text-blue-600 font-medium hover:text-blue-800 transition duration-300">
 Read more <i class="fas fa-arrow-right ml-1"></i>
 </a>
 </div>
 </div>
<!-- Call to Action -->
 <div class="bg-gradient-to-r from-blue-600 to-blue-800 rounded-xl p-8 text-white mb-12">
 <div class="max-w-3xl mx-auto text-center">
 <h2 class="text-3xl font-bold mb-4">Ready to transform your business?</h2>
 <p class="text-lg mb-6">Join thousands of satisfied customers who have already experienced our exceptional services.</p>
 <div class="flex flex-col sm:flex-row justify-center gap-4">
 <button class="bg-white text-blue-800 hover:bg-gray-100 px-6 py-3 rounded-md font-bold transition duration-300">
 Get Started Now
 </button>
 <button class="border-2 border-white hover:bg-white hover:text-blue-800 px-6 py-3 rounded-md font-bold transition duration-300">
 Contact Sales
 </button>
 </div>
 </div>
 </div>
 </main>
<!-- Footer -->
 <footer class="bg-gray-900 text-white py-12">
 <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
 <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
 <!-- Column 1 -->
 <div>
 <h3 class="text-lg font-bold mb-4">Company</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">About Us</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Careers</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Blog</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Press</a></li>
 </ul>
 </div>
<!-- Column 2 -->
 <div>
 <h3 class="text-lg font-bold mb-4">Products</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Features</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Pricing</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">API</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Integrations</a></li>
 </ul>
 </div>
<!-- Column 3 -->
 <div>
 <h3 class="text-lg font-bold mb-4">Support</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Documentation</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Guides</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Community</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Status</a></li>
 </ul>
 </div>
<!-- Column 4 -->
 <div>
 <h3 class="text-lg font-bold mb-4">Legal</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Privacy</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Terms</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Cookie Policy</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition duration-300">Licenses</a></li>
 </ul>
 </div>
 </div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
 <div class="flex items-center mb-4 md:mb-0">
 <i class="fas fa-rocket text-blue-500 text-2xl mr-2"></i>
 <span class="text-xl font-bold">BrandName</span>
 </div>
 <div class="flex space-x-6">
 <a href="#" class="text-gray-400 hover:text-white transition duration-300">
 <i class="fab fa-facebook-f text-xl"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white transition duration-300">
 <i class="fab fa-twitter text-xl"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white transition duration-300">
 <i class="fab fa-instagram text-xl"></i>
 </a>
 <a href="#" class="text-gray-400 hover:text-white transition duration-300">
 <i class="fab fa-linkedin-in text-xl"></i>
 </a>
 </div>
 </div>
 </div>
 </footer>
<script>
 // Mobile menu toggle
 const mobileMenuButton = document.getElementById('mobile-menu-button');
 const mobileMenu = document.getElementById('mobile-menu');
mobileMenuButton.addEventListener('click', () => {
 mobileMenu.classList.toggle('open');
 });
// Mobile products dropdown toggle
 const mobileProductsButton = document.getElementById('mobile-products-button');
 const mobileProductsDropdown = document.getElementById('mobile-products-dropdown');
mobileProductsButton.addEventListener('click', () => {
 mobileProductsDropdown.classList.toggle('hidden');
 mobileProductsButton.querySelector('i').classList.toggle('transform');
 mobileProductsButton.querySelector('i').classList.toggle('rotate-180');
 });
// Carousel functionality
 const carousel = document.querySelector('.carousel-inner');
 const items = document.querySelectorAll('.carousel-item');
 const indicators = document.querySelectorAll('.carousel-indicator');
 const prevBtn = document.querySelector('.carousel-control.prev');
 const nextBtn = document.querySelector('.carousel-control.next');
let currentIndex = 0;
 const itemCount = items.length;
function updateCarousel() {
 carousel.style.transform = `translateX(-${currentIndex * 100}%)`;
// Update indicators
 indicators.forEach((indicator, index) => {
 if (index === currentIndex) {
 indicator.classList.add('active');
 } else {
 indicator.classList.remove('active');
 }
 });
 }
function nextSlide() {
 currentIndex = (currentIndex + 1) % itemCount;
 updateCarousel();
 }
function prevSlide() {
 currentIndex = (currentIndex - 1 + itemCount) % itemCount;
 updateCarousel();
 }
// Auto-rotate carousel
 let interval = setInterval(nextSlide, 5000);
// Reset interval when user interacts
 function resetInterval() {
 clearInterval(interval);
 interval = setInterval(nextSlide, 5000);
 }
// Event listeners
 nextBtn.addEventListener('click', () => {
 nextSlide();
 resetInterval();
 });
prevBtn.addEventListener('click', () => {
 prevSlide();
 resetInterval();
 });
indicators.forEach((indicator, index) => {
 indicator.addEventListener('click', () => {
 currentIndex = index;
 updateCarousel();
 resetInterval();
 });
 });
// Pause on hover
 carousel.parentElement.addEventListener('mouseenter', () => {
 clearInterval(interval);
 });
carousel.parentElement.addEventListener('mouseleave', () => {
 resetInterval();
 });
// Touch support for mobile
 let touchStartX = 0;
 let touchEndX = 0;
carousel.parentElement.addEventListener('touchstart', (e) => {
 touchStartX = e.changedTouches[0].screenX;
 clearInterval(interval);
 });
carousel.parentElement.addEventListener('touchend', (e) => {
 touchEndX = e.changedTouches[0].screenX;
 handleSwipe();
 resetInterval();
 });
function handleSwipe() {
 const threshold = 50;
if (touchEndX < touchStartX - threshold) {
 nextSlide();
 } else if (touchEndX > touchStartX + threshold) {
 prevSlide();
 }
 }
// Login Modal Functionality
 const loginBtn = document.getElementById('login-btn');
 const mobileLoginBtn = document.getElementById('mobile-login-btn');
 const loginModal = document.getElementById('login-modal');
 const closeModal = document.querySelector('.close-modal');
// Open modal when login button is clicked
 loginBtn.addEventListener('click', () => {
 loginModal.style.display = 'flex';
 document.body.style.overflow = 'hidden'; // Prevent scrolling when modal is open
 });
// Open modal when mobile login button is clicked
 mobileLoginBtn.addEventListener('click', () => {
 loginModal.style.display = 'flex';
 document.body.style.overflow = 'hidden';
 mobileMenu.classList.remove('open'); // Close mobile menu
 });
// Close modal when X is clicked
 closeModal.addEventListener('click', () => {
 loginModal.style.display = 'none';
 document.body.style.overflow = 'auto'; // Re-enable scrolling
 });
// Close modal when clicking outside the modal content
 loginModal.addEventListener('click', (e) => {
 if (e.target === loginModal) {
 loginModal.style.display = 'none';
 document.body.style.overflow = 'auto';
 }
 });
// Close modal with Escape key
 document.addEventListener('keydown', (e) => {
 if (e.key === 'Escape' && loginModal.style.display === 'flex') {
 loginModal.style.display = 'none';
 document.body.style.overflow = 'auto';
 }
 });
 </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=hf1024/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>