Skip to content

README.md

Latest commit

 

History

History
69 lines (44 loc) · 2.84 KB

README.md

File metadata and controls

69 lines (44 loc) · 2.84 KB
Raw

🌐 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).

interface back interface

📽️ 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.