GURU ASN PPPK
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buku Tamu Digital - Dinas Pendidikan Kabupaten</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.card-shadow { box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.input-focus:focus { transform: translateY(-2px); transition: all 0.3s ease; }
</style>
</head>
<body class="min-h-screen gradient-bg">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<div class="text-center mb-8">
<div class="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center card-shadow">
<svg class="w-12 h-12 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"/>
</svg>
</div>
<h1 class="text-4xl font-bold text-white mb-2">Buku Tamu Digital</h1>
<p class="text-xl text-blue-100">Dinas Pendidikan Kabupaten</p>
<p class="text-blue-200 mt-2">Selamat datang, silakan isi data kunjungan Anda</p>
</div>
<div class="max-w-4xl mx-auto">
<!-- Form Section -->
<div class="bg-white rounded-2xl card-shadow p-8 mb-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Form Kunjungan</h2>
<form id="guestForm" class="space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Nama Lengkap *</label>
<input type="text" id="nama" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Instansi/Organisasi *</label>
<input type="text" id="instansi" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">No. Telepon *</label>
<input type="tel" id="telepon" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Alamat *</label>
<textarea id="alamat" required rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all resize-none"></textarea>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Tujuan Kunjungan *</label>
<select id="tujuan" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
<option value="">Pilih tujuan kunjungan</option>
<option value="Konsultasi">Konsultasi</option>
<option value="Pengajuan Proposal">Pengajuan Proposal</option>
<option value="Rapat/Meeting">Rapat/Meeting</option>
<option value="Monitoring">Monitoring</option>
<option value="Pelatihan">Pelatihan</option>
<option value="Lainnya">Lainnya</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Bertemu dengan *</label>
<input type="text" id="bertemu" required placeholder="Nama pegawai/bagian" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Keterangan Tambahan</label>
<textarea id="keterangan" rows="3" placeholder="Jelaskan keperluan atau keterangan tambahan..." class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all resize-none"></textarea>
</div>
<div class="text-center">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
<span class="flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Daftar Kunjungan
</span>
</button>
</div>
</form>
</div>
<!-- Guest List Section -->
<div class="bg-white rounded-2xl card-shadow p-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Daftar Pengunjung Hari Ini</h2>
<div class="overflow-x-auto">
<table class="w-full table-auto">
<thead>
<tr class="bg-gray-50">
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">No</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Waktu</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Nama</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Instansi</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Tujuan</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Bertemu</th>
</tr>
</thead>
<tbody id="guestList" class="divide-y divide-gray-200">
<!-- Sample data -->
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 text-sm text-gray-900">1</td>
<td class="px-4 py-3 text-sm text-gray-600">08:30</td>
<td class="px-4 py-3 text-sm font-medium text-gray-900">Ahmad Suryadi</td>
<td class="px-4 py-3 text-sm text-gray-600">SMAN 1 Kota</td>
<td class="px-4 py-3 text-sm text-gray-600">Konsultasi</td>
<td class="px-4 py-3 text-sm text-gray-600">Kepala Bidang</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 text-sm text-gray-900">2</td>
<td class="px-4 py-3 text-sm text-gray-600">09:15</td>
<td class="px-4 py-3 text-sm font-medium text-gray-900">Siti Nurhaliza</td>
<td class="px-4 py-3 text-sm text-gray-600">Yayasan Pendidikan</td>
<td class="px-4 py-3 text-sm text-gray-600">Pengajuan Proposal</td>
<td class="px-4 py-3 text-sm text-gray-600">Sekretaris</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-6 text-center">
<p class="text-sm text-gray-500">Total pengunjung hari ini: <span id="totalVisitors" class="font-semibold text-blue-600">2</span> orang</p>
</div>
</div>
</div>
<!-- Success Modal -->
<div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="bg-white rounded-2xl p-8 max-w-md mx-4 text-center card-shadow">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Berhasil Terdaftar!</h3>
<p class="text-gray-600 mb-6">Terima kasih telah mengisi buku tamu. Data kunjungan Anda telah tersimpan.</p>
<button onclick="closeModal()" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors">
Tutup
</button>
</div>
</div>
</div>
<script>
let guestCounter = 3; // Starting from 3 since we have 2 sample entries
document.getElementById('guestForm').addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
const nama = document.getElementById('nama').value;
const instansi = document.getElementById('instansi').value;
const telepon = document.getElementById('telepon').value;
const email = document.getElementById('email').value;
const alamat = document.getElementById('alamat').value;
const tujuan = document.getElementById('tujuan').value;
const bertemu = document.getElementById('bertemu').value;
const keterangan = document.getElementById('keterangan').value;
// Get current time
const now = new Date();
const waktu = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
// Add to guest list
const guestList = document.getElementById('guestList');
const newRow = document.createElement('tr');
newRow.className = 'hover:bg-gray-50';
newRow.innerHTML = `
<td class="px-4 py-3 text-sm text-gray-900">${guestCounter}</td>
<td class="px-4 py-3 text-sm text-gray-600">${waktu}</td>
<td class="px-4 py-3 text-sm font-medium text-gray-900">${nama}</td>
<td class="px-4 py-3 text-sm text-gray-600">${instansi}</td>
<td class="px-4 py-3 text-sm text-gray-600">${tujuan}</td>
<td class="px-4 py-3 text-sm text-gray-600">${bertemu}</td>
`;
guestList.appendChild(newRow);
// Update counter
guestCounter++;
document.getElementById('totalVisitors').textContent = guestCounter - 1;
// Show success modal
document.getElementById('successModal').classList.remove('hidden');
document.getElementById('successModal').classList.add('flex');
// Reset form
this.reset();
});
function closeModal() {
document.getElementById('successModal').classList.add('hidden');
document.getElementById('successModal').classList.remove('flex');
}
// Close modal when clicking outside
document.getElementById('successModal').addEventListener('click', function(e) {
if (e.target === this) {
closeModal();
}
});
// Auto-update time display
function updateTime() {
const now = new Date();
const timeString = now.toLocaleString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
// You can add a time display element if needed
}
// Update time every minute
setInterval(updateTime, 60000);
updateTime(); // Initial call
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'963ffdd2705a5d17',t:'MTc1MzMyNDE4My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buku Tamu Digital - Dinas Pendidikan Kabupaten</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
body { font-family: 'Inter', sans-serif; }
.gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.card-shadow { box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.input-focus:focus { transform: translateY(-2px); transition: all 0.3s ease; }
</style>
</head>
<body class="min-h-screen gradient-bg">
<div class="container mx-auto px-4 py-8">
<!-- Header -->
<div class="text-center mb-8">
<div class="bg-white rounded-full w-24 h-24 mx-auto mb-4 flex items-center justify-center card-shadow">
<svg class="w-12 h-12 text-blue-600" fill="currentColor" viewBox="0 0 20 20">
<path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"/>
</svg>
</div>
<h1 class="text-4xl font-bold text-white mb-2">Buku Tamu Digital</h1>
<p class="text-xl text-blue-100">Dinas Pendidikan Kabupaten</p>
<p class="text-blue-200 mt-2">Selamat datang, silakan isi data kunjungan Anda</p>
</div>
<div class="max-w-4xl mx-auto">
<!-- Form Section -->
<div class="bg-white rounded-2xl card-shadow p-8 mb-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Form Kunjungan</h2>
<form id="guestForm" class="space-y-6">
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Nama Lengkap *</label>
<input type="text" id="nama" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Instansi/Organisasi *</label>
<input type="text" id="instansi" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
</div>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">No. Telepon *</label>
<input type="tel" id="telepon" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Email</label>
<input type="email" id="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Alamat *</label>
<textarea id="alamat" required rows="3" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all resize-none"></textarea>
</div>
<div class="grid md:grid-cols-2 gap-6">
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Tujuan Kunjungan *</label>
<select id="tujuan" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
<option value="">Pilih tujuan kunjungan</option>
<option value="Konsultasi">Konsultasi</option>
<option value="Pengajuan Proposal">Pengajuan Proposal</option>
<option value="Rapat/Meeting">Rapat/Meeting</option>
<option value="Monitoring">Monitoring</option>
<option value="Pelatihan">Pelatihan</option>
<option value="Lainnya">Lainnya</option>
</select>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Bertemu dengan *</label>
<input type="text" id="bertemu" required placeholder="Nama pegawai/bagian" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all">
</div>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 mb-2">Keterangan Tambahan</label>
<textarea id="keterangan" rows="3" placeholder="Jelaskan keperluan atau keterangan tambahan..." class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent input-focus transition-all resize-none"></textarea>
</div>
<div class="text-center">
<button type="submit" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-3 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
<span class="flex items-center justify-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
</svg>
Daftar Kunjungan
</span>
</button>
</div>
</form>
</div>
<!-- Guest List Section -->
<div class="bg-white rounded-2xl card-shadow p-8">
<h2 class="text-2xl font-semibold text-gray-800 mb-6 text-center">Daftar Pengunjung Hari Ini</h2>
<div class="overflow-x-auto">
<table class="w-full table-auto">
<thead>
<tr class="bg-gray-50">
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">No</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Waktu</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Nama</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Instansi</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Tujuan</th>
<th class="px-4 py-3 text-left text-sm font-medium text-gray-700">Bertemu</th>
</tr>
</thead>
<tbody id="guestList" class="divide-y divide-gray-200">
<!-- Sample data -->
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 text-sm text-gray-900">1</td>
<td class="px-4 py-3 text-sm text-gray-600">08:30</td>
<td class="px-4 py-3 text-sm font-medium text-gray-900">Ahmad Suryadi</td>
<td class="px-4 py-3 text-sm text-gray-600">SMAN 1 Kota</td>
<td class="px-4 py-3 text-sm text-gray-600">Konsultasi</td>
<td class="px-4 py-3 text-sm text-gray-600">Kepala Bidang</td>
</tr>
<tr class="hover:bg-gray-50">
<td class="px-4 py-3 text-sm text-gray-900">2</td>
<td class="px-4 py-3 text-sm text-gray-600">09:15</td>
<td class="px-4 py-3 text-sm font-medium text-gray-900">Siti Nurhaliza</td>
<td class="px-4 py-3 text-sm text-gray-600">Yayasan Pendidikan</td>
<td class="px-4 py-3 text-sm text-gray-600">Pengajuan Proposal</td>
<td class="px-4 py-3 text-sm text-gray-600">Sekretaris</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-6 text-center">
<p class="text-sm text-gray-500">Total pengunjung hari ini: <span id="totalVisitors" class="font-semibold text-blue-600">2</span> orang</p>
</div>
</div>
</div>
<!-- Success Modal -->
<div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
<div class="bg-white rounded-2xl p-8 max-w-md mx-4 text-center card-shadow">
<div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
<svg class="w-8 h-8 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
</svg>
</div>
<h3 class="text-xl font-semibold text-gray-800 mb-2">Berhasil Terdaftar!</h3>
<p class="text-gray-600 mb-6">Terima kasih telah mengisi buku tamu. Data kunjungan Anda telah tersimpan.</p>
<button onclick="closeModal()" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-6 rounded-lg transition-colors">
Tutup
</button>
</div>
</div>
</div>
<script>
let guestCounter = 3; // Starting from 3 since we have 2 sample entries
document.getElementById('guestForm').addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
const nama = document.getElementById('nama').value;
const instansi = document.getElementById('instansi').value;
const telepon = document.getElementById('telepon').value;
const email = document.getElementById('email').value;
const alamat = document.getElementById('alamat').value;
const tujuan = document.getElementById('tujuan').value;
const bertemu = document.getElementById('bertemu').value;
const keterangan = document.getElementById('keterangan').value;
// Get current time
const now = new Date();
const waktu = now.toLocaleTimeString('id-ID', { hour: '2-digit', minute: '2-digit' });
// Add to guest list
const guestList = document.getElementById('guestList');
const newRow = document.createElement('tr');
newRow.className = 'hover:bg-gray-50';
newRow.innerHTML = `
<td class="px-4 py-3 text-sm text-gray-900">${guestCounter}</td>
<td class="px-4 py-3 text-sm text-gray-600">${waktu}</td>
<td class="px-4 py-3 text-sm font-medium text-gray-900">${nama}</td>
<td class="px-4 py-3 text-sm text-gray-600">${instansi}</td>
<td class="px-4 py-3 text-sm text-gray-600">${tujuan}</td>
<td class="px-4 py-3 text-sm text-gray-600">${bertemu}</td>
`;
guestList.appendChild(newRow);
// Update counter
guestCounter++;
document.getElementById('totalVisitors').textContent = guestCounter - 1;
// Show success modal
document.getElementById('successModal').classList.remove('hidden');
document.getElementById('successModal').classList.add('flex');
// Reset form
this.reset();
});
function closeModal() {
document.getElementById('successModal').classList.add('hidden');
document.getElementById('successModal').classList.remove('flex');
}
// Close modal when clicking outside
document.getElementById('successModal').addEventListener('click', function(e) {
if (e.target === this) {
closeModal();
}
});
// Auto-update time display
function updateTime() {
const now = new Date();
const timeString = now.toLocaleString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric',
hour: '2-digit',
minute: '2-digit'
});
// You can add a time display element if needed
}
// Update time every minute
setInterval(updateTime, 60000);
updateTime(); // Initial call
</script>
<script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'963ffdd2705a5d17',t:'MTc1MzMyNDE4My4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body>
</html>