<!doctype html>
<html lang="mr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Payment Gateway Settings - MagicAI Panel</title>
<style>
:root{
--bg:#0f1724; --card:#0b1220; --muted:#9aa4b2; --accent:#06b6d4; --success:#10b981;
--glass: rgba(255,255,255,0.03);
}
*{box-sizing:border-box;font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
body{margin:0;background:linear-gradient(180deg,#071020 0%, #0f1724 100%);color:#e6eef6;min-height:100vh;padding:28px;}
.container{max-width:1100px;margin:0 auto;}
header{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.logo{width:56px;height:56px;border-radius:10px;background:linear-gradient(135deg,var(--accent),#7c3aed);display:flex;align-items:center;justify-content:center;font-weight:700;color:#021018}
h1{font-size:20px;margin:0}
p.lead{margin:0;color:var(--muted);font-size:13px}
.panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border-radius:12px;padding:18px;box-shadow:0 6px 20px rgba(2,6,23,0.6);display:grid;grid-template-columns:1fr 380px;gap:18px}
/* left column */
.left{display:flex;flex-direction:column;gap:14px}
.card{background:var(--card);padding:14px;border-radius:10px;border:1px solid rgba(255,255,255,0.03)}
.plans{display:flex;gap:10px;flex-wrap:wrap}
.plan{flex:1;min-width:200px;background:var(--glass);padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.02)}
.plan h3{margin:0;font-size:16px}
.price{font-size:18px;margin-top:8px;color:var(--accent);font-weight:700}
.btn{display:inline-block;padding:8px 12px;border-radius:8px;border:none;cursor:pointer;background:var(--accent);color:#021018;font-weight:600}
.ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:8px 10px;border-radius:8px}
/* right column */
.right{display:flex;flex-direction:column;gap:12px}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
input[type="text"], input[type="file"], textarea, select{width:100%;padding:8px;border-radius:8px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit}
.img-preview{height:120px;border-radius:8px;background:linear-gradient(180deg,#08131a,#07101a);display:flex;align-items:center;justify-content:center;border:1px dashed rgba(255,255,255,0.04);overflow:hidden}
.img-preview img{max-height:100%;max-width:100%}
.methods{display:flex;flex-direction:column;gap:12px}
.method{display:flex;gap:12px;align-items:center;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));padding:10px;border-radius:8px}
.method .meta{flex:1}
.qr{width:92px;height:92px;border-radius:8px;background:#031017;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,0.03)}
.small{font-size:13px;color:var(--muted)}
.confirm{background:linear-gradient(90deg,#08312a,#0a2436);border-left:4px solid var(--success);padding:12px;border-radius:8px;color:#bff0dd}
footer{margin-top:14px;color:var(--muted);font-size:13px;text-align:center}
/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(2,6,12,0.6);display:none;align-items:center;justify-content:center;z-index:40}
.modal{background:#021018;padding:18px;border-radius:10px;max-width:420px;width:92%;box-shadow:0 10px 40px rgba(0,0,0,0.6);border:1px solid rgba(255,255,255,0.03)}
.modal h3{margin:0 0 8px 0}
.flex{display:flex;gap:8px;align-items:center}
@media (max-width:940px){.panel{grid-template-columns:1fr;}.right{order:2}.left{order:1}}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">MA</div>
<div>
<h1 id="pageTitle">Payment Gateway Settings</h1>
<p class="lead">MagicAI — Plan & Payment configuration panel</p>
</div>
</header>
<div class="panel">
<!-- LEFT: Plans + Checkout -->
<div class="left">
<div class="card">
<div style="display:flex;justify-content:space-between;align-items:center">
<strong>Plans</strong>
<button class="ghost" id="managePlansBtn">Manage Plans</button>
</div>
<div class="plans" style="margin-top:12px">
<div class="plan">
<h3>Starter</h3>
<div class="price">₹199 / महिना</div>
<div class="small" style="margin-top:6px">1 seat · Basic features</div>
<div style="margin-top:10px">
<button class="btn" onclick="selectPlan('Starter',199)">Select</button>
</div>
</div>
<div class="plan">
<h3>Pro</h3>
<div class="price">₹499 / महिना</div>
<div class="small" style="margin-top:6px">5 seats · Priority support</div>
<div style="margin-top:10px">
<button class="btn" onclick="selectPlan('Pro',499)">Select</button>
</div>
</div>
<div class="plan">
<h3>Business</h3>
<div class="price">₹999 / महिना</div>
<div class="small" style="margin-top:6px">अनलिमिटेड · Team features</div>
<div style="margin-top:10px">
<button class="btn" onclick="selectPlan('Business',999)">Select</button>
</div>
</div>
</div>
</div>
<div class="card" id="checkoutCard" style="display:none">
<strong>Checkout</strong>
<p class="small">Selected plan: <span id="selPlanName">—</span> • <strong id="selPlanPrice">—</strong></p>
<div style="margin-top:10px" class="methods">
<!-- UPI Method -->
<div class="method">
<div style="flex:1">
<div style="display:flex;justify-content:space-between;align-items:center">
<div>
<strong>UPI (QR / ID)</strong>
<div class="small">PhonePe / Google Pay / Paytm</div>
</div>
<div>
<button class="ghost" onclick="openUPIModal()">Pay with UPI</button>
</div>
</div>
<div style="margin-top:8px" class="small">UPI ID: <strong id="upiId">magicai@upi</strong></div>
</div>
<div class="qr">
<!-- Placeholder QR, replace src with real QR image -->
<img id="upiQrImg" src="" alt="QR" style="max-width:88px;max-height:88px;display:none" />
<div id="qrText" class="small" style="text-align:center;color:var(--muted)">QR</div>
</div>
</div>
<!-- Crypto Method -->
<div class="method">
<div style="flex:1">
<div style="display:flex;justify-content:space-between;align-items:center">
<div>
<strong>Crypto (USDT)</strong>
<div class="small">TRC20 / ERC20</div>
</div>
<div>
<button class="ghost" onclick="openCryptoModal()">Pay with Crypto</button>
</div>
</div>
<div style="margin-top:8px" class="small">Wallet: <strong id="cryptoAddr">TSAMPLEUSDTADDRESS123456789</strong></div>
</div>
<div class="qr">
<div class="small">QR</div>
</div>
</div>
</div>
<div style="margin-top:12px" class="small">
नोंद: पेमेंट झाल्यानंतर तुमच्याकडे Transaction ID पाठवा किंवा backend वर webhook वापरा — नंतर पेमेंट कन्फर्म केला जाईल.
</div>
</div>
<div class="card confirm" id="confirmationBox" style="display:none">
<strong>Payment Confirmed</strong>
<div class="small" id="confirmedText">Thank you — Payment has been registered.</div>
</div>
</div>
<!-- RIGHT: Settings / Page name / Image -->
<div class="right">
<div class="card">
<label for="pageName">Page Name (हे पेजचे नाव बदला)</label>
<input id="pageName" type="text" placeholder="Payment Gateway Settings" />
<div style="margin-top:8px;display:flex;gap:8px">
<button class="btn" onclick="applyPageName()">Apply</button>
<button class="ghost" onclick="resetPageName()">Reset</button>
</div>
</div>
<div class="card">
<label for="logoUpload">Page Image / Logo (Upload)</label>
<div class="img-preview" id="imgPreview">
<div style="text-align:center;color:var(--muted)">
<div style="font-weight:700">Upload image</div>
<div class="small">PNG / JPG / 1MB max</div>
</div>
</div>
<input id="logoUpload" type="file" accept="image/*" style="margin-top:8px" />
<div style="margin-top:8px;display:flex;gap:8px">
<button class="btn" onclick="uploadImage()">Save Image</button>
<button class="ghost" onclick="removeImage()">Remove</button>
</div>
</div>
<div class="card">
<strong>UPI / Crypto Config</strong>
<label for="upiInput">UPI ID</label>
<input id="upiInput" type="text" placeholder="example@upi" />
<label for="qrUpload" style="margin-top:8px">UPI QR Image (optional)</label>
<input id="qrUpload" type="file" accept="image/*" />
<label for="cryptoInput" style="margin-top:8px">Crypto Wallet (USDT)</label>
<input id="cryptoInput" type="text" placeholder="Wallet address" />
<div style="margin-top:10px;display:flex;gap:8px">
<button class="btn" onclick="savePaymentConfig()">Save Config</button>
<button class="ghost" onclick="loadDefaultConfig()">Default</button>
</div>
<div class="small" style="margin-top:8px">Saved config is stored only in browser for demo. Replace with backend save API.</div>
</div>
</div>
</div>
<footer>MagicAI Panel • Payments • Demo</footer>
</div>
<!-- Modal for confirmation -->
<div class="modal-bg" id="modalBg">
<div class="modal" role="dialog" aria-modal="true">
<h3 id="modalTitle">Payment Confirmation</h3>
<p id="modalMsg" class="small">एक मिनिट — कृपया Transaction ID किंवा Screenshot पाठवा.</p>
<div style="margin-top:12px;display:flex;gap:8px;justify-content:flex-end">
<button class="ghost" onclick="closeModal()">Cancel</button>
<button class="btn" onclick="confirmPayment()">I have paid</button>
</div>
</div>
</div>
<script>
// Demo state
let selectedPlan = null;
let selectedPrice = null;
// Elements
const checkoutCard = document.getElementById('checkoutCard');
const selPlanName = document.getElementById('selPlanName');
const selPlanPrice = document.getElementById('selPlanPrice');
const confirmationBox = document.getElementById('confirmationBox');
const confirmedText = document.getElementById('confirmedText');
// Page name controls
const pageTitleEl = document.getElementById('pageTitle');
const pageNameInput = document.getElementById('pageName');
// Image preview
const logoInput = document.getElementById('logoUpload');
const imgPreview = document.getElementById('imgPreview');
// UPI / Crypto fields
const upiInput = document.getElementById('upiInput');
const qrUpload = document.getElementById('qrUpload');
const upiIdEl = document.getElementById('upiId');
const upiQrImg = document.getElementById('upiQrImg');
const qrText = document.getElementById('qrText');
const cryptoInput = document.getElementById('cryptoInput');
const cryptoAddrEl = document.getElementById('cryptoAddr');
// Modal
const modalBg = document.getElementById('modalBg');
const modalTitle = document.getElementById('modalTitle');
const modalMsg = document.getElementById('modalMsg');
// Plan selection
function selectPlan(name, price){
selectedPlan = name;
selectedPrice = price;
selPlanName.textContent = name;
selPlanPrice.textContent = '₹' + price;
checkoutCard.style.display = 'block';
confirmationBox.style.display = 'none';
// Scroll to checkout (nice UX)
checkoutCard.scrollIntoView({behavior:'smooth'});
}
// Page name apply/reset
function applyPageName(){
const val = pageNameInput.value.trim();
if(!val){ alert('कृपया पेज नाव भरा'); return; }
pageTitleEl.textContent = val;
alert('Page name बदले गेले.');
}
function resetPageName(){
pageNameInput.value = 'Payment Gateway Settings';
pageTitleEl.textContent = 'Payment Gateway Settings';
}
// Image upload preview (client-only)
logoInput.addEventListener('change', (ev)=>{
const f = ev.target.files[0];
if(!f) return;
if(f.size > 1_200_000){ alert('Image खूप मोठी आहे - 1.2MB पेक्षा कमी ठेवा'); return; }
const reader = new FileReader();
reader.onload = () => {
imgPreview.innerHTML = '<img src="'+reader.result+'" alt="preview" />';
};
reader.readAsDataURL(f);
});
function uploadImage(){
const f = logoInput.files[0];
if(!f){ alert('कृपया image file निवडा'); return; }
// TODO: send to backend via fetch / formdata
// Example:
// const fd = new FormData();
// fd.append('logo', f);
// fetch('/api/admin/upload-logo', { method:'POST', body:fd }).then(...)
alert('Image saved (demo). Backend upload करा /api/admin/upload-logo वापरा.');
}
function removeImage(){
imgPreview.innerHTML = '<div style="text-align:center;color:var(--muted)"><div style="font-weight:700">Upload image</div><div class="small">PNG / JPG / 1MB max</div></div>';
logoInput.value = '';
// TODO: call backend to remove image if stored
}
// Save payment config (demo: localStorage)
function savePaymentConfig(){
const upi = upiInput.value.trim();
const crypto = cryptoInput.value.trim();
if(!upi && !crypto){ if(!confirm('UPI आणि Crypto दोन्ही रिकामे आहेत. Proceed?')) return; }
// If QR uploaded, convert to dataURL
if(qrUpload.files[0]){
const r = new FileReader();
r.onload = () => {
localStorage.setItem('magicai_upi_qr', r.result);
localStorage.setItem('magicai_upi', upi);
localStorage.setItem('magicai_crypto', crypto);
applyConfigFromStorage();
alert('Config saved locally (demo). कृपया backend वर save करा.');
};
r.readAsDataURL(qrUpload.files[0]);
} else {
localStorage.setItem('magicai_upi', upi);
localStorage.setItem('magicai_crypto', crypto);
applyConfigFromStorage();
alert('Config saved locally (demo). कृपया backend वर save करा.');
}
// TODO: POST to /api/admin/payment-config with JSON { upi, upi_qr?, crypto }
}
function applyConfigFromStorage(){
const upi = localStorage.getItem('magicai_upi') || 'magicai@upi';
const crypto = localStorage.getItem('magicai_crypto') || 'TSAMPLEUSDTADDRESS123456789';
upiIdEl.textContent = upi;
cryptoAddrEl.textContent = crypto;
const qr = localStorage.getItem('magicai_upi_qr');
if(qr){
upiQrImg.src = qr;
upiQrImg.style.display = 'block';
qrText.style.display = 'none';
} else {
upiQrImg.style.display = 'none';
qrText.style.display = 'block';
}
}
function loadDefaultConfig(){
localStorage.removeItem('magicai_upi');
localStorage.removeItem('magicai_crypto');
localStorage.removeItem('magicai_upi_qr');
applyConfigFromStorage();
alert('Default config loaded.');
}
// Modal actions
function openUPIModal(){
if(!selectedPlan){ alert('कृपया आधी Plan निवडा'); return; }
modalTitle.textContent = 'UPI Payment';
modalMsg.textContent = `कृपया ${upiIdEl.textContent} या UPI वर ₹${selectedPrice} पाठवा आणि Transaction ID द्या.`;
modalBg.style.display = 'flex';
}
function openCryptoModal(){
if(!selectedPlan){ alert('कृपया आधी Plan निवडा'); return; }
modalTitle.textContent = 'Crypto Payment';
modalMsg.textContent = `कृपया ${cryptoAddrEl.textContent} या पत्त्यावर USDT पाठवा (₹${selectedPrice} पेक्षा समतुल्य). Txn ID द्या.`;
modalBg.style.display = 'flex';
}
function closeModal(){
modalBg.style.display = 'none';
}
// Confirm payment (demo) -> mark confirmed
function confirmPayment(){
// In real app: open input for Txn ID, then call backend to verify on-chain or check payment gateway
closeModal();
confirmationBox.style.display = 'block';
confirmedText.textContent = `Payment for ${selectedPlan} (₹${selectedPrice}) received — Pending verification.`;
// TODO: send verify request to backend:
// fetch('/api/admin/confirm-payment', { method:'POST', body: JSON.stringify({ plan:selectedPlan, amount:selectedPrice, txn_id: '...' }) })
}
// initial
applyConfigFromStorage();
// Manage Plans button (example)
document.getElementById('managePlansBtn').addEventListener('click', ()=>{
alert('Manage Plans — open plans management page (admin).');
// TODO: route to /admin/plans
});
</script>
</body>
</html>