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: 120 ]

Por: Xerxes em 15/02/2026

1 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

Um pouco sobre otimização

A Origem dos Nomes

Instalação do Dspace no CentOS

O que fazer após instalar Linux Mint 15 (sim, há o que fazer!)

Gravando área de trabalho em MP4 e depois transformando o vídeo em GIF

Leitura recomendada

Transformando Windows em Linux

Por que a interface Unity é melhor que as interfaces do Windows 7 e MacOS X