Chromeプラグインまもなく公�?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow-x: hidden; } .container { max-width: 1200px; width: 90%; padding: 20px; } .hero-section { text-align: center; color: white; animation: fadeInUp 1s ease-out; } .hero-title { font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 700; margin-bottom: 24px; text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3); } .hero-subtitle { font-size: clamp(1.2rem, 2.5vw, 1.6rem); margin-bottom: 40px; opacity: 0.9; line-height: 1.6; } /* Language Dropdown */ /* Language Dropdown */ .lang-dropdown { position: fixed; top: 20px; right: 20px; z-index: 1000; } .lang-dropdown-trigger { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; color: white; transition: all 0.3s ease; min-width: 120px; justify-content: space-between; } .lang-dropdown-trigger:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .lang-dropdown-trigger.active { background: rgba(255, 255, 255, 0.25); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .dropdown-arrow { transition: transform 0.3s ease; font-size: 12px; } .lang-dropdown-trigger.active .dropdown-arrow { transform: rotate(180deg); } .lang-dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; min-width: 200px; overflow: hidden; } .lang-dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .lang-option { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #333; text-decoration: none; transition: all 0.2s ease; font-size: 14px; } .lang-option:hover { background: rgba(102, 126, 234, 0.1); color: #667eea; } .lang-option.active { background: rgba(102, 126, 234, 0.15); color: #667eea; font-weight: 600; } .lang-flag { font-size: 18px; width: 24px; text-align: center; } .lang-name { flex: 1; } .lang-code { font-size: 12px; color: rgba(0, 0, 0, 0.5); } .lang-link { color: rgba(255, 255, 255, 0.8); text-decoration: none; padding: 8px 16px; border-radius: 22px; font-size: 14px; transition: all 0.3s ease; display: flex; align-items: center; gap: 6px; } .lang-link:hover { background: rgba(255, 255, 255, 0.2); color: white; } .lang-link.active { background: rgba(255, 255, 255, 0.25); color: white; font-weight: 600; } .email-form { max-width: 500px; margin: 0 auto; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 40px; border-radius: 20px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease; } .email-form:hover { transform: translateY(-5px); } .form-content { opacity: 1; transition: opacity 0.3s ease; } .form-content.hidden { opacity: 0; display: none; } .success-content { opacity: 0; display: none; transition: opacity 0.3s ease; } .success-content.show { opacity: 1; display: block; } .form-title { font-size: 1.5rem; margin-bottom: 24px; color: white; } .form-description { font-size: 1.1rem; margin-bottom: 30px; color: rgba(255, 255, 255, 0.9); } .input-group { display: flex; gap: 12px; margin-bottom: 20px; } .email-input { flex: 1; padding: 16px 20px; font-size: 16px; border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 12px; background: rgba(255, 255, 255, 0.1); color: white; transition: all 0.3s ease; } .email-input::placeholder { color: rgba(255, 255, 255, 0.6); } .email-input:focus { outline: none; border-color: #ff2442; background: rgba(255, 255, 255, 0.2); } .submit-btn { padding: 16px 32px; font-size: 16px; font-weight: 600; background: #ff2442; color: white; border: none; border-radius: 12px; cursor: pointer; transition: all 0.3s ease; white-space: nowrap; } .submit-btn:hover { background: #e01e35; transform: scale(1.05); } .submit-btn:active { transform: scale(0.98); } .submit-btn:disabled { opacity: 0.6; cursor: not-allowed; } .loading-spinner { display: none; width: 20px; height: 20px; border: 2px solid rgba(255, 255, 255, 0.3); border-top: 2px solid white; border-radius: 50%; animation: spin 1s linear infinite; } .loading-spinner.show { display: inline-block; } .btn-text { transition: opacity 0.3s ease; } .btn-text.hidden { opacity: 0; } .privacy-note { font-size: 0.9rem; color: rgba(255, 255, 255, 0.7); text-align: center; } .success-message { text-align: center; } .success-icon { width: 80px; height: 80px; margin: 0 auto 24px; background: #4ade80; border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: scaleIn 0.5s ease-out; } .success-icon svg { width: 40px; height: 40px; stroke: white; stroke-width: 3; } .features { margin-top: 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; } .feature-card { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); padding: 30px; border-radius: 16px; text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease; } .feature-card:hover { transform: translateY(-5px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .feature-icon { width: 60px; height: 60px; margin: 0 auto 20px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; } .feature-title { font-size: 1.2rem; margin-bottom: 12px; color: white; } .feature-description { color: rgba(255, 255, 255, 0.8); line-height: 1.6; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } @media (max-width: 768px) { /* Language Dropdown */ .lang-dropdown { position: fixed; top: 20px; right: 20px; z-index: 1000; } .lang-dropdown-trigger { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; padding: 10px 16px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; color: white; transition: all 0.3s ease; min-width: 120px; justify-content: space-between; } .lang-dropdown-trigger:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .lang-dropdown-trigger.active { background: rgba(255, 255, 255, 0.25); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); } .dropdown-arrow { transition: transform 0.3s ease; font-size: 12px; } .lang-dropdown-trigger.active .dropdown-arrow { transform: rotate(180deg); } .lang-dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; min-width: 200px; overflow: hidden; } .lang-dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); } .lang-option { display: flex; align-items: center; gap: 12px; padding: 12px 16px; color: #333; text-decoration: none; transition: all 0.2s ease; font-size: 14px; } .lang-option:hover { background: rgba(102, 126, 234, 0.1); color: #667eea; } .lang-option.active { background: rgba(102, 126, 234, 0.15); color: #667eea; font-weight: 600; } .lang-flag { font-size: 18px; width: 24px; text-align: center; } .lang-name { flex: 1; } .lang-code { font-size: 12px; color: rgba(0, 0, 0, 0.5); } .lang-link { padding: 6px 12px; font-size: 13px; } .container { width: 95%; padding: 15px; } .email-form { padding: 30px 20px; } .input-group { flex-direction: column; } .submit-btn { width: 100%; } .features { margin-top: 60px; grid-template-columns: 1fr; } .feature-card { padding: 25px 20px; } } @media (max-width: 480px) { .hero-title { margin-bottom: 20px; } .hero-subtitle { margin-bottom: 30px; } .email-form { padding: 25px 15px; } .form-title { font-size: 1.3rem; } .form-description { font-size: 1rem; } } </style> </head> <body>  <div class="lang-dropdown"> <button class="lang-dropdown-trigger" id="langDropdownTrigger"> <span class="current-lang"> <span class="lang-flag">🇯🇵</span> <span class="lang-name">日本�?/span> </span> <span class="dropdown-arrow">�?/span> </button> <div class="lang-dropdown-menu" id="langDropdownMenu"> <a href="../index.html" class="lang-option" data-lang="zh-cn"> <span class="lang-flag">🇨🇳</span> <span class="lang-name">中文</span> <span class="lang-code">zh-CN</span> </a> <a href="index-en.html" class="lang-option" data-lang="en"> <span class="lang-flag">🇺🇸</span> <span class="lang-name">English</span> <span class="lang-code">en</span> </a> <a href="index-es.html" class="lang-option" data-lang="es"> <span class="lang-flag">🇪🇸</span> <span class="lang-name">Español</span> <span class="lang-code">es</span> </a> <a href="index-ja.html" class="lang-option active" data-lang="ja"> <span class="lang-flag">🇯🇵</span> <span class="lang-name">日本�?/span> <span class="lang-code">ja</span> </a> <a href="index-de.html" class="lang-option" data-lang="de"> <span class="lang-flag">🇩🇪</span> <span class="lang-name">Deutsch</span> <span class="lang-code">de</span> </a> <a href="index-fr.html" class="lang-option" data-lang="fr"> <span class="lang-flag">🇫🇷</span> <span class="lang-name">Français</span> <span class="lang-code">fr</span> </a> <a href="index-ko.html" class="lang-option" data-lang="ko"> <span class="lang-flag">🇰🇷</span> <span class="lang-name">한국�?/span> <span class="lang-code">ko</span> </a> <a href="index-ar.html" class="lang-option" data-lang="ar"> <span class="lang-flag">🇸🇦</span> <span class="lang-name">العربية</span> <span class="lang-code">ar</span> </a> </div> </div> <div class="container"> <section class="hero-section"> <h1 class="hero-title">🚀 Chromeプラグインまもなく公�?/h1> <p class="hero-subtitle">強力なAIアシスタントで、よりスマートで効率的なブラウジング体験�?/p> <div class="email-form"> <div class="form-content" id="formContent"> <h2 class="form-title">📧 優先アクセスを取�?/h2> <p class="form-description">プラグインがリリースされた際に最初にお知らせするメールアドレスを入力してください</p> <form id="emailForm"> <div class="input-group"> <input type="email" class="email-input" id="emailInput" placeholder="メールアドレスを入力してください" required autocomplete="email" > <button type="submit" class="submit-btn" id="submitBtn"> <span class="btn-text" id="btnText">今すぐ購�?/span> <div class="loading-spinner" id="loadingSpinner"></div> </button> </div> </form> <p class="privacy-note">プライバシーを尊重し、第三者との情報共有はいたしません</p> </div> <div class="success-content" id="successContent"> <div class="success-message"> <div class="success-icon"> <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"> <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"></path> </svg> </div> <h2 class="form-title">�?ご関心ありがとうございます！</h2> <p class="form-description">プラグインは現在クローズドベータ開発中です。メールで招待コードをお送りします�?/p> </div> </div> </div> <div class="features"> <div class="feature-card"> <div class="feature-icon">🤖</div> <h3 class="feature-title">AIスマートアシスタント</h3> <p class="feature-description">高度なAI技術を統合し、インテリジェントなWebコンテンツ分析と提案を提�?/p> </div> <div class="feature-card"> <div class="feature-icon">�?/div> <h3 class="feature-title">超高速応�?/h3> <p class="feature-description">通常のブラウジング体験に影響を与えないミリ秒単位の応答速度</p> </div> <div class="feature-card"> <div class="feature-icon">🔒</div> <h3 class="feature-title">プライバシー保護</h3> <p class="feature-description">ローカルデータ処理により、個人情報の安全性を確保</p> </div> </div> </section> </div> <script> document.addEventListener('DOMContentLoaded', function() { // Language Dropdown const langDropdownTrigger = document.getElementById('langDropdownTrigger'); const langDropdownMenu = document.getElementById('langDropdownMenu'); const langOptions = document.querySelectorAll('.lang-option'); // Toggle dropdown langDropdownTrigger.addEventListener('click', function(e) { e.preventDefault(); const isOpen = langDropdownMenu.classList.contains('show'); if (isOpen) { closeDropdown(); } else { openDropdown(); } }); function openDropdown() { langDropdownMenu.classList.add('show'); langDropdownTrigger.classList.add('active'); } function closeDropdown() { langDropdownMenu.classList.remove('show'); langDropdownTrigger.classList.remove('active'); } // Close dropdown when clicking outside document.addEventListener('click', function(e) { if (!e.target.closest('.lang-dropdown')) { closeDropdown(); } }); // Handle language option clicks langOptions.forEach(option => { option.addEventListener('click', function(e) { e.preventDefault(); const href = this.getAttribute('href'); const lang = this.getAttribute('data-lang'); const flag = this.querySelector('.lang-flag').textContent; const name = this.querySelector('.lang-name').textContent; // Update current language display const currentLang = langDropdownTrigger.querySelector('.current-lang'); currentLang.querySelector('.lang-flag').textContent = flag; currentLang.querySelector('.lang-name').textContent = name; // Update active state langOptions.forEach(opt => opt.classList.remove('active')); this.classList.add('active'); // Store language preference localStorage.setItem('preferredLanguage', lang); // Navigate to the new language page window.location.href = href; }); }); // Email Form const emailForm = document.getElementById('emailForm'); const emailInput = document.getElementById('emailInput'); const submitBtn = document.getElementById('submitBtn'); const btnText = document.getElementById('btnText'); const loadingSpinner = document.getElementById('loadingSpinner'); const formContent = document.getElementById('formContent'); const successContent = document.getElementById('successContent'); const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; emailForm.addEventListener('submit', async function(e) { e.preventDefault(); const email = emailInput.value.trim(); if (!emailRegex.test(email)) { alert('有効なメールアドレスを入力してくださ�?); emailInput.focus(); return; } submitBtn.disabled = true; btnText.classList.add('hidden'); loadingSpinner.classList.add('show'); await new Promise(resolve => setTimeout(resolve, 1000)); formContent.classList.add('hidden'); successContent.classList.add('show'); localStorage.setItem('waitlistEmail', email); }); emailInput.addEventListener('input', function() { if (emailRegex.test(this.value.trim())) { this.style.borderColor = 'rgba(74, 222, 128, 0.5)'; } else { this.style.borderColor = 'rgba(255, 255, 255, 0.3)'; } }); window.addEventListener('load', function() { document.body.style.opacity = '0'; setTimeout(() => { document.body.style.transition = 'opacity 0.5s ease'; document.body.style.opacity = '1'; }, 100); }); }); </script> \n <script src="../js/ga.js"></script> </body> </html>