| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>MangaTranslate Pro - Tradutor de Mangás</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> |
| .manga-panel { |
| transition: all 0.3s ease; |
| } |
| .manga-panel:hover { |
| transform: scale(1.02); |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); |
| } |
| .translation-box { |
| min-height: 150px; |
| } |
| .loading-spinner { |
| animation: spin 1s linear infinite; |
| } |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| .language-flag { |
| width: 24px; |
| height: 16px; |
| display: inline-block; |
| margin-right: 8px; |
| background-size: cover; |
| border-radius: 2px; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-100 font-sans"> |
| |
| <header class="bg-indigo-900 text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-book-open text-2xl text-indigo-300"></i> |
| <h1 class="text-2xl font-bold">Manga<span class="text-indigo-300">Translate</span> Pro</h1> |
| </div> |
| <nav class="hidden md:flex space-x-6"> |
| <a href="#" class="hover:text-indigo-300 transition">Início</a> |
| <a href="#" class="hover:text-indigo-300 transition">Recursos</a> |
| <a href="#" class="hover:text-indigo-300 transition">Biblioteca</a> |
| <a href="#" class="hover:text-indigo-300 transition">Sobre</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button class="bg-indigo-700 hover:bg-indigo-600 px-4 py-2 rounded-lg transition"> |
| <i class="fas fa-user mr-2"></i>Entrar |
| </button> |
| <button class="md:hidden text-xl" id="mobile-menu-button"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <div class="hidden bg-indigo-800 text-white py-4" id="mobile-menu"> |
| <div class="container mx-auto px-4 flex flex-col space-y-3"> |
| <a href="#" class="hover:text-indigo-300 transition">Início</a> |
| <a href="#" class="hover:text-indigo-300 transition">Recursos</a> |
| <a href="#" class="hover:text-indigo-300 transition">Biblioteca</a> |
| <a href="#" class="hover:text-indigo-300 transition">Sobre</a> |
| </div> |
| </div> |
|
|
| |
| <section class="bg-gradient-to-r from-indigo-900 to-purple-900 text-white py-16"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Leia mangás em qualquer idioma</h2> |
| <p class="text-xl text-indigo-200 mb-8">Traduza instantaneamente mangás do japonês, coreano ou chinês para português com nossa tecnologia avançada.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="bg-white text-indigo-900 hover:bg-indigo-100 px-6 py-3 rounded-lg font-bold transition flex items-center justify-center"> |
| <i class="fas fa-play mr-2"></i> Ver Demonstração |
| </button> |
| <button class="bg-transparent border-2 border-white hover:bg-white hover:text-indigo-900 px-6 py-3 rounded-lg font-bold transition flex items-center justify-center"> |
| <i class="fas fa-book mr-2"></i> Explorar Biblioteca |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 relative"> |
| <div class="bg-white bg-opacity-10 backdrop-blur-md rounded-xl p-6 shadow-2xl"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-semibold">Tradutor de Mangá</h3> |
| <div class="flex space-x-2"> |
| <button class="bg-indigo-700 hover:bg-indigo-600 p-2 rounded-lg"> |
| <i class="fas fa-cog"></i> |
| </button> |
| <button class="bg-indigo-700 hover:bg-indigo-600 p-2 rounded-lg"> |
| <i class="fas fa-expand"></i> |
| </button> |
| </div> |
| </div> |
| <div class="bg-black bg-opacity-50 rounded-lg p-4 mb-4"> |
| <div class="flex justify-center mb-4"> |
| <img src="https://via.placeholder.com/300x200/333333/FFFFFF?text=Manga+Panel" alt="Manga Panel" class="rounded-lg manga-panel max-h-48"> |
| </div> |
| <div class="bg-gray-800 rounded-lg p-3 translation-box"> |
| <p class="text-gray-300" id="translated-text">Clique em "Traduzir" para ver a tradução deste painel de mangá...</p> |
| </div> |
| </div> |
| <div class="flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0"> |
| <div class="flex space-x-2"> |
| <div class="relative"> |
| <select class="bg-indigo-800 border border-indigo-700 text-white rounded-lg px-4 py-2 pr-8 appearance-none"> |
| <option>Japonês</option> |
| <option>Coreano</option> |
| <option>Chinês</option> |
| </select> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> |
| <i class="fas fa-chevron-down text-indigo-300"></i> |
| </div> |
| </div> |
| <i class="fas fa-exchange-alt text-indigo-300 my-auto"></i> |
| <div class="relative"> |
| <select class="bg-indigo-800 border border-indigo-700 text-white rounded-lg px-4 py-2 pr-8 appearance-none"> |
| <option>Português</option> |
| <option>Inglês</option> |
| <option>Espanhol</option> |
| </select> |
| <div class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"> |
| <i class="fas fa-chevron-down text-indigo-300"></i> |
| </div> |
| </div> |
| </div> |
| <button id="translate-btn" class="bg-indigo-600 hover:bg-indigo-500 px-6 py-2 rounded-lg font-medium transition flex items-center"> |
| <i class="fas fa-language mr-2"></i> Traduzir |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Recursos Exclusivos</h2> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition"> |
| <div class="text-indigo-600 text-4xl mb-4"> |
| <i class="fas fa-bolt"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Tradução Instantânea</h3> |
| <p class="text-gray-600">Obtenha traduções em tempo real de balões de mangá com nossa tecnologia OCR avançada e IA de tradução.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition"> |
| <div class="text-indigo-600 text-4xl mb-4"> |
| <i class="fas fa-book"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Biblioteca Completa</h3> |
| <p class="text-gray-600">Acesse milhares de mangás populares em nossa biblioteca, com novos lançamentos adicionados semanalmente.</p> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-lg transition"> |
| <div class="text-indigo-600 text-4xl mb-4"> |
| <i class="fas fa-mobile-alt"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Leitura Otimizada</h3> |
| <p class="text-gray-600">Interface perfeita para dispositivos móveis e desktop, com modos de leitura diurna e noturna.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-gray-100"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Como Funciona</h2> |
| |
| <div class="flex flex-col md:flex-row items-center mb-12"> |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
| <h3 class="text-2xl font-semibold mb-4 text-indigo-700">1. Carregue seu Mangá</h3> |
| <p class="text-gray-600 mb-4">Envie uma imagem do mangá que deseja traduzir ou selecione da nossa extensa biblioteca.</p> |
| <ul class="space-y-2 text-gray-600"> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> |
| <span>Formatos suportados: JPG, PNG, PDF</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> |
| <span>Até 20 páginas por vez</span> |
| </li> |
| <li class="flex items-start"> |
| <i class="fas fa-check-circle text-indigo-500 mt-1 mr-2"></i> |
| <span>Qualidade preservada</span> |
| </li> |
| </ul> |
| </div> |
| <div class="md:w-1/2 bg-white p-6 rounded-xl shadow-md"> |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-indigo-500 mb-4"></i> |
| <p class="font-medium text-gray-700 mb-2">Arraste e solte arquivos aqui</p> |
| <p class="text-sm text-gray-500 mb-4">ou</p> |
| <button class="bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-2 rounded-lg font-medium transition"> |
| Selecionar Arquivos |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex flex-col md:flex-row-reverse items-center mb-12"> |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pl-8"> |
| <h3 class="text-2xl font-semibold mb-4 text-indigo-700">2. Selecione os Idiomas</h3> |
| <p class="text-gray-600 mb-4">Escolha o idioma original do mangá e para qual idioma deseja traduzir. Nossa IA detecta automaticamente o texto nos balões.</p> |
| <div class="bg-indigo-50 rounded-lg p-4"> |
| <div class="flex items-center mb-2"> |
| <div class="language-flag" style="background-image: url('https://flagcdn.com/w20/jp.png')"></div> |
| <span class="font-medium">Japonês</span> |
| <i class="fas fa-arrow-right mx-3 text-indigo-500"></i> |
| <div class="language-flag" style="background-image: url('https://flagcdn.com/w20/br.png')"></div> |
| <span class="font-medium">Português</span> |
| </div> |
| <p class="text-sm text-indigo-700">+15 idiomas disponíveis</p> |
| </div> |
| </div> |
| <div class="md:w-1/2 bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex justify-center"> |
| <div class="relative w-full max-w-md"> |
| <div class="bg-gray-800 rounded-lg p-4 mb-4"> |
| <div class="flex justify-between items-center mb-3"> |
| <div class="flex items-center"> |
| <div class="language-flag" style="background-image: url('https://flagcdn.com/w20/jp.png')"></div> |
| <span class="text-white text-sm">Original</span> |
| </div> |
| <button class="text-indigo-300 hover:text-indigo-200 text-sm"> |
| <i class="fas fa-edit mr-1"></i> Editar |
| </button> |
| </div> |
| <p class="text-gray-300 text-sm">こんにちは、私の名前はタケシです</p> |
| </div> |
| <div class="bg-indigo-800 rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="language-flag" style="background-image: url('https://flagcdn.com/w20/br.png')"></div> |
| <span class="text-white text-sm">Tradução</span> |
| </div> |
| <p class="text-gray-300 text-sm">Olá, meu nome é Takeshi</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> |
| <h3 class="text-2xl font-semibold mb-4 text-indigo-700">3. Leia e Aproveite</h3> |
| <p class="text-gray-600 mb-4">Visualize o mangá traduzido com o texto integrado perfeitamente nos balões, mantendo o estilo original.</p> |
| <div class="flex space-x-4"> |
| <button class="bg-indigo-600 hover:bg-indigo-500 text-white px-6 py-2 rounded-lg font-medium transition flex items-center"> |
| <i class="fas fa-book-open mr-2"></i> Ler Agora |
| </button> |
| <button class="border border-indigo-600 text-indigo-600 hover:bg-indigo-50 px-6 py-2 rounded-lg font-medium transition flex items-center"> |
| <i class="fas fa-download mr-2"></i> Baixar |
| </button> |
| </div> |
| </div> |
| <div class="md:w-1/2 bg-white p-6 rounded-xl shadow-md"> |
| <div class="flex justify-center"> |
| <div class="relative"> |
| <img src="https://via.placeholder.com/300x450/EEEEEE/555555?text=Manga+Traduzido" alt="Manga Traduzido" class="rounded-lg shadow-lg max-h-80"> |
| <div class="absolute -bottom-4 -right-4 bg-indigo-600 text-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg"> |
| <i class="fas fa-check text-xl"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="flex justify-between items-center mb-8"> |
| <h2 class="text-3xl font-bold text-gray-800">Mangás Populares</h2> |
| <a href="#" class="text-indigo-600 hover:text-indigo-500 font-medium flex items-center"> |
| Ver todos <i class="fas fa-chevron-right ml-2"></i> |
| </a> |
| </div> |
| |
| <div class="grid sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6"> |
| |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition manga-panel"> |
| <div class="relative"> |
| <img src="https://via.placeholder.com/300x450/555555/FFFFFF?text=One+Piece" alt="One Piece" class="w-full h-64 object-cover"> |
| <div class="absolute top-2 right-2 bg-indigo-600 text-white text-xs font-bold px-2 py-1 rounded"> |
| Novo |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">One Piece</h3> |
| <p class="text-gray-600 text-sm mb-3">Eiichiro Oda</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-indigo-600 text-sm font-medium">Cap. 1084</span> |
| <div class="flex space-x-1"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <span class="text-gray-700 text-sm">4.9</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition manga-panel"> |
| <img src="https://via.placeholder.com/300x450/555555/FFFFFF?text=Attack+on+Titan" alt="Attack on Titan" class="w-full h-64 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Attack on Titan</h3> |
| <p class="text-gray-600 text-sm mb-3">Hajime Isayama</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-indigo-600 text-sm font-medium">Finalizado</span> |
| <div class="flex space-x-1"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <span class="text-gray-700 text-sm">4.8</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition manga-panel"> |
| <div class="relative"> |
| <img src="https://via.placeholder.com/300x450/555555/FFFFFF?text=Jujutsu+Kaisen" alt="Jujutsu Kaisen" class="w-full h-64 object-cover"> |
| <div class="absolute top-2 right-2 bg-red-500 text-white text-xs font-bold px-2 py-1 rounded"> |
| Hot |
| </div> |
| </div> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Jujutsu Kaisen</h3> |
| <p class="text-gray-600 text-sm mb-3">Gege Akutami</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-indigo-600 text-sm font-medium">Cap. 223</span> |
| <div class="flex space-x-1"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <span class="text-gray-700 text-sm">4.7</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="bg-gray-50 rounded-xl overflow-hidden shadow-md hover:shadow-lg transition manga-panel"> |
| <img src="https://via.placeholder.com/300x450/555555/FFFFFF?text=Chainsaw+Man" alt="Chainsaw Man" class="w-full h-64 object-cover"> |
| <div class="p-4"> |
| <h3 class="font-bold text-lg mb-1 text-gray-800">Chainsaw Man</h3> |
| <p class="text-gray-600 text-sm mb-3">Tatsuki Fujimoto</p> |
| <div class="flex justify-between items-center"> |
| <span class="text-indigo-600 text-sm font-medium">Cap. 127</span> |
| <div class="flex space-x-1"> |
| <i class="fas fa-star text-yellow-400"></i> |
| <span class="text-gray-700 text-sm">4.9</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-indigo-50"> |
| <div class="container mx-auto px-4"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">O que os fãs dizem</h2> |
| |
| <div class="grid md:grid-cols-3 gap-8"> |
| |
| <div class="bg-white rounded-xl p-6 shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold mr-4"> |
| CR |
| </div> |
| <div> |
| <h4 class="font-semibold">Carlos R.</h4> |
| <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> |
| <p class="text-gray-600">"Finalmente posso ler meus mangás favoritos em português sem precisar esperar pelas traduções oficiais. A qualidade é impressionante!"</p> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl p-6 shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold mr-4"> |
| AM |
| </div> |
| <div> |
| <h4 class="font-semibold">Ana M.</h4> |
| <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-half-alt text-yellow-400"></i> |
| </div> |
| </div> |
| </div> |
| <p class="text-gray-600">"Uso para estudar japonês comparando o original com a tradução. Melhor ferramenta para fãs de mangá que querem aprender o idioma!"</p> |
| </div> |
| |
| |
| <div class="bg-white rounded-xl p-6 shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 font-bold mr-4"> |
| LS |
| </div> |
| <div> |
| <h4 class="font-semibold">Lucas S.</h4> |
| <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> |
| <p class="text-gray-600">"A tradução mantém o contexto e as piadas, algo que outros tradutores automáticos não conseguem. Recomendo demais!"</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="py-16 bg-indigo-900 text-white"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Pronto para mergulhar no mundo dos mangás?</h2> |
| <p class="text-xl text-indigo-200 mb-8 max-w-3xl mx-auto">Junte-se a milhares de fãs que já estão lendo seus mangás favoritos em português com traduções de alta qualidade.</p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> |
| <button class="bg-white text-indigo-900 hover:bg-indigo-100 px-8 py-4 rounded-lg font-bold text-lg transition"> |
| Começar Agora - Grátis |
| </button> |
| <button class="bg-transparent border-2 border-white hover:bg-white hover:text-indigo-900 px-8 py-4 rounded-lg font-bold text-lg transition"> |
| <i class="fas fa-play-circle mr-2"></i> Ver Vídeo |
| </button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <footer class="bg-gray-900 text-gray-400 py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid md:grid-cols-4 gap-8 mb-8"> |
| <div> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-book-open text-2xl text-indigo-500"></i> |
| <h3 class="text-xl font-bold text-white">MangaTranslate Pro</h3> |
| </div> |
| <p class="mb-4">A melhor plataforma para tradução e leitura de mangás em múltiplos idiomas.</p> |
| <div class="flex space-x-4"> |
| <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-discord"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-semibold mb-4">Produto</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition">Recursos</a></li> |
| <li><a href="#" class="hover:text-white transition">Planos</a></li> |
| <li><a href="#" class="hover:text-white transition">API</a></li> |
| <li><a href="#" class="hover:text-white transition">Aplicativo</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-semibold mb-4">Suporte</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition">Central de Ajuda</a></li> |
| <li><a href="#" class="hover:text-white transition">Tutoriais</a></li> |
| <li><a href="#" class="hover:text-white transition">Comunidade</a></li> |
| <li><a href="#" class="hover:text-white transition">Contato</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-white font-semibold mb-4">Legal</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="hover:text-white transition">Termos</a></li> |
| <li><a href="#" class="hover:text-white transition">Privacidade</a></li> |
| <li><a href="#" class="hover:text-white transition">Cookies</a></li> |
| <li><a href="#" class="hover:text-white transition">DMCA</a></li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p>© 2023 MangaTranslate Pro. Todos os direitos reservados.</p> |
| <div class="flex space-x-6 mt-4 md:mt-0"> |
| <a href="#" class="hover:text-white transition">Idioma: Português</a> |
| <a href="#" class="hover:text-white transition">Brasil</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <script> |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { |
| const menu = document.getElementById('mobile-menu'); |
| menu.classList.toggle('hidden'); |
| }); |
| </script> |
|
|
| |
| <script> |
| document.getElementById('translate-btn').addEventListener('click', function() { |
| const btn = this; |
| const originalText = document.getElementById('translated-text'); |
| |
| |
| originalText.innerHTML = '<span class="loading-spinner inline-block mr-2"><i class="fas fa-spinner"></i></span> Traduzindo...'; |
| btn.disabled = true; |
| btn.innerHTML = '<i class="fas fa-spinner loading-spinner mr-2"></i> Traduzindo'; |
| |
| |
| setTimeout(function() { |
| |
| const translations = [ |
| "Naruto: Eu nunca vou desistir dos meus sonhos!", |
| "Goku: Kamehameha!!!", |
| "Luffy: Eu serei o Rei dos Piratas!", |
| "Eren: Eu vou destruir todos os titãs!", |
| "Tanjiro: Eu protegerei minha irmã custe o que custar!" |
| ]; |
| |
| |
| const randomTranslation = translations[Math.floor(Math.random() * translations.length)]; |
| |
| |
| originalText.textContent = randomTranslation; |
| btn.disabled = false; |
| btn.innerHTML = '<i class="fas fa-language mr-2"></i> Traduzir Novamente'; |
| }, 1500); |
| }); |
| </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=elizeunke/op" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
