Modern Login Page ()

🚀 现代化登入页面

这是一个现代化的、响应式的登入页面实现，具有直观的用户界面和丰富的互动功能，能为用户带来良好的登录体验。

🚀 快速开始

若要在本地测试该登入页面，可按以下步骤操作：

1. 克隆此倉庫：

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

2. 進入項目目錄：

cd MCP_test

3. 在瀏覽器中打開：
   • 直接打開 login-page/index.html
   • 或使用本地服務器（如 Live Server）運行

✨ 主要特性

现代化设计

• 🎨 使用漸變背景色，让页面更具视觉吸引力。
• 🃏 采用清晰的卡片式布局，提升信息展示的清晰度。
• 📱 响应式设计，支援各種設備尺寸，无论在何种设备上都能完美显示。

安全性功能

• 🔒 密码強度即時檢查（最少8個字符），确保用户密码的安全性。
• 👁️ 密碼顯示/隱藏切換，方便用户确认输入的密码。
• ✉️ 電子郵件格式即時驗證，避免用户输入错误的邮箱地址。

交互體驗

• 🏷️ 浮動標籤效果，增强用户与表单的交互感。
• 📋 表單驗證即時反饋，让用户及时了解输入是否正确。
• 💾 記住我選項，方便用户下次快速登录。
• 📈 登入狀態反饋，让用户清楚知道登录结果。

🔧 技术细节

• 💻 纯 HTML5 / CSS3 / JavaScript 实现，无需依赖其他框架。
• 🎨 使用 CSS 變量實現主題定制，方便用户根据自己的喜好进行个性化设置。
• 📐 Flexbox 布局，使页面元素的排列更加灵活。
• ✍️ Google Noto Sans TC 字體支援，提供良好的文字显示效果。
• 🚀 原生 JavaScript 實現所有互動功能，保证页面的性能和兼容性。
• 📌 SVG 圖標，使页面图标更加清晰和美观。

💻 使用示例

功能測試

表單驗證

• 🔍 嘗試提交空表單，會收到提示，提醒用户填写必要信息。
• 🚫 輸入無效的電子郵件格式，輸入框會顯示紅色提示，让用户知道邮箱格式有误。
• 🔒 輸入少於8個字符的密碼，將看到密碼強度提示，帮助用户设置更安全的密码。

交互功能

• 👁️ 點擊密碼欄位右側的眼睛圖標可切換密碼顯示/隱藏，方便用户确认密码。
• 💾 勾選"記住我"選項，下次登录时无需再次输入账号密码。
• 📝 點擊"忘記密碼？"和"立即註冊"鏈接，可进行相应的操作。
• 📈 觀察表單提交時的登入狀態變化，了解登录是否成功。

自定義主題

您可以通過修改 style.css 中的 CSS 變量來自定義主題：

:root {
    --primary-color: #4f46e5;    /* 主要顏色 */
    --primary-hover: #4338ca;    /* 懸停顏色 */
    --text-color: #1f2937;       /* 文字顏色 */
    --text-light: #6b7280;       /* 次要文字顏色 */
    --background: #ffffff;        /* 背景顏色 */
    --error: #ef4444;            /* 錯誤提示顏色 */
    --success: #10b981;          /* 成功提示顏色 */
}

📄 许可证

本项目采用 MIT License，請查看 LICENSE 文件了解更多信息。

⚠️ 重要提示

• 這是一個前端示例，實際使用時需要配合後端API。
• 密碼驗證僅檢查長度，實際應用中應該有更嚴格的規則。
• "忘記密碼"和"立即註冊"鏈接需要根據實際需求進行配置。