87 lines
3.1 KiB
Markdown
87 lines
3.1 KiB
Markdown
|
||
# Login Page with Seamless Transitions ✨
|
||
|
||
A modern, visually appealing **Login Page** with a **dark theme**, **smooth transitions**, and **password validation** for a seamless user experience. This design is easy to integrate into any project and ensures that both login and signup forms are simple and intuitive.
|
||
|
||
## 🌟 Features
|
||
|
||
- **🎨 Dark Theme**: A stylish, dark background with light text that provides a modern and clean look.
|
||
- **🚀 Smooth Form Transitions**: Beautiful, fluid transitions between the login and signup forms for a pleasant user experience.
|
||
- **🔐 Password Validation**: Ensures the password and confirmation password match in the signup form to prevent errors.
|
||
- **📱 Responsive Design**: The layout adjusts smoothly across different screen sizes and devices.
|
||
|
||
## 🚀 Quick Start
|
||
|
||
1. **Clone or Download** the repository to your local machine.
|
||
|
||
```bash
|
||
git clone https://github.com/noahpombas-dev/loginpage.git
|
||
```
|
||
|
||
2. Open the `index.html` file in your browser to see the login page in action.
|
||
|
||
---
|
||
|
||
## 🧑💻 File Structure
|
||
|
||
```
|
||
/login
|
||
├── assets/
|
||
│ ├── css/
|
||
│ │ └── index.css # Custom styles for the page
|
||
│ ├── js/
|
||
│ │ ├── index.js # Handles form transitions
|
||
│ │ └── passwordconfirm.js # Password validation logic
|
||
│ └── bootstrap/
|
||
│ ├── bootstrap.min.css # Bootstrap styling
|
||
│ └── bootstrap.bundle.min.js # Bootstrap bundle
|
||
├── index.html # The main HTML file
|
||
```
|
||
|
||
### 📝 **`index.html`**
|
||
The HTML structure for the login and signup forms, including input fields and buttons. All the magic happens here!
|
||
|
||
### 🎨 **`assets/css/index.css`**
|
||
This file contains custom CSS for the page, which handles the dark theme, form styling, smooth transitions, and more.
|
||
|
||
### ⚙️ **`assets/js/index.js`**
|
||
Contains JavaScript code to handle the seamless transitions between the login and signup forms.
|
||
|
||
### 🔒 **`assets/js/passwordconfirm.js`**
|
||
Validates that the "Password" and "Confirm Password" fields match in the signup form. It shows an error if they don't.
|
||
|
||
---
|
||
|
||
## 💡 How to Customize
|
||
|
||
This login page is designed to be easy to modify! Here’s how you can make it your own:
|
||
|
||
- **Change Colors**: Modify the `index.css` file to update the background, text, and button colors to fit your brand.
|
||
- **Fonts**: Update the font family in `index.css` for a unique style.
|
||
- **Add More Fields**: Easily extend the forms to include extra fields like phone numbers or address inputs.
|
||
|
||
---
|
||
|
||
## 💬 Live Demo
|
||
|
||
You can see the page in action! [Click here for the live demo](https://login.noahpombas.ch)
|
||
|
||
---
|
||
|
||
## 🛠️ Dependencies
|
||
|
||
This project relies on a few core dependencies:
|
||
|
||
- **[Bootstrap](https://getbootstrap.com/)**: For the responsive layout and styling. It's lightweight and easy to use!
|
||
- **Vanilla JavaScript**: To handle form transitions and password validation.
|
||
|
||
---
|
||
|
||
## 🎯 License
|
||
|
||
This project is open source and free to use! Feel free to fork it, modify it, and contribute.
|
||
|
||
---
|
||
|
||
Made with ❤️ by Noah
|