Skip to content

D
Dishly
Commit c21bc22d by Natã Frederico Sangalletti
Options

Feed

parent cf6e9737
Showing with 375 additions and 21 deletions
templates/index.html
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/static/style.css" />
<title>Dishly</title>
</head>
<title>Dishly — Feed</title>
<style>
/* ── Reset & Base ── */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: "Segoe UI", system-ui, sans-serif;
background-color: #f9f9f9;
color: #111;
}
/* Acessibilidade de foco geral */
:focus-visible {
outline: 2px solid #e60023;
outline-offset: 2px;
}
/* ── Header ── */
.header {
position: sticky;
top: 0;
z-index: 100;
background: #fff;
border-bottom: 1px solid #e8e8e8;
padding: 12px 24px;
display: flex;
align-items: center;
gap: 16px;
}
.header__logo {
font-size: 22px;
font-weight: 700;
color: #e60023;
text-decoration: none;
flex-shrink: 0;
}
.header__search {
flex: 1;
display: flex;
align-items: center;
background: #efefef;
border-radius: 24px;
padding: 0 16px;
gap: 8px;
max-width: 600px;
}
.header__search svg {
flex-shrink: 0;
color: #767676;
}
.header__search input {
border: none;
background: transparent;
outline: none;
font-size: 15px;
width: 100%;
padding: 10px 0;
color: #111;
}
.header__search input::placeholder {
color: #767676;
}
.header__search-btn {
display: none; /* busca acontece inline */
}
/* ── Categorias (Nav) ── */
.nav {
background: #fff;
padding: 8px 24px 12px;
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
border-bottom: 1px solid #e8e8e8;
}
.nav::-webkit-scrollbar {
display: none;
}
.nav a {
flex-shrink: 0;
text-decoration: none;
font-size: 14px;
font-weight: 600;
padding: 8px 16px;
border-radius: 20px;
background: #efefef;
color: #111;
transition:
background 0.2s ease,
color 0.2s ease;
}
.nav a:hover {
background: #e60023;
color: #fff;
}
.nav a.active {
background: #111;
color: #fff;
}
/* ── Feed (grid masonry) ── */
.feed {
padding: 20px 16px 80px;
columns: 5 180px; /* cria a grade tipo Pinterest */
column-gap: 12px;
}
/* ── Cartão ── */
.card {
break-inside: avoid;
margin-bottom: 12px;
border-radius: 16px;
overflow: hidden;
background: #fff;
cursor: pointer;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
position: relative;
}
.card:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Placeholder de imagem com altura aleatória */
.card__img {
width: 100%;
background: #e0e0e0;
display: flex;
align-items: center;
justify-content: center;
}
.card:nth-child(3n + 1) .card__img {
height: 200px;
}
.card:nth-child(3n + 2) .card__img {
height: 280px;
}
.card:nth-child(3n) .card__img {
height: 240px;
}
.card__img svg {
opacity: 0.35;
}
/* overlay de ações aparece no hover */
.card__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 16px;
background: rgba(0, 0, 0, 0.2); /* Leve escurecimento opcional */
opacity: 0;
transition: opacity 0.2s ease;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 12px;
}
.card:hover .card__overlay,
.card:focus-within .card__overlay {
opacity: 1;
}
.card__overlay-top {
display: flex;
justify-content: flex-end;
}
.btn-salvar {
background: #e60023;
color: #fff;
border: none;
border-radius: 20px;
padding: 8px 16px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s ease;
}
<body>
<header>
<h1>Seja Bem-vindo ao Dishly</h1>
.btn-salvar:hover {
background: #ad081b;
}
.card__overlay-bottom {
display: flex;
gap: 6px;
align-items: center;
}
.btn-editar {
text-decoration: none;
background: rgba(255, 255, 255, 0.9);
color: #111;
border-radius: 20px;
padding: 6px 14px;
font-size: 13px;
font-weight: 600;
margin-left: auto; /* Melhor que 10rem fixo, adapta a qualquer largura */
transition: background 0.2s ease;
}
.btn-editar:hover {
background: #fff;
}
/* Informações do cartão */
.card__info {
padding: 10px 12px 14px;
}
.card__title {
font-size: 14px;
font-weight: 600;
color: #111;
line-height: 1.4;
}
/* ── FAB (botão +) ── */
.fab {
position: fixed;
bottom: 60px;
right: 24px;
width: 56px;
height: 56px;
border-radius: 50%;
background: #e60023;
color: white;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
cursor: pointer;
border: none;
z-index: 100;
transition:
background 0.2s ease,
transform 0.2s ease;
}
.fab:hover {
background: #ad081b;
transform: scale(1.08);
}
/* ── Footer ── */
footer {
background: #fff;
border-top: 1px solid #e8e8e8;
text-align: center;
padding: 16px;
font-size: 13px;
color: #767676;
position: fixed;
bottom: 0;
width: 100%;
z-index: 10; /* Garante que o footer fique acima do feed */
}
/* ── Responsividade ── */
@media (max-width: 600px) {
.feed {
columns: 2 140px;
}
.header__logo {
font-size: 18px;
}
.fab {
bottom: 70px; /* Ajuste fino para mobile caso o footer seja maior */
right: 16px;
}
}
</style>
</head>
<body>
<!-- Cabeçalho com logo e busca -->
<header class="header">
<a class="header__logo" href="/">Dishly</a>
<div class="header__search">
<!-- ícone de lupa -->
<svg
width="18"
height="18"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="11" cy="11" r="8" />
<line x1="21" y1="21" x2="16.65" y2="16.65" />
</svg>
<input type="text" placeholder="Buscar receitas..." />
</div>
</header>
<div>
<a href="/cadastro">Cadastrar Receita</a>
<h1>Lista de Receitas</h1>
<ul>
<!-- Navegação de categorias -->
<nav class="nav">
<a href="" class="active">Todos</a>
<a href="">Doces</a>
<a href="">Salgados</a>
<a href="">Bebidas</a>
</nav>
<!-- Grade de receitas estilo Pinterest -->
<main class="feed">
{% for receita in receitas %}
<li>
{{ receita.nome }}
<a href="/editar/{{ receita.id }}">Editar</a>
</li>
{% endfor %}
</ul>
<article class="card">
<!-- Placeholder de imagem; substitua por <img src="{{ receita.imagem }}"> quando tiver imagens -->
<div class="card__img">
<svg
width="40"
height="40"
viewBox="0 0 24 24"
fill="none"
stroke="#999"
stroke-width="1.5"
stroke-linecap="round"
stroke-linejoin="round"
>
<rect x="3" y="3" width="18" height="18" rx="2" />
<circle cx="8.5" cy="8.5" r="1.5" />
<polyline points="21 15 16 10 5 21" />
</svg>
</div>
<!-- Overlay com ações que aparecem no hover -->
<div class="card__overlay">
<div class="card__overlay-top">
<button class="btn-salvar">Salvar</button>
</div>
<div class="card__overlay-bottom">
<a class="btn-editar" href="/editar/{{ receita.id }}">Editar</a>
</div>
</div>
<!-- Nome da receita -->
<div class="card__info">
<p class="card__title">{{ receita.nome }}</p>
</div>
</article>
{% endfor %}
</main>
<!-- Botão flutuante para cadastrar nova receita -->
<a class="fab" href="/cadastro" title="Nova receita">+</a>
<footer>
<p>&copy; 2023 Dishly. Todos os direitos reservados.</p>
<p>&copy; 2026 Dishly. Todos os direitos reservados.</p>
</footer>
</body>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment