Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}"> | |
| <title>Bem-vindo!</title> | |
| <script> | |
| function mostrarPerfis() { | |
| document.getElementById('existing-profiles').classList.remove('hidden'); | |
| document.getElementById('formulario-perfil').classList.add('hidden'); | |
| document.getElementById('link-ja-tenho').classList.add('hidden'); | |
| document.getElementById('link-criar').classList.remove('hidden'); | |
| document.getElementById('titulo-criar-perfil').classList.add('hidden'); | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <!-- Welcome Modal --> | |
| <div id="introModal" class="modal"> | |
| <div class="modal-content"> | |
| <span class="close-btn" onclick="closeModal()">×</span> | |
| <h2 class="modal-title">BookMatchAI: Seu Assistente Literário Inteligente 📚</h2> | |
| <p class="modal-desc modal-text-content"> | |
| <strong>O que este projeto faz:</strong><br> | |
| Este é um assistente conversacional capaz de entender o perfil do usuário (gêneros favoritos e nome) para fazer recomendações de livros personalizadas e discutir literatura em linguagem natural. | |
| </p> | |
| <div class="tech-stack"> | |
| <h4>🚀 Stack Tecnológico Utilizado:</h4> | |
| <ul> | |
| <li><strong>Linguagem & Backend:</strong> Python 3 + Flask (Estrutura MVC).</li> | |
| <li><strong>Inteligência Artificial:</strong> Google Gemini API (Sistema inteligente que consulta, filtra e seleciona dinamicamente os modelos de IA disponíveis para uso).</li> | |
| <li><strong>Frontend:</strong> HTML5, CSS3 e JavaScript (Design responsivo e interativo).</li> | |
| <li><strong>Performance & Infra:</strong> Implementação de Cache (cachetools), Logs robustos e Deploy via Docker no Hugging Face.</li> | |
| </ul> | |
| </div> | |
| <button id="start-intro-btn" onclick="closeModal()">Entendi, vamos começar!</button> | |
| </div> | |
| </div> | |
| <!-- Floating Info Button --> | |
| <div id="infoFab" class="info-fab" onclick="openModal()" title="Sobre o Projeto"> | |
| ℹ️ | |
| </div> | |
| <form class="chat-box" method="POST"> | |
| <h1 id="titulo-criar-perfil">Vamos criar seu perfil?</h1> | |
| <div id="formulario-perfil"> | |
| <label for="name">Seu nome:</label> | |
| <input type="text" id="name" name="name" required | |
| placeholder="Digite seu nome aqui..." | |
| title="Por favor, preencha seu nome" | |
| oninvalid="this.setCustomValidity('Por favor, preencha seu nome')" | |
| oninput="this.setCustomValidity('')"><br><br> | |
| <p>Quais gêneros de livros você gosta?</p> | |
| <div class="genre-grid"> | |
| {% for genre in genres %} | |
| <label class="genre-label" for="{{ genre }}"> | |
| <input type="checkbox" id="{{ genre }}" name="preferences" value="{{ genre }}"> | |
| {{ genre.title() }} | |
| </label> | |
| {% endfor %} | |
| </div> | |
| <p id="genre-error" class="error-msg">⚠️ Selecione pelo menos um gênero.</p> | |
| <br> | |
| <button type="submit">Começar</button> | |
| </div> | |
| </form> | |
| <script> | |
| // Modal Logic | |
| const modal = document.getElementById("introModal"); | |
| const fab = document.getElementById("infoFab"); | |
| // Função para abrir o modal | |
| function openModal() { | |
| modal.style.display = "block"; | |
| fab.style.display = "none"; | |
| } | |
| // Função para fechar o modal | |
| function closeModal() { | |
| modal.style.display = "none"; | |
| fab.style.display = "block"; // Mostra o botão flutuante | |
| // Marca na sessão que o intro já foi visto | |
| sessionStorage.setItem('introShown_v3', 'true'); | |
| } | |
| // Ao carregar a página | |
| window.addEventListener('load', function() { | |
| // Se NÃO tiver a flag, mostra modal | |
| if (!sessionStorage.getItem('introShown_v3')) { | |
| openModal(); | |
| } else { | |
| // Se já viu, mostra só o botão flutuante | |
| fab.style.display = "block"; | |
| } | |
| }); | |
| // Fecha se clicar fora da caixa do modal | |
| window.onclick = function(event) { | |
| if (event.target == modal) { | |
| closeModal(); | |
| } | |
| } | |
| // Validação do Formulário | |
| document.querySelector('form').addEventListener('submit', function(e) { | |
| const checkboxes = document.querySelectorAll('input[name="preferences"]'); | |
| const errorMsg = document.getElementById('genre-error'); | |
| let checkedOne = Array.prototype.slice.call(checkboxes).some(x => x.checked); | |
| if (!checkedOne) { | |
| e.preventDefault(); // Impede o envio | |
| errorMsg.style.display = 'block'; | |
| } else { | |
| errorMsg.style.display = 'none'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |