| | <!DOCTYPE html> |
| | <html lang="pt-BR"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Cadastro - Sistema TAI</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
| | <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
| | <script src="https://unpkg.com/feather-icons"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <style> |
| | .auth-bg { |
| | background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); |
| | } |
| | .auth-card { |
| | box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| | } |
| | </style> |
| | </head> |
| | <body class="auth-bg min-h-screen flex items-center"> |
| | <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 w-full"> |
| | <div class="flex justify-center"> |
| | <div class="w-full max-w-md" data-aos="fade-up"> |
| | <div class="bg-white rounded-lg auth-card overflow-hidden"> |
| | <div class="px-10 py-12"> |
| | <div class="text-center mb-8"> |
| | <a href="index.html" class="inline-flex items-center"> |
| | <i data-feather="book-open" class="h-8 w-8 text-indigo-600"></i> |
| | <span class="ml-2 text-xl font-bold text-gray-900">GEPTRI CAT</span> |
| | </a> |
| | <h2 class="mt-6 text-2xl font-extrabold text-gray-900"> |
| | Crie sua conta |
| | </h2> |
| | <p class="mt-2 text-sm text-gray-600"> |
| | Já tem uma conta? <a href="login.html" class="font-medium text-indigo-600 hover:text-indigo-500">Faça login</a> |
| | </p> |
| | </div> |
| | <form class="space-y-6" action="#" method="POST"> |
| | <div> |
| | <label for="full-name" class="block text-sm font-medium text-gray-700">Nome completo</label> |
| | <div class="mt-1 relative rounded-md shadow-sm"> |
| | <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| | <i data-feather="user" class="h-4 w-4 text-gray-400"></i> |
| | </div> |
| | <input id="full-name" name="full-name" type="text" autocomplete="name" required class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"> |
| | </div> |
| | </div> |
| | <div> |
| | <label for="email" class="block text-sm font-medium text-gray-700">Email</label> |
| | <div class="mt-1 relative rounded-md shadow-sm"> |
| | <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| | <i data-feather="mail" class="h-4 w-4 text-gray-400"></i> |
| | </div> |
| | <input id="email" name="email" type="email" autocomplete="email" required class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"> |
| | </div> |
| | </div> |
| | <div> |
| | <label for="password" class="block text-sm font-medium text-gray-700">Senha</label> |
| | <div class="mt-1 relative rounded-md shadow-sm"> |
| | <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| | <i data-feather="lock" class="h-4 w-4 text-gray-400"></i> |
| | </div> |
| | <input id="password" name="password" type="password" autocomplete="new-password" required class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"> |
| | </div> |
| | <p class="mt-2 text-xs text-gray-500"> |
| | A senha deve ter pelo menos 8 caracteres |
| | </p> |
| | </div> |
| | <div> |
| | <label for="confirm-password" class="block text-sm font-medium text-gray-700">Confirme sua senha</label> |
| | <div class="mt-1 relative rounded-md shadow-sm"> |
| | <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| | <i data-feather="lock" class="h-4 w-4 text-gray-400"></i> |
| | </div> |
| | <input id="confirm-password" name="confirm-password" type="password" autocomplete="new-password" required class="py-3 pl-10 block w-full border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500"> |
| | </div> |
| | </div> |
| | <div class="flex items-center"> |
| | <input id="terms" name="terms" type="checkbox" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded" required> |
| | <label for="terms" class="ml-2 block text-sm text-gray-700"> |
| | Eu concordo com os <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Termos de Serviço</a> e <a href="#" class="font-medium text-indigo-600 hover:text-indigo-500">Política de Privacidade</a> |
| | </label> |
| | </div> |
| | <div> |
| | <button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"> |
| | Criar conta |
| | </button> |
| | </div> |
| | </form> |
| | </div> |
| | <div class="px-10 py-5 bg-gray-50 border-t border-gray-200 text-center"> |
| | <p class="text-xs text-gray-500"> |
| | Sistema desenvolvido pela Universidade Federal de Santa Maria (UFSM) |
| | </p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| |
|
| | <script> |
| | AOS.init(); |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
| |
|
