Download index.html from hf1024/test: direct link, hf CLI and curl.
- Browser
- Download file 33.5 kB
-
https://huggingface.co/spaces/hf1024/test/resolve/main/index.html
- Command line
-
hf download hf://spaces/hf1024/test/index.html
-
curl -L -o index.html https://huggingface.co/spaces/hf1024/test/resolve/main/index.html
33.5 kB
| <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">×</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> |