Project Overviewlink

Heyauth is a set of responsive authentication page templates based on Bootstrap 5, including login, registration, password recovery, email verification, two-step verification, lock screen, and other scenarios. Each scenario offers 3 visual variants, suitable for quickly implementing authentication modules in SaaS, web applications, or marketing pages.

Tech Stacklink

• Bootstrap 5.1.3
• Google Fonts (Nunito)
• Material Design Icons
• Remix Icon
• SCSS
• Static HTML/CSS/JS

Project Structurelink

Heyauth_v1.0/
├── Documentation/
│   ├── index.html          # Online documentation entry
│   ├── css/
│   └── ...
└── HTML/
    ├── signin.html         # Login page main template
    ├── signin-1.html       # Login page variant 1
    ├── signin-2.html       # Login page variant 2
    ├── signin-3.html       # Login page variant 3
    ├── signup.html         # Registration page
    ├── forgot-pass.html    # Forgot password
    ├── email-verification.html   # Email verification
    ├── two-step.html       # Two-step verification
    ├── lockscreen.html     # Lock screen
    ├── recover-pass.html   # Password recovery
    ├── sign-out.html       # Sign out confirmation
    ├── css/
    │   ├── style.css       # Theme main styles
    │   ├── bootstrap.min.css
    │   └── materialdesignicons.min.css
    ├── fonts/              # Icon fonts
    ├── js/
    │   └── app.js          # Password visibility toggle, two-step auto-focus
    └── scss/               # SCSS source files

Core File Descriptionlink

• HTML/css/style.css — Theme global styles, including color system, buttons, typography, etc.
• HTML/js/app.js — Interactive logic such as password plaintext toggle and verification code auto-jump
• HTML/signin.html — Login page main template
• HTML/signup.html — Registration page template
• HTML/forgot-pass.html — Forgot password page template
• HTML/two-step.html — Two-step verification page template

Quick Startlink

Open HTML/signin.html directly in a browser, or start any static file server (e.g., npx serve HTML) and access it.

Usage Suggestionslink

Each page type has three variants (-1, -2, -3). Choose the version that matches your brand colors and UI style. The template includes SCSS source files; it is recommended to modify the SCSS variable file to uniformly adjust the theme color.