Spaces:

vioott
/

BookMatchAI-Python-GeminiAPI

Sleeping

vioott commited on Jul 22

Commit

f2e7ce4

1 Parent(s): f9e4e57

style: improved card alignment and responsiveness in templates

Files changed (4) hide show

static/style.css CHANGED Viewed

@@ -1,27 +1,23 @@
 body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background-color: #f0f2f5;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   min-height: 100vh;
-  margin: 0;
-}
-form {
-  background-color: #fff;
-  padding: 30px 40px;
-  margin: 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: 10px;
 }
 label {
@@ -69,9 +65,8 @@ button:hover {
 .chat-container {
   display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  gap: 2rem;
 }
 .chat-box,
@@ -83,6 +78,20 @@ button:hover {
   width: 45%;
   font-size: 16px;
   line-height: 1.6;
 }
 .chat-container:has(.chat-box):not(:has(.response-box)) .chat-box,
@@ -91,6 +100,7 @@ button:hover {
 }
 .resposta-formatada {
   line-height: 1.6;
 }
@@ -116,15 +126,3 @@ button:hover {
     gap: 0.5rem;
     margin-bottom: 1rem;
 }
-@media (max-width: 1100px) {
-  .chat-container {
-    display: flex;
-    flex-direction: column;
-    gap: 2rem;
-  }
-  .chat-box, .response-box {
-    width: 100%;
-  }
-}

 body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   background-color: #f0f2f5;
+  display: block;
+  padding-top: 50px;
   min-height: 100vh;
+  margin: 0 auto;
 }
 h1 {
   text-align: left;
   color: black;
+  margin-top: 10px;
+}
+.info-modelo {
+  font-size: 10px;
+  color: #666;
+  margin-top: -20px;
+  margin-bottom: 20px;
 }
 label {
 .chat-container {
   display: flex;
+  justify-self: center;
+  width: 80%
 }
 .chat-box,
   width: 45%;
   font-size: 16px;
   line-height: 1.6;
+  align-self: flex-start;
+  margin: 40px;
+  justify-self: center;
+}
+@media (max-width: 1100px) {
+  .chat-container {
+    flex-direction: column;
+  }
+  .chat-box, .response-box {
+    width: 70%;
+    align-self: center;
+  }
 }
 .chat-container:has(.chat-box):not(:has(.response-box)) .chat-box,
 }
 .resposta-formatada {
+  font-size: 16px;
   line-height: 1.6;
 }
     gap: 0.5rem;
     margin-bottom: 1rem;
 }

templates/chat.html CHANGED Viewed

@@ -6,22 +6,25 @@
 </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>

 </head>
 <body>
     <div class="chat-container">
+        <div class="chat-box">
+            <form method="post">
+                <h1>Chat com a IA</h1>
+                <p class="info-modelo"> (Você está conversando com um modelo gemini-1.5-flash)</p>
+                <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>
+        </div>
         {% if response %}
         <div class="response-box">
             <h3>Resposta:</h3>
+            <p class="resposta-formatada">{{ response | safe }}</p>
         </div>
         {% endif %}
     </div>

templates/profile.html CHANGED Viewed

@@ -6,7 +6,7 @@
 </head>
 <body>
-    <form method="POST">
         <h1>Gostaria de alterar algo?</h1>
         <label for="name">Seu nome:</label><br>
         <input type="text" id="name" name="name" value="{{ history.get('name', '') }}"><br><br>

 </head>
 <body>
+    <form class="chat-box" method="POST">
         <h1>Gostaria de alterar algo?</h1>
         <label for="name">Seu nome:</label><br>
         <input type="text" id="name" name="name" value="{{ history.get('name', '') }}"><br><br>

templates/start.html CHANGED Viewed

@@ -17,7 +17,7 @@
 </head>
 <body>
-    <form method="POST">
         <h1 id="titulo-criar-perfil">Vamos criar seu perfil?</h1>
         <div class="small-link" id="link-ja-tenho">
@@ -30,11 +30,15 @@
         <div id="existing-profiles" class="hidden">
             <h1>Selecione um perfil</h1>
-            <ul>
-                {% for id, data in profiles.items() %}
-                    <li><a href="/perfil/{{ id }}">{{ data.name or "Usuário " ~ id }}</a></li>
-                {% endfor %}
-            </ul>
         </div>
         <div id="formulario-perfil">

 </head>
 <body>
+    <form  class="chat-box" method="POST">
         <h1 id="titulo-criar-perfil">Vamos criar seu perfil?</h1>
         <div class="small-link" id="link-ja-tenho">
         <div id="existing-profiles" class="hidden">
             <h1>Selecione um perfil</h1>
+            {% if profiles %}
+                <ul>
+                    {% for id, data in profiles.items() %}
+                        <li><a href="/perfil/{{ id }}">{{ data.name or "Usuário " ~ id }}</a></li>
+                    {% endfor %}
+                </ul>
+            {% else %}
+                <p>Não há perfis cadastrados.</p>
+            {% endif %}
         </div>
         <div id="formulario-perfil">