Tul xxx Tul

Viewing: countdown.php

<?php
$db = getDB();
$countdown = $db->query('SELECT * FROM countdown_settings LIMIT 1')->fetch();
?>

<div class="admin-card">
    <div class="card-header">
        <div class="card-title"><i class="ph-fill ph-timer"></i> Configuración del Countdown</div>
    </div>
    <form id="countdownForm" onsubmit="saveCountdown(event)">
        <div class="form-row">
            <div class="form-group">
                <label class="form-label">Fecha y Hora del Evento</label>
                <input type="datetime-local" id="eventDate" class="form-control" 
                    value="<?= date('Y-m-d\TH:i', strtotime($countdown['event_date'])) ?>" required>
            </div>
            <div class="form-group">
                <label class="form-label">Título de la Sección</label>
                <input type="text" id="countdownTitle" class="form-control" value="<?= htmlspecialchars($countdown['section_title']) ?>">
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Subtítulo</label>
            <input type="text" id="countdownSubtitle" class="form-control" value="<?= htmlspecialchars($countdown['section_subtitle']) ?>">
        </div>
        <button type="submit" class="btn btn-primary"><i class="ph-bold ph-floppy-disk"></i> Guardar</button>
    </form>
</div>

<!-- Vista previa en vivo -->
<div class="admin-card">
    <div class="card-header">
        <div class="card-title"><i class="ph-fill ph-eye"></i> Vista Previa</div>
    </div>
    <div style="text-align:center;padding:2rem 0;">
        <div id="previewCountdown" style="display:flex;justify-content:center;gap:1.2rem;"></div>
    </div>
</div>

<script>
async function saveCountdown(e) {
    e.preventDefault();
    await adminFetch('save_countdown', {
        event_date: document.getElementById('eventDate').value,
        section_title: document.getElementById('countdownTitle').value,
        section_subtitle: document.getElementById('countdownSubtitle').value
    });
}

(function(){
    const el = document.getElementById('previewCountdown');
    function pad(n){ return String(n).padStart(2,'0'); }
    function update(){
        const target = new Date(document.getElementById('eventDate').value).getTime();
        const d = Math.max(target - Date.now(), 0);
        const days = Math.floor(d/(1000*60*60*24));
        const hrs = Math.floor((d%(1000*60*60*24))/(1000*60*60));
        const min = Math.floor((d%(1000*60*60))/(1000*60));
        const sec = Math.floor((d%(1000*60))/1000);
        el.innerHTML = [{v:days,l:'Días'},{v:hrs,l:'Horas'},{v:min,l:'Min'},{v:sec,l:'Seg'}]
            .map(i=>`<div style="text-align:center"><div style="width:70px;height:70px;border-radius:18px;background:var(--admin-surface);border:1px solid var(--admin-border);display:grid;place-items:center;font-size:1.8rem;font-weight:800;color:var(--admin-gold);">${pad(i.v)}</div><div style="font-size:.7rem;color:var(--admin-text-muted);margin-top:.5rem;text-transform:uppercase;letter-spacing:.12em;">${i.l}</div></div>`).join('');
    }
    update(); setInterval(update, 1000);
    document.getElementById('eventDate').addEventListener('change', update);
})();
</script>
User / IP	: 216.73.216.159
Host / Server	: 45.84.207.204 / aircan.me
System	: Linux lt-bnk-web1726.main-hosting.eu 5.14.0-611.36.1.el9_7.x86_64 #1 SMP PREEMPT_DYNAMIC Tue Mar 3 11:23:52 EST 2026 x86_64