Modern Login Page ()

🚀 現代化登入ページ（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と組み合わせる必要があります。パスワード検証は長さのみをチェックしており、実際のアプリケーションではより厳格なルールが必要です。「パスワードを忘れた場合」と「今すぐ登録」のリンクは、実際のニーズに合わせて設定する必要があります。