<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Folder - Sala de Informática para Professores</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
        
        body {
            font-family: 'Poppins', sans-serif;
            background-color: #f8fafc;
        }
        
        .folder {
            perspective: 1500px;
        }
        
        .folder-inner {
            transform-style: preserve-3d;
            transition: transform 1s;
        }
        
        .folder-inner.open {
            transform: rotateY(180deg);
        }
        
        .folder-front, .folder-back {
            backface-visibility: hidden;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .folder-back {
            transform: rotateY(180deg);
        }
        
        .quote-card {
            transition: all 0.3s ease;
        }
        
        .quote-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px -5px rgba(59, 130, 246, 0.4);
        }
        
        .activity-item {
            transition: all 0.3s ease;
        }
        
        .activity-item:hover {
            transform: translateX(5px);
            background-color: #f0f9ff;
        }
        
        .pulse {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
            100% {
                transform: scale(1);
            }
        }
        
        .shine {
            position: relative;
            overflow: hidden;
        }
        
        .shine::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(
                to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.3) 50%,
                rgba(255, 255, 255, 0) 100%
            );
            transform: rotate(30deg);
            animation: shine 3s infinite;
        }
        
        @keyframes shine {
            0% {
                transform: translateX(-100%) rotate(30deg);
            }
            100% {
                transform: translateX(100%) rotate(30deg);
            }
        }
    </style>
</head>
<body class="min-h-screen py-8 px-4">
    <div class="max-w-5xl mx-auto">
        <!-- Folder Cover -->
        <div id="folder" class="folder relative bg-white rounded-lg shadow-2xl overflow-hidden">
            <div id="folderInner" class="folder-inner relative w-full" style="height: 650px;">
                <!-- Front Cover -->
                <div class="folder-front bg-gradient-to-br from-blue-600 to-purple-700 p-8 rounded-lg flex flex-col justify-between">
                    <div class="text-center mb-8 mt-12">
                        <div class="bg-white bg-opacity-20 p-4 inline-block rounded-full mb-6 shine">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                            </svg>
                        </div>
                        <h1 class="text-4xl font-bold text-white mb-4">Transforme suas Aulas</h1>
                        <h2 class="text-2xl font-medium text-white text-opacity-90">Sala de Informática: Um Mundo de Possibilidades</h2>
                    </div>
                    
                    <div class="bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-sm">
                        <p class="text-white text-xl italic mb-4">"A educação é um processo de descoberta, exploração e construção do conhecimento, potencializado pelas tecnologias digitais."</p>
                        <p class="text-white text-opacity-80 text-right">— José Moran</p>
                    </div>
                    
                    <div class="mt-12 text-center">
                        <button id="openFolder" class="bg-white text-blue-700 font-bold py-3 px-8 rounded-full shadow-lg hover:bg-blue-50 transition duration-300 pulse">
                            Abrir Folder
                        </button>
                        <p class="text-white text-opacity-80 mt-4">Clique para descobrir atividades inspiradoras</p>
                    </div>
                </div>
                
                <!-- Back Cover (Inside) -->
                <div class="folder-back bg-white p-8 rounded-lg overflow-y-auto">
                    <div class="flex justify-between items-center mb-8">
                        <h2 class="text-3xl font-bold text-blue-700">Sala de Informática</h2>
                        <button id="closeFolder" class="bg-blue-100 text-blue-700 p-2 rounded-full hover:bg-blue-200 transition duration-300">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                            </svg>
                        </button>
                    </div>
                    
                    <!-- Frases Motivacionais -->
                    <section class="mb-8">
                        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                            </svg>
                            Frases Motivacionais
                        </h3>
                        
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            <div class="quote-card bg-blue-50 border-l-4 border-blue-500 p-4 rounded-r-lg shadow">
                                <p class="text-gray-700 mb-2">"Ensinar não é transferir conhecimento, mas criar possibilidades para sua produção ou construção."</p>
                                <p class="text-blue-600 text-sm font-medium">— Paulo Freire</p>
                            </div>
                            
                            <div class="quote-card bg-purple-50 border-l-4 border-purple-500 p-4 rounded-r-lg shadow">
                                <p class="text-gray-700 mb-2">"A tecnologia é apenas uma ferramenta. Para levar as crianças a trabalhar juntas e motivá-las, o professor é o mais importante."</p>
                                <p class="text-purple-600 text-sm font-medium">— Steve Jobs</p>
                            </div>
                            
                            <div class="quote-card bg-green-50 border-l-4 border-green-500 p-4 rounded-r-lg shadow">
                                <p class="text-gray-700 mb-2">"O professor do século XXI não é apenas um transmissor de conhecimento, mas um mediador de descobertas."</p>
                                <p class="text-green-600 text-sm font-medium">— José Moran</p>
                            </div>
                            
                            <div class="quote-card bg-yellow-50 border-l-4 border-yellow-500 p-4 rounded-r-lg shadow">
                                <p class="text-gray-700 mb-2">"A educação é a arma mais poderosa que você pode usar para mudar o mundo."</p>
                                <p class="text-yellow-600 text-sm font-medium">— Nelson Mandela</p>
                            </div>
                        </div>
                    </section>
                    
                    <!-- Por que usar a sala de informática -->
                    <section class="mb-8 bg-gradient-to-r from-blue-500 to-purple-600 p-6 rounded-lg text-white">
                        <h3 class="text-xl font-semibold mb-4">Por que usar a sala de informática?</h3>
                        
                        <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                            <div class="flex items-start">
                                <div class="bg-white p-2 rounded-full mr-3 flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                                    </svg>
                                </div>
                                <p>Aumenta o engajamento e participação dos alunos</p>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-white p-2 rounded-full mr-3 flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
                                    </svg>
                                </div>
                                <p>Promove o trabalho colaborativo e em equipe</p>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-white p-2 rounded-full mr-3 flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                                    </svg>
                                </div>
                                <p>Desenvolve o pensamento crítico e criativo</p>
                            </div>
                            
                            <div class="flex items-start">
                                <div class="bg-white p-2 rounded-full mr-3 flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9" />
                                    </svg>
                                </div>
                                <p>Prepara os alunos para o mundo digital</p>
                            </div>
                        </div>
                    </section>
                    
                    <!-- Atividades Inspiradas no site da Prof. Leiliane -->
                    <section class="mb-8">
                        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                            </svg>
                            Atividades Inspiradas no site da Prof. Leiliane
                        </h3>
                        
                        <div class="space-y-3">
                            <div class="activity-item flex items-start p-3 border-l-4 border-blue-400 rounded-r-lg">
                                <div class="bg-blue-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800">Criação de Histórias Digitais</h4>
                                    <p class="text-gray-600 text-sm">Alunos criam narrativas usando ferramentas de apresentação e editores de texto com imagens e elementos visuais.</p>
                                </div>
                            </div>
                            
                            <div class="activity-item flex items-start p-3 border-l-4 border-green-400 rounded-r-lg">
                                <div class="bg-green-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800">Pesquisas Orientadas</h4>
                                    <p class="text-gray-600 text-sm">Roteiros estruturados para pesquisas online sobre temas curriculares, com fontes confiáveis pré-selecionadas.</p>
                                </div>
                            </div>
                            
                            <div class="activity-item flex items-start p-3 border-l-4 border-purple-400 rounded-r-lg">
                                <div class="bg-purple-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-purple-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z" />
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800">Jogos Educativos Online</h4>
                                    <p class="text-gray-600 text-sm">Utilização de plataformas de jogos educativos para reforçar conteúdos de matemática, língua portuguesa e ciências.</p>
                                </div>
                            </div>
                            
                            <div class="activity-item flex items-start p-3 border-l-4 border-yellow-400 rounded-r-lg">
                                <div class="bg-yellow-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-yellow-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800">Criação de Infográficos</h4>
                                    <p class="text-gray-600 text-sm">Alunos aprendem a sintetizar informações e criar infográficos sobre temas estudados em sala de aula.</p>
                                </div>
                            </div>
                            
                            <div class="activity-item flex items-start p-3 border-l-4 border-red-400 rounded-r-lg">
                                <div class="bg-red-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-red-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800">Atividades de revisão</h4>
                                    <p class="text-gray-600 text-sm">Exercícios interativos e jogos para revisar conteúdos trabalhados em sala de aula de forma dinâmica e envolvente.</p>
                                </div>
                            </div>
                            
                            <div class="activity-item flex items-start p-3 border-l-4 border-indigo-400 rounded-r-lg">
                                <div class="bg-indigo-100 p-2 rounded-full mr-3 flex-shrink-0">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z" />
                                    </svg>
                                </div>
                                <div>
                                    <h4 class="font-medium text-gray-800">Mapas Mentais Digitais</h4>
                                    <p class="text-gray-600 text-sm">Utilização de ferramentas online para criar mapas mentais que organizam o conhecimento de forma visual.</p>
                                </div>
                            </div>
                        </div>
                    </section>
                    
                    <!-- Chamada para Ação -->
                    <section class="bg-gradient-to-r from-blue-500 to-purple-600 p-6 rounded-lg text-white text-center">
                        <h3 class="text-2xl font-bold mb-4">Pronto para transformar suas aulas?</h3>
                        <p class="mb-6">Agende agora mesmo um horário na sala de informática e surpreenda seus alunos com experiências de aprendizado inovadoras!</p>
                        <div class="flex flex-col sm:flex-row justify-center gap-4">
                            <a href="mailto:leilianevavassori@ensinablumenau.sc.gov.br?subject=Agendamento%20da%20Sala%20de%20Informática&body=Olá%20Professora%20Leiliane,%0A%0AGostaria%20de%20agendar%20a%20sala%20de%20informática%20para%20uma%20aula.%0A%0AData%20pretendida:%20%0AHorário:%20%0ATurma:%20%0AAtividade%20planejada:%20%0A%0AAtenciosamente," class="bg-white text-blue-700 font-bold py-3 px-6 rounded-full shadow-lg hover:bg-blue-50 transition duration-300 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                                </svg>
                                Agendar Horário
                            </a>
                            <a href="https://sites.google.com/site/profleiliane" target="_blank" class="bg-blue-700 text-white font-bold py-3 px-6 rounded-full shadow-lg border border-white hover:bg-blue-800 transition duration-300 flex items-center justify-center">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                                </svg>
                                Ver Mais Recursos
                            </a>
                        </div>
                    </section>
                    
                    <!-- Dicas Rápidas -->
                    <section class="mt-8">
                        <h3 class="text-xl font-semibold text-gray-800 mb-4 flex items-center">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            Dicas Rápidas
                        </h3>
                        
                        <div class="bg-blue-50 p-4 rounded-lg">
                            <ul class="space-y-2">
                                <li class="flex items-start">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                    </svg>
                                    <span class="text-gray-700">Agende a sala com pelo menos uma semana de antecedência</span>
                                </li>
                                <li class="flex items-start">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                    </svg>
                                    <span class="text-gray-700">Verifique previamente se os sites e recursos que pretende utilizar estão acessíveis</span>
                                </li>
                                <li class="flex items-start">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-blue-600 mr-2 mt-0.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                    </svg>
                                    <span class="text-gray-700">Solicite apoio da professora de informática para ideias e possibilidades de atividades</span>
                                </li>
                            </ul>
                        </div>
                    </section>
                    
                    <!-- Contato -->
                    <section class="mt-8 text-center">
                        <p class="text-gray-600 mb-2">Para mais informações, entre em contato:</p>
                        <p class="text-blue-600 font-medium">leilianevavassori@ensinablumenau.sc.gov.br</p>
                        <p class="text-gray-500 text-sm mt-4">Inspirado no trabalho da Prof. Leiliane</p>
                    </section>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        const folder = document.getElementById('folder');
        const folderInner = document.getElementById('folderInner');
        const openButton = document.getElementById('openFolder');
        const closeButton = document.getElementById('closeFolder');
        
        openButton.addEventListener('click', () => {
            folderInner.classList.add('open');
        });
        
        closeButton.addEventListener('click', () => {
            folderInner.classList.remove('open');
        });
    </script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'94454e3b12875218',t:'MTc0ODAxMTE5Ni4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>