<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Gerador de Assinatura de E-mail</title>

    <link rel="preconnect" href="https://fonts.googleapis.com">

    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

    <style>

        :root {

            --primary-color: #5A67D8; /* Um tom de roxo/azul */

            --secondary-color: #EBF4FF; /* Um tom de azul claro */

            --text-color: #2D3748; /* Tom de cinza escuro para o texto */

            --bg-color: #F7FAFC; /* Fundo claro e limpo */

            --border-color: #CBD5E0; /* Cor da borda suave */

        }

        body {

            font-family: 'Poppins', sans-serif;

            display: flex;

            flex-direction: column;

            align-items: center;

            justify-content: center;

            min-height: 100vh;

            margin: 0;

            background-color: var(--bg-color);

            padding: 2rem;

        }

        .container {

            background-color: white;

            padding: 3rem;

            border-radius: 12px;

            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

            text-align: center;

            max-width: 450px;

            width: 100%;

        }

        h1 {

            color: var(--primary-color);

            margin-bottom: 0.5rem;

            font-weight: 600;

        }

        p {

            color: var(--text-color);

            font-size: 1rem;

            margin-bottom: 2rem;

        }

        form {

            display: flex;

            flex-direction: column;

            gap: 1rem;

        }

        label {

            color: var(--text-color);

            font-weight: 600;

            text-align: left;

            margin-bottom: -0.5rem;

        }

        input[type="file"], select {

            padding: 12px 15px;

            border: 2px solid var(--border-color);

            border-radius: 8px;

            font-size: 1rem;

            color: var(--text-color);

            background-color: var(--secondary-color);

            transition: border-color 0.3s ease;

            cursor: pointer;

        }

        input[type="file"]:hover, select:hover {

            border-color: var(--primary-color);

        }

        input[type="file"]::file-selector-button {

            background-color: var(--primary-color);

            color: white;

            border: none;

            padding: 8px 16px;

            border-radius: 6px;

            cursor: pointer;

            transition: background-color 0.3s ease;

        }

        input[type="file"]::file-selector-button:hover {

            background-color: #4C51BF;

        }

        input[type="submit"] {

            background-color: var(--primary-color);

            color: white;

            padding: 15px 25px;

            border: none;

            border-radius: 8px;

            cursor: pointer;

            font-size: 1.1rem;

            font-weight: 600;

            transition: background-color 0.3s ease, transform 0.1s ease;

        }

        input[type="submit"]:hover {

            background-color: #4C51BF;

            transform: translateY(-2px);

        }

        input[type="submit"]:active {

            transform: translateY(0);

        }

    </style>

</head>

<body>

    <div class="container">

        <h1>Gerador de Assinatura</h1>

        <p>Selecione a empresa e envie sua imagem para criar uma assinatura</p>

        <form action="upload.php" method="post" enctype="multipart/form-data">

            <label for="empresa">Empresa:</label>

            <select name="empresa" id="empresa" required>

                <option value="yooper">Yooper</option>

                <option value="p4c">P4C</option>

                <option value="yoodash">Yoodash</option>

            </select>

            <label for="fileToUpload">Imagem:</label>

            <input type="file" name="fileToUpload" id="fileToUpload" required accept="image/png, image/jpeg">

            <input type="submit" value="Gerar Assinatura" name="submit">

        </form>

    </div>

</body>

</html>