HTML no celular

[Frank K Hosaka]

Eu tenho um projeto chamado orçamento que estou desenvolvendo desde 1999, eu uso o código PHP e o código Laravel, ambos têm a mesma lógica e a mesma imagem, menos o formulário do login. O formulário do Laravel é capaz de preencher toda a tela do celular, no modo retrato, e isso eu não consegui no código PHP.

Você pode traduzir o código PHP em Laravel, o contrário é impossível. Por exemplo, o Laravel não deixa você submeter um formulário se não usar o recurso Blade @csrf, já o PHP não tem esse recurso.

A minha única saída foi tentar copiar o código HTML produzido pelo Laravel e copiar no PHP. Eu nunca imaginei que fosse possível ver o código fonte no navegador do celular, mas hoje o Copilot me deu a dica de modificar a barra de endereço de "https://frank.com" para "view-source:https://frank.com", e assim consegui ver o código HTML no celular. Selecionei tudo, copiei num bloco do Google Keep, e no notebook eu copiei o código para o Visual Studio, e assim consegui criar o código PHP que faz a mesma mágica que o Laravel:

arquivo loginView.php
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tailwindcss.com"></script>
<script>document.title="Login"</script>
<div class="min-h-screen flex flex-col sm:justify-center items-center pt-6 sm:pt-0 bg-gray-100">
    <div class="text-2xl">Projeto Classe</div>
    <div class="w-full sm:max-w-md mt-6 px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
        <form method="POST" action="?Login.menu">
            <div>
                <label class="block font-medium text-sm text-gray-700" for="email">
                    Email
                </label>
                <input  class="px-2 border rounded-md shadow-sm  mt-2 focus:outline-blue-700"
                        id="email" type="email" name="email" required="required" 
                        autofocus autocomplete="username">
            </div>
                <!-- Password -->
                <div class="mt-4">
                    <label class="block font-medium text-sm text-gray-700" for="password">
                        Senha
                    </label>
                    <input  class="px-2 border rounded-md shadow-sm block mt-1 
                        focus:outline-blue-700" 
                        id="password" type="password" name="password" required="required" 
                        autocomplete="current-password">
                </div>
                <button type="submit" class="px-2 mt-4 rounded-lg text-gray-500 font-semibold hover:bg-gray-200">
                    Entrar
                </button>
            </form>
        </div>
</div>

 

Editado 10 horas atrás por Frank K Hosaka