Berry Bank: Criando um Banco Digital Gamificado para seus Filhos com Gentoo, Flask e Tailscale

xerxeslins

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.

[ Hits: 1.858 ]

Por: Xerxes em 15/02/2026

7 0

Denuncie Favoritos Indicar Impressora

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>

Página anterior Próxima página

Páginas do artigo

   1. Introdução
   2. O Backend: Python e Flask
   3. O Frontend (estilo One Piece)
   4. A Página Administrativa (templates/admin.html)
   5. A Página do Login (templates/login.html)
   6. Automatizando com Systemd e conclusão

Outros artigos deste autor

Entrevista com Knurt, o pires voador

Criando um painel de controle (Dashboard) para seu servidor com o Homepage

Instalação do Dspace no CentOS

DOOM mais fácil que atacar imp pelas costas

Samba no Arch Linux (para principiantes)

Leitura recomendada

Montando um pendrive no Linux

Criando um mirror do Conectiva para uma rede interna