<!DOCTYPE html>

<head>

<title>Sistem Rekod Dokumen - Gaji IPD SKN</title>

<style>

:root {

--bg-color-dark: #0a0e17;

--neon-cyan: #00f3ff;

--neon-purple: #bc13fe;

}

body {

background-color: var(--bg-color-dark);

color: #e2e8f0;

font-family: 'Rajdhani', sans-serif;

overflow-x: hidden;

transition: background-color 0.8s ease;

}

body.light-mode { background-color: #f3f4f6; }

body.light-mode .cyber-grid,

body.light-mode .dark-overlay {

opacity: 0 !important;

visibility: hidden;

transition: opacity 0.8s ease, visibility 0.8s ease;

}

h1, h2, .font-cyber { font-family: 'Orbitron', sans-serif; }

.cyber-grid {

position: fixed;

top: 0; left: 0; width: 100vw; height: 100vh;

background-image:

linear-gradient(rgba(0, 243, 255, 0.05) 1px, transparent 1px),

linear-gradient(90deg, rgba(0, 243, 255, 0.05) 1px, transparent 1px);

background-size: 40px 40px;

background-position: center center;

z-index: -2;

transform: perspective(500px) rotateX(60deg) scale(2.5) translateY(-100px);

animation: gridMove 20s linear infinite;

transition: opacity 0.8s ease, visibility 0.8s ease;

}

.dark-overlay { transition: opacity 0.8s ease, visibility 0.8s ease; }

@keyframes gridMove {

0% { transform: perspective(500px) rotateX(60deg) scale(2.5) translateY(0); }

100% { transform: perspective(500px) rotateX(60deg) scale(2.5) translateY(40px); }

}

.neon-text-cyan {

color: var(--neon-cyan);

text-shadow: 0 0 8px rgba(0, 243, 255, 0.6), 0 0 20px rgba(0, 243, 255, 0.4);

}

.neon-text-white {

color: #ffffff;

text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px var(--neon-cyan);

}

.cyber-button {

position: relative;

background: rgba(0, 243, 255, 0.05);

color: var(--neon-cyan);

border: 1px solid var(--neon-cyan);

text-transform: uppercase;

letter-spacing: 2px;

overflow: hidden;

transition: 0.3s;

box-shadow: 0 0 10px rgba(0, 243, 255, 0.2);

backdrop-filter: blur(5px);

}

.cyber-button::before {

content: '';

position: absolute;

top: 0; left: -100%;

width: 100%; height: 100%;

background: linear-gradient(90deg, transparent, rgba(0, 243, 255, 0.4), transparent);

transition: 0.5s;

}

.cyber-button:hover {

background: rgba(0, 243, 255, 0.15);

box-shadow: 0 0 25px rgba(0, 243, 255, 0.6);

color: #fff;

}

.cyber-button:hover::before { left: 100%; }

.fade-slide-hidden {

opacity: 0;

transform: translateY(30px);

pointer-events: none;

position: absolute;

}

.fade-slide-active {

opacity: 1;

transform: translateY(0);

transition: opacity 0.6s ease-out, transform 0.6s ease-out;

position: relative;

}

.form-card {

background: #ffffff;

border: 1px solid #e5e7eb;

box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);

border-radius: 0.75rem;

color: #1f2937;

}

.form-input-clean {

background-color: #ffffff;

border: 1px solid #d1d5db;

color: #111827;

transition: all 0.2s ease;

}

.form-input-clean:focus {

outline: none;

border-color: #3b82f6;

box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);

}

@media print {

body { background: white !important; color: black !important; font-family: Arial, sans-serif !important; }

.cyber-grid, header, .no-print, #hero-section, .dark-overlay, #toast-container { display: none !important; }

.print-only { display: block !important; }

#app-container { padding: 0 !important; margin: 0 !important; background: white !important; max-width: 100% !important; }

.form-card { background: white !important; border: none !important; box-shadow: none !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }

.form-input-clean, select, textarea { color: black !important; border-color: #ccc !important; background: white !important; -webkit-appearance: none; }

.print-header { text-align: center; margin-bottom: 2rem; border-bottom: 2px solid black; padding-bottom: 1rem; }

.signature-area { margin-top: 5rem; display: flex; justify-content: space-between; page-break-inside: avoid; }

.signature-box { width: 40%; text-align: center; border-top: 1px dashed black; padding-top: 10px; }

}

.print-only { display: none; }

</style>

</head>

</svg>

<div>

</div>

</button>

</div>

</header>

<img src="https://images.unsplash.com/photo-1614729939124-032f0b56c9ce?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80"

alt="Cyberpunk Avatar"

class="relative w-full h-full object-cover rounded-full border-4 border-[#0a0e17] shadow-[0_0_20px_rgba(0,243,255,0.8)] z-10 transition-transform duration-500 group-hover:scale-[1.02]">

</div>

SISTEM REKOD <br/><span class="neon-text-cyan">DOKUMEN</span>

</h1>

UNIT GAJI IPD SKN

</p>

AKSES SISTEM

</button>

</div>

<h1 class="text-2xl font-bold uppercase">Rekod Pengesahan Penerimaan Dokumen Gaji</h1>

<p class="text-sm text-gray-600">JABATAN SUMBER MANUSIA / UNIT GAJI IPD SKN</p>

</div>

Borang Penghantaran Dokumen

</h3>

<span class="text-xs text-gray-500 font-mono tracking-widest bg-gray-100 border border-gray-200 px-2 py-1 rounded">ADMIN_MODE</span>

</div>

<label for="noRujukan" class="block text-sm font-semibold text-gray-700">No. Rujukan [ID]</label>

</div>

<label for="tarikhSurat" class="block text-sm font-semibold text-gray-700">Tarikh Transmisi</label>

</div>

<label for="perkaraUtama" class="block text-sm font-semibold text-gray-700">Perkara</label>

<option value="PENYATA PERUBAHAN PENDAPATAN SESEORANG PEGAWAI">PENYATA PERUBAHAN PENDAPATAN SESEORANG PEGAWAI</option>

</select>

</div>

<label for="bahagian" class="block text-sm font-semibold text-gray-700">Pilih Bahagian Penerima</label>

<option value="">-- Sila Pilih Bahagian --</option>

<option value="Cawangan Khas">Cawangan Khas</option>

<option value="Bahagian Ketenteraman Awam">Bahagian Ketenteraman Awam</option>

<option value="Bahagian Siasatan Jenayah Narkotik">Bahagian Siasatan Jenayah Narkotik</option>

<option value="Bahagian Integriti Pematuhan Standart">Bahagian Integriti Pematuhan Standart</option>

<option value="KPB Bandar Sandakan">KPB Bandar Sandakan</option>

<option value="Cawangan Lat/Sukan">Cawangan Lat/Sukan</option>

<option value="Cawangan Kebajikan">Cawangan Kebajikan</option>

<option value="Cawangan HEA">Cawangan HEA</option>

<option value="Cawangan Kawalan Keselamatan Lapangan Terbang">Cawangan Kawalan Keselamatan Lapangan Terbang</option>

</select>

</div>

<label class="block text-sm font-bold text-gray-700 uppercase tracking-wide border-l-4 border-blue-500 pl-3">Pilihan Mod Kemasukan Kakitangan</label>

<span class="text-sm font-bold text-gray-700 group-hover:text-blue-600 transition-colors">Isi Individu</span>

</label>

<span class="text-sm font-bold text-gray-700 group-hover:text-blue-600 transition-colors">Tampal Kelompok (Pukal)</span>

</label>

<span class="text-sm font-bold text-gray-700 group-hover:text-blue-600 transition-colors">Semua Kakitangan</span>

</label>

</div>

<label class="block text-sm font-semibold text-gray-600">Senarai Nama & Butiran</label>

Tambah Kakitangan

</button>

</div>

</div>

<label for="butiranKelompok" class="block text-sm font-semibold text-gray-700">Tetapkan Butiran (Untuk semua nama ditampal)</label>

</div>

Tampal Senarai Nama Di Sini

<span class="text-xs font-normal text-blue-600 bg-white px-2 py-1 rounded border border-blue-200">Satu nama per baris</span>

</label>

</div>

<p class="text-sm text-green-800">Mod pukal <strong>"SEMUA KAKITANGAN"</strong> untuk bahagian penerima yang dipilih.</p>

</div>

<label for="butiranSemua" class="block text-sm font-semibold text-gray-700">Tetapkan Butiran Gaji</label>

</div>

Simpan & Jana Link

</button>

Kosongkan Borang

</button>

</div>

Pautan Berjaya Dijana

</p>

</div>

Modul Pengesahan

</h3>

</div>

STATUS: PENDING

</div>

<div>

<span class="block text-gray-500 text-xs font-bold uppercase tracking-wider mb-1">NO. RUJUKAN</span>

</div>

<div>

<span class="block text-gray-500 text-xs font-bold uppercase tracking-wider mb-1">TARIKH TRANSMISI</span>

</div>

<span class="block text-gray-500 text-xs font-bold uppercase tracking-wider mb-1">PERKARA</span>

</div>

<span class="block text-gray-500 text-xs font-bold uppercase tracking-wider mb-1">BAHAGIAN PENERIMA</span>

</div>

<span class="block text-gray-500 text-xs font-bold uppercase tracking-wider mb-2">SENARAI KAKITANGAN & BUTIRAN</span>

<tr>

<th scope="col" class="px-4 py-3 text-left text-xs font-bold text-gray-600 uppercase tracking-wider w-1/2">Nama Kakitangan</th>

<th scope="col" class="px-4 py-3 text-left text-xs font-bold text-gray-600 uppercase tracking-wider w-1/2 border-l border-gray-200">Butiran</th>

</tr>

</thead>

</table>

</div>

<label for="namaPenerima" class="block text-sm font-semibold text-gray-700">Nama Penerima</label>

</div>

<label for="tarikhTerima" class="block text-sm font-semibold text-gray-700">Tarikh Terima</label>

</div>

Sahkan Penerimaan

</button>

Batal

</button>

</div>

<div>

<span class="block text-gray-500 text-xs font-bold uppercase mb-1">DISAHKAN OLEH</span>

</div>

<div>

<span class="block text-gray-500 text-xs font-bold uppercase mb-1">TARIKH PENGESAHAN</span>

</div>

<div class="signature-box"><p>Tandatangan Penerima</p><br><br><br><p>Nama:</p><p>Tarikh:</p></div>

<div class="signature-box"><p>Cop Jabatan / Bahagian</p><br><br><br></div>

</div>

Cetak Rekod (PDF)

</button>

Kembali ke Borang Utama

</button>

</div>

// =========================================================================

// MAKLUMAT SUPABASE ANDA TELAH DIMASUKKAN DI SINI

// =========================================================================

const SUPABASE_URL = "https://iqzzrbfchpfbtqfjpopd.supabase.co";

const SUPABASE_ANON_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImlxenpyYmZjaHBmYnRxZmpwb3BkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3ODY0MTA0ODgsImV4cCI6MjEwMTk4NjQ4OH0.ewQvwAkCBAIO7jzGpm0tmGmwVR57Yhd26r8rV6JUiPA";

// =========================================================================

let idSemasa = "";

const pilihanButiranHTML =

'<option value="">-- Sila Pilih Butiran --</option>' +

'<option value="KEW.8 Pergerakkan Gaji Januari">KEW.8 Pergerakkan Gaji Januari</option>' +

'<option value="KEW.8 Pergerakkan Gaji April">KEW.8 Pergerakkan Gaji April</option>' +

'<option value="KEW.8 Pergerakkan Gaji Julai">KEW.8 Pergerakkan Gaji Julai</option>' +

'<option value="KEW.8 Pergerakkan Gaji Oktober">KEW.8 Pergerakkan Gaji Oktober</option>' +

'<option value="ITP">ITP</option>' +

'<option value="BIW">BIW</option>' +

'<option value="BIMLTK">BIMLTK</option>' +

'<option value="EL.Detektif">EL.Detektif</option>' +

'<option value="BITA">BITA</option>' +

'<option value="Kemajuan Pangkat L/Kpl">Kemajuan Pangkat L/Kpl</option>' +

'<option value="Kenaikan Pangkat KPL">Kenaikan Pangkat KPL</option>' +

'<option value="Kenaikan Pangkat SJN">Kenaikan Pangkat SJN</option>' +

'<option value="Kenaikan Pangkat SM">Kenaikan Pangkat SM</option>' +

'<option value="Kenaikan Pangkat Sub Insp">Kenaikan Pangkat Sub Insp</option>';

function tunjukMesej(mesej, jenis = 'ralat') {

const bekas = document.getElementById('toast-container');

const toast = document.createElement('div');

const bgColor = jenis === 'ralat' ? 'bg-red-600' : 'bg-green-600';

toast.className = 'flex items-center ' + bgColor + ' text-white px-5 py-3 rounded-md shadow-lg transform transition-all duration-300 translate-x-full opacity-0 font-medium text-sm';

toast.innerHTML = '<span>' + mesej + '</span>';

bekas.appendChild(toast);

setTimeout(() => { toast.classList.remove('translate-x-full', 'opacity-0'); toast.classList.add('translate-x-0', 'opacity-100'); }, 10);

setTimeout(() => { toast.classList.remove('translate-x-0', 'opacity-100'); toast.classList.add('translate-x-full', 'opacity-0'); setTimeout(() => toast.remove(), 300); }, 4000);

}

document.addEventListener("DOMContentLoaded", () => {

const today = new Date().toISOString().split('T')[0];

document.getElementById('tarikhSurat').value = today;

document.getElementById('tarikhTerima').value = today;

document.getElementById('butiranKelompok').innerHTML = pilihanButiranHTML;

document.getElementById('butiranSemua').innerHTML = pilihanButiranHTML;

tambahBarisKakitangan();

const urlParams = new URLSearchParams(window.location.search);

const idDariURL = urlParams.get('id');

if (idDariURL) bukaPaparanPenerima(idDariURL);

});

function tukarModKemasukan() {

const mod = document.querySelector('input[name="modKemasukan"]:checked').value;

document.getElementById('modIndividu').classList.add('hidden');

document.getElementById('modKelompok').classList.add('hidden');

document.getElementById('modSemua').classList.add('hidden');

if(mod === 'individu') document.getElementById('modIndividu').classList.remove('hidden');

else if(mod === 'kelompok') document.getElementById('modKelompok').classList.remove('hidden');

else if(mod === 'semua') document.getElementById('modSemua').classList.remove('hidden');

}

function tambahBarisKakitangan() {

const container = document.getElementById('bekasSenaraiKakitangan');

const row = document.createElement('div');

row.className = 'kakitangan-row flex flex-col sm:flex-row gap-3 items-start sm:items-center bg-gray-50 p-3 rounded-md border border-gray-200';

row.innerHTML =

'<div class="w-full sm:w-1/2">' +

'<input type="text" class="input-nama form-input-clean w-full rounded-md px-3 py-2 text-sm" placeholder="Nama Kakitangan...">' +

'</div>' +

'<div class="w-full sm:w-1/2 flex gap-2">' +

'<select class="input-butiran form-input-clean w-full rounded-md px-3 py-2 text-sm text-gray-700">' + pilihanButiranHTML + '</select>' +

'<button type="button" onclick="padamBarisKakitangan(this)" class="p-2 text-gray-400 hover:text-red-600 border rounded-md">X</button>' +

'</div>';

container.appendChild(row);

}

function padamBarisKakitangan(btn) {

const row = btn.closest('.kakitangan-row');

if (document.querySelectorAll('.kakitangan-row').length > 1) row.remove();

else { row.querySelector('.input-nama').value = ''; row.querySelector('.input-butiran').value = ''; }

}

function bukaSistemApp() {

document.body.classList.add('light-mode');

document.getElementById('hero-section').classList.add('hidden');

const app = document.getElementById('app-container');

app.classList.remove('hidden', 'fade-slide-hidden');

app.classList.add('fade-slide-active');

}

async function simpanDanJanaLink() {

const payloadData = {

noRujukan: document.getElementById('noRujukan').value.trim(),

tarikhSurat: document.getElementById('tarikhSurat').value,

perkaraUtama: document.getElementById('perkaraUtama').value,

bahagian: document.getElementById('bahagian').value,

senaraiKakitangan: [],

status: "PENDING",

namaPenerima: "",

tarikhTerima: "",

timestamp: Date.now()

};

const mod = document.querySelector('input[name="modKemasukan"]:checked').value;

if(!payloadData.noRujukan || !payloadData.perkaraUtama || !payloadData.bahagian) return tunjukMesej("Lengkapkan borang utama", "ralat");

if (mod === 'individu') {

document.querySelectorAll('.kakitangan-row').forEach(row => {

const nama = row.querySelector('.input-nama').value.trim();

const butiran = row.querySelector('.input-butiran').value;

if(nama && butiran) payloadData.senaraiKakitangan.push({ nama, butiran });

});

if(payloadData.senaraiKakitangan.length === 0) return tunjukMesej("Masukkan sekurang-kurangnya 1 nama & butiran", "ralat");

} else if (mod === 'kelompok') {

const butiran = document.getElementById('butiranKelompok').value;

const teksNama = document.getElementById('senaraiNamaKelompok').value;

if(!butiran || !teksNama.trim()) return tunjukMesej("Lengkapkan maklumat kelompok", "ralat");

teksNama.split('\n').forEach(n => { if(n.trim()) payloadData.senaraiKakitangan.push({ nama: n.trim(), butiran }); });

} else if (mod === 'semua') {

const butiran = document.getElementById('butiranSemua').value;

if(!butiran) return tunjukMesej("Pilih butiran", "ralat");

payloadData.senaraiKakitangan.push({ nama: "SEMUA KAKITANGAN", butiran });

}

const btn = document.getElementById('btnSimpan');

const textAsal = btn.innerHTML;

btn.innerHTML = 'Menyimpan...';

btn.disabled = true;

const newId = 'gaji-' + Math.random().toString(36).substring(2, 8);

try {

const res = await fetch(`${SUPABASE_URL}/rest/v1/rekod_gaji`, {

method: 'POST',

headers: {

'Content-Type': 'application/json',

'apikey': SUPABASE_ANON_KEY,

'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,

'Prefer': 'return=minimal'

body: JSON.stringify({ id: newId, data: payloadData })

});

if (!res.ok) throw new Error("Gagal hantar ke Supabase");

tunjukMesej("Berjaya Disimpan!", "sukses");

idSemasa = newId;

const realURL = window.location.origin + window.location.pathname + "?id=" + idSemasa;

const pautanSimulasi = document.getElementById('pautanSimulasi');

pautanSimulasi.innerText = realURL;

pautanSimulasi.href = realURL;

pautanSimulasi.setAttribute('data-id', idSemasa);

document.getElementById('ruanganLink').classList.remove('hidden');

} catch (e) {

tunjukMesej("Gagal berhubung dengan pangkalan data.", "ralat");

console.error(e);

} finally { btn.innerHTML = textAsal; btn.disabled = false; }

}

async function bukaPaparanPenerima(id) {

idSemasa = id;

document.body.classList.add('light-mode');

document.getElementById('hero-section').classList.add('hidden');

document.getElementById('app-container').classList.remove('hidden', 'fade-slide-hidden');

document.getElementById('app-container').classList.add('fade-slide-active');

document.getElementById('paparanAdmin').classList.add('hidden');

document.getElementById('paparanPenerima').classList.remove('hidden');

try {

const res = await fetch(`${SUPABASE_URL}/rest/v1/rekod_gaji?id=eq.${id}&select=data`, {

headers: {

'apikey': SUPABASE_ANON_KEY,

'Authorization': `Bearer ${SUPABASE_ANON_KEY}`

}

});

const result = await res.json();

if (result && result.length > 0) {

renderPaparanPenerima(result[0].data);

} else {

throw new Error("Gagal mencari data");

}

} catch (e) {

tunjukMesej("Ralat: Rekod tidak dijumpai dalam sistem", "ralat");

kembaliKeAdmin();

}

function renderPaparanPenerima(data) {

document.getElementById('paparNoRujukan').innerText = data.noRujukan;

document.getElementById('paparTarikhSurat').innerText = data.tarikhSurat;

document.getElementById('paparPerkaraUtama').innerText = data.perkaraUtama;

document.getElementById('paparBahagian').innerText = data.bahagian;

const jadual = document.getElementById('paparSenaraiKakitangan');

jadual.innerHTML = '';

data.senaraiKakitangan.forEach(staf => {

const namaText = staf.nama === "SEMUA KAKITANGAN" ? '<b>' + staf.nama + '</b>' : staf.nama;

jadual.innerHTML += '<tr><td class="px-4 py-2 border-r border-b border-gray-200">' + namaText + '</td><td class="px-4 py-2 border-b border-gray-200">' + staf.butiran + '</td></tr>';

});

const status = document.getElementById('statusLencana');

if(data.status === "VERIFIED") {

status.innerText = "STATUS: SAH";

status.className = "absolute top-0 right-0 -mt-3 -mr-3 px-4 py-1 rounded text-xs font-bold bg-green-100 text-green-800 border border-green-300 no-print";

document.getElementById('borangInputPenerima').classList.add('hidden');

document.getElementById('butiranPengesahanSelesai').classList.remove('hidden');

document.getElementById('aksiSelepasSah').classList.remove('hidden');

document.getElementById('paparNamaDisahkan').innerText = data.namaPenerima;

document.getElementById('paparTarikhDisahkan').innerText = data.tarikhTerima;

} else {

status.innerText = "STATUS: PENDING";

status.className = "absolute top-0 right-0 -mt-3 -mr-3 px-4 py-1 rounded text-xs font-bold bg-yellow-100 text-yellow-800 border border-yellow-300 no-print animate-pulse";

document.getElementById('borangInputPenerima').classList.remove('hidden');

document.getElementById('butiranPengesahanSelesai').classList.add('hidden');

document.getElementById('aksiSelepasSah').classList.add('hidden');

}

async function sahkanPenerimaan() {

const namaPenerima = document.getElementById('namaPenerima').value.trim();

const tarikhTerima = document.getElementById('tarikhTerima').value;

if(!namaPenerima || !tarikhTerima) return tunjukMesej("Sila isi Nama & Tarikh", "ralat");

const btn = document.getElementById('btnSahkan');

btn.innerHTML = 'Mengesahkan...';

btn.disabled = true;

try {

// Ambil data asal dari Supabase

const getRes = await fetch(`${SUPABASE_URL}/rest/v1/rekod_gaji?id=eq.${idSemasa}&select=data`, {

headers: { 'apikey': SUPABASE_ANON_KEY, 'Authorization': `Bearer ${SUPABASE_ANON_KEY}` }

});

const getResult = await getRes.json();

if (!getResult || getResult.length === 0) throw new Error("Data tidak dijumpai");

let dataDokumen = getResult[0].data;

dataDokumen.status = "VERIFIED";

dataDokumen.namaPenerima = namaPenerima;

dataDokumen.tarikhTerima = tarikhTerima;

dataDokumen.tarikhDisahkan = new Date().toISOString();

// Patch/Kemaskini data baharu ke Supabase

const patchRes = await fetch(`${SUPABASE_URL}/rest/v1/rekod_gaji?id=eq.${idSemasa}`, {

method: 'PATCH',

headers: {

'Content-Type': 'application/json',

'apikey': SUPABASE_ANON_KEY,

'Authorization': `Bearer ${SUPABASE_ANON_KEY}`,

'Prefer': 'return=minimal'

body: JSON.stringify({ data: dataDokumen })

});

if(!patchRes.ok) throw new Error("Gagal sahkan");

tunjukMesej("Berjaya Disahkan!", "sukses");

bukaPaparanPenerima(idSemasa);

} catch (e) {

tunjukMesej("Gagal mengemaskini status", "ralat");

console.error(e);

} finally { btn.innerHTML = 'Sahkan Penerimaan'; btn.disabled = false; }

}

function bukaPaparanPenerimaDgnID(e) { e.preventDefault(); bukaPaparanPenerima(e.currentTarget.querySelector('a').getAttribute('data-id')); }

function kembaliKeAdmin() { window.location.href = window.location.pathname; }

function kembaliKeHome() { window.location.href = window.location.pathname; }

function kosongkanBorangAdmin() { window.location.reload(); }

function cetakKePDF() { window.print(); }

</script>

</body>

</html>