Spaces:
Running
Running
| <html lang="pt"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Exposição sobre o Professor Raúl Huarote</title> | |
| <!-- Carga de Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Fuente Inter --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #1a202c; /* Azul muy oscuro para el fondo */ | |
| } | |
| /* Contenedor principal con relación de aspecto 4:3 */ | |
| #presentation-container { | |
| width: 100%; | |
| max-width: 1024px; /* Un tamaño máximo razonable para 4:3 */ | |
| margin: auto; | |
| aspect-ratio: 4 / 3; | |
| box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); | |
| background-color: #0b224f; /* Un azul más oscuro */ | |
| } | |
| /* Estilo base de cada slide */ | |
| .slide { | |
| transition: opacity 0.4s ease-in-out; | |
| background-color: #1a2c4e; /* Fondo de slide azul oscuro */ | |
| } | |
| /* Colores personalizados */ | |
| .text-primary { color: #4ade80; } /* Verde brillante */ | |
| .bg-primary { background-color: #4ade80; } | |
| .text-secondary { color: #818cf8; } /* Azul claro */ | |
| .bg-secondary { background-color: #818cf8; } | |
| .border-primary { border-color: #4ade80; } | |
| .hover\:bg-primary-dark:hover { background-color: #22c55e; } | |
| </style> | |
| </head> | |
| <body class="flex items-center justify-center min-h-screen p-4"> | |
| <!-- Contenedor 4:3 --> | |
| <div id="presentation-container" class="text-white rounded-lg overflow-hidden relative"> | |
| <!-- Slide 1: Portada (Centrada) --> | |
| <div class="slide absolute inset-0 w-full h-full p-12 flex flex-col justify-center items-center text-center"> | |
| <h1 class="text-6xl font-bold text-primary mb-6">Meu Professor Inspirador</h1> | |
| <h2 class="text-4xl font-semibold text-secondary">Professor Raúl Eduardo Huarote Zegarra</h2> | |
| <p class="text-2xl text-gray-300 mt-8">Uma Influência na Minha Jornada Universitária</p> | |
| <p class="text-xl text-gray-400 mt-4">Apresentado por Jairo Mendoza Torres</p> | |
| </div> | |
| <!-- Slide 2: Introducción (Foto + Texto) --> | |
| <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0"> | |
| <div class="flex w-full space-x-8 items-center"> | |
| <div class="w-1/2 flex justify-center"> | |
| <img src="https://ctivitae.concytec.gob.pe/appDirectorioCTI/UploadFotoPath.do?tipo=visualizar_archivo&id_investigador=54342&ruta=/documents/docInvestigadores/54342/imagenes/Foto_HuaroteZegarraRaul.jpg" alt="Foto do Professor Raúl Huarote" class="rounded-full w-64 h-64 object-cover border-4 border-primary shadow-lg" onerror="this.style.display='none'"> | |
| </div> | |
| <div class="w-1/2 flex flex-col justify-center"> | |
| <h2 class="text-4xl font-bold text-primary mb-6">Professor Raúl Huarote</h2> | |
| <p class="text-2xl text-secondary mb-4">Docente e Investigador</p> | |
| <ul class="list-disc list-inside text-xl space-y-3 text-gray-300"> | |
| <li>Engenheiro Informático</li> | |
| <li>Mestre em Ciências da Computação</li> | |
| <li>Candidato a Doutor em Engenharia de Sistemas</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 3: Trayectoria (Texto + Foto) --> | |
| <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0"> | |
| <div class="flex w-full space-x-8 items-center"> | |
| <div class="w-1/2 flex flex-col justify-center"> | |
| <h2 class="text-4xl font-bold text-primary mb-6">Trajetória e Formação</h2> | |
| <ul class="list-disc list-inside text-xl space-y-3 text-gray-300"> | |
| <li>Mais de 15 anos de experiência em docência e pesquisa.</li> | |
| <li>Atuou em universidades como UNTELS, UNI, Federico Villarreal, UTP e César Vallejo.</li> | |
| <li>Forte base acadêmica na Universidade Nacional de Trujillo.</li> | |
| </ul> | |
| </div> | |
| <div class="w-1/2 flex justify-center"> | |
| <img src="https://ctivitae.concytec.gob.pe/appDirectorioCTI/UploadFotoPath.do?tipo=visualizar_archivo&id_investigador=54342&ruta=/documents/docInvestigadores/54342/imagenes/Foto_HuaroteZegarraRaul.jpg" alt="Foto do Professor Raúl Huarote" class="rounded-lg w-72 h-auto object-cover border-2 border-secondary shadow-lg" onerror="this.style.display='none'"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 4: Solo Texto (Centrado) --> | |
| <div class="slide absolute inset-0 w-full h-full p-12 flex flex-col justify-center items-center text-center hidden opacity-0"> | |
| <div class="w-full max-w-2xl"> <!-- Contenedor con ancho máximo para legibilidad --> | |
| <h2 class="text-4xl font-bold text-primary mb-8">Especialização e Pesquisa</h2> | |
| <ul class="list-disc list-inside text-xl space-y-3 text-gray-300 text-left mx-auto"> <!-- Texto de lista a la izquierda --> | |
| <li><b>Foco principal:</b> Inteligência Artificial.</li> | |
| <li>Especialista em Redes Neurais e Tecnologias da Informação.</li> | |
| <li>Autor de artigos científicos em revistas internacionais.</li> | |
| <li>Possui patentes registradas.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Slide 5: Solo Texto (Centrado) --> | |
| <div class="slide absolute inset-0 w-full h-full p-12 flex flex-col justify-center items-center text-center hidden opacity-0"> | |
| <div class="w-full max-w-2xl"> | |
| <h2 class="text-4xl font-bold text-primary mb-8">Projetos Destacados</h2> | |
| <ul class="list-disc list-inside text-xl space-y-3 text-gray-300 text-left mx-auto"> | |
| <li>Sistema de aprendizagem artificial de movimentos do braço.</li> | |
| <li>Leitor de texto para braille em alto relevo (acessibilidade para pessoas com deficiência visual).</li> | |
| <li>Inovação com impacto social e tecnológico.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Slide 6: Solo Texto (Centrado) --> | |
| <div class="slide absolute inset-0 w-full h-full p-12 flex flex-col justify-center items-center text-center hidden opacity-0"> | |
| <div class="w-full max-w-3xl"> <!-- Un poco más de ancho para esta lista --> | |
| <h2 class="text-4xl font-bold text-primary mb-8">Reconhecimentos e Docência</h2> | |
| <ul class="list-disc list-inside text-xl space-y-3 text-gray-300 text-left mx-auto"> | |
| <li>Premiado por seu trabalho em pesquisa.</li> | |
| <li>Professor exigente, bem preparado e com domínio profundo do tema.</li> | |
| <li>Fomenta a pesquisa em IA entre seus alunos.</li> | |
| <li>Apoia o desenvolvimento acadêmico, profissional e científico.</li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Slide 7: Personalidad (Texto + Foto) --> | |
| <div class="slide absolute inset-0 w-full h-full p-12 flex items-center hidden opacity-0"> | |
| <div class="flex w-full space-x-8 items-center"> | |
| <div class="w-1/2 flex flex-col justify-center"> | |
| <h2 class="text-4xl font-bold text-primary mb-6">Personalidade e Contribuição Pessoal</h2> | |
| <ul class="list-disc list-inside text-xl space-y-3 text-gray-300"> | |
| <li>Pessoa disciplinada, analítica e muito dedicada.</li> | |
| <li>Ensina combinando exigência com apoio.</li> | |
| <li>Motivou-me a seguir a linha de pesquisa em IA.</li> | |
| <li>Reforça o pensamento crítico e a aplicação prática do conhecimento.</li> | |
| </ul> | |
| </div> | |
| <div class="w-1/2 flex justify-center"> | |
| <img src="https://ctivitae.concytec.gob.pe/appDirectorioCTI/UploadFotoPath.do?tipo=visualizar_archivo&id_investigador=54342&ruta=/documents/docInvestigadores/54342/imagenes/Foto_HuaroteZegarraRaul.jpg" alt="Foto do Professor Raúl Huarote" class="rounded-full w-64 h-64 object-cover border-4 border-secondary shadow-lg" onerror="this.style.display='none'"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Slide 8: Conclusión (Centrado) --> | |
| <div class="slide absolute inset-0 w-full h-full p-12 flex flex-col justify-center items-center text-center hidden opacity-0"> | |
| <h2 class="text-5xl font-bold text-primary mb-8">Conclusão</h2> | |
| <p class="text-3xl text-secondary mb-4">Mais do que um docente, um Inspirador!</p> | |
| <p class="text-2xl text-gray-300 max-w-3xl">O Professor Raúl Huarote inspira a investigar, a questionar e a melhorar a cada dia. É um verdadeiro modelo a seguir.</p> | |
| </div> | |
| <!-- Controles de Navegación --> | |
| <button id="prev-slide" class="absolute bottom-6 left-6 bg-primary hover:bg-primary-dark text-gray-900 font-bold py-2 px-6 rounded-full shadow-lg transition disabled:opacity-50 disabled:cursor-not-allowed z-10"> | |
| Anterior | |
| </button> | |
| <button id="next-slide" class="absolute bottom-6 right-6 bg-primary hover:bg-primary-dark text-gray-900 font-bold py-2 px-6 rounded-full shadow-lg transition disabled:opacity-50 disabled:cursor-not-allowed z-10"> | |
| Próximo | |
| </button> | |
| <div id="slide-counter" class="absolute bottom-7 left-1/2 -translate-x-1/2 text-gray-400 text-lg z-10"> | |
| 1 / 8 | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', () => { | |
| const slides = document.querySelectorAll('.slide'); | |
| const prevBtn = document.getElementById('prev-slide'); | |
| const nextBtn = document.getElementById('next-slide'); | |
| const counter = document.getElementById('slide-counter'); | |
| let currentSlide = 0; | |
| const totalSlides = slides.length; | |
| function showSlide(n) { | |
| // Ocultar slide actual | |
| slides[currentSlide].classList.add('opacity-0'); | |
| setTimeout(() => { | |
| slides[currentSlide].classList.add('hidden'); | |
| // Mostrar nuevo slide | |
| currentSlide = n; | |
| slides[currentSlide].classList.remove('hidden'); | |
| // Pequeño retraso para que 'hidden' se quite antes de la transición | |
| setTimeout(() => { | |
| slides[currentSlide].classList.remove('opacity-0'); | |
| }, 20); | |
| // Actualizar contador | |
| counter.textContent = `${currentSlide + 1} / ${totalSlides}`; | |
| // Actualizar estado de botones | |
| prevBtn.disabled = currentSlide === 0; | |
| nextBtn.disabled = currentSlide === totalSlides - 1; | |
| }, 400); // Coincide con la duración de la transición (0.4s) | |
| } | |
| // Event Listeners para botones | |
| nextBtn.addEventListener('click', () => { | |
| if (currentSlide < totalSlides - 1) { | |
| showSlide(currentSlide + 1); | |
| } | |
| }); | |
| prevBtn.addEventListener('click', () => { | |
| if (currentSlide > 0) { | |
| showSlide(currentSlide - 1); | |
| } | |
| }); | |
| // Event Listeners para teclado | |
| document.addEventListener('keydown', (e) => { | |
| if (e.key === 'ArrowRight' || e.key === 'PageDown' || e.key === ' ') { | |
| if (currentSlide < totalSlides - 1) { | |
| e.preventDefault(); | |
| showSlide(currentSlide + 1); | |
| } | |
| } else if (e.key === 'ArrowLeft' || e.key === 'PageUp') { | |
| if (currentSlide > 0) { | |
| e.preventDefault(); | |
| showSlide(currentSlide - 1); | |
| } | |
| } | |
| }); | |
| // Inicializar (asegura que el primer slide sea visible) | |
| slides[0].classList.remove('hidden'); | |
| slides[0].classList.remove('opacity-0'); | |
| prevBtn.disabled = true; | |
| counter.textContent = `1 / ${totalSlides}`; | |
| }); | |
| </script> | |
| </body> | |
| </html> | |