Spaces:
Running
Running
| <html lang="pt-BR"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>NewsPress - Seu Portal de Notícias</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 animations and effects */ | |
| .news-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0,0,0,0.1); | |
| } | |
| .breaking-news { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { background-color: #ef4444; } | |
| 50% { background-color: #dc2626; } | |
| 100% { background-color: #ef4444; } | |
| } | |
| .dropdown-menu { | |
| display: none; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .dropdown:hover .dropdown-menu { | |
| display: block; | |
| opacity: 1; | |
| } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Top Bar --> | |
| <div class="bg-gray-800 text-white py-2 px-4"> | |
| <div class="container mx-auto flex justify-between items-center"> | |
| <div class="text-sm"> | |
| <span class="hidden md:inline">Hoje: <span id="current-date" class="font-medium"></span></span> | |
| </div> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="hover:text-red-400 transition"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="hover:text-red-400 transition"><i class="fab fa-twitter"></i></a> | |
| <a href="#" class="hover:text-red-400 transition"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="hover:text-red-400 transition"><i class="fab fa-youtube"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-4 md:mb-0"> | |
| <h1 class="text-3xl font-bold text-gray-800"> | |
| <span class="text-red-600">News</span>Press | |
| </h1> | |
| <p class="text-sm text-gray-500">Seu portal de notícias confiável</p> | |
| </div> | |
| <div class="w-full md:w-1/3 relative"> | |
| <form action="#" method="get" class="flex"> | |
| <input type="text" placeholder="Buscar notícias..." class="w-full px-4 py-2 border border-gray-300 rounded-l focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| <button type="submit" class="bg-red-600 text-white px-4 py-2 rounded-r hover:bg-red-700 transition"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Navigation --> | |
| <nav class="bg-red-600 text-white sticky top-0 z-50 shadow-lg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <ul class="flex flex-col md:flex-row w-full"> | |
| <li class="dropdown relative"> | |
| <a href="#" class="block py-4 px-6 hover:bg-red-700 transition"> | |
| <i class="fas fa-home mr-2"></i> Home | |
| </a> | |
| </li> | |
| <li class="dropdown relative"> | |
| <a href="#" class="block py-4 px-6 hover:bg-red-700 transition"> | |
| <i class="fas fa-globe-americas mr-2"></i> Mundo | |
| </a> | |
| <ul class="dropdown-menu absolute left-0 w-48 bg-white text-gray-800 shadow-lg rounded-b z-50"> | |
| <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Europa</a></li> | |
| <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Américas</a></li> | |
| <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">Ásia</a></li> | |
| <li><a href="#" class="block px-4 py-2 hover:bg-gray-100">África</a></li> | |
| </ul> | |
| </li> | |
| <li class="dropdown relative"> | |
| <a href="#" class="block py-4 px-6 hover:bg-red-700 transition"> | |
| <i class="fas fa-landmark mr-2"></i> Política | |
| </a> | |
| </li> | |
| <li class="dropdown relative"> | |
| <a href="#" class="block py-4 px-6 hover:bg-red-700 transition"> | |
| <i class="fas fa-chart-line mr-2"></i> Economia | |
| </a> | |
| </li> | |
| <li class="dropdown relative"> | |
| <a href="#" class="block py-4 px-6 hover:bg-red-700 transition"> | |
| <i class="fas fa-futbol mr-2"></i> Esportes | |
| </a> | |
| </li> | |
| <li class="dropdown relative"> | |
| <a href="#" class="block py-4 px-6 hover:bg-red-700 transition"> | |
| <i class="fas fa-video mr-2"></i> Entretenimento | |
| </a> | |
| </li> | |
| <li class="dropdown relative"> | |
| <a href="#" class="block py-4 px-6 hover:bg-red-700 transition"> | |
| <i class="fas fa-flask mr-2"></i> Tecnologia | |
| </a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Breaking News Ticker --> | |
| <div class="bg-red-600 text-white py-2 px-4"> | |
| <div class="container mx-auto flex items-center"> | |
| <span class="font-bold mr-4 whitespace-nowrap breaking-news px-3 py-1 rounded">ÚLTIMA HORA</span> | |
| <div class="overflow-hidden"> | |
| <div class="animate-marquee whitespace-nowrap"> | |
| <span class="mr-8">🔴 Presidente anuncia novas medidas econômicas para conter inflação</span> | |
| <span class="mr-8">🔴 Seleção brasileira convocada para amistosos internacionais</span> | |
| <span class="mr-8">🔴 Nova variante do vírus é detectada em três países</span> | |
| <span class="mr-8">🔴 Mercado de ações tem maior queda do ano</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="flex flex-col lg:flex-row gap-8"> | |
| <!-- Main Content Area --> | |
| <div class="w-full lg:w-2/3"> | |
| <!-- Featured News --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6 pb-2 border-b-2 border-red-600 text-gray-800">Destaque</h2> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden news-card transition duration-300"> | |
| <div class="relative"> | |
| <img src="https://source.unsplash.com/random/800x450/?news" alt="Featured News" class="w-full h-96 object-cover"> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-6"> | |
| <span class="bg-red-600 text-white text-xs font-semibold px-2 py-1 rounded">POLÍTICA</span> | |
| <h3 class="text-2xl md:text-3xl font-bold text-white mt-2">Governo anuncia pacote de R$ 100 bilhões para infraestrutura em todo o país</h3> | |
| <p class="text-gray-200 mt-2">Medida visa impulsionar a economia e gerar empregos em todos os estados</p> | |
| <div class="flex items-center mt-4 text-sm text-gray-300"> | |
| <span><i class="far fa-clock mr-1"></i> 2 horas atrás</span> | |
| <span class="mx-3">|</span> | |
| <span><i class="far fa-eye mr-1"></i> 1.2K visualizações</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-gray-700">O presidente anunciou nesta manhã um ambicioso plano de investimentos em infraestrutura que deve beneficiar todos os estados brasileiros. O pacote inclui obras em rodovias, ferrovias, portos e aeroportos, além de investimentos em saneamento básico e energia renovável...</p> | |
| <a href="#" class="inline-block mt-4 text-red-600 font-semibold hover:text-red-800 transition">Continuar lendo <i class="fas fa-arrow-right ml-1"></i></a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Latest News --> | |
| <section class="mb-12"> | |
| <h2 class="text-2xl font-bold mb-6 pb-2 border-b-2 border-red-600 text-gray-800">Últimas Notícias</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <!-- News Card 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden news-card transition duration-300"> | |
| <img src="https://source.unsplash.com/random/400x250/?sports" alt="News" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <span class="bg-blue-600 text-white text-xs font-semibold px-2 py-1 rounded">ESPORTES</span> | |
| <h3 class="text-xl font-bold mt-2 text-gray-800">Time brasileiro vence importante torneio internacional</h3> | |
| <p class="text-gray-600 text-sm mt-2">Com uma atuação brilhante, o time garantiu o título após 12 anos</p> | |
| <div class="flex justify-between items-center mt-4 text-xs text-gray-500"> | |
| <span><i class="far fa-clock mr-1"></i> 1 hora atrás</span> | |
| <span><i class="far fa-eye mr-1"></i> 856</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- News Card 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden news-card transition duration-300"> | |
| <img src="https://source.unsplash.com/random/400x250/?technology" alt="News" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <span class="bg-purple-600 text-white text-xs font-semibold px-2 py-1 rounded">TECNOLOGIA</span> | |
| <h3 class="text-xl font-bold mt-2 text-gray-800">Nova inteligência artificial revoluciona mercado</h3> | |
| <p class="text-gray-600 text-sm mt-2">Empresa anuncia ferramenta que promete mudar a forma como trabalhamos</p> | |
| <div class="flex justify-between items-center mt-4 text-xs text-gray-500"> | |
| <span><i class="far fa-clock mr-1"></i> 3 horas atrás</span> | |
| <span><i class="far fa-eye mr-1"></i> 1.5K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- News Card 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden news-card transition duration-300"> | |
| <img src="https://source.unsplash.com/random/400x250/?economy" alt="News" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <span class="bg-green-600 text-white text-xs font-semibold px-2 py-1 rounded">ECONOMIA</span> | |
| <h3 class="text-xl font-bold mt-2 text-gray-800">Dólar cai para menor valor em 6 meses</h3> | |
| <p class="text-gray-600 text-sm mt-2">Moeda americana recua após anúncio de medidas do Banco Central</p> | |
| <div class="flex justify-between items-center mt-4 text-xs text-gray-500"> | |
| <span><i class="far fa-clock mr-1"></i> 5 horas atrás</span> | |
| <span><i class="far fa-eye mr-1"></i> 2.3K</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- News Card 4 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden news-card transition duration-300"> | |
| <img src="https://source.unsplash.com/random/400x250/?health" alt="News" class="w-full h-48 object-cover"> | |
| <div class="p-4"> | |
| <span class="bg-teal-600 text-white text-xs font-semibold px-2 py-1 rounded">SAÚDE</span> | |
| <h3 class="text-xl font-bold mt-2 text-gray-800">Estudo revela benefícios de nova terapia contra câncer</h3> | |
| <p class="text-gray-600 text-sm mt-2">Pesquisa mostra redução de 60% nos efeitos colaterais</p> | |
| <div class="flex justify-between items-center mt-4 text-xs text-gray-500"> | |
| <span><i class="far fa-clock mr-1"></i> 7 horas atrás</span> | |
| <span><i class="far fa-eye mr-1"></i> 3.1K</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-6 rounded-full transition duration-300"> | |
| Carregar Mais Notícias <i class="fas fa-sync-alt ml-2"></i> | |
| </button> | |
| </div> | |
| </section> | |
| <!-- News Categories --> | |
| <section class="mb-12"> | |
| <div class="flex flex-wrap gap-4 mb-6"> | |
| <button class="bg-red-600 text-white px-4 py-2 rounded-full text-sm font-semibold">Todas</button> | |
| <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-full text-sm font-semibold transition">Política</button> | |
| <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-full text-sm font-semibold transition">Economia</button> | |
| <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-full text-sm font-semibold transition">Esportes</button> | |
| <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-full text-sm font-semibold transition">Tecnologia</button> | |
| <button class="bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-full text-sm font-semibold transition">Saúde</button> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Sidebar --> | |
| <div class="w-full lg:w-1/3"> | |
| <!-- Weather Widget --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2"> | |
| <i class="fas fa-cloud-sun text-blue-500 mr-2"></i> Previsão do Tempo | |
| </h3> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <div class="text-3xl font-bold text-gray-800">28°C</div> | |
| <div class="text-gray-600">São Paulo, SP</div> | |
| </div> | |
| <div class="text-5xl text-blue-500"> | |
| <i class="fas fa-sun"></i> | |
| </div> | |
| </div> | |
| <div class="mt-4 grid grid-cols-4 gap-2 text-center text-xs"> | |
| <div class="p-2 border rounded"> | |
| <div>Seg</div> | |
| <i class="fas fa-cloud-sun text-blue-500 my-1"></i> | |
| <div>27°C</div> | |
| </div> | |
| <div class="p-2 border rounded"> | |
| <div>Ter</div> | |
| <i class="fas fa-cloud-rain text-blue-500 my-1"></i> | |
| <div>24°C</div> | |
| </div> | |
| <div class="p-2 border rounded"> | |
| <div>Qua</div> | |
| <i class="fas fa-sun text-yellow-500 my-1"></i> | |
| <div>30°C</div> | |
| </div> | |
| <div class="p-2 border rounded"> | |
| <div>Qui</div> | |
| <i class="fas fa-cloud text-gray-400 my-1"></i> | |
| <div>26°C</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Most Read --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2"> | |
| <i class="fas fa-fire text-red-500 mr-2"></i> Mais Lidas | |
| </h3> | |
| <ul class="space-y-4"> | |
| <li class="flex items-start"> | |
| <span class="bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center mt-1 mr-3">1</span> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 hover:text-red-600 transition cursor-pointer">Crise política ameaça acordo comercial com China</h4> | |
| <div class="flex text-xs text-gray-500 mt-1"> | |
| <span><i class="far fa-clock mr-1"></i> 5h atrás</span> | |
| <span class="mx-2">|</span> | |
| <span><i class="far fa-eye mr-1"></i> 4.2K</span> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-orange-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center mt-1 mr-3">2</span> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 hover:text-red-600 transition cursor-pointer">Atriz global anuncia gravidez aos 42 anos</h4> | |
| <div class="flex text-xs text-gray-500 mt-1"> | |
| <span><i class="far fa-clock mr-1"></i> 8h atrás</span> | |
| <span class="mx-2">|</span> | |
| <span><i class="far fa-eye mr-1"></i> 3.8K</span> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-yellow-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center mt-1 mr-3">3</span> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 hover:text-red-600 transition cursor-pointer">Novo aplicativo promete revolucionar transporte urbano</h4> | |
| <div class="flex text-xs text-gray-500 mt-1"> | |
| <span><i class="far fa-clock mr-1"></i> 10h atrás</span> | |
| <span class="mx-2">|</span> | |
| <span><i class="far fa-eye mr-1"></i> 3.5K</span> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-gray-300 text-gray-800 text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center mt-1 mr-3">4</span> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 hover:text-red-600 transition cursor-pointer">Mercado de ações tem semana volátil</h4> | |
| <div class="flex text-xs text-gray-500 mt-1"> | |
| <span><i class="far fa-clock mr-1"></i> 12h atrás</span> | |
| <span class="mx-2">|</span> | |
| <span><i class="far fa-eye mr-1"></i> 3.1K</span> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="flex items-start"> | |
| <span class="bg-gray-300 text-gray-800 text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center mt-1 mr-3">5</span> | |
| <div> | |
| <h4 class="font-semibold text-gray-800 hover:text-red-600 transition cursor-pointer">Pesquisa revela aumento na satisfação com serviços públicos</h4> | |
| <div class="flex text-xs text-gray-500 mt-1"> | |
| <span><i class="far fa-clock mr-1"></i> 15h atrás</span> | |
| <span class="mx-2">|</span> | |
| <span><i class="far fa-eye mr-1"></i> 2.9K</span> | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Newsletter --> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2"> | |
| <i class="fas fa-envelope text-red-500 mr-2"></i> Newsletter | |
| </h3> | |
| <p class="text-sm text-gray-600 mb-4">Receba as principais notícias diretamente no seu e-mail</p> | |
| <form> | |
| <input type="email" placeholder="Seu melhor e-mail" class="w-full px-4 py-2 border border-gray-300 rounded mb-3 focus:outline-none focus:ring-2 focus:ring-red-500"> | |
| <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-2 px-4 rounded transition duration-300"> | |
| Assinar <i class="fas fa-paper-plane ml-2"></i> | |
| </button> | |
| </form> | |
| </div> | |
| <!-- Social Media --> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h3 class="text-lg font-bold mb-4 text-gray-800 border-b pb-2"> | |
| <i class="fas fa-share-alt text-red-500 mr-2"></i> Siga-nos | |
| </h3> | |
| <div class="grid grid-cols-2 gap-3"> | |
| <a href="#" class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded flex items-center justify-center transition"> | |
| <i class="fab fa-facebook-f mr-2"></i> Facebook | |
| </a> | |
| <a href="#" class="bg-blue-400 hover:bg-blue-500 text-white py-2 px-4 rounded flex items-center justify-center transition"> | |
| <i class="fab fa-twitter mr-2"></i> Twitter | |
| </a> | |
| <a href="#" class="bg-pink-600 hover:bg-pink-700 text-white py-2 px-4 rounded flex items-center justify-center transition"> | |
| <i class="fab fa-instagram mr-2"></i> Instagram | |
| </a> | |
| <a href="#" class="bg-red-600 hover:bg-red-700 text-white py-2 px-4 rounded flex items-center justify-center transition"> | |
| <i class="fab fa-youtube mr-2"></i> YouTube | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white pt-12 pb-6"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <!-- About --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 border-b border-red-600 pb-2">Sobre Nós</h3> | |
| <p class="text-gray-400 mb-4">O NewsPress é um portal de notícias comprometido com a verdade e a qualidade da informação, trazendo as últimas novidades do Brasil e do mundo.</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-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <!-- Categories --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 border-b border-red-600 pb-2">Categorias</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Política</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Economia</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Esportes</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Entretenimento</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Tecnologia</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Saúde</a></li> | |
| </ul> | |
| </div> | |
| <!-- Quick Links --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 border-b border-red-600 pb-2">Links Rápidos</h3> | |
| <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">Sobre</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Contato</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> | |
| <!-- Contact --> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4 border-b border-red-600 pb-2">Contato</h3> | |
| <ul class="space-y-3 text-gray-400"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-red-600"></i> | |
| <span>Av. Paulista, 1000 - São Paulo/SP</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-phone-alt mt-1 mr-3 text-red-600"></i> | |
| <span>(11) 1234-5678</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-envelope mt-1 mr-3 text-red-600"></i> | |
| <span>[email protected]</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 NewsPress. Todos os direitos reservados.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Termos de Uso</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Política de Privacidade</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm transition">Cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Back to Top Button --> | |
| <button id="back-to-top" class="fixed bottom-6 right-6 bg-red-600 text-white p-3 rounded-full shadow-lg opacity-0 invisible transition-all duration-300"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Current Date | |
| const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; | |
| document.getElementById('current-date').textContent = new Date().toLocaleDateString('pt-BR', options); | |
| // Back to Top Button | |
| const backToTopButton = document.getElementById('back-to-top'); | |
| window.addEventListener('scroll', () => { | |
| if (window.pageYOffset > 300) { | |
| backToTopButton.classList.remove('opacity-0', 'invisible'); | |
| backToTopButton.classList.add('opacity-100', 'visible'); | |
| } else { | |
| backToTopButton.classList.remove('opacity-100', 'visible'); | |
| backToTopButton.classList.add('opacity-0', 'invisible'); | |
| } | |
| }); | |
| backToTopButton.addEventListener('click', () => { | |
| window.scrollTo({ | |
| top: 0, | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| // Mobile Menu Toggle (would be implemented in WordPress) | |
| // This is just a placeholder for the functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Simulate loading more news | |
| const loadMoreBtn = document.querySelector('button:contains("Carregar Mais Notícias")'); | |
| if (loadMoreBtn) { | |
| loadMoreBtn.addEventListener('click', function() { | |
| // This would be an AJAX call in WordPress | |
| alert('Mais notícias seriam carregadas aqui em uma implementação real do WordPress.'); | |
| }); | |
| } | |
| // Simulate newsletter signup | |
| const newsletterForm = document.querySelector('form'); | |
| if (newsletterForm) { | |
| newsletterForm.addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Obrigado por assinar nossa newsletter! Em uma implementação real, isso seria enviado para o banco de dados do WordPress.'); | |
| this.reset(); | |
| }); | |
| } | |
| }); | |
| </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=RomeroMelo/home-news" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |