File manager

File manager - Edit - /var/www/html/portalHomolog/resources/views/sei/videoaulas.blade.php

Back
@extends('layouts.sei.theme') @section('title', 'SEI - Treinamento Angra dos Reis') @section('content') <head> <style> /* Estilo da área total da barra / .videoslist::-webkit-scrollbar { width: 8px !important; / largura vertical / height: 8px !important; / altura horizontal / } / Track (fundo) / .videoslist::-webkit-scrollbar-track { background: rgb(185, 225, 206) !important; } / Thumb (alça que se move) / .videoslist::-webkit-scrollbar-thumb { background-color: var(--secondary) !important; border-radius: 4px !important; } / Thumb on hover / .videoslist::-webkit-scrollbar-thumb:hover { background-color: var(--primary) !important; } video { border-radius: 1rem; } .btn:disabled, .btn.disabled, fieldset:disabled .btn { pointer-events: none; opacity: 0 !important; } #backToTop { display: none !important; } .lesson-item>div:hover { background-color: var(--gray) !important; transition: background-color 0.3s ease, color 0.3s ease; } </style> </head> <section class="animate__animated animate__fadeIn"> <!-- Cabeçalho --> <header class="course-header"> <div class="container mb-3"> <div class="row align-items-center"> <div class="col-md-8"> <h1 class="fw-bold mb-3">Videoaulas - Sistema SEI Angra dos Reis</h1> <p class="lead mb-0">Treinamento completo com 14 videoaulas sobre o Sistema Eletrônico de Informações</p> </div> <div class="col-md-4 text-md-end mt-3 mt-md-0"> <span class="badge bg-light text-dark fs-6"><i class="bi bi-collection-play"></i> 14 aulas</span> <span class="badge bg-light text-dark fs-6 ms-2"><i class="bi bi-clock"></i> 52min</span> </div> </div> </div> </header> <!-- Conteúdo Principal --> <main class="container"> <div class="row"> <!-- Player de Vídeo --> <div class="col-lg-8 mb-4"> <div class="video-container mb-3"> <video id="videoPlayer" class="w-100" controls poster="https://via.placeholder.com/800x450?text=SEI+Angra+dos+Reis"> <source src="" type="video/mp4"> Seu navegador não suporta o elemento de vídeo. </video> </div> <!-- Progresso do Curso --> <div class="progress-container"> <div class="progress-bar progress-bar" role="progressbar" style="width: 25%"></div> </div> <!-- Navegação entre aulas --> <div class="d-flex justify-content-between nav-buttons"> <button id="prevLesson" class="btn btn-outline-primary" disabled> <i class="bi bi-chevron-left"></i> Anterior </button> <button id="nextLesson" class="btn text-white bg-success"> Próxima <i class="bi bi-chevron-right"></i> </button> </div> <!-- Descrição da Aula Atual --> <div class="card mt-4 border-0 shadow rounded-3"> <div class="card-body"> <h3 id="currentLessonTitle" class="card-title h5">Portal SEI Angra dos Reis</h3> <p id="currentLessonDesc" class="card-text">Introdução ao sistema SEI utilizado pela prefeitura de Angra dos Reis.</p> <div id="currentLessonLinks"></div> </div> </div> </div> <!-- Lista de Aulas --> <div class="col-lg-4"> <div class="card border-0 shadow rounded-3"> <div class="card-header text-center bg-white border-bottom border-gray shadow-sm"> <h2 class="h5 mb-0 fw-bold text-secondary">Conteúdo</h2> </div> <div style="max-height: 600px; overflow-y:auto;" class="card-body videoslist"> <div class="lesson-list" id="lessonList"> <!-- Aulas serão inseridas aqui via JavaScript --> </div> </div> </div> </div> </div> </main> <!-- Bootstrap JS + Popper --> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> <script> // Dados das aulas com os conteúdos reais fornecidos const lessons = [{ id: 0, title: "Introdução", description: "Introdução às videoaulas do SEI Angra dos Reis.", duration: "", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula0.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb0.jpg') }}", completed: false }, { id: 1, title: "Portal SEI Angra dos Reis", description: "Nesta aula introdutória, vamos conhecer os conceitos básicos do Sistema Eletrônico de Informações utilizado pela prefeitura de Angra dos Reis.", duration: "01:22", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula1.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb1.jpg') }}", completed: false }, { id: 2, title: "Acessar o Sistema", description: "Aprenda como realizar o login e configurar seu perfil no SEI.", duration: "00:51", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula2.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb2.jpg') }}", completed: false }, { id: 3, title: "Identificação dos Elementos da Tela Inicial", description: "Domine a interface do SEI e saiba onde encontrar as principais funcionalidades.", links: [{ text: "Legenda dos Elementos", url: "https://angra.rj.gov.br/controle-de-processos-legenda-sei" }], duration: "05:07", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula3.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb3.jpg') }}", completed: false }, { id: 4, title: "Acessando um Processo", description: "Passo a passo para iniciar um novo processo no sistema.", duration: "03:36", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula4.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb4.jpg') }}", completed: false }, { id: 5, title: "Receber e Atribuir Processo", description: "Como enviar e receber documentos entre setores.", duration: "03:12", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula5.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb5.jpg') }}", completed: false }, { id: 6, title: "Iniciar processo", description: "Passo a passo para criar um novo processo no sistema.", duration: "07:14", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula6.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb6.jpg') }}", completed: false }, { id: 7, title: "Incluir Documentos", description: "Como adicionar documentos a um processo existente.", duration: "05:25", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula7.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb7.jpg') }}", completed: false }, { id: 8, title: "Adicionar Documento Externo", description: "Inserção de documentos originados fora do sistema SEI.", duration: "07:05", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula8.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb8.jpg') }}", completed: false }, { id: 9, title: "Editar Documento", description: "Modificação de documentos já existentes no sistema.", duration: "02:32", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula9.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb9.jpg') }}", completed: false }, { id: 10, title: "Consultar e Alterar Dados de Documentos", description: "Como visualizar e modificar informações de documentos.", duration: "01:03", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula10.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb10.jpg') }}", completed: false }, { id: 11, title: "Assinatura de Documento", description: "Utilizando certificado digital para validar documentos.", duration: "02:10", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula11.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb11.jpg') }}", completed: false }, { id: 12, title: "Bloco de Assinatura", description: "Assinatura em bloco de múltiplos documentos.", duration: "05:25", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula12.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb12.jpg') }}", completed: false }, { id: 13, title: "Enviar Processo", description: "Como tramitar processos para outros setores.", duration: "05:54", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula13.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb13.jpg') }}", completed: false }, { id: 14, title: "Concluir Processo", description: "Finalização e arquivamento de processos no sistema.", duration: "01:31", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula14.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb14.jpg') }}", completed: false }, { id: 15, title: "Considerações Finais", description: "Reflexões finais sobre o uso do sistema SEI.", duration: "", videoUrl: "{{ asset('sei-angra/assets/videoaulas/aula15.mp4') }}", posterUrl: "{{ asset('sei-angra/assets/thumb15.jpg') }}", completed: false } ]; // Elementos da página const videoPlayer = document.getElementById('videoPlayer'); const lessonList = document.getElementById('lessonList'); const currentLessonTitle = document.getElementById('currentLessonTitle'); const currentLessonDesc = document.getElementById('currentLessonDesc'); const prevButton = document.getElementById('prevLesson'); const nextButton = document.getElementById('nextLesson'); // Estado atual let currentLessonIndex = 0; // Carrega a lista de aulas function loadLessons() { lessonList.innerHTML = ''; lessons.forEach((lesson, index) => { const lessonItem = document.createElement('div'); lessonItem.className = `lesson-item ${index === currentLessonIndex ? 'active' : ''} ${lesson.completed ? 'text-muted' : ''}`; lessonItem.innerHTML = ` <div id="lessonEachItem" style="cursor: pointer;" class="d-flex justify-content-between align-items-center shadow-top shadow-sm rounded-3 m-2"> <div class="p-3"> <h4 class="h6 mb-1">Aula ${lesson.id}: ${lesson.title}</h4> <small class="text-muted">${lesson.duration}</small> </div> ${lesson.completed ? ' <i class="bi p-2 bi-check-circle-fill text-success"></i>' : '<i class="bi p-2 bi-play-circle"></i>'} </div> `; lessonItem.addEventListener('click', () => { setCurrentLesson(index); }); lessonList.appendChild(lessonItem); }); } // Define a aula atual function setCurrentLesson(index) { currentLessonIndex = index; const lesson = lessons[currentLessonIndex]; // Atualiza o player de vídeo videoPlayer.src = lesson.videoUrl; videoPlayer.poster = lesson.posterUrl; videoPlayer.title = `Treinamento Sei Angra - Aula ${lesson.id}`; // Atualiza as informações da aula currentLessonTitle.textContent = `Aula ${lesson.id}: ${lesson.title}`; currentLessonDesc.textContent = lesson.description; // Limpa e adiciona os links (se existirem) const linksContainer = document.getElementById('currentLessonLinks'); linksContainer.innerHTML = ''; if (lesson.links && lesson.links.length > 0) { const linksTitle = document.createElement('div'); linksTitle.className = 'fw-bold mt-2 mb-1'; linksTitle.textContent = 'Links Úteis:'; linksContainer.appendChild(linksTitle); lesson.links.forEach(link => { const linkElement = document.createElement('a'); linkElement.href = link.url; linkElement.target = '_blank'; linkElement.className = 'd-block mb-1 text-primary text-decoration-none'; linkElement.innerHTML = `<i class="bi bi-box-arrow-up-right"></i> ${link.text}`; linksContainer.appendChild(linkElement); }); } // Remove e reaplica a animação currentLessonTitle.classList.remove('animate__animated', 'animate__headShake'); currentLessonDesc.classList.remove('animate__animated', 'animate__headShake'); videoPlayer.classList.remove('animate__animated', 'animate__headShake'); // Força o reflow para reiniciar a animação void currentLessonTitle.offsetWidth; currentLessonTitle.classList.add('animate__animated', 'animate__headShake'); currentLessonDesc.classList.add('animate__animated', 'animate__headShake'); videoPlayer.classList.add('animate__animated', 'animate__headShake'); // Atualiza os botões de navegação prevButton.disabled = currentLessonIndex === 0; nextButton.disabled = currentLessonIndex === lessons.length - 1; // Atualiza a lista de aulas loadLessons(); if (window.innerWidth >= 992) { // Desktop → scroll para o item ativo const activeItem = lessonList.querySelector('.active'); if (activeItem) { activeItem.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); } } else { // Mobile/tablet → scroll até o vídeo (topo da página) videoPlayer.scrollIntoView({ behavior: 'smooth', block: 'start' }); } // Atualiza a barra de progresso updateProgress(); } // Atualiza a barra de progresso function updateProgress() { const completedCount = lessons.filter(l => l.completed).length; const progress = (completedCount / lessons.length) 100; document.querySelector('.progress-bar').style.width = `${progress}%`; } // Event listeners para navegação prevButton.addEventListener('click', () => { if (currentLessonIndex > 0) { setCurrentLesson(currentLessonIndex - 1); } }); nextButton.addEventListener('click', () => { if (currentLessonIndex < lessons.length - 1) { // Marca a aula atual como concluída lessons[currentLessonIndex].completed = true; setCurrentLesson(currentLessonIndex + 1); } }); // Quando o vídeo termina, marca como concluído e vai para o próximo videoPlayer.addEventListener('ended', () => { lessons[currentLessonIndex].completed = true; updateProgress(); loadLessons(); // Se não for a última aula, habilita o botão próximo if (currentLessonIndex < lessons.length - 1) { nextButton.disabled = false; } }); // Inicializa a página com a primeira aula setCurrentLesson(0); </script> </section> <div class="container px-3 px-md-5 mb-5 pb-5"> <div class="row px-5 text-center mb-3"> <h3 class="text-secondary"> Confira outros materiais e cursos </h3> </div> <div class="row justify-content-center gx-2 gy-3"> <!-- Card 5 --> <div class="col-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 col-xxl-2 d-flex justify-content-center"> <div class="card border-0 shadow h-100" style="width: 100%; max-width: 18rem;"> <img class="card-img-top img-fluid" src="{{ asset('sei-angra/assets/img/SEI-USAR.jpg') }}" alt="Curso Livre Sei"> <div class="card-body px-2 py-3"> <h5 class="card-title">Curso Livre - SEI! USAR (ENAP)</h5> <p class="card-text">Curso online gratuito, oferecido pela Escola Nacional de Administração Pública (ENAP).</p> </div> <div class="card-footer"> <a href="https://www.escolavirtual.gov.br/curso/74" target="_blank" class="btn btn-primary w-100">Fazer Curso</a> </div> </div> </div> <!-- Card 4 --> <div class="col-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 col-xxl-2 d-flex justify-content-center"> <div class="card border-0 shadow h-100" style="width: 100%; max-width: 18rem;"> <img class="card-img-top img-fluid" src="{{ asset('sei-angra/assets/img/lives.jpg') }}" alt="Treinamento Sei Angra dos Reis"> <div class="card-body px-2 py-3"> <h5 class="card-title">Lives de Treinamento SEI Angra dos Reis</h5> <p class="card-text">Treinamento sobre o SEI Angra, que ocorreu nos dias 08 e 09 de janeiro.</p> </div> <div class="card-footer"> <a href="{{ route('sei.lives') }}" class="btn btn-primary w-100">Assistir</a> </div> </div> </div> <!-- Card 6 --> <div class="col-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 col-xxl-2 d-flex justify-content-center"> <div class="card border-0 shadow h-100" style="width: 100%; max-width: 18rem;"> <img class="card-img-top img-fluid" src="{{ asset('sei-angra/assets/img/wiki.jpg') }}" alt="Wiki Sei RJ"> <div class="card-body px-2 py-3"> <h5 class="card-title">Wiki SEI-RJ</h5> <p class="card-text">Todas as informações sobre o funcionamento do sistema, como manuais, FAQs e POP's.</p> </div> <div class="card-footer"> <a href="https://wikisei.rj.gov.br/P%C3%A1gina_principal" class="btn btn-primary w-100">Acessar</a> </div> </div> </div> <!-- Card 1 --> <div class="col-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 col-xxl-2 d-flex justify-content-center"> <div class="card border-0 shadow h-100" style="width: 100%; max-width: 18rem;"> <img class="card-img-top img-fluid" src="{{ asset('sei-angra/assets/img/sei-pdf.png') }}" alt="Guia Básico do SEI em PDF"> <div class="card-body px-2 py-3"> <h5 class="card-title">Guia Básico do SEI em .PDF</h5> <p class="card-text">Baixe o material oficial de apoio ao Curso Básico do SEI para estudo offline.</p> </div> <div class="card-footer"> <a href="{{ asset('sei-angra/assets/docs/Curso_Basico_do_SEI.pdf') }}" target="_blank" class="btn btn-primary w-100">Ver PDF</a> </div> </div> </div> <!-- Card 3 --> <div class="col-12 col-sm-12 col-md-6 col-lg-2 col-xl-2 col-xxl-2 d-flex justify-content-center"> <div class="card border-0 shadow h-100" style="width: 100%; max-width: 18rem;"> <img class="card-img-top img-fluid" src="{{ asset('sei-angra/assets/img/manual.jpg') }}" alt="Treinamento Sei Angra dos Reis"> <div class="card-body px-2 py-3"> <h5 class="card-title">Manual do Usuário Externo</h5> <p class="card-text">Destinado aos Munícipes e Representantes de Empresas.</p> </div> <div class="card-footer"> <a href="{{ route('sei.manual') }}" class="btn btn-primary w-100">Acessar</a> </div> </div> </div> </div> </div> @endsection

| ver. 1.4 | Github | . | PHP 8.3.28 | Generation time: 0.02 | proxy | phpinfo | Settings