teste-aula / index.html
MatheusMathiasFernandes's picture
Add 3 files
574df1f verified
Raw History Blame Contribute Delete
60.4 kB
<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mundo Digital Para Todos - Curso de Inclusão Digital para Idosos</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"> <script> tailwind.config = { theme: { extend: { colors: { primary: '#5E35B1', secondary: '#7C4DFF', accent: '#FFC107', light: '#F5F5F5', dark: '#212121', }, fontFamily: { sans: ['Nunito', 'sans-serif'], }, } } } </script> <style> @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap'); body { font-family: 'Nunito', sans-serif; scroll-behavior: smooth; } .high-contrast { background-color: black !important; color: white !important; } .high-contrast .text-dark { color: white !important; } .high-contrast .bg-white { background-color: black !important; } .high-contrast .bg-light { background-color: #333 !important; } .module-card { transition: all 0.3s ease; transform: translateY(0); } .module-card:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } .testimonial-card { opacity: 0; transition: opacity 0.5s ease; } .testimonial-card.active { opacity: 1; } .quiz-option { transition: all 0.2s ease; } .quiz-option:hover { transform: scale(1.02); } .quiz-option.selected { background-color: #7C4DFF !important; color: white !important; } .quiz-option.correct { background-color: #4CAF50 !important; color: white !important; } .quiz-option.incorrect { background-color: #F44336 !important; color: white !important; } .text-large { font-size: 1.25rem; } @media (min-width: 768px) { .text-large { font-size: 1.5rem; } } </style> </head> <body class="bg-light"> <!-- Accessibility Toolbar --> <div class="bg-primary text-white py-2 px-4 flex justify-between items-center"> <div class="flex items-center space-x-4"> <button id="increaseFont" class="hover:text-accent focus:outline-none"> <i class="fas fa-text-height mr-1"></i> Aumentar Fonte </button> <button id="decreaseFont" class="hover:text-accent focus:outline-none"> <i class="fas fa-text-width mr-1"></i> Diminuir Fonte </button> <button id="toggleContrast" class="hover:text-accent focus:outline-none"> <i class="fas fa-adjust mr-1"></i> Alto Contraste </button> </div> <div> <button id="voiceGuide" class="hover:text-accent focus:outline-none"> <i class="fas fa-volume-up mr-1"></i> Guia de Voz </button> </div> </div> <!-- Navigation --> <nav class="bg-white shadow-md sticky top-0 z-50"> <div class="container mx-auto px-4 py-3 flex justify-between items-center"> <div class="flex items-center"> <i class="fas fa-laptop-code text-3xl text-primary mr-2"></i> <span class="text-xl font-bold text-dark">Mundo Digital</span> </div> <div class="hidden md:flex space-x-6"> <a href="#hero" class="text-dark hover:text-primary font-medium">Início</a> <a href="#how-it-works" class="text-dark hover:text-primary font-medium">Como Funciona</a> <a href="#modules" class="text-dark hover:text-primary font-medium">Módulos</a> <a href="#testimonials" class="text-dark hover:text-primary font-medium">Depoimentos</a> <a href="#contact" class="text-dark hover:text-primary font-medium">Contato</a> </div> <div class="md:hidden"> <button id="mobileMenuButton" class="text-dark focus:outline-none"> <i class="fas fa-bars text-2xl"></i> </button> </div> </div> <!-- Mobile Menu --> <div id="mobileMenu" class="hidden md:hidden bg-white py-2 px-4 shadow-lg"> <a href="#hero" class="block py-2 text-dark hover:text-primary">Início</a> <a href="#how-it-works" class="block py-2 text-dark hover:text-primary">Como Funciona</a> <a href="#modules" class="block py-2 text-dark hover:text-primary">Módulos</a> <a href="#testimonials" class="block py-2 text-dark hover:text-primary">Depoimentos</a> <a href="#contact" class="block py-2 text-dark hover:text-primary">Contato</a> <a href="#" class="block py-2 text-dark hover:text-primary">Área do Aluno</a> </div> </nav> <!-- Hero Section --> <section id="hero" class="bg-gradient-to-r from-primary to-secondary text-white py-16 md:py-24"> <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> <div class="md:w-1/2 mb-8 md:mb-0"> <h1 class="text-4xl md:text-5xl font-bold mb-4">Descubra o Mundo da Tecnologia no Seu Ritmo</h1> <p class="text-xl md:text-2xl mb-8">Um curso completo, feito com carinho para quem quer aprender do zero — sem pressa, sem complicação.</p> <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> <button class="bg-accent hover:bg-yellow-500 text-dark font-bold py-3 px-6 rounded-lg text-lg transition duration-300 transform hover:scale-105"> <i class="fas fa-graduation-cap mr-2"></i> Quero Aprender Agora </button> <button class="bg-white hover:bg-gray-100 text-primary font-bold py-3 px-6 rounded-lg text-lg transition duration-300 transform hover:scale-105"> <i class="fas fa-info-circle mr-2"></i> Saiba Mais </button> </div> </div> <div class="md:w-1/2 flex justify-center"> <img src="https://images.unsplash.com/photo-1581094794329-c8112a89af12?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Idosos usando tecnologia" class="rounded-lg shadow-2xl max-w-full h-auto"> </div> </div> </section> <!-- How It Works --> <section id="how-it-works" class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl md:text-4xl font-bold text-center text-dark mb-12">Como Funciona Nosso Curso</h2> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-light p-6 rounded-lg shadow-md text-center"> <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4"> <i class="fas fa-users text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3 text-dark">Aulas Presenciais</h3> <p class="text-gray-700 text-large">Curso 100% presencial com apoio digital, ministrado por instrutores pacientes e experientes.</p> </div> <div class="bg-light p-6 rounded-lg shadow-md text-center"> <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4"> <i class="fas fa-book-open text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3 text-dark">Material Didático</h3> <p class="text-gray-700 text-large">Explicações passo a passo com vídeos, imagens grandes e fontes legíveis para fácil compreensão.</p> </div> <div class="bg-light p-6 rounded-lg shadow-md text-center"> <div class="bg-primary text-white rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-4"> <i class="fas fa-hands-helping text-2xl"></i> </div> <h3 class="text-xl font-bold mb-3 text-dark">Suporte Completo</h3> <p class="text-gray-700 text-large">Apoio via WhatsApp e grupo da turma, além de quizzes interativos e atividades práticas guiadas.</p> </div> </div> <div class="mt-12 bg-primary text-white rounded-lg p-8 shadow-lg"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-2/3 mb-6 md:mb-0"> <h3 class="text-2xl font-bold mb-4">Aulas Aos Finais de Semana</h3> <p class="text-large mb-4">Nossas aulas acontecem aos sábados pela manhã, com turmas pequenas para garantir atenção individualizada.</p> <ul class="space-y-2 text-large"> <li><i class="fas fa-check-circle mr-2"></i> Turmas de no máximo 10 alunos</li> <li><i class="fas fa-check-circle mr-2"></i> Material impresso e digital</li> <li><i class="fas fa-check-circle mr-2"></i> Certificado de conclusão</li> </ul> </div> <div class="md:w-1/3 flex justify-center"> <img src="https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Grupo de idosos aprendendo" class="rounded-lg max-w-full h-auto shadow-md"> </div> </div> </div> </div> </section> <!-- Modules Section --> <section id="modules" class="py-16 bg-light"> <div class="container mx-auto px-4"> <h2 class="text-3xl md:text-4xl font-bold text-center text-dark mb-12">Nossos Módulos de Aprendizado</h2> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> <!-- Module 1 --> <div class="module-card bg-white rounded-lg overflow-hidden shadow-lg"> <div class="bg-primary text-white p-4"> <h3 class="text-xl font-bold flex items-center"> <i class="fas fa-desktop mr-3"></i> Módulo 1: Introdução à Informática </h3> </div> <div class="p-6"> <ul class="space-y-3 text-gray-700 text-large mb-6"> <li><i class="fas fa-check text-primary mr-2"></i> O que é um computador?</li> <li><i class="fas fa-check text-primary mr-2"></i> Como ligar, usar e desligar com segurança</li> <li><i class="fas fa-check text-primary mr-2"></i> Componentes e sistema operacional</li> </ul> <div class="flex justify-between"> <button class="module-practice-btn bg-secondary hover:bg-purple-700 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-pencil-alt mr-2"></i> Praticar </button> <button class="bg-accent hover:bg-yellow-500 text-dark font-bold py-2 px-4 rounded"> <i class="fas fa-play mr-2"></i> Assistir </button> <button class="bg-primary hover:bg-purple-800 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-book mr-2"></i> Ler Mais </button> </div> </div> <div class="bg-gray-100 px-4 py-3 text-center"> <button class="module-quiz-btn text-primary font-medium hover:underline"> <i class="fas fa-question-circle mr-2"></i> Fazer Quiz (5 perguntas) </button> </div> </div> <!-- Module 2 --> <div class="module-card bg-white rounded-lg overflow-hidden shadow-lg"> <div class="bg-primary text-white p-4"> <h3 class="text-xl font-bold flex items-center"> <i class="fas fa-globe mr-3"></i> Módulo 2: Navegando na Internet </h3> </div> <div class="p-6"> <ul class="space-y-3 text-gray-700 text-large mb-6"> <li><i class="fas fa-check text-primary mr-2"></i> Como usar o navegador</li> <li><i class="fas fa-check text-primary mr-2"></i> Como pesquisar no Google</li> <li><i class="fas fa-check text-primary mr-2"></i> Dicas de segurança online</li> <li><i class="fas fa-check text-primary mr-2"></i> Sites úteis para o dia a dia</li> </ul> <div class="flex justify-between"> <button class="module-practice-btn bg-secondary hover:bg-purple-700 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-pencil-alt mr-2"></i> Praticar </button> <button class="bg-accent hover:bg-yellow-500 text-dark font-bold py-2 px-4 rounded"> <i class="fas fa-play mr-2"></i> Assistir </button> <button class="bg-primary hover:bg-purple-800 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-book mr-2"></i> Ler Mais </button> </div> </div> <div class="bg-gray-100 px-4 py-3 text-center"> <button class="module-quiz-btn text-primary font-medium hover:underline"> <i class="fas fa-question-circle mr-2"></i> Fazer Quiz (6 perguntas) </button> </div> </div> <!-- Module 3 --> <div class="module-card bg-white rounded-lg overflow-hidden shadow-lg"> <div class="bg-primary text-white p-4"> <h3 class="text-xl font-bold flex items-center"> <i class="fas fa-envelope mr-3"></i> Módulo 3: Comunicação Digital </h3> </div> <div class="p-6"> <ul class="space-y-3 text-gray-700 text-large mb-6"> <li><i class="fas fa-check text-primary mr-2"></i> Como criar um e-mail</li> <li><i class="fas fa-check text-primary mr-2"></i> Enviar mensagens e anexos</li> <li><i class="fas fa-check text-primary mr-2"></i> Redes sociais (Facebook e WhatsApp)</li> </ul> <div class="flex justify-between"> <button class="module-practice-btn bg-secondary hover:bg-purple-700 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-pencil-alt mr-2"></i> Praticar </button> <button class="bg-accent hover:bg-yellow-500 text-dark font-bold py-2 px-4 rounded"> <i class="fas fa-play mr-2"></i> Assistir </button> <button class="bg-primary hover:bg-purple-800 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-book mr-2"></i> Ler Mais </button> </div> </div> <div class="bg-gray-100 px-4 py-3 text-center"> <button class="module-quiz-btn text-primary font-medium hover:underline"> <i class="fas fa-question-circle mr-2"></i> Fazer Quiz (5 perguntas) </button> </div> </div> <!-- Module 4 --> <div class="module-card bg-white rounded-lg overflow-hidden shadow-lg"> <div class="bg-primary text-white p-4"> <h3 class="text-xl font-bold flex items-center"> <i class="fas fa-file-word mr-3"></i> Módulo 4: Textos e Planilhas </h3> </div> <div class="p-6"> <ul class="space-y-3 text-gray-700 text-large mb-6"> <li><i class="fas fa-check text-primary mr-2"></i> Criar documentos no Word e Google Docs</li> <li><i class="fas fa-check text-primary mr-2"></i> Como salvar, imprimir e formatar</li> <li><i class="fas fa-check text-primary mr-2"></i> Criar planilhas simples no Excel</li> </ul> <div class="flex justify-between"> <button class="module-practice-btn bg-secondary hover:bg-purple-700 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-pencil-alt mr-2"></i> Praticar </button> <button class="bg-accent hover:bg-yellow-500 text-dark font-bold py-2 px-4 rounded"> <i class="fas fa-play mr-2"></i> Assistir </button> <button class="bg-primary hover:bg-purple-800 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-book mr-2"></i> Ler Mais </button> </div> </div> <div class="bg-gray-100 px-4 py-3 text-center"> <button class="module-quiz-btn text-primary font-medium hover:underline"> <i class="fas fa-question-circle mr-2"></i> Fazer Quiz (6 perguntas) </button> </div> </div> <!-- Module 5 --> <div class="module-card bg-white rounded-lg overflow-hidden shadow-lg"> <div class="bg-primary text-white p-4"> <h3 class="text-xl font-bold flex items-center"> <i class="fas fa-folder mr-3"></i> Módulo 5: Organização e Backup </h3> </div> <div class="p-6"> <ul class="space-y-3 text-gray-700 text-large mb-6"> <li><i class="fas fa-check text-primary mr-2"></i> Pastas e arquivos</li> <li><i class="fas fa-check text-primary mr-2"></i> Google Drive e armazenamento na nuvem</li> <li><i class="fas fa-check text-primary mr-2"></i> Como fazer backup dos arquivos</li> </ul> <div class="flex justify-between"> <button class="module-practice-btn bg-secondary hover:bg-purple-700 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-pencil-alt mr-2"></i> Praticar </button> <button class="bg-accent hover:bg-yellow-500 text-dark font-bold py-2 px-4 rounded"> <i class="fas fa-play mr-2"></i> Assistir </button> <button class="bg-primary hover:bg-purple-800 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-book mr-2"></i> Ler Mais </button> </div> </div> <div class="bg-gray-100 px-4 py-3 text-center"> <button class="module-quiz-btn text-primary font-medium hover:underline"> <i class="fas fa-question-circle mr-2"></i> Fazer Quiz (5 perguntas) </button> </div> </div> <!-- Module 6 --> <div class="module-card bg-white rounded-lg overflow-hidden shadow-lg"> <div class="bg-primary text-white p-4"> <h3 class="text-xl font-bold flex items-center"> <i class="fas fa-mobile-alt mr-3"></i> Módulo 6: Dispositivos Móveis </h3> </div> <div class="p-6"> <ul class="space-y-3 text-gray-700 text-large mb-6"> <li><i class="fas fa-check text-primary mr-2"></i> Usar smartphones e tablets</li> <li><i class="fas fa-check text-primary mr-2"></i> Instalar apps úteis</li> <li><i class="fas fa-check text-primary mr-2"></i> Ajustes de Wi-Fi, som e brilho</li> <li><i class="fas fa-check text-primary mr-2"></i> Segurança digital no celular</li> </ul> <div class="flex justify-between"> <button class="module-practice-btn bg-secondary hover:bg-purple-700 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-pencil-alt mr-2"></i> Praticar </button> <button class="bg-accent hover:bg-yellow-500 text-dark font-bold py-2 px-4 rounded"> <i class="fas fa-play mr-2"></i> Assistir </button> <button class="bg-primary hover:bg-purple-800 text-white font-bold py-2 px-4 rounded"> <i class="fas fa-book mr-2"></i> Ler Mais </button> </div> </div> <div class="bg-gray-100 px-4 py-3 text-center"> <button class="module-quiz-btn text-primary font-medium hover:underline"> <i class="fas fa-question-circle mr-2"></i> Fazer Quiz (6 perguntas) </button> </div> </div> </div> </div> </section> <!-- Testimonials --> <section id="testimonials" class="py-16 bg-white"> <div class="container mx-auto px-4"> <h2 class="text-3xl md:text-4xl font-bold text-center text-dark mb-12">Depoimentos de Nossos Alunos</h2> <div class="relative max-w-4xl mx-auto"> <div class="testimonial-carousel overflow-hidden"> <!-- Testimonial 1 --> <div class="testimonial-card active bg-light rounded-lg p-8 shadow-md"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center"> <div class="relative"> <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Dona Marlene" class="rounded-full w-40 h-40 object-cover border-4 border-primary shadow-lg"> <div class="absolute bottom-0 right-0 bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center"> <i class="fas fa-quote-left text-xl"></i> </div> </div> </div> <div class="md:w-2/3"> <blockquote class="text-large italic text-gray-700 mb-4"> "Eu achei que nunca aprenderia... Hoje mando foto para meus netos pelo WhatsApp! O curso mudou minha vida, agora consigo me comunicar com minha família toda." </blockquote> <div class="text-primary font-bold text-lg">Dona Marlene, 72 anos</div> <div class="text-gray-600">Aposentada, concluiu o curso em 2022</div> <div class="mt-4 flex space-x-2"> <i class="fas fa-star text-accent"></i> <i class="fas fa-star text-accent"></i> <i class="fas fa-star text-accent"></i> <i class="fas fa-star text-accent"></i> <i class="fas fa-star text-accent"></i> </div> </div> </div> </div> <!-- Testimonial 2 --> <div class="testimonial-card bg-light rounded-lg p-8 shadow-md"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center"> <div class="relative"> <img src="https://images.unsplash.com/photo-1584308666744-24d5c474f2ae?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Seu João" class="rounded-full w-40 h-40 object-cover border-4 border-primary shadow-lg"> <div class="absolute bottom-0 right-0 bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center"> <i class="fas fa-quote-left text-xl"></i> </div> </div> </div> <div class="md:w-2/3"> <blockquote class="text-large italic text-gray-700 mb-4"> "Depois que minha esposa faleceu, me sentia muito sozinho. Com o curso aprendi a usar o Facebook e reencontrei amigos de infância que não via há 50 anos!" </blockquote> <div class="text-primary font-bold text-lg">Seu João, 78 anos</div> <div class="text-gray-600">Aposentado, concluiu o curso em 2021</div> <div class="mt-4 flex space-x-2"> <i class="fas fa-star text-accent"></i> <i class="fas fa-star text-accent"></i> <i class="fas fa-star text-accent"></i> <i class="fas fa-star text-accent"></i> <i class="fas fa-star text-accent"></i> </div> </div> </div> </div> <!-- Testimonial 3 --> <div class="testimonial-card bg-light rounded-lg p-8 shadow-md"> <div class="flex flex-col md:flex-row items-center"> <div class="md:w-1/3 mb-6 md:mb-0 flex justify-center"> <div class="relative"> <img src="https://images.unsplash.com/photo-1531123897727-8f129e1688ce?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Dona Rosa" class="rounded-full w-40 h-40 object-cover border-4 border-primary shadow-lg"> <div class="absolute bottom-0 right-0 bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center"> <i class="fas fa-quote-left text-xl"></i> </div> </div> </div> <div class="md:w-2/3"> <blockquote class="text-large italic text-gray-700 mb-4"> "Minha filha mora na Espanha e eu não via meus netos há anos. Agora faço videochamada toda semana e até ajudo nas lições de escola pelo computador!" </blockquote> <div class="text-primary font-bold text-lg">Dona Rosa, 68 anos</div> <div class="text-gray-600">Professora aposentada, concluiu o curso em 2023</div> <div class="mt-4 flex space-x-2"> <i class="fas fa-star text-accent"></i> <i class="fas fa-star text-accent"></i> <i class="fas fa-star text-accent"></i> <i class="fas fa-star text-accent"></i> <i class="fas fa-star-half-alt text-accent"></i> </div> </div> </div> </div> </div> <div class="flex justify-center mt-8 space-x-4"> <button class="testimonial-prev bg-primary hover:bg-purple-800 text-white rounded-full w-12 h-12 flex items-center justify-center shadow-md"> <i class="fas fa-chevron-left"></i> </button> <button class="testimonial-next bg-primary hover:bg-purple-800 text-white rounded-full w-12 h-12 flex items-center justify-center shadow-md"> <i class="fas fa-chevron-right"></i> </button> </div> </div> </div> </section> <!-- Quiz Modal --> <div id="quizModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> <div class="bg-white rounded-lg shadow-xl max-w-2xl w-full max-h-screen overflow-y-auto"> <div class="p-6"> <div class="flex justify-between items-center mb-6"> <h3 class="text-2xl font-bold text-dark">Quiz do Módulo: <span id="quizModuleTitle">Introdução à Informática</span></h3> <button id="closeQuizModal" class="text-gray-500 hover:text-gray-700"> <i class="fas fa-times text-2xl"></i> </button> </div> <div id="quizContainer"> <!-- Question 1 --> <div class="quiz-question mb-8 active"> <p class="text-xl font-medium mb-4">1. Qual é a função principal de um computador?</p> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <button class="quiz-option bg-gray-100 hover:bg-gray-200 text-dark py-3 px-4 rounded-lg text-lg"> A) Processar informações e executar tarefas </button> <button class="quiz-option bg-gray-100 hover:bg-gray-200 text-dark py-3 px-4 rounded-lg text-lg"> B) Apenas navegar na internet </button> <button class="quiz-option bg-gray-100 hover:bg-gray-200 text-dark py-3 px-4 rounded-lg text-lg"> C) Mostrar vídeos e fotos </button> <button class="quiz-option bg-gray-100 hover:bg-gray-200 text-dark py-3 px-4 rounded-lg text-lg"> D) Apenas jogar games </button> </div> <div class="mt-4 hidden" id="question1Feedback"> <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4"> <p class="font-bold">Correto!</p> <p>O computador processa informações e executa diversas tarefas de acordo com os programas instalados.</p> </div> </div> </div> <!-- Question 2 --> <div class="quiz-question mb-8 hidden"> <p class="text-xl font-medium mb-4">2. Qual é a sequência correta para ligar um computador?</p> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <button class="quiz-option bg-gray-100 hover:bg-gray-200 text-dark py-3 px-4 rounded-lg text-lg"> A) Ligar o monitor, depois o gabinete </button> <button class="quiz-option bg-gray-100 hover:bg-gray-200 text-dark py-3 px-4 rounded-lg text-lg"> B) Ligar o gabinete, depois o monitor </button> <button class="quiz-option bg-gray-100 hover:bg-gray-200 text-dark py-3 px-4 rounded-lg text-lg"> C) Não importa a ordem </button> <button class="quiz-option bg-gray-100 hover:bg-gray-200 text-dark py-3 px-4 rounded-lg text-lg"> D) Ligar tudo ao mesmo tempo </button> </div> <div class="mt-4 hidden" id="question2Feedback"> <div class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4"> <p class="font-bold">Correto!</p> <p>O ideal é ligar primeiro o monitor e depois o gabinete para evitar picos de energia.</p> </div> </div> </div> <!-- Quiz Navigation --> <div class="flex justify-between mt-8 pt-4 border-t border-gray-200"> <button id="quizPrev" class="bg-gray-300 hover:bg-gray-400 text-dark font-bold py-2 px-4 rounded disabled:opacity-50" disabled> <i class="fas fa-arrow-left mr-2"></i> Anterior </button> <div class="text-gray-600 font-medium"> Pergunta <span id="currentQuestion">1</span> de <span id="totalQuestions">5</span> </div> <button id="quizNext" class="bg-primary hover:bg-purple-700 text-white font-bold py-2 px-4 rounded"> Próxima <i class="fas fa-arrow-right ml-2"></i> </button> </div> </div> <!-- Quiz Results --> <div id="quizResults" class="hidden text-center py-8"> <div class="bg-primary text-white rounded-full w-24 h-24 flex items-center justify-center mx-auto mb-6"> <i class="fas fa-trophy text-4xl"></i> </div> <h3 class="text-2xl font-bold mb-2">Quiz Concluído!</h3> <p class="text-xl mb-6">Sua pontuação: <span id="quizScore" class="font-bold">4</span> de <span id="quizMaxScore" class="font-bold">5</span></p> <div class="mb-6"> <div class="w-full bg-gray-200 rounded-full h-4"> <div id="quizProgressBar" class="bg-accent h-4 rounded-full" style="width: 80%"></div> </div> </div> <p class="text-lg mb-6">Muito bom! Você está aprendendo bastante. Continue assim!</p> <button id="quizRestart" class="bg-primary hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-lg mr-4"> <i class="fas fa-redo mr-2"></i> Refazer Quiz </button> <button id="quizClose" class="bg-gray-300 hover:bg-gray-400 text-dark font-bold py-3 px-6 rounded-lg"> <i class="fas fa-check mr-2"></i> Finalizar </button> </div> </div> </div> </div> <!-- Practice Modal --> <div id="practiceModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> <div class="bg-white rounded-lg shadow-xl max-w-4xl w-full max-h-screen overflow-y-auto"> <div class="p-6"> <div class="flex justify-between items-center mb-6"> <h3 class="text-2xl font-bold text-dark">Atividade Prática: <span id="practiceModuleTitle">Introdução à Informática</span></h3> <button id="closePracticeModal" class="text-gray-500 hover:text-gray-700"> <i class="fas fa-times text-2xl"></i> </button> </div> <div class="mb-6"> <div class="bg-primary text-white rounded-lg p-4 mb-4"> <h4 class="font-bold text-lg mb-2"><i class="fas fa-info-circle mr-2"></i> Instruções</h4> <p>Siga os passos abaixo para completar esta atividade prática. Você pode pedir ajuda ao instrutor se necessário.</p> </div> <div class="bg-light rounded-lg p-4 mb-6"> <h4 class="font-bold text-lg mb-2 text-dark"><i class="fas fa-tasks mr-2"></i> Passo a Passo</h4> <ol class="list-decimal pl-6 space-y-2 text-large"> <li>Localize o botão de energia do computador</li> <li>Pressione o botão para ligar o computador</li> <li>Aguarde o sistema operacional carregar</li> <li>Identifique os ícones na área de trabalho</li> <li>Clique duas vezes no ícone do navegador de internet</li> </ol> </div> <div class="flex items-center bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4 mb-6"> <i class="fas fa-exclamation-triangle text-2xl mr-4"></i> <p class="text-large">Dica: Se o computador não ligar, verifique se ele está conectado na tomada e se o estabilizador está ligado.</p> </div> </div> <div class="flex justify-between border-t border-gray-200 pt-4"> <button class="bg-gray-300 hover:bg-gray-400 text-dark font-bold py-2 px-4 rounded"> <i class="fas fa-question-circle mr-2"></i> Pedir Ajuda </button> <div> <button class="bg-primary hover:bg-purple-700 text-white font-bold py-2 px-4 rounded mr-2"> <i class="fas fa-check mr-2"></i> Concluí </button> <button class="bg-gray-300 hover:bg-gray-400 text-dark font-bold py-2 px-4 rounded"> <i class="fas fa-times mr-2"></i> Cancelar </button> </div> </div> </div> </div> </div> <!-- CTA Section --> <section class="py-16 bg-gradient-to-r from-primary to-secondary text-white"> <div class="container mx-auto px-4 text-center"> <h2 class="text-3xl md:text-4xl font-bold mb-6">Você merece aprender com dignidade, carinho e respeito</h2> <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Clique no botão abaixo e inicie sua jornada digital com a gente. Nunca é tarde para aprender!</p> <button class="bg-accent hover:bg-yellow-500 text-dark font-bold py-4 px-8 rounded-lg text-xl transition duration-300 transform hover:scale-105 shadow-lg"> <i class="fas fa-hand-pointer mr-2"></i> Quero Começar Agora </button> </div> </section> <!-- Student Login --> <section id="studentLogin" class="py-16 bg-white"> <div class="container mx-auto px-4"> <div class="max-w-2xl mx-auto bg-light rounded-xl shadow-lg overflow-hidden"> <div class="md:flex"> <div class="md:w-1/2 bg-primary text-white p-8 flex flex-col justify-center"> <h3 class="text-2xl font-bold mb-4">Área do Aluno</h3> <p class="mb-6 text-large">Acesse seu material de estudo, acompanhe seu progresso e agende suporte com nossos monitores.</p> <div class="flex items-center mb-4"> <i class="fas fa-book-open text-2xl mr-4"></i> <span class="text-large">Material em PDF e vídeos</span> </div> <div class="flex items-center mb-4"> <i class="fas fa-chart-line text-2xl mr-4"></i> <span class="text-large">Acompanhamento de progresso</span> </div> <div class="flex items-center"> <i class="fas fa-calendar-alt text-2xl mr-4"></i> <span class="text-large">Agendamento de suporte</span> </div> </div> <div class="md:w-1/2 p-8"> <h3 class="text-2xl font-bold text-dark mb-6">Faça Login</h3> <form> <div class="mb-4"> <label for="email" class="block text-gray-700 font-medium mb-2">E-mail</label> <input type="email" id="email" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> </div> <div class="mb-6"> <label for="password" class="block text-gray-700 font-medium mb-2">Senha</label> <input type="password" id="password" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"> </div> <button type="submit" class="w-full bg-primary hover:bg-purple-700 text-white font-bold py-2 px-4 rounded-lg"> Entrar </button> <div class="mt-4 text-center"> <a href="#" class="text-primary hover:underline">Esqueceu sua senha?</a> </div> </form> </div> </div> </div> </div> </section> <!-- Contact & Footer --> <footer id="contact" class="bg-dark 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"> <div> <h3 class="text-xl font-bold mb-4">Mundo Digital</h3> <p class="mb-4">Cursos de inclusão digital para idosos, com metodologia especializada e instrutores capacitados.</p> <div class="flex space-x-4"> <a href="#" class="text-white hover:text-accent"> <i class="fab fa-facebook-f text-xl"></i> </a> <a href="#" class="text-white hover:text-accent"> <i class="fab fa-instagram text-xl"></i> </a> <a href="#" class="text-white hover:text-accent"> <i class="fab fa-whatsapp text-xl"></i> </a> </div> </div> <div> <h3 class="text-xl font-bold mb-4">Localização</h3> <address class="not-italic"> <p class="mb-2"><i class="fas fa-map-marker-alt mr-2"></i> Rua da Tecnologia, 123</p> <p class="mb-2">Centro - São Paulo/SP</p> <p>CEP: 01000-000</p> </address> </div> <div> <h3 class="text-xl font-bold mb-4">Contato</h3> <p class="mb-2"><i class="fas fa-phone-alt mr-2"></i> (11) 1234-5678</p> <p class="mb-2"><i class="fab fa-whatsapp mr-2"></i> (11) 98765-4321</p> <p><i class="fas fa-envelope mr-2"></i> contato@mundodigital.com</p> </div> <div> <h3 class="text-xl font-bold mb-4">Links Úteis</h3> <ul class="space-y-2"> <li><a href="#" class="hover:text-accent"><i class="fas fa-chevron-right mr-2"></i> Grupo de Apoio</a></li> <li><a href="#" class="hover:text-accent"><i class="fas fa-chevron-right mr-2"></i> Certificado Digital</a></li> <li><a href="#" class="hover:text-accent"><i class="fas fa-chevron-right mr-2"></i> Perguntas Frequentes</a></li> <li><a href="#" class="hover:text-accent"><i class="fas fa-chevron-right mr-2"></i> Política de Privacidade</a></li> </ul> </div> </div> <div class="border-t border-gray-700 pt-6 text-center"> <p>&copy; 2023 Mundo Digital Para Todos. Todos os direitos reservados.</p> </div> </div> </footer> <!-- Back to Top Button --> <button id="backToTop" class="fixed bottom-6 right-6 bg-primary text-white rounded-full w-12 h-12 flex items-center justify-center shadow-lg hidden"> <i class="fas fa-arrow-up"></i> </button> <script> // Mobile Menu Toggle const mobileMenuButton = document.getElementById('mobileMenuButton'); const mobileMenu = document.getElementById('mobileMenu'); mobileMenuButton.addEventListener('click', () => { mobileMenu.classList.toggle('hidden'); }); // Accessibility Features const increaseFont = document.getElementById('increaseFont'); const decreaseFont = document.getElementById('decreaseFont'); const toggleContrast = document.getElementById('toggleContrast'); const voiceGuide = document.getElementById('voiceGuide'); const body = document.body; let currentFontSize = 1; increaseFont.addEventListener('click', () => { currentFontSize += 0.1; document.documentElement.style.fontSize = `${currentFontSize}rem`; }); decreaseFont.addEventListener('click', () => { if (currentFontSize > 0.8) { currentFontSize -= 0.1; document.documentElement.style.fontSize = `${currentFontSize}rem`; } }); toggleContrast.addEventListener('click', () => { body.classList.toggle('high-contrast'); }); voiceGuide.addEventListener('click', () => { alert('Guia de voz ativado. Navegue pelo site e ouça a descrição dos elementos.'); }); // Testimonial Carousel const testimonials = document.querySelectorAll('.testimonial-card'); const prevTestimonial = document.querySelector('.testimonial-prev'); const nextTestimonial = document.querySelector('.testimonial-next'); let currentTestimonial = 0; function showTestimonial(index) { testimonials.forEach((testimonial, i) => { if (i === index) { testimonial.classList.add('active'); } else { testimonial.classList.remove('active'); } }); } prevTestimonial.addEventListener('click', () => { currentTestimonial = (currentTestimonial - 1 + testimonials.length) % testimonials.length; showTestimonial(currentTestimonial); }); nextTestimonial.addEventListener('click', () => { currentTestimonial = (currentTestimonial + 1) % testimonials.length; showTestimonial(currentTestimonial); }); // Quiz Modal const quizModal = document.getElementById('quizModal'); const closeQuizModal = document.getElementById('closeQuizModal'); const quizModuleTitle = document.getElementById('quizModuleTitle'); const moduleQuizButtons = document.querySelectorAll('.module-quiz-btn'); moduleQuizButtons.forEach(button => { button.addEventListener('click', () => { const moduleCard = button.closest('.module-card'); const moduleTitle = moduleCard.querySelector('h3').textContent; quizModuleTitle.textContent = moduleTitle; quizModal.classList.remove('hidden'); document.body.style.overflow = 'hidden'; }); }); closeQuizModal.addEventListener('click', () => { quizModal.classList.add('hidden'); document.body.style.overflow = 'auto'; }); // Quiz Functionality const quizQuestions = document.querySelectorAll('.quiz-question'); const quizPrev = document.getElementById('quizPrev'); const quizNext = document.getElementById('quizNext'); const currentQuestion = document.getElementById('currentQuestion'); const totalQuestions = document.getElementById('totalQuestions'); const quizResults = document.getElementById('quizResults'); const quizScore = document.getElementById('quizScore'); const quizMaxScore = document.getElementById('quizMaxScore'); const quizProgressBar = document.getElementById('quizProgressBar'); const quizRestart = document.getElementById('quizRestart'); const quizClose = document.getElementById('quizClose'); const quizOptions = document.querySelectorAll('.quiz-option'); let currentQuizQuestion = 0; let score = 0; const maxScore = quizQuestions.length; totalQuestions.textContent = maxScore; function showQuizQuestion(index) { quizQuestions.forEach((question, i) => { if (i === index) { question.classList.remove('hidden'); question.classList.add('active'); } else { question.classList.add('hidden'); question.classList.remove('active'); } }); currentQuestion.textContent = index + 1; quizPrev.disabled = index === 0; quizNext.textContent = index === maxScore - 1 ? 'Finalizar' : 'Próxima'; } quizPrev.addEventListener('click', () => { if (currentQuizQuestion > 0) { currentQuizQuestion--; showQuizQuestion(currentQuizQuestion); } }); quizNext.addEventListener('click', () => { if (currentQuizQuestion < maxScore - 1) { currentQuizQuestion++; showQuizQuestion(currentQuizQuestion); } else { // Show results document.getElementById('quizContainer').classList.add('hidden'); quizResults.classList.remove('hidden'); // Calculate score (mock) score = Math.floor(maxScore * 0.8); quizScore.textContent = score; quizMaxScore.textContent = maxScore; quizProgressBar.style.width = `${(score / maxScore) * 100}%`; } }); quizOptions.forEach(option => { option.addEventListener('click', function() { // For demo purposes, first option is always correct const isCorrect = this.textContent.trim().startsWith('A)'); // Remove all selections from this question's options const question = this.closest('.quiz-question'); const options = question.querySelectorAll('.quiz-option'); options.forEach(opt => { opt.classList.remove('selected', 'correct', 'incorrect'); }); // Mark selected and correct/incorrect this.classList.add('selected'); if (isCorrect) { this.classList.add('correct'); } else { this.classList.add('incorrect'); // Also show correct answer options.forEach(opt => { if (opt.textContent.trim().startsWith('A)')) { opt.classList.add('correct'); } }); } // Show feedback const questionNumber = Array.from(quizQuestions).indexOf(question) + 1; const feedback = document.getElementById(`question${questionNumber}Feedback`); if (feedback) { feedback.classList.remove('hidden'); } }); }); quizRestart.addEventListener('click', () => { currentQuizQuestion = 0; showQuizQuestion(currentQuizQuestion); document.getElementById('quizContainer').classList.remove('hidden'); quizResults.classList.add('hidden'); // Reset selections quizOptions.forEach(option => { option.classList.remove('selected', 'correct', 'incorrect'); }); // Hide feedbacks document.querySelectorAll('[id^="question"][id$="Feedback"]').forEach(feedback => { feedback.classList.add('hidden'); }); }); quizClose.addEventListener('click', () => { quizModal.classList.add('hidden'); document.body.style.overflow = 'auto'; // Reset quiz currentQuizQuestion = 0; showQuizQuestion(currentQuizQuestion); document.getElementById('quizContainer').classList.remove('hidden'); quizResults.classList.add('hidden'); // Reset selections quizOptions.forEach(option => { option.classList.remove('selected', 'correct', 'incorrect'); }); // Hide feedbacks document.querySelectorAll('[id^="question"][id$="Feedback"]').forEach(feedback => { feedback.classList.add('hidden'); }); }); // Practice Modal const practiceModal = document.getElementById('practiceModal'); const closePracticeModal = document.getElementById('closePracticeModal'); const practiceModuleTitle = document.getElementById('practiceModuleTitle'); const modulePracticeButtons = document.querySelectorAll('.module-practice-btn'); modulePracticeButtons.forEach(button => { button.addEventListener('click', () => { const moduleCard = button.closest('.module-card'); const moduleTitle = moduleCard.querySelector('h3').textContent; practiceModuleTitle.textContent = moduleTitle; practiceModal.classList.remove('hidden'); document.body.style.overflow = 'hidden'; }); }); closePracticeModal.addEventListener('click', () => { practiceModal.classList.add('hidden'); document.body.style.overflow = 'auto'; }); // Back to Top Button const backToTop = document.getElementById('backToTop'); window.addEventListener('scroll', () => { if (window.pageYOffset > 300) { backToTop.classList.remove('hidden'); } else { backToTop.classList.add('hidden'); } }); backToTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); // Smooth scrolling for anchor links document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function(e) { e.preventDefault(); const targetId = this.getAttribute('href'); if (targetId === '#') return; const targetElement = document.querySelector(targetId); if (targetElement) { window.scrollTo({ top: targetElement.offsetTop - 80, behavior: 'smooth' }); // Close mobile menu if open mobileMenu.classList.add('hidden'); } }); }); </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=MatheusMathiasFernandes/teste-aula" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> </html>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mundo Digital Para Todos - Curso de Inclusão Digital para Idosos</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">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#5E35B1',
secondary: '#7C4DFF',
accent: '#FFC107',
light: '#F5F5F5',
dark: '#212121',
},
fontFamily: {
sans: ['Nunito', 'sans-serif'],
},
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap');
body {
font-family: 'Nunito', sans-serif;
scroll-behavior: smooth;
}
.high-contrast {
background-color: black !important;
color: white !important;
}
.high-contrast .text-dark {
color: white !important;
}
.high-contrast .bg-white {
background-color: black !important;
}
.high-contrast .bg-light {
background-color: #333 !important;
}
.module-card {
transition: all 0.3s ease;
transform: translateY(0);
}
.module-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}
.testimonial-card {
opacity: 0;
transition: opacity 0.5s ease;
}
.testimonial-card.active {
opacity: 1;
}
.quiz-option {
transition: all 0.2s ease;
}
.quiz-option:hover {
transform: scale(1.02);
}
.quiz-option.selected {
background-color: #7C4DFF !important;
color: white !important;
}
.quiz-option.correct {
background-color: #4CAF50 !important;
color: white !important;
}
.quiz-option.incorrect {
background-color: #F44336 !important;
color: white !important;
}
.text-large {
font-size: 1.25rem;
}
@media (min-width: 768px) {
.text-large {
font-size: 1.5rem;