Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MyCryptoTelco - Malaysian Top Up & SIM</title> | |
| <!-- Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <!-- Google Fonts --> | |
| <link href="https://fonts.googleapis.com/css2?family=Outfit:wght=300;400;600;800" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --bg-dark: #0f111a; | |
| --bg-card: #161b25; | |
| --primary: #00f2ea; | |
| --secondary: #ff0050; | |
| --accent: #7000ff; | |
| --text-main: #ffffff; | |
| --text-muted: #a0a0a0; | |
| --gradient: linear-gradient(135deg, #00f2ea 0%, #7000ff 100%); | |
| --glass: rgba(255, 255, 255, 0.05); | |
| --glass-border: rgba(255, 255, 255, 0.1); | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: box-sizing; | |
| font-family: 'Outfit', sans-serif; | |
| } | |
| body { | |
| background-color: --bg-dark; | |
| background: #0b0d12; | |
| color: --text-main; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| position: relative; | |
| } | |
| /* Background Animated Mesh */ | |
| .bg-mesh { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: | |
| radial-gradient(circle at 15% 50%, rgba(112, 0, 255, 0.15), transparent 25%), | |
| radial-gradient(circle at 85% 30%, rgba(0, 242, 234, 0.15), transparent 25%); | |
| z-index: -1; | |
| } | |
| /* --- Header --- */ | |
| header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 40px; | |
| background: rgba(11, 13, 18, 0.8); | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid --glass-border; | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .logo { | |
| font-size: 1.5rem; | |
| font-weight: 800; | |
| background: --gradient; | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| text-transform: uppercase; | |
| letter-spacing: 2px; | |
| } | |
| .nav-link { | |
| color: --text-muted; | |
| text-decoration: none; | |
| font-size: 0.9rem; | |
| transition: 0.3s; | |
| margin-left: 20px; | |
| } | |
| .nav-link:hover { | |
| color: --primary; | |
| } | |
| .anycoder-badge { | |
| background: rgba(0, 0, 0, 0.3); | |
| padding: 5px 12px; | |
| border-radius: 20px; | |
| border: 1px solid --glass-border; | |
| font-size: 0.8rem; | |
| color: --primary; | |
| text-decoration: none; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| transition: all 0.3s ease; | |
| } | |
| .anycoder-badge:hover { | |
| background: rgba(0, 242, 234, 0.1); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(0, 242, 234, 0.2); | |
| } | |
| /* --- Main Container --- */ | |
| .container { | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 40px 20px; | |
| } | |
| /* --- Hero Section --- */ | |
| .hero { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| line-height: 1.1; | |
| margin-bottom: 15px; | |
| background: linear-gradient(to right, #fff, #a0a0a0); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| } | |
| .hero p { | |
| color: --text-muted; | |
| font-size: 1.1rem; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| /* --- Service Tabs --- */ | |
| .tabs { | |
| display: flex; | |
| justify-content: center; | |
| gap: 20px; | |
| margin-bottom: 40px; | |
| } | |
| .tab-btn { | |
| background: transparent; | |
| border: 1px solid --glass-border; | |
| color: --text-muted; | |
| padding: 12px 30px; | |
| cursor: pointer; | |
| border-radius: 12px; | |
| font-weight: 600; | |
| transition: 0.3s; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .tab-btn.active { | |
| border-color: --primary; | |
| color: --text-main; | |
| background: rgba(0, 242, 234, 0.05); | |
| } | |
| .tab-btn::before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: --gradient; | |
| opacity: 0; | |
| transition: 0.3s; | |
| } | |
| .tab-btn.active::before { | |
| opacity: 1; | |
| } | |
| /* --- Telco Grid --- */ | |
| .telco-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 40px; | |
| } | |
| .telco-card { | |
| background: --bg-card; | |
| border: 1px solid --glass-border; | |
| border-radius: 20px; | |
| padding: 30px; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .telco-card:hover { | |
| transform: translateY(-10px); | |
| border-color: --primary; | |
| box-shadow: 0 10px 30px rgba(0, 242, 234, 0.1); | |
| } | |
| .telco-card.selected { | |
| background: rgba(255, 255, 255, 0.08); | |
| border-color: --primary; | |
| } | |
| .telco-icon { | |
| font-size: 3rem; | |
| margin-bottom: 15px; | |
| display: inline-block; | |
| } | |
| .celcom .telco-icon { color: #00a3e0; } | |
| .maxis .telco-icon { color: #ffcc00; } | |
| .digi .telco-icon { color: #a20047; } | |
| .umobile .telco-icon { color: #ff6600; } | |
| /* --- Input Form --- */ | |
| .purchase-form { | |
| background: --bg-card; | |
| border: 1px solid --glass-border; | |
| border-radius: 20px; | |
| padding: 40px; | |
| max-width: 600px; | |
| margin: 0 auto; | |
| display: none; /* Hidden initially */ | |
| animation: fadeIn 0.5s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .form-group { | |
| margin-bottom: 25px; | |
| } | |
| .label { | |
| display: block; | |
| color: --text-muted; | |
| margin-bottom: 10px; | |
| font-size: 0.9rem; | |
| } | |
| .input-field { | |
| width: 100%; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid --glass-border; | |
| padding: 15px; | |
| border-radius: 10px; | |
| color: --text-main; | |
| font-size: 1rem; | |
| outline: none; | |
| transition: 0.3s; | |
| } | |
| .input-field:focus { | |
| border-color: --primary; | |
| box-shadow: 0 0 15px rgba(0, 242, 234, 0.1); | |
| } | |
| .amount-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 10px; | |
| } | |
| .amount-btn { | |
| background: transparent; | |
| border: 1px solid --glass-border; | |
| color: --text-main; | |
| padding: 10px; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: 0.2s; | |
| } | |
| .amount-btn:hover, .amount-btn.active { | |
| background: --primary; | |
| color: #000; | |
| border-color: --primary; | |
| font-weight: bold; | |
| } | |
| .btn-main { | |
| width: 100%; | |
| padding: 15px; | |
| background: --gradient; | |
| border: none; | |
| border-radius: 12px; | |
| color: #000; | |
| font-weight: 800; | |
| font-size: 1.1rem; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| margin-top: 20px; | |
| text-transform: uppercase; | |
| } | |
| .btn-main:hover { | |
| transform: scale(1.02); | |
| box-shadow: 0 0 20px rgba(112, 0, 255, 0.4); | |
| } | |
| /* --- Crypto Modal --- */ | |
| .modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.8); | |
| backdrop-filter: blur(5px); | |
| z-index: 1000; | |
| display: none; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .modal-content { | |
| background: #161b25; | |
| width: 90%; | |
| max-width: 500px; | |
| border-radius: 20px; | |
| border: 1px solid --glass-border; | |
| padding: 30px; | |
| position: relative; | |
| box-shadow: 0 20px 50px rgba(0,0,0,0.5); | |
| } | |
| .crypto-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 20px; | |
| } | |
| .crypto-options { | |
| display: flex; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| } | |
| .crypto-option { | |
| flex: 1; | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 10px; | |
| border-radius: 10px; | |
| text-align: center; | |
| cursor: pointer; | |
| border: 1px solid transparent; | |
| transition: 0.3s; | |
| } | |
| .crypto-option:hover, .crypto-option.active { | |
| border-color: --primary; | |
| background: rgba(0, 242, 234, 0.05); | |
| } | |
| .qr-container { | |
| background: #fff; | |
| padding: 20px; | |
| border-radius: 15px; | |
| margin-bottom: 20px; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .qr-placeholder { | |
| width: 200px; | |
| height: 200px; | |
| background: #000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: #fff; | |
| font-size: 0.8rem; | |
| text-align: center; | |
| } | |
| .wallet-address { | |
| background: rgba(0,0,0,0.3); | |
| padding: 10px; | |
| border-radius: 8px; | |
| font-size: 0.8rem; | |
| color: --text-muted; | |
| word-break: break-all; | |
| margin-bottom: 15px; | |
| text-align: center; | |
| border: 1px dashed --glass-border; | |
| } | |
| .status-bar { | |
| height: 4px; | |
| background: #333; | |
| border-radius: 2px; | |
| margin-top: 20px; | |
| overflow: hidden; | |
| } | |
| .status-progress { | |
| height: 100%; | |
| width: 0%; | |
| background: --gradient; | |
| transition: width 1s ease; | |
| } | |
| /* --- Footer --- */ | |
| footer { | |
| text-align: center; | |
| padding: 40px; | |
| color: --text-muted; | |
| font-size: 0.8rem; | |
| border-top: 1px solid --glass-border; | |
| margin-top: 50px; | |
| } | |
| /* --- Responsive --- */ | |
| @media (max-width: 768px) { | |
| .hero h1 { font-size: 2.5rem; } | |
| .tabs { flex-wrap: wrap; } | |
| .telco-grid { grid-template-columns: repeat(2, 1fr); } | |
| header { padding: 15px 20px; } | |
| } | |
| </style> | |
| </body> | |
| <body> | |
| <!-- Background Mesh --> | |
| <div class="bg-mesh"></div> | |
| <!-- Header --> | |
| <header> | |
| <div class="logo"> | |
| <i class="fa-solid fa-bolt"></i> MYCRYPTO<span style="color:white">TELCO</span> | |
| </div> | |
| <nav> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoder-badge" target="_blank"> | |
| <i class="fa-solid fa-code"></i> Built with anycoder | |
| </a> | |
| </nav> | |
| </header> | |
| <div class="container"> | |
| <!-- Hero --> | |
| <section class="hero"> | |
| <h1>Instant Top Up.<br>Powered by Crypto.</h1> | |
| <p>Reload your Malaysian SIM cards instantly using Bitcoin, Ethereum, or USDT. Secure, anonymous, and lightning fast.</p> | |
| </section> | |
| <!-- Tabs --> | |
| <section class="tabs"> | |
| <button class="tab-btn active" onclick="switchTab('topup')">Prepaid Top Up</button> | |
| <button class="tab-btn" onclick="switchTab('sim')">Buy SIM Card</button> | |
| </section> | |
| <!-- Content Area --> | |
| <div id="content-area"> | |
| <!-- Telco Selection --> | |
| <div class="telco-grid"> | |
| <div class="telco-card celcom" onclick="selectTelco('Celcom')"> | |
| <i class="fa-solid fa-signal telco-icon"></i> | |
| <h3>Celcom</h3> | |
| </div> | |
| <div class="telco-card maxis" onclick="selectTelco('Maxis')"> | |
| <i class="fa-solid fa-wifi telco-icon"></i> | |
| <h3>Maxis</h3> | |
| </div> | |
| <div class="telco-card digi" onclick="selectTelco('Digi')"> | |
| <i class="fa-solid fa-mobile-screen telco-icon"></i> | |
| <h3>Digi</h3> | |
| </div> | |
| <div class="telco-card umobile" onclick="selectTelco('Umobile')"> | |
| <i class="fa-solid fa-network-wired telco-icon"></i> | |
| <h3>Umobile</h3> | |
| </div> | |
| </div> | |
| <!-- Purchase Form (Hidden initially) --> | |
| <div class="purchase-form" id="purchaseForm"> | |
| <h3 style="margin-bottom: 20px; color: --primary;"> | |
| <i class="fa-solid fa-cart-shopping"></i> <span id="selectedTelcoName">Reload</span> | |
| </h3> | |
| <!-- Input for Phone Number (Only for Top Up) --> | |
| <div class="form-group" id="phoneInputGroup"> | |
| <label class="label">Mobile Number</label> | |
| <input type="text" class="input-field" placeholder="012-345 6789" id="phoneInput"> | |
| </div> | |
| <!-- Input for SIM Package (Only for SIM Cards) --> | |
| <div class="form-group" id="simInputGroup" style="display:none;"> | |
| <label class="label">Select Package</label> | |
| <select class="input-field"> | |
| <option>Travel SIM (7 Days - 100GB)</option> | |
| <option>Local SIM (30 Days - Unlimited)</option> | |
| <option>Business SIM (1 Year - 500GB)</option> | |
| </select> | |
| </div> | |
| <div class="form-group"> | |
| <label class="label">Amount (RM)</label> | |
| <div class="amount-grid"> | |
| <button class="amount-btn" onclick="setAmount(10)">RM 10</button> | |
| <button class="amount-btn" onclick="setAmount(30)">RM 30</button> | |
| <button class="amount-btn" onclick="setAmount(50)">RM 50</button> | |
| <button class="amount-btn" onclick="setAmount(100)">RM 100</button> | |
| </div> | |
| <input type="number" class="input-field" style="margin-top: 10px;" placeholder="Custom Amount" id="customAmount"> | |
| </div> | |
| <button class="btn-main" onclick="openPaymentModal()"> | |
| Pay with Crypto <i class="fa-brands fa-bitcoin"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment Modal --> | |
| <div class="modal-overlay" id="paymentModal"> | |
| <div class="modal-content"> | |
| <div class="crypto-header"> | |
| <h3>Crypto Checkout</h3> | |
| <i class="fa-solid fa-xmark" style="cursor:pointer; color: --text-muted;" onclick="closePaymentModal()"></i> | |
| </div> | |
| <div class="crypto-options"> | |
| <div class="crypto-option active" onclick="selectCrypto('BTC')"> | |
| <i class="fa-brands fa-bitcoin"></i> BTC | |
| </div> | |
| <div class="crypto-option" onclick="selectCrypto('ETH')"> | |
| <i class="fa-brands fa-ethereum"></i> ETH | |
| </div> | |
| <div class="crypto-option" onclick="selectCrypto('USDT')"> | |
| <i class="fa-solid fa-t"></i> USDT | |
| </div> | |
| </div> | |
| <div class="qr-container"> | |
| <div class="qr-placeholder"> | |
| <img src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh" alt="Crypto QR"> | |
| </div> | |
| </div> | |
| <div class="wallet-address"> | |
| Address: bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh | |
| </div> | |
| <div style="display: flex; justify-content: space-between; color: --text-muted; font-size: 0.9rem;"> | |
| <span>Total: RM <span id="modalAmount">0.00</span></span> | |
| <span id="cryptoAmount">0.00 BTC</span> | |
| </div> | |
| <button class="btn-main" style="margin-top: 10px; padding: 10px; font-size: 0.9rem;" onclick="simulatePayment()"> | |
| Confirm Transaction | |
| </button> | |
| <div class="status-bar"> | |
| <div class="status-progress" id="progressBar"></div> | |
| </div> | |
| <p id="statusText" style="text-align: center; margin-top: 10px; font-size: 0.8rem; color: --text-muted;">Waiting for payment...</p> | |
| </div> | |
| </div> | |
| <footer> | |
| <p>© 2023 MyCryptoTelco Malaysia. All rights reserved.</p> | |
| <p style="margin-top: 10px;"> | |
| <a href="#" style="color: --text-muted; margin: 0 10px;">Privacy</a> | |
| <a href="#" style="color: --text-muted; margin: 0 10px;">Terms</a> | |
| <a href="#" style="color: --text-muted; margin: 0 10px;">Support</a> | |
| </p> | |
| </footer> | |
| <script> | |
| // State | |
| let currentTab = 'topup'; | |
| let selectedTelco = ''; | |
| let selectedAmount = 0; | |
| let selectedCrypto = 'BTC'; | |
| // Elements | |
| const purchaseForm = document.getElementById('purchaseForm'); | |
| const phoneInputGroup = document.getElementById('phoneInputGroup'); | |
| const simInputGroup = document.getElementById('simInputGroup'); | |
| const modal = document.getElementById('paymentModal'); | |
| const progressBar = document.getElementById('progressBar'); | |
| const statusText = document.getElementById('statusText'); | |
| // Switch Tabs | |
| function switchTab(tab) { | |
| currentTab = tab; | |
| // Update Buttons | |
| document.querySelectorAll('.tab-btn').forEach(btn => { | |
| btn.classList.remove('active'); | |
| if(btn.innerText.toLowerCase().includes(tab === 'topup' ? 'prepaid' : 'sim')) { | |
| btn.classList.add('active'); | |
| } | |
| }); | |
| // Toggle Form Visibility | |
| purchaseForm.style.display = 'block'; | |
| // Toggle Inputs based on Tab | |
| if (tab === 'topup') { | |
| phoneInputGroup.style.display = 'block'; | |
| simInputGroup.style.display = 'none'; | |
| document.getElementById('selectedTelcoName').innerText = "Reload " + (selectedTelco || "Prepaid"); | |
| } else { | |
| phoneInputGroup.style.display = 'none'; | |
| simInputGroup.style.display = 'block'; | |
| document.getElementById('selectedTelcoName').innerText = "Buy " + (selectedTelco || "SIM") + " Card"; | |
| } | |
| } | |
| // Select Telco | |
| function selectTelco(name) { | |
| selectedTelco = name; | |
| // Visual Feedback | |
| document.querySelectorAll('.telco-card').forEach(card => { | |
| card.classList.remove('selected'); | |
| }); | |
| // Find the card clicked (simple logic for demo) | |
| const cards = document.querySelectorAll('.telco-card'); | |
| cards.forEach(card => { | |
| if(card.innerText.includes(name)) { | |
| card.classList.add('selected'); | |
| } | |
| }); | |
| // Show form if not visible | |
| purchaseForm.style.display = 'block'; | |
| // Update text | |
| if(currentTab === 'topup') { | |
| document.getElementById('selectedTelcoName').innerText = "Reload " + name; | |
| } else { | |
| document.getElementById('selectedTelcoName').innerText = "Buy " + name + " SIM"; | |
| } | |
| } | |
| // Set Amount | |
| function setAmount(amount) { | |
| selectedAmount = amount; | |
| document.getElementById('customAmount').value = amount; | |
| // Highlight button | |
| document.querySelectorAll('.amount-btn').forEach(btn => btn.classList.remove('active')); | |
| // In a real app, we'd match the specific button clicked | |
| } | |
| // Update Amount from custom input | |
| document.getElementById('customAmount').addEventListener('input', (e) => { | |
| selectedAmount = parseFloat(e.target.value) || 0; | |
| }); | |
| // Open Modal | |
| function openPaymentModal() { | |
| if(selectedAmount <= 0) { | |
| alert("Please enter an amount"); | |
| return; | |
| } | |
| modal.style.display = 'flex'; | |
| updateCryptoDisplay(); | |
| } | |
| // Close Modal | |
| function closePaymentModal() { | |
| modal.style.display = 'none'; | |
| progressBar.style.width = '0%'; | |
| statusText.innerText = "Waiting for payment..."; | |
| } | |
| // Select Crypto | |
| function selectCrypto(type) { | |
| selectedCrypto = type; | |
| document.querySelectorAll('.crypto-option').forEach(opt => opt.classList.remove('active')); | |
| // Add active class to clicked (logic simplified for demo) | |
| updateCryptoDisplay(); | |
| } | |
| // Update Crypto Conversion Display | |
| function updateCryptoDisplay() { | |
| document.getElementById('modalAmount').innerText = selectedAmount.toFixed(2); | |
| let cryptoVal = 0; | |
| if(selectedCrypto === 'BTC') cryptoVal = selectedAmount * 0.00015; // Mock rate | |
| if(selectedCrypto === 'ETH') cryptoVal = selectedAmount * 0.0004; | |
| if(selectedCrypto === 'USDT') cryptoVal = selectedAmount * 0.22; | |
| document.getElementById('cryptoAmount').innerText = `${cryptoVal.toFixed(4)} ${selectedCrypto}`; | |
| } | |
| // Simulate Payment Process | |
| function simulatePayment() { | |
| progressBar.style.width = '0%'; | |
| statusText.innerText = "Confirming transaction..."; | |
| statusText.style.color = "#a0a0a0"; | |
| let width = 0; | |
| const interval = setInterval(() => { | |
| if (width >= 100) { | |
| clearInterval(interval); | |
| statusText.innerText = "Payment Successful! Top-up initiated."; | |
| statusText.style.color = "#00f2ea"; | |
| setTimeout(() => { | |
| closePaymentModal(); | |
| alert("Thank you! Your top-up is being processed."); | |
| }, 2000); | |
| } else { | |
| width += 5; | |
| progressBar.style.width = width + '%'; | |
| } | |
| }, 200); | |
| } | |
| </script> | |
| </body> | |
| </html> |