Mi Telcel Recarga Info
// Función para limpiar selección visual function clearSelectedButtons() amountBtns.forEach(btn => btn.classList.remove('selected'));
<button class="btn-recargar" id="recargarBtn"> ⚡ Realizar Recarga </button> <div id="statusMessage" class="message"> 💡 Selecciona un monto e ingresa tu número </div> </div> <footer> 🔒 Simulación segura · Conectado a Telcel API (demo) </footer> </div> mi telcel recarga
// Seleccionar monto predefinido amountBtns.forEach(btn => btn.addEventListener('click', () => clearSelectedButtons(); btn.classList.add('selected'); selectedAmount = parseInt(btn.getAttribute('data-amount'), 10); customAmountInput.value = ''; // limpiar custom statusDiv.innerHTML = `✅ Monto seleccionado: $$selectedAmount MXN`; statusDiv.classList.remove('error-msg', 'success-msg'); ); ); button class="btn-recargar" id="recargarBtn">
✅ What it does: Allows a user to recharge a Telcel phone number with predefined amounts ($20, $50, $100, $200, $500) using a simple interface. 🧩 HTML/CSS/JS Mini Web Tool <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes"> <title>Mi Telcel Recarga - Rápido y Seguro</title> <style> * box-sizing: border-box; font-family: system-ui, 'Segoe UI', 'Roboto', sans-serif; body background: linear-gradient(145deg, #004481 0%, #002b54 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; margin: 0; padding: 20px; .recarga-card max-width: 500px; width: 100%; background: white; border-radius: 48px 32px 48px 32px; box-shadow: 0 20px 40px rgba(0,0,0,0.3); overflow: hidden; transition: all 0.2s ease; .telcel-header background: #e2001a; padding: 24px 20px; text-align: center; color: white; .telcel-header h1 margin: 0; font-size: 1.9rem; letter-spacing: -0.5px; display: flex; align-items: center; justify-content: center; gap: 10px; .telcel-header p margin: 8px 0 0; opacity: 0.9; font-weight: 500; .form-content padding: 28px 24px 32px; .input-group margin-bottom: 24px; label font-weight: 600; color: #002b54; display: block; margin-bottom: 8px; font-size: 0.9rem; .phone-input width: 100%; padding: 14px 16px; font-size: 1rem; border: 2px solid #ddd; border-radius: 60px; transition: 0.2s; outline: none; background: #f9f9fc; .phone-input:focus border-color: #e2001a; background: white; .amount-buttons display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 8px; .amount-btn background: #f0f2f5; border: none; padding: 12px 18px; font-size: 1.1rem; font-weight: bold; border-radius: 60px; cursor: pointer; transition: 0.2s; color: #002b54; flex: 1 0 70px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); .amount-btn.selected background: #e2001a; color: white; box-shadow: 0 4px 10px rgba(226,0,26,0.3); .custom-amount margin-top: 10px; display: flex; gap: 10px; align-items: center; .custom-amount input flex: 1; padding: 12px; border-radius: 60px; border: 1px solid #ccc; .btn-recargar background: #004481; color: white; border: none; width: 100%; padding: 16px; font-size: 1.2rem; font-weight: bold; border-radius: 60px; margin-top: 20px; cursor: pointer; transition: 0.2s; display: flex; justify-content: center; gap: 10px; align-items: center; .btn-recargar:hover background: #002b54; transform: scale(0.98); .message margin-top: 20px; padding: 12px; border-radius: 40px; text-align: center; font-weight: 500; background: #eef2ff; color: #004481; .error-msg background: #ffe6e6; color: #b91c1c; .success-msg background: #e0f2e9; color: #0a5c3e; footer font-size: 11px; text-align: center; padding: 12px; background: #f8f9fc; color: #6c757d; border-top: 1px solid #e9ecef; @media (max-width: 450px) .amount-btn padding: 10px 12px; font-size: 1rem; </style> </head> <body> <div class="recarga-card"> <div class="telcel-header"> <h1>📱 Mi Telcel <span style="font-weight:300;">Recarga</span></h1> <p>Recarga segura · Saldo al instante</p> </div> <div class="form-content"> <div class="input-group"> <label>📞 Número Telcel (10 dígitos)</label> <input type="tel" id="phoneNumber" class="phone-input" placeholder="Ej. 5512345678" maxlength="10" inputmode="numeric"> </div> ⚡ Realizar Recarga <
<script> // Estado actual del monto seleccionado let selectedAmount = null; const amountBtns = document.querySelectorAll('.amount-btn'); const customAmountInput = document.getElementById('customAmount'); const phoneInput = document.getElementById('phoneNumber'); const recargarBtn = document.getElementById('recargarBtn'); const statusDiv = document.getElementById('statusMessage');