Spaces:

Phoe2004
/

Recap-shan

Running

App Files Files

Phoe2004 commited on 17 days ago

Commit

2d8bb4c

verified ·

1 Parent(s): e5d22f7

Create payment.html

Browse files

Files changed (1) hide show

payment.html +74 -0

payment.html ADDED Viewed

	@@ -0,0 +1,74 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>Buy Coins - Recap Studio</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
+<style>
+*{margin:0;padding:0;box-sizing:border-box}
+body{font-family:'Plus Jakarta Sans',sans-serif;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);min-height:100vh;padding:20px}
+.container{max-width:500px;margin:0 auto}
+.header{text-align:center;margin-bottom:24px}
+.header h1{color:white;font-size:1.8rem}
+.packages{display:grid;gap:12px;margin-bottom:24px}
+.package{background:white;border-radius:16px;padding:16px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;border:2px solid transparent;transition:all .2s}
+.package.selected{border-color:#5b4cf5;background:#f5f3ff}
+.package-info h3{font-size:1rem;margin-bottom:4px}
+.package-info .coins{font-size:1.3rem;font-weight:800;color:#5b4cf5}
+.package-info .price{font-size:.75rem;color:#666}
+.radio{width:22px;height:22px;border-radius:50%;border:2px solid #ddd;background:white}
+.package.selected .radio{border-color:#5b4cf5;background:#5b4cf5;box-shadow:inset 0 0 0 4px white}
+.payment-info{background:white;border-radius:16px;padding:20px;margin-bottom:20px}
+.payment-info h3{margin-bottom:12px;font-size:1rem}
+.bank-details{background:#f8f9fa;border-radius:12px;padding:16px;margin-bottom:16px}
+.bank-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:.85rem}
+.bank-label{color:#666}
+.bank-value{font-weight:600;color:#333}
+.copy-btn{background:#e9ecef;border:none;padding:4px 10px;border-radius:6px;font-size:.7rem;cursor:pointer;margin-left:8px}
+.slip-area{margin-top:16px}
+.slip-label{font-size:.8rem;font-weight:600;margin-bottom:8px;display:block}
+.slip-input{width:100%;padding:12px;border:1.5px solid #e2e4ee;border-radius:10px;font-family:inherit;cursor:pointer}
+.slip-preview{margin-top:12px;max-width:100%;max-height:200px;display:none;border-radius:8px}
+.submit-btn{width:100%;padding:14px;background:linear-gradient(135deg,#5b4cf5,#8b5cf6);border:none;border-radius:12px;color:white;font-weight:700;font-size:1rem;cursor:pointer;transition:.2s;margin-top:16px}
+.submit-btn:disabled{opacity:.5;cursor:not-allowed}
+.back-btn{background:transparent;border:1px solid white;color:white;padding:10px;border-radius:10px;width:100%;font-size:.85rem;cursor:pointer;margin-top:12px}
+.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:#333;color:white;padding:10px 20px;border-radius:30px;font-size:.8rem;opacity:0;transition:.2s;pointer-events:none}
+.toast.show{opacity:1}
+</style>
+</head>
+<body>
+<div class="container">
+  <div class="header"><h1>💰 Buy Coins</h1></div>
+  <div class="packages" id="packages">
+    <div class="package" data-coins="10" data-price="10,000 MMK" onclick="selectPackage(this)"><div class="package-info"><h3>🥉 Starter</h3><div class="coins">10 Coins</div><div class="price">10,000 MMK</div></div><div class="radio"></div></div>
+    <div class="package" data-coins="30" data-price="28,000 MMK" onclick="selectPackage(this)"><div class="package-info"><h3>⭐ Basic</h3><div class="coins">30 Coins</div><div class="price">28,000 MMK</div></div><div class="radio"></div></div>
+    <div class="package" data-coins="60" data-price="58,000 MMK" onclick="selectPackage(this)"><div class="package-info"><h3>🔥 Pro</h3><div class="coins">60 Coins</div><div class="price">58,000 MMK</div></div><div class="radio"></div></div>
+    <div class="package" data-coins="100" data-price="95,000 MMK" onclick="selectPackage(this)"><div class="package-info"><h3>💎 Unlimited</h3><div class="coins">100 Coins</div><div class="price">95,000 MMK</div></div><div class="radio"></div></div>
+  </div>
+  <div class="payment-info">
+    <h3>💸 Payment Method</h3>
+    <div class="bank-details">
+      <div class="bank-row"><span class="bank-label">KBZ Pay</span><span class="bank-value">PHOE SHAN<button class="copy-btn" onclick="copyText('PHOE SHAN')">Copy</button></span></div>
+      <div class="bank-row"><span class="bank-label">Phone Number</span><span class="bank-value">09679871352<button class="copy-btn" onclick="copyText('09679871352')">Copy</button></span></div>
+    </div>
+    <div class="slip-area"><label class="slip-label">📸 Upload Payment Slip (Screenshot)</label><input type="file" id="slipImage" class="slip-input" accept="image/*"><img id="slipPreview" class="slip-preview"></div>
+    <button class="submit-btn" id="submitBtn" onclick="submitPayment()">📤 Submit Payment</button>
+    <button class="back-btn" onclick="window.location.href='/app'">← Back to App</button>
+  </div>
+</div>
+<div id="toast" class="toast"></div>
+<script>
+let selectedPackage=null,selectedCoins=null,selectedPrice=null;
+function selectPackage(el){document.querySelectorAll('.package').forEach(p=>p.classList.remove('selected'));el.classList.add('selected');selectedPackage=el;selectedCoins=el.dataset.coins;selectedPrice=el.dataset.price;}
+function copyText(t){navigator.clipboard.writeText(t);showToast('✅ Copied: '+t);}
+function showToast(m){const t=document.getElementById('toast');t.textContent=m;t.classList.add('show');setTimeout(()=>t.classList.remove('show'),2000);}
+document.getElementById('slipImage').addEventListener('change',function(e){const f=e.target.files[0];if(f){const r=new FileReader();r.onload=function(ev){const p=document.getElementById('slipPreview');p.src=ev.target.result;p.style.display='block';};r.readAsDataURL(f);}});
+async function submitPayment(){if(!selectedPackage){showToast('❌ Please select a package');return;}const slipFile=document.getElementById('slipImage').files[0];if(!slipFile){showToast('❌ Please upload payment slip');return;}const user=sessionStorage.getItem('recap_user');if(!user){showToast('❌ Please login first');window.location.href='/login';return;}const username=JSON.parse(user).u;const btn=document.getElementById('submitBtn');btn.disabled=true;btn.textContent='⏳ Submitting...';const reader=new FileReader();reader.onload=async function(ev){try{const res=await fetch('/api/payment/submit',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({username:username,coins:parseInt(selectedCoins),price:selectedPrice,slip_image:ev.target.result})});const data=await res.json();if(data.ok){showToast('✅ Payment submitted! Waiting for admin approval.');setTimeout(()=>{window.location.href='/payment-history';},1500);}else{showToast('❌ '+data.msg);btn.disabled=false;btn.textContent='📤 Submit Payment';}}catch(err){showToast('❌ Network error');btn.disabled=false;btn.textContent='📤 Submit Payment';}};reader.readAsDataURL(slipFile);}
+setTimeout(()=>{const fp=document.querySelector('.package');if(fp)selectPackage(fp);},100);
+</script>
+</body>
+</html>