<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GREEN×EXPO 2027 画面モック v2.0</title>
    <link rel="stylesheet" href="./assets/css/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="container">
        <header class="header">
            <div class="logo">
                <h1>🌿 GREEN×EXPO 2027</h1>
                <p>画面モック v2.0</p>
            </div>
            <div class="header-info">
                <span class="badge">Phase 1 MVP</span>
                <span class="date">2026-02-14</span>
            </div>
        </header>

        <main class="main">
            <section class="intro">
                <h2>📋 概要</h2>
                <p>GREEN×EXPO 2027 公式参加者管理ツールの画面モックです。<br>
                   実装前の画面設計確認とクライアント確認用のHTMLプロトタイプです。</p>
                
                <div class="color-palette">
                    <h3>🎨 ブランドカラー</h3>
                    <div class="colors">
                        <div class="color-item">
                            <div class="color-box" style="background-color: #2D5016;"></div>
                            <span>#2D5016<br>深緑</span>
                        </div>
                        <div class="color-item">
                            <div class="color-box" style="background-color: #7FB347;"></div>
                            <span>#7FB347<br>若緑</span>
                        </div>
                        <div class="color-item">
                            <div class="color-box" style="background-color: #FDB94E;"></div>
                            <span>#FDB94E<br>オレンジ</span>
                        </div>
                    </div>
                </div>
            </section>

            <section class="screen-list">
                <h2>🖥️ 画面一覧</h2>
                
                <div class="screen-category">
                    <h3>参加者向け画面</h3>
                    <div class="screen-grid">
                        <a href="./participant/login.html" class="screen-card">
                            <div class="screen-icon">🔐</div>
                            <h4>ログイン画面</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./participant/2fa.html" class="screen-card">
                            <div class="screen-icon">🔑</div>
                            <h4>二段階認証（2FA）</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./participant/dashboard.html" class="screen-card">
                            <div class="screen-icon">📊</div>
                            <h4>ダッシュボード</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./participant/submission-list.html" class="screen-card">
                            <div class="screen-icon">📝</div>
                            <h4>申請一覧</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./participant/submission-detail.html" class="screen-card">
                            <div class="screen-icon">📄</div>
                            <h4>申請詳細</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./participant/document-list.html" class="screen-card">
                            <div class="screen-icon">📋</div>
                            <h4>提出書類一覧</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./participant/notification-list.html" class="screen-card">
                            <div class="screen-icon">🔔</div>
                            <h4>通知一覧</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./participant/submission-create.html" class="screen-card disabled">
                            <div class="screen-icon">✏️</div>
                            <h4>申請作成</h4>
                            <p class="status">🔲 未実装</p>
                        </a>
                        <a href="./participant/announcement-list.html" class="screen-card disabled">
                            <div class="screen-icon">📢</div>
                            <h4>お知らせ一覧</h4>
                            <p class="status">🔲 未実装</p>
                        </a>
                        <a href="./participant/profile.html" class="screen-card disabled">
                            <div class="screen-icon">👤</div>
                            <h4>プロフィール</h4>
                            <p class="status">🔲 未実装</p>
                        </a>
                    </div>
                </div>

                <div class="screen-category">
                    <h3>協会向け画面（管理者）</h3>
                    <div class="screen-grid">
                        <a href="./admin/dashboard.html" class="screen-card">
                            <div class="screen-icon">📊</div>
                            <h4>管理者ダッシュボード</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./admin/participant-list.html" class="screen-card">
                            <div class="screen-icon">🌍</div>
                            <h4>参加国一覧（期限順・担当者フィルタ）</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./admin/submission-detail.html" class="screen-card">
                            <div class="screen-icon">✅</div>
                            <h4>申請詳細（承認・差し戻し）</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./admin/notification-list.html" class="screen-card">
                            <div class="screen-icon">📢</div>
                            <h4>お知らせ管理一覧</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./admin/notification-create.html" class="screen-card">
                            <div class="screen-icon">✏️</div>
                            <h4>お知らせ作成</h4>
                            <p class="status">✅ 完成</p>
                        </a>
                        <a href="./admin/login.html" class="screen-card disabled">
                            <div class="screen-icon">🔐</div>
                            <h4>ログイン画面</h4>
                            <p class="status">🔲 未実装</p>
                        </a>
                    </div>
                </div>
            </section>

            <section class="docs-links">
                <h2>📖 関連ドキュメント</h2>
                <ul>
                    <li><a href="../../docs/03.開発設計書/画面設計書.md">画面設計書</a></li>
                    <li><a href="../../docs/03.開発設計書/データベース設計書.md">データベース設計書</a></li>
                    <li><a href="../../docs/03.開発設計書/アーキテクチャ設計書.md">アーキテクチャ設計書</a></li>
                    <li><a href="./README.md">v2 README</a></li>
                </ul>
            </section>
        </main>

        <footer class="footer">
            <p>&copy; 2026 株式会社TAM 技術チーム | GREEN×EXPO 2027 画面モック v2.0</p>
        </footer>
    </div>
</body>
</html>
