Spaces:

vioott
/

BookMatchAI-Python-GeminiAPI

Running

App Files Files Community

BookMatchAI-Python-GeminiAPI / templates /start.html

vioott

refactor(css): extract inline styles to css classes and update README with technical details

694ce62 3 months ago

raw

history blame

5.26 kB

	<!DOCTYPE html>
	<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>