<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Rosca - 次世代Discord管理Bot</title>
        <link rel="stylesheet" href="styles.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=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    </head>
    <body>
        <div class="noise"></div>
        <div class="gradient-bg"></div>
        <header>
            <nav>
                <div class="logo">
                    <span>Rosca</span>
                </div>
                <div class="nav-links">
                    <a href="../index.html">メイン</a>
                    <a href="../dpko/index.html">dpko</a>
                    <a href="#features">機能</a>
                    <a href="#guide">使い方</a>
                </div>
                <div class="cta-buttons">
                    <a href="https://discord.com/discovery/applications/1370645241589268620" class="btn btn-primary" target="_blank">ボットを追加</a>
                </div>
                <div class="hamburger">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </nav>
        </header>

            <!-- ヒーローセクション -->
            <section id="hero">
                <div class="container">
                    <div class="hero-content">
                        <div class="hero-logo">
                            <div class="logo-glow"></div>
                            <h1>Rosca</h1>
                        </div>
                        <p class="hero-description">あなたのDiscordサーバーをスマートに、そして強力に管理する次世代多機能bot</p>
                        <div class="hero-buttons">
                            <a href="https://discord.com/discovery/applications/1370645241589268620" class="btn btn-primary btn-large" target="_blank">
                                <i class="fas fa-robot"></i>
                                ボットを追加する
                        
                            </a>
                        </div>
                    </div>
                    <div class="scroll-indicator">
                        <div class="mouse">
                            <div class="wheel"></div>
                        </div>
                        <div class="arrow">
                            <span></span>
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 機能ショーケースセクション -->
            <section id="showcase">
                <div class="container">
                    <h2 class="section-title">使いやすさを追求</h2>
                    <p class="section-description">複雑な設定は不要。誰でも簡単に使える、直感的なインターフェース。</p>

                    <div class="rosca-showcase">
                        <div class="rosca-showcase-content">
                            <div class="rosca-showcase-item fade-in">
                                <h3><i class="fas fa-wand-magic-sparkles"></i>シンプルなUI</h3>
                                <p>複雑な設定は不要。直感的なインターフェースで、誰でも簡単に操作できます。</p>
                                <ul class="feature-list">
                                    <li><i class="fas fa-check"></i>ワンクリックで主要機能を設定</li>
                                    <li><i class="fas fa-check"></i>分かりやすいコマンド名</li>
                                    <li><i class="fas fa-check"></i>日本語対応のコマンド</li>
                                </ul>
                                <div class="command-preview">
                                    <code>/anti-spam</code> でかんたんスパム対策
                                </div>
                            </div>

                            <div class="rosca-showcase-item fade-in" style="animation-delay: 0.2s;">
                                <h3><i class="fas fa-terminal"></i>直感的なコマンド</h3>
                                <p>覚えやすく使いやすいコマンド設計。必要な機能にすぐにアクセスできます。</p>
                                <ul class="feature-list">
                                    <li><i class="fas fa-check"></i>スラッシュコマンド対応</li>
                                    <li><i class="fas fa-check"></i>ヘルプコマンドの充実</li>
                                </ul>
                                <div class="command-preview">
                                    <code>/help</code> で全コマンドを確認
                                </div>
                            </div>

                            <div class="rosca-showcase-item fade-in" style="animation-delay: 0.4s;">
                                <h3><i class="fas fa-shield-heart"></i>初心者でも安心</h3>
                                <p>丁寧なガイドと説明で、初めての方でも安心してご利用いただけます。</p>
                                <ul class="feature-list">
                                    <li><i class="fas fa-check"></i>いつでも対応のTicket</li>
                                    <li><i class="fas fa-check"></i>ボタン式のヘルプ</li>
                                    <li><i class="fas fa-check"></i>サポートサーバー常設</li>
                                </ul>
                                <div class="command-preview">
                                    <code>/botinfo</code> でボットの情報を確認
                                </div>
                            </div>
                        </div>

                        <div class="rosca-image fade-in" style="animation-delay: 0.6s;">
                            <img src="../images/rosca-preview.png" alt="Roscaボットのプレビュー" class="rosca-preview">
                            <div class="preview-overlay"></div>
                            <div class="floating-features">
                                <div class="floating-feature">
                                    <i class="fas fa-robot"></i> 24時間稼働
                                </div>
                                <div class="floating-feature">
                                    <i class="fas fa-bolt"></i> 高速レスポンス
                                </div>
                                <div class="floating-feature">
                                    <i class="fas fa-shield-alt"></i> 安全性重視
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 機能詳細セクション -->
            <section id="features">
                <div class="container">
                    <h2 class="section-title">Roscaボットの機能</h2>
                    <p class="section-description">Rosca（ロスカ）は、あなたのDiscordサーバーをスマートに、そして強力に管理するための次世代多機能botです。</p>
                    <div class="features-grid">
                        <div class="feature-box">
                            <div class="feature-icon">
                                <i class="fas fa-gavel"></i>
                            </div>
                            <h3>モデレーション</h3>
                            <div class="feature-content">
                                <p>サーバーの秩序を保つための強力なモデレーション機能を提供します。</p>
                                <ul class="feature-list">
                                    <li>自動警告システム</li>
                                    <li>段階的なペナルティ適用</li>
                                    <li>ユーザー行動の監視と記録</li>
                                </ul>
                                <div class="command-example">
                                    <code>/timeout @user [時間]   などなど</code>
                                </div>
                            </div>
                        </div>
                        <div class="feature-box">
                            <div class="feature-icon">
                                <i class="fas fa-broom"></i>
                            </div>
                            <h3>自動掃除</h3>
                            <div class="feature-content">
                                <p>不要なメッセージや古いコンテンツを自動的に整理します。</p>
                                <ul class="feature-list">
                                    <li>古いメッセージの自動削除</li>
                                    <li>特定チャンネルの定期クリーンアップ</li>
                                    <li>不適切コンテンツの自動削除</li>
                                </ul>
                                <div class="command-example">
                                    <code>/clear [数]</code>
                                </div>
                            </div>
                        </div>
                        <div class="feature-box">
                            <div class="feature-icon">
                                <i class="fas fa-tags"></i>
                            </div>
                            <h3>ロール操作</h3>
                            <div class="feature-content">
                                <p>ロールの管理を簡単かつ効率的に行うことができます。</p>
                                <ul class="feature-list">
                                    <li>リアクションロールの設定</li>
                                    <li>一時的なロールの自動付与と削除</li>
                                    <li>ロール階層の視覚化と管理</li>
                                </ul>
                                <div class="command-example">
                                    <code>/addrole @user [ロール]</code>
                                </div>
                            </div>
                        </div>
                        <div class="feature-box security">
                            <div class="feature-icon">
                                <i class="fas fa-shield-alt"></i>
                            </div>
                            <h3>セキュリティ対策</h3>
                            <div class="feature-content">
                                <p>最新のセキュリティ技術で、サーバーを不正アクセスや荒らしから24時間体制で守ります。</p>
                                <div class="security-features">
                                    <div class="security-feature-item">
                                        <i class="fas fa-user-shield"></i>
                                        不審なアカウントの自動検知システム
                                    </div>
                                    <div class="security-feature-item">
                                        <i class="fas fa-ban"></i>
                                        スパム・フィッシングリンクの自動ブロック
                                    </div>
                                    <div class="security-feature-item">
                                        <i class="fas fa-robot"></i>
                                        荒らしボットの即時検出と対処
                                    </div>
                                    <div class="security-feature-item">
                                        <i class="fas fa-history"></i>
                                        24時間監視システム
                                    </div>
                                </div>
                                <div class="command-example">
                                    <code>/security level [レベル] (現在開発中です)</code>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="features-motto">
                        <p>すべては、より快適で楽しいサーバー運営のために ——それがRoscaの使命です。</p>
                    </div>
                </div>
            </section>
            <!-- 導入ガイドセクション -->
            <section id="guide">
                <div class="container">
                    <h2 class="section-title">Roscaボットの導入方法</h2>
                    <div class="guide-steps">
                        <div class="step-indicators">
                            <div class="step active" data-step="1">
                                <span>1</span>
                                <p>ボットを追加</p>
                            </div>
                            <div class="step" data-step="2">
                                <span>2</span>
                                <p>権限を設定</p>
                            </div>
                            <div class="step" data-step="3">
                                <span>3</span>
                                <p>コマンドを使用</p>
                            </div>
                            <div class="step" data-step="4">
                                <span>4</span>
                                <p>機能をカスタマイズ</p>
                            </div>
                        </div>
                        <div class="step-content">
                            <div class="step-details active" id="step-1">
                                <h3>ボットをサーバーに追加する</h3>
                                <p>まず、下のボタンからRoscaボットをあなたのDiscordサーバーに招待してください。招待プロセス中に、Roscaが必要とする基本的な権限の確認画面が表示されます。</p>
                                <div class="command-examples">
                                    <p><strong>必要な権限（例）:</strong></p>
                                    <ul class="permission-list">
                                        <li>メッセージを読む</li>
                                        <li>メッセージを送信</li>
                                        <li>メンバーを管理</li>
                                        <li>ロールを管理</li>
                                    </ul>
                                    <a href="https://discord.com/discovery/applications/1370645241589268620" class="btn btn-primary" target="_blank" style="margin-top:15px;"><i class="fas fa-robot"></i> Roscaをサーバーに追加</a>
                                </div>
                                <div class="step-actions" style="margin-top: 20px; text-align: right;">
                                    <button class="btn btn-primary btn-next-step" data-next-step="2">
                                        サーバーに追加したら次へ <i class="fas fa-arrow-right"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="step-details" id="step-2">
                                <h3>必要な権限を設定する</h3>
                                <p>ボットが正しく機能するためには、いくつかの重要な権限が必要です。サーバーの設定画面から「ロール」を選択し、Roscaボット用のロールに以下の権限が付与されているか確認・設定してください。</p>
                                <ul class="permission-list">
                                    <li><strong>メッセージを読む:</strong> コマンドや通知を認識するために必要です。</li>
                                    <li><strong>メッセージを送信:</strong> コマンドへの応答や通知を行うために必要です。</li>
                                    <li><strong>埋め込みリンク:</strong> リッチなメッセージ表示のために推奨されます。</li>
                                    <li><strong>ファイルを添付:</strong> 一部の機能で必要になる場合があります。</li>
                                    <li><strong>メッセージ履歴を読む:</strong> 特定のモデレーション機能で役立ちます。</li>
                                    <li><strong>メンション 、@here、全てのロール:</strong> 通知機能で重要です。</li>
                                    <li><strong>メンバーをキック:</strong> モデレーション機能。</li>
                                    <li><strong>メンバーをBAN:</strong> モデレーション機能。</li>
                                    <li><strong>ロールを管理:</strong> 自動ロール付与などの機能に必要です。</li>
                                    <li><strong>チャンネルを管理:</strong> 特定のチャンネル管理機能に必要です。</li>
                                </ul>
                                <p class="note"><small><i class="fas fa-exclamation-triangle"></i> ボットのロールが、管理したい他のロールよりも上位に表示されていることを確認してください。</small></p>
                                <div class="step-actions" style="margin-top: 20px; text-align: right;">
                                    <button class="btn btn-primary btn-next-step" data-next-step="3">
                                        権限設定が完了したら次へ <i class="fas fa-arrow-right"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="step-details" id="step-3">
                                <h3>基本的なコマンドを試す</h3>
                                <p>Roscaがサーバーで動作し始めたら、いくつかの基本コマンドを試してみましょう。テキストチャンネルでスラッシュ <code>/</code> を入力すると、利用可能なコマンドのリストが表示されます。</p>
                                <div class="command-examples">
                                    <div class="command">
                                        <code>/help</code>
                                        <span class="description">利用可能な全てのコマンドと説明を表示します。</span>
                                    </div>
                                    <div class="command">
                                        <code>/botinfo</code>
                                        <span class="description">Roscaボットの現在の状態や情報を表示します。</span>
                                    </div>
                                    <div class="command">
                                        <code>/serverinfo</code>
                                        <span class="description">現在のサーバーに関する情報を表示します。</span>
                                    </div>
                                </div>
                                <div class="step-actions" style="margin-top: 20px; text-align: right;">
                                    <button class="btn btn-primary btn-next-step" data-next-step="4">
                                        コマンドの確認ができたら次へ <i class="fas fa-arrow-right"></i>
                                    </button>
                                </div>
                            </div>
                            <div class="step-details" id="step-4">
                                <h3>機能をカスタマイズ</h3>
                                <p>Roscaは多機能です。あなたのサーバーに合わせて、様々な機能を有効化したり、詳細設定を行ったりすることができます。</p>
                                <ul class="customize-options">
                                    <li><strong>モデレーション設定:</strong> <code>/aimod</code> でaiが処罰。</li>
                                    <li><strong>認証:</strong> <code>/verify [ロール]</code> で認証を設定。</li>
                                    <li><strong>入室退出ログ:</strong> <code>/welcomelog-setting [channelid]</code> で新規参加者への挨拶をカスタマイズ。</li>
                                </ul>
                                <p>各機能の詳細は <code>/help</code> で確認できます。あなたのサーバー運営をRoscaが全力でサポートします！</p>
                                <div class="step-actions" style="margin-top: 20px; text-align: right;">
                                    <a href="#features" class="btn btn-success">設定完了！機能一覧へ</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            <!-- カスタマイズセクション -->
            <section id="customize">
                <div class="container">
                    <h2 class="section-title">自分のサーバーに合わせてカスタマイズ</h2>
                    <div class="customize-content">
                        <div class="customize-image">
                            <div class="image-placeholder">
                                <i class="fas fa-sliders-h"></i>
                            </div>
                        </div>
                        <div class="customize-text">
                            <p>Roscaボットは、あなたのサーバーに合わせて細かくカスタマイズできます。モデレーション設定、自動応答、ロール管理など、サーバーの雰囲気や目的に合わせた設定が可能です。</p>
                            <ul class="customize-features">
                                <li>
                                    <i class="fas fa-check-circle"></i>
                                    機能のオン/オフ設定
                                </li>
                                <li>
                                    <i class="fas fa-check-circle"></i>
                                    コマンドプレフィックスのカスタマイズ
                                </li>
                                <li>
                                    <i class="fas fa-check-circle"></i>
                                    自動応答メッセージの設定
                                </li>
                                <li>
                                    <i class="fas fa-check-circle"></i>
                                    ロール連携のカスタマイズ
                                </li>
                                <li>
                                    <i class="fas fa-check-circle"></i>
                                    通知設定のカスタマイズ
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
            <!-- CTAセクション -->
            <section id="cta">
                <div class="container">
                    <h2>Roscaボットを試してみませんか？</h2>
                    <p>より快適で安全なDiscordサーバー運営のために、Roscaがお手伝いします。</p>
                    <div class="cta-buttons">
                        <a href="https://discord.com/discovery/applications/1370645241589268620" class="btn btn-primary btn-large" target="_blank">
                            <i class="fas fa-robot"></i>
                            ボットを追加する
                    
                        </a>
                        <a href="../dpko/index.html" class="btn btn-secondary btn-large">
                            <i class="fas fa-users"></i>
                            dpkoについて
                    
                        </a>
                    </div>
                </div>
            </section>
        </main>
        <footer>
            <div class="container">
                <div class="footer-content">
                    <div class="footer-logo">
                        <span>Rosca</span>
                    </div>
                    <div class="footer-links">
                        <a href="../index.html">メインページ</a>
                        <a href="../dpko/index.html">dpkoサーバー</a>
                        <a href="index.html">Roscaボット</a>
                    </div>
                    <div class="social-links">
                        <a href="https://discord.gg/dpko" class="social-icon" target="_blank"> <i class="fab fa-discord"></i> </a>
                        <a href="https://twitter.com/official_dpko" class="social-icon" target="_blank"> <i class="fab fa-twitter"></i> </a>
                        <a href="https://github.com/deaxcode" class="social-icon" target="_blank"> <i class="fab fa-github"></i> </a>
                    </div>
                </div>
                <div class="footer-bottom">
                    <p>&copy;2025 dpko & deax. All rights reserved.</p>
                </div>
            </div>
        </footer>
        <script src="script.js"></script>