Download index.html from MatheusMathiasFernandes/teste-aula: direct link, hf CLI and curl.
- Browser
- Download file 60.4 kB
-
https://huggingface.co/spaces/MatheusMathiasFernandes/teste-aula/resolve/main/index.html
- Command line
-
hf download hf://spaces/MatheusMathiasFernandes/teste-aula/index.html
-
curl -L -o index.html https://huggingface.co/spaces/MatheusMathiasFernandes/teste-aula/resolve/main/index.html
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>© 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>
<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 ;
color: white ;
}
.high-contrast .text-dark {
color: white ;
}
.high-contrast .bg-white {
background-color: black ;
}
.high-contrast .bg-light {
background-color: #333 ;
}
.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 ;
color: white ;
}
.quiz-option.correct {
background-color: #4CAF50 ;
color: white ;
}
.quiz-option.incorrect {
background-color: #F44336 ;
color: white ;
}
.text-large {
font-size: 1.25rem;
}
@media (min-width: 768px) {
.text-large {
font-size: 1.5rem;