Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Autdoor Digital - Plataforma de Publicidade Inteligente</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> | |
| .flip-card { | |
| perspective: 1000px; | |
| } | |
| .flip-card-inner { | |
| position: relative; | |
| width: 100%; | |
| height: 100%; | |
| transition: transform 0.6s; | |
| transform-style: preserve-3d; | |
| } | |
| .flip-card:hover .flip-card-inner { | |
| transform: rotateY(180deg); | |
| } | |
| .flip-card-front, .flip-card-back { | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| backface-visibility: hidden; | |
| border-radius: 0.75rem; | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| } | |
| .flip-card-back { | |
| transform: rotateY(180deg); | |
| } | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| .gradient-text { | |
| background-clip: text; | |
| -webkit-background-clip: text; | |
| color: transparent; | |
| background-image: linear-gradient(90deg, #3b82f6, #8b5cf6); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <!-- Header --> | |
| <header class="py-8 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div class="w-12 h-12 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-ad text-white text-xl"></i> | |
| </div> | |
| <h1 class="text-2xl sm:text-3xl font-bold gradient-text">Autdoor <span class="text-white">Digital</span></h1> | |
| </div> | |
| <nav class="flex items-center space-x-1 sm:space-x-6"> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 transition">Home</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 transition">Como Funciona</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-800 transition">Planos</a> | |
| <a href="#" class="px-3 py-2 rounded-md text-sm font-medium bg-blue-600 hover:bg-blue-700 transition px-4 py-2 rounded-lg">Comprar Autdoor</a> | |
| </nav> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> | |
| <div> | |
| <h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-4">Sua marca em <span class="gradient-text">destaque</span> digital</h1> | |
| <p class="text-lg text-gray-300 mb-8">O Autdoor Digital é a plataforma de publicidade inteligente que conecta empresas a clientes de forma inovadora. Exiba sua marca em nossos cards interativos com tecnologia futurista.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="bg-gradient-to-r from-blue-500 to-purple-600 hover:from-blue-600 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-lg text-center transition duration-300 shadow-lg hover:shadow-xl">Comprar Autdoor <i class="fas fa-arrow-right ml-2"></i></a> | |
| <a href="#" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg text-center transition duration-300">Ver Demonstração</a> | |
| </div> | |
| </div> | |
| <div class="relative"> | |
| <div class="w-72 h-96 mx-auto bg-gradient-to-br from-blue-900 to-purple-900 rounded-2xl p-1 floating"> | |
| <div class="bg-gray-900 h-full rounded-xl p-4 relative"> | |
| <div class="absolute -top-5 -right-5 bg-purple-600 w-16 h-16 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-ad text-white text-2xl"></i> | |
| </div> | |
| <div class="h-40 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg mb-4 flex items-center justify-center"> | |
| <i class="fas fa-building text-white text-6xl opacity-80"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-2 text-gray-100">Sua Marca Aqui</h3> | |
| <div class="absolute bottom-5 left-4 right-4"> | |
| <p class="text-gray-300 text-sm mb-3">Toque para ver mais informações sobre nossa empresa e serviços.</p> | |
| <div class="h-2 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full w-1/3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="absolute -bottom-10 -left-10 w-32 h-32 bg-blue-500 rounded-full opacity-20 blur-3xl"></div> | |
| <div class="absolute -top-10 -right-10 w-32 h-32 bg-purple-500 rounded-full opacity-20 blur-3xl"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gray-800/50 rounded-3xl mx-4 sm:mx-8 lg:mx-16"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-4">Invista na visibilidade da sua empresa</h2> | |
| <p class="text-gray-300 max-w-2xl mx-auto">Por apenas R$500/ano, sua marca terá destaque em nossa plataforma futurista com tecnologia interativa.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-900/50 border border-gray-700 rounded-xl p-6 hover:border-blue-500 transition duration-300"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-2">Autdoor Básico</h3> | |
| <div class="text-4xl font-bold mb-2">R$500<span class="text-lg text-gray-400">/ano</span></div> | |
| <p class="text-gray-300">Ideal para pequenas empresas</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Exposição por 1 ano</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Até 5 links e contatos</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Estatísticas básicas</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg text-center transition duration-300">Contratar</a> | |
| </div> | |
| <div class="bg-gradient-to-br from-blue-900 to-purple-900 border border-blue-500 rounded-xl p-6 transform scale-105 relative z-10 shadow-lg"> | |
| <div class="absolute -top-3 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-blue-500 to-purple-600 text-white text-sm font-bold px-4 py-1 rounded-full"> | |
| Mais Popular | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-2">Autdoor Premium</h3> | |
| <div class="text-4xl font-bold mb-2">R$800<span class="text-lg text-gray-400">/ano</span></div> | |
| <p class="text-gray-300">Para negócios em crescimento</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Exposição por 1 ano</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Links e contatos ilimitados</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Estatísticas avançadas</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-400 mr-2"></i> | |
| <span>Destaque nas buscas</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block w-full bg-white hover:bg-gray-100 text-gray-900 font-bold py-3 px-6 rounded-lg text-center transition duration-300">Contratar</a> | |
| </div> | |
| <div class="bg-gray-900/50 border border-gray-700 rounded-xl p-6 hover:border-purple-500 transition duration-300"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold mb-2">Autdoor Enterprise</h3> | |
| <div class="text-4xl font-bold mb-2">R$1.200<span class="text-lg text-gray-400">/ano</span></div> | |
| <p class="text-gray-300">Para grandes marcas</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Exposição por 1 ano</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Links e contatos ilimitados</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Estatísticas premium</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Posição destacada no topo</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> | |
| <span>Personalização total</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="block w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg text-center transition duration-300">Contratar</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Autdoors Grid --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-4">Nossos <span class="gradient-text">Autdoors</span> Digitais</h2> | |
| <p class="text-gray-300 max-w-2xl mx-auto">Mais de 1000 empresas já utilizam nossa plataforma para aumentar sua visibilidade.</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6" id="autdoors-grid"> | |
| <!-- Cards will be generated via JavaScript --> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <button id="load-more" class="bg-gray-800 hover:bg-gray-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300 inline-flex items-center"> | |
| Carregar mais Autdoors <i class="fas fa-sync-alt ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8 bg-gradient-to-br from-gray-800 to-gray-900"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl sm:text-4xl font-bold mb-4">Por que escolher o <span class="gradient-text">Autdoor Digital</span>?</h2> | |
| <p class="text-gray-300 max-w-2xl mx-auto">Tecnologia inovadora para transformar a maneira como sua marca é vista.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-700 hover:border-blue-500 transition duration-300"> | |
| <div class="w-16 h-16 bg-blue-500/20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-line text-blue-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Alcance Ampliado</h3> | |
| <p class="text-gray-300">Sua marca alcança milhares de potenciais clientes todos os dias através de nossa plataforma integrada.</p> | |
| </div> | |
| <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-700 hover:border-purple-500 transition duration-300"> | |
| <div class="w-16 h-16 bg-purple-500/20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-mobile-alt text-purple-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Design Responsivo</h3> | |
| <p class="text-gray-300">Seu Autdoor se adapta perfeitamente a qualquer dispositivo, garantindo experiência consistente.</p> | |
| </div> | |
| <div class="bg-gray-900/50 p-6 rounded-xl border border-gray-700 hover:border-green-500 transition duration-300"> | |
| <div class="w-16 h-16 bg-green-500/20 rounded-full flex items-center justify-center mb-4"> | |
| <i class="fas fa-chart-pie text-green-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Métricas Inteligentes</h3> | |
| <p class="text-gray-300">Acompanhe em tempo real o desempenho do seu Autdoor com nosso painel de estatísticas avançadas.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="py-16 px-4 sm:px-6 lg:px-8"> | |
| <div class="max-w-7xl mx-auto rounded-2xl bg-gradient-to-r from-blue-900 to-purple-900 p-8 sm:p-12 relative overflow-hidden"> | |
| <div class="absolute -top-20 -right-20 w-64 h-64 bg-blue-500 rounded-full opacity-20 blur-3xl"></div> | |
| <div class="absolute -bottom-20 -left-20 w-64 h-64 bg-purple-500 rounded-full opacity-20 blur-3xl"></div> | |
| <div class="relative z-10 text-center"> | |
| <h2 class="text-2xl sm:text-4xl font-bold mb-6">Pronto para levar sua marca ao próximo nível?</h2> | |
| <p class="text-lg text-gray-300 mb-8 max-w-3xl mx-auto">Adquira agora seu Autdoor Digital e aumente a visibilidade da sua empresa de forma inovadora e impactante.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#" class="bg-white hover:bg-gray-100 text-gray### CONTINUAÇÃO DO CÓDIGO HTML (parte final) ### | |
| Bebi antes do ponto de interrupção. Aqui está a continuação exata do código: | |
| ```html | |
| <a href="#" class="bg-white hover:bg-gray-100 text-gray-900 font-bold py-3 px-6 rounded-lg transition duration-300 inline-flex items-center justify-center"> | |
| Comprar Agora <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| <a href="#" class="bg-transparent border border-white hover:bg-white/10 text-white font-bold py-3 px-6 rounded-lg transition duration-300 inline-flex items-center justify-center"> | |
| Fale Conosco <i class="fas fa-comments ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900/50 py-12 px-4 sm:px-6 lg:px-8 border-t border-gray-800"> | |
| <div class="max-w-7xl mx-auto"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-purple-600 flex items-center justify-center mr-3"> | |
| <i class="fas fa-ad text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold">Autdoor Digital</h3> | |
| </div> | |
| <p class="text-gray-400">A plataforma de publicidade inteligente que conecta empresas a clientes de forma inovadora.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Links Rápidos</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Como Funciona</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Planos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contato</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Recursos</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Área do Cliente</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Termos de Uso</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Política de Privacidade</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Contato</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center text-gray-400"><i class="fas fa-envelope mr-2"></i> [email protected]</li> | |
| <li class="flex items-center text-gray-400"><i class="fas fa-phone mr-2"></i> (11) 91234-5678</li> | |
| <li class="flex items-center text-gray-400"><i class="fas fa-map-marker-alt mr-2"></i> São Paulo, Brasil</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Autdoor Digital. Todos os direitos reservados.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Generate sample autdoors | |
| const autdoorsGrid = document.getElementById('autdoors-grid'); | |
| const loadMoreBtn = document.getElementById('load-more'); | |
| const businesses = [ | |
| { name: "TechSolutions", slogan: "Inovação em Tecnologia", logoColor: "from-blue-400 to-blue-600", icon: "fa-laptop-code", contact: "[email protected]", phone: "(11) 1234-5678", site: "www.techsolutions.com" }, | |
| { name: "DesignHub", slogan: "Criatividade em Ação", logoColor: "from-purple-400 to-purple-600", icon: "fa-paint-brush", contact: "[email protected]", phone: "(11) 2345-6789", site: "www.designhub.com" }, | |
| { name: "GreenFoods", slogan: "Alimentos Orgânicos", logoColor: "from-green-400 to-green-600", icon: "fa-leaf", contact: "[email protected]", phone: "(11) 3456-7890", site: "www.greenfoods.com" }, | |
| { name: "FitLife", slogan: "Sua Melhor Versão", logoColor: "from-red-400 to-red-600", icon: "fa-running", contact: "[email protected]", phone: "(11) 4567-8901", site: "www.fitlife.com" }, | |
| { name: "ConstruTech", slogan: "Construindo o Futuro", logoColor: "from-yellow-400 to-yellow-600", icon: "fa-building", contact: "[email protected]", phone: "(11) 5678-9012", site: "www.construc.com" }, | |
| { name: "BeautyCare", slogan: "Sua Beleza em 1º Lugar", logoColor: "from-pink-400 to-pink-600", icon: "fa-spa", contact: "[email protected]", phone: "(11) 6789-0123", site: "www.beautycare.com" }, | |
| { name: "PetWorld", slogan: "Amor pelos Animais", logoColor: "from-indigo-400 to-indigo-600", icon: "fa-paw", contact: "[email protected]", phone: "(11) 7890-1234", site: "www.petworld.com" }, | |
| { name: "FinancePro", slogan: "Soluções Financeiras", logoColor: "from-teal-400 to-teal-600", icon: "fa-chart-line", contact: "[email protected]", phone: "(11) 8901-2345", site: "www.financepro.com" }, | |
| ]; | |
| let loadedCards = 0; | |
| const cardsPerLoad = 8; | |
| function generateAutdoorCards() { | |
| const endIndex = Math.min(loadedCards + cardsPerLoad, 1000); | |
| for (let i = loadedCards; i < endIndex; i++) { | |
| const businessIndex = i % businesses.length; | |
| const biz = businesses[businessIndex]; | |
| const randomRotation = Math.random() * 10 - 5; // -5 to 5 degrees | |
| const card = document.createElement('div'); | |
| card.className = 'flip-card h-64 cursor-pointer transform hover:scale-105 transition duration-300'; | |
| card.style.transform = `rotate(${randomRotation}deg)`; | |
| card.innerHTML = ` | |
| <div class="flip-card-inner"> | |
| <div class="flip-card-front bg-gray-800 flex flex-col items-center justify-center p-4"> | |
| <div class="w-20 h-20 rounded-full bg-gradient-to-r ${biz.logoColor} flex items-center justify-center mb-4"> | |
| <i class="fas ${biz.icon} text-white text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-center">${biz.name}</h3> | |
| <p class="text-gray-400 text-center mt-1">${biz.slogan}</p> | |
| </div> | |
| <div class="flip-card-back bg-gray-700 p-4 flex flex-col justify-center"> | |
| <h3 class="text-xl font-bold text-center mb-2">${biz.name}</h3> | |
| <ul class="text-sm text-gray-300 space-y-1 mb-4"> | |
| <li class="flex items-center"><i class="fas fa-envelope mr-2"></i> ${biz.contact}</li> | |
| <li class="flex items-center"><i class="fas fa-phone mr-2"></i> ${biz.phone}</li> | |
| <li class="flex items-center"><i class="fas fa-globe mr-2"></i> ${biz.site}</li> | |
| </ul> | |
| <div class="text-center"> | |
| <a href="#" class="inline-block bg-gradient-to-r ${biz.logoColor} text-white px-3 py-1 rounded-full text-xs font-bold hover:opacity-90 transition">Visitar Site</a> | |
| </div> | |
| <p class="text-center text-xs text-gray-400 mt-4">Autdoor válido até ${new Date().getFullYear() + 1}</p> | |
| </div> | |
| </div> | |
| `; | |
| autdoorsGrid.appendChild(card); | |
| } | |
| loadedCards = endIndex; | |
| if (loadedCards >= 1000) { | |
| loadMoreBtn.style.display = 'none'; | |
| } | |
| } | |
| // Initial load | |
| generateAutdoorCards(); | |
| // Load more on click | |
| loadMoreBtn.addEventListener('click', generateAutdoorCards); | |
| // Make cards flip on click (for mobile) | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const cards = document.querySelectorAll('.flip-card'); | |
| cards.forEach(card => { | |
| card.addEventListener('click', function() { | |
| this.querySelector('.flip-card-inner').style.transform = | |
| this.querySelector('.flip-card-inner').style.transform.includes('rotateY(180deg)') | |
| ? 'rotateY(0)' | |
| : 'rotateY(180deg)'; | |
| }); | |
| }); | |
| }); | |
| </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=guimarques1095/autdoor-digital" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |