Spaces:
Running
Running
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HarmoSplit — 料金プラン</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/style.css"> | |
| <style> | |
| .pricing-hero { text-align: center; margin-bottom: 2.5rem; } | |
| .pricing-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: .75rem; | |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); | |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } | |
| .pricing-hero p { color: var(--text-muted); font-size: .95rem; } | |
| .plan-card { | |
| position: relative; | |
| background: var(--surface); | |
| border: 2px solid var(--accent); | |
| border-radius: var(--radius); | |
| padding: 2.25rem 2rem; | |
| text-align: center; | |
| backdrop-filter: blur(20px); | |
| box-shadow: 0 0 40px rgba(124,106,247,.2); | |
| } | |
| .plan-badge { | |
| position: absolute; top: -13px; left: 50%; transform: translateX(-50%); | |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); | |
| color: #fff; font-size: .75rem; font-weight: 700; | |
| padding: .25rem 1rem; border-radius: 99px; letter-spacing: .06em; | |
| white-space: nowrap; | |
| } | |
| .plan-name { font-size: 1.1rem; font-weight: 600; color: var(--text-muted); margin-bottom: .5rem; } | |
| .plan-price { | |
| font-size: 3.2rem; font-weight: 800; letter-spacing: -0.03em; margin: .5rem 0; | |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); | |
| -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; | |
| } | |
| .plan-price span { font-size: 1rem; font-weight: 400; color: var(--text-muted); } | |
| .plan-features { list-style: none; margin: 1.5rem 0 2rem; text-align: left; } | |
| .plan-features li { | |
| padding: .5rem 0; border-bottom: 1px solid var(--border); | |
| font-size: .9rem; display: flex; align-items: center; gap: .6rem; | |
| } | |
| .plan-features li:last-child { border: none; } | |
| .plan-features li::before { content: "✅"; flex-shrink: 0; } | |
| .nav-link { color: var(--accent2); text-decoration: none; font-size: .85rem; } | |
| .nav-link:hover { text-decoration: underline; } | |
| .nav-bar { text-align: center; margin-bottom: 1.5rem; } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bg-orbs"> | |
| <div class="orb orb1"></div> | |
| <div class="orb orb2"></div> | |
| <div class="orb orb3"></div> | |
| </div> | |
| <main class="container"> | |
| <div class="nav-bar"> | |
| <a class="nav-link" href="/">← アプリに戻る</a> | |
| </div> | |
| <div class="pricing-hero"> | |
| <div class="logo" style="justify-content:center;margin-bottom:.75rem;"> | |
| <span class="logo-icon">🎧</span> | |
| <span class="logo-text">HarmoSplit</span> | |
| </div> | |
| <h1>プランを選択してください</h1> | |
| <p>月額サブスクリプションでいつでも解約可能</p> | |
| </div> | |
| <div class="plan-card"> | |
| <div class="plan-badge">🎵 スタンダードプラン</div> | |
| <p class="plan-name">月額</p> | |
| <p class="plan-price" id="priceDisplay">¥ - <span>/ 月</span></p> | |
| <ul class="plan-features"> | |
| <li>音声・動画ファイルを無制限に処理</li> | |
| <li>Demucs AI による 6 ステム分離</li> | |
| <li>UVR MDX-NET KARA でリード / ハモリ分離</li> | |
| <li>MP3 / WAV / MP4 / MOV など対応</li> | |
| <li>処理完了後に WAV をダウンロード</li> | |
| <li>いつでも解約可能</li> | |
| </ul> | |
| <button class="btn btn-primary" id="checkoutBtn">今すぐ始める →</button> | |
| </div> | |
| <p style="text-align:center;margin-top:1.25rem;font-size:.78rem;color:var(--text-muted);"> | |
| Stripe によるセキュアな決済 🔒<br>クレジットカード・デビットカード対応 | |
| </p> | |
| </main> | |
| <footer class="footer"> | |
| <p>🎧 HarmoSplit — Powered by Demucs & UVR MDX-NET</p> | |
| </footer> | |
| <script> | |
| // 料金を取得して表示 | |
| fetch('/pricing-info').then(r => r.json()).then(d => { | |
| if (d.price) document.getElementById('priceDisplay').innerHTML = | |
| `¥${Number(d.price).toLocaleString()} <span>/ 月</span>`; | |
| }).catch(() => {}); | |
| document.getElementById('checkoutBtn').addEventListener('click', async () => { | |
| const btn = document.getElementById('checkoutBtn'); | |
| btn.disabled = true; | |
| btn.textContent = '処理中...'; | |
| try { | |
| const res = await fetch('/create-checkout', { method: 'POST' }); | |
| const data = await res.json(); | |
| if (data.url) { | |
| window.location.href = data.url; | |
| } else { | |
| alert('エラー: ' + (data.error || '不明なエラー')); | |
| btn.disabled = false; | |
| btn.textContent = '今すぐ始める →'; | |
| } | |
| } catch (e) { | |
| alert('サーバーエラーが発生しました'); | |
| btn.disabled = false; | |
| btn.textContent = '今すぐ始める →'; | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> | |