Kartu PSAJ SMKN 2 DEPOK - 2025/2026/title> <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.11.5/JsBarcode.all.min.js"></script> <style> @page { size: A4; margin: 5mm; } body { font-family: 'Arial', sans-serif; background: #f0f2f5; margin: 0; padding: 20px; } .no-print { background: white; padding: 20px; border-radius: 8px; max-width: 800px; margin: 0 auto 30px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); } .grid-container { display: grid; grid-template-columns: repeat(2, 95mm); gap: 5mm; justify-content: center; } .card { width: 95mm; height: 135mm; border: 2px solid #000; padding: 4mm; background: #fff; box-sizing: border-box; position: relative; page-break-inside: avoid; display: flex; flex-direction: column; } .header-table { width: 100%; border-bottom: 3px double #000; padding-bottom: 2mm; margin-bottom: 3mm; } .logo-img { width: 12mm; height: 12mm; object-fit: contain; } .header-text { text-align: center; } .header-text h1 { margin: 0; font-size: 11pt; text-transform: uppercase; } .header-text h2 { margin: 0; font-size: 9pt; } .header-text p { margin: 1px 0 0; font-size: 8pt; font-weight: bold; } .content { display: flex; gap: 4mm; margin-top: 2mm; } .foto-box { width: 30mm; height: 40mm; border: 1px solid #000; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; } .foto-box img { width: 100%; height: 100%; object-fit: cover; } .biodata table { font-size: 9pt; width: 100%; border-collapse: collapse; } .biodata td { padding: 3px 0; vertical-align: top; } .login-box { margin-top: 4mm; border: 1px solid #000; background: #f2f2f2 !important; padding: 2mm; font-size: 8.5pt; } .barcode-container { margin-top: auto; margin-bottom: 2mm; } .barcode-img { width: 40mm; height: 10mm; } .ttd-section { position: absolute; bottom: 6mm; right: 4mm; text-align: center; font-size: 8.5pt; } .ttd-nama { margin-top: 12mm; font-weight: bold; text-decoration: underline; } @media print { .no-print { display: none; } body { background: none; padding: 0; } .login-box { -webkit-print-color-adjust: exact; } } </style> </head> <body> <div class="no-print"> <h2 style="margin-top:0">🖨️ Generator Kartu PSAJ SMKN 2 DEPOK</h2> <p>Tanggal TTD: <b>Depok, 19 Februari 2026</b></p> <div style="display: flex; gap: 15px; margin-bottom: 15px; background: #fff; border: 1px solid #ddd; padding: 15px;"> <div style="flex:1"> <strong>1. File Excel:</strong><br> <input type="file" id="excelInput" accept=".xlsx, .xls"> </div> <div style="flex:1"> <strong>2. Foto Siswa (Banyak):</strong><br> <input type="file" id="fotoInput" accept="image/*" multiple> </div> </div> <button onclick="window.print()" style="width:100%; padding:12px; background:#2c3e50; color:white; border:none; border-radius:5px; font-weight:bold; cursor:pointer;"> CETAK KARTU SEKARANG </button> </div> <div id="wrapper" class="grid-container"></div> <script> let dataSiswa = []; let mapFoto = {}; const logoTutWuri = "https://upload.wikimedia.org/wikipedia/commons/9/9c/Logo_of_Ministry_of_Education_and_Culture_of_Republic_of_Indonesia.svg"; const logoSMK = "https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Logo_SMK_Bisa.png/640px-Logo_SMK_Bisa.png"; document.getElementById('excelInput').addEventListener('change', function(e) { const reader = new FileReader(); reader.onload = function(ex) { const data = new Uint8Array(ex.target.result); const wb = XLSX.read(data, {type: 'array'}); dataSiswa = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); render(); }; reader.readAsArrayBuffer(e.target.files[0]); }); document.getElementById('fotoInput').addEventListener('change', function(e) { const files = e.target.files; for (let file of files) { const id = file.name.split('.')[0]; const reader = new FileReader(); reader.onload = function(ex) { mapFoto[id] = ex.target.result; if (dataSiswa.length > 0) render(); }; reader.readAsDataURL(file); } }); function render() { if (dataSiswa.length === 0) return; const container = document.getElementById('wrapper'); container.innerHTML = ''; dataSiswa.forEach((siswa, index) => { const noPeserta = String(siswa['Nomor Peserta'] || siswa.NISN || "").trim(); const srcFoto = mapFoto[noPeserta] || 'https://via.placeholder.com/100x140?text=FOTO'; const barcodeId = "barcode-" + index; container.innerHTML += ` <div class="card"> <table class="header-table"> <tr> <td width="15%"><img src="${logoTutWuri}" class="logo-img"></td> <td class="header-text"> <h1>SMKN 2 DEPOK</h1> <h2>Penilaian Sumatif Akhir Jenjang</h2> <p>Tahun Pelajaran 2025/2026</p> </td> <td width="15%"><img src="${logoSMK}" class="logo-img"></td> </tr> </table> <div class="content"> <div class="foto-box"><img src="${srcFoto}"></div> <div class="biodata"> <table> <tr><td width="75">Nama</td><td>: <b>${siswa.Nama || '-'}</b></td></tr> <tr><td>No. Peserta</td><td>: ${noPeserta}</td></tr> <tr><td>Kelas</td><td>: ${siswa.Kelas || '-'}</td></tr> <tr><td>Ruang</td><td>: ${siswa.Ruang || '-'}</td></tr> </table> <div class="login-box"> <b>Akses Login Ujian:</b><br> Username: <b>${siswa.Username || '-'}</b><br> Password: <b>${siswa.Password || '-'}</b> </div> </div> </div> <div class="barcode-container"> <svg id="${barcodeId}"></svg> </div> <div class="ttd-section"> Depok, 19 Februari 2026<br> Kepala Sekolah,<br><br><br> <div class="ttd-nama">Yudhiansyah, S.Pd, M.Pd</div> NIP. 198204272009021004 </div> </div> `; }); dataSiswa.forEach((siswa, index) => { const noPeserta = String(siswa['Nomor Peserta'] || siswa.NISN || "").trim(); if (noPeserta) { JsBarcode("#barcode-" + index, noPeserta, { format: "CODE128", width: 1.5, height: 35, displayValue: false }); } }); } </script> </body> </html>