qr_asistencia.html

Rivitä tekstiRaakaLataa (4705 tavua)
📅 2026-04-13T06:24:38.631Z
👁️ 38 katselukertaa
🔓 Julkinen


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Asistencia Saavedra</title>
    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body { margin: 0; background: #020617; color: #f1f5f9; font-family: 'Outfit', sans-serif; display: flex; align-items: center; justify-content: center; min-height: 100vh; }
        .card { width: 95%; max-width: 380px; background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(20px); border: 1px solid rgba(56, 189, 248, 0.3); border-radius: 24px; padding: 40px 24px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.5); box-sizing: border-box; }
        h1 { color: #38bdf8; margin: 0 0 10px; }
        p { color: #94a3b8; line-height: 1.5; margin-bottom: 30px; }
        .act { font-weight: 700; color: white; display: block; margin-top: 5px; font-size: 1.2rem; }
        button { background: #0284c7; color: white; border: none; padding: 18px; border-radius: 12px; font-size: 1.1rem; font-weight: 700; width: 100%; cursor: pointer; }
        .form { text-align: left; margin-bottom: 25px; display: none; }
        .form.active { display: block; }
        input { width: 100%; background: #0f172a; border: 1px solid #334155; border-radius: 10px; padding: 12px; color: white; box-sizing: border-box; margin-top: 5px; margin-bottom: 15px; font-size: 1rem; }
        #success { display: none; }
    </style>
</head>
<body>
    <div class="card" id="main">
        <h1>Asistencia Digital</h1>
        <p>Hola, registrate en:<br><span class="act" id="act-name">Cargando...</span></p>
                 <div id="setup" class="form">
                        <label>Nombre Completo</label>
                        <input type="text" id="name" placeholder="Tu nombre">
                        <label style="margin-top: 15px; display: block;">Telefono (opcional)</label>
                        <input type="tel" id="phone" placeholder="787-000-0000">
                </div>
                <button id="btn">REGISTRAR ASISTENCIA</button>
        </div>
        <div class="card" id="success">
                <h1 style="font-size: 4rem;">Success</h1>
                <h2>Registrado!</h2>
                <p>Ya puedes cerrar esta ventana.</p>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
        <script>
                const { createClient } = supabase;
                const _s = createClient('https://dtpfhwxwodzpitzmrbqr.supabase.co', 'sb_publishable_U8a8Gs8-2XGb36XHEW--HA_vYULfdU6');
                
                const urlParams = new URLSearchParams(window.location.search);
                const activityId = urlParams.get('activity');
                
                async function init() {
                        if (activityId) {
                                const { data } = await _s.from('qr_activities').select('name').eq('id', activityId).single();
                                if (data) document.getElementById('act-name').innerText = data.name;
                                else document.getElementById('act-name').innerText = activityId;
                        }
                }
                init();

                const btn = document.getElementById('btn');
                let n = localStorage.getItem('qr_n'), p = localStorage.getItem('qr_p');
                if (!n) document.getElementById('setup').classList.add('active');
                
                btn.onclick = async () => {
                        let name = n || document.getElementById('name').value.trim();
                        let phone = p || document.getElementById('phone').value.trim();
                        if (!name) { alert("Nombre requerido"); return; }
                        btn.disabled = true; btn.innerText = "PROCESANDO...";
                        const { error } = await _s.from('qr_attendance').insert([{ activity_id: activityId, attendee_name: name, attendee_phone: phone }]);
                        if (error) { alert("Error: " + error.message); btn.disabled = false; btn.innerText = "REINTENTAR"; }
                        else { 
                                localStorage.setItem('qr_n', name); 
                                localStorage.setItem('qr_p', phone); 
                                document.getElementById('main').style.display='none'; 
                                document.getElementById('success').style.display='block'; 
                        }
                };
        </script>
</body>
</html>