bantu saya script ini bisa disematkan di blog "<!doctype html>
<html lang="id" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jurnal Harian Guru</title>
<script src="/_sdk/element_sdk.js"></script>
<script src="/_sdk/data_sdk.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700&display=swap" rel="stylesheet">
<style>
body {
box-sizing: border-box;
font-family: 'Plus Jakarta Sans', sans-serif;
}
* {
box-sizing: border-box;
}
.table-container {
overflow-x: auto;
}
table {
border-collapse: collapse;
}
.loading-spinner {
border: 3px solid #f3f4f6;
border-top: 3px solid #2563eb;
border-radius: 50%;
width: 24px;
height: 24px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.toast {
position: fixed;
bottom: 24px;
right: 24px;
background: #10b981;
color: white;
padding: 16px 24px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 1000;
animation: slideIn 0.3s ease-out;
}
.toast.error {
background: #ef4444;
}
@keyframes slideIn {
from {
transform: translateX(400px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.delete-confirm {
background: #dc2626;
}
.delete-confirm:hover {
background: #b91c1c;
}
</style>
<style>@view-transition { navigation: auto; }</style>
</head>
<body class="h-full">
<div id="app" class="w-full h-full overflow-auto"></div>
<script>
const defaultConfig = {
background_color: "#f0f9ff",
header_color: "#0369a1",
table_header_color: "#0284c7",
button_color: "#0ea5e9",
text_color: "#0c4a6e",
font_family: "Plus Jakarta Sans",
font_size: 16,
nama_guru: "Trisna Mulyana",
nama_sekolah: "SLB Ganda Daya Ananda",
judul_jurnal: "Jurnal Harian Guru"
};
let currentData = [];
let selectedMonth = new Date().getMonth();
let selectedYear = 2026;
let isLoading = false;
let editingId = null;
const bulanIndonesia = [
"Januari", "Februari", "Maret", "April", "Mei", "Juni",
"Juli", "Agustus", "September", "Oktober", "November", "Desember"
];
const hariIndonesia = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
function generateId() {
return Date.now().toString() + Math.random().toString(36).substr(2, 9);
}
function showToast(message, isError = false) {
const toast = document.createElement('div');
toast.className = `toast ${isError ? 'error' : ''}`;
toast.textContent = message;
document.body.appendChild(toast);
setTimeout(() => toast.remove(), 3000);
}
function filterDataByMonthYear(data, month, year) {
return data.filter(item =>
item.bulan === bulanIndonesia[month] && item.tahun === year
).sort((a, b) => a.nomor - b.nomor);
}
function renderApp() {
const config = window.elementSdk?.config || defaultConfig;
const baseSize = config.font_size || defaultConfig.font_size;
const customFont = config.font_family || defaultConfig.font_family;
const fontStack = `${customFont}, Arial, sans-serif`;
const filteredData = filterDataByMonthYear(currentData, selectedMonth, selectedYear);
const nextNomor = filteredData.length > 0 ? Math.max(...filteredData.map(d => d.nomor)) + 1 : 1;
document.getElementById('app').innerHTML = `
<div class="w-full" style="background: ${config.background_color || defaultConfig.background_color}; min-height: 100%; padding: 32px 24px; font-family: ${fontStack};">
<div style="max-width: 1400px; margin: 0 auto;">
<!-- Header -->
<div style="background: ${config.header_color || defaultConfig.header_color}; padding: 32px; border-radius: 16px; margin-bottom: 32px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);">
<h1 style="color: white; font-size: ${baseSize * 2}px; font-weight: 700; margin: 0 0 8px 0; font-family: ${fontStack};">
${config.judul_jurnal || defaultConfig.judul_jurnal}
</h1>
<p style="color: rgba(255, 255, 255, 0.9); font-size: ${baseSize * 1.1}px; margin: 0; font-family: ${fontStack};">
${config.nama_guru || defaultConfig.nama_guru} - ${config.nama_sekolah || defaultConfig.nama_sekolah}
</p>
</div>
<!-- Filter Bulan dan Tahun -->
<div style="background: white; padding: 24px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
<div style="display: flex; gap: 16px; flex-wrap: wrap; align-items: center;">
<div style="flex: 1; min-width: 200px;">
<label style="display: block; color: ${config.text_color || defaultConfig.text_color}; font-size: ${baseSize * 0.9}px; font-weight: 600; margin-bottom: 8px; font-family: ${fontStack};">
Pilih Bulan
</label>
<select id="monthSelect" style="width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: ${baseSize}px; color: ${config.text_color || defaultConfig.text_color}; font-family: ${fontStack}; cursor: pointer;">
${bulanIndonesia.map((bulan, index) => `
<option value="${index}" ${index === selectedMonth ? 'selected' : ''}>${bulan}</option>
`).join('')}
</select>
</div>
<div style="flex: 1; min-width: 200px;">
<label style="display: block; color: ${config.text_color || defaultConfig.text_color}; font-size: ${baseSize * 0.9}px; font-weight: 600; margin-bottom: 8px; font-family: ${fontStack};">
Pilih Tahun
</label>
<select id="yearSelect" style="width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: ${baseSize}px; color: ${config.text_color || defaultConfig.text_color}; font-family: ${fontStack}; cursor: pointer;">
${[2026, 2027, 2028, 2029, 2030].map(year => `
<option value="${year}" ${year === selectedYear ? 'selected' : ''}>${year}</option>
`).join('')}
</select>
</div>
</div>
</div>
<!-- Form Input -->
<div style="background: white; padding: 24px; border-radius: 12px; margin-bottom: 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);">
<h2 style="color: ${config.text_color || defaultConfig.text_color}; font-size: ${baseSize * 1.4}px; font-weight: 700; margin: 0 0 20px 0; font-family: ${fontStack};">
${editingId ? 'Edit Kegiatan' : 'Tambah Kegiatan Baru'}
</h2>
<form id="jurnalForm">
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; margin-bottom: 16px;">
<div>
<label for="nomorInput" style="display: block; color: ${config.text_color || defaultConfig.text_color}; font-size: ${baseSize * 0.9}px; font-weight: 600; margin-bottom: 6px; font-family: ${fontStack};">
Nomor
</label>
<input type="number" id="nomorInput" value="${nextNomor}" required style="width: 100%; padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: ${baseSize}px; font-family: ${fontStack};">
</div>
<div>
<label for="hariInput" style="display: block; color: ${config.text_color || defaultConfig.text_color}; font-size: ${baseSize * 0.9}px; font-weight: 600; margin-bottom: 6p
