Modern Login Page ()

🚀 Modern Login Page

This is a modern and responsive login page implementation with an intuitive user interface and rich interactive features.

🚀 Quick Start

Local Testing

1. Clone this repository:

git clone https://github.com/jerry3315765/MCP_test.git

2. Navigate to the project directory:

cd MCP_test

3. Open it in your browser:
   • Directly open login-page/index.html.
   • Or run it using a local server (e.g., Live Server).

✨ Features

• 🎨 Modern Design
  • Use gradient background colors.
  • Clear card - style layout.
  • Responsive design, supporting various device sizes.
• 🔒 Security Features
  • Instant password strength check (minimum 8 characters).
  • Password show/hide toggle.
  • Instant email format verification.
• ⚡ Interactive Experience
  • Floating label effect.
  • Instant form validation feedback.
  • "Remember me" option.
  • Login status feedback.

🔧 Technical Details

• Pure HTML5 / CSS3 / JavaScript.
• Use CSS variables for theme customization.
• Flexbox layout.
• Support for Google Noto Sans TC font.
• All interactive functions are implemented with native JavaScript.
• SVG icons.

💻 Usage Examples

Function Testing

1. Form Validation:
   • Try submitting an empty form and you'll receive a prompt.
   • Enter an invalid email format, and the input box will show a red prompt.
   • Enter a password with less than 8 characters, and you'll see a password strength prompt.
2. Interactive Features:
   • Click the eye icon on the right side of the password field to toggle password show/hide.
   • Check the "Remember me" option.
   • Click the "Forgot password?" and "Register now" links.
   • Observe the login status change when submitting the form.

Customizing the Theme

You can customize the theme by modifying the CSS variables in style.css:

:root {
    --primary-color: #4f46e5;    /* Primary color */
    --primary-hover: #4338ca;    /* Hover color */
    --text-color: #1f2937;       /* Text color */
    --text-light: #6b7280;       /* Secondary text color */
    --background: #ffffff;        /* Background color */
    --error: #ef4444;            /* Error prompt color */
    --success: #10b981;          /* Success prompt color */
}

⚠️ Important Note

• This is a front - end example and needs to be used with a back - end API in actual use.
• Password verification only checks the length, and more strict rules should be applied in actual applications.
• The "Forgot password" and "Register now" links need to be configured according to actual requirements.

📄 License

MIT License - Please check the LICENSE file for more information.