Berry Bank: Criando um Banco Digital Gamificado para seus Filhos com Gentoo, Flask e Tailscale
Berry é a moeda do anime One Piece, um anime que meus filhos gostam. Aproveitando isso, resolvi criar um "banco virtual" para gerenciar os Berries deles.
Parte 3: O Frontend (estilo One Piece)
Para o visual não ficar muito chato usei CSS aproveitando os cartazes de "Procurado" dos personagens que eles mais gostam.
Imagens
Você precisará de duas imagens (no meu caso usei luffy.png e zoro.png) salvas na pasta~/berry_bank/static/.
A Página Principal (templates/index.html)
Aqui o HTML da página inicial:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banco do Berry ($B)</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
body {
background-color: #e0d0b0;
font-family: 'Special Elite', serif;
text-align: center; margin: 0; padding: 20px;
}
h1 { color: #4a3728; font-size: 3em; margin-bottom: 30px; }
.container { display: flex; justify-content: center; flex-wrap: wrap; gap: 40px; }
/* O Cartaz de Procurado */
.wanted-poster {
background-color: #f4e4bc;
border: 2px solid #5d4037;
box-shadow: 10px 10px 20px rgba(0,0,0,0.4);
width: 350px; padding: 20px;
transition: transform 0.3s;
}
.wanted-poster:hover { transform: scale(1.02); }
.wanted-title { font-size: 3.5em; font-weight: bold; color: #4a3728; margin: 0; line-height: 1; }
.photo-frame {
border: 4px solid #4a3728; margin: 15px 0; height: 350px; overflow: hidden; background: #333;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; }
.name-area { font-size: 2em; font-weight: bold; color: #4a3728; border-bottom: 3px solid #4a3728; margin-bottom: 10px; }
.berry-amount { font-size: 2.5em; color: #4a3728; }
.marine-logo { font-size: 1.2em; font-weight: bold; opacity: 0.7; margin-top: 20px; }
footer { margin-top: 50px; }
a { text-decoration: none; color: #5d4037; border: 1px solid #5d4037; padding: 5px 10px; border-radius: 5px; }
</style>
</head>
<body>
<h1>🏴☠️ BERRY BANK 🏴☠️</h1>
<div class="container">
{% for kid in kids %}
<div class="wanted-poster">
<p class="wanted-title">WANTED</p>
<div class="photo-frame">
{% if 'Filho2' in kid['name'] %}
<img src="{{ url_for('static', filename='luffy.png') }}">
{% elif 'Filho1' in kid['name'] %}
<img src="{{ url_for('static', filename='zoro.png') }}">
{% endif %}
</div>
<div class="name-area">{{ kid['name'] }}</div>
<div class="berry-amount">
$B {{ "{:,}".format(kid['balance']).replace(',', '.') }}
</div>
<div class="marine-logo">M A R I N E</div>
</div>
{% endfor %}
</div>
<footer><a href="/login">Área do Capitão</a></footer>
</body>
</html>