fix(ui): enhance modal styling, navbar color, form validation and session logic

static/style.css

@@ -129,7 +129,7 @@ button:hover {
 
 /* --- Navigation Bar --- */
 .navbar {
-  background-color: #333;
+  background-color: #28a745; /* Verde igual aos botões */
   overflow: hidden;
   position: fixed;
   top: 0;
@@ -137,26 +137,142 @@ button:hover {
   z-index: 1000;
   display: flex;
   justify-content: center;
-  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
 }
 
 .navbar a {
   float: left;
   display: block;
-  color: #f2f2f2;
+  color: white;
   text-align: center;
-  padding: 14px 20px;
+  padding: 14px 24px;
   text-decoration: none;
   font-size: 17px;
-  transition: background-color 0.3s;
+  font-weight: 500;
+  transition: background-color 0.2s;
 }
 
 .navbar a:hover {
-  background-color: #ddd;
-  color: black;
+  background-color: #218838; /* Verde um pouco mais escuro no hover */
+  color: white;
 }
 
 .navbar a.active {
-  background-color: #28a745;
+  background-color: #1e7e34;
   color: white;
+}
+
+/* --- Welcome Modal --- */
+.modal {
+  display: none; 
+  position: fixed; 
+  z-index: 2000; 
+  left: 0;
+  top: 0;
+  width: 100%; 
+  height: 100%; 
+  overflow: auto; 
+  background-color: rgba(0,0,0,0.7); /* Fundo um pouco mais escuro */
+  backdrop-filter: blur(2px); /* Efeito de desfoque no fundo */
+  animation: fadeIn 0.3s;
+}
+
+.modal-content {
+  background-color: #fff;
+  margin: 8% auto; 
+  padding: 40px; /* Mais padding */
+  border: none;
+  width: 85%; 
+  max-width: 650px;
+  border-radius: 16px; /* Cantos mais arredondados */
+  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+  text-align: center;
+  position: relative;
+  animation: slideDown 0.4s cubic-bezier(0.16, 1, 0.3, 1); /* Animação mais fluida */
+  font-family: 'Segoe UI', sans-serif;
+}
+
+.close-btn {
+  color: #999;
+  position: absolute;
+  top: 15px;
+  right: 25px;
+  font-size: 32px;
+  font-weight: 300;
+  line-height: 1;
+  transition: color 0.2s;
+}
+
+.close-btn:hover {
+  color: #333;
+}
+
+.modal-title {
+    color: #28a745;
+    margin-bottom: 15px;
+    font-size: 1.8em;
+    font-weight: 600;
+}
+
+.modal-desc {
+    font-size: 1.1em;
+    color: #444;
+    line-height: 1.6;
+    margin-bottom: 30px;
+    padding: 0 10px;
+}
+
+.tech-stack {
+    background-color: #f8f9fa;
+    padding: 25px;
+    border-radius: 12px;
+    margin-bottom: 30px;
+    text-align: left;
+    font-size: 1em;
+    border-left: 5px solid #28a745;
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.03);
+}
+
+.tech-stack h4 {
+    margin-top: 0;
+    margin-bottom: 15px;
+    color: #2c3e50;
+    font-size: 1.1em;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.tech-stack ul {
+    margin: 0;
+    padding-left: 20px;
+}
+
+.tech-stack li {
+    margin-bottom: 8px;
+    color: #555;
+    line-height: 1.5;
+}
+
+#start-intro-btn {
+    width: auto;
+    padding: 12px 40px;
+    font-size: 1.1em;
+    font-weight: 600;
+    box-shadow: 0 4px 10px rgba(40, 167, 69, 0.3);
+    transition: transform 0.2s, box-shadow 0.2s;
+}
+
+#start-intro-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 15px rgba(40, 167, 69, 0.4);
+}
+
+@keyframes fadeIn {
+  from {opacity: 0} 
+  to {opacity: 1}
+}
+
+@keyframes slideDown {
+  from {transform: translateY(-50px); opacity: 0;}
+  to {transform: translateY(0); opacity: 1;}
 }

templates/start.html

@@ -66,7 +66,9 @@
 
         <div id="formulario-perfil">
             <label for="name">Seu nome:</label>
-            <input type="text" id="name" name="name" required><br><br>
+            <input type="text" id="name" name="name" required 
+                   oninvalid="this.setCustomValidity('Por favor, preencha seu nome')"
+                   oninput="this.setCustomValidity('')"><br><br>
     
             <p>Quais gêneros de livros você gosta?</p>
 
@@ -78,6 +80,7 @@
                     </label>
                 {% endfor %}
             </div>
+            <p id="genre-error" style="color: red; display: none; font-size: 0.9em; margin-top: 5px;">⚠️ Selecione pelo menos um gênero.</p>
     
             <br>
             <button type="submit">Começar</button>
@@ -98,12 +101,12 @@
         }
 
         // Ao carregar a página, verifica se deve mostrar o modal
-        window.onload = function() {
+        window.addEventListener('load', function() {
             // Se NÃO tiver a flag 'introShown' na sessão, mostra o modal
             if (!sessionStorage.getItem('introShown')) {
                 modal.style.display = "block";
             }
-        }
+        });
 
         // Fecha se clicar fora da caixa do modal
         window.onclick = function(event) {
@@ -111,6 +114,23 @@
                 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);
+
+            // Verifica se está na tela de "Criar perfil" (se o formulario-perfil não está hidden)
+            const formVisible = !document.getElementById('formulario-perfil').classList.contains('hidden');
+
+            if (formVisible && !checkedOne) {
+                e.preventDefault(); // Impede o envio
+                errorMsg.style.display = 'block';
+            } else {
+                errorMsg.style.display = 'none';
+            }
+        });
     </script>
 
 </body>