🌐 Interactive Auth Flow: Modern Dual-Panel Interface

A premium, highly interactive authentication component featuring a seamless sliding transition between Login (Anmelden) and Registration (Sign Up). This project demonstrates advanced CSS transitions and a focus on intuitive User Experience (UX).

📽️ Project Overview

This interface is designed to maximize screen real estate and reduce friction. Instead of redirecting users to separate pages, it utilizes a "Sliding Overlay" technique to toggle between states, keeping the user contextually grounded.

Key Visuals

• Login State (interface back.jpg)
• Registration State (interface.jpg)

✨ Features

• Seamless State Switching: A smooth horizontal slide animation transitions the user between signing in and creating an account.
• Social Auth Ready: Integrated UI for OAuth providers including YouTube, Facebook, Twitter, and GitHub.
• Dual-Language Context: Integrated German ("Anmelden") and English ("Create Account") messaging, perfect for European/Global projects.
• Glassmorphism Effects: Subtle transparency and blur filters on the informational panels for a high-end feel.
• Responsive Architecture: The card-based layout is designed to remain centered and legible across all viewport sizes.

🛠️ Technical Stack

• HTML5: Semantic structure for accessibility.
• CSS3 (Advanced): Utilizing transform, transition, and z-index layering for the sliding panel logic.
• JavaScript (ES6+): Lightweight event listeners to trigger the active state transitions.
• Assets: Optimized background images with a global connectivity theme.

🚀 Getting Started

Prerequisites

Simply a modern web browser (Chrome, Firefox, Safari, or Edge).

Installation

1. Clone the repo

   git clone https://github.com/yourusername/modern-auth-interface.git

2. Open the project

   cd modern-auth-interface
   open index.html

🧩 How It Works

The interface uses a "container-active" logic. When the user clicks the "Sign Up" or "Login" buttons on the overlay:

• A CSS class is toggled on the main container.
• The Overlay Container moves via translateX.
• The Form Panels change opacity and z-index to bring the relevant inputs to the front.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📞 Contact

If you have any questions or suggestions, feel free to open an issue or contact the maintainers.