<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bocchi_Man Project Room - Evolved</title>
    <meta name="description" content="Bocchi_Man Project Room - Chrome拡張機能やツールを開発・公開しています。PDF PalなどのAI搭載拡張機能をご利用ください。">
    <meta name="keywords" content="Chrome拡張機能, PDF Pal, Gemini API, AI, ブラウザツール">
    <meta name="author" content="Bocchi_Man">
    <meta property="og:title" content="Bocchi_Man Project Room">
    <meta property="og:description" content="創造と技術が交差する場所へようこそ。Chrome拡張機能やツールを開発・公開しています。">
    <meta property="og:type" content="website">
    <meta property="og:locale" content="ja_JP">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:title" content="Bocchi_Man Project Room">
    <meta name="twitter:description" content="創造と技術が交差する場所へようこそ。Chrome拡張機能やツールを開発・公開しています。">
    <link rel="icon" href="/assets/favicon.ico" type="image/x-icon">
    <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=Lexend+Deca:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&family=Noto+Sans+JP:wght@300;400;500;700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <div id="cursor-spotlight"></div>
    <div class="menu-overlay" id="menuOverlay"></div>

    <header class="main-header">
        <nav class="main-nav" aria-label="Main navigation">
            <div class="logo">
                <a href="#home">Bocchi_Man Project</a>
            </div>
            <button class="mobile-menu-btn" id="mobileMenuBtn" aria-label="Toggle menu" aria-expanded="false">
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
                <span class="hamburger-line"></span>
            </button>
            <ul role="menubar" class="nav-menu" id="navMenu">
                <li><a href="#home" class="nav-link active" data-i18n="nav.home">Home</a></li>
                <li class="mobile-only"><a href="/news" class="nav-link" data-i18n="nav.news">News</a></li>
                <li><a href="#chrome-extensions" class="nav-link" data-i18n="nav.extensions">Chrome Extensions</a></li>
                <li><a href="#tech-stack" class="nav-link" data-i18n="nav.techStack">Tech Stack</a></li>
                <li><a href="#support-me" class="nav-link" data-i18n="nav.support">Support Me</a></li>
                <li><a href="#contact" class="nav-link" data-i18n="nav.contact">Contact</a></li>
            </ul>
            <div class="header-actions">
                <a href="https://www.paypal.com/ncp/payment/9VLMAVD7RQUUC" target="_blank" rel="noopener noreferrer" class="coffee-btn">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="16" height="16">
                        <path d="M2 21h18v-2H2v2zM20 8h-3V5c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v3H4v10h16V8zm-5 0H9V5h6v3z"/>
                    </svg>
                    <span>Coffee</span>
                </a>
                <div class="lang-switcher">
                    <button class="lang-toggle-btn" id="langToggle" aria-label="Select language" aria-haspopup="true" aria-expanded="false">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="18" height="18">
                            <path d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"/>
                        </svg>
                        <span id="currentLang">JA</span>
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="14" height="14" class="dropdown-arrow">
                            <path d="M7 10l5 5 5-5z"/>
                        </svg>
                    </button>
                    <div class="lang-dropdown" id="langDropdown" role="menu" aria-label="Language options">
                        <button class="lang-option active" data-lang="ja" title="日本語" role="menuitem">
                            <span class="lang-flag">🇯🇵</span>
                            <span class="lang-name">日本語</span>
                        </button>
                        <button class="lang-option" data-lang="en" title="English" role="menuitem">
                            <span class="lang-flag">🇬🇧</span>
                            <span class="lang-name">English</span>
                        </button>
                    </div>
                </div>
            </div>
        </nav>
    </header>

    <main>
        <div class="main-container">
            <div class="content-area">
                <section id="home" class="scroll-section hero-section">
                    <div class="section-background" id="bg-home">
                        <div class="home-bg-shape shape1"></div>
                        <div class="home-bg-shape shape2"></div>
                        <div class="home-bg-shape shape3"></div>
                        <div class="home-bg-shape shape4"></div>
                    </div>
                    <div class="hero-content section-content-foreground">
                        <h1 class="animate-on-scroll fade-in-up" data-i18n="hero.title">Bocchi_Man Project Room</h1>
                        <p class="animate-on-scroll fade-in-up delay-1" data-i18n="hero.subtitle">創造と技術が交差する場所へようこそ。</p>
                        <a href="#chrome-extensions" class="cta-button animate-on-scroll pop-in delay-2" data-i18n="hero.cta">プロジェクトを探索</a>
                    </div>
                </section>

                <section id="chrome-extensions" class="scroll-section">
                    <div class="section-background" id="bg-chrome-extensions"></div>
                    <div class="section-content section-content-foreground">
                        <h2 class="section-title animate-on-scroll fade-in" data-i18n="extensions.title">Chrome拡張機能</h2>
                        <p class="section-subtitle animate-on-scroll fade-in delay-1" data-i18n="extensions.subtitle">ブラウジングをより便利で快適にするChrome拡張機能をご紹介します。</p>

                        <div class="extension-list">
                            <div class="extension-card animate-on-scroll slide-in-left">
                                <div class="extension-icon">
                                    <img src="/assets/PDF Pal icon128.png" alt="PDF Pal Icon" width="64" height="64" style="border-radius: 8px;">
                                </div>
                                <h3 class="extension-title" data-i18n="extensions.pdfPalTitle">PDF Pal</h3>
                                <p class="extension-description" data-i18n="extensions.pdfPalDesc">「PDF Pal」は、Chromeで開いたPDFの読解を強力にサポートする拡張機能です。 Gemini APIのAIパワーを活用し、長いPDFドキュメントでも瞬時に要約。 さらに、チャット形式でPDFの内容について質問したり、重要な箇所を分析させたりすることが可能です。 このツールで、PDFからの情報収集や学習の効率を飛躍的に向上させましょう。</p>
                                <a href="#" class="extension-link privacy-link" data-i18n="extensions.pdfPalPrivacyBtn" id="pdfPalPrivacyLink">
                                    プライバシーポリシー
                                </a>
                            </div>

                            <div class="extension-card animate-on-scroll slide-in-left">
                                <div class="extension-icon">
                                    <img src="/assets/Streaming Auto Skip icon128.png" alt="Streaming Auto Skip Icon" width="64" height="64" style="border-radius: 8px;">
                                </div>
                                <h3 class="extension-title" data-i18n="extensions.streamingAutoSkipTitle">Streaming Auto Skip</h3>
                                <p class="extension-description" data-i18n="extensions.streamingAutoSkipDesc">Streaming Auto Skipは、Netflixなどのストリーミングサービスで「イントロをスキップ」や「次のエピソードを再生」ボタンを自動クリックするChrome拡張機能です。15言語対応のUIと、ダーク/ライトモード切替機能を搭載。サービスごとの個別設定も可能で、Chrome Sync Storageにより複数デバイス間で設定を同期できます。連続視聴をより快適にする便利なツールです。</p>
                                <a href="#" class="extension-link privacy-link" data-i18n="extensions.streamingAutoSkipPrivacyBtn" id="streamingAutoSkipPrivacyLink">
                                    プライバシーポリシー
                                </a>
                            </div>
                        </div>

                    </div>
                </section>

                <section id="tech-stack" class="scroll-section">
                    <div class="section-background" id="bg-tech-stack"></div>
                    <div class="section-content section-content-foreground">
                        <h2 class="section-title animate-on-scroll fade-in" data-i18n="techStack.title">Tech Stack</h2>
                        <p class="section-subtitle animate-on-scroll fade-in delay-1" data-i18n="techStack.subtitle">各Chrome拡張機能の開発に使用している技術スタックです。</p>

                        <div class="tech-stack-extensions">
                            <div class="tech-extension-card animate-on-scroll slide-in-left">
                                <div class="tech-extension-header">
                                    <img src="/assets/PDF Pal icon128.png" alt="PDF Pal Icon" width="48" height="48" style="border-radius: 8px;">
                                    <h3 class="tech-extension-title" data-i18n="techStack.pdfPalTitle">PDF Pal</h3>
                                </div>
                                <div class="tech-categories">
                                    <div class="tech-category">
                                        <h4 class="tech-category-title" data-i18n="techStack.pdfPalCore">コア技術</h4>
                                        <p class="tech-category-items" data-i18n="techStack.pdfPalCoreItems">JavaScript (ES2022+), HTML5, CSS3, Chrome Extension API (Manifest V3)</p>
                                    </div>
                                    <div class="tech-category">
                                        <h4 class="tech-category-title" data-i18n="techStack.pdfPalChromeApis">Chrome APIs</h4>
                                        <p class="tech-category-items" data-i18n="techStack.pdfPalChromeApisItems">Runtime, Storage, Tabs, SidePanel, ContextMenus, Offscreen, Alarms, i18n</p>
                                    </div>
                                    <div class="tech-category">
                                        <h4 class="tech-category-title" data-i18n="techStack.pdfPalWebApis">Web APIs</h4>
                                        <p class="tech-category-items" data-i18n="techStack.pdfPalWebApisItems">IndexedDB, Web Crypto API, Canvas API, Fetch API, MediaRecorder API</p>
                                    </div>
                                    <div class="tech-category">
                                        <h4 class="tech-category-title" data-i18n="techStack.pdfPalLibraries">ライブラリ</h4>
                                        <p class="tech-category-items" data-i18n="techStack.pdfPalLibrariesItems">PDF.js, Chart.js, date-fns, JSZip, markdown-it</p>
                                    </div>
                                    <div class="tech-category">
                                        <h4 class="tech-category-title" data-i18n="techStack.pdfPalExternalApi">外部API</h4>
                                        <p class="tech-category-items" data-i18n="techStack.pdfPalExternalApiItems">Google Gemini API</p>
                                    </div>
                                </div>
                            </div>

                            <div class="tech-extension-card animate-on-scroll slide-in-left">
                                <div class="tech-extension-header">
                                    <img src="/assets/Streaming Auto Skip icon128.png" alt="Streaming Auto Skip Icon" width="48" height="48" style="border-radius: 8px;">
                                    <h3 class="tech-extension-title" data-i18n="techStack.streamingAutoSkipTitle">Streaming Auto Skip</h3>
                                </div>
                                <div class="tech-categories">
                                    <div class="tech-category">
                                        <h4 class="tech-category-title" data-i18n="techStack.streamingAutoSkipCore">コア技術</h4>
                                        <p class="tech-category-items" data-i18n="techStack.streamingAutoSkipCoreItems">JavaScript (ES6+), HTML5, CSS3, Chrome Extension API (Manifest V3)</p>
                                    </div>
                                    <div class="tech-category">
                                        <h4 class="tech-category-title" data-i18n="techStack.streamingAutoSkipChromeApis">Chrome APIs</h4>
                                        <p class="tech-category-items" data-i18n="techStack.streamingAutoSkipChromeApisItems">Storage Sync, Tabs, Runtime</p>
                                    </div>
                                    <div class="tech-category">
                                        <h4 class="tech-category-title" data-i18n="techStack.streamingAutoSkipWebApis">Web APIs</h4>
                                        <p class="tech-category-items" data-i18n="techStack.streamingAutoSkipWebApisItems">MutationObserver</p>
                                    </div>
                                    <div class="tech-category">
                                        <h4 class="tech-category-title" data-i18n="techStack.streamingAutoSkipFeatures">特徴</h4>
                                        <p class="tech-category-items" data-i18n="techStack.streamingAutoSkipFeaturesItems">15言語対応, ダーク/ライトモード, クロスデバイス同期</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>

                <section id="support-me" class="scroll-section">
                    <div class="section-background" id="bg-support-me"></div>
                    <div class="section-content section-content-foreground">
                        <h2 class="section-title animate-on-scroll fade-in" data-i18n="support.title">Support Me</h2>
                        <p class="section-subtitle animate-on-scroll fade-in delay-1" data-i18n="support.subtitle">プロジェクトを気に入っていただけましたら、ぜひサポートをお願いします。</p>

                        <div class="support-card animate-on-scroll fade-in-up delay-2">
                            <div class="support-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/>
                                </svg>
                            </div>
                            <h3 class="support-title" data-i18n="support.cardTitle">プロジェクトをサポート</h3>
                            <p class="support-description" data-i18n="support.cardDesc">あなたのサポートが、より良いプロジェクトの開発を支えます。コーヒー一杯分のご支援をいただけると嬉しいです。</p>
                            <a href="https://www.paypal.com/ncp/payment/9VLMAVD7RQUUC" target="_blank" rel="noopener noreferrer" class="support-btn">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" width="20" height="20">
                                    <path d="M2 21h18v-2H2v2zM20 8h-3V5c0-1.1-.9-2-2-2H9c-1.1 0-2 .9-2 2v3H4v10h16V8zm-5 0H9V5h6v3z"/>
                                </svg>
                                <span data-i18n="support.button">コーヒーをおごる</span>
                            </a>
                        </div>
                    </div>
                </section>

                <section id="contact" class="scroll-section">
                    <div class="section-background" id="bg-contact"></div>
                    <div class="section-content section-content-foreground">
                        <h2 class="section-title animate-on-scroll fade-in" data-i18n="contact.title">Contact</h2>
                        <p class="section-subtitle animate-on-scroll fade-in delay-1" data-i18n="contact.subtitle">ご質問やフィードバックがございましたら、お気軽にご連絡ください。</p>

                        <div class="contact-card animate-on-scroll fade-in-up delay-2">
                            <div class="contact-icon">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                    <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/>
                                </svg>
                            </div>
                            <h3 class="contact-title" data-i18n="contact.cardTitle">お問い合わせ</h3>
                            <p class="contact-description" data-i18n="contact.cardDesc">質問、提案、バグ報告など、どんなことでもお気軽にお問い合わせください。</p>
                            <a href="https://forms.gle/ceDC7gGUZeJZveQp8" target="_blank" rel="noopener noreferrer" class="contact-btn" data-i18n="contact.button">
                                お問い合わせフォーム
                            </a>
                        </div>
                    </div>
                </section>
            </div>

            <aside class="updates-sidebar">
                <div class="sidebar-content">
                    <a href="/news" class="sidebar-title-link">
                        <h2 class="sidebar-title" data-i18n="updates.title">更新情報</h2>
                    </a>
                    <div class="sidebar-updates-list" id="sidebarUpdatesList">
                    </div>
                    <a href="/news" class="view-all-updates" data-i18n="updates.viewAll">過去の更新履歴を見る →</a>
                </div>
            </aside>
        </div>
    </main>

    <footer class="main-footer">
        <div class="footer-content">
            <div class="footer-nav">
                <a href="#home" class="footer-link" data-i18n="nav.home">ホーム</a>
                <a href="#chrome-extensions" class="footer-link" data-i18n="nav.extensions">Chrome拡張機能</a>
                <a href="#support-me" class="footer-link" data-i18n="nav.support">Support Me</a>
                <a href="#contact" class="footer-link" data-i18n="nav.contact">Contact</a>
                <a href="/news" class="footer-link" data-i18n="nav.news">News</a>
            </div>
            <div class="footer-copyright">
                <p>&copy; 2022-<span id="current-year"></span> Bocchi_Man. All rights reserved.</p>
            </div>
        </div>
    </footer>

    <script src="/index.js"></script>
</body>
</html>
