Simple Login Dashboard Application

A responsive web application featuring a complete authentication system with login, signup, and dashboard pages. Built with vanilla HTML, CSS, and JavaScript using hardcoded credentials for demonstration purposes.

🚀 Live Demo

Open login.html in your browser to try the application immediately!

✨ Features

• 🔐 Secure Authentication - Login system with hardcoded credentials
• 📝 User Registration - Signup functionality with validation
• 📊 Interactive Dashboard - User profile and statistics display
• 🎨 Modern UI/UX - Responsive design with smooth animations
• 💾 Session Management - Automatic login/logout with localStorage
• ⚡ Client-Side Only - No server setup required
• 📱 Mobile Responsive - Works on all device sizes

Files Created

• login.html - Login page with username/password form
• signup.html - Registration page for new users
• dashboard.html - Protected dashboard page with user information
• styles.css - Modern CSS styling for all pages
• script.js - JavaScript for authentication and page functionality

Features

Login Page

• Username and password authentication
• Hardcoded user credentials for testing
• Form validation
• Error messages for invalid credentials
• Automatic redirect to dashboard on successful login
• Link to signup page

Signup Page

• User registration form with validation
• Email validation
• Password confirmation
• Duplicate username/email checking
• Success messages
• Link to login page

Dashboard Page

• Protected page (requires login)
• Welcome message with username
• User profile information display
• Login statistics
• Quick action buttons
• Logout functionality
• Session management

Hardcoded Credentials

You can use any of these credentials to login:

1. Username: admin | Password: admin123
2. Username: user | Password: user123
3. Username: demo | Password: demo123

How to Use

1. Open login.html in your web browser
2. Use one of the hardcoded credentials above to login
3. Or click "Sign up here" to create a new account
4. After successful login, you'll be redirected to the dashboard
5. Use the logout button to return to the login page

Security Features

• Form validation on both client-side
• Session management using localStorage
• Automatic session timeout (1 hour)
• Password confirmation on signup
• Duplicate user checking

Browser Compatibility

• Works in all modern browsers
• Responsive design for mobile devices
• Uses localStorage for session management

🛠️ Getting Started

Prerequisites

• Any modern web browser (Chrome, Firefox, Safari, Edge)
• No additional software or server setup required!

Installation

1. Clone the repository:

   git clone https://github.com/yourusername/simple-login-dashboard.git

2. Navigate to the project directory:

   cd simple-login-dashboard

3. Open login.html in your web browser

Usage

1. Start with the login page (login.html)
2. Use hardcoded credentials or create a new account
3. Explore the dashboard features
4. Test the logout functionality

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to check the issues page.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

This project is open source and available under the MIT License.

📞 Contact

Your Name - [email protected]

Project Link: https://github.com/yourusername/simple-login-dashboard

📝 Notes

• This is a client-side only application for demonstration purposes
• User data is stored in browser's localStorage
• Hardcoded credentials are defined in script.js
• Session expires after 1 hour of inactivity

⭐ Show your support

Give a ⭐️ if this project helped you!