0% found this document useful (0 votes)

5 views84 pages

Kebiasaan Anak Hebat Indonesia

Uploaded by

opssdnkresek2

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

5 views84 pages

Kebiasaan Anak Hebat Indonesia

Uploaded by

opssdnkresek2

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

<!

DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>7 Kebiasaan Anak Indonesia Hebat</title>
<script src="[Link]
<style>
@import url('[Link]
family=Fredoka:wght@400;600;700&display=swap');

body {
font-family: 'Fredoka', sans-serif;
}

.habit-card {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.habit-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.floating-animation {
animation: float 3s ease-in-out infinite;
}

@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}

.pulse-animation {
animation: pulse 2s infinite;
}

@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
</style>
</head>
<body class="min-h-screen" style="background: linear-gradient(135deg, #FFE5F1 0%,
#E5F3FF 25%, #F0E5FF 50%, #E5FFE5 75%, #FFF5E5 100%); background-attachment:
fixed;">

<div class="fixed inset-0 opacity-25 pointer-events-none" style="background-image:
radial-gradient(circle at 15% 25%, rgba(255, 182, 193, 0.4) 0%, transparent 60%),
radial-gradient(circle at 85% 15%, rgba(173, 216, 230, 0.4) 0%, transparent 60%),
radial-gradient(circle at 25% 75%, rgba(221, 160, 221, 0.4) 0%, transparent 60%),
radial-gradient(circle at 75% 85%, rgba(152, 251, 152, 0.4) 0%, transparent 60%),
radial-gradient(circle at 50% 50%, rgba(255, 228, 181, 0.3) 0%, transparent 70%);
background-size: 500px 500px, 450px 450px, 400px 400px, 550px 550px, 600px 600px;
animation: flower-pattern 25s ease-in-out infinite;">
</div>

<div class="absolute top-24 right-24 opacity-35" style="animation: float-flower 7s ease-in-

out infinite reverse; animation-delay: 1s;">
<svg width="60" height="60" viewBox="0 0 60 60">

<circle cx="30" cy="18" r="9" fill="#FFC0CB" opacity="0.9"/>
<circle cx="42" cy="30" r="9" fill="#E6E6FA" opacity="0.9"/>
<circle cx="30" cy="42" r="9" fill="#F0E68C" opacity="0.9"/>
<circle cx="18" cy="30" r="9" fill="#B0E0E6" opacity="0.9"/>
<circle cx="30" cy="30" r="6" fill="#FFFACD"/>
</svg>
</div>

<div class="absolute bottom-32 left-20 opacity-30" style="animation: float-flower 8s ease-

in-out infinite; animation-delay: 2s;">
<svg width="70" height="70" viewBox="0 0 70 70">

<ellipse cx="35" cy="20" rx="8" ry="12" fill="#FFE4E1" opacity="0.8"/>
<ellipse cx="50" cy="35" rx="12" ry="8" fill="#E0FFFF" opacity="0.8"/>
<ellipse cx="35" cy="50" rx="8" ry="12" fill="#F5FFFA" opacity="0.8"/>
<ellipse cx="20" cy="35" rx="12" ry="8" fill="#FFF0F5" opacity="0.8"/>
<circle cx="35" cy="35" r="7" fill="#FFEFD5"/>
</svg>
</div>

<div class="absolute bottom-20 right-32 opacity-35" style="animation: float-flower 5s ease-

in-out infinite reverse; animation-delay: 3s;">
<svg width="65" height="65" viewBox="0 0 65 65">

<circle cx="32" cy="20" r="10" fill="#FFCCCB" opacity="0.8"/>
<circle cx="45" cy="32" r="10" fill="#D8BFD8" opacity="0.8"/>
<circle cx="32" cy="45" r="10" fill="#E6E6FA" opacity="0.8"/>
<circle cx="20" cy="32" r="10" fill="#F0FFFF" opacity="0.8"/>
<circle cx="32" cy="32" r="7" fill="#FFFFF0"/>
</svg>
</div>

<div class="absolute top-2/3 right-1/3 opacity-30" style="animation: float-flower 7s ease-in-

out infinite reverse; animation-delay: 2.5s;">
<svg width="50" height="50" viewBox="0 0 50 50">
<circle cx="25" cy="15" r="8" fill="#F5FFFA" opacity="0.8"/>
<circle cx="35" cy="25" r="8" fill="#FFF0F5" opacity="0.8"/>
<circle cx="25" cy="35" r="8" fill="#E6E6FA" opacity="0.8"/>
<circle cx="15" cy="25" r="8" fill="#F0FFFF" opacity="0.8"/>
<circle cx="25" cy="25" r="6" fill="#FFEFD5"/>
</svg>
</div>

<div class="absolute top-1/4 right-1/4 opacity-20" style="animation: float-flower 6s ease-in-
out infinite; animation-delay: 0.5s;">
<svg width="30" height="30" viewBox="0 0 30 30">
<circle cx="15" cy="8" r="5" fill="#FFB6C1" opacity="0.9"/>
<circle cx="22" cy="15" r="5" fill="#DDA0DD" opacity="0.9"/>
<circle cx="15" cy="22" r="5" fill="#98FB98" opacity="0.9"/>
<circle cx="8" cy="15" r="5" fill="#F0E68C" opacity="0.9"/>
<circle cx="15" cy="15" r="3" fill="#FFFACD"/>
</svg>
</div>

<div class="absolute top-3/4 left-1/4 opacity-25" style="animation: float-flower 8s ease-in-

out infinite reverse; animation-delay: 4s;">
<svg width="35" height="35" viewBox="0 0 35 35">
<circle cx="17" cy="10" r="6" fill="#E0FFFF" opacity="0.8"/>
<circle cx="25" cy="17" r="6" fill="#FFEFD5" opacity="0.8"/>
<circle cx="17" cy="25" r="6" fill="#F5FFFA" opacity="0.8"/>
<circle cx="10" cy="17" r="6" fill="#FFE4E1" opacity="0.8"/>
<circle cx="17" cy="17" r="4" fill="#FFFFF0"/>
</svg>
</div>

<div class="absolute bottom-1/3 right-1/5 opacity-25" style="animation: float-flower 5s

ease-in-out infinite reverse; animation-delay: 3.5s;">
<svg width="25" height="25" viewBox="0 0 25 25">
<circle cx="12" cy="7" r="4" fill="#F0E68C" opacity="0.8"/>
<circle cx="18" cy="12" r="4" fill="#98FB98" opacity="0.8"/>
<circle cx="12" cy="18" r="4" fill="#FFB6C1" opacity="0.8"/>
<circle cx="7" cy="12" r="4" fill="#DDA0DD" opacity="0.8"/>
<circle cx="12" cy="12" r="2.5" fill="#FFF8DC"/>
</svg>
</div>
</div>

@keyframes float-flower {
0%, 100% {
transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
}
25% {
transform: translateY(-8px) translateX(3px) rotate(2deg) scale(1.05);
}
50% {
transform: translateY(-12px) translateX(-2px) rotate(-1deg) scale(1.1);
}
75% {
transform: translateY(-5px) translateX(4px) rotate(1deg) scale(1.02);
}
}

@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
33% { transform: translateY(-10px) rotate(2deg); }
66% { transform: translateY(5px) rotate(-1deg); }
}
</style>

<div class="text-center py-8 px-4">

<div class="mb-6">
<img src="[Link]
alt="Header 7 Kebiasaan Anak Indonesia Hebat"
class="mx-auto max-w-full h-auto rounded-2xl shadow-lg"
style="max-height: 150px; background: transparent;"
onerror="[Link]='none'; [Link]='block';">

<div class="hidden mx-auto w-full max-w-md h-32 bg-gradient-to-r from-blue-200 to-
purple-200 rounded-2xl shadow-lg border-4 border-blue-300 flex items-center justify-center">
<div class="text-center">
<div class="text-4xl mb-2">🌟</div>
<div class="text-lg font-bold text-blue-800">7 Kebiasaan Anak Indonesia
Hebat</div>
</div>
</div>
</div>

<div class="floating-animation inline-block">

<h1 class="text-4xl md:text-6xl font-bold text-blue-600 mb-4 drop-shadow-lg">
🌟 7 Kebiasaan Anak Indonesia Hebat 🌟
</h1>
</div>
<p class="text-lg md:text-xl text-gray-700 max-w-4xl mx-auto leading-relaxed">
Yuk, biasakan kebiasaan baik ini setiap hari agar jadi anak yang sehat, cerdas, dan
berbudi luhur!
</p>
</div>

<div class="habit-card bg-gradient-to-br from-orange-200 to-yellow-200 rounded-3xl p-6
shadow-lg border-4 border-orange-300">
<div class="text-center">
<div class="text-6xl mb-4 pulse-animation">
<img
src="[Link]
alt="Anak bangun pagi"
class="w-20 h-20 mx-auto rounded-full object-cover border-4 border-orange-
400 shadow-lg"
onerror="[Link]='none';
[Link]='block';">
<svg class="w-20 h-20 mx-auto hidden" viewBox="0 0 100 100" fill="none">

<circle cx="50" cy="25" r="10" fill="#FDBCB4"/>
<rect x="40" y="35" width="20" height="25" rx="10" fill="#F97316"/>

<rect x="30" y="55" width="40" height="15" rx="5" fill="#8B4513"/>
<rect x="25" y="50" width="50" height="8" rx="4" fill="#D2691E"/>

<circle cx="80" cy="20" r="8" fill="#FDE047"/>
<path d="M80 5 L80 10 M95 20 L90 20 M90 10 L87 13 M90 30 L87 27"
stroke="#FDE047" stroke-width="2"/>

<circle cx="20" cy="30" r="8" fill="#FFFFFF" stroke="#000" stroke-width="2"/>
<path d="M20 24 L20 30 L24 34" stroke="#000" stroke-width="2" fill="none"/>

<circle cx="46" cy="23" r="1" fill="#000"/>
<circle cx="54" cy="23" r="1" fill="#000"/>
<path d="M46 27 Q50 30 54 27" stroke="#000" stroke-width="1" fill="none"/>
</svg>
</div>
<h3 class="text-2xl font-bold text-orange-700 mb-2">1. Bangun Pagi</h3>
<p class="text-orange-600 text-sm mb-4">Bangun pagi membuat tubuh segar dan
siap beraktivitas!</p>

<div class="bg-white bg-opacity-70 rounded-2xl p-4 space-y-3">
<h4 class="text-lg font-semibold text-orange-800 mb-3">📝 Catat Kegiatan
Bangun Pagi</h4>

<div class="text-left">
<label class="block text-sm font-medium text-orange-700
mb-1">Kelas:</label>
<input type="text" placeholder="Contoh: 5A, 6B..."
class="w-full px-3 py-2 border-2 border-orange-300 rounded-lg text-sm
focus:border-orange-500 focus:outline-none">
</div>
<div class="text-left">
<label class="block text-sm font-medium text-orange-700
mb-1">Tanggal:</label>
<input type="date"
class="w-full px-3 py-2 border-2 border-orange-300 rounded-lg text-sm
focus:border-orange-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-orange-700 mb-1">Waktu
Bangun:</label>
<input type="time"
class="w-full px-3 py-2 border-2 border-orange-300 rounded-lg text-sm
focus:border-orange-500 focus:outline-none">
</div>

<button onclick="saveWakeUpRecord()"
class="w-full bg-orange-500 hover:bg-orange-600 text-white font-semibold
py-2 px-4 rounded-lg transition-colors duration-200 mt-3">
✅ Simpan Catatan
</button>

<div id="wakeUpMessage" class="text-sm text-green-600 font-medium hidden

mt-2">
🎉 Hebat! Catatan sudah tersimpan!
</div>
</div>
</div>
</div>

<div class="habit-card bg-gradient-to-br from-purple-200 to-pink-200 rounded-3xl p-6
shadow-lg border-4 border-purple-300">
<div class="text-center">
<div class="text-6xl mb-4 pulse-animation">
<img src="[Link]
alt="Anak beribadah"
class="w-20 h-20 mx-auto rounded-full object-cover border-4 border-purple-
400 shadow-lg"
onerror="[Link]='none';
[Link]='block';">
<svg class="w-20 h-20 mx-auto hidden" viewBox="0 0 100 100" fill="none">

<circle cx="50" cy="25" r="12" fill="#FDBCB4"/>
<rect x="40" y="35" width="20" height="30" rx="10" fill="#6B46C1"/>

<ellipse cx="35" cy="45" rx="8" ry="4" fill="#FDBCB4" transform="rotate(-30
35 45)"/>
<ellipse cx="65" cy="45" rx="8" ry="4" fill="#FDBCB4" transform="rotate(30 65
45)"/>

<circle cx="46" cy="23" r="1" fill="#000"/>
<circle cx="54" cy="23" r="1" fill="#000"/>

<path d="M46 27 Q50 29 54 27" stroke="#000" stroke-width="1" fill="none"/>

<path d="M50 5 L50 15 M65 10 L60 15 M35 10 L40 15" stroke="#FFD700"
stroke-width="2"/>
</svg>
</div>
<h3 class="text-2xl font-bold text-purple-700 mb-2">2. Beribadah</h3>
<p class="text-purple-600 text-sm mb-4">Berdoa dan beribadah membuat hati
tenang dan jiwa damai</p>

<div class="bg-white bg-opacity-70 rounded-2xl p-4 space-y-3">
<h4 class="text-lg font-semibold text-purple-800 mb-3">🕌 Catat Kegiatan
Ibadah</h4>

<div class="text-left">
<label class="block text-sm font-medium text-purple-700 mb-1">Kelas:</label>
<input type="text" id="prayerClass" placeholder="Contoh: 5A, 6B..."
class="w-full px-3 py-2 border-2 border-purple-300 rounded-lg text-sm
focus:border-purple-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-purple-700
mb-1">Tanggal:</label>
<input type="date" id="prayerDate"
class="w-full px-3 py-2 border-2 border-purple-300 rounded-lg text-sm
focus:border-purple-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-purple-700 mb-2">Kegiatan
Sholat:</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" id="subuh" class="mr-2 text-purple-600">
<span class="text-sm">🌅 Sholat Subuh</span>
</label>
<label class="flex items-center">
<input type="checkbox" id="dhuhur" class="mr-2 text-purple-600">
<span class="text-sm"> ☀️Sholat Dhuhur</span>
</label>
<label class="flex items-center">
<input type="checkbox" id="ashar" class="mr-2 text-purple-600">
<span class="text-sm"> Sholat Ashar</span>
</label>
<label class="flex items-center">
<input type="checkbox" id="maghrib" class="mr-2 text-purple-600">
<span class="text-sm">🌅 Sholat Maghrib</span>
</label>
<label class="flex items-center">
<input type="checkbox" id="isya" class="mr-2 text-purple-600">
<span class="text-sm">🌙 Sholat Isya</span>
</label>
</div>
</div>

<div class="text-left">
<label class="block text-sm font-medium text-purple-700 mb-1">Waktu
Mengaji:</label>
<select id="mengajiTime" class="w-full px-3 py-2 border-2 border-purple-300
rounded-lg text-sm focus:border-purple-500 focus:outline-none">
<option value="">Pilih waktu mengaji...</option>
<option value="Tidak mengaji">Tidak mengaji</option>
<option value="5-10 menit">5-10 menit</option>
<option value="10-15 menit">10-15 menit</option>
<option value="15-30 menit">15-30 menit</option>
<option value="30-45 menit">30-45 menit</option>
<option value="45-60 menit">45-60 menit</option>
<option value="Lebih dari 1 jam">Lebih dari 1 jam</option>
</select>
</div>

<button onclick="savePrayerRecord()"
class="w-full bg-purple-500 hover:bg-purple-600 text-white font-semibold
py-2 px-4 rounded-lg transition-colors duration-200 mt-3">
✅ Simpan Catatan Ibadah
</button>

<div id="prayerMessage" class="text-sm text-green-600 font-medium hidden mt-

2">
🎉 Alhamdulillah! Catatan ibadah sudah tersimpan!
</div>
</div>
</div>
</div>

<div class="habit-card bg-gradient-to-br from-green-200 to-blue-200 rounded-3xl p-6
shadow-lg border-4 border-green-300">
<div class="text-center">
<div class="text-6xl mb-4 pulse-animation">
<svg class="w-20 h-20 mx-auto" viewBox="0 0 100 100" fill="none">

<circle cx="45" cy="20" r="8" fill="#FDBCB4"/>
<ellipse cx="45" cy="35" rx="12" ry="15" fill="#22C55E"/>

<ellipse cx="30" cy="30" rx="6" ry="3" fill="#FDBCB4" transform="rotate(-45
30 30)"/>
<ellipse cx="60" cy="40" rx="6" ry="3" fill="#FDBCB4" transform="rotate(45 60
40)"/>

<ellipse cx="40" cy="55" rx="4" ry="12" fill="#FDBCB4" transform="rotate(-20
40 55)"/>
<ellipse cx="50" cy="55" rx="4" ry="12" fill="#FDBCB4" transform="rotate(20
50 55)"/>

<circle cx="75" cy="60" r="8" fill="#FFFFFF" stroke="#000" stroke-width="2"/>
<path d="M75 52 L75 68 M67 60 L83 60" stroke="#000" stroke-width="1"/>

<path d="M20 25 L25 25 M18 30 L23 30 M16 35 L21 35" stroke="#22C55E"
stroke-width="2"/>
</svg>
</div>
<h3 class="text-2xl font-bold text-green-700 mb-2">3. Berolahraga</h3>
<p class="text-green-600 text-sm mb-4">Olahraga membuat tubuh kuat dan sehat
setiap hari!</p>

<div class="bg-white bg-opacity-70 rounded-2xl p-4 space-y-3">
<h4 class="text-lg font-semibold text-green-800 mb-3"> Catat Kegiatan
Olahraga</h4>

<div class="text-left">
<label class="block text-sm font-medium text-green-700 mb-1">Kelas:</label>
<input type="text" id="sportsClass" placeholder="Contoh: 5A, 6B..."
class="w-full px-3 py-2 border-2 border-green-300 rounded-lg text-sm
focus:border-green-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-green-700
mb-1">Tanggal:</label>
<input type="date" id="sportsDate"
class="w-full px-3 py-2 border-2 border-green-300 rounded-lg text-sm
focus:border-green-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-green-700 mb-2">Kegiatan
Olahraga:</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="checkbox" id="senamRingan" class="mr-2 text-green-600">
<span class="text-sm"> Senam Ringan</span>
</label>
<label class="flex items-center">
<input type="checkbox" id="membersihkanRumah" class="mr-2 text-
green-600">
<span class="text-sm">🧹 Membersihkan Rumah</span>
</label>
<label class="flex items-center">
<input type="checkbox" id="permainanTradisional" class="mr-2 text-
green-600">
<span class="text-sm">🎯 Bermain Permainan Tradisional di Sore
Hari</span>
</label>
</div>
</div>

<button onclick="saveSportsRecord()"
class="w-full bg-green-500 hover:bg-green-600 text-white font-semibold py-
2 px-4 rounded-lg transition-colors duration-200 mt-3">
✅ Simpan Catatan Olahraga
</button>

<div id="sportsMessage" class="text-sm text-green-600 font-medium hidden mt-

2">
🎉 Hebat! Catatan olahraga sudah tersimpan!
</div>
</div>
</div>
</div>

<div class="habit-card bg-gradient-to-br from-red-200 to-orange-200 rounded-3xl p-6
shadow-lg border-4 border-red-300">
<div class="text-center">
<div class="text-6xl mb-4 pulse-animation">
<svg class="w-20 h-20 mx-auto" viewBox="0 0 100 100" fill="none">

<circle cx="50" cy="25" r="10" fill="#FDBCB4"/>
<rect x="40" y="35" width="20" height="25" rx="10" fill="#EF4444"/>

<ellipse cx="50" cy="70" rx="25" ry="8" fill="#FFFFFF" stroke="#D1D5DB"
stroke-width="2"/>

<circle cx="40" cy="68" r="4" fill="#22C55E"/> 
<circle cx="50" cy="68" r="4" fill="#F97316"/> 
<circle cx="60" cy="68" r="4" fill="#EF4444"/> 

<rect x="30" y="45" width="2" height="15" fill="#8B5CF6"/>
<rect x="28" y="45" width="6" height="2" fill="#8B5CF6"/>

<circle cx="46" cy="23" r="1" fill="#000"/>
<circle cx="54" cy="23" r="1" fill="#000"/>
<path d="M46 27 Q50 30 54 27" stroke="#000" stroke-width="1" fill="none"/>
</svg>
</div>
<h3 class="text-2xl font-bold text-red-700 mb-2">4. Makan Sehat</h3>
<p class="text-red-600 text-sm mb-4">Makan sayur dan buah membuat tubuh
sehat dan kuat!</p>

<div class="bg-white bg-opacity-70 rounded-2xl p-4 space-y-3">
<h4 class="text-lg font-semibold text-red-800 mb-3">🥗 Catat Makanan
Sehat</h4>

<div class="text-left">
<label class="block text-sm font-medium text-red-700 mb-1">Kelas:</label>
<input type="text" id="foodClass" placeholder="Contoh: 5A, 6B..."
class="w-full px-3 py-2 border-2 border-red-300 rounded-lg text-sm
focus:border-red-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-red-700 mb-1">Tanggal:</label>
<input type="date" id="foodDate"
class="w-full px-3 py-2 border-2 border-red-300 rounded-lg text-sm
focus:border-red-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-red-700 mb-1">Apa makanan
sehatmu hari ini?</label>
<textarea id="healthyFood" placeholder="Ceritakan makanan sehat yang
kamu makan hari ini... Contoh: Sayur bayam, wortel, apel, susu, dll."
rows="4" class="w-full px-3 py-2 border-2 border-red-300 rounded-lg
text-sm focus:border-red-500 focus:outline-none resize-none"></textarea>
</div>
<button onclick="saveHealthyFoodRecord()"
class="w-full bg-red-500 hover:bg-red-600 text-white font-semibold py-2 px-
4 rounded-lg transition-colors duration-200 mt-3">
✅ Simpan Catatan Makanan Sehat
</button>

<div id="foodMessage" class="text-sm text-green-600 font-medium hidden mt-

2">
🎉 Hebat! Catatan makanan sehat sudah tersimpan!
</div>
</div>
</div>
</div>

<div class="habit-card bg-gradient-to-br from-blue-200 to-indigo-200 rounded-3xl p-6
shadow-lg border-4 border-blue-300">
<div class="text-center">
<div class="text-6xl mb-4 pulse-animation">
<svg class="w-20 h-20 mx-auto" viewBox="0 0 100 100" fill="none">

<circle cx="50" cy="25" r="10" fill="#FDBCB4"/>
<rect x="40" y="35" width="20" height="25" rx="10" fill="#3B82F6"/>

<rect x="35" y="50" width="30" height="20" rx="2" fill="#FFFFFF"
stroke="#D1D5DB" stroke-width="2"/>
<rect x="35" y="50" width="15" height="20" rx="2" fill="#FEF3C7"/>
<path d="M40 55 L60 55 M40 60 L60 60 M40 65 L55 65" stroke="#6B7280"
stroke-width="1"/>

<circle cx="46" cy="23" r="1" fill="#000"/>
<circle cx="54" cy="23" r="1" fill="#000"/>

<path d="M46 27 L54 27" stroke="#000" stroke-width="1"/>

<circle cx="70" cy="20" r="6" fill="#FDE047" stroke="#EAB308" stroke-
width="2"/>
<rect x="68" y="26" width="4" height="4" fill="#8B5CF6"/>
</svg>
</div>
<h3 class="text-2xl font-bold text-blue-700 mb-2">5. Gemar Belajar</h3>
<p class="text-blue-600 text-sm mb-4">Belajar dengan semangat membuat kita
semakin pintar!</p>

<div class="bg-white bg-opacity-70 rounded-2xl p-4 space-y-3">
<h4 class="text-lg font-semibold text-blue-800 mb-3">📚 Catat Kegiatan
Belajar</h4>

<div class="text-left">
<label class="block text-sm font-medium text-blue-700 mb-1">Kelas:</label>
<input type="text" id="learningClass" placeholder="Contoh: 5A, 6B..."
class="w-full px-3 py-2 border-2 border-blue-300 rounded-lg text-sm
focus:border-blue-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-blue-700
mb-1">Tanggal:</label>
<input type="date" id="learningDate"
class="w-full px-3 py-2 border-2 border-blue-300 rounded-lg text-sm
focus:border-blue-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-blue-700 mb-2">Apakah kamu
sudah belajar hari ini?</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="studiedToday" value="Ya" class="mr-2 text-
blue-600">
<span class="text-sm">✅ Ya, sudah belajar</span>
</label>
<label class="flex items-center">
<input type="radio" name="studiedToday" value="Belum" class="mr-2
text-blue-600">
<span class="text-sm">❌ Belum belajar</span>
</label>
</div>
</div>

<div class="text-left">
<label class="block text-sm font-medium text-blue-700 mb-1">Pelajaran apa
yang kamu pelajari di rumah hari ini?</label>
<textarea id="subjectsLearned" placeholder="Ceritakan pelajaran yang kamu
pelajari hari ini... Contoh: Matematika tentang perkalian, Bahasa Indonesia membaca cerita,
IPA tentang tumbuhan, dll."
rows="4" class="w-full px-3 py-2 border-2 border-blue-300 rounded-lg
text-sm focus:border-blue-500 focus:outline-none resize-none"></textarea>
</div>

<!-- Question 3: Apakah kamu sudah mengerjakan tugas yang diberikan

Bapak/Ibu Guru? -->
<div class="text-left">
<label class="block text-sm font-medium text-blue-700 mb-2">Apakah kamu
sudah mengerjakan tugas yang diberikan Bapak/Ibu Guru?</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="homeworkDone" value="Sudah selesai"
class="mr-2 text-blue-600">
<span class="text-sm">✅ Sudah selesai semua</span>
</label>
<label class="flex items-center">
<input type="radio" name="homeworkDone" value="Sebagian"
class="mr-2 text-blue-600">
<span class="text-sm">⏳ Baru sebagian</span>
</label>
<label class="flex items-center">
<input type="radio" name="homeworkDone" value="Belum" class="mr-2
text-blue-600">
<span class="text-sm">❌ Belum dikerjakan</span>
</label>
<label class="flex items-center">
<input type="radio" name="homeworkDone" value="Tidak ada tugas"
class="mr-2 text-blue-600">
<span class="text-sm">📝 Tidak ada tugas hari ini</span>
</label>
</div>
</div>

<div class="text-left">
<label class="block text-sm font-medium text-blue-700 mb-2">Silahkan upload
tugasmu hari ini ya!</label>
<input type="file" id="homeworkFile" accept="image/*,video/*"
class="w-full px-3 py-2 border-2 border-blue-300 rounded-lg text-sm
focus:border-blue-500 focus:outline-none file:mr-4 file:py-1 file:px-3 file:rounded-full file:border-0
file:text-sm file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100">
<p class="text-xs text-blue-600 mt-1">📸 Upload foto atau video tugasmu
(opsional)</p>

<div id="filePreview" class="hidden mt-3 p-3 bg-blue-50 rounded-lg border-2
border-blue-200">
<div class="flex justify-between items-center mb-2">
<span class="text-sm font-medium text-blue-700">Preview File:</span>
<button type="button" onclick="removeFile()" class="text-red-500
hover:text-red-700 text-sm">
❌ Hapus
</button>
</div>
<div id="fileInfo" class="text-sm text-blue-600 mb-2"></div>
<div id="fileDisplay" class="text-center"></div>
</div>
</div>

<button onclick="saveLearningRecord()"
class="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2
px-4 rounded-lg transition-colors duration-200 mt-3">
✅ Simpan Catatan Belajar
</button>

<div id="learningMessage" class="text-sm text-green-600 font-medium hidden

mt-2">
🎉 Hebat! Catatan belajar sudah tersimpan!
</div>
</div>
</div>
</div>

<div class="habit-card bg-gradient-to-br from-teal-200 to-cyan-200 rounded-3xl p-6
shadow-lg border-4 border-teal-300">
<div class="text-center">
<div class="text-6xl mb-4 pulse-animation">
<svg class="w-20 h-20 mx-auto" viewBox="0 0 100 100" fill="none">

<circle cx="35" cy="20" r="8" fill="#FDBCB4"/>
<circle cx="65" cy="20" r="8" fill="#FDBCB4"/>
<rect x="27" y="28" width="16" height="20" rx="8" fill="#14B8A6"/>
<rect x="57" y="28" width="16" height="20" rx="8" fill="#06B6D4"/>

<ellipse cx="50" cy="40" rx="8" ry="4" fill="#FDBCB4"/>

<rect x="42" y="50" width="16" height="12" rx="2" fill="#8B4513"
stroke="#654321" stroke-width="2"/>

<circle cx="32" cy="18" r="1" fill="#000"/>
<circle cx="38" cy="18" r="1" fill="#000"/>
<circle cx="62" cy="18" r="1" fill="#000"/>
<circle cx="68" cy="18" r="1" fill="#000"/>
<path d="M32 22 Q35 24 38 22" stroke="#000" stroke-width="1" fill="none"/>
<path d="M62 22 Q65 24 68 22" stroke="#000" stroke-width="1" fill="none"/>

<path d="M20 35 Q18 32 15 35 Q18 38 20 35 Q22 32 25 35 Q22 38 20 35"
fill="#EF4444"/>
<path d="M80 35 Q78 32 75 35 Q78 38 80 35 Q82 32 85 35 Q82 38 80 35"
fill="#EF4444"/>
</svg>
</div>
<h3 class="text-2xl font-bold text-teal-700 mb-2">6. Bermasyarakat</h3>
<p class="text-teal-600 text-sm mb-4">Membantu sesama membuat kita jadi anak
yang baik hati!</p>

<div class="bg-white bg-opacity-70 rounded-2xl p-4 space-y-3">
<h4 class="text-lg font-semibold text-teal-800 mb-3">🤝 Catat Kegiatan
Bermasyarakat</h4>

<div class="text-left">
<label class="block text-sm font-medium text-teal-700 mb-1">Kelas:</label>
<input type="text" id="socialClass" placeholder="Contoh: 5A, 6B..."
class="w-full px-3 py-2 border-2 border-teal-300 rounded-lg text-sm
focus:border-teal-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-teal-700 mb-1">Tanggal:</label>
<input type="date" id="socialDate"
class="w-full px-3 py-2 border-2 border-teal-300 rounded-lg text-sm
focus:border-teal-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-teal-700 mb-2">Apakah hari ini
kamu bermain dengan teman sebayamu di lingkungan rumah?</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="playWithFriends" value="Ya" class="mr-2
text-teal-600">
<span class="text-sm">✅ Ya, bermain dengan
teman</span>
</label>
<label class="flex items-center">
<input type="radio" name="playWithFriends" value="Tidak" class="mr-2
text-teal-600">
<span class="text-sm">❌ Tidak bermain dengan
teman</span>
</label>
</div>
</div>

<div class="text-left">
<label class="block text-sm font-medium text-teal-700 mb-2">Apakah hari ini
kamu bertemu dengan orang yang lebih tua usianya darimu?</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="meetElders" value="Ya" class="mr-2 text-teal-
600">
<span class="text-sm">✅ Ya, bertemu orang yang lebih
tua</span>
</label>
<label class="flex items-center">
<input type="radio" name="meetElders" value="Tidak" class="mr-2 text-
teal-600">
<span class="text-sm">❌ Tidak bertemu orang yang lebih
tua</span>
</label>
</div>
</div>

<div class="text-left">
<label class="block text-sm font-medium text-teal-700 mb-1">Apa yang kamu
lakukan ketika bertemu?</label>
<textarea id="elderInteraction" placeholder="Ceritakan apa yang kamu
lakukan ketika bertemu orang yang lebih tua... Contoh: Mengucapkan salam, mencium tangan,
membantu membawakan barang, dll."
rows="3" class="w-full px-3 py-2 border-2 border-teal-300 rounded-lg
text-sm focus:border-teal-500 focus:outline-none resize-none"></textarea>
</div>

<div class="text-left">
<label class="block text-sm font-medium text-teal-700 mb-2">Apakah hari ini
kamu bergotong royong membersihkan kelas?</label>
<div class="space-y-2">
<label class="flex items-center">
<input type="radio" name="cleanClass" value="Ya, aktif membantu"
class="mr-2 text-teal-600">
<span class="text-sm">✅ Ya, aktif membantu
membersihkan</span>
</label>
<label class="flex items-center">
<input type="radio" name="cleanClass" value="Ya, sedikit membantu"
class="mr-2 text-teal-600">
<span class="text-sm">⏳ Ya, tapi sedikit membantu</span>
</label>
<label class="flex items-center">
<input type="radio" name="cleanClass" value="Tidak" class="mr-2 text-
teal-600">
<span class="text-sm">❌ Tidak ikut membersihkan</span>
</label>
<label class="flex items-center">
<input type="radio" name="cleanClass" value="Tidak ada kegiatan"
class="mr-2 text-teal-600">
<span class="text-sm">📝 Tidak ada kegiatan membersihkan hari
ini</span>
</label>
</div>
</div>

<button onclick="saveSocialRecord()"
class="w-full bg-teal-500 hover:bg-teal-600 text-white font-semibold py-2
px-4 rounded-lg transition-colors duration-200 mt-3">
✅ Simpan Catatan Bermasyarakat
</button>

<div id="socialMessage" class="text-sm text-green-600 font-medium hidden mt-

2">
🎉 Hebat! Catatan bermasyarakat sudah tersimpan!
</div>
</div>
</div>
</div>

<div class="habit-card bg-gradient-to-br from-indigo-200 to-purple-200 rounded-3xl p-6
shadow-lg border-4 border-indigo-300">
<div class="text-center">
<div class="text-6xl mb-4 pulse-animation">
<svg class="w-20 h-20 mx-auto" viewBox="0 0 100 100" fill="none">

<rect x="25" y="50" width="50" height="25" rx="5" fill="#8B4513"/>
<rect x="20" y="45" width="60" height="8" rx="4" fill="#D2691E"/>
<circle cx="45" cy="40" r="8" fill="#FDBCB4"/>

<path d="M41 38 Q43 36 45 38" stroke="#000" stroke-width="2" fill="none"/>
<path d="M47 38 Q49 36 51 38" stroke="#000" stroke-width="2" fill="none"/>

<path d="M42 42 Q45 44 48 42" stroke="#000" stroke-width="1" fill="none"/>

<path d="M75 20 Q80 15 85 20 Q80 25 75 20" fill="#FDE047"/>
<path d="M15 15 L17 20 L22 18 L17 23 L15 28 L13 23 L8 25 L13 20 L15 15"
fill="#FDE047"/>
<circle cx="25" cy="30" r="2" fill="#FDE047"/>
<circle cx="80" cy="35" r="2" fill="#FDE047"/>

<circle cx="75" cy="60" r="12" fill="#FFFFFF" stroke="#000" stroke-
width="2"/>
<path d="M75 52 L75 60 L80 65" stroke="#000" stroke-width="2" fill="none"/>
<text x="70" y="80" font-size="8" fill="#4C1D95">20:00</text>

<text x="55" y="25" font-size="12" fill="#6366F1">Z</text>
<text x="60" y="20" font-size="10" fill="#6366F1">z</text>
<text x="63" y="17" font-size="8" fill="#6366F1">z</text>
</svg>
</div>
<h3 class="text-2xl font-bold text-indigo-700 mb-2">7. Tidur Cepat</h3>
<p class="text-indigo-600 text-sm mb-4">Tidur cukup membuat tubuh segar untuk
besok hari!</p>

<div class="bg-white bg-opacity-70 rounded-2xl p-4 space-y-3">
<h4 class="text-lg font-semibold text-indigo-800 mb-3"> 😴 Catat Waktu
Tidur</h4>

<div class="text-left">
<label class="block text-sm font-medium text-indigo-700 mb-1">Kelas:</label>
<input type="text" id="sleepClass" placeholder="Contoh: 5A, 6B..."
class="w-full px-3 py-2 border-2 border-indigo-300 rounded-lg text-sm
focus:border-indigo-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-indigo-700
mb-1">Tanggal:</label>
<input type="date" id="sleepDate"
class="w-full px-3 py-2 border-2 border-indigo-300 rounded-lg text-sm
focus:border-indigo-500 focus:outline-none">
</div>

<div class="text-left">
<label class="block text-sm font-medium text-indigo-700 mb-1">Waktu
Tidur:</label>
<input type="time" id="sleepTime"
class="w-full px-3 py-2 border-2 border-indigo-300 rounded-lg text-sm
focus:border-indigo-500 focus:outline-none">
</div>

<button onclick="saveSleepRecord()"
class="w-full bg-indigo-500 hover:bg-indigo-600 text-white font-semibold py-
2 px-4 rounded-lg transition-colors duration-200 mt-3">
✅ Simpan Catatan Tidur
</button>

<div id="sleepMessage" class="text-sm text-green-600 font-medium hidden mt-

2">
🎉 Hebat! Catatan waktu tidur sudah tersimpan!
</div>
</div>
</div>
</div>
</div>

<div class="text-center mt-12 p-8 bg-gradient-to-r from-yellow-200 via-pink-200 to-blue-200
rounded-3xl shadow-xl border-4 border-yellow-300">
<h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4 floating-animation">
🎯 "Hebat karena kebiasaan baik!" 🎯
</h2>
<div class="flex flex-wrap justify-center gap-4 text-lg font-semibold">
<span class="bg-blue-500 text-white px-4 py-2 rounded-full shadow-
lg">#AnakHebatIndonesia</span>
<span class="bg-green-500 text-white px-4 py-2 rounded-full shadow-
lg">#7KebiasaanHebat</span>
</div>
</div>

<div class="mt-12 p-8 bg-gradient-to-r from-green-100 to-blue-100 rounded-3xl shadow-xl
border-4 border-green-300">
<div class="text-center mb-6">
<h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-2">
📊 Rekapan Catatan Bangun Pagi
</h2>
<p class="text-green-700 text-lg">Lihat semua catatan kebiasaan bangun pagi yang
sudah tersimpan!</p>
</div>

<div class="flex justify-center mb-6">

<button onclick="showWakeUpRecap()"
class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-
full shadow-lg transition-colors duration-200">
📋 Tampilkan Rekapan Data
</button>
<button onclick="clearWakeUpData()"
class="ml-4 bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-
full shadow-lg transition-colors duration-200">
Hapus Semua Data
</button>
</div>

<div id="wakeUpRecapContainer" class="hidden">

<div id="wakeUpRecapStats" class="mt-6 p-4 bg-gradient-to-r from-yellow-100 to-

orange-100 rounded-xl border-2 border-yellow-300">

</div>
</div>
</div>

<div id="wakeUpNoDataMessage" class="hidden text-center p-6 bg-yellow-100

rounded-2xl border-2 border-yellow-300">
<p class="text-yellow-800 text-lg font-semibold">
📝 Belum ada catatan tersimpan. Yuk, mulai catat kebiasaan bangun pagi!
</p>
</div>
</div>

<div class="mt-12 p-8 bg-gradient-to-r from-purple-100 to-pink-100 rounded-3xl shadow-xl
border-4 border-purple-300">
<div class="text-center mb-6">
<h2 class="text-3xl md:text-4xl font-bold text-purple-800 mb-2">
🕌 Rekapan Catatan Beribadah
</h2>
<p class="text-purple-700 text-lg">Lihat semua catatan kegiatan ibadah yang sudah
tersimpan!</p>
</div>

<div class="flex justify-center mb-6">

<button onclick="showPrayerRecap()"
class="bg-purple-500 hover:bg-purple-600 text-white font-bold py-3 px-6
rounded-full shadow-lg transition-colors duration-200">
📋 Tampilkan Rekapan Data
</button>
<button onclick="clearPrayerData()"
class="ml-4 bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-
full shadow-lg transition-colors duration-200">
Hapus Semua Data
</button>
</div>

<div id="prayerRecapContainer" class="hidden">

<div id="prayerRecapStats" class="mt-6 p-4 bg-gradient-to-r from-yellow-100 to-

orange-100 rounded-xl border-2 border-yellow-300">

</div>
</div>
</div>

<div id="prayerNoDataMessage" class="hidden text-center p-6 bg-yellow-100 rounded-

2xl border-2 border-yellow-300">
<p class="text-yellow-800 text-lg font-semibold">
📝 Belum ada catatan tersimpan. Yuk, mulai catat kegiatan ibadah!
</p>
</div>
</div>

<div class="mt-12 p-8 bg-gradient-to-r from-green-100 to-blue-100 rounded-3xl shadow-xl
border-4 border-green-300">
<div class="text-center mb-6">
<h2 class="text-3xl md:text-4xl font-bold text-green-800 mb-2">
Rekapan Catatan Berolahraga
</h2>
<p class="text-green-700 text-lg">Lihat semua catatan kegiatan olahraga yang sudah
tersimpan!</p>
</div>

<div class="flex justify-center mb-6">

<button onclick="showSportsRecap()"
class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-
full shadow-lg transition-colors duration-200">
📋 Tampilkan Rekapan Data
</button>
<button onclick="clearSportsData()"
class="ml-4 bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-
full shadow-lg transition-colors duration-200">
Hapus Semua Data
</button>
</div>

<div id="sportsRecapContainer" class="hidden">

<div id="sportsRecapStats" class="mt-6 p-4 bg-gradient-to-r from-yellow-100 to-

orange-100 rounded-xl border-2 border-yellow-300">

</div>
</div>
</div>

<div id="sportsNoDataMessage" class="hidden text-center p-6 bg-yellow-100 rounded-

2xl border-2 border-yellow-300">
<p class="text-yellow-800 text-lg font-semibold">
📝 Belum ada catatan tersimpan. Yuk, mulai catat kegiatan olahraga!
</p>
</div>
</div>

<div class="mt-12 p-8 bg-gradient-to-r from-red-100 to-orange-100 rounded-3xl shadow-xl
border-4 border-red-300">
<div class="text-center mb-6">
<h2 class="text-3xl md:text-4xl font-bold text-red-800 mb-2">
🥗 Rekapan Catatan Makan Sehat
</h2>
<p class="text-red-700 text-lg">Lihat semua catatan makanan sehat yang sudah
tersimpan!</p>
</div>

<div class="flex justify-center mb-6">

<button onclick="showFoodRecap()"
class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-full
shadow-lg transition-colors duration-200">
📋 Tampilkan Rekapan Data
</button>
<button onclick="clearFoodData()"
class="ml-4 bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-
full shadow-lg transition-colors duration-200">
Hapus Semua Data
</button>
</div>

<div id="foodRecapContainer" class="hidden">

<div id="foodRecapStats" class="mt-6 p-4 bg-gradient-to-r from-yellow-100 to-

orange-100 rounded-xl border-2 border-yellow-300">

</div>
</div>
</div>

<div id="foodNoDataMessage" class="hidden text-center p-6 bg-yellow-100 rounded-2xl

border-2 border-yellow-300">
<p class="text-yellow-800 text-lg font-semibold">
📝 Belum ada catatan tersimpan. Yuk, mulai catat makanan sehat!
</p>
</div>
</div>

<div class="mt-12 p-8 bg-gradient-to-r from-blue-100 to-indigo-100 rounded-3xl shadow-xl
border-4 border-blue-300">
<div class="text-center mb-6">
<h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-2">
📚 Rekapan Catatan Gemar Belajar
</h2>
<p class="text-blue-700 text-lg">Lihat semua catatan kegiatan belajar yang sudah
tersimpan!</p>
</div>

<div class="flex justify-center mb-6">

<button onclick="showLearningRecap()"
class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-full
shadow-lg transition-colors duration-200">
📋 Tampilkan Rekapan Data
</button>
<button onclick="clearLearningData()"
class="ml-4 bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-
full shadow-lg transition-colors duration-200">
Hapus Semua Data
</button>
</div>

<div id="learningRecapContainer" class="hidden">

<div id="learningRecapStats" class="mt-6 p-4 bg-gradient-to-r from-yellow-100 to-

orange-100 rounded-xl border-2 border-yellow-300">

</div>
</div>
</div>

<div id="learningNoDataMessage" class="hidden text-center p-6 bg-yellow-100

rounded-2xl border-2 border-yellow-300">
<p class="text-yellow-800 text-lg font-semibold">
📝 Belum ada catatan tersimpan. Yuk, mulai catat kegiatan belajar!
</p>
</div>
</div>

<div class="mt-12 p-8 bg-gradient-to-r from-teal-100 to-cyan-100 rounded-3xl shadow-xl
border-4 border-teal-300">
<div class="text-center mb-6">
<h2 class="text-3xl md:text-4xl font-bold text-teal-800 mb-2">
🤝 Rekapan Catatan Bermasyarakat
</h2>
<p class="text-teal-700 text-lg">Lihat semua catatan kegiatan bermasyarakat yang
sudah tersimpan!</p>
</div>

<div class="flex justify-center mb-6">

<button onclick="showSocialRecap()"
class="bg-teal-500 hover:bg-teal-600 text-white font-bold py-3 px-6 rounded-full
shadow-lg transition-colors duration-200">
📋 Tampilkan Rekapan Data
</button>
<button onclick="clearSocialData()"
class="ml-4 bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-
full shadow-lg transition-colors duration-200">
Hapus Semua Data
</button>
</div>

<div id="socialRecapContainer" class="hidden">

<div id="socialRecapStats" class="mt-6 p-4 bg-gradient-to-r from-yellow-100 to-

orange-100 rounded-xl border-2 border-yellow-300">

</div>
</div>
</div>

<div id="socialNoDataMessage" class="hidden text-center p-6 bg-yellow-100 rounded-

2xl border-2 border-yellow-300">
<p class="text-yellow-800 text-lg font-semibold">
📝 Belum ada catatan tersimpan. Yuk, mulai catat kegiatan bermasyarakat!
</p>
</div>
</div>

<div class="mt-12 p-8 bg-gradient-to-r from-indigo-100 to-purple-100 rounded-3xl shadow-
xl border-4 border-indigo-300">
<div class="text-center mb-6">
<h2 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2">
😴 Rekapan Catatan Tidur Cepat
</h2>
<p class="text-indigo-700 text-lg">Lihat semua catatan waktu tidur yang sudah
tersimpan!</p>
</div>

<div class="flex justify-center mb-6">

<button onclick="showSleepRecap()"
class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-3 px-6
rounded-full shadow-lg transition-colors duration-200">
📋 Tampilkan Rekapan Data
</button>
<button onclick="clearSleepData()"
class="ml-4 bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-
full shadow-lg transition-colors duration-200">
Hapus Semua Data
</button>
</div>

<div id="sleepRecapContainer" class="hidden">

<div id="sleepRecapStats" class="mt-6 p-4 bg-gradient-to-r from-yellow-100 to-

orange-100 rounded-xl border-2 border-yellow-300">

</div>
</div>
</div>

<div id="sleepNoDataMessage" class="hidden text-center p-6 bg-yellow-100 rounded-

2xl border-2 border-yellow-300">
<p class="text-yellow-800 text-lg font-semibold">
📝 Belum ada catatan tersimpan. Yuk, mulai catat waktu tidur!
</p>
</div>
</div>

<div class="mt-12 p-8 bg-gradient-to-r from-pink-100 via-purple-100 to-indigo-100
rounded-3xl shadow-xl border-4 border-pink-300">
<div class="text-center mb-8">
<div class="floating-animation inline-block">
<h2 class="text-3xl md:text-4xl font-bold text-purple-800 mb-4">
Lembar Refleksi Orang Tua/Wali
</h2>
</div>
<p class="text-purple-700 text-lg max-w-4xl mx-auto leading-relaxed">
Yuk, Ayah Bunda! Mari bersama-sama merefleksikan perkembangan kebiasaan
baik anak kita.
Refleksi ini membantu kita memahami sejauh mana anak telah menerapkan 7
kebiasaan hebat dalam kehidupan sehari-hari.
</p>
</div>

<div class="space-y-6">
<h3 class="text-2xl font-bold text-purple-800 mb-4 text-center">📝 Informasi
Dasar</h3>

<div>
<label class="block text-sm font-medium text-purple-700 mb-2">Nama Orang
Tua/Wali:</label>
<input type="text" id="parentName" placeholder="Tulis nama Ayah/Bunda..."
class="w-full px-4 py-3 border-2 border-purple-300 rounded-xl text-sm
focus:border-purple-500 focus:outline-none">
</div>

<div>
<label class="block text-sm font-medium text-purple-700 mb-2">Kelas
Anak:</label>
<input type="text" id="childClass" placeholder="Contoh: 5A, 6B..."
class="w-full px-4 py-3 border-2 border-purple-300 rounded-xl text-sm
focus:border-purple-500 focus:outline-none">
</div>

<div>
<label class="block text-sm font-medium text-purple-700 mb-2">Periode
Refleksi (Bulan):</label>
<select id="reflectionPeriod" class="w-full px-4 py-3 border-2 border-purple-
300 rounded-xl text-sm focus:border-purple-500 focus:outline-none">
<option value="">Pilih bulan...</option>
<option value="Januari">Januari</option>
<option value="Februari">Februari</option>
<option value="Maret">Maret</option>
<option value="April">April</option>
<option value="Mei">Mei</option>
<option value="Juni">Juni</option>
<option value="Juli">Juli</option>
<option value="Agustus">Agustus</option>
<option value="September">September</option>
<option value="Oktober">Oktober</option>
<option value="November">November</option>
<option value="Desember">Desember</option>
</select>
</div>

<div>
<label class="block text-sm font-medium text-purple-700 mb-2">Tanggal
Pengisian:</label>
<input type="date" id="reflectionDate"
class="w-full px-4 py-3 border-2 border-purple-300 rounded-xl text-sm
focus:border-purple-500 focus:outline-none">
</div>
</div>

<div class="space-y-6">
<h3 class="text-2xl font-bold text-purple-800
mb-4 text-center">⭐ Evaluasi 7 Kebiasaan</h3>
<p class="text-sm text-purple-600 text-center mb-4">Berikan penilaian untuk
setiap kebiasaan (1 = Perlu Perbaikan, 5 = Sangat Baik)</p>

<div class="bg-gradient-to-r from-orange-50 to-yellow-50 p-4 rounded-xl border-
2 border-orange-200">
<h4 class="font-bold text-orange-800 mb-2">🌅 1. Bangun Pagi</h4>
<div class="flex justify-between items-center">
<span class="text-sm text-orange-700">Anak bangun pagi secara
konsisten</span>
<div class="flex space-x-2">
<label class="flex items-center">
<input type="radio" name="habit1" value="1" class="mr-1 text-orange-
600">
<span class="text-xs">1</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit1" value="2" class="mr-1 text-orange-
600">
<span class="text-xs">2</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit1" value="3" class="mr-1 text-orange-
600">
<span class="text-xs">3</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit1" value="4" class="mr-1 text-orange-
600">
<span class="text-xs">4</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit1" value="5" class="mr-1 text-orange-
600">
<span class="text-xs">5</span>
</label>
</div>
</div>
</div>

<div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-xl border-2
border-purple-200">
<h4 class="font-bold text-purple-800 mb-2">🕌 2. Beribadah</h4>
<div class="flex justify-between items-center">
<span class="text-sm text-purple-700">Anak rajin beribadah dan
mengaji</span>
<div class="flex space-x-2">
<label class="flex items-center">
<input type="radio" name="habit2" value="1" class="mr-1 text-purple-
600">
<span class="text-xs">1</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit2" value="2" class="mr-1 text-purple-
600">
<span class="text-xs">2</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit2" value="3" class="mr-1 text-purple-
600">
<span class="text-xs">3</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit2" value="4" class="mr-1 text-purple-
600">
<span class="text-xs">4</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit2" value="5" class="mr-1 text-purple-
600">
<span class="text-xs">5</span>
</label>
</div>
</div>
</div>

<div class="bg-gradient-to-r from-green-50 to-blue-50 p-4 rounded-xl border-2
border-green-200">
<h4 class="font-bold text-green-800 mb-2"> 3. Berolahraga</h4>
<div class="flex justify-between items-center">
<span class="text-sm text-green-700">Anak aktif berolahraga dan
bergerak</span>
<div class="flex space-x-2">
<label class="flex items-center">
<input type="radio" name="habit3" value="1" class="mr-1 text-green-
600">
<span class="text-xs">1</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit3" value="2" class="mr-1 text-green-
600">
<span class="text-xs">2</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit3" value="3" class="mr-1 text-green-
600">
<span class="text-xs">3</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit3" value="4" class="mr-1 text-green-
600">
<span class="text-xs">4</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit3" value="5" class="mr-1 text-green-
600">
<span class="text-xs">5</span>
</label>
</div>
</div>
</div>

<div class="bg-gradient-to-r from-red-50 to-orange-50 p-4 rounded-xl border-2
border-red-200">
<h4 class="font-bold text-red-800 mb-2">🥗 4. Makan Sehat</h4>
<div class="flex justify-between items-center">
<span class="text-sm text-red-700">Anak mau makan sayur dan
buah</span>
<div class="flex space-x-2">
<label class="flex items-center">
<input type="radio" name="habit4" value="1" class="mr-1 text-red-
600">
<span class="text-xs">1</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit4" value="2" class="mr-1 text-red-
600">
<span class="text-xs">2</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit4" value="3" class="mr-1 text-red-
600">
<span class="text-xs">3</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit4" value="4" class="mr-1 text-red-
600">
<span class="text-xs">4</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit4" value="5" class="mr-1 text-red-
600">
<span class="text-xs">5</span>
</label>
</div>
</div>
</div>

<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl border-2
border-blue-200">
<h4 class="font-bold text-blue-800 mb-2">📚 5. Gemar Belajar</h4>
<div class="flex justify-between items-center">
<span class="text-sm text-blue-700">Anak semangat belajar dan
mengerjakan tugas</span>
<div class="flex space-x-2">
<label class="flex items-center">
<input type="radio" name="habit5" value="1" class="mr-1 text-blue-
600">
<span class="text-xs">1</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit5" value="2" class="mr-1 text-blue-
600">
<span class="text-xs">2</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit5" value="3" class="mr-1 text-blue-
600">
<span class="text-xs">3</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit5" value="4" class="mr-1 text-blue-
600">
<span class="text-xs">4</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit5" value="5" class="mr-1 text-blue-
600">
<span class="text-xs">5</span>
</label>
</div>
</div>
</div>

<div class="bg-gradient-to-r from-teal-50 to-cyan-50 p-4 rounded-xl border-2
border-teal-200">
<h4 class="font-bold text-teal-800 mb-2">🤝 6. Bermasyarakat</h4>
<div class="flex justify-between items-center">
<span class="text-sm text-teal-700">Anak sopan dan suka membantu
sesama</span>
<div class="flex space-x-2">
<label class="flex items-center">
<input type="radio" name="habit6" value="1" class="mr-1 text-teal-
600">
<span class="text-xs">1</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit6" value="2" class="mr-1 text-teal-
600">
<span class="text-xs">2</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit6" value="3" class="mr-1 text-teal-
600">
<span class="text-xs">3</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit6" value="4" class="mr-1 text-teal-
600">
<span class="text-xs">4</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit6" value="5" class="mr-1 text-teal-
600">
<span class="text-xs">5</span>
</label>
</div>
</div>
</div>

<div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-4 rounded-xl border-2
border-indigo-200">
<h4 class="font-bold text-indigo-800 mb-2"> 😴 7. Tidur Cepat</h4>
<div class="flex justify-between items-center">
<span class="text-sm text-indigo-700">Anak tidur tepat waktu dan
cukup</span>
<div class="flex space-x-2">
<label class="flex items-center">
<input type="radio" name="habit7" value="1" class="mr-1 text-indigo-
600">
<span class="text-xs">1</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit7" value="2" class="mr-1 text-indigo-
600">
<span class="text-xs">2</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit7" value="3" class="mr-1 text-indigo-
600">
<span class="text-xs">3</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit7" value="4" class="mr-1 text-indigo-
600">
<span class="text-xs">4</span>
</label>
<label class="flex items-center">
<input type="radio" name="habit7" value="5" class="mr-1 text-indigo-
600">
<span class="text-xs">5</span>
</label>
</div>
</div>
</div>
</div>
</div>

<div class="mt-8 space-y-6">
<h3 class="text-2xl font-bold text-purple-800 mb-4 text-center">💭 Pertanyaan
Refleksi</h3>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">

<div>
<label class="block text-sm font-medium text-purple-700 mb-2">1. Kebiasaan
mana yang paling mudah diterapkan anak?</label>
<textarea id="easiestHabit" placeholder="Ceritakan kebiasaan yang paling
mudah dan mengapa..."
rows="4" class="w-full px-4 py-3 border-2 border-purple-300 rounded-xl
text-sm focus:border-purple-500 focus:outline-none resize-none"></textarea>
</div>

<div>
<label class="block text-sm font-medium text-purple-700 mb-2">2. Kebiasaan
mana yang paling sulit diterapkan anak?</label>
<textarea id="hardestHabit" placeholder="Ceritakan kebiasaan yang paling
sulit dan tantangannya..."
rows="4" class="w-full px-4 py-3 border-2 border-purple-300 rounded-xl
text-sm focus:border-purple-500 focus:outline-none resize-none"></textarea>
</div>

<div>
<label class="block text-sm font-medium text-purple-700 mb-2">3. Perubahan
positif apa yang Ayah/Bunda lihat pada anak?</label>
<textarea id="positiveChanges" placeholder="Ceritakan perubahan positif
yang terlihat..."
rows="4" class="w-full px-4 py-3 border-2 border-purple-300 rounded-xl
text-sm focus:border-purple-500 focus:outline-none resize-none"></textarea>
</div>

<div>
<label class="block text-sm font-medium text-purple-700 mb-2">4. Dukungan
apa yang sudah Ayah/Bunda berikan?</label>
<textarea id="parentSupport" placeholder="Ceritakan cara Ayah/Bunda
mendukung anak..."
rows="4" class="w-full px-4 py-3 border-2 border-purple-300 rounded-xl
text-sm focus:border-purple-500 focus:outline-none resize-none"></textarea>
</div>

<div>
<label class="block text-sm font-medium text-purple-700 mb-2">5. Rencana
perbaikan untuk ke depan?</label>
<textarea id="improvementPlan" placeholder="Ceritakan rencana untuk
membantu anak lebih baik..."
rows="4" class="w-full px-4 py-3 border-2 border-purple-300 rounded-xl
text-sm focus:border-purple-500 focus:outline-none resize-none"></textarea>
</div>
</div>
</div>

<div class="text-center mt-8">
<button onclick="saveParentReflection()"
class="bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600
hover:to-pink-600 text-white font-bold py-4 px-8 rounded-full shadow-lg transition-all duration-
200 transform hover:scale-105">
✅ Simpan Lembar Refleksi
</button>

<div id="parentReflectionMessage" class="text-lg text-green-600 font-medium

hidden mt-4">
🎉 Terima kasih! Lembar refleksi sudah tersimpan!
</div>
</div>
</div>
</div>

<div class="mt-12 p-8 bg-gradient-to-r from-indigo-100 via-purple-100 to-pink-100
rounded-3xl shadow-xl border-4 border-indigo-300">
<div class="text-center mb-6">
<h2 class="text-3xl md:text-4xl font-bold text-indigo-800 mb-2">
📊 Rekapan Refleksi Orang Tua
</h2>
<p class="text-indigo-700 text-lg">Lihat semua lembar refleksi yang sudah diisi oleh
orang tua/wali!</p>
</div>

<div class="flex justify-center mb-6">

<button onclick="showParentReflectionRecap()"
class="bg-indigo-500 hover:bg-indigo-600 text-white font-bold py-3 px-6
rounded-full shadow-lg transition-colors duration-200">
📋 Tampilkan Rekapan Refleksi
</button>
<button onclick="clearParentReflectionData()"
class="ml-4 bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-
full shadow-lg transition-colors duration-200">
Hapus Semua Data
</button>
</div>

<div id="parentReflectionRecapContainer" class="hidden">

<div id="parentReflectionRecapStats" class="mt-6 p-4 bg-gradient-to-r from-yellow-

100 to-orange-100 rounded-xl border-2 border-yellow-300">

</div>
</div>
</div>

<div id="parentReflectionNoDataMessage" class="hidden text-center p-6 bg-yellow-100

rounded-2xl border-2 border-yellow-300">
<p class="text-yellow-800 text-lg font-semibold">
📝 Belum ada refleksi tersimpan. Yuk, Ayah Bunda mulai mengisi lembar refleksi!
</p>
</div>
</div>

<div class="text-center mt-8 p-6 bg-white rounded-2xl shadow-lg border-2 border-gray-
200">
<p class="text-gray-700 text-lg leading-relaxed">
🌈 <strong>Ingat!</strong> Kebiasaan baik dimulai dari hal kecil yang dilakukan setiap
hari.
Mari bersama-sama menjadi anak Indonesia yang hebat! 🇮🇩
</p>
</div>
</div>

// Check if all fields are filled

if (name && kelas && date && time) {
// Save to localStorage
const record = {
name: name,
class: kelas,
date: date,
time: time,
timestamp: new Date().toISOString()
};

// Get existing records or create new array

let records = [Link]([Link]('wakeUpRecords') || '[]');
[Link](record);
[Link]('wakeUpRecords', [Link](records));

// Show success message

const message = [Link]('wakeUpMessage');
[Link]('hidden');
[Link] = `🎉 Hebat ${name}! Catatan bangun pagi jam ${time} sudah
tersimpan!`;

// Clear form
[Link]('input[placeholder="Tulis nama kamu..."]').value = '';
[Link]('input[placeholder="Contoh: 5A, 6B..."]').value = '';
[Link]('input[type="date"]').value = '';
[Link]('input[type="time"]').value = '';

// Hide message after 3 seconds

setTimeout(() => {
[Link]('hidden');
}, 3000);
} else {
alert('Mohon isi semua kolom terlebih dahulu! 😊');
}
}

function savePrayerRecord() {
// Get form values
const name = [Link]('prayerName').value;
const kelas = [Link]('prayerClass').value;
const date = [Link]('prayerDate').value;
const mengajiTime = [Link]('mengajiTime').value;

// Get prayer checkboxes

const prayers = [];
if ([Link]('subuh').checked) [Link]('Sholat Subuh');
if ([Link]('dhuhur').checked) [Link]('Sholat Dhuhur');
if ([Link]('ashar').checked) [Link]('Sholat Ashar');
if ([Link]('maghrib').checked) [Link]('Sholat Maghrib');
if ([Link]('isya').checked) [Link]('Sholat Isya');

// Check if required fields are filled

if (name && kelas && date && mengajiTime) {
// Save to localStorage
const record = {
name: name,
class: kelas,
date: date,
prayers: prayers,
mengajiTime: mengajiTime,
timestamp: new Date().toISOString()
};

// Get existing records or create new array

let records = [Link]([Link]('prayerRecords') || '[]');
[Link](record);
[Link]('prayerRecords', [Link](records));

// Show success message

const message = [Link]('prayerMessage');
[Link]('hidden');
[Link] = `🎉 Alhamdulillah ${name}! Catatan ibadah sudah tersimpan!`;

// Clear form
[Link]('prayerName').value = '';
[Link]('prayerClass').value = '';
[Link]('prayerDate').value = '';
[Link]('mengajiTime').value = '';
[Link]('subuh').checked = false;
[Link]('dhuhur').checked = false;
[Link]('ashar').checked = false;
[Link]('maghrib').checked = false;
[Link]('isya').checked = false;

// Hide message after 3 seconds

setTimeout(() => {
[Link]('hidden');
}, 3000);
} else {
alert('Mohon isi nama, kelas, tanggal, dan waktu mengaji terlebih dahulu! 😊');
}
}

function saveSportsRecord() {
// Get form values
const name = [Link]('sportsName').value;
const kelas = [Link]('sportsClass').value;
const date = [Link]('sportsDate').value;

// Get sports checkboxes

const activities = [];
if ([Link]('senamRingan').checked) [Link]('Senam Ringan');
if ([Link]('membersihkanRumah').checked)
[Link]('Membersihkan Rumah');
if ([Link]('permainanTradisional').checked) [Link]('Bermain
Permainan Tradisional di Sore Hari');

// Check if required fields are filled

if (name && kelas && date && [Link] > 0) {
// Save to localStorage
const record = {
name: name,
class: kelas,
date: date,
activities: activities,
timestamp: new Date().toISOString()
};

// Get existing records or create new array

let records = [Link]([Link]('sportsRecords') || '[]');
[Link](record);
[Link]('sportsRecords', [Link](records));

// Show success message

const message = [Link]('sportsMessage');
[Link]('hidden');
[Link] = `🎉 Hebat ${name}! Catatan olahraga sudah tersimpan!`;

// Clear form
[Link]('sportsName').value = '';
[Link]('sportsClass').value = '';
[Link]('sportsDate').value = '';
[Link]('senamRingan').checked = false;
[Link]('membersihkanRumah').checked = false;
[Link]('permainanTradisional').checked = false;

// Hide message after 3 seconds

setTimeout(() => {
[Link]('hidden');
}, 3000);
} else {
alert('Mohon isi nama, kelas, tanggal, dan pilih minimal satu kegiatan olahraga! 😊');
}
}

// Wake Up Recap Functions

function showWakeUpRecap() {
const records = [Link]([Link]('wakeUpRecords') || '[]');
const recapContainer = [Link]('wakeUpRecapContainer');
const noDataMessage = [Link]('wakeUpNoDataMessage');
const recapContent = [Link]('wakeUpRecapContent');
const recapStats = [Link]('wakeUpRecapStats');

if ([Link] === 0) {
[Link]('hidden');
[Link]('hidden');
return;
}

[Link]('hidden');
[Link]('hidden');

// Sort records by date (newest first)

[Link]((a, b) => new Date([Link]) - new Date([Link]));

// Generate recap content

let recapHTML = '<h3 class="text-xl font-bold text-gray-800 mb-4">📋 Daftar
Catatan:</h3>';

[Link]((record, index) => {

const formattedDate = new Date([Link]).toLocaleDateString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});

recapHTML += `
<div class="bg-gradient-to-r from-blue-50 to-green-50 p-4 rounded-xl border-2
border-blue-200 shadow-sm">
<div class="flex justify-between items-center">
<div>
<h4 class="font-bold text-lg text-blue-800">👤 ${[Link]}</h4>
<p class="text-blue-600">🏫 Kelas: ${[Link]}</p>
<p class="text-blue-600">📅 ${formattedDate}</p>
<p class="text-blue-600">⏰ Bangun jam: ${[Link]}</p>
</div>
<div class="text-right">
<button onclick="deleteWakeUpRecord(${index})"
class="bg-red-400 hover:bg-red-500 text-white px-3 py-1 rounded-full
text-sm transition-colors duration-200">
Hapus
</button>
</div>
</div>
</div>
`;
});

[Link] = recapHTML;

// Generate statistics
const totalRecords = [Link];
const uniqueNames = [...new Set([Link](r => [Link]))].length;
const uniqueClasses = [...new Set([Link](r => [Link]))].length;

// Calculate average wake up time

const statsHTML = `
<h3 class="text-xl font-bold text-orange-800 mb-4">📈 Statistik Kebiasaan Bangun
Pagi:</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-blue-600">${totalRecords}</div>
<div class="text-sm text-gray-600">Total Catatan</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">${uniqueNames}</div>
<div class="text-sm text-gray-600">Anak Berbeda</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-purple-600">${uniqueClasses}</div>
<div class="text-sm text-gray-600">Kelas Berbeda</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-orange-600">${avgTime}</div>
<div class="text-sm text-gray-600">Rata-rata Bangun</div>
</div>
</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-green-600">$
{[Link]().padStart(2, '0')}:${[Link]().padStart(2, '0')}</div>
<div class="text-sm text-gray-600">⏰ Paling Pagi</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-red-600">${[Link]().padStart(2,
'0')}:${[Link]().padStart(2, '0')}</div>
<div class="text-sm text-gray-600"> 😴 Paling Siang</div>
</div>
</div>
`;

[Link] = statsHTML;
}

function deleteWakeUpRecord(index) {
if (confirm('Yakin ingin menghapus catatan ini? 🤔')) {
let records = [Link]([Link]('wakeUpRecords') || '[]');
[Link](index, 1);
[Link]('wakeUpRecords', [Link](records));
showWakeUpRecap(); // Refresh the display
}
}

function clearWakeUpData() {
if (confirm('Yakin ingin menghapus SEMUA catatan bangun pagi? Data tidak bisa
dikembalikan! 😱')) {
[Link]('wakeUpRecords');
[Link]('wakeUpRecapContainer').[Link]('hidden');
[Link]('wakeUpNoDataMessage').[Link]('hidden');

// Show success message

alert('✅ Semua data bangun pagi berhasil dihapus!');
}
}

// Prayer Recap Functions

function showPrayerRecap() {
const records = [Link]([Link]('prayerRecords') || '[]');
const recapContainer = [Link]('prayerRecapContainer');
const noDataMessage = [Link]('prayerNoDataMessage');
const recapContent = [Link]('prayerRecapContent');
const recapStats = [Link]('prayerRecapStats');

if ([Link] === 0) {
[Link]('hidden');
[Link]('hidden');
return;
}

[Link]('hidden');
[Link]('hidden');

// Sort records by date (newest first)

[Link]((a, b) => new Date([Link]) - new Date([Link]));

// Generate recap content

let recapHTML = '<h3 class="text-xl font-bold text-gray-800 mb-4">📋 Daftar
Catatan:</h3>';

[Link]((record, index) => {

const formattedDate = new Date([Link]).toLocaleDateString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});

const prayersList = [Link] > 0 ? [Link](', ') : 'Tidak ada

sholat yang dicatat';

recapHTML += `
<div class="bg-gradient-to-r from-purple-50 to-pink-50 p-4 rounded-xl border-2
border-purple-200 shadow-sm">
<div class="flex justify-between items-center">
<div>
<h4 class="font-bold text-lg text-purple-800">👤 ${[Link]}</h4>
<p class="text-purple-600">🏫 Kelas: ${[Link]}</p>
<p class="text-purple-600">📅 ${formattedDate}</p>
<p class="text-purple-600">🕌 Sholat: ${prayersList}</p>
<p class="text-purple-600">📖 Mengaji: ${[Link]}</p>
</div>
<div class="text-right">
<button onclick="deletePrayerRecord(${index})"
class="bg-red-400 hover:bg-red-500 text-white px-3 py-1 rounded-full
text-sm transition-colors duration-200">
Hapus
</button>
</div>
</div>
</div>
`;
});

[Link] = recapHTML;

// Generate statistics
const totalRecords = [Link];
const uniqueNames = [...new Set([Link](r => [Link]))].length;
const uniqueClasses = [...new Set([Link](r => [Link]))].length;
// Count prayer statistics
let totalPrayers = 0;
const prayerCounts = {
'Sholat Subuh': 0,
'Sholat Dhuhur': 0,
'Sholat Ashar': 0,
'Sholat Maghrib': 0,
'Sholat Isya': 0
};

[Link](record => {
totalPrayers += [Link];
[Link](prayer => {
if (prayerCounts[prayer] !== undefined) {
prayerCounts[prayer]++;
}
});
});

const avgPrayersPerDay = totalRecords > 0 ? (totalPrayers / totalRecords).toFixed(1) :

const statsHTML = `
<h3 class="text-xl font-bold text-orange-800 mb-4">📈 Statistik Kegiatan Ibadah:</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-purple-600">${totalRecords}</div>
<div class="text-sm text-gray-600">Total Catatan</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">${uniqueNames}</div>
<div class="text-sm text-gray-600">Anak Berbeda</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-blue-600">${totalPrayers}</div>
<div class="text-sm text-gray-600">Total Sholat</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-orange-600">${avgPrayersPerDay}</div>
<div class="text-sm text-gray-600">Rata-rata Sholat/Hari</div>
</div>
</div>
<div class="mt-4">
<h4 class="text-lg font-bold text-purple-800 mb-2">📊 Statistik per Sholat:</h4>
<div class="grid grid-cols-2 md:grid-cols-5 gap-2">
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold text-yellow-600">${prayerCounts['Sholat
Subuh']}</div>
<div class="text-xs text-gray-600">🌅 Subuh</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold text-orange-600">${prayerCounts['Sholat
Dhuhur']}</div>
<div class="text-xs text-gray-600"> ☀️Dhuhur</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold text-blue-600">${prayerCounts['Sholat
Ashar']}</div>
<div class="text-xs text-gray-600"> Ashar</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold text-red-600">${prayerCounts['Sholat
Maghrib']}</div>
<div class="text-xs text-gray-600">🌅 Maghrib</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold text-indigo-600">${prayerCounts['Sholat
Isya']}</div>
<div class="text-xs text-gray-600">🌙 Isya</div>
</div>
</div>
</div>
`;

[Link] = statsHTML;
}

function deletePrayerRecord(index) {
if (confirm('Yakin ingin menghapus catatan ini? 🤔')) {
let records = [Link]([Link]('prayerRecords') || '[]');
[Link](index, 1);
[Link]('prayerRecords', [Link](records));
showPrayerRecap(); // Refresh the display
}
}

function clearPrayerData() {
if (confirm('Yakin ingin menghapus SEMUA catatan ibadah? Data tidak bisa
dikembalikan! 😱')) {
[Link]('prayerRecords');
[Link]('prayerRecapContainer').[Link]('hidden');
[Link]('prayerNoDataMessage').[Link]('hidden');

// Show success message

alert('✅ Semua data ibadah berhasil dihapus!');
}
}

// Sports Recap Functions

function showSportsRecap() {
const records = [Link]([Link]('sportsRecords') || '[]');
const recapContainer = [Link]('sportsRecapContainer');
const noDataMessage = [Link]('sportsNoDataMessage');
const recapContent = [Link]('sportsRecapContent');
const recapStats = [Link]('sportsRecapStats');

if ([Link] === 0) {
[Link]('hidden');
[Link]('hidden');
return;
}

[Link]('hidden');
[Link]('hidden');

// Sort records by date (newest first)

[Link]((a, b) => new Date([Link]) - new Date([Link]));

// Generate recap content

let recapHTML = '<h3 class="text-xl font-bold text-gray-800 mb-4">📋 Daftar
Catatan:</h3>';

[Link]((record, index) => {

const formattedDate = new Date([Link]).toLocaleDateString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});
const activitiesList = [Link] > 0 ? [Link](', ') : 'Tidak ada
aktivitas yang dicatat';

recapHTML += `
<div class="bg-gradient-to-r from-green-50 to-blue-50 p-4 rounded-xl border-2
border-green-200 shadow-sm">
<div class="flex justify-between items-center">
<div>
<h4 class="font-bold text-lg text-green-800">👤 ${[Link]}</h4>
<p class="text-green-600">🏫 Kelas: ${[Link]}</p>
<p class="text-green-600">📅 ${formattedDate}</p>
<p class="text-green-600"> Aktivitas: ${activitiesList}</p>
</div>
<div class="text-right">
<button onclick="deleteSportsRecord(${index})"
class="bg-red-400 hover:bg-red-500 text-white px-3 py-1 rounded-full
text-sm transition-colors duration-200">
Hapus
</button>
</div>
</div>
</div>
`;
});

[Link] = recapHTML;

// Generate statistics
const totalRecords = [Link];
const uniqueNames = [...new Set([Link](r => [Link]))].length;
const uniqueClasses = [...new Set([Link](r => [Link]))].length;

// Count activity statistics

let totalActivities = 0;
const activityCounts = {
'Senam Ringan': 0,
'Membersihkan Rumah': 0,
'Bermain Permainan Tradisional di Sore Hari': 0
};

[Link](record => {
totalActivities += [Link];
[Link](activity => {
if (activityCounts[activity] !== undefined) {
activityCounts[activity]++;
}
});
});

const avgActivitiesPerDay = totalRecords > 0 ? (totalActivities /

totalRecords).toFixed(1) : 0;

const statsHTML = `
<h3 class="text-xl font-bold text-orange-800 mb-4">📈 Statistik Kegiatan
Olahraga:</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">${totalRecords}</div>
<div class="text-sm text-gray-600">Total Catatan</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-blue-600">${uniqueNames}</div>
<div class="text-sm text-gray-600">Anak Berbeda</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-purple-600">${totalActivities}</div>
<div class="text-sm text-gray-600">Total Aktivitas</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-orange-600">${avgActivitiesPerDay}</div>
<div class="text-sm text-gray-600">Rata-rata/Hari</div>
</div>
</div>
<div class="mt-4">
<h4 class="text-lg font-bold text-green-800 mb-2">📊 Statistik per Aktivitas:</h4>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-pink-600">${activityCounts['Senam
Ringan']}</div>
<div class="text-sm text-gray-600"> Senam Ringan</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-blue-600">${activityCounts['Membersihkan
Rumah']}</div>
<div class="text-sm text-gray-600">🧹 Membersihkan Rumah</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-green-600">${activityCounts['Bermain
Permainan Tradisional di Sore Hari']}</div>
<div class="text-sm text-gray-600">🎯 Permainan Tradisional</div>
</div>
</div>
</div>
`;

[Link] = statsHTML;
}

function deleteSportsRecord(index) {
if (confirm('Yakin ingin menghapus catatan ini? 🤔')) {
let records = [Link]([Link]('sportsRecords') || '[]');
[Link](index, 1);
[Link]('sportsRecords', [Link](records));
showSportsRecap(); // Refresh the display
}
}

function clearSportsData() {
if (confirm('Yakin ingin menghapus SEMUA catatan olahraga? Data tidak bisa
dikembalikan! 😱')) {
[Link]('sportsRecords');
[Link]('sportsRecapContainer').[Link]('hidden');
[Link]('sportsNoDataMessage').[Link]('hidden');

// Show success message

alert('✅ Semua data olahraga berhasil dihapus!');
}
}

// Food Recap Functions

function showFoodRecap() {
const records = [Link]([Link]('healthyFoodRecords') || '[]');
const recapContainer = [Link]('foodRecapContainer');
const noDataMessage = [Link]('foodNoDataMessage');
const recapContent = [Link]('foodRecapContent');
const recapStats = [Link]('foodRecapStats');

if ([Link] === 0) {
[Link]('hidden');
[Link]('hidden');
return;
}

[Link]('hidden');
[Link]('hidden');

// Sort records by date (newest first)

[Link]((a, b) => new Date([Link]) - new Date([Link]));

// Generate recap content

let recapHTML = '<h3 class="text-xl font-bold text-gray-800 mb-4">📋 Daftar
Catatan:</h3>';

[Link]((record, index) => {

const formattedDate = new Date([Link]).toLocaleDateString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});

recapHTML += `
<div class="bg-gradient-to-r from-red-50 to-orange-50 p-4 rounded-xl border-2
border-red-200 shadow-sm">
<div class="flex justify-between items-center">
<div class="flex-1">
<h4 class="font-bold text-lg text-red-800">👤 ${[Link]}</h4>
<p class="text-red-600">🏫 Kelas: ${[Link]}</p>
<p class="text-red-600">📅 ${formattedDate}</p>
<div class="mt-2 p-3 bg-white rounded-lg border border-red-200">
<p class="text-sm font-medium text-red-700">🥗 Makanan Sehat:</p>
<p class="text-red-600 text-sm mt-1">${[Link]}</p>
</div>
</div>
<div class="text-right ml-4">
<button onclick="deleteFoodRecord(${index})"
class="bg-red-400 hover:bg-red-500 text-white px-3 py-1 rounded-full
text-sm transition-colors duration-200">
Hapus
</button>
</div>
</div>
</div>
`;
});
[Link] = recapHTML;

// Generate statistics
const totalRecords = [Link];
const uniqueNames = [...new Set([Link](r => [Link]))].length;
const uniqueClasses = [...new Set([Link](r => [Link]))].length;

// Analyze food mentions

const allFoods = [Link](r => [Link]()).join(' ');
const commonFoods = ['sayur', 'buah', 'susu', 'ikan', 'ayam', 'nasi', 'telur', 'wortel',
'bayam', 'apel', 'pisang'];
const foodCounts = {};

[Link](food => {
const count = ([Link](new RegExp(food, 'g')) || []).length;
if (count > 0) {
foodCounts[food] = count;
}
});

const topFoods = [Link](foodCounts)

.sort(([,a], [,b]) => b - a)
.slice(0, 5);

const statsHTML = `
<h3 class="text-xl font-bold text-orange-800 mb-4">📈 Statistik Makanan Sehat:</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-red-600">${totalRecords}</div>
<div class="text-sm text-gray-600">Total Catatan</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">${uniqueNames}</div>
<div class="text-sm text-gray-600">Anak Berbeda</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-orange-600">${uniqueClasses}</div>
<div class="text-sm text-gray-600">Kelas Berbeda</div>
</div>
</div>
${[Link] > 0 ? `
<div class="mt-4">
<h4 class="text-lg font-bold text-red-800 mb-2">🥗 Makanan Sehat
Terpopuler:</h4>
<div class="grid grid-cols-2 md:grid-cols-5 gap-2">
${[Link](([food, count]) => `
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold text-green-600">${count}</div>
<div class="text-xs text-gray-600 capitalize">${food}</div>
</div>
`).join('')}
</div>
</div>
` : ''}
`;

[Link] = statsHTML;
}

function deleteFoodRecord(index) {
if (confirm('Yakin ingin menghapus catatan ini? 🤔')) {
let records = [Link]([Link]('healthyFoodRecords') || '[]');
[Link](index, 1);
[Link]('healthyFoodRecords', [Link](records));
showFoodRecap(); // Refresh the display
}
}

function clearFoodData() {
if (confirm('Yakin ingin menghapus SEMUA catatan makanan sehat? Data tidak bisa
dikembalikan! 😱')) {
[Link]('healthyFoodRecords');
[Link]('foodRecapContainer').[Link]('hidden');
[Link]('foodNoDataMessage').[Link]('hidden');

// Show success message

alert('✅ Semua data makanan sehat berhasil dihapus!');
}
}

// Learning Recap Functions

function showLearningRecap() {
const records = [Link]([Link]('learningRecords') || '[]');
const recapContainer = [Link]('learningRecapContainer');
const noDataMessage = [Link]('learningNoDataMessage');
const recapContent = [Link]('learningRecapContent');
const recapStats = [Link]('learningRecapStats');

if ([Link] === 0) {
[Link]('hidden');
[Link]('hidden');
return;
}

[Link]('hidden');
[Link]('hidden');

// Sort records by date (newest first)

[Link]((a, b) => new Date([Link]) - new Date([Link]));

// Generate recap content

let recapHTML = '<h3 class="text-xl font-bold text-gray-800 mb-4">📋 Daftar
Catatan:</h3>';

[Link]((record, index) => {

const formattedDate = new Date([Link]).toLocaleDateString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});

recapHTML += `
<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-4 rounded-xl border-2
border-blue-200 shadow-sm">
<div class="flex justify-between items-start">
<div class="flex-1">
<h4 class="font-bold text-lg text-blue-800">👤 ${[Link]}</h4>
<p class="text-blue-600">🏫 Kelas: ${[Link]}</p>
<p class="text-blue-600">📅 ${formattedDate}</p>
<p class="text-blue-600">📚 Sudah belajar: ${[Link]}</p>
<p class="text-blue-600">📝 Status tugas: ${[Link]}</p>
<div class="mt-2 p-3 bg-white rounded-lg border border-blue-200">
<p class="text-sm font-medium text-blue-700">📖 Pelajaran yang
dipelajari:</p>
<p class="text-blue-600 text-sm mt-1">${[Link]}</p>
</div>
${[Link] ? `
<div class="mt-2 p-2 bg-green-50 rounded-lg border border-green-200">
<p class="text-sm font-medium text-green-700">📎 File tugas: $
{[Link]}</p>
</div>
` : ''}
</div>
<div class="text-right ml-4">
<button onclick="deleteLearningRecord(${index})"
class="bg-red-400 hover:bg-red-500 text-white px-3 py-1 rounded-full
text-sm transition-colors duration-200">
Hapus
</button>
</div>
</div>
</div>
`;
});

[Link] = recapHTML;

// Generate statistics
const totalRecords = [Link];
const uniqueNames = [...new Set([Link](r => [Link]))].length;
const uniqueClasses = [...new Set([Link](r => [Link]))].length;

// Count learning statistics

const studiedCount = [Link](r => [Link] === 'Ya').length;
const homeworkDoneCount = [Link](r => [Link] === 'Sudah
selesai').length;
const filesUploadedCount = [Link](r => [Link]).length;

const studyPercentage = totalRecords > 0 ? [Link]((studiedCount / totalRecords) *

100) : 0;
const homeworkPercentage = totalRecords > 0 ? [Link]((homeworkDoneCount /
totalRecords) * 100) : 0;

const statsHTML = `
<h3 class="text-xl font-bold text-orange-800 mb-4">📈 Statistik Kegiatan Belajar:</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-blue-600">${totalRecords}</div>
<div class="text-sm text-gray-600">Total Catatan</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">${uniqueNames}</div>
<div class="text-sm text-gray-600">Anak Berbeda</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-purple-600">${studyPercentage}%</div>
<div class="text-sm text-gray-600">Rajin Belajar</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-orange-600">${homeworkPercentage}%</div>
<div class="text-sm text-gray-600">Tugas Selesai</div>
</div>
</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-green-600">${studiedCount}</div>
<div class="text-sm text-gray-600">📚 Sudah Belajar</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-blue-600">${homeworkDoneCount}</div>
<div class="text-sm text-gray-600">✅ Tugas Selesai</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-purple-600">${filesUploadedCount}</div>
<div class="text-sm text-gray-600">📎 File Diupload</div>
</div>
</div>
`;

[Link] = statsHTML;
}

function deleteLearningRecord(index) {
if (confirm('Yakin ingin menghapus catatan ini? 🤔')) {
let records = [Link]([Link]('learningRecords') || '[]');
[Link](index, 1);
[Link]('learningRecords', [Link](records));
showLearningRecap(); // Refresh the display
}
}

function clearLearningData() {
if (confirm('Yakin ingin menghapus SEMUA catatan belajar? Data tidak bisa
dikembalikan! 😱')) {
[Link]('learningRecords');
[Link]('learningRecapContainer').[Link]('hidden');
[Link]('learningNoDataMessage').[Link]('hidden');

// Show success message

alert('✅ Semua data belajar berhasil dihapus!');
}
}

// Social Recap Functions

function showSocialRecap() {
const records = [Link]([Link]('socialRecords') || '[]');
const recapContainer = [Link]('socialRecapContainer');
const noDataMessage = [Link]('socialNoDataMessage');
const recapContent = [Link]('socialRecapContent');
const recapStats = [Link]('socialRecapStats');

if ([Link] === 0) {
[Link]('hidden');
[Link]('hidden');
return;
}

[Link]('hidden');
[Link]('hidden');

// Sort records by date (newest first)

[Link]((a, b) => new Date([Link]) - new Date([Link]));

// Generate recap content

let recapHTML = '<h3 class="text-xl font-bold text-gray-800 mb-4">📋 Daftar
Catatan:</h3>';

[Link]((record, index) => {

const formattedDate = new Date([Link]).toLocaleDateString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});

recapHTML += `
<div class="bg-gradient-to-r from-teal-50 to-cyan-50 p-4 rounded-xl border-2
border-teal-200 shadow-sm">
<div class="flex justify-between items-start">
<div class="flex-1">
<h4 class="font-bold text-lg text-teal-800">👤 ${[Link]}</h4>
<p class="text-teal-600">🏫 Kelas: ${[Link]}</p>
<p class="text-teal-600">📅 ${formattedDate}</p>
<p class="text-teal-600">👫 Bermain dengan teman: $
{[Link]}</p>
<p class="text-teal-600">👴 Bertemu orang tua: ${[Link]}</p>
<p class="text-teal-600">🧹 Gotong royong kelas: ${[Link]}</p>
${[Link] ? `
<div class="mt-2 p-3 bg-white rounded-lg border border-teal-200">
<p class="text-sm font-medium text-teal-700">🤝 Interaksi dengan
orang tua:</p>
<p class="text-teal-600 text-sm mt-1">${[Link]}</p>
</div>
` : ''}
</div>
<div class="text-right ml-4">
<button onclick="deleteSocialRecord(${index})"
class="bg-red-400 hover:bg-red-500 text-white px-3 py-1 rounded-full
text-sm transition-colors duration-200">
Hapus
</button>
</div>
</div>
</div>
`;
});

[Link] = recapHTML;

// Generate statistics
const totalRecords = [Link];
const uniqueNames = [...new Set([Link](r => [Link]))].length;
const uniqueClasses = [...new Set([Link](r => [Link]))].length;

// Count social statistics

const playWithFriendsCount = [Link](r => [Link] === 'Ya').length;
const meetEldersCount = [Link](r => [Link] === 'Ya').length;
const cleanClassActiveCount = [Link](r => [Link] === 'Ya, aktif
membantu').length;

const socialPercentage = totalRecords > 0 ? [Link]((playWithFriendsCount /

totalRecords) * 100) : 0;
const respectPercentage = totalRecords > 0 ? [Link]((meetEldersCount /
totalRecords) * 100) : 0;
const cooperationPercentage = totalRecords > 0 ? [Link]((cleanClassActiveCount /
totalRecords) * 100) : 0;

const statsHTML = `
<h3 class="text-xl font-bold text-orange-800 mb-4">📈 Statistik Kegiatan
Bermasyarakat:</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-teal-600">${totalRecords}</div>
<div class="text-sm text-gray-600">Total Catatan</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">${uniqueNames}</div>
<div class="text-sm text-gray-600">Anak Berbeda</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-blue-600">${socialPercentage}%</div>
<div class="text-sm text-gray-600">Bermain Teman</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-purple-600">${respectPercentage}%</div>
<div class="text-sm text-gray-600">Hormat Orang Tua</div>
</div>
</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-blue-600">${playWithFriendsCount}</div>
<div class="text-sm text-gray-600">👫 Bermain dengan Teman</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-green-600">${meetEldersCount}</div>
<div class="text-sm text-gray-600">👴 Bertemu Orang Tua</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-orange-600">${cleanClassActiveCount}</div>
<div class="text-sm text-gray-600">🧹 Aktif Gotong Royong</div>
</div>
</div>
`;

[Link] = statsHTML;
}

function deleteSocialRecord(index) {
if (confirm('Yakin ingin menghapus catatan ini? 🤔')) {
let records = [Link]([Link]('socialRecords') || '[]');
[Link](index, 1);
[Link]('socialRecords', [Link](records));
showSocialRecap(); // Refresh the display
}
}

function clearSocialData() {
if (confirm('Yakin ingin menghapus SEMUA catatan bermasyarakat? Data tidak bisa
dikembalikan! 😱')) {
[Link]('socialRecords');
[Link]('socialRecapContainer').[Link]('hidden');
[Link]('socialNoDataMessage').[Link]('hidden');

// Show success message

alert('✅ Semua data bermasyarakat berhasil dihapus!');
}
}

// Sleep Recap Functions

function showSleepRecap() {
const records = [Link]([Link]('sleepRecords') || '[]');
const recapContainer = [Link]('sleepRecapContainer');
const noDataMessage = [Link]('sleepNoDataMessage');
const recapContent = [Link]('sleepRecapContent');
const recapStats = [Link]('sleepRecapStats');

if ([Link] === 0) {
[Link]('hidden');
[Link]('hidden');
return;
}

[Link]('hidden');
[Link]('hidden');

// Sort records by date (newest first)

[Link]((a, b) => new Date([Link]) - new Date([Link]));

// Generate recap content

let recapHTML = '<h3 class="text-xl font-bold text-gray-800 mb-4">📋 Daftar
Catatan:</h3>';
[Link]((record, index) => {
const formattedDate = new Date([Link]).toLocaleDateString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});

recapHTML += `
<div class="bg-gradient-to-r from-indigo-50 to-purple-50 p-4 rounded-xl border-2
border-indigo-200 shadow-sm">
<div class="flex justify-between items-center">
<div>
<h4 class="font-bold text-lg text-indigo-800">👤 ${[Link]}</h4>
<p class="text-indigo-600">🏫 Kelas: ${[Link]}</p>
<p class="text-indigo-600">📅 ${formattedDate}</p>
<p class="text-indigo-600"> 😴 Tidur jam: ${[Link]}</p>
</div>
<div class="text-right">
<button onclick="deleteSleepRecord(${index})"
class="bg-red-400 hover:bg-red-500 text-white px-3 py-1 rounded-full
text-sm transition-colors duration-200">
Hapus
</button>
</div>
</div>
</div>
`;
});

[Link] = recapHTML;

// Generate statistics
const totalRecords = [Link];
const uniqueNames = [...new Set([Link](r => [Link]))].length;
const uniqueClasses = [...new Set([Link](r => [Link]))].length;

// Calculate average sleep time

// Find earliest and latest sleep times

const earliestTime = [Link](...times);
const latestTime = [Link](...times);
const earliestHours = [Link](earliestTime / 60);
const earliestMins = earliestTime % 60;
const latestHours = [Link](latestTime / 60);
const latestMins = latestTime % 60;

// Count early sleepers (before 21:00)

const earlySleepers = [Link](r => {
const [hours] = [Link](':').map(Number);
return hours <= 21;
}).length;

const earlySleeperPercentage = totalRecords > 0 ? [Link]((earlySleepers /

totalRecords) * 100) : 0;

const statsHTML = `
<h3 class="text-xl font-bold text-orange-800 mb-4">📈 Statistik Kebiasaan Tidur:</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-indigo-600">${totalRecords}</div>
<div class="text-sm text-gray-600">Total Catatan</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">${uniqueNames}</div>
<div class="text-sm text-gray-600">Anak Berbeda</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-purple-600">${uniqueClasses}</div>
<div class="text-sm text-gray-600">Kelas Berbeda</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-orange-600">${avgTime}</div>
<div class="text-sm text-gray-600">Rata-rata Tidur</div>
</div>
</div>
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-green-600">$
{[Link]().padStart(2, '0')}:${[Link]().padStart(2, '0')}</div>
<div class="text-sm text-gray-600"> 😴 Paling Cepat</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-red-600">${[Link]().padStart(2,
'0')}:${[Link]().padStart(2, '0')}</div>
<div class="text-sm text-gray-600">🌙 Paling Larut</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-xl font-bold text-blue-600">${earlySleeperPercentage}%</div>
<div class="text-sm text-gray-600">⭐ Tidur Cepat
(≤21:00)</div>
</div>
</div>
`;

[Link] = statsHTML;
}

function deleteSleepRecord(index) {
if (confirm('Yakin ingin menghapus catatan ini? 🤔')) {
let records = [Link]([Link]('sleepRecords') || '[]');
[Link](index, 1);
[Link]('sleepRecords', [Link](records));
showSleepRecap(); // Refresh the display
}
}

function clearSleepData() {
if (confirm('Yakin ingin menghapus SEMUA catatan tidur? Data tidak bisa
dikembalikan! 😱')) {
[Link]('sleepRecords');
[Link]('sleepRecapContainer').[Link]('hidden');
[Link]('sleepNoDataMessage').[Link]('hidden');

// Show success message

alert('✅ Semua data tidur berhasil dihapus!');
}
}

function saveHealthyFoodRecord() {
// Get form values
const name = [Link]('foodName').value;
const kelas = [Link]('foodClass').value;
const date = [Link]('foodDate').value;
const healthyFood = [Link]('healthyFood').value;

// Check if required fields are filled

if (name && kelas && date && healthyFood) {
// Save to localStorage
const record = {
name: name,
class: kelas,
date: date,
healthyFood: healthyFood,
timestamp: new Date().toISOString()
};

// Get existing records or create new array

let records = [Link]([Link]('healthyFoodRecords') || '[]');
[Link](record);
[Link]('healthyFoodRecords', [Link](records));

// Show success message

const message = [Link]('foodMessage');
[Link]('hidden');
[Link] = `🎉 Hebat ${name}! Catatan makanan sehat sudah tersimpan!
`;

// Clear form
[Link]('foodName').value = '';
[Link]('foodClass').value = '';
[Link]('foodDate').value = '';
[Link]('healthyFood').value = '';

// Hide message after 3 seconds

setTimeout(() => {
[Link]('hidden');
}, 3000);
} else {
alert('Mohon isi semua kolom terlebih dahulu! 😊');
}
}

// Parent Reflection Functions

function saveParentReflection() {
// Get basic information
const parentName = [Link]('parentName').value;
const childName = [Link]('childName').value;
const childClass = [Link]('childClass').value;
const reflectionPeriod = [Link]('reflectionPeriod').value;
const reflectionDate = [Link]('reflectionDate').value;

// Get habit ratings

const habit1 = [Link]('input[name="habit1"]:checked')?.value;
const habit2 = [Link]('input[name="habit2"]:checked')?.value;
const habit3 = [Link]('input[name="habit3"]:checked')?.value;
const habit4 = [Link]('input[name="habit4"]:checked')?.value;
const habit5 = [Link]('input[name="habit5"]:checked')?.value;
const habit6 = [Link]('input[name="habit6"]:checked')?.value;
const habit7 = [Link]('input[name="habit7"]:checked')?.value;

// Get reflection answers

const easiestHabit = [Link]('easiestHabit').value;
const hardestHabit = [Link]('hardestHabit').value;
const positiveChanges = [Link]('positiveChanges').value;
const parentSupport = [Link]('parentSupport').value;
const improvementPlan = [Link]('improvementPlan').value;

// Check if required fields are filled

if (parentName && childName && childClass && reflectionPeriod && reflectionDate &&
habit1 && habit2 && habit3 && habit4 && habit5 && habit6 && habit7 &&
easiestHabit && hardestHabit && positiveChanges && parentSupport &&
improvementPlan) {

// Save to localStorage
const record = {
parentName: parentName,
childName: childName,
childClass: childClass,
reflectionPeriod: reflectionPeriod,
reflectionDate: reflectionDate,
habitRatings: {
bangunPagi: parseInt(habit1),
beribadah: parseInt(habit2),
berolahraga: parseInt(habit3),
makanSehat: parseInt(habit4),
gemarBelajar: parseInt(habit5),
bermasyarakat: parseInt(habit6),
tidurCepat: parseInt(habit7)
},
reflectionAnswers: {
easiestHabit: easiestHabit,
hardestHabit: hardestHabit,
positiveChanges: positiveChanges,
parentSupport: parentSupport,
improvementPlan: improvementPlan
},
timestamp: new Date().toISOString()
};

// Get existing records or create new array

let records = [Link]([Link]('parentReflectionRecords') || '[]');
[Link](record);
[Link]('parentReflectionRecords', [Link](records));

// Show success message

const message = [Link]('parentReflectionMessage');
[Link]('hidden');
[Link] = `🎉 Terima kasih ${parentName}! Lembar refleksi untuk $
{childName} sudah tersimpan!`;

// Clear form
clearParentReflectionForm();

// Hide message after 5 seconds

setTimeout(() => {
[Link]('hidden');
}, 5000);
} else {
alert('Mohon isi semua kolom yang wajib diisi! 😊');
}
}

function clearParentReflectionForm() {
[Link]('parentName').value = '';
[Link]('childName').value = '';
[Link]('childClass').value = '';
[Link]('reflectionPeriod').value = '';
[Link]('reflectionDate').value = new Date().toISOString().split('T')[0];

// Clear habit ratings

const habitRadios = [Link]('input[type="radio"]');
[Link](radio => [Link] = false);
// Clear reflection answers
[Link]('easiestHabit').value = '';
[Link]('hardestHabit').value = '';
[Link]('positiveChanges').value = '';
[Link]('parentSupport').value = '';
[Link]('improvementPlan').value = '';
}

function showParentReflectionRecap() {
const records = [Link]([Link]('parentReflectionRecords') || '[]');
const recapContainer = [Link]('parentReflectionRecapContainer');
const noDataMessage = [Link]('parentReflectionNoDataMessage');
const recapContent = [Link]('parentReflectionRecapContent');
const recapStats = [Link]('parentReflectionRecapStats');

if ([Link] === 0) {
[Link]('hidden');
[Link]('hidden');
return;
}

[Link]('hidden');
[Link]('hidden');

// Sort records by date (newest first)

[Link]((a, b) => new Date([Link]) - new Date([Link]));

// Generate recap content

let recapHTML = '<h3 class="text-xl font-bold text-gray-800 mb-4">📋 Daftar Refleksi
Orang Tua:</h3>';

[Link]((record, index) => {

const formattedDate = new Date([Link]).toLocaleDateString('id-ID', {
weekday: 'long',
year: 'numeric',
month: 'long',
day: 'numeric'
});

<div class="mb-4">
<h5 class="font-bold text-purple-800 mb-2">📊 Penilaian 7 Kebiasaan:</h5>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-2">
${[Link]((name, i) => `
<div class="bg-white p-2 rounded-lg text-center border border-purple-
200">
<div class="text-xs text-purple-700 mb-1">${name}</div>
<div class="text-lg font-bold ${habitValues[i] >= 4 ? 'text-green-600' :
habitValues[i] >= 3 ? 'text-yellow-600' : 'text-red-600'}">${habitValues[i]}</div>
</div>
`).join('')}
</div>
</div>

<div class="space-y-3">
<div class="bg-white p-3 rounded-lg border border-purple-200">
<p class="text-sm font-medium text-purple-700">✅ Kebiasaan
termudah:</p>
<p class="text-purple-600 text-sm">$
{[Link]}</p>
</div>
<div class="bg-white p-3 rounded-lg border border-purple-200">
<p class="text-sm font-medium text-purple-700">❌ Kebiasaan
tersulit:</p>
<p class="text-purple-600 text-sm">$
{[Link]}</p>
</div>
<div class="bg-white p-3 rounded-lg border border-purple-200">
<p class="text-sm font-medium text-purple-700">🌟 Perubahan positif:</p>
<p class="text-purple-600 text-sm">$
{[Link]}</p>
</div>
<div class="bg-white p-3 rounded-lg border border-purple-200">
<p class="text-sm font-medium text-purple-700">🤝 Dukungan orang
tua:</p>
<p class="text-purple-600 text-sm">$
{[Link]}</p>
</div>
<div class="bg-white p-3 rounded-lg border border-purple-200">
<p class="text-sm font-medium text-purple-700">📋 Rencana
perbaikan:</p>
<p class="text-purple-600 text-sm">$
{[Link]}</p>
</div>
</div>
</div>
`;
});

[Link] = recapHTML;

// Generate statistics
const totalRecords = [Link];
const uniqueParents = [...new Set([Link](r => [Link]))].length;
const uniqueChildren = [...new Set([Link](r => [Link]))].length;
const uniqueClasses = [...new Set([Link](r => [Link]))].length;

// Calculate average ratings for each habit

const habitAverages = {
bangunPagi: 0,
beribadah: 0,
berolahraga: 0,
makanSehat: 0,
gemarBelajar: 0,
bermasyarakat: 0,
tidurCepat: 0
};

[Link](record => {
[Link](habitAverages).forEach(habit => {
habitAverages[habit] += [Link][habit];
});
});

[Link](habitAverages).forEach(habit => {
habitAverages[habit] = (habitAverages[habit] / totalRecords).toFixed(1);
});

const overallAverage = ([Link](habitAverages).reduce((a, b) => parseFloat(a) +

parseFloat(b), 0) / 7).toFixed(1);

const statsHTML = `
<h3 class="text-xl font-bold text-orange-800 mb-4">📈 Statistik Refleksi Orang
Tua:</h3>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-purple-600">${totalRecords}</div>
<div class="text-sm text-gray-600">Total Refleksi</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-blue-600">${uniqueParents}</div>
<div class="text-sm text-gray-600">Orang Tua Berbeda</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-green-600">${uniqueChildren}</div>
<div class="text-sm text-gray-600">Anak Berbeda</div>
</div>
<div class="bg-white p-4 rounded-lg shadow-sm text-center">
<div class="text-2xl font-bold text-orange-600">${overallAverage}</div>
<div class="text-sm text-gray-600">Rata-rata Keseluruhan</div>
</div>
</div>

<div>
<h4 class="text-lg font-bold text-purple-800 mb-3">📊 Rata-rata Penilaian per
Kebiasaan:</h4>
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-3">
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold ${[Link] >= 4 ? 'text-green-
600' : [Link] >= 3 ? 'text-yellow-600' : 'text-red-600'}">$
{[Link]}</div>
<div class="text-xs text-gray-600">🌅 Bangun Pagi</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold ${[Link] >= 4 ? 'text-green-
600' : [Link] >= 3 ? 'text-yellow-600' : 'text-red-600'}">$
{[Link]}</div>
<div class="text-xs text-gray-600">🕌 Beribadah</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold ${[Link] >= 4 ? 'text-green-
600' : [Link] >= 3 ? 'text-yellow-600' : 'text-red-600'}">$
{[Link]}</div>
<div class="text-xs text-gray-600"> Berolahraga</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold ${[Link] >= 4 ? 'text-green-
600' : [Link] >= 3 ? 'text-yellow-600' : 'text-red-600'}">$
{[Link]}</div>
<div class="text-xs text-gray-600">🥗 Makan Sehat</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold ${[Link] >= 4 ? 'text-green-
600' : [Link] >= 3 ? 'text-yellow-600' : 'text-red-600'}">$
{[Link]}</div>
<div class="text-xs text-gray-600">📚 Gemar Belajar</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold ${[Link] >= 4 ? 'text-
green-600' : [Link] >= 3 ? 'text-yellow-600' : 'text-red-600'}">$
{[Link]}</div>
<div class="text-xs text-gray-600">🤝 Bermasyarakat</div>
</div>
<div class="bg-white p-3 rounded-lg shadow-sm text-center">
<div class="text-lg font-bold ${[Link] >= 4 ? 'text-green-
600' : [Link] >= 3 ? 'text-yellow-600' : 'text-red-600'}">$
{[Link]}</div>
<div class="text-xs text-gray-600"> 😴 Tidur Cepat</div>
</div>
</div>
</div>
`;

[Link] = statsHTML;
}

function deleteParentReflectionRecord(index) {
if (confirm('Yakin ingin menghapus refleksi ini? 🤔')) {
let records = [Link]([Link]('parentReflectionRecords') || '[]');
[Link](index, 1);
[Link]('parentReflectionRecords', [Link](records));
showParentReflectionRecap(); // Refresh the display
}
}

function clearParentReflectionData() {
if (confirm('Yakin ingin menghapus SEMUA refleksi orang tua? Data tidak bisa
dikembalikan! 😱')) {
[Link]('parentReflectionRecords');
[Link]('parentReflectionRecapContainer').[Link]('hidden');

[Link]('parentReflectionNoDataMessage').[Link]('hidden');

// Show success message

alert('✅ Semua data refleksi orang tua berhasil dihapus!');
}
}

// Set today's date as default

[Link]('DOMContentLoaded', function() {
const today = new Date().toISOString().split('T')[0];
[Link]('input[type="date"]').value = today;
[Link]('prayerDate').value = today;
[Link]('sportsDate').value = today;
[Link]('foodDate').value = today;
[Link]('learningDate').value = today;
[Link]('socialDate').value = today;
[Link]('sleepDate').value = today;
[Link]('reflectionDate').value = today;
});

// File upload handling

[Link]('homeworkFile').addEventListener('change', function(e) {
const file = [Link][0];
if (file) {
const filePreview = [Link]('filePreview');
const fileInfo = [Link]('fileInfo');
const fileDisplay = [Link]('fileDisplay');

// Show file info

[Link] = `📎 ${[Link]} (${([Link] / 1024 / 1024).toFixed(2)} MB)`;

// Create preview
if ([Link]('image/')) {
const reader = new FileReader();
[Link] = function(e) {
[Link] = `<img src="${[Link]}" alt="Preview" class="max-
w-full h-32 object-cover rounded-lg border-2 border-blue-200">`;
};
[Link](file);
} else if ([Link]('video/')) {
const reader = new FileReader();
[Link] = function(e) {
[Link] = `<video controls class="max-w-full h-32 rounded-lg
border-2 border-blue-200"><source src="${[Link]}" type="${[Link]}">Video tidak dapat
ditampilkan.</video>`;
};
[Link](file);
} else {
[Link] = `<div class="text-blue-600 text-sm">📄 File siap untuk
diupload</div>`;
}

[Link]('hidden');
}
});

function removeFile() {
[Link]('homeworkFile').value = '';
[Link]('filePreview').[Link]('hidden');
[Link]('fileDisplay').innerHTML = '';
}

function saveLearningRecord() {
// Get form values
const name = [Link]('learningName').value;
const kelas = [Link]('learningClass').value;
const date = [Link]('learningDate').value;
const studiedToday =
[Link]('input[name="studiedToday"]:checked')?.value;
const subjectsLearned = [Link]('subjectsLearned').value;
const homeworkDone =
[Link]('input[name="homeworkDone"]:checked')?.value;
const file = [Link]('homeworkFile').files[0];

// Check if required fields are filled

if (name && kelas && date && studiedToday && subjectsLearned && homeworkDone) {
// Prepare file data
let fileData = null;
if (file) {
const reader = new FileReader();
[Link] = function(e) {
fileData = {
name: [Link],
type: [Link],
size: [Link],
data: [Link]
};

// Save record with file data

saveRecord();
};
[Link](file);
} else {
// Save record without file
saveRecord();
}

function saveRecord() {
const record = {
name: name,
class: kelas,
date: date,
studiedToday: studiedToday,
subjectsLearned: subjectsLearned,
homeworkDone: homeworkDone,
file: fileData,
timestamp: new Date().toISOString()
};

// Get existing records or create new array

let records = [Link]([Link]('learningRecords') || '[]');
[Link](record);
[Link]('learningRecords', [Link](records));

// Show success message

const message = [Link]('learningMessage');
[Link]('hidden');
[Link] = `🎉 Hebat ${name}! Catatan belajar sudah tersimpan!`;

// Clear form
[Link]('learningName').value = '';
[Link]('learningClass').value = '';
[Link]('learningDate').value = new Date().toISOString().split('T')
[0];
const studiedRadios = [Link]('input[name="studiedToday"]');
[Link](radio => [Link] = false);
[Link]('subjectsLearned').value = '';
const homeworkRadios =
[Link]('input[name="homeworkDone"]');
[Link](radio => [Link] = false);
[Link]('homeworkFile').value = '';
[Link]('filePreview').[Link]('hidden');

// Hide message after 3 seconds

setTimeout(() => {
[Link]('hidden');
}, 3000);
}
} else {
alert('Mohon isi semua kolom yang wajib diisi! 😊');
}
}

function saveSocialRecord() {
// Get form values
const name = [Link]('socialName').value;
const kelas = [Link]('socialClass').value;
const date = [Link]('socialDate').value;
const playWithFriends =
[Link]('input[name="playWithFriends"]:checked')?.value;
const meetElders =
[Link]('input[name="meetElders"]:checked')?.value;
const elderInteraction = [Link]('elderInteraction').value;
const cleanClass =
[Link]('input[name="cleanClass"]:checked')?.value;
// Check if required fields are filled
if (name && kelas && date && playWithFriends && meetElders && cleanClass) {
// Save to localStorage
const record = {
name: name,
class: kelas,
date: date,
playWithFriends: playWithFriends,
meetElders: meetElders,
elderInteraction: elderInteraction,
cleanClass: cleanClass,
timestamp: new Date().toISOString()
};

// Get existing records or create new array

let records = [Link]([Link]('socialRecords') || '[]');
[Link](record);
[Link]('socialRecords', [Link](records));

// Show success message

const message = [Link]('socialMessage');
[Link]('hidden');
[Link] = `🎉 Hebat ${name}! Catatan bermasyarakat sudah tersimpan!`;

// Clear form
[Link]('socialName').value = '';
[Link]('socialClass').value = '';
[Link]('socialDate').value = new Date().toISOString().split('T')[0];
const playRadios = [Link]('input[name="playWithFriends"]');
[Link](radio => [Link] = false);
const elderRadios = [Link]('input[name="meetElders"]');
[Link](radio => [Link] = false);
[Link]('elderInteraction').value = '';
const cleanRadios = [Link]('input[name="cleanClass"]');
[Link](radio => [Link] = false);

// Hide message after 3 seconds

setTimeout(() => {
[Link]('hidden');
}, 3000);
} else {
alert('Mohon isi semua kolom yang wajib diisi! 😊');
}
}

function saveSleepRecord() {
// Get form values
const name = [Link]('sleepName').value;
const kelas = [Link]('sleepClass').value;
const date = [Link]('sleepDate').value;
const time = [Link]('sleepTime').value;

// Check if all fields are filled

if (name && kelas && date && time) {
// Save to localStorage
const record = {
name: name,
class: kelas,
date: date,
time: time,
timestamp: new Date().toISOString()
};

// Get existing records or create new array

let records = [Link]([Link]('sleepRecords') || '[]');
[Link](record);
[Link]('sleepRecords', [Link](records));

// Show success message

const message = [Link]('sleepMessage');
[Link]('hidden');
[Link] = `🎉 Hebat ${name}! Catatan tidur jam ${time} sudah tersimpan!
`;

// Clear form
[Link]('sleepName').value = '';
[Link]('sleepClass').value = '';
[Link]('sleepDate').value = new Date().toISOString().split('T')[0];
[Link]('sleepTime').value = '';

// Hide message after 3 seconds

setTimeout(() => {
[Link]('hidden');
}, 3000);
} else {
alert('Mohon isi semua kolom terlebih dahulu! 😊');
}
}
</script>
<script>(function(){function c(){var b=[Link]||[Link];if(b){var
d=[Link]('script');[Link]="window.__CF$cv$params={r:'9784f1f1b07c6cf1',t:'M
Tc1NjczMTU2OS4wMDAwMDA='};var
a=[Link]('script');[Link]='';[Link]='/cdn-cgi/challenge-platform/scripts/jsd/
[Link]';[Link]('head')
[0].appendChild(a);";[Link]('head')[0].appendChild(d)}}if([Link])
{var
a=[Link]('iframe');[Link]=1;[Link]=1;[Link]='absolute';[Link]
=0;[Link]=0;[Link]='none';[Link]='hidden';[Link](a);if
('loading'!==[Link])c();else
if([Link])[Link]('DOMContentLoaded',c);else{var
e=[Link]||function(){};[Link]=function(b)
{e(b);'loading'!==[Link]&&([Link]=e,c())}}}})();</
script></body>
</html>

Girasol Crystal
No ratings yet
Girasol Crystal
125 pages
SVG Transitions and Animations Guide
No ratings yet
SVG Transitions and Animations Guide
12 pages
SVG Xmlns - HTTP-WPS Office
No ratings yet
SVG Xmlns - HTTP-WPS Office
2 pages
Shubh Ganesh Chaturthi Wishes
No ratings yet
Shubh Ganesh Chaturthi Wishes
4 pages
Rotating Flower and Circle Animations
No ratings yet
Rotating Flower and Circle Animations
6 pages
Resilience Tattoo Design Concepts
No ratings yet
Resilience Tattoo Design Concepts
1 page
CSS Night Sky Animation Design
No ratings yet
CSS Night Sky Animation Design
24 pages
DOCTYPE HTML Index v1
No ratings yet
DOCTYPE HTML Index v1
80 pages
Carta de amor para Evelyn
No ratings yet
Carta de amor para Evelyn
7 pages
Carta de amor para Evelyn
No ratings yet
Carta de amor para Evelyn
7 pages
SVG Landscape Illustration Design
No ratings yet
SVG Landscape Illustration Design
1 page
Alight Motion Scene Template 9:16
No ratings yet
Alight Motion Scene Template 9:16
18 pages
Interactive App Dashboard Design
No ratings yet
Interactive App Dashboard Design
9 pages
PDF File Icon
No ratings yet
PDF File Icon
2 pages
SVG Graphic Design Elements
No ratings yet
SVG Graphic Design Elements
2 pages
PDF File Icon
No ratings yet
PDF File Icon
2 pages
PDF File Icon111111111111111111111111
No ratings yet
PDF File Icon111111111111111111111111
2 pages
Icon Replacement in Web Design
No ratings yet
Icon Replacement in Web Design
3 pages
Flow Hub (Bloxdio Cheatscript Hub) (Bloxd Bloxdio Bloxd Io) .User
No ratings yet
Flow Hub (Bloxdio Cheatscript Hub) (Bloxd Bloxdio Bloxd Io) .User
27 pages
? Simple Flower Program
No ratings yet
? Simple Flower Program
3 pages
SVG Icon Design for User Interface
No ratings yet
SVG Icon Design for User Interface
1 page
My SpeedTest
No ratings yet
My SpeedTest
36 pages
Storybook
No ratings yet
Storybook
21 pages
Interactive Birthday Cake Animation
No ratings yet
Interactive Birthday Cake Animation
8 pages
Christmas Themed SVG Animation
No ratings yet
Christmas Themed SVG Animation
11 pages
Velgrow Media Website Design Guide
No ratings yet
Velgrow Media Website Design Guide
12 pages
NTH Diwali Wishes Design Template
No ratings yet
NTH Diwali Wishes Design Template
12 pages
YouTube and Web Icons SVG Code
No ratings yet
YouTube and Web Icons SVG Code
7 pages
SVG Color Rectangle Chart
No ratings yet
SVG Color Rectangle Chart
1 page
Animación de Flor Interactiva
No ratings yet
Animación de Flor Interactiva
8 pages
Independence Day Wishing Script 2020
No ratings yet
Independence Day Wishing Script 2020
13 pages
Miau Au Logo v7
No ratings yet
Miau Au Logo v7
6 pages
Converted
No ratings yet
Converted
13 pages
Amul Ice Cream Menu and Flavors
No ratings yet
Amul Ice Cream Menu and Flavors
10 pages
Happy Birthday Balloon Animation Code
No ratings yet
Happy Birthday Balloon Animation Code
3 pages
Custom Perfume Design Experience
No ratings yet
Custom Perfume Design Experience
9 pages
Eid Milad Un Nabi Greetings Card
No ratings yet
Eid Milad Un Nabi Greetings Card
28 pages
استكشف توأم روحك: مطابقة الأرواح
No ratings yet
استكشف توأم روحك: مطابقة الأرواح
12 pages
Flower Design Elements Overview
No ratings yet
Flower Design Elements Overview
1 page
SVG Graphic with Custom Fonts
No ratings yet
SVG Graphic with Custom Fonts
1 page
Tinh Dau Tong Hop
No ratings yet
Tinh Dau Tong Hop
8 pages
Stylish CSS Animation Techniques
No ratings yet
Stylish CSS Animation Techniques
12 pages
Futuristic BioLink Design Template
No ratings yet
Futuristic BioLink Design Template
20 pages
Firework Animation and Card Design
No ratings yet
Firework Animation and Card Design
6 pages
Div Class and Rel Attributes Overview
No ratings yet
Div Class and Rel Attributes Overview
10 pages
Artistic Center Glow Animation SVG
No ratings yet
Artistic Center Glow Animation SVG
1 page
External Hack Animation Effects
No ratings yet
External Hack Animation Effects
20 pages
External Hack Animation Effects
No ratings yet
External Hack Animation Effects
11 pages
New Tab Page HTML Structure
No ratings yet
New Tab Page HTML Structure
25 pages
New Tab Page HTML Structure
No ratings yet
New Tab Page HTML Structure
25 pages
SVG Graphic Design Elements
No ratings yet
SVG Graphic Design Elements
186 pages
Red Rose SVG Design in HTML
No ratings yet
Red Rose SVG Design in HTML
1 page
Rosas Dinámicas: Diseño Floral Interactivo
No ratings yet
Rosas Dinámicas: Diseño Floral Interactivo
7 pages
DJ RLG Monogram
No ratings yet
DJ RLG Monogram
4 pages
SVG Character Design Template
No ratings yet
SVG Character Design Template
66 pages
Free Love Heart Fill Font Download
No ratings yet
Free Love Heart Fill Font Download
5 pages
Unjal Seva Booking Details
No ratings yet
Unjal Seva Booking Details
1 page
Phrasal Verbs Practice Exercises
No ratings yet
Phrasal Verbs Practice Exercises
5 pages
Meeting Availability and Deadlines Guide
No ratings yet
Meeting Availability and Deadlines Guide
19 pages
Cambridge Math Promotion Test Questions
No ratings yet
Cambridge Math Promotion Test Questions
9 pages
Fourth Quarter Exam: Org & Management 11
No ratings yet
Fourth Quarter Exam: Org & Management 11
2 pages
Path to Becoming a Chess Grandmaster
No ratings yet
Path to Becoming a Chess Grandmaster
2 pages
Convex Sets and Optimization Principles
No ratings yet
Convex Sets and Optimization Principles
3 pages
Request for AICTE Activity Approval
No ratings yet
Request for AICTE Activity Approval
1 page
JEE 2021 Electrostatics Solutions Guide
No ratings yet
JEE 2021 Electrostatics Solutions Guide
10 pages
Data Analysis and Numerical Values
No ratings yet
Data Analysis and Numerical Values
5 pages
Grammar 4
No ratings yet
Grammar 4
4 pages
OPW Level2 Test1
No ratings yet
OPW Level2 Test1
3 pages
Sequence Series MCQ-1
No ratings yet
Sequence Series MCQ-1
4 pages
Safety & Security Orientation Checklist
No ratings yet
Safety & Security Orientation Checklist
3 pages
Themes For Conclusion 1
No ratings yet
Themes For Conclusion 1
1 page
NTA UGC NET Sanskrit MCQ Answers
No ratings yet
NTA UGC NET Sanskrit MCQ Answers
99 pages
50 Từ Nối Hữu Ích Cho APTIS
No ratings yet
50 Từ Nối Hữu Ích Cho APTIS
5 pages
Circular and Form For Briefcase Allowance 062299c7da94725 08143323
No ratings yet
Circular and Form For Briefcase Allowance 062299c7da94725 08143323
2 pages
Analysis of Heart of Darkness Themes
No ratings yet
Analysis of Heart of Darkness Themes
1 page
CRPF Movement Order for Transfer 2025
No ratings yet
CRPF Movement Order for Transfer 2025
1 page
Will vs. Going To: Grammar Exercises
No ratings yet
Will vs. Going To: Grammar Exercises
4 pages
Teacher Contract Submission for September
No ratings yet
Teacher Contract Submission for September
1 page
Derivatives of Exponential and Logarithmic Functions
No ratings yet
Derivatives of Exponential and Logarithmic Functions
2 pages
제6기 (2015~2018) 지역보건의료계획
No ratings yet
제6기 (2015~2018) 지역보건의료계획
246 pages
ESP32-C6 DevKitC-1 Schematic V1.2
No ratings yet
ESP32-C6 DevKitC-1 Schematic V1.2
2 pages
P.4 Mathematics Homework Week 1
No ratings yet
P.4 Mathematics Homework Week 1
2 pages
Income Declaration Form for Scholarship
No ratings yet
Income Declaration Form for Scholarship
1 page
Insertion Sort Complexity Analysis
No ratings yet
Insertion Sort Complexity Analysis
3 pages
Huwarang Mag-aaral Grade 7 List
No ratings yet
Huwarang Mag-aaral Grade 7 List
3 pages
Primary 5 Revision Sheets: October & November
No ratings yet
Primary 5 Revision Sheets: October & November
5 pages