YourCompany
Welcome
Please sign in to get your visitor badge
Sign In
Visitor Information
Full Name
*
Company
Title
Email
Cancel
Print Badge
Your badge is printing. Welcome!
YourCompany
VISITOR
Visitor Log
Export CSV
Clear All
×
0
Total Visitors
0
Today
Date & Time
Name
Company
Title
Email
No visitors yet.
// ======================================== // CONFIG // ======================================== const AUTO_RESET_SECONDS = 12; const STORAGE_KEY = 'visitorKioskLog'; let resetTimer = null; // ======================================== // VISITOR LOG — localStorage // ======================================== function getVisitors() { try { return JSON.parse(localStorage.getItem(STORAGE_KEY)) || []; } catch { return []; } } function saveVisitor(data) { const visitors = getVisitors(); visitors.push(data); localStorage.setItem(STORAGE_KEY, JSON.stringify(visitors)); } function clearAllVisitors() { localStorage.removeItem(STORAGE_KEY); } // ======================================== // NAVIGATION // ======================================== function showScreen(id) { document.querySelectorAll('.screen').forEach(s => s.classList.remove('active')); document.getElementById(id).classList.add('active'); if (resetTimer) { clearTimeout(resetTimer); resetTimer = null; } if (id === 'screenForm') { setTimeout(() => document.getElementById('inName').focus(), 100); } if (id === 'screenConfirm') { resetTimer = setTimeout(() => resetKiosk(), AUTO_RESET_SECONDS * 1000); } } // ======================================== // FORM SUBMISSION // ======================================== function submitForm() { const name = document.getElementById('inName').value.trim(); const company = document.getElementById('inCompany').value.trim(); const title = document.getElementById('inTitle').value.trim(); const email = document.getElementById('inEmail').value.trim(); const nameInput = document.getElementById('inName'); if (!name) { nameInput.classList.add('error'); nameInput.focus(); nameInput.addEventListener('input', () => nameInput.classList.remove('error'), { once: true }); return; } const now = new Date(); const dateStr = now.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); const timeStr = now.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }); document.getElementById('badgeName').textContent = name; document.getElementById('badgeTitle').textContent = title || ''; document.getElementById('badgeOrg').textContent = company || ''; document.getElementById('badgeDate').textContent = `${dateStr} • ${timeStr}`; document.getElementById('confirmName').textContent = name; const orgLine = [title, company].filter(Boolean).join(' — '); document.getElementById('confirmOrg').textContent = orgLine; saveVisitor({ name, company, title, email, date: now.toISOString() }); window.print(); showScreen('screenConfirm'); } // ======================================== // RESET // ======================================== function resetKiosk() { document.getElementById('inName').value = ''; document.getElementById('inCompany').value = ''; document.getElementById('inTitle').value = ''; document.getElementById('inEmail').value = ''; showScreen('screenWelcome'); } // ======================================== // ADMIN PANEL — triple-tap to open // ======================================== let adminTapCount = 0; let adminTapTimer = null; document.getElementById('adminTrigger').addEventListener('click', () => { adminTapCount++; if (adminTapCount === 1) { adminTapTimer = setTimeout(() => { adminTapCount = 0; }, 1000); } if (adminTapCount >= 3) { adminTapCount = 0; clearTimeout(adminTapTimer); openAdmin(); } }); function escHtml(str) { const d = document.createElement('div'); d.textContent = str; return d.innerHTML; } function openAdmin() { const visitors = getVisitors(); const tbody = document.getElementById('adminTableBody'); const emptyMsg = document.getElementById('adminEmpty'); const today = new Date().toDateString(); const todayCount = visitors.filter(v => new Date(v.date).toDateString() === today).length; document.getElementById('statTotal').textContent = visitors.length; document.getElementById('statToday').textContent = todayCount; tbody.innerHTML = ''; if (visitors.length === 0) { emptyMsg.style.display = 'block'; } else { emptyMsg.style.display = 'none'; [...visitors].reverse().forEach(v => { const d = new Date(v.date); const ds = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }); const ts = d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }); const row = document.createElement('tr'); row.innerHTML = `
${ds}
${ts}
${escHtml(v.name)}
${escHtml(v.company || '—')}
${escHtml(v.title || '—')}
${escHtml(v.email || '—')}
`; tbody.appendChild(row); }); } document.getElementById('adminOverlay').classList.add('active'); } function closeAdmin() { document.getElementById('adminOverlay').classList.remove('active'); } // ======================================== // EXPORT CSV // ======================================== function exportCSV() { const visitors = getVisitors(); if (!visitors.length) { alert('No visitors to export.'); return; } const headers = ['Date','Time','Name','Company','Title','Email']; const rows = visitors.map(v => { const d = new Date(v.date); return [ d.toLocaleDateString('en-US'), d.toLocaleTimeString('en-US', { hour: 'numeric', minute: '2-digit' }), v.name, v.company, v.title, v.email ].map(csvEsc); }); const csv = [headers.join(','), ...rows.map(r => r.join(','))].join('\n'); const blob = new Blob([csv], { type: 'text/csv' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `visitor-log-${new Date().toISOString().slice(0,10)}.csv`; a.click(); URL.revokeObjectURL(url); } function csvEsc(val) { val = (val || '').toString(); return (val.includes(',') || val.includes('"') || val.includes('\n')) ? '"' + val.replace(/"/g, '""') + '"' : val; } // ======================================== // CLEAR LOG // ======================================== function clearLog() { if (confirm('Delete all visitor records? This cannot be undone.')) { clearAllVisitors(); openAdmin(); } } // ======================================== // KIOSK HELPERS // ======================================== document.addEventListener('contextmenu', e => e.preventDefault()); document.addEventListener('keydown', (e) => { if (e.key === 'Enter') { const fields = ['inName', 'inCompany', 'inTitle', 'inEmail']; const active = document.activeElement; const idx = fields.indexOf(active?.id); if (idx >= 0 && idx < fields.length - 1) { e.preventDefault(); document.getElementById(fields[idx + 1]).focus(); } else if (idx === fields.length - 1) { e.preventDefault(); submitForm(); } } }); document.getElementById('adminOverlay').addEventListener('click', (e) => { if (e.target === e.currentTarget) closeAdmin(); });