https://github.com/ahmed-maher77/slideauth___sliding-authentication-system
A sleek, responsive authentication system featuring animated transitions, real-time form validation, and secure session management—all built using pure HTML, CSS, and JavaScript.
https://github.com/ahmed-maher77/slideauth___sliding-authentication-system
authentication-system fontawesome form-validation front-end-development git github-pages html-css-javascript login-page signup-form web-development
Last synced: 10 months ago
JSON representation
A sleek, responsive authentication system featuring animated transitions, real-time form validation, and secure session management—all built using pure HTML, CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/ahmed-maher77/slideauth___sliding-authentication-system
- Owner: Ahmed-Maher77
- Created: 2025-07-27T18:13:00.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-27T20:50:51.000Z (11 months ago)
- Last Synced: 2025-07-27T20:54:29.026Z (11 months ago)
- Topics: authentication-system, fontawesome, form-validation, front-end-development, git, github-pages, html-css-javascript, login-page, signup-form, web-development
- Language: HTML
- Homepage: https://ahmed-maher77.github.io/SlideAuth___Sliding-Authentication-System/
- Size: 22.5 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🔐 SlideAuth - Sliding Authentication System
A sleek, responsive authentication system featuring animated transitions between Sign In and Sign Up forms. Built entirely with HTML, CSS, and JavaScript, this app includes real-time validation, localStorage-based session management, secure form handling, and beautiful UI/UX elements.
---
## 💻 Used Technologies
- **HTML5** – Semantic structure and form elements
- **CSS3** – Flexbox, Grid, Animations, Media Queries, CSS Variables
- **JavaScript (ES6+)** – DOM manipulation, event handling, localStorage API, regex validation
- **FontAwesome** – Icon library
- **Git** – Version control
- **github-pages** - hosting the website
---
## 🌐 Live Preview
**🔗 View the Demo:** [https://ahmed-maher77.github.io/SlideAuth___Sliding-Authentication-System/](https://ahmed-maher77.github.io/SlideAuth___Sliding-Authentication-System/)
---
## ✨ Key Features
- 🔐 **Authentication System**
- User registration & login with real-time validation
- Session persistence with localStorage
- Auto-redirect based on login state
- ✅ **Form Validation**
- Regex-based input validation (username, email, password)
- Duplicate check and real-time feedback
- 🎨 **Interactive UI/UX**
- Smooth sliding transitions between forms
- Responsive design with modern color schemes
- Toast notifications & loading states
- 👤 **User Dashboard**
- Personalized greeting and user avatar
- Logout and session management
- 🔗 **Social & Developer Links**
- LinkedIn, GitHub, Portfolio integrations
- 🔒 **Security Features**
- Input sanitization and error handling
- Protected routes and redirects
---
## 🎥 Watch the Demo on LinkedIn
**🔗 Watch on LinkedIn:** []()
---
## 👀 Website Preview
---
## Test Accounts
You can use these pre-configured accounts to test the login functionality:
| Username | Email | Password |
|----------|-------|----------|
| john_doe | john@example.com | Password123 |
| jane_smith | jane@example.com | Secure456 |
| admin | admin@example.com | Admin123 |
| demo | demo@example.com | Demo123 |
---
## 📥 Installation Instructions for Local Setup
```bash
# 1. Clone the Repository
git clone https://github.com/Ahmed-Maher77/SlideAuth___Sliding-Authentication-System.git
# 2. Navigate to the Project Directory
cd SlideAuth___Sliding-Authentication-System
# 3. Open index.html in your browser
```
✅ No build tools or dependencies required. Just open the HTML file!
---
## Browser Compatibility
- Chrome (recommended)
- Firefox
- Safari
- Edge
---
## Security Notes
⚠️ **This is a demo application** - In a production environment:
- Passwords should be hashed
- Use HTTPS
- Implement proper session management
- Add CSRF protection
- Use a real database instead of localStorage
---
## 📬 Contact & Contribution
Feel free to reach out, collaborate, or fork the project!
- 🧑💻 **Portfolio:** https://ahmedmaher-portfolio.vercel.app/
- 🔗 **LinkedIn:** https://www.linkedin.com/in/ahmed-maher-algohary
- 📧 **Email:** ahmedmaher.dev1@gmail.com
> Contributions, feedback, and suggestions are welcome!
---
## ⭐ Support
If you found this project helpful or inspiring, please consider giving it a ⭐. Your support helps me grow and share more open-source projects like this!