Fully-Animated-Login-Page

This repository contains a modern and responsive login page with advanced features such as social login options, password strength indicator, loading spinner, and modals for success and error messages. The design is sleek, user-friendly, and provides a seamless user experience.

Features

  • Responsive Design: The login page is fully responsive and works on all device sizes.
  • Social Login Options: Users can log in using their Google, Facebook, GitHub, or LinkedIn accounts.
  • Password Strength Indicator: Provides real-time feedback on the strength of the password being entered.
  • Loading Spinner: A loading spinner is displayed while the form submission is processing.
  • Modals: Success and error messages are displayed in modals for better user feedback.
  • Show/Hide Password: Users can toggle the visibility of their password.
  • Accessibility: Enhanced with ARIA attributes and tooltips for better accessibility.

Technologies Used

  • HTML
  • CSS
  • JavaScript
  • Font Awesome for icons

Getting Started

Prerequisites

To run this project, you need a modern web browser.

Installation

  1. Clone the repository:

    git clone https://github.com/your-username/modern-login-page.git
  2. Navigate to the project directory:

    cd modern-login-page
  3. Open index.html in your browser to view the login page.

File Structure

modern-login-page/
├── index.html
├── style.css
├── script.js
└── README.md

- index.html: The main HTML file containing the structure of the login page.
- style.css: The CSS file for styling the login page.
- script.js: The JavaScript file containing the logic for form validation, password strength indicator, loading spinner, and models.
- README.md: This file.

## Usage
Sign Up: Fill in your name, email, and password to create a new account. The password strength indicator will provide feedback on the strength of your password. Upon successful registration, a success modal will be displayed.

Sign In: Enter your email and password to log in. You can also toggle the visibility of your password using the "Show/Hide Password" button. If there are any errors, they will be displayed in an error modal.

Social Login: Click on the social icons to log in using your Google, Facebook, GitHub, or LinkedIn accounts (functionality to be implemented based on your backend).

Follow and Star

If you find this project useful, please consider following and starring the repository on GitHub:

Follow: Click on the "Follow" button at the top right of the repository page. Star: Click on the "Star" button at the top right of the repository page. Your support is greatly appreciated!

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Acknowledgments

Font Awesome for the icons. Google Fonts for the Montserrat font. Enjoy using the modern and responsive login page! If you have any questions or feedback, feel free to reach out.