Spaces:

vioott
/

BookMatchAI-Python-GeminiAPI

Sleeping

App Files Files Community

vioott commited on Jul 20, 2025

Commit

a204d40

1 Parent(s): 8267626

feat: add custom stylesheet for improved UI

Browse files

Files changed (4) hide show

static/style.css +94 -0
templates/chat.html +20 -11
templates/profile.html +14 -13
templates/start.html +19 -12

static/style.css ADDED Viewed

	@@ -0,0 +1,94 @@

+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  background-color: #f0f2f5;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  margin: 0;
+}
+form {
+  background-color: #fff;
+  padding: 30px 40px;
+  border-radius: 10px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  max-width: 400px;
+  width: 45%;
+}
+h1 {
+  text-align: left;
+  color: black;
+  margin-bottom: 30px;
+}
+label {
+  font-weight: 500;
+  margin-top: 15px;
+  display: block;
+}
+input[type="text"] {
+  width: 100%;
+  padding: 10px;
+  margin-top: 5px;
+  border: 1px solid #ccc;
+  border-radius: 6px;
+  box-sizing: border-box;
+}
+input[type="checkbox"] {
+  margin-right: 6px;
+}
+.genre-label {
+  display: flex;
+  align-items: center;
+  margin-top: 8px;
+  font-size: 15px;
+  font-weight: 500;
+}
+button {
+  margin-top: 20px;
+  width: 100%;
+  padding: 12px;
+  background-color: #28a745;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  font-size: 16px;
+  cursor: pointer;
+}
+button:hover {
+  background-color: #218838;
+}
+.chat-container {
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 40px;
+}
+.chat-box,
+.response-box {
+  background-color: #fff;
+  padding: 25px 30px;
+  border-radius: 10px;
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+  width: 45%;
+  font-size: 16px;
+  line-height: 1.6;
+}
+.chat-container:has(.chat-box):not(:has(.response-box)) .chat-box,
+.chat-container:has(.response-box):not(:has(.chat-box)) .response-box {
+width: 100%;
+}
+.resposta-formatada {
+  line-height: 1.6;
+}

templates/chat.html CHANGED Viewed

@@ -1,20 +1,29 @@
 <!DOCTYPE html>
 <html>
 <head>
     <title>Chat com IA</title>
 </head>
 <body>
-    <h1>Chat com a IA</h1>
-    <p><strong>Oi, {{ history.name }}, eu sei tudo sobre livros e estou aqui para te ajudar. O que você deseja saber?</strong></p>
-    <form method="post">
-        <label for="question">Sua pergunta:</label><br>
-        <input type="text" id="question" name="question" required>
-        <button type="submit">Enviar</button>
-    </form>
-    {% if response %}
-        <h2>Resposta:</h2>
-        <p>{{ response }}</p>
-    {% endif %}
 </body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
     <title>Chat com IA</title>
 </head>
 <body>
+    <div class="chat-container">
+        <form method="post" class="chat-box">
+            <h1>Chat com a IA</h1>
+            <p>Oi, {{ history.name }}, espero que esteja tendo um ótimo dia!<br>
+            Eu sei tudo sobre livros e estou aqui para te ajudar.<br>
+            O que você deseja saber?</p>
+            <input type="text" id="question" name="question" required>
+            <button type="submit">Enviar</button>
+        </form>
+        {% if response %}
+        <div class="response-box">
+            <h3>Resposta:</h3>
+            <div class="resposta-formatada">{{ response | safe }}</div>
+        </div>
+        {% endif %}
+    </div>
 </body>
 </html>

templates/profile.html CHANGED Viewed

@@ -1,23 +1,24 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Perfil do Usuário</title>
 </head>
 <body>
-  <h1>Bem-vindo, usuário {{ user_id }}</h1>
-  <form method="POST">
-    <label for="name">Seu nome:</label><br>
-    <input type="text" id="name" name="name" value="{{ history.get('name', '') }}"><br><br>
-    <p>Quais gêneros de livros você gosta?</p>
-    {% for genre in ['ficção', 'não ficção', 'ciência', 'fantasia'] %}
-      <input type="checkbox" id="{{ genre }}" name="preferences" value="{{ genre }}"
-        {% if genre in history.get('preferences', []) %}checked{% endif %}>
-      <label for="{{ genre }}">{{ genre.title() }}</label><br>
-    {% endfor %}
-    <br><button type="submit">Salvar preferências</button>
-  </form>
 </body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <title>Perfil do Usuário</title>
 </head>
 <body>
+    <h1>Bem-vindo, usuário {{ user_id }}</h1>
+    <form method="POST">
+        <label for="name">Seu nome:</label><br>
+        <input type="text" id="name" name="name" value="{{ history.get('name', '') }}"><br><br>
+        <p>Quais gêneros de livros você gosta?</p>
+        {% for genre in ['ficção', 'não ficção', 'ciência', 'fantasia'] %}
+        <input type="checkbox" id="{{ genre }}" name="preferences" value="{{ genre }}"
+            {% if genre in history.get('preferences', []) %}checked{% endif %}>
+        <label for="{{ genre }}">{{ genre.title() }}</label><br>
+        {% endfor %}
+        <br><button type="submit">Salvar preferências</button>
+    </form>
 </body>
 </html>

templates/start.html CHANGED Viewed

@@ -1,21 +1,28 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Bem-vindo!</title>
 </head>
 <body>
-  <h1>Crie seu perfil</h1>
-  <form method="POST">
-    <label for="name">Seu nome:</label><br>
-    <input type="text" id="name" name="name" required><br><br>
-    <p>Quais gêneros de livros você gosta?</p>
-    {% for genre in ['ficção', 'não ficção', 'ciência', 'fantasia'] %}
-      <input type="checkbox" id="{{ genre }}" name="preferences" value="{{ genre }}">
-      <label for="{{ genre }}">{{ genre.title() }}</label><br>
-    {% endfor %}
-    <br><button type="submit">Começar</button>
-  </form>
 </body>
 </html>

 <!DOCTYPE html>
 <html>
 <head>
+    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <title>Bem-vindo!</title>
 </head>
 <body>
+    <form method="POST">
+        <h1>Vamos criar seu perfil?</h1>
+        <label for="name">Seu nome:</label>
+        <input type="text" id="name" name="name" required><br><br>
+        <p>Quais gêneros de livros você gosta?</p>
+        {% for genre in ['ficção', 'não-ficção', 'ciência', 'fantasia'] %}
+            <label class="genre-label" for="{{ genre }}">
+                <input type="checkbox" id="{{ genre }}" name="preferences" value="{{ genre }}">
+                {{ genre.title() }}
+            </label>
+        {% endfor %}
+        <br>
+        <button type="submit">Começar</button>
+    </form>
 </body>
 </html>