Page Templates

UltraViolet Pro includes a complete set of authentication page templates with three distinct design variants to suit different aesthetic preferences and use cases. These are pre-built HTML pages that you can use as-is or customize to fit your needs.

Overview

All authentication pages are available in:

Static HTML - Ready to use without any backend
Multiple Variants - Three design options (Basic, Square, Wallpaper)
Fully Responsive - Works on all devices
Theme Support - Both dark and light modes

Design Variants

1. Basic Variant

Basic Authentication Layout

The Basic variant provides a clean, minimal design perfect for professional applications and corporate environments.

Pages:

auth-login.html - Login page
auth-register.html - Registration page
auth-forgot-password.html - Password reset request
auth-reset-password.html - Password reset form
auth-lock-screen.html - Lock screen

Features:

Minimal visual elements
Focus on functionality
Professional appearance
Fast loading times
Clean, centered layout

Best for:

Corporate applications
Professional dashboards
Enterprise software
Minimalist designs

2. Square Variant

Square Authentication Layout

The Square variant features modern card-based layouts with rounded corners and subtle shadows.

Pages:

auth-login-square.html - Card-based login
auth-register-square.html - Card-based registration
auth-forgot-password-square.html - Card-based password reset
auth-reset-password-square.html - Card-based password reset form
auth-lock-screen-square.html - Card-based lock screen

Features:

Card-based design
Rounded corners
Subtle shadows and depth
Modern aesthetic
Enhanced visual hierarchy
Elegant borders

Best for:

Modern SaaS applications
Startups
Consumer-facing apps
Contemporary designs

3. Wallpaper Variant

Wallpaper Authentication Layout

The Wallpaper variant provides a full-screen experience with background images and overlay effects.

Pages:

auth-login-wallpaper.html - Full-screen login with background
auth-register-wallpaper.html - Full-screen registration with background
auth-forgot-password-wallpaper.html - Full-screen password reset with background
auth-reset-password-wallpaper.html - Full-screen password reset form with background
auth-lock-screen-wallpaper.html - Full-screen lock screen with background

Features:

Full-screen background images
Overlay effects
Immersive experience
Brand-focused design
High visual impact
Backdrop blur effects

Best for:

Creative agencies
Brand-heavy applications
Marketing sites
High-end products

Page Descriptions

Login Pages

All three variants include:

Email/username input - For user identification
Password input - With show/hide toggle
Remember me checkbox - Optional persistent login
Forgot password link - Link to password reset
Sign up link - Link to registration
Social login buttons - Placeholder for OAuth (optional)

File Locations:

exports/uv-vertical/
├── auth-login.html              # Basic login
├── auth-login-square.html       # Square login
└── auth-login-wallpaper.html    # Wallpaper login

Registration Pages

All three variants include:

Name/username input - User's full name
Email input - Email address
Password input - With strength indicator
Confirm password - Password verification
Terms checkbox - Terms of service agreement
Login link - Link back to login
Social signup buttons - Placeholder for OAuth (optional)

File Locations:

exports/uv-vertical/
├── auth-register.html              # Basic registration
├── auth-register-square.html       # Square registration
└── auth-register-wallpaper.html    # Wallpaper registration

Forgot Password Pages

All three variants include:

Email input - To receive reset link
Submit button - Request password reset
Back to login link - Return to login page
Instructions - Clear guidance for user

File Locations:

exports/uv-vertical/
├── auth-forgot-password.html              # Basic forgot password
├── auth-forgot-password-square.html       # Square forgot password
└── auth-forgot-password-wallpaper.html    # Wallpaper forgot password

Reset Password Pages

All three variants include:

New password input - With show/hide toggle
Confirm password input - Password verification
Submit button - Set new password
Back to login link - Return to login

File Locations:

exports/uv-vertical/
├── auth-reset-password.html              # Basic reset password
├── auth-reset-password-square.html       # Square reset password
└── auth-reset-password-wallpaper.html    # Wallpaper reset password

Lock Screen Page

Screen lock page when user is idle:

User avatar - Current user's profile picture
Username display - Shows who is locked out
Password input - Re-enter password to unlock
Unlock button - Submit password
Sign out link - Log out completely

File Locations:

exports/uv-vertical/
├── auth-lock-screen.html              # Basic lock screen
├── auth-lock-screen-square.html       # Square lock screen
└── auth-lock-screen-wallpaper.html    # Wallpaper lock screen

Using the Authentication Pages

For Static HTML Projects

Option 1: Use As-Is

Simply link to the auth pages from your application:

<!-- In your navigation or app -->
<a href="auth-login.html">Login</a>
<a href="auth-register.html">Sign Up</a>

Option 2: Integrate with Your Backend

Add form handlers to submit to your API:

<!-- In auth-login.html -->
<form id="loginForm" onsubmit="handleLogin(event)">
    <input type="email" name="email" class="form-control" required>
    <input type="password" name="password" class="form-control" required>
    <button type="submit" class="btn btn-primary">Login</button>
</form>

<script>
function handleLogin(event) {
    event.preventDefault();

    const formData = new FormData(event.target);
    const data = Object.fromEntries(formData);

    fetch('https://your-api.com/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // Save token
            localStorage.setItem('authToken', data.token);
            // Redirect to dashboard
            window.location.href = 'index.html';
        } else {
            // Show error
            alert(data.message);
        }
    })
    .catch(error => {
        console.error('Error:', error);
        alert('Login failed. Please try again.');
    });
}
</script>

Choosing a Variant

Set your preferred variant as the default by renaming:

# Make Square variant the default
cp auth-login-square.html auth-login.html
cp auth-register-square.html auth-register.html

Or use query parameters in the Laravel app:

/login?ui=square
/login?ui=wallpaper

Customization

Changing Colors

Edit the CSS or use CSS variables:

/* In your custom CSS */
.auth-card {
    background: var(--bg-card);
    border-color: var(--border-primary);
}

.btn-primary {
    background-color: #your-brand-color;
}

Changing Logo

Replace the logo in each page:

<!-- Find this in the auth pages -->
<img src="images/logo.png" alt="UltraViolet">

<!-- Replace with your logo -->
<img src="images/your-logo.png" alt="Your Brand">

Changing Background (Wallpaper Variant)

Replace the background image:

<!-- Find this in wallpaper variant -->
<div class="auth-bg" style="background-image: url('images/auth-bg.jpg')">

<!-- Replace with your image -->
<div class="auth-bg" style="background-image: url('images/your-bg.jpg')">

Adding Social Login Buttons

Uncomment or add social login buttons:

<!-- Add below the login form -->
<div class="text-center mt-4">
    <p class="text-muted">Or sign in with</p>
    <div class="d-flex gap-2 justify-content-center">
        <a href="auth-google.html" class="btn btn-outline-primary">
            <i class="fab fa-google"></i> Google
        </a>
        <a href="auth-facebook.html" class="btn btn-outline-primary">
            <i class="fab fa-facebook"></i> Facebook
        </a>
        <a href="auth-github.html" class="btn btn-outline-primary">
            <i class="fab fa-github"></i> GitHub
        </a>
    </div>
</div>

Customizing Form Fields

Add additional fields as needed:

<!-- Add phone number to registration -->
<div class="mb-3">
    <label for="phone" class="form-label">Phone Number</label>
    <input type="tel" class="form-control" id="phone" name="phone">
</div>

<!-- Add company name -->
<div class="mb-3">
    <label for="company" class="form-label">Company</label>
    <input type="text" class="form-control" id="company" name="company">
</div>

Form Validation

Client-Side Validation

Add HTML5 validation:

<input type="email" 
       class="form-control" 
       required 
       pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">

<input type="password" 
       class="form-control" 
       required 
       minlength="8">

JavaScript Validation

Add custom validation:

function validateLoginForm(formData) {
    const email = formData.get('email');
    const password = formData.get('password');

    // Email validation
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
        showError('Please enter a valid email address');
        return false;
    }

    // Password length
    if (password.length < 8) {
        showError('Password must be at least 8 characters');
        return false;
    }

    return true;
}

function showError(message) {
    const alert = document.createElement('div');
    alert.className = 'alert alert-danger';
    alert.textContent = message;
    document.querySelector('.auth-form').prepend(alert);

    setTimeout(() => alert.remove(), 3000);
}

Security Considerations

When using the static pages with your backend:

1. Use HTTPS

Always use HTTPS for authentication pages:

https://yourdomain.com/auth-login.html

2. Implement CSRF Protection

Add CSRF tokens to forms:

<input type="hidden" name="_token" value="{{ csrf_token }}">

3. Rate Limiting

Implement rate limiting on your backend to prevent brute force attacks.

4. Secure Password Requirements

Enforce strong passwords:

Minimum 8 characters
At least one uppercase letter
At least one number
At least one special character

5. Use Secure Cookies

Store auth tokens in httpOnly, secure cookies.

6. Implement 2FA (Optional)

Add two-factor authentication for enhanced security.

Accessibility

The authentication pages include:

Semantic HTML

Proper form labels
ARIA attributes
Logical tab order

Keyboard Navigation

All forms navigable by keyboard
Focus indicators
Tab order follows visual flow

Screen Reader Support

Descriptive labels
Error announcements
Status messages

Color Contrast

WCAG 2.1 AA compliant
Sufficient contrast ratios
Works in both light/dark modes

Browser Support

All authentication pages work on:

✅ Chrome (latest 2 versions)
✅ Firefox (latest 2 versions)
✅ Safari (latest 2 versions)
✅ Edge (latest 2 versions)
✅ Mobile browsers

Next Steps

For Static HTML Users

Static Setup Guide - Using the static files
Theming Guide - Modify styles and assets

For Laravel Users

Laravel Setup Guide - Full Laravel application
Laravel Authentication - Laravel authentication system

Everyone

Theming Guide - Customize colors and themes

Support

Need help with authentication pages?

Email: support@huement.com
Check the HTML file structure
Verify form action URLs
Test in multiple browsers

Documentation

Getting Started

Authentication

Livewire

Dashboard & Widgets

Applications

UI Components

Data Visualization

E-commerce

Job Board

Cryptocurrency

Advanced

Page Templates

Page Templates

Overview

Design Variants

1. Basic Variant

2. Square Variant

3. Wallpaper Variant

Page Descriptions

Login Pages

Registration Pages

Forgot Password Pages

Reset Password Pages

Lock Screen Page

Using the Authentication Pages

For Static HTML Projects

Option 1: Use As-Is

Option 2: Integrate with Your Backend

Choosing a Variant

Customization

Changing Colors

Changing Logo

Changing Background (Wallpaper Variant)

Adding Social Login Buttons

Customizing Form Fields

Form Validation

Client-Side Validation

JavaScript Validation

Security Considerations

1. Use HTTPS

2. Implement CSRF Protection

3. Rate Limiting

4. Secure Password Requirements

5. Use Secure Cookies

6. Implement 2FA (Optional)

Accessibility

Semantic HTML

Keyboard Navigation

Screen Reader Support

Color Contrast

Browser Support

Next Steps

For Static HTML Users

For Laravel Users

Everyone

Support