🚀 现代化登入页面
这是一个现代化的、响应式的登入页面实现，具有直观的用户界面和丰富的互动功能，能为用户带来良好的登录体验。
🚀 快速开始
若要在本地测试该登入页面，可按以下步骤操作：
- 克隆此倉庫：
git clone https://github.com/jerry3315765/MCP_test.git
- 進入項目目錄：
cd MCP_test
- 在瀏覽器中打開：
- 直接打開
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。
- 密碼驗證僅檢查長度，實際應用中應該有更嚴格的規則。
- "忘記密碼"和"立即註冊"鏈接需要根據實際需求進行配置。