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。
• 密碼驗證僅檢查長度，實際應用中應該有更嚴格的規則。
• "忘記密碼"和"立即註冊"鏈接需要根據實際需求進行配置。