Spaces:
Sleeping
Sleeping
feat(ui): add welcome modal with portfolio project details
Browse files- templates/start.html +51 -1
templates/start.html
CHANGED
|
@@ -16,7 +16,30 @@
|
|
| 16 |
|
| 17 |
</head>
|
| 18 |
<body>
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 20 |
<form class="chat-box" method="POST">
|
| 21 |
<h1 id="titulo-criar-perfil">Vamos criar seu perfil?</h1>
|
| 22 |
|
|
@@ -63,5 +86,32 @@
|
|
| 63 |
|
| 64 |
</form>
|
| 65 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 66 |
</body>
|
| 67 |
</html>
|
|
|
|
| 16 |
|
| 17 |
</head>
|
| 18 |
<body>
|
| 19 |
+
<!-- Welcome Modal -->
|
| 20 |
+
<div id="introModal" class="modal">
|
| 21 |
+
<div class="modal-content">
|
| 22 |
+
<span class="close-btn" onclick="closeModal()">×</span>
|
| 23 |
+
<h2 class="modal-title">BookMatchAI: Seu Assistente Literário Inteligente 📚</h2>
|
| 24 |
+
<p class="modal-desc" style="font-size: 1em; text-align: left; margin-bottom: 15px;">
|
| 25 |
+
<strong>O que este projeto faz:</strong><br>
|
| 26 |
+
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.
|
| 27 |
+
</p>
|
| 28 |
+
|
| 29 |
+
<div class="tech-stack">
|
| 30 |
+
<h4>🚀 Stack Tecnológico Utilizado:</h4>
|
| 31 |
+
<ul>
|
| 32 |
+
<li><strong>Linguagem & Backend:</strong> Python 3 + Flask (Estrutura MVC).</li>
|
| 33 |
+
<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>
|
| 34 |
+
<li><strong>Frontend:</strong> HTML5, CSS3 e JavaScript (Design responsivo e interativo).</li>
|
| 35 |
+
<li><strong>Performance & Infra:</strong> Implementação de Cache (cachetools), Logs robustos e Deploy via Docker no Hugging Face.</li>
|
| 36 |
+
</ul>
|
| 37 |
+
</div>
|
| 38 |
+
|
| 39 |
+
<button id="start-intro-btn" onclick="closeModal()">Entendi, vamos começar!</button>
|
| 40 |
+
</div>
|
| 41 |
+
</div>
|
| 42 |
+
|
| 43 |
<form class="chat-box" method="POST">
|
| 44 |
<h1 id="titulo-criar-perfil">Vamos criar seu perfil?</h1>
|
| 45 |
|
|
|
|
| 86 |
|
| 87 |
</form>
|
| 88 |
|
| 89 |
+
<script>
|
| 90 |
+
// Modal Logic
|
| 91 |
+
const modal = document.getElementById("introModal");
|
| 92 |
+
|
| 93 |
+
// Função para fechar o modal
|
| 94 |
+
function closeModal() {
|
| 95 |
+
modal.style.display = "none";
|
| 96 |
+
// Marca na sessão que o intro já foi visto
|
| 97 |
+
sessionStorage.setItem('introShown', 'true');
|
| 98 |
+
}
|
| 99 |
+
|
| 100 |
+
// Ao carregar a página, verifica se deve mostrar o modal
|
| 101 |
+
window.onload = function() {
|
| 102 |
+
// Se NÃO tiver a flag 'introShown' na sessão, mostra o modal
|
| 103 |
+
if (!sessionStorage.getItem('introShown')) {
|
| 104 |
+
modal.style.display = "block";
|
| 105 |
+
}
|
| 106 |
+
}
|
| 107 |
+
|
| 108 |
+
// Fecha se clicar fora da caixa do modal
|
| 109 |
+
window.onclick = function(event) {
|
| 110 |
+
if (event.target == modal) {
|
| 111 |
+
closeModal();
|
| 112 |
+
}
|
| 113 |
+
}
|
| 114 |
+
</script>
|
| 115 |
+
|
| 116 |
</body>
|
| 117 |
</html>
|