Modern Login Page (現代化登入頁面)

Modern Login Page (現代化登入頁面)

Test repository for MCP server

jerry3315765

Developer Tools
Visit Server

README

Modern Login Page (現代化登入頁面)

這是一個現代化的、響應式的登入頁面實現，具有直觀的用戶界面和豐富的互動功能。

登入頁面預覽

功能特點

  • 🎨 現代化設計

    • 使用漸變背景色
    • 清晰的卡片式布局
    • 響應式設計，支援各種設備尺寸

  • 🔒 安全性功能

    • 密碼強度即時檢查（最少8個字符）
    • 密碼顯示/隱藏切換
    • 電子郵件格式即時驗證

  • ⚡ 交互體驗

    • 浮動標籤效果
    • 表單驗證即時反饋
    • 記住我選項
    • 登入狀態反饋

技術實現

  • 純 HTML5 / CSS3 / JavaScript
  • 使用 CSS 變量實現主題定制
  • Flexbox 布局
  • Google Noto Sans TC 字體支援
  • 原生 JavaScript 實現所有互動功能
  • SVG 圖標

本地測試

  1. 克隆此倉庫：
git clone https://github.com/jerry3315765/MCP_test.git
  1. 進入項目目錄：
cd MCP_test
  1. 在瀏覽器中打開：
    • 直接打開 login-page/index.html
    • 或使用本地服務器（如 Live Server）運行

功能測試

  1. 表單驗證：

    • 嘗試提交空表單，會收到提示
    • 輸入無效的電子郵件格式，輸入框會顯示紅色提示
    • 輸入少於8個字符的密碼，將看到密碼強度提示

  2. 交互功能：

    • 點擊密碼欄位右側的眼睛圖標可切換密碼顯示/隱藏
    • 勾選"記住我"選項
    • 點擊"忘記密碼？"和"立即註冊"鏈接
    • 觀察表單提交時的登入狀態變化

自定義主題

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

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

注意事項

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

License

MIT License - 請查看 LICENSE 文件了解更多信息。

Recommended Servers

playwright-mcp

playwright-mcp

A Model Context Protocol server that enables LLMs to interact with web pages through structured accessibility snapshots without requiring vision models or screenshots.

Official
Featured
TypeScript
Magic Component Platform (MCP)

Magic Component Platform (MCP)

An AI-powered tool that generates modern UI components from natural language descriptions, integrating with popular IDEs to streamline UI development workflow.

Official
Featured
Local
TypeScript
@kazuph/mcp-taskmanager

@kazuph/mcp-taskmanager

Model Context Protocol server for Task Management. This allows Claude Desktop (or any MCP client) to manage and execute tasks in a queue-based system.

Featured
Local
JavaScript
MCP Package Docs Server

MCP Package Docs Server

Facilitates LLMs to efficiently access and fetch structured documentation for packages in Go, Python, and NPM, enhancing software development with multi-language support and performance optimization.

Featured
Local
TypeScript
Claude Code MCP

Claude Code MCP

An implementation of Claude Code as a Model Context Protocol server that enables using Claude's software engineering capabilities (code generation, editing, reviewing, and file operations) through the standardized MCP interface.

Featured
Local
JavaScript
Linear MCP Server

Linear MCP Server

A Model Context Protocol server that integrates with Linear's issue tracking system, allowing LLMs to create, update, search, and comment on Linear issues through natural language interactions.

Featured
JavaScript
Sequential Thinking MCP Server

Sequential Thinking MCP Server

This server facilitates structured problem-solving by breaking down complex issues into sequential steps, supporting revisions, and enabling multiple solution paths through full MCP integration.

Featured
Python
Linear MCP Server

Linear MCP Server

Enables interaction with Linear's API for managing issues, teams, and projects programmatically through the Model Context Protocol.

Featured
JavaScript
mermaid-mcp-server

mermaid-mcp-server

A Model Context Protocol (MCP) server that converts Mermaid diagrams to PNG images.

Featured
JavaScript
Jira-Context-MCP

Jira-Context-MCP

MCP server to provide Jira Tickets information to AI coding agents like Cursor

Featured
TypeScript