Spaces:
Sleeping
Sleeping
File size: 4,601 Bytes
d90b8a8 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 | <!DOCTYPE html>
<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>
|