Copilot & Tailwinds: o meu primeiro projeto para o celular

[Frank K Hosaka]

Foi em 1999 é que consegui o meu primeiro computador de bolso, o Palm.

O meu sonho era colocar o banco de dados nele, mas o máximo que eu consegui foi colocar uma cópia do banco de dados só para consulta, através do ListToGo e mais tarde o Handbase.

Em 2020, eu consegui conectar o Android ao Windows, graças ao WampServe, o PHP, o MySQL e o VS Code.

O problema é que a tela do celular é bem pequena se comparado ao notebook, logo não dá para mostrar tudo o que aparece no notebook no celular.

O balancete, por exemplo, tem cinco colunas. O celular só tem espaço para uma coluna, e mesmo assim não dá para mostrar tudo.

Para resolver isso, só o HTML é que pode resolver, e essa é uma linguagem que eu não sei mexer.

Em outubro de 2024, comecei a trabalhar com o Copilot, a Gemini recusou várias vezes de me ajudar, acho que ela não gosta de mim.

O código a seguir é praticamente 100% do Copilot, copiei e colei e fiz um pequeno ajuste na posição do rótulo "conta":

arquivo balanceteView.php
<?php include('menuView.php'); ?>
<style>
    .grid-container {
        display: grid;
        grid-template-columns: 260px 150px 150px 150px 125px; /* Colunas com largura fixa */
        width: 835px; /* Ajustando explicitamente o tamanho do grid */
        margin: 0 auto; /* Centralizando */
    }
    @media (max-width: 768px) {
        .grid-container {
            grid-template-columns: 200px 125px; /* Ajuste para 2 colunas */
            width: 100%; /* Largura cheia para mobile */
        }
        .grid-container > :nth-child(2),
        .grid-container > :nth-child(3),
        .grid-container > :nth-child(4) {
            display: none;
        }
        .truncate {
            max-width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
</style>
<div class="w-full max-w-[500px] mx-auto sm:w-[500px] text-center bg-gray-400 mb-4">Balancete</div>
<div class="bg-gray-100 flex flex-col items-center justify-center w-full mx-auto">
    <div class="container mx-auto">

        <div class="grid-container bg-gray-800 text-white">
            <div class="py-0 text-center truncate">Conta</div>
            <div class="py-0 text-center">Início</div>
            <div class="py-0 text-center">Débito</div>
            <div class="py-0 text-center">Crédito</div>
            <div class="py-0 text-center">Saldo</div>
        </div>
        <?php foreach($jMatriz as $conta): ?>
        <div class="grid-container bg-white">
            <div class="border px-4 py-0 text-left truncate"><?=$conta->conta?> <?=$conta->descricao?></div>
            <div class="border px-4 py-0 text-right"><?=dec($conta->inicio)?></div>
            <div class="border px-4 py-0 text-right"><?=dec($conta->debito)?></div>
            <div class="border px-4 py-0 text-right"><?=dec($conta->credito)?></div>
            <div class="border px-4 py-0 text-right"><?=dec($conta->saldo)?></div>
        </div>
        <?php endforeach; $paginaAnterior=$paginaAtual-1; $paginaAtual++; ?>
        <div class="flex justify-between w-full max-w-[835px] mt-4 mx-auto">
            <a href="?Balancete.inicio.<?=$paginaAnterior?>" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">Anterior</a>
            <a href="?Balancete.inicio.<?=$paginaAtual?>" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-2 rounded">Próximo</a>
        </div>
    </div>
</div>