Регистрация


<div class="max-w-md mx-auto px-4 py-12 md:py-20">
    <h1 class="text-2xl font-light tracking-wide text-center mb-8">Создать аккаунт</h1>

    

    <form method="post" class="space-y-5" hx-post="/users/register/" hx-target="#main-content">
        <input type="hidden" name="csrfmiddlewaretoken" value="f39gvThGVgQUvqKgkVj8ASanVVHtlsD1KUaVxXj4UiTYEjUwLfOF9M9JOq4bQSop">
        <div class="grid grid-cols-2 gap-4">
            <div>
                <input type="text" name="first_name" class="dotted-input w-full" placeholder="First Name" maxlength="30" required id="id_first_name">
                
            </div>
            <div>
                <input type="text" name="last_name" class="dotted-input w-full" placeholder="Last Name" maxlength="30" required id="id_last_name">
                
            </div>
        </div>
        <div>
            <input type="email" name="email" class="dotted-input w-full" placeholder="Email" maxlength="254" autofocus required id="id_email">
            
        </div>
        <div>
            <input type="password" name="password1" class="dotted-input w-full" placeholder="Password" required id="id_password1">
            
        </div>
        <div>
            <input type="password" name="password2" class="dotted-input w-full" placeholder="Confirm Password" required id="id_password2">
            
        </div>
        <div class="flex gap-4 pt-4">
            <button type="submit" class="flex-1 bg-black text-white py-3 text-xs uppercase tracking-wider hover:bg-gray-800 transition-colors">Зарегистрироваться</button>
            <a href="/users/login/" hx-get="/users/login/" hx-target="#main-content" hx-push-url="true" class="flex-1 border border-gray-300 text-center py-3 text-xs uppercase tracking-wider hover:border-black transition-colors">Войти</a>
        </div>
    </form>
</div>

<style>
    .dotted-input {
        width: 100%;
        border: none;
        border-bottom: 1px solid #e5e7eb;
        background: transparent;
        outline: none;
        font-size: 0.875rem;
        padding: 0.5rem 0;
        transition: border-color 0.2s;
    }
    .dotted-input:focus {
        border-bottom-color: #111;
    }
</style>