Spaces:
Running
Running
Mete só as cores e o aspeto gráfico igual ao resto do site pf - Follow Up Deployment
7eb50ae verified | <html lang="pt"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Semana Aberta - Relatórios UC</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .stat-card { | |
| transition: all 0.3s ease; | |
| } | |
| .stat-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .bg-uc-blue { | |
| background-color: #003366; | |
| } | |
| .text-uc-gold { | |
| color: #FFD700; | |
| } | |
| .border-uc-gold { | |
| border-color: #FFD700; | |
| } | |
| .progress-bar { | |
| transition: width 2s ease-in-out; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-uc-blue text-white shadow-lg"> | |
| <div class="container mx-auto px-6 py-6"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h1 class="text-xl font-bold">Universidade de Coimbra</h1> | |
| <p class="text-gray-300 text-sm">Relatórios de Advertising 2025 - Black Monster Media</p> | |
| </div> | |
| <a href="index.html" class="text-uc-gold hover:text-yellow-400 font-medium flex items-center"> | |
| <i data-feather="home" class="mr-2"></i> Voltar ao Início | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="relative bg-gradient-to-br from-green-500 via-green-600 to-uc-blue text-white py-16"> | |
| <div class="absolute inset-0"> | |
| <div class="absolute inset-0 bg-gradient-to-r from-green-500/20 to-green-700/30"></div> | |
| <div class="absolute inset-0 bg-[url('http://static.photos/education/1200x630/3')] bg-cover bg-center mix-blend-overlay opacity-10"></div> | |
| </div> | |
| <div class="container mx-auto px-6 relative z-10 text-center"> | |
| <div class="flex items-center justify-center mb-6"> | |
| <div class="bg-green-100 p-4 rounded-full mr-4"> | |
| <i data-feather="calendar" class="text-green-600 text-2xl"></i> | |
| </div> | |
| <h1 class="text-3xl md:text-4xl font-bold">Semana Aberta</h1> | |
| </div> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto" data-aos="fade-up"> | |
| Campanha realizada de Março a Maio de 2025 | |
| </p> | |
| </div> | |
| </section> | |
| <!-- Overview Section --> | |
| <section class="py-12 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12"> | |
| <!-- Total Investment --> | |
| <div class="stat-card bg-white rounded-xl shadow-lg p-6 text-center border-l-4 border-green-500" data-aos="fade-up"> | |
| <div class="bg-green-100 p-3 rounded-full inline-flex mb-4"> | |
| <i data-feather="dollar-sign" class="text-green-600"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">€2.470,62</h3> | |
| <p class="text-gray-600">Investimento Total</p> | |
| </div> | |
| <!-- Total Impressions --> | |
| <div class="stat-card bg-white rounded-xl shadow-lg p-6 text-center border-l-4 border-blue-500" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="bg-blue-100 p-3 rounded-full inline-flex mb-4"> | |
| <i data-feather="eye" class="text-blue-600"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">1.995.088</h3> | |
| <p class="text-gray-600">Total de Impressões</p> | |
| </div> | |
| <!-- Total Clicks --> | |
| <div class="stat-card bg-white rounded-xl shadow-lg p-6 text-center border-l-4 border-purple-500" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="bg-purple-100 p-3 rounded-full inline-flex mb-4"> | |
| <i data-feather="mouse-pointer" class="text-purple-600"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">13.288</h3> | |
| <p class="text-gray-600">Total de Clicks</p> | |
| </div> | |
| </div> | |
| <!-- Platform Comparison --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12"> | |
| <!-- Meta Data --> | |
| <div class="bg-blue-50 rounded-xl p-6 shadow-md" data-aos="fade-right"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-blue-600 p-3 rounded-full mr-4"> | |
| <i data-feather="facebook" class="text-white"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800">Meta Advertising</h2> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Período:</span> | |
| <span class="font-semibold">Março a Maio</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Investimento:</span> | |
| <span class="font-semibold">€1.266,65</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Impressões:</span> | |
| <span class="font-semibold">1.987.048</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Alcance:</span> | |
| <span class="font-semibold">626.602</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Clicks Links:</span> | |
| <span class="font-semibold">11.440</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">CTR:</span> | |
| <span class="font-semibold text-green-600">1,83%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Google Data --> | |
| <div class="bg-red-50 rounded-xl p-6 shadow-md" data-aos="fade-left"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-red-600 p-3 rounded-full mr-4"> | |
| <i data-feather="search" class="text-white"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800">Google Advertising</h2> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Período:</span> | |
| <span class="font-semibold">Março a Maio</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Investimento:</span> | |
| <span class="font-semibold">€1.203,97</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Impressões:</span> | |
| <span class="font-semibold">8.040</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">Clicks Links:</span> | |
| <span class="font-semibold">1.848</span> | |
| </div> | |
| <div class="flex justify-between items-center"> | |
| <span class="text-gray-600">CTR:</span> | |
| <span class="font-semibold text-green-600">22,99%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Enrollment Stats --> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-md mb-12" data-aos="fade-up"> | |
| <h2 class="text-2xl font-bold text-gray-800 mb-8 text-center">Participação - Evolução Anual</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"> | |
| <!-- 2025 --> | |
| <div class="text-center"> | |
| <div class="bg-blue-600 text-white rounded-full p-6 mx-auto mb-4"> | |
| <span class="text-2xl font-bold">2025</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <p class="text-lg font-semibold text-gray-800">2.576 inscritos</p> | |
| <p class="text-lg font-semibold text-blue-600">2.135 presenças</p> | |
| </div> | |
| </div> | |
| <!-- 2024 --> | |
| <div class="text-center"> | |
| <div class="bg-gray-400 text-white rounded-full p-6 mx-auto mb-4"> | |
| <span class="text-2xl font-bold">2024</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <p class="text-lg font-semibold text-gray-800">2.050 inscritos</p> | |
| <p class="text-lg font-semibold text-gray-600">2.370 presenças</p> | |
| </div> | |
| </div> | |
| <!-- 2023 --> | |
| <div class="text-center"> | |
| <div class="bg-gray-300 text-gray-800 rounded-full p-6 mx-auto mb-4"> | |
| <span class="text-2xl font-bold">2023</span> | |
| </div> | |
| <div class="space-y-2"> | |
| <p class="text-lg font-semibold text-gray-800">938 inscritos</p> | |
| <p class="text-lg font-semibold text-gray-500">1.000 presenças</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Observations --> | |
| <div class="bg-yellow-50 rounded-xl p-8 shadow-md border-l-4 border-yellow-500" data-aos="fade-up"> | |
| <div class="flex items-center mb-6"> | |
| <div class="bg-yellow-500 p-3 rounded-full mr-4"> | |
| <i data-feather="alert-circle" class="text-white"></i> | |
| </div> | |
| <h2 class="text-2xl font-bold text-gray-800">Observações</h2> | |
| </div> | |
| <div class="space-y-4 text-gray-700"> | |
| <p>📈 <strong>Tendência crescente:</strong> Conseguimos manter o aumento no número de inscritos.</p> | |
| <p>⚠️ <strong>Participação:</strong> O número de participantes não correspondeu à subida de inscritos, provavelmente devido à alteração da data do evento.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="md:col-span-2"> | |
| <h3 class="text-xl font-bold mb-4">Universidade de Coimbra</h3> | |
| <p class="text-gray-400">Análise de dados e relatórios de marketing institucional.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">Contactos</h3> | |
| <address class="text-gray-400 not-italic"> | |
| <p>Rua Pedro Nunes, Instituto Pedro Nunes, Bloco C - 3030-792</p> | |
| <p>Email: info@blackmonstermedia.com</p> | |
| <p>Telefone: 914251472</p> | |
| </address> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400"> | |
| <p>© 2025 Black Monster Media. Todos os direitos reservados.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| feather.replace(); | |
| // Animate progress bars | |
| document.addEventListener('DOMContentLoaded', function() { | |
| setTimeout(() => { | |
| document.querySelectorAll('.progress-bar').forEach(bar => { | |
| bar.style.width = bar.getAttribute('data-width'); | |
| }); | |
| }, 500); | |
| }); | |
| </script> | |
| </body> | |
| </html> |