Secure Reset | Luit Academy


<style>
    /* 1. Root Application Wrapper */
    .reset-page-wrapper {
        min-height: calc(100vh - 140px); /* Adjusts for your header/footer height */
        display: flex;
        background: #ffffff;
        margin: 0;
        padding: 0;
        font-family: 'Inter', -apple-system, sans-serif;
        overflow: hidden; /* Keeps it sharp and contained */
    }

    /* 2. Left Side: Branding (The Portal Experience) */
    .brand-section {
        flex: 1.2;
        background: linear-gradient(145deg, #003366 0%, #001a33 100%);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: white;
        padding: 4rem;
    }

    /* Decorative Grid Pattern */
    .brand-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
        background-size: 30px 30px;
        opacity: 0.4;
    }

    .brand-logo-large {
        width: 130px;
        z-index: 2;
        margin-bottom: 2rem;
        /* Updated: Lower brightness/invert to ensure logo visibility */
        filter: brightness(1.2); 
        transition: transform 0.4s ease;
    }

    .brand-section h1 {
        z-index: 2;
        font-size: 3.2rem;
        font-weight: 800;
        letter-spacing: -2px;
        margin: 0;
    }

    .brand-tagline {
        z-index: 2;
        font-size: 1.15rem;
        opacity: 0.8;
        font-weight: 300;
        margin-top: 10px;
    }

    /* 3. Right Side: The Functional Form */
    .form-section {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 3rem;
        background: #ffffff;
    }

    .form-container-full {
        width: 100%;
        max-width: 400px;
    }

    .brand-title-dark {
        color: #003366;
        font-weight: 700;
        font-size: 2.2rem;
        letter-spacing: -1px;
    }

    /* UI Inputs */
    .input-group-text {
        background: #f8f9fa;
        border: 1.5px solid #dee2e6;
        border-right: none;
        color: #003366;
        border-radius: 12px 0 0 12px;
    }

    .form-control {
        border: 1.5px solid #dee2e6;
        border-left: none;
        border-radius: 0 12px 12px 0;
        padding: 0.85rem 1.2rem;
        font-size: 1rem;
    }

    .form-control:focus {
        border-color: #003366;
        box-shadow: none;
        background-color: #fff;
    }

    /* Action Button */
    .btn-luit-action {
        background: #003366;
        color: white;
        border: none;
        border-radius: 12px;
        padding: 1.1rem;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
        font-size: 0.9rem;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .btn-luit-action:hover {
        background: #b89220; /* Brand Gold */
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(184, 146, 32, 0.2);
    }

    .footer-link {
        color: #6c757d;
        text-decoration: none;
        font-weight: 600;
        transition: all 0.2s;
    }

    .footer-link:hover {
        color: #003366;
        padding-left: 5px;
    }

    .divider {
        height: 1px;
        background: linear-gradient(to right, transparent, #dee2e6, transparent);
        margin: 2.5rem 0;
    }

    /* Mobile Fluidity */
    @media (max-width: 991px) {
        .brand-section { display: none; }
        .reset-page-wrapper { min-height: calc(100vh - 80px); }
        .form-section { background: #ffffff; padding: 2rem; }
    }
</style>

<div class="reset-page-wrapper">
    <div class="brand-section">
        <img src="/static/images/logo.1.jpg" class="brand-logo-large animate__animated animate__zoomIn" alt="Luit Academy">
        <h1 class="animate__animated animate__fadeInUp">LUIT ACADEMY</h1>
        <p class="brand-tagline animate__animated animate__fadeInUp animate__delay-1s">Administrative Identity & Access Management</p>
    </div>

    <div class="form-section">
        <div class="form-container-full animate__animated animate__fadeIn">
            
            <div class="mb-5">
                <h2 class="brand-title-dark mb-1">Reset Password</h2>
                <p class="text-muted">Enter your account details to verify your identity and receive a recovery link.</p>
            </div>

            

            <form method="POST" action="/forgot-password/" id="resetForm" class="mt-2">
                <input type="hidden" name="csrfmiddlewaretoken" value="OR8TBEtVn1q2w3chSBIL8wTjslK8rtBQah8eUucvLCLil71d3BCvuxAd5InGiOEg">
                <div class="mb-4">
                    <label class="form-label small fw-bold text-uppercase text-secondary">Username or Email Address</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-user-check"></i></span>
                        <input type="text" name="identity" class="form-control" 
                               placeholder="e.g. admin_luit" required>
                    </div>
                </div>

                <button type="submit" class="btn btn-luit-action w-100 shadow-sm">
                    Generate Reset Link
                </button>
            </form>

            <div class="text-center mt-5">
                <a href="/login-admin/" class="footer-link small">
                    <i class="fas fa-arrow-left me-2"></i>Back to Portal Login
                </a>

                <div class="divider"></div>

                <div>
                    <p class="text-muted small mb-1">Institutional Domain</p>
                    <a href="https://luitacademy.com" target="_blank" class="text-decoration-none fw-bold" style="color: #b89220; font-size: 0.95rem;">
                        luitacademy.com <i class="fas fa-external-link-alt ms-1" style="font-size: 0.75rem;"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    document.getElementById('resetForm').onsubmit = function() {
        const btn = this.querySelector('button');
        if (btn.classList.contains('disabled')) return false;
        
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span> Verifying Identity...';
        btn.classList.add('disabled');
        btn.style.opacity = '0.85';
    };
</script>