Spaces:
Sleeping
Sleeping
| <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&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/style.css"> | |
| <style> | |
| .success-wrap { text-align: center; } | |
| .token-box { | |
| background: rgba(0,0,0,.5); | |
| border: 1px solid var(--accent); | |
| border-radius: 10px; | |
| padding: 1rem 1.5rem; | |
| font-family: monospace; font-size: 1rem; | |
| letter-spacing: .04em; | |
| color: var(--accent2); | |
| word-break: break-all; | |
| margin: 1.25rem 0; | |
| user-select: all; | |
| cursor: pointer; | |
| transition: background .2s; | |
| } | |
| .token-box:hover { background: rgba(124,106,247,.1); } | |
| .copy-hint { font-size: .78rem; color: var(--text-muted); margin-top: -.5rem; margin-bottom: 1rem; } | |
| .copied-badge { | |
| display: none; | |
| color: var(--success); font-size: .85rem; margin-bottom: 1rem; font-weight: 600; | |
| } | |
| .steps { text-align: left; margin: 1.5rem 0; } | |
| .step { | |
| display: flex; gap: 1rem; align-items: flex-start; | |
| padding: .75rem 0; border-bottom: 1px solid var(--border); | |
| font-size: .9rem; | |
| } | |
| .step-num { | |
| flex-shrink: 0; width: 28px; height: 28px; | |
| background: linear-gradient(135deg, var(--accent), var(--accent2)); | |
| border-radius: 50%; display: flex; align-items: center; justify-content: center; | |
| font-size: .8rem; font-weight: 700; color: #fff; | |
| } | |
| </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="card success-wrap"> | |
| <div style="font-size:3.5rem;margin-bottom:1rem;">🎉</div> | |
| <h1 class="result-title">決済完了！ありがとうございます</h1> | |
| <p style="color:var(--text-muted);font-size:.9rem;margin-bottom:1rem;"> | |
| 以下のアクセストークンを保存してください。アプリ利用時に必要です。 | |
| </p> | |
| <div class="token-box" id="tokenBox" onclick="copyToken()"> | |
| <span id="tokenText">読み込み中...</span> | |
| </div> | |
| <p class="copy-hint">👆 クリックでコピー</p> | |
| <div class="copied-badge" id="copiedBadge">✅ コピーしました！</div> | |
| <div class="steps"> | |
| <div class="step"> | |
| <div class="step-num">1</div> | |
| <div>上のトークンをコピーして <strong>安全な場所に保存</strong>してください</div> | |
| </div> | |
| <div class="step"> | |
| <div class="step-num">2</div> | |
| <div>アプリに戻り、トークンを入力してご利用ください</div> | |
| </div> | |
| <div class="step" style="border:none;"> | |
| <div class="step-num">3</div> | |
| <div>サブスクリプションは <a href="https://billing.stripe.com" style="color:var(--accent2);">Stripe ポータル</a> からいつでも解約できます</div> | |
| </div> | |
| </div> | |
| <a class="btn btn-primary" href="/" style="margin-top:.5rem;"> | |
| 🎧 アプリを使ってみる | |
| </a> | |
| </div> | |
| </main> | |
| <footer class="footer"> | |
| <p>🎧 HarmoSplit — Powered by Demucs & UVR MDX-NET</p> | |
| </footer> | |
| <script> | |
| async function loadToken() { | |
| const params = new URLSearchParams(location.search); | |
| const sessionId = params.get('session_id'); | |
| if (!sessionId) { | |
| document.getElementById('tokenText').textContent = 'エラー: session_id が見つかりません'; | |
| return; | |
| } | |
| try { | |
| const res = await fetch(`/get-token?session_id=${sessionId}`); | |
| const data = await res.json(); | |
| if (data.token) { | |
| document.getElementById('tokenText').textContent = data.token; | |
| } else { | |
| document.getElementById('tokenText').textContent = 'エラー: ' + (data.error || '不明'); | |
| } | |
| } catch(e) { | |
| document.getElementById('tokenText').textContent = 'サーバーエラー'; | |
| } | |
| } | |
| function copyToken() { | |
| const text = document.getElementById('tokenText').textContent; | |
| navigator.clipboard.writeText(text).then(() => { | |
| const badge = document.getElementById('copiedBadge'); | |
| badge.style.display = 'block'; | |
| setTimeout(() => badge.style.display = 'none', 2000); | |
| }); | |
| } | |
| loadToken(); | |
| </script> | |
| </body> | |
| </html> | |