<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>ぜっと鯖 | 雑談サーバー</title>
    <!-- favicon -->
    <!-- <link rel="icon" href="assets/img/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="assets/img/apple-touch-icon.png"> -->
    <!-- メタ情報 -->
    <meta name="description" content="ぜっと鯖は、日本の雑談勢が集まるDiscordサーバーです。アクティブなコミュニティとイベントが魅力です。">
    <meta name="keywords" content="Discord, ぜっと鯖, コミュニティ, 雑談, サーバー">
    <!-- CSSファイルの読み込み -->
    <link rel="stylesheet" href="style.css" />
    <!-- GSAP と ScrollReveal のCDN読み込み -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
    <script src="https://unpkg.com/scrollreveal"></script>
    <!-- パフォーマンス最適化 -->
    <link rel="preconnect" href="https://cdnjs.cloudflare.com">
    <link rel="preconnect" href="https://unpkg.com">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.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=Poppins:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
</head>
<body>
    <!-- ローディングインジケーター -->
    <div class="loader">
        <div class="loader-content">
            <div class="spinner"></div>
            <div class="loader-text">読み込み中...</div>
        </div>
    </div>
    
    <!-- エラーメッセージコンテナ -->
    <div class="error-container">
        <div class="error-message"></div>
        <button class="error-close">&times;</button>
    </div>
    
    <!-- カスタムカーソル -->
    <div class="cursor"></div>
    <div class="cursor-dot"></div>

    <!-- 背景キャンバス -->
    <canvas id="bg-canvas" class="background-canvas"></canvas>

    <!-- ヘッダーとナビゲーション -->
    <header>
        <div class="header-container">
            <h1 class="logo">ぜっと<span class="accent">鯖</span></h1>
            <div class="menu-toggle">
                <span></span>
                <span></span>
                <span></span>
            </div>
            <nav>
                <ul class="nav-links">
                    <li><a href="#home">ホーム</a></li>
                    <li><a href="#members">メンバー</a></li>
                    <li><a href="#features">特徴</a></li>
                    <li><a href="#gallery">ギャラリー</a></li>
                    <li><a href="#rules">サーバールール</a></li>
                    <li><a href="#server">サーバー情報</a></li>
                    <li><a href="#contact">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- ホームセクション -->
    <section id="home" class="section home-section animate-on-scroll">
        <div class="glowing-orb"></div>
        <div class="content">
            <h2 class="headline">すべての<span class="gradient-text">雑談民</span>がここに集まる</h2>
            <p class="subtitle">Revolutionize Discord Experience</p>
            <p>私たちのコミュニティへようこそ。最高のDiscordサーバーでメンバー同士の交流を楽しみましょう。</p>
            <div class="cta-buttons">
                <a href="https://discord.gg/WxXjjZjhfz" class="primary-btn glowing-btn">サーバーに参加する</a>
                <a href="#features" class="secondary-btn">詳細を見る</a>
            </div>
        </div>
        <div class="scroll-indicator">
            <span class="mouse">
                <span class="wheel"></span>
            </span>
            <p>スクロールして詳細を見る</p>
        </div>
    </section>

    <!-- メンバー一覧セクション -->
    <section id="members" class="section members-section animate-on-scroll">
        <div class="section-header">
            <h2 class="section-title">メンバー<span class="accent-dot">.</span></h2>
            <p class="section-subtitle">私たちのコミュニティを支える素晴らしいメンバーたち</p>
        </div>
        <div class="members-container">
            <!-- メンバーカードはJSで動的に生成されます -->
        </div>
    </section>
    
    <!-- 特徴セクション -->
    <section id="features" class="section features-section animate-on-scroll">
        <div class="section-header">
            <h2 class="section-title">特徴<span class="accent-dot">.</span></h2>
            <p class="section-subtitle">ぜっと鯖が提供する特別な体験</p>
        </div>
        <div class="features-container">
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-shield-alt"></i>
                </div>
                <h3>高度なセキュリティ</h3>
                <p>最先端のセキュリティ対策で、安全な環境を提供します。</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-code"></i>
                </div>
                <h3>カスタムBot</h3>
                <p>独自開発のBotで、あなただけの体験を提供します。</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-users"></i>
                </div>
                <h3>活発なコミュニティ</h3>
                <p>常に活気あふれるメンバーと交流できます。</p>
            </div>
            <div class="feature-card">
                <div class="feature-icon">
                    <i class="fas fa-headset"></i>
                </div>
                <h3>高品質ボイスチャット</h3>
                <p>クリアな音質でのボイスチャットを提供します。</p>
            </div>
        </div>
    </section>
    
    <!-- 開発者セクション -->
    <section id="developer" class="section developer-section animate-on-scroll">
        <div class="developer-container">
            <div class="developer-image">
                <img src="https://placehold.jp/9542ff/ffffff/400x400.png?text=deax" alt="開発者" class="dev-avatar">
                <div class="dev-status online"></div>
            </div>
            <div class="developer-info">
                <h2 class="dev-title">開発者<span class="accent-dot">.</span></h2>
                <h3 class="dev-name">deax</h3>
                <p class="dev-id">Discord ID: 1366553072683192391</p>
                <div class="dev-skills">
                    <span class="skill-tag">Java/Kotlin</span>
                    <span class="skill-tag">Python</span>
                    <span class="skill-tag">JavaScript</span>
                    <span class="skill-tag">UI Design</span>
                </div>
                <p class="dev-description">現役フリーランスエンジニア。クリエイティブなデザインと高機能なプログラミングの両方を提供します。</p>
                <div class="dev-cta">
                    <a href="deax/" class="dev-contact-btn">プロフィールを見る</a>
                </div>
            </div>
        </div>
        <div class="developer-container second-dev">
            <div class="developer-info">
                <h3 class="dev-name">exat</h3>
                <p class="dev-id">Discord ID: 267125244093923333</p>
                <div class="dev-skills">
                    <span class="skill-tag">Python</span>
                    <span class="skill-tag">アセンブリ</span>
                    <span class="skill-tag">Discord API</span>
                    <span class="skill-tag">サーバー管理</span>
                </div>
                <p class="dev-description">Discord管理者。discord.pyを使ったBot開発やコミュニティ運営が専門。</p>
                <div class="dev-cta">
                    <a href="exat/" class="dev-contact-btn">プロフィールを見る</a>
                </div>
            </div>
            <div class="developer-image">
                <img src="https://placehold.jp/b667ff/ffffff/400x400.png?text=exat" alt="開発者" class="dev-avatar">
                <div class="dev-status online"></div>
            </div>
        </div>
    </section>
    
    <!-- ギャラリーセクション -->
    <section id="gallery" class="section gallery-section animate-on-scroll">
        <div class="section-header">
            <h2 class="section-title">ギャラリー<span class="accent-dot">.</span></h2>
            <p class="section-subtitle">サーバーの活動やイベントの様子</p>
        </div>
        <div class="gallery-container">
            <!-- ギャラリーアイテムはJSで動的に生成されます -->
        </div>
    </section>
    
    <!-- サーバールールセクション -->
    <section id="rules" class="section rules-section animate-on-scroll">
        <div class="glowing-orb orb-right"></div>
        <div class="section-header">
            <h2 class="section-title">サーバールール<span class="accent-dot">.</span></h2>
            <p class="section-subtitle">快適なコミュニティ運営のためのガイドライン</p>
        </div>
        <div class="rules-container">
            <!-- ルールセクションはJSで動的に生成されます -->
        </div>
        <div class="rules-action">
            <a href="https://discord.gg/WxXjjZjhfz" class="primary-btn">同意してサーバーに参加</a>
        </div>
    </section>

    <!-- サーバー情報セクション -->
    <section id="server" class="section server-section animate-on-scroll">
        <div class="section-header">
            <h2 class="section-title">サーバー情報<span class="accent-dot">.</span></h2>
            <p class="section-subtitle">私たちのDiscordサーバーの詳細</p>
        </div>
        <div class="server-info">
            <img src="https://placehold.jp/7289da/ffffff/256x256.png?text=Z" alt="サーバーアイコン" class="server-icon" />
            <h3 class="server-name">サーバー名: <span id="server-name-value">-</span></h3>
            <p class="server-description">サーバー説明: <span id="server-description-value">-</span></p>
            <p class="server-members">メンバー数: <span id="server-members-value">-</span> 人</p>
            
            <div class="server-stats-wrapper">
                <div class="stats-switcher">
                    <button class="stats-tab active" data-tab="basic">基本情報</button>
                    <button class="stats-tab" data-tab="activity">アクティビティ</button>
                    <button class="stats-tab" data-tab="channels">チャンネル</button>
                </div>
                
                <div class="stats-content">
                    <div class="stats-panel active" id="basic-stats">
                        <div class="server-stats">
                            <div class="stat-item">
                                <i class="fas fa-users"></i>
                                <p>メンバー: <span id="member-count">-</span></p>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comment"></i>
                                <p>チャンネル数: <span id="channel-count">-</span></p>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-calendar-alt"></i>
                                <p>作成日: <span id="server-creation-date">-</span></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stats-panel" id="activity-stats">
                        <div class="server-stats">
                            <div class="stat-item">
                                <i class="fas fa-chart-line"></i>
                                <p>日次アクティブ: <span id="daily-active-users">-</span> 人</p>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-calendar-week"></i>
                                <p>週間アクティブ: <span id="weekly-active-users">-</span> 人</p>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-comments"></i>
                                <p>今週メッセージ: <span id="weekly-messages">-</span></p>
                            </div>
                        </div>
                    </div>
                    
                    <div class="stats-panel" id="channels-stats">
                        <div class="server-stats">
                            <div class="stat-item">
                                <i class="fas fa-hashtag"></i>
                                <p>テキストチャンネル: <span id="text-channel-count">-</span></p>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-volume-up"></i>
                                <p>ボイスチャンネル: <span id="voice-channel-count">-</span></p>
                            </div>
                            <div class="stat-item">
                                <i class="fas fa-headset"></i>
                                <p>今週ボイス時間: <span id="voice-time">-</span> 分</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="server-boost">
                <h4 class="boost-title">サーバーブースト</h4>
                <div class="boost-progress">
                    <div class="boost-bar">
                        <div class="boost-progress-bar" id="boost-progress"></div>
                    </div>
                    <div class="boost-level" id="boost-level">レベル 0</div>
                </div>
                <div class="boost-counter">
                    <p>現在のブースト数: <span id="boost-count">0</span></p>
                    <p>次のレベルまで: <span id="boost-next">2</span> ブースト</p>
                </div>
            </div>
            
            <div class="online-users">
                <h4 class="online-title">オンラインステータス</h4>
                <div class="online-container">
                    <div class="online-status-item">
                        <div class="status-dot online"></div>
                        <p>オンライン: <span id="online-count">-</span></p>
                    </div>
                    <div class="online-status-item">
                        <div class="status-dot idle"></div>
                        <p>退席中: <span id="idle-count">-</span></p>
                    </div>
                    <div class="online-status-item">
                        <div class="status-dot dnd"></div>
                        <p>取り込み中: <span id="dnd-count">-</span></p>
                    </div>
                    <div class="online-status-item">
                        <div class="status-dot offline"></div>
                        <p>オフライン: <span id="offline-count">-</span></p>
                    </div>
                </div>
            </div>
            
            <div class="server-join">
                <a href="https://discord.gg/WxXjjZjhfz" class="join-btn">今すぐ参加する</a>
                <div class="server-id">サーバーID: 1346041463389290537</div>
            </div>
        </div>
    </section>

    <!-- お問い合わせセクション -->
    <section id="contact" class="section contact-section animate-on-scroll">
        <div class="glowing-orb orb-left"></div>
        <div class="section-header">
            <h2 class="section-title">お問い合わせ<span class="accent-dot">.</span></h2>
            <p class="section-subtitle">質問や提案などお気軽にご連絡ください</p>
        </div>
        <div class="contact-container">
            <form id="contact-form" class="contact-form">
                <div class="form-group">
                    <label for="contact-name">お名前</label>
                    <input type="text" id="contact-name" name="name" required>
                </div>
                <div class="form-group">
                    <label for="contact-email">メールアドレス</label>
                    <input type="email" id="contact-email" name="email" required>
                </div>
                <div class="form-group">
                    <label for="contact-discord-id">Discord ID（オプション）</label>
                    <input type="text" id="contact-discord-id" name="discordId" placeholder="例: username#1234">
                </div>
                <div class="form-group">
                    <label for="contact-message">お問い合わせ内容</label>
                    <textarea id="contact-message" name="message" rows="5" required></textarea>
                </div>
                <button type="submit" class="submit-btn">送信</button>
                <div id="form-response" class="form-response"></div>
            </form>
            <div class="contact-info">
                <div class="contact-item">
                    <i class="fas fa-envelope"></i>
                    <p>info@z-discord.com</p>
                </div>
                <div class="contact-item">
                    <i class="fab fa-discord"></i>
                    <p>Discordサーバー: <a href="https://discord.gg/WxXjjZjhfz">Discordに参加</a></p>
                </div>
                <div class="contact-item">
                    <i class="fas fa-info-circle"></i>
                    <p>お問い合わせいただいた内容はDiscord Webhookで自動送信されます</p>
                </div>
            </div>
        </div>
    </section>

    <!-- フッター -->
    <footer>
        <div class="footer-content">
            <div class="footer-section">
                <h3>ぜっと鯖</h3>
                <p>日本の雑談勢がここに集まる。</p>
                <div class="social-links">
                    <a href="https://discord.gg/WxXjjZjhfz"><i class="fab fa-discord"></i></a>
                    <a href="#"><i class="fab fa-twitter"></i></a>
                    <a href="#"><i class="fab fa-youtube"></i></a>
                </div>
            </div>
            <div class="footer-section">
                <h3>リンク</h3>
                <ul>
                    <li><a href="#home">ホーム</a></li>
                    <li><a href="#members">メンバー</a></li>
                    <li><a href="#features">特徴</a></li>
                    <li><a href="#contact">お問い合わせ</a></li>
                </ul>
            </div>
        </div>
        <p class="copyright">&copy; 2025 ぜっと鯖 | All Rights Reserved</p>
    </footer>

    <!-- JavaScriptファイルの読み込み -->
    <script src="script.js"></script>
</body>
</html>
