|
|
<!DOCTYPE html> |
|
|
<html lang="pt-BR"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>O Espaço do Saber Moderno</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
|
|
|
|
|
|
.glass-card { |
|
|
background: rgba(5, 22, 55, 0.7); |
|
|
backdrop-filter: blur(12px); |
|
|
-webkit-backdrop-filter: blur(12px); |
|
|
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2); |
|
|
border: 1px solid rgba(240, 144, 97, 0.2); |
|
|
} |
|
|
|
|
|
.gradient-text { |
|
|
background: linear-gradient(90deg, #135697, #4B87C7); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.blob { |
|
|
position: fixed; |
|
|
width: 500px; |
|
|
height: 500px; |
|
|
border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; |
|
|
background: linear-gradient(to right, #13569760, #4B87C760); |
|
|
animation: rotate 30s infinite linear; |
|
|
filter: blur(40px); |
|
|
z-index: -2; |
|
|
opacity: 0.5; |
|
|
} |
|
|
|
|
|
.blob:nth-child(2) { |
|
|
left: 80%; |
|
|
top: 20%; |
|
|
background: linear-gradient(to right, #F0906160, #94C1C460); |
|
|
animation-delay: -10s; |
|
|
animation-direction: reverse; |
|
|
} |
|
|
|
|
|
.blob:nth-child(3) { |
|
|
left: 20%; |
|
|
top: 80%; |
|
|
background: linear-gradient(to right, #6C929360, #13569760); |
|
|
animation-delay: -20s; |
|
|
} |
|
|
|
|
|
@keyframes rotate { |
|
|
100% { |
|
|
transform: rotate(360deg); |
|
|
} |
|
|
} |
|
|
|
|
|
.holographic-border { |
|
|
border: 1px solid; |
|
|
border-image: linear-gradient(to bottom right, #135697, #4B87C7, #F09061) 1; |
|
|
box-shadow: 0 0 20px rgba(19, 86, 151, 0.3); |
|
|
} |
|
|
|
|
|
.neumorphic { |
|
|
border-radius: 16px; |
|
|
box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.2), |
|
|
inset -5px -5px 10px rgba(255, 255, 255, 0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.transition-transform { |
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
|
|
} |
|
|
|
|
|
|
|
|
::-webkit-scrollbar { |
|
|
width: 8px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-track { |
|
|
background: rgba(0, 0, 0, 0.1); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
::-webkit-scrollbar-thumb { |
|
|
background: linear-gradient(#135697, #4B87C7); |
|
|
border-radius: 10px; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes modalEntrance { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: scale(0.9) translate(-50%, -45%); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: scale(1) translate(-50%, -50%); |
|
|
} |
|
|
} |
|
|
|
|
|
.modal-entrance { |
|
|
animation: modalEntrance 0.3s ease-out forwards; |
|
|
} |
|
|
|
|
|
@keyframes fade-in-up { |
|
|
from { |
|
|
opacity: 0; |
|
|
transform: translate(-50%, 10px); |
|
|
} |
|
|
to { |
|
|
opacity: 1; |
|
|
transform: translate(-50%, 0); |
|
|
} |
|
|
} |
|
|
|
|
|
.animate-fade-in-up { |
|
|
animation: fade-in-up 0.3s ease-out forwards; |
|
|
} |
|
|
|
|
|
|
|
|
.assistant-message { |
|
|
background: rgba(19, 86, 151, 0.2); |
|
|
border-radius: 1rem; |
|
|
padding: 1.5rem; |
|
|
margin: 1rem 0; |
|
|
border-left: 4px solid #135697; |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.assistant-avatar { |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
border-radius: 50%; |
|
|
margin-right: 12px; |
|
|
flex-shrink: 0; |
|
|
} |
|
|
|
|
|
.video-thumbnail { |
|
|
position: relative; |
|
|
border-radius: 12px; |
|
|
overflow: hidden; |
|
|
transition: transform 0.3s ease; |
|
|
} |
|
|
|
|
|
.video-thumbnail:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
|
|
|
.video-thumbnail img { |
|
|
width: 100%; |
|
|
height: auto; |
|
|
display: block; |
|
|
} |
|
|
|
|
|
.video-play-icon { |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
width: 40px; |
|
|
height: 40px; |
|
|
background-color: rgba(255,0,0,0.8); |
|
|
border-radius: 50%; |
|
|
display: flex; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
opacity: 0; |
|
|
transition: opacity 0.3s ease; |
|
|
} |
|
|
|
|
|
.video-thumbnail:hover .video-play-icon { |
|
|
opacity: 1; |
|
|
} |
|
|
|
|
|
.assistant-response { |
|
|
display: block; |
|
|
animation: fadeIn 0.5s ease-in-out; |
|
|
} |
|
|
|
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
|
|
|
.docentes-section { |
|
|
margin-top: 2rem; |
|
|
padding-top: 2rem; |
|
|
border-top: 1px solid rgba(255,255,255,0.1); |
|
|
} |
|
|
|
|
|
|
|
|
.chat-container { |
|
|
overflow-y: auto; |
|
|
scrollbar-width: thin; |
|
|
scrollbar-color: #135697 rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
|
|
|
.chat-container::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
.chat-container::-webkit-scrollbar-thumb { |
|
|
background-color: #135697; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.chat-container::-webkit-scrollbar-track { |
|
|
background: rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-[#051637] text-white font-['Inter'] min-h-screen overflow-x-hidden relative"> |
|
|
|
|
|
<div class="blob"></div> |
|
|
<div class="blob"></div> |
|
|
<div class="blob"></div> |
|
|
|
|
|
|
|
|
<div id="loadingScreen" class="fixed inset-0 bg-[#051637] z-50 flex flex-col items-center justify-center transition-opacity duration-500 ease-out"> |
|
|
<div class="text-center mb-8 max-w-md px-4"> |
|
|
<div class="relative inline-block mb-6"> |
|
|
<div class="absolute -inset-4 bg-gradient-to-r from-[#135697] to-[#4B87C7] rounded-full blur-lg opacity-75 animate-pulse"></div> |
|
|
<h1 class="text-3xl md:text-4xl font-bold mb-4 gradient-text relative z-10">Explorando o Conhecimento</h1> |
|
|
</div> |
|
|
<p class="text-blue-200 text-lg animate-pulse">A jornada do aprendizado está prestes a começar...</p> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="w-20 h-20 border-4 border-blue-400/30 rounded-full absolute"></div> |
|
|
<div class="w-20 h-20 border-4 border-blue-400 border-t-transparent rounded-full animate-spin"></div> |
|
|
</div> |
|
|
<div class="absolute bottom-8 w-48 h-1 bg-gray-700 rounded-full overflow-hidden"> |
|
|
<div id="loadingBar" class="h-full bg-gradient-to-r from-[#135697] to-[#4B87C7] rounded-full transition-all duration-300" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<main class="container mx-auto px-4 py-8 md:py-12 flex flex-col items-center justify-center min-h-screen relative z-10"> |
|
|
<header class="w-full text-center mb-8"> |
|
|
<h1 class="text-4xl md:text-5xl font-bold mb-3 gradient-text">Espaço do Saber</h1> |
|
|
<p class="text-lg text-blue-200 max-w-2xl mx-auto">Plataforma interativa para aprendizagem contínua e colaborativa</p> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="video-container w-full max-w-6xl mt-8 mb-12 shadow-2xl rounded-2xl overflow-hidden transition-transform hover:scale-[1.02]"> |
|
|
<iframe |
|
|
src="https://www.youtube.com/embed/ZiCzxqQYozU" |
|
|
frameborder="0" |
|
|
allowfullscreen |
|
|
class="w-full aspect-video" |
|
|
></iframe> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full flex flex-col items-center mt-12"> |
|
|
<h2 class="text-2xl font-bold mb-6 gradient-text">Escolha uma opção:</h2> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 w-full max-w-4xl"> |
|
|
|
|
|
<div |
|
|
onclick="openModal('doubtsModal')" |
|
|
class="glass-card w-full h-44 rounded-2xl p-6 cursor-pointer hover:shadow-lg transition-all group relative overflow-hidden transition-transform hover:-translate-y-2" |
|
|
> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-blue-500 to-purple-600 opacity-0 group-hover:opacity-10 transition-opacity"></div> |
|
|
<div class="relative z-10 h-full flex flex-col justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 mb-4 rounded-xl bg-gradient-to-br from-[#135697] to-[#4B87C7] flex items-center justify-center"> |
|
|
<i class="fas fa-question-circle text-white text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-xl font-semibold mb-1">Dúvidas e Curiosidades</h3> |
|
|
<p class="text-blue-200 text-sm">Envie suas perguntas para nossa equipe</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full py-2 bg-blue-600 hover:bg-blue-700 rounded-lg transition-colors flex justify-center items-center"> |
|
|
<span class="mr-2">Explorar</span> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div |
|
|
onclick="openModal('materialsModal')" |
|
|
class="glass-card w-full h-44 rounded-2xl p-6 cursor-pointer hover:shadow-lg transition-all group relative overflow-hidden transition-transform hover:-translate-y-2" |
|
|
> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-amber-500 to-pink-600 opacity-0 group-hover:opacity-10 transition-opacity"></div> |
|
|
<div class="relative z-10 h-full flex flex-col justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-12 h-12 mb-4 rounded-xl bg-gradient-to-br from-amber-500 to-pink-600 flex items-center justify-center"> |
|
|
<i class="fas fa-book-open text-white text-2xl"></i> |
|
|
</div> |
|
|
<div class="ml-4"> |
|
|
<h3 class="text-xl font-semibold mb-1">Materiais e Suporte</h3> |
|
|
<p class="text-blue-200 text-sm">Acesse recursos complementares</p> |
|
|
</div> |
|
|
</div> |
|
|
<button class="w-full py-2 bg-gradient-to-r from-amber-500 to-pink-600 hover:opacity-90 rounded-lg transition-colors flex justify-center items-center"> |
|
|
<span class="mr-2">Explorar</span> |
|
|
<i class="fas fa-chevron-right"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:hidden mt-12 text-blue-400 opacity-70 animate-bounce"> |
|
|
<i class="fas fa-angle-down text-2xl"></i> |
|
|
</div> |
|
|
</main> |
|
|
|
|
|
|
|
|
<div id="doubtsModal" class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40 hidden"> |
|
|
<div id="modalContainer" class="modal-entrance absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-2xl px-4"> |
|
|
<div class="bg-gray-800 rounded-xl shadow-2xl overflow-hidden glass-card"> |
|
|
<div class="flex justify-between items-center px-6 py-4 border-b border-gray-700"> |
|
|
<h2 class="text-xl font-semibold"> |
|
|
<i class="fas fa-question-circle text-blue-400 mr-2"></i> |
|
|
Dúvidas e Curiosidades |
|
|
</h2> |
|
|
<button onclick="closeModal('doubtsModal')" class="text-gray-400 hover:text-white transition-colors"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6 flex flex-col h-[70vh]"> |
|
|
<div class="chat-container flex-1 overflow-y-auto mb-4 space-y-4" id="chatContainer"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-auto space-y-4"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-robot text-white text-sm"></i> |
|
|
</div> |
|
|
<label class="text-sm font-medium">Assistente Virtual</label> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<textarea |
|
|
id="userQuestion" |
|
|
placeholder="Escreva sua dúvida para nossa assistente inteligente..." |
|
|
class="w-full bg-gray-700 text-white rounded-lg px-4 py-3 resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 transition-all min-h-[120px]" |
|
|
></textarea> |
|
|
<button |
|
|
class="absolute right-3 bottom-3 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center hover:bg-blue-700 transition-colors focus:outline-none focus:ring-2 focus:ring-blue-300" |
|
|
onclick="sendMessage()" |
|
|
> |
|
|
<i class="fas fa-paper-plane text-sm"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<div class="w-8 h-8 rounded-full bg-[#6C9293] flex items-center justify-center mr-2"> |
|
|
<i class="fas fa-users text-white text-sm"></i> |
|
|
</div> |
|
|
<label class="text-sm font-medium">Equipe Docente</label> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<textarea |
|
|
placeholder="Escreva sua dúvida para nossa equipe especializada..." |
|
|
class="w-full bg-gray-700 text-white rounded-lg px-4 py-3 resize-none focus:outline-none focus:ring-2 focus:ring-purple-500 transition-all h-32" |
|
|
></textarea> |
|
|
<div class="flex justify-end mt-2 space-x-2"> |
|
|
<button |
|
|
class="px-4 py-2 bg-gray-600 text-white rounded-lg font-medium hover:bg-gray-500 transition-colors focus:outline-none" |
|
|
onclick="closeModal('doubtsModal')" |
|
|
> |
|
|
Cancelar |
|
|
</button> |
|
|
<button |
|
|
class="px-4 py-2 bg-gradient-to-r from-[#6C9293] to-[#94C1C4] text-white rounded-lg font-medium hover:opacity-90 transition-opacity focus:outline-none focus:ring-2 focus:ring-[#94C1C4]" |
|
|
onclick="showFeedback('question')" |
|
|
> |
|
|
<i class="fas fa-paper-plane mr-2"></i>Enviar para Docentes |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="materialsModal" class="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40 hidden"> |
|
|
<div class="modal-entrance absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-full max-w-lg px-4"> |
|
|
<div class="bg-gray-800 rounded-xl shadow-2xl overflow-hidden glass-card"> |
|
|
<div class="flex justify-between items-center px-6 py-4 border-b border-gray-700"> |
|
|
<h2 class="text-xl font-semibold"> |
|
|
<i class="fas fa-book-open text-amber-400 mr-2"></i> |
|
|
Materiais e Suporte |
|
|
</h2> |
|
|
<button onclick="closeModal('materialsModal')" class="text-gray-400 hover:text-white transition-colors"> |
|
|
<i class="fas fa-times"></i> |
|
|
</button> |
|
|
</div> |
|
|
<div class="p-6"> |
|
|
<ul class="divide-y divide-gray-700"> |
|
|
<li class="py-3 hover:bg-gray-700 rounded-lg px-3 transition-all"> |
|
|
<a href="#material1.pdf" download class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-blue-500 to-blue-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-file-pdf text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Introdução ao Curso</h3> |
|
|
<p class="text-sm text-gray-400">PDF · 3.2 MB</p> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-download text-gray-400 hover:text-blue-400 transition-colors"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li class="py-3 hover:bg-gray-700 rounded-lg px-3 transition-all"> |
|
|
<a href="#material2.pdf" download class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-purple-500 to-purple-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-file-alt text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Guia de Estudos</h3> |
|
|
<p class="text-sm text-gray-400">PDF · 2.8 MB</p> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-download text-gray-400 hover:text-purple-400 transition-colors"></i> |
|
|
</a> |
|
|
</li> |
|
|
<li class="py-3 hover:bg-gray-700 rounded-lg px-3 transition-all"> |
|
|
<a href="#material3.pdf" download class="flex items-center justify-between"> |
|
|
<div class="flex items-center"> |
|
|
<div class="w-10 h-10 rounded-lg bg-gradient-to-r from-amber-500 to-amber-600 flex items-center justify-center mr-3"> |
|
|
<i class="fas fa-chart-bar text-white"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="font-medium">Exercícios Práticos</h3> |
|
|
<p class="text-sm text-gray-400">PDF · 4.1 MB</p> |
|
|
</div> |
|
|
</div> |
|
|
<i class="fas fa-download text-gray-400 hover:text-amber-400 transition-colors"></i> |
|
|
</a> |
|
|
</li> |
|
|
</ul> |
|
|
|
|
|
<div class="mt-6 space-y-3"> |
|
|
<a |
|
|
href="https://wa.me/1234567890" |
|
|
target="_blank" |
|
|
class="flex items-center justify-center space-x-2 bg-gradient-to-r from-green-500 to-green-600 text-white py-3 rounded-lg font-medium hover:opacity-90 transition-opacity" |
|
|
> |
|
|
<i class="fab fa-whatsapp text-xl"></i> |
|
|
<span>Suporte via WhatsApp</span> |
|
|
</a> |
|
|
|
|
|
<a |
|
|
href="mailto:[email protected]" |
|
|
class="flex items-center justify-center space-x-2 bg-gray-700 text-white py-3 rounded-lg font-medium hover:bg-gray-600 transition-colors" |
|
|
> |
|
|
<i class="fas fa-envelope"></i> |
|
|
<span>Contato por Email</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="feedbackToast" class="fixed bottom-8 left-1/2 transform -translate-x-1/2 bg-gradient-to-r from-[#F09061] to-[#94C1C4] text-white px-6 py-3 rounded-lg shadow-lg z-50 hidden items-center space-x-2 animate-fade-in-up"> |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>Mensagem enviada com sucesso!</span> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
window.addEventListener('load', () => { |
|
|
const loadingScreen = document.getElementById('loadingScreen'); |
|
|
const loadingBar = document.getElementById('loadingBar'); |
|
|
|
|
|
|
|
|
let progress = 0; |
|
|
const interval = setInterval(() => { |
|
|
progress += Math.random() * 15; |
|
|
if (progress >= 100) { |
|
|
progress = 100; |
|
|
clearInterval(interval); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
loadingScreen.style.opacity = '0'; |
|
|
setTimeout(() => loadingScreen.classList.add('hidden'), 500); |
|
|
}, 300); |
|
|
} |
|
|
loadingBar.style.width = `${progress}%`; |
|
|
}, 200); |
|
|
}); |
|
|
|
|
|
|
|
|
function openModal(id) { |
|
|
document.getElementById(id).classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
} |
|
|
|
|
|
function closeModal(id) { |
|
|
document.getElementById(id).classList.add('hidden'); |
|
|
document.body.style.overflow = ''; |
|
|
|
|
|
const docenteSection = document.querySelector('#doubtsModal .docentes-section'); |
|
|
if (docenteSection) { |
|
|
docenteSection.style.display = 'block'; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const modals = document.querySelectorAll('[id$="Modal"]'); |
|
|
modals.forEach(modal => { |
|
|
modal.addEventListener('click', (e) => { |
|
|
if (e.target === modal) { |
|
|
closeModal(modal.id); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function sendMessage() { |
|
|
const textarea = document.getElementById('userQuestion'); |
|
|
const question = textarea.value.trim(); |
|
|
const chatContainer = document.getElementById('chatContainer'); |
|
|
|
|
|
if (!question) return; |
|
|
|
|
|
|
|
|
addMessage(question, 'user'); |
|
|
textarea.value = ''; |
|
|
|
|
|
|
|
|
const docenteSection = document.querySelector('#doubtsModal .docentes-section'); |
|
|
if (docenteSection) { |
|
|
docenteSection.style.display = 'none'; |
|
|
} |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
|
|
|
const response = getAIResponse(); |
|
|
addMessage(response, 'assistant'); |
|
|
|
|
|
|
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
|
|
|
|
|
|
const toast = document.getElementById('feedbackToast'); |
|
|
toast.innerHTML = ` |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>Sua dúvida foi respondida pela assistente!</span> |
|
|
`; |
|
|
toast.classList.remove('hidden'); |
|
|
|
|
|
setTimeout(() => { |
|
|
toast.classList.add('opacity-0'); |
|
|
setTimeout(() => { |
|
|
toast.classList.add('hidden'); |
|
|
toast.classList.remove('opacity-0'); |
|
|
}, 300); |
|
|
}, 2500); |
|
|
}, 1000); |
|
|
} |
|
|
|
|
|
function addMessage(text, sender) { |
|
|
const chatContainer = document.getElementById('chatContainer'); |
|
|
const messageDiv = document.createElement('div'); |
|
|
messageDiv.className = `flex ${sender === 'user' ? 'justify-end' : 'justify-start'} mb-4`; |
|
|
|
|
|
if (sender === 'user') { |
|
|
messageDiv.innerHTML = ` |
|
|
<div class="max-w-[80%] rounded-lg p-4 bg-blue-600 text-white"> |
|
|
<p>${text}</p> |
|
|
</div> |
|
|
`; |
|
|
} else { |
|
|
|
|
|
const assistantContainer = document.createElement('div'); |
|
|
assistantContainer.className = 'flex max-w-[90%]'; |
|
|
|
|
|
|
|
|
const avatar = document.createElement('img'); |
|
|
avatar.src = 'https://vivaion.net/wp-content/uploads/2024/10/Sem-titulo-1-3-02.png'; |
|
|
avatar.className = 'assistant-avatar'; |
|
|
assistantContainer.appendChild(avatar); |
|
|
|
|
|
|
|
|
const content = document.createElement('div'); |
|
|
content.className = 'flex-1'; |
|
|
content.innerHTML = text; |
|
|
assistantContainer.appendChild(content); |
|
|
|
|
|
messageDiv.appendChild(assistantContainer); |
|
|
} |
|
|
|
|
|
chatContainer.appendChild(messageDiv); |
|
|
chatContainer.scrollTop = chatContainer.scrollHeight; |
|
|
} |
|
|
|
|
|
function getAIResponse() { |
|
|
return ` |
|
|
<div class="assistant-message"> |
|
|
<p class="text-white mb-4">Obrigado pela sua pergunta! Aqui está uma resposta detalhada:</p> |
|
|
|
|
|
<div class="bg-blue-900/30 rounded-lg p-4 mb-6"> |
|
|
<p>Baseado na sua dúvida, recomendo estes recursos para aprofundar seu conhecimento:</p> |
|
|
</div> |
|
|
|
|
|
<h4 class="font-semibold mb-3 text-blue-300">Vídeos recomendados:</h4> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
|
|
<div class="video-item"> |
|
|
<a href="https://www.youtube.com/watch?v=3JluqTojuME" target="_blank"> |
|
|
<div class="video-thumbnail"> |
|
|
<img src="https://i.ytimg.com/vi/3JluqTojuME/hqdefault.jpg" alt="Front-end Basics"> |
|
|
<div class="video-play-icon"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h5 class="font-medium text-sm mt-2">Fundamentos de Front-end</h5> |
|
|
<p class="text-xs text-gray-400">Web Dev Simplified • 20 min</p> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="video-item"> |
|
|
<a href="https://www.youtube.com/watch?v=w7ejDZ8SWv8" target="_blank"> |
|
|
<div class="video-thumbnail"> |
|
|
<img src="https://i.ytimg.com/vi/w7ejDZ8SWv8/hqdefault.jpg" alt="React Tutorial"> |
|
|
<div class="video-play-icon"> |
|
|
<i class="fas fa-play text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
<h5 class="font-medium text-sm mt-2">React para Iniciantes</h5> |
|
|
<p class="text-xs text-gray-400">Traversy Media • 1h10</p> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4 text-sm text-blue-300"> |
|
|
<p>Espero que estes recursos sejam úteis! Se precisar de mais informações, estou à disposição.</p> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
} |
|
|
|
|
|
|
|
|
function showFeedback(type) { |
|
|
const toast = document.getElementById('feedbackToast'); |
|
|
|
|
|
if (type === 'question') { |
|
|
toast.innerHTML = ` |
|
|
<i class="fas fa-check-circle"></i> |
|
|
<span>Sua dúvida foi enviada com sucesso!</span> |
|
|
`; |
|
|
} |
|
|
|
|
|
toast.classList.remove('hidden'); |
|
|
|
|
|
setTimeout(() => { |
|
|
toast.classList.add('opacity-0'); |
|
|
setTimeout(() => toast.classList.add('hidden'), 300); |
|
|
}, 2500); |
|
|
} |
|
|
</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=Vivaion/aula" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
