Fix css

ICEI-PUC-Minas-PPLCC-TI · Oct 15, 2024 · f4ca138 · f4ca138
1 parent 6bd015f
commit f4ca138
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 43 deletions.
diff --git a/db.json b/db.json
@@ -143,14 +143,6 @@
         "Internet",
         "Pesquisa"
       ]
-    },
-    {
-      "id": "1073",
-      "titulo": "Como mandar um email",
-      "conteudo": "Passo 1: Abra seu programa de e-mail ou aplicativo de e-mail no seu computador ou dispositivo móvel.\n\nPasso 2: Clique na opção para compor um novo e-mail. Geralmente, este botão está rotulado como \"Novo e-mail\", \"Escrever\" ou \"Compor\".\n\nPasso 3: No campo \"Para\", digite o endereço de e-mail do destinatário. Certifique-se de que está correto para evitar erros.\n\nPasso 4: No campo \"Assunto\", escreva uma breve descrição do conteúdo do seu e-mail. Isso ajuda o destinatário a entender do que se trata a mensagem antes de abri-la.\n\nPasso 5: No corpo do e-mail, escreva sua mensagem de forma clara e concisa. Comece com uma saudação, como \"Olá\" ou \"Prezado\", seguido pelo conteúdo do e-mail.\n\nPasso 6: Revise sua mensagem para verificar erros de digitação ou gramática.\n\nPasso 7: Clique no botão de enviar para enviar seu e-mail.",
-      "imagem": "",
-      "link": "https://www.youtube.com/watch?v=H8rPOsT5xoA",
-      "categorias": []
     }
   ],
   "mensagens": [
@@ -221,6 +213,16 @@
       "titulo": "Como navegar na Internet",
       "imagem": "img/Internet.png",
       "categorias": []
+    },
+    {
+      "id": "1",
+      "UserId": 2,
+      "titulo": "Como enviar e-mails",
+      "imagem": "img/email.png",
+      "categorias": [
+        "Comunicação",
+        "E-mail"
+      ]
     }
   ]
 }
diff --git a/docs/pages/app_createtopic.html b/docs/pages/app_createtopic.html
@@ -215,18 +215,18 @@ <h1>Criar Tópico</h1>
   <form id="topicForm">
     <label for="titulo">Título:</label>
     <input type="text" id="titulo" name="titulo">
-    
+
     <button type="button" id="gerarBtn">Gerar</button> <!-- Botão para gerar a resposta -->
-
+      
     <label for="conteudo">Conteúdo:</label>
     <textarea id="conteudo" name="conteudo"></textarea>
 
-    <label for="imagem">Imagem:</label>
-    <input type="text" id="imagem" name="imagem">
-
     <label for="link">URL do vídeo:</label>
     <input type="text" id="link" name="link">
 
+    <label for="imagem">Imagem:</label>
+    <input type="text" id="imagem" name="imagem">
+
     <label for="categorias">Categorias:</label>
     <select id="categorias" name="categorias" multiple>
       <option value="redes sociais">Redes Sociais</option>

diff --git a/docs/pages/index.html b/docs/pages/index.html
@@ -1,17 +1,22 @@
-
-<html>
+<!DOCTYPE html>
+<html lang="pt">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Página de Login</title>
     <link rel="stylesheet" type="text/css" href="./login.css">
 </head>
 <body>
+    <div class="logo">
+        <img src="img/logo_redonda.png" alt="Logo do Site">
+    </div>
     <form id="loginForm">
         <div class="container">
-            <label for="nome_senha"><b>Nome de Usuário</b></label>
+            <label for="nome_usuario"><b>Nome de Usuário</b></label>
             <input type="text" placeholder="Insira seu nome de usuário" id="nome_usuario" required>
 
             <label for="senha"><b>Senha</b></label>
-            <input type="text" placeholder="Insira sua senha" id="senha" required>
+            <input type="password" placeholder="Insira sua senha" id="senha" required>
 
             <button type="submit">Login</button>
         </div>

diff --git a/docs/pages/js/custom.js b/docs/pages/js/custom.js
@@ -25,7 +25,7 @@ if (gerarBtn) {
           messages: [
             {
               role: 'user',
-              content: `Gere um tutorial curto de ${titulo} sem utilizar negrito ou tamanhos variados de fonte. Inicie a resposta no passo 1. Depois, escreva "Link:" e sugira um link do YouTube que ensine o tópico`
+              content: `Gere um tutorial curto de ${titulo} sem utilizar negrito ou tamanhos variados de fonte. Inicie a resposta no passo 1. Depois, escreva "Link:" e sugira direto um link do YouTube que ensine o tópico`
             }
           ]
         })

diff --git a/docs/pages/login.css b/docs/pages/login.css
@@ -1,51 +1,77 @@
 body {
     font-family: Arial, Helvetica, sans-serif;
-    background-color: #424040;
+    background-color: #f4f4f9;
     margin: 0;
     display: flex;
-    justify-content: center; /* Centraliza o conteúdo horizontalmente */
-    align-items: center; /* Centraliza o conteúdo verticalmente */
-    height: 100vh; /* Para ocupar a altura total da viewport */
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    padding: 20px;
+    box-sizing: border-box;
+}
+
+.logo {
+    margin-bottom: 20px;
+}
+
+.logo img {
+    width: 120px; /* Ajusta o tamanho da logo */
+    height: auto;
+    display: block;
+    margin: 0 auto;
 }
 
 .container {
-    width: 400px;
-    padding: 20px;
-    background-color: #4698cb;
-    border-radius: 4px;
+    width: 100%;
+    max-width: 400px;
+    padding: 30px;
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }
 
-h2 {
-    text-align: center; /* Centraliza o texto */
-    color: white;
-    margin-bottom: 20px; /* Espaçamento inferior para separar do formulário */
+label {
+    font-size: 14px;
+    color: #333;
+    margin-bottom: 5px;
+    display: block;
 }
 
-input[type=text] {
+input[type=text], input[type=password] {
     width: 100%;
-    padding: 15px;
-    margin: 5px 0 22px 0;
-    display: inline-block;
-    border: none;
-    background: #f1f1f1;
+    padding: 14px;
+    margin: 10px 0;
+    border: 1px solid #ddd;
+    border-radius: 6px;
+    background-color: #f9f9f9;
+    box-sizing: border-box;
+    font-size: 16px;
 }
 
-input[type=text]:focus {
-    background-color: #ddd;
+input[type=text]:focus, input[type=password]:focus {
+    border-color: #4698cb;
     outline: none;
 }
 
 button {
-    background-color: #4CAF50;
+    background-color: #4698cb;
     color: white;
-    padding: 14px 20px;
-    margin: 8px 0;
+    padding: 14px;
     border: none;
+    border-radius: 6px;
     cursor: pointer;
+    font-size: 16px;
     width: 100%;
-    opacity: 0.9;
+    transition: background-color 0.3s;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
 button:hover {
-    opacity: 1;
+    background-color: #357ca5;
+}
+
+button:active {
+    background-color: #2c6380;
+    box-shadow: none;
 }