Spaces:
Running
Running
Download index.html from Lunaron/lunaron-tools: direct link, hf CLI and curl.
- Browser
- Download file 39.7 kB
-
https://huggingface.co/spaces/Lunaron/lunaron-tools/resolve/main/index.html
- Command line
-
hf download hf://spaces/Lunaron/lunaron-tools/index.html
-
curl -L -o index.html https://huggingface.co/spaces/Lunaron/lunaron-tools/resolve/main/index.html
39.7 kB
| <html lang="ja" data-theme="light"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <meta name="description" content="Lunaron Tools — Web制作者・マーケターのための高性能ブラウザツール。画像処理、テキスト解析、クリエイティブ計測まで。無料プランから始められ、プロプランで制限なし。" /> | |
| <meta name="keywords" content="ブラウザツール, 画像圧縮, 背景透過, QRコード, テキスト解析, Webツール" /> | |
| <title>Lunaron Tools — プロ向けブラウザツール集</title> | |
| <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=BIZ+UDPGothic:wght@400;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Syne:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600;800&display=swap" rel="stylesheet" /> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <!-- NAVIGATION --> | |
| <nav aria-label="メインナビゲーション"> | |
| <div class="nav-inner"> | |
| <a href="/index.html" class="logo" aria-label="Lunaron Tools ホーム"> | |
| <img class="logo-img" src="/logo.svg" alt="Lunaron Logo" /> | |
| <span class="logo-text">Lunaron <span>Tools</span></span> | |
| </a> | |
| <div class="nav-links" role="navigation"> | |
| <button class="nav-link" data-section="tools-section" data-i18n="nav.tools">ツール</button> | |
| <button class="nav-link" data-section="pricing" data-i18n="nav.pricing">料金プラン</button> | |
| </div> | |
| <div class="nav-actions"> | |
| <button class="lang-toggle" aria-label="言語切り替え"> | |
| <span class="lang-ja active">JA</span><span class="lang-en">EN</span> | |
| </button> | |
| <button id="navLogin" class="btn-ghost" data-action="open-login" data-i18n="nav.login">ログイン</button> | |
| <button id="navSignup" class="btn-primary signup-btn" data-action="open-signup" data-i18n="nav.signup">無料で始める</button> | |
| <div id="navAvatar" style="display:none; position:relative;"> | |
| <button id="avatarBtn" class="avatar-btn" aria-label="アカウントメニュー">U</button> | |
| </div> | |
| <button class="theme-toggle" id="themeToggle" aria-label="テーマ切り替え"> | |
| <svg class="icon-sun" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"> | |
| <circle cx="8" cy="8" r="3"/><path d="M8 1v1.5M8 13.5V15M15 8h-1.5M2.5 8H1M12.2 3.8l-1 1M4.8 11.2l-1 1M12.2 12.2l-1-1M4.8 4.8l-1-1"/> | |
| </svg> | |
| <svg class="icon-moon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" aria-hidden="true"> | |
| <path d="M13.5 10.5A6 6 0 0 1 5.5 2.5a6 6 0 1 0 8 8z"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- ACCOUNT DROPDOWN MENU --> | |
| <div id="accountMenu" class="account-menu" role="menu"> | |
| <div class="account-menu-top"> | |
| <div id="accountName" class="account-name">ユーザー名</div> | |
| <div id="accountEmail" class="account-email">user@example.com</div> | |
| <span id="accountPlan" class="account-plan free-plan">Free Plan</span> | |
| </div> | |
| <div class="account-menu-items"> | |
| <button class="account-menu-item" role="menuitem"> | |
| <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="5" r="3"/><path d="M2 14c0-3.3 2.7-6 6-6s6 2.7 6 6"/></svg> | |
| アカウント設定 | |
| </button> | |
| <button class="account-menu-item" role="menuitem" data-action="scroll-pricing"> | |
| <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 1l2 5h5l-4 3 1.5 5L8 11l-4.5 3L5 9 1 6h5z"/></svg> | |
| プロにアップグレード | |
| </button> | |
| <button class="account-menu-item" role="menuitem"> | |
| <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="8" cy="8" r="7"/><path d="M8 5v3l2 2"/></svg> | |
| 利用履歴 | |
| </button> | |
| <div class="account-menu-divider"></div> | |
| <button id="logoutBtn" class="account-menu-item danger" role="menuitem"> | |
| <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 2H2v12h4M11 11l3-3-3-3M14 8H6"/></svg> | |
| ログアウト | |
| </button> | |
| </div> | |
| </div> | |
| <!-- MAIN CONTENT --> | |
| <main> | |
| <!-- HERO --> | |
| <section class="hero" aria-labelledby="hero-heading"> | |
| <div class="hero-bg-accent" aria-hidden="true"> | |
| <div class="glow-sphere-1"></div> | |
| <div class="glow-sphere-2"></div> | |
| </div> | |
| <h1 id="hero-heading"> | |
| <span class="line-1" data-i18n="hero.title1">次世代の</span> | |
| <span class="line-2"><span class="grad" data-i18n="hero.title2">ブラウザツール群</span></span> | |
| </h1> | |
| <div class="hero-content-row"> | |
| <div class="hero-description"> | |
| <p data-i18n="hero.desc">画像処理、テキスト解析、クリエイティブ計測。すべてがブラウザ内で完結する超高速ツール群。プロフェッショナルのための、研ぎ澄まされた作業環境をここに。</p> | |
| <div class="hero-cta"> | |
| <button class="btn-cta-primary" data-action="open-signup" data-i18n="hero.btn.start"> | |
| 無料で始める | |
| <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2"><path d="M5 3l5 5-5 5"/></svg> | |
| </button> | |
| <button class="btn-cta-secondary" data-action="scroll-pricing" data-i18n="hero.btn.plans"> | |
| プランを見る | |
| </button> | |
| </div> | |
| </div> | |
| <div class="hero-decor-box"> | |
| <div class="decor-line"></div> | |
| <div class="hero-stats-mini"> | |
| <div class="mini-stat"> | |
| <span class="stat-val">14+</span> | |
| <span class="stat-lab">TOOLS</span> | |
| </div> | |
| <div class="mini-stat"> | |
| <span class="stat-val">100%</span> | |
| <span class="stat-lab">LOCAL</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- TOOLS SECTION --> | |
| <section id="tools-section" class="tools-section" aria-label="ツール一覧"> | |
| <div class="filter-row" role="group" aria-label="カテゴリーフィルター"> | |
| <button class="filter-btn active" data-filter="all" data-i18n="cat.all"> | |
| <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="1" y="1" width="6" height="6" rx="1.5"/><rect x="9" y="1" width="6" height="6" rx="1.5"/><rect x="1" y="9" width="6" height="6" rx="1.5"/><rect x="9" y="9" width="6" height="6" rx="1.5"/></svg> | |
| すべて | |
| </button> | |
| <button class="filter-btn" data-filter="image" data-i18n="cat.image"> | |
| <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><rect x="1" y="1" width="14" height="14" rx="2"/><circle cx="5.5" cy="5.5" r="1.5"/><path d="M1 11l4-4 3 3 2-2 5 5"/></svg> | |
| 画像処理 | |
| </button> | |
| <button class="filter-btn" data-filter="text"> | |
| <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><path d="M2 4h12M2 8h8M2 12h10"/></svg> | |
| テキスト | |
| </button> | |
| <button class="filter-btn" data-filter="creative" data-i18n="cat.creative"> | |
| <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="8" cy="8" r="5"/><circle cx="8" cy="8" r="2"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2"/></svg> | |
| クリエイティブ | |
| </button> | |
| <div class="search-container" style="position: relative; margin-left: auto;"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-muted);"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg> | |
| <input type="text" id="toolSearchInput" placeholder="ツールを検索 (Ctrl+K)" style="padding: 10px 16px 10px 40px; border-radius: 999px; border: 1px solid var(--border-glass); background: var(--bg-glass); backdrop-filter: blur(12px); color: var(--text-primary); font-size: 14px; width: 240px; outline: none; transition: all 0.3s ease; box-shadow: var(--shadow-glass);" onfocus="this.style.width='300px'; this.style.borderColor='var(--accent-3)'" onblur="this.style.width='240px'; this.style.borderColor='var(--border-glass)'"> | |
| </div> | |
| </div> | |
| <!-- FAVORITES SECTION --> | |
| <div class="category-section" id="fav-section" style="display: none;"> | |
| <div class="section-header"> | |
| <div class="section-label"> | |
| <div class="cat-dot" style="background: #f59e0b; display:block;" aria-hidden="true"></div> | |
| <h2>お気に入り</h2> | |
| </div> | |
| </div> | |
| <div class="tools-grid" id="fav-grid" role="list"></div> | |
| </div> | |
| <!-- IMAGE TOOLS --> | |
| <div class="category-section card-cat-image" data-category="image"> | |
| <div class="section-header"> | |
| <div class="section-label"> | |
| <div class="cat-dot" style="background: var(--accent-1);" aria-hidden="true"></div> | |
| <h2 data-i18n="cat.image">画像処理</h2> | |
| <span class="tool-count">5ツール</span> | |
| </div> | |
| <span class="section-meta">ローカル処理 · データ外部送信なし</span> | |
| </div> | |
| <div class="tools-grid" role="list"> | |
| <a class="tool-card" href="tools/bg-remove.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-image" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2z"/><path d="M8 16s1.5-2 4-2 4 2 4 2"/><path d="M9 9h.01M15 9h.01"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name" data-i18n="tool.bg-remove.title">背景透過 AI</div> | |
| <div class="tool-desc" data-i18n="tool.bg-remove.desc">人物や商品の背景をAIが自動で除去。高精度な切り抜きを数秒で。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-ml">AI処理</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/upscale.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-image" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M21 21H3M21 3v18M3 21V3"/><path d="M8 16l5-5 3 3 4-4"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name" data-i18n="tool.upscale.title">画像アップスケール</div> | |
| <div class="tool-desc" data-i18n="tool.upscale.desc">AIが低解像度の画像を鮮明に拡大。ノイズを除去し細部を復元。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-free">無料</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/compress.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-image" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M13 2v7h7"/><path d="M9 15l2 2 4-4"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name">画像圧縮 · 変換</div> | |
| <div class="tool-desc">JPEG / PNG / WebP 相互変換と品質調整。ロスレス対応。バッチ処理可能。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-free">無料</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/file-converter.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-util" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6"/><circle cx="12" cy="14" r="3"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name">ファイル一括変換・加工</div> | |
| <div class="tool-desc">画像のWebP変換、動画からのMP3抽出、PDF結合をブラウザで一括処理。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-util">ユーティリティ</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/qrcode.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-image" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="5" y="5" width="3" height="3" fill="currentColor" stroke="none"/><rect x="16" y="5" width="3" height="3" fill="currentColor" stroke="none"/><rect x="5" y="16" width="3" height="3" fill="currentColor" stroke="none"/><path d="M14 14h3v3M17 14v3h3M14 20h3"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name">高機能QRコード作成</div> | |
| <div class="tool-desc">色変更、PNG / SVGエクスポート、URL・Wi-Fi・メール対応。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-free">無料</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/sns-preview.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-image" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="2" y="4" width="20" height="16" rx="3"/><path d="M2 9h20"/><circle cx="6" cy="6.5" r="1" fill="currentColor" stroke="none"/><circle cx="9.5" cy="6.5" r="1" fill="currentColor" stroke="none"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name">SNS画像シミュレーター</div> | |
| <div class="tool-desc">X / YouTube / Instagram / OGPのトリミングをリアルタイムプレビュー。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-free">無料</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/ai-image.html" role="listitem" tabindex="0" style="background:linear-gradient(135deg,rgba(168,85,247,0.06),rgba(59,130,246,0.04));border-color:rgba(168,85,247,0.2);"> | |
| <div class="tool-icon-wrap" style="background:linear-gradient(135deg,rgba(168,85,247,0.15),rgba(59,130,246,0.1));" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="#a855f7" stroke-width="1.8"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name" style="display:flex;align-items:center;gap:8px;"> | |
| AI画像生成 | |
| <span style="font-size:10px;font-weight:700;background:rgba(168,85,247,0.15);color:#a855f7;padding:2px 7px;border-radius:10px;letter-spacing:0.05em;">NEW</span> | |
| </div> | |
| <div class="tool-desc">テキストで指示するだけでAIが画像を生成。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-ml">AI生成</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- TEXT TOOLS --> | |
| <div class="category-section card-cat-text" data-category="text"> | |
| <div class="section-header"> | |
| <div class="section-label"> | |
| <div class="cat-dot" style="background: var(--accent-2);" aria-hidden="true"></div> | |
| <h2>テキスト · ユーティリティ</h2> | |
| <span class="tool-count">4ツール</span> | |
| </div> | |
| </div> | |
| <div class="tools-grid" role="list"> | |
| <a class="tool-card" href="tools/charcount.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-text" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M17 10H3M21 6H3M21 14H3M17 18H3"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name">高機能文字数カウント</div> | |
| <div class="tool-desc">文字数・行数・バイト数・読了時間をリアルタイム計測。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-util">ユーティリティ</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/password.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-text" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="5" y="11" width="14" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/><circle cx="12" cy="16" r="1" fill="currentColor" stroke="none"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name">強固なパスワード生成</div> | |
| <div class="tool-desc">暗号的に安全な乱数生成。長さ・記号・エントロピー表示対応。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-util">ユーティリティ</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/diff.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-text" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M11 5H6a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h11a2 2 0 0 0 2-2v-5"/><path d="M11 13l9-9"/><path d="M15 4h5v5"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name">テキスト差分チェック</div> | |
| <div class="tool-desc">2つのテキストの差分を色付きでハイライト表示(行/単語/文字単位)。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-util">ユーティリティ</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/report.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-text" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><path d="M14 2v6h6M16 13H8M16 17H8M10 9H8"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name">PDF・テキスト出力</div> | |
| <div class="tool-desc">テキストをPDF / Markdown / CSV でダウンロード。書式ツールバー付きエディタ。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-free">無料</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- CREATIVE TOOLS --> | |
| <div class="category-section card-cat-creative" data-category="creative"> | |
| <div class="section-header"> | |
| <div class="section-label"> | |
| <div class="cat-dot" style="background: var(--accent-3);" aria-hidden="true"></div> | |
| <h2>クリエイティブ · 計測</h2> | |
| <span class="tool-count">5ツール</span> | |
| </div> | |
| </div> | |
| <div class="tools-grid" role="list"> | |
| <a class="tool-card" href="tools/colorpicker.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-creative" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="12" r="10"/><path d="M12 2a10 10 0 0 1 0 20"/><path d="M12 7a5 5 0 0 1 0 10"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name">カラーピッカー · 抽出</div> | |
| <div class="tool-desc">RGB/HSLスライダーで色を選択。画像からメインカラーを自動抽出・履歴保存。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-free">無料</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/timer.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-creative" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="12" cy="13" r="9"/><path d="M12 8v5l3 3"/><path d="M9 2h6"/><path d="M12 2v3"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name">タイマー / ストップウォッチ</div> | |
| <div class="tool-desc">フルスクリーン対応。ラップ計測・アラーム・カスタムUI。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-free">無料</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/text-creator.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-creative" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name" data-i18n="tool.text-creator.title">テキスト作成</div> | |
| <div class="tool-desc" data-i18n="tool.text-creator.desc">8種テンプレート(メール・SNS・ブログ等)から素早く文章を生成。ダミーテキスト対応。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-util">ユーティリティ</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/color.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-creative" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name" data-i18n="tool.color.title">カラーパレット生成</div> | |
| <div class="tool-desc" data-i18n="tool.color.desc">ブランドカラーから補色・類似色を自動生成。HEX / RGB / HSL出力。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-free">無料</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <a class="tool-card" href="tools/tone-analysis.html" role="listitem" tabindex="0"> | |
| <div class="tool-icon-wrap icon-creative" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name" data-i18n="tool.tone-analysis.title">トーン分析 AI</div> | |
| <div class="tool-desc" data-i18n="tool.tone-analysis.desc">文章の感情・フォーマル度・読みやすさをAIでスコアリング。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-ml">AI処理</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- AI画像レストア --> | |
| <a class="tool-card" href="tools/restore.html" role="listitem" tabindex="0" data-category="image"> | |
| <div class="tool-icon-wrap icon-image" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name" data-i18n="tool.restore.title">AI 画像修復</div> | |
| <div class="tool-desc" data-i18n="tool.restore.desc">古い写真やぼやけた顔をAIで鮮明に復元・ノイズ除去。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-ml">Pro</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- アセット一括生成 --> | |
| <a class="tool-card" href="tools/asset-gen.html" role="listitem" tabindex="0" data-category="util"> | |
| <div class="tool-icon-wrap icon-util" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name" data-i18n="tool.asset-gen.title">アセット一括生成</div> | |
| <div class="tool-desc" data-i18n="tool.asset-gen.desc">ファビコンやSNS用画像を全サイズ一括でリサイズ&書き出し。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-free">無料</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| <!-- Code to Image --> | |
| <a class="tool-card" href="tools/code-image.html" role="listitem" tabindex="0" data-category="creative"> | |
| <div class="tool-icon-wrap icon-creative" aria-hidden="true"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg> | |
| </div> | |
| <div class="tool-info"> | |
| <div class="tool-name" data-i18n="tool.code-image.title">Web Live Preview</div> | |
| <div class="tool-desc" data-i18n="tool.code-image.desc">HTMLとCSSを入力して、リアルタイムでサイトのデザインを確認。</div> | |
| </div> | |
| <div class="tool-footer"> | |
| <span class="tool-tag tag-util">ユーティリティ</span> | |
| <div class="tool-arrow" aria-hidden="true"> | |
| <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M2.5 6h7M6.5 3l3 3-3 3"/></svg> | |
| </div> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- PRICING --> | |
| <section id="pricing" class="pricing-section" aria-labelledby="pricing-heading"> | |
| <div class="pricing-header"> | |
| <div class="pricing-eyebrow"> | |
| <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" aria-hidden="true"><path d="M6 1l1.5 3.5H11L8.25 6.75l1 3.75L6 8.5 2.75 10.5l1-3.75L1 4.5h3.5L6 1z"/></svg> | |
| 料金プラン | |
| </div> | |
| <h2 id="pricing-heading">現在はすべての機能を<br />無料でご利用いただけます</h2> | |
| <p>Lunaron Toolsは現在ベータ版として公開されており、すべてのツールを無料でご利用いただけます。将来的に有料プランが導入される可能性があります。</p> | |
| </div> | |
| <div class="pricing-grid"> | |
| <!-- BETA FREE PLAN --> | |
| <div class="pricing-card featured" style="max-width: 500px; margin: 0 auto;"> | |
| <div class="plan-name">Beta Free</div> | |
| <div class="plan-price"> | |
| <span class="plan-currency">¥</span> | |
| <span class="plan-amount">0</span> | |
| <span class="plan-per">/ 月</span> | |
| </div> | |
| <div class="plan-desc">ベータ期間中につき制限なし</div> | |
| <ul class="plan-features" aria-label="機能"> | |
| <li> | |
| <svg class="feat-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 8l4 4 6-6"/></svg> | |
| 全てのツールへの無制限アクセス | |
| </li> | |
| <li> | |
| <svg class="feat-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 8l4 4 6-6"/></svg> | |
| ブラウザ内での高速ローカル処理 | |
| </li> | |
| <li> | |
| <svg class="feat-check" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M3 8l4 4 6-6"/></svg> | |
| 外部サーバーへの不要なデータ送信なし(AI画像生成等の一部を除く) | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <!-- FOOTER --> | |
| <footer> | |
| <div class="footer-inner"> | |
| <div class="footer-brand"> | |
| <div class="footer-logo">Lunaron <span>Tools</span></div> | |
| <div class="footer-copy">© 2026 Lunaron — ブラウザ完結 · プライバシー保護 · サーバーレス</div> | |
| <div class="footer-links"> | |
| <button class="footer-link" data-action="open-login">ログイン</button> | |
| <button class="footer-link" data-action="scroll-pricing">料金プラン</button> | |
| <a href="privacy.html" class="footer-link">プライバシーポリシー</a> | |
| <a href="terms.html" class="footer-link">利用規約</a> | |
| <a href="contact.html" class="footer-link">お問い合わせ</a> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- AUTH MODAL --> | |
| <div id="authOverlay" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modalTitle"> | |
| <div id="authModal" class="modal"> | |
| <div class="modal-header"> | |
| <div> | |
| <div id="modalTitle" class="modal-title">アカウント</div> | |
| <div class="modal-subtitle">Lunaron Toolsにアクセス</div> | |
| </div> | |
| <button id="authClose" class="modal-close" aria-label="閉じる"> | |
| <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2"><path d="M1 1l12 12M13 1L1 13"/></svg> | |
| </button> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="modal-tabs" role="tablist"> | |
| <button class="modal-tab active" data-tab="login" role="tab">ログイン</button> | |
| <button class="modal-tab" data-tab="signup" role="tab">新規登録</button> | |
| </div> | |
| <!-- LOGIN FORM --> | |
| <div id="loginForm"> | |
| <button class="social-btn" type="button"> | |
| <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg> | |
| Googleで続ける | |
| </button> | |
| <div class="form-divider">または</div> | |
| <form onsubmit="return false;" id="loginFormEl" onsubmit="return false;"> | |
| <div class="form-group"> | |
| <label class="form-label" for="loginEmail">メールアドレス</label> | |
| <input class="form-input" type="email" id="loginEmail" name="email" placeholder="you@example.com" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="loginPassword">パスワード</label> | |
| <input class="form-input" type="password" id="loginPassword" name="password" placeholder="••••••••" required /> | |
| </div> | |
| <button class="form-submit" type="submit">ログイン</button> | |
| </form> | |
| <div class="form-footer"> | |
| アカウントをお持ちでない方は <a data-switch-tab="signup">新規登録</a> | |
| </div> | |
| </div> | |
| <!-- SIGNUP FORM --> | |
| <div id="signupForm" style="display:none;"> | |
| <button class="social-btn" type="button"> | |
| <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/></svg> | |
| Googleで続ける | |
| </button> | |
| <div class="form-divider">または</div> | |
| <form onsubmit="return false;" id="signupFormEl"> | |
| <div class="form-group"> | |
| <label class="form-label" for="signupName">お名前</label> | |
| <input class="form-input" type="text" id="signupName" name="name" placeholder="田中 太郎" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="signupEmail">メールアドレス</label> | |
| <input class="form-input" type="email" id="signupEmail" name="email" placeholder="you@example.com" required /> | |
| </div> | |
| <div class="form-group"> | |
| <label class="form-label" for="signupPassword">パスワード</label> | |
| <input class="form-input" type="password" id="signupPassword" name="password" placeholder="8文字以上" required /> | |
| </div> | |
| <button class="form-submit" type="submit">無料で登録する</button> | |
| </form> | |
| <div class="form-footer"> | |
| すでにアカウントをお持ちの方は <a data-switch-tab="login">ログイン</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Supabase設定を window.__LUNARON_CONFIG__ に注入 --> | |
| <!-- 本番環境ではサーバーサイドで動的に値を埋め込む。 --> | |
| <!-- Cloudflare Pages では _worker.js か Pages Functions でHTMLを書き換えるか、 --> | |
| <!-- ビルド時に環境変数を埋め込む (wrangler.toml の vars を使用) --> | |
| <script> | |
| window.__LUNARON_CONFIG__ = { | |
| supabaseUrl: 'https://blvqlnjkmuabeedgzitj.supabase.co', | |
| supabaseAnon: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsdnFsbmprbXVhYmVlZGd6aXRqIiwicm9sZSI6ImFub24iLCJpYXQiOjE3Nzg5MjI5MTIsImV4cCI6MjA5NDQ5ODkxMn0.Z_0GhYYdfHcYFlc1cgumHoldw1fJmOVKPpcdR0VD0CM', | |
| }; | |
| </script> | |
| <!-- Auth モジュール (Supabase) --> | |
| <script src="components/auth.js"></script> | |
| <script src="main.js"></script> | |
| <script type="module" src="app.js"></script> | |
| <script src="components/layout.js"></script> | |
| <script> | |
| // テーマを先に適用 | |
| (function() { | |
| const t = localStorage.getItem('lunaronTheme') || 'light'; | |
| document.documentElement.setAttribute('data-theme', t); | |
| })(); | |
| // i18nを初期化(layout.jsで定義済み) | |
| if (document.readyState === 'loading') { | |
| document.addEventListener('DOMContentLoaded', function() { | |
| setTimeout(function() { if (window.LunaronI18n) window.LunaronI18n.init(); }, 50); | |
| }); | |
| } else { | |
| setTimeout(function() { if (window.LunaronI18n) window.LunaronI18n.init(); }, 50); | |
| } | |
| </script> | |
| </body> | |
| </html> | |