css

app.py

@@ -58,6 +58,8 @@ def excluir(id):
 def acessoPerfil():
     return render_template("perfil.html")
 
+
+
 if __name__ == "__main__":
     # Garante que a pasta 'instance' seja criada na raiz antes de iniciar o banco
     os.makedirs(app.instance_path, exist_ok=True)

static/style.css

@@ -247,16 +247,16 @@ body {
 /* ── FAB (botão +) ── */
 .fab {
     position: fixed;
-    bottom: 32px; /* Subi um pouco para alinhar melhor visualmente */
+    bottom: 32px;
     right: 32px;
-    width: 60px;  /* Um pouquinho maior para dar presença */
+    width: 60px;  
     height: 60px;
     border-radius: 50%;
-    background: linear-gradient(135deg, #ff1a3c, #e60023); /* Degradê sutil para dar volume */
+    background: linear-gradient(135deg, #ff1a3c, #e60023); 
     color: #ffffff;
     border: none;
     cursor: pointer;
-    z-index: 1000; /* Garante que fica por cima de tudo */
+    z-index: 1000; 
     
     /* Centralização moderna */
     display: inline-flex;
@@ -276,17 +276,17 @@ body {
 
 /* Efeito de passar o mouse (Hover) */
 .fab:hover {
-    transform: translateY(-4px) scale(1.05); /* Sobe de leve e cresce com efeito mola */
-    filter: brightness(1.1); /* Ilumina o botão em vez de trocar para uma cor estática sem graça */
+    transform: translateY(-4px) scale(1.05);
+    filter: brightness(1.1); 
     box-shadow: 0 12px 32px rgba(230, 0, 35, 0.4), 
                 0 6px 16px rgba(0, 0, 0, 0.2);
 }
 
 /* Efeito de clique (Active) - Essencial para o mobile! */
 .fab:active {
-    transform: translateY(-1px) scale(0.98); /* Dá a sensação física de que o botão foi pressionado */
+    transform: translateY(-1px) scale(0.98);
     box-shadow: 0 4px 12px rgba(230, 0, 35, 0.3);
-    transition: transform 0.1s ease; /* Resposta ao clique instantânea */
+    transition: transform 0.1s ease; 
 }
 
 /* Garante que o ícone dentro dele (seja SVG ou Font Icon) fique perfeito */
@@ -333,3 +333,149 @@ footer {
         right: 16px;
     }
 }
+
+/* ===========================
+   Página Editar Receita
+=========================== */
+
+.editar-page {
+    min-height: 100vh;
+    background: #f5f5f5;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 30px;
+}
+
+.editar-container {
+    width: 100%;
+    max-width: 500px;
+}
+
+.editar-form {
+    background: #fff;
+    padding: 35px;
+    border-radius: 24px;
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+}
+
+.editar-form h1 {
+    font-size: 28px;
+    text-align: center;
+    color: #111;
+    margin-bottom: 10px;
+}
+
+.editar-form label {
+    font-size: 14px;
+    font-weight: 600;
+    color: #555;
+}
+
+.editar-form input {
+    width: 100%;
+    padding: 14px 18px;
+    border: 2px solid #efefef;
+    border-radius: 14px;
+    background: #fafafa;
+    font-size: 15px;
+    transition: 0.2s;
+}
+
+.editar-form input:focus {
+    border-color: #e60023;
+    background: #fff;
+    outline: none;
+}
+
+.editar-botoes {
+    display: flex;
+    gap: 12px;
+    margin-top: 10px;
+}
+
+.editar-botoes button {
+    flex: 1;
+    padding: 12px;
+    border: none;
+    border-radius: 30px;
+    font-size: 14px;
+    font-weight: 700;
+    cursor: pointer;
+    transition: 0.25s;
+}
+
+/* Salvar */
+
+.btn-principal {
+    background: #e60023;
+    color: white;
+}
+
+.btn-principal:hover {
+    background: #b6001b;
+    transform: translateY(-2px);
+}
+
+/* Limpar */
+
+.btn-secundario {
+    background: #efefef;
+    color: #111;
+}
+
+.btn-secundario:hover {
+    background: #dddddd;
+}
+
+/* Excluir */
+
+.btn-excluir {
+    background: #111;
+    color: white;
+}
+
+.btn-excluir:hover {
+    background: #333;
+    transform: translateY(-2px);
+}
+
+/* Responsivo */
+
+@media (max-width: 600px) {
+
+    .editar-form {
+        padding: 25px;
+    }
+
+    .editar-botoes {
+        flex-direction: column;
+    }
+
+    .editar-botoes button {
+        width: 100%;
+    }
+
+}
+
+.editar-form textarea {
+    width: 100%;
+    min-height: 120px;
+    padding: 14px 18px;
+    border: 2px solid #efefef;
+    border-radius: 14px;
+    background: #fafafa;
+    resize: vertical;
+    font-size: 15px;
+    font-family: inherit;
+    transition: 0.2s;
+}
+
+.editar-form textarea:focus {
+    border-color: #e60023;
+    background: #fff;
+    outline: none;
+}
\ No newline at end of file

templates/cadastro.html

@@ -3,23 +3,49 @@
 
 <head>
     <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="stylesheet" href="/static/style.css" />
-  <title>Cadastro</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="/static/style.css">
+    <title>Cadastro de Receita</title>
 </head>
 
-<body>
-  <div>
-    <form action="/cadastro" method="POST">
-      <input id="nome" name="nome" type="text" placeholder="Nome da Receita" required />
-      <input id="porcoes" name="porcoes" type="text" placeholder="Porcões"><br>
-      <input type="text" name="tempo" id="tempo" placeholder="Tempo de Preparo"><br>
-      <input type="text" nome="descricao" id="descricao" placeholder="Descrição da Receita"><br>
-      <input type="text" nome="ingredientes" id="ingredientes" placeholder="Ingredientes"><br>
-      <input type="text" nome="preparo" id="preparo" placeholder="Preparo da Receita"><br>
-      <button type="reset">Limpar</button>
-      <button type="submit">Salvar</button>
+<body class="editar-page">
+
+    <div class="editar-container">
+
+        <form class="editar-form" action="/cadastro" method="POST">
+
+            <h1>Nova Receita</h1>
+
+            <label for="nome">Nome da Receita</label>
+            <input id="nome" name="nome" type="text" placeholder="Ex: Lasanha" required>
+
+            <label for="porcoes">Porções</label>
+            <input id="porcoes" name="porcoes" type="text" placeholder="Ex: 6 porções">
+
+            <label for="tempo">Tempo de preparo</label>
+            <input id="tempo" name="tempo" type="text" placeholder="Ex: 45 minutos">
+
+            <label for="descricao">Descrição</label>
+            <input id="descricao" name="descricao" type="text" placeholder="Breve descrição da receita">
+
+            <label for="ingredientes">Ingredientes</label>
+            <input id="ingredientes" name="ingredientes" type="text" placeholder="Liste os ingredientes">
+
+            <label for="preparo">Modo de preparo</label>
+            <input id="preparo" name="preparo" type="text" placeholder="Descreva o preparo">
+
+            <div class="editar-botoes">
+                <button class="btn-secundario" type="reset">
+                    Limpar
+                </button>
+
+                <button class="btn-principal" type="submit">
+                    Salvar
+                </button>
+            </div>
+
         </form>
+
     </div>
 </body>
 

templates/editar.html

@@ -8,16 +8,42 @@
     <title>Editar Receita</title>
 </head>
 
-<body>
-    <div>
-        <form action="/editar/{{ receita.id }}" method="POST">
+<body class="editar-page">
+
+    <div class="editar-container">
+        <form class="editar-form" action="/editar/{{ receita.id }}" method="POST">
+
+            <h1>Editar Receita</h1>
+
             <label for="nome">Nome da Receita</label>
-            <input id="nome" name="nome" type="text" value="{{ receita.nome }}" required>
-            <button type="reset">Limpar</button>
-            <button type="submit">Salvar</button>
-            <button type="button" onclick="location.href='/excluir/{{ receita.id }}'">Excluir</button>
+            <input
+                id="nome"
+                name="nome"
+                type="text"
+                value="{{ receita.nome }}"
+                required
+            >
+
+            <div class="editar-botoes">
+                <button class="btn-secundario" type="reset">
+                    Limpar
+                </button>
+
+                <button class="btn-principal" type="submit">
+                    Salvar
+                </button>
+
+                <button
+                    class="btn-excluir"
+                    type="button"
+                    onclick="location.href='/excluir/{{ receita.id }}'">
+                    Excluir
+                </button>
+            </div>
+
         </form>
     </div>
+
 </body>
 
 </html>
\ No newline at end of file