Hugging Face's logo

Spaces:
indigo0511
/
harmosplit
Sleeping

App Files Community
harmosplit
File size: 5,197 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
128
129
<!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;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 &amp; 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>