Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <script>(function () { const t = localStorage.getItem('theme') || 'light'; if (t === 'dark') document.documentElement.setAttribute('data-theme', 'dark'); })();</script> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>My Wallet | Aadhaar Portal Pro</title> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Modular CSS --> | |
| <link rel="stylesheet" href="/static/css/global.css"> | |
| <link rel="stylesheet" href="/static/css/wallet.css"> | |
| <!-- Modular JS --> | |
| <script src="/static/js/global.js" defer></script> | |
| <script src="/static/js/wallet.js" defer></script> | |
| </head> | |
| <body> | |
| <div class="dashboard-wrapper"> | |
| <div class="sidebar-overlay" id="sidebar-overlay"></div> | |
| {% include 'partials/_sidebar.html' %} | |
| <!-- Main Content Area --> | |
| <main class="main-content"> | |
| <header class="top-bar"> | |
| <div class="header-left"> | |
| <button class="hamburger-menu" id="mobile-toggle"> | |
| <i class="fa-solid fa-bars"></i> | |
| </button> | |
| <div class="breadcrumb"> | |
| <span>Finances</span> | |
| <i class="fa-solid fa-chevron-right"></i> | |
| <span class="active">My Wallet</span> | |
| </div> | |
| </div> | |
| <div class="header-right"> | |
| <!-- Global Theme Toggle Icon in Header --> | |
| <button class="header-icon-btn" id="theme-toggle-btn" title="Toggle Light/Dark Mode"> | |
| <i class="fa-solid fa-moon"></i> | |
| </button> | |
| <div class="wallet-pill"> | |
| <i class="fa-solid fa-indian-rupee-sign"></i> | |
| <span id="wallet-balance">0.00</span> | |
| </div> | |
| </div> | |
| </header> | |
| <div class="content-body"> | |
| <div class="wallet-container"> | |
| <!-- Balance Display --> | |
| <div class="hover balance-hero-card animate-up"> | |
| <span class="label">Total Available Balance</span> | |
| <div class="amount">₹ <span id="user-balance-hero">0.00</span></div> | |
| <div class="hero-features"> | |
| <span><i class="fa-solid fa-shield-check"></i> Secure</span> | |
| <span><i class="fa-solid fa-bolt"></i> Instant</span> | |
| <span><i class="fa-solid fa-check-circle"></i> Verified</span> | |
| </div> | |
| </div> | |
| <!-- Top-up Form --> | |
| <div class="hover topup-card animate-up"> | |
| <div class="topup-header"> | |
| <h2>Add Wallet Funds</h2> | |
| <p>Enter the amount you wish to add to your Aadhaar Pro wallet.</p> | |
| </div> | |
| <div class="amount-entry-area"> | |
| <div class="form-group margin-bottom-5"> | |
| <label>Quick Amounts</label> | |
| <div class="preset-amounts"> | |
| <button type="button" class="btn-preset" data-amount="100">₹100</button> | |
| <button type="button" class="btn-preset" data-amount="500">₹500</button> | |
| <button type="button" class="btn-preset" data-amount="1000">₹1000</button> | |
| <button type="button" class="btn-preset" data-amount="2000">₹2000</button> | |
| </div> | |
| </div> | |
| <div class="form-group margin-bottom-20"> | |
| <label | |
| <label class="label-bold">Amount (₹)</label> | |
| <input type="number" id="init-amount" class="input-control input-hover" | |
| placeholder="Enter amount to add" required> | |
| </div> | |
| <button type="button" id="btn-proceed-topup" class="btn-premium btn-hover"> | |
| <i class="fa-solid fa-bolt"></i> | |
| <span>Proceed to Top-up</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Top-up Requests Section --> | |
| <div class="requests-card animate-up hover"> | |
| <div class="requests-header"> | |
| <h2>Your Top-up Requests</h2> | |
| <p>Track the status of your wallet deposit requests</p> | |
| </div> | |
| <div class="requests-list" id="topup-requests-list"> | |
| <div class="empty-state" id="empty-requests"> | |
| <i class="fa-solid fa-clock-rotate-left"></i> | |
| <h3>No requests yet</h3> | |
| <p>Your top-up requests will appear here once submitted</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Top-up Payment & Submission Modal --> | |
| <div id="topup-payment-modal" class="modal-overlay"> | |
| <div class="capture-payment-card"> | |
| <button id="close-topup-modal"> | |
| <i class="fa-solid fa-xmark"></i></button> | |
| <div class="modal-text-center"> | |
| <h3>Scan & Pay</h3> | |
| <p>Pay <strong id="modal-display-amount">₹0</strong> using any UPI App</p> | |
| </div> | |
| <div class="qr-code-wrapper"> | |
| <img id="payment-qr-img" | |
| src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=upi://pay?pa=921961344@ybl&am=0&tn=WalletTopup" | |
| alt="Payment QR"> | |
| <div class="upi-id-display">921961344@ybl</div> | |
| </div> | |
| <form id="payment-form"> | |
| <input type="hidden" id="pay-amount" value="0"> | |
| <div class="form-group"> | |
| <label>UTR / 12-Digit Reference No. <span class="required">*</span></label> | |
| <input type="text" id="pay-utr" placeholder="e.g. 301234567890" required minlength="12" | |
| maxlength="12"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Payment Screenshot <span class="optional">(Optional)</span></label> | |
| <input type="file" id="pay-screenshot" accept="image/*"> | |
| </div> | |
| <button type="submit" id="btn-submit-topup"> | |
| <i class="fa-solid fa-paper-plane"></i> Submit Request | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Custom Toast Notification Container --> | |
| <div id="toast-container" class="toast-container"></div> | |
| </body> | |
| </html> |