Spaces:
Running
Running
Create payment_history.html
Browse files- payment_history.html +45 -0
payment_history.html
ADDED
|
@@ -0,0 +1,45 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
| 6 |
+
<title>Payment History - Recap Studio</title>
|
| 7 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
| 8 |
+
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
| 9 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
| 10 |
+
<style>
|
| 11 |
+
*{margin:0;padding:0;box-sizing:border-box}
|
| 12 |
+
body{font-family:'Plus Jakarta Sans',sans-serif;background:#f5f6fa;min-height:100vh;padding:20px}
|
| 13 |
+
.container{max-width:600px;margin:0 auto}
|
| 14 |
+
.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
|
| 15 |
+
.header h1{font-size:1.3rem}
|
| 16 |
+
.back-btn{background:#fff;border:1px solid #e2e4ee;padding:8px 16px;border-radius:20px;font-size:.8rem;cursor:pointer;text-decoration:none;color:#333}
|
| 17 |
+
.payment-card{background:white;border-radius:16px;padding:16px;margin-bottom:12px;box-shadow:0 1px 3px rgba(0,0,0,.1);border-left:4px solid #ddd}
|
| 18 |
+
.payment-card.pending{border-left-color:#f59e0b}
|
| 19 |
+
.payment-card.approved{border-left-color:#10b981}
|
| 20 |
+
.payment-card.rejected{border-left-color:#ef4444}
|
| 21 |
+
.payment-header{display:flex;justify-content:space-between;margin-bottom:8px}
|
| 22 |
+
.payment-id{font-size:.7rem;color:#888}
|
| 23 |
+
.payment-status{font-size:.7rem;padding:2px 8px;border-radius:20px;font-weight:600}
|
| 24 |
+
.status-pending{background:#fef3c7;color:#b45309}
|
| 25 |
+
.status-approved{background:#d1fae5;color:#065f46}
|
| 26 |
+
.status-rejected{background:#fee2e2;color:#991b1b}
|
| 27 |
+
.payment-details{display:flex;justify-content:space-between;margin-top:8px}
|
| 28 |
+
.coins{font-size:1.1rem;font-weight:700;color:#5b4cf5}
|
| 29 |
+
.price{color:#666}
|
| 30 |
+
.payment-date{font-size:.7rem;color:#aaa;margin-top:8px}
|
| 31 |
+
.admin-note{background:#f8f9fa;padding:8px;border-radius:8px;margin-top:8px;font-size:.75rem;color:#666}
|
| 32 |
+
.empty{text-align:center;padding:40px;color:#888}
|
| 33 |
+
</style>
|
| 34 |
+
</head>
|
| 35 |
+
<body>
|
| 36 |
+
<div class="container">
|
| 37 |
+
<div class="header"><h1>📋 Payment History</h1><a href="/app" class="back-btn">← Back</a></div>
|
| 38 |
+
<div id="payments-list"><div class="empty">Loading...</div></div>
|
| 39 |
+
</div>
|
| 40 |
+
<script>
|
| 41 |
+
async function loadPaymentHistory(){const user=sessionStorage.getItem('recap_user');if(!user){window.location.href='/login';return;}const username=JSON.parse(user).u;try{const res=await fetch(`/api/payment/history?username=${username}`);const data=await res.json();const c=document.getElementById('payments-list');if(!data.ok||data.payments.length===0){c.innerHTML='<div class="empty">📭 No payment history yet<br><a href="/payment" style="color:#5b4cf5">Buy Coins</a></div>';return;}c.innerHTML=data.payments.map(p=>`<div class="payment-card ${p.status}"><div class="payment-header"><span class="payment-id">🆔 ${p.id}</span><span class="payment-status status-${p.status}">${p.status==='pending'?'⏳ Pending':p.status==='approved'?'✅ Approved':'❌ Rejected'}</span></div><div class="payment-details"><span class="coins">🪙 ${p.coins} coins</span><span class="price">💰 ${p.price}</span></div><div class="payment-date">📅 ${new Date(p.created_at).toLocaleString()}</div>${p.admin_note?`<div class="admin-note">📝 ${p.admin_note}</div>`:''}</div>`).join('');}catch(err){document.getElementById('payments-list').innerHTML='<div class="empty">❌ Failed to load</div>';}}
|
| 42 |
+
loadPaymentHistory();setInterval(loadPaymentHistory,30000);
|
| 43 |
+
</script>
|
| 44 |
+
</body>
|
| 45 |
+
</html>
|