<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Media PAI: Iman Kepada Hari Akhir</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
background-color: #0f172a;
color: #f8fafc;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.nebula-bg {
background: radial-gradient(circle at center, #1e293b 0%, #020617 100%);
}
.card {
background: rgba(30, 41, 59, 0.7);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
border-color: rgba(255, 255, 255, 0.3);
}
.quiz-option {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
cursor: pointer;
transition: all 0.2s;
}
.quiz-option:hover {
background: rgba(255, 255, 255, 0.15);
}
.correct { background-color: #16a34a !important; }
.wrong { background-color: #dc2626 !important; }

.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
border-radius: 1rem;
background: #000;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #0f172a; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 10px; }
</style>
</head>
<body class="nebula-bg min-h-screen p-4 md:p-8">

<div class="max-w-5xl mx-auto">
<!-- Header -->
<header class="text-center mb-10">
<h1 class="text-4xl font-bold text-yellow-500 mb-2">Iman Kepada Hari Akhir</h1>
<p class="text-gray-400">Memahami Akhir Zaman dan Mempersiapkan Bekal Akhirat</p>
</header>

<!-- Menu Navigasi -->
<div class="flex flex-wrap justify-center gap-3 mb-8">
<button onclick="showSection('materi')" class="px-5 py-2 bg-yellow-600 rounded-full font-bold hover:bg-yellow-500 transition text-sm">Materi Dasar</button>
<button onclick="showSection('video')" class="px-5 py-2 bg-purple-600 rounded-full font-bold hover:bg-purple-500 transition text-sm">Video Ilustrasi</button>
<button onclick="showSection('tanda')" class="px-5 py-2 bg-red-600 rounded-full font-bold hover:bg-red-500 transition text-sm">Tanda-Tanda</button>
<button onclick="showSection('hikmah')" class="px-5 py-2 bg-green-600 rounded-full font-bold hover:bg-green-500 transition text-sm">Hikmah Iman</button>
<button onclick="showSection('kuis')" class="px-5 py-2 bg-blue-600 rounded-full font-bold hover:bg-blue-500 transition text-sm">Kuis Interaktif</button>
</div>

<!-- Section: Materi -->
<section id="materi" class="section-content space-y-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div class="card p-6 rounded-2xl">
<h3 class="text-xl font-bold text-yellow-400 mb-3">Apa itu Hari Kiamat?</h3>
<p class="text-gray-300 leading-relaxed">
Hari berakhirnya seluruh kehidupan di alam semesta. Iman kepada hari kiamat adalah Rukun Iman ke-5.
</p>
</div>
<div class="card p-6 rounded-2xl">
<h3 class="text-xl font-bold text-yellow-400 mb-3">Jenis Kiamat</h3>
<ul class="list-disc list-inside text-gray-300 space-y-2">
<li><strong>Kiamat Sugra (Kecil):</strong> Kematian seseorang, bencana alam.</li>
<li><strong>Kiamat Kubra (Besar):</strong> Hancurnya seluruh alam semesta.</li>
</ul>
</div>
</div>
</section>

<!-- Section: Video Ilustrasi -->
<section id="video" class="section-content hidden space-y-6">
<div class="card p-6 rounded-2xl">
<h3 class="text-2xl font-bold text-purple-400 mb-6 text-center text-shadow">Galeri Video Ilustrasi</h3>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- Playlist Sidebar -->
<div class="lg:col-span-1 space-y-3">
<button onclick="changeVideo('https://www.youtube.com/embed/haRaYPv99E0', 'Ilustrasi Kedahsyatan Hari Kiamat', 'Video penggambaran visual mengenai bagaimana alam semesta berakhir sesuai narasi ilmiah dan religius.')"
class="w-full text-left p-4 bg-purple-900/30 border border-purple-500/30 rounded-xl hover:bg-purple-800/40 transition">
<p class="font-bold text-purple-300">1. Pilihan Utama</p>
<p class="text-xs text-gray-400 mt-1">Ilustrasi Kiamat</p>
</button>
<button onclick="changeVideo('https://www.youtube.com/embed/uD4izufHSZI', 'Kedahsyatan Kiamat Kubra', 'Ilustrasi ilmiah mengenai kehancuran planet dan tata surya.')"
class="w-full text-left p-4 bg-purple-900/30 border border-purple-500/30 rounded-xl hover:bg-purple-800/40 transition">
<p class="font-bold text-purple-300">2. Kiamat Kubra</p>
<p class="text-xs text-gray-400 mt-1">Kehancuran Planet</p>
</button>
<button onclick="changeVideo('https://www.youtube.com/embed/fH-N91u-t5o', 'Dahsyatnya Padang Mahsyar', 'Ilustrasi pengumpulan manusia setelah tiupan sangkakala kedua.')"
class="w-full text-left p-4 bg-purple-900/30 border border-purple-500/30 rounded-xl hover:bg-purple-800/40 transition">
<p class="font-bold text-purple-300">3. Padang Mahsyar</p>
<p class="text-xs text-gray-400 mt-1">Hari Kebangkitan</p>
</button>
</div>

<!-- Video Display Area -->
<div class="lg:col-span-2 space-y-4">
<div class="video-container shadow-2xl shadow-purple-900/20">
<iframe id="mainVideo" src="https://www.youtube.com/embed/haRaYPv99E0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-4 bg-black/40 rounded-xl border border-white/5">
<h4 id="videoTitle" class="text-xl font-bold text-yellow-500">Ilustrasi Kedahsyatan Hari Kiamat</h4>
<p id="videoDesc" class="text-gray-300 text-sm mt-2">Video penggambaran visual mengenai bagaimana alam semesta berakhir sesuai narasi ilmiah dan religius.</p>
</div>
</div>
</div>
</div>
</section>

<!-- Section: Tanda-Tanda -->
<section id="tanda" class="section-content hidden">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<!-- List Tanda-Tanda -->
<div class="lg:col-span-1 space-y-2 h-[500px] overflow-y-auto pr-2" id="tandaButtons">
<!-- Buttons generated by JS -->
</div>

<!-- Detail Display -->
<div class="lg:col-span-2">
<div id="tandaDetail" class="card p-8 rounded-2xl border-red-500/30 h-full flex flex-col justify-center min-h-[400px]">
<div id="detailInitial" class="text-center">
<div class="text-5xl mb-4">ð</div>
<h3 class="text-2xl font-bold text-red-400">10 Tanda Kiamat Kubra</h3>
<p class="text-gray-400 mt-2">Pilih salah satu tanda di samping untuk melihat penjelasan detail dan dalilnya.</p>
</div>
<div id="detailContent" class="hidden animate-fade-in">
<h3 id="detailTitle" class="text-3xl font-bold text-yellow-500 mb-4"></h3>
<div id="detailDalil" class="bg-black/40 p-4 rounded-xl mb-4 border-l-4 border-red-500 italic text-sm text-gray-200"></div>
<p id="detailDesc" class="text-gray-300 leading-relaxed"></p>
</div>
</div>
</div>
</div>
</section>

<!-- Section: Hikmah -->
<section id="hikmah" class="section-content hidden space-y-6">
<h2 class="text-2xl font-bold text-green-400 text-center mb-6 text-shadow">Hikmah Beriman kepada Hari Akhir</h2>
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div class="card p-5 rounded-2xl border-l-4 border-l-green-500">
<h4 class="font-bold text-green-400 mb-2">1. Motivasi Beramal Saleh</h4>
<p class="text-sm text-gray-300">Menumbuhkan semangat untuk terus melakukan kebaikan karena meyakini setiap perbuatan akan dibalas.</p>
</div>
<div class="card p-5 rounded-2xl border-l-4 border-l-green-500">
<h4 class="font-bold text-green-400 mb-2">2. Menahan Diri dari Maksiat</h4>
<p class="text-sm text-gray-300">Merasa diawasi oleh Allah dan takut akan pertanggungjawaban di akhirat kelak.</p>
</div>
<div class="card p-5 rounded-2xl border-l-4 border-l-green-500">
<h4 class="font-bold text-green-400 mb-2">3. Hidup Lebih Optimis</h4>
<p class="text-sm text-gray-300">Meyakini bahwa keadilan sejati akan ditegakkan di akhirat, sehingga tidak mudah putus asa.</p>
</div>
<div class="card p-5 rounded-2xl border-l-4 border-l-green-500">
<h4 class="font-bold text-green-400 mb-2">4. Tidak Terlalu Cinta Dunia</h4>
<p class="text-sm text-gray-300">Menyadari bahwa dunia hanyalah tempat persinggahan sementara.</p>
</div>
</div>
</section>

<!-- Section: Kuis -->
<section id="kuis" class="section-content hidden">
<div class="card p-8 rounded-2xl max-w-2xl mx-auto">
<div id="quiz-container">
<h3 id="question" class="text-xl font-bold mb-6"></h3>
<div id="options" class="grid grid-cols-1 gap-4"></div>
<div class="mt-8 flex justify-between items-center border-t border-white/10 pt-4">
<span id="score" class="text-gray-400 text-sm">Skor: 0</span>
<button id="nextBtn" onclick="nextQuestion()" class="hidden px-6 py-2 bg-green-600 rounded-lg font-bold">Lanjut</button>
</div>
</div>
<div id="result-container" class="hidden text-center">
<h2 class="text-3xl font-bold text-yellow-500 mb-4">Kuis Selesai!</h2>
<p id="final-score" class="text-xl mb-6"></p>
<button onclick="resetQuiz()" class="px-8 py-3 bg-blue-600 rounded-full font-bold">Ulangi Kuis</button>
</div>
</div>
</section>
</div>

<script>
const tandaData = [
{
title: "1. Munculnya Dukhan",
dalil: "ÙÙÙ±Ø±ÙØªÙÙÙØ¨Ù ÙÙÙÙÙÙ ØªÙØ£ÙØªÙÙ Ù±ÙØ³ÙÙÙÙØ¢Ø¡Ù Ø¨ÙØ¯ÙØ®ÙØ§ÙÙ ÙÙÙØ¨ÙÙÙÙ . ÙÙØºÙØ´ÙÙ Ù±ÙÙÙÙØ§Ø³Ù Û ÙÙÙ°Ø°ÙØ§ Ø¹ÙØ°ÙØ§Ø¨Ù Ø£ÙÙÙÙÙÙ (QS. Ad-Dukhan: 10-11)",
desc: "Munculnya kabut asap tebal yang menyelimuti bumi, mengakibatkan manusia merasa sesak napas dan ketakutan luar biasa sebagai azab yang pedih."
},
{
title: "2. Kemunculan Dajjal",
dalil: "Rasulullah SAW bersabda: 'Dajjal adalah sosok pendusta besar yang membawa fitnah terbesar dalam sejarah manusia.'",
desc: "Sosok pendusta yang membawa fitnah besar, mengaku tuhan, dan menguji keimanan manusia dengan kemampuan supranatural atas izin Allah."
},
{
title: "3. Turunnya Nabi Isa AS",
dalil: "QS. An-Nisa: 159 menjelaskan Ahli Kitab akan beriman kepadanya sebelum kematiannya.",
desc: "Nabi Isa AS turun di menara putih Damaskus untuk membunuh Dajjal, mematahkan salib, membunuh babi, dan menegakkan syariat Islam."
},
{
title: "4. Keluarnya Ya'juj & Ma'juj",
dalil: "ØÙØªÙÙÙÙ°Ù Ø¥ÙØ°ÙØ§ ÙÙØªÙØÙØªÙ ÙÙØ£ÙØ¬ÙÙØ¬Ù ÙÙÙÙØ£ÙØ¬ÙÙØ¬Ù ÙÙÙÙÙ ÙÙÙÙ ÙÙÙÙÙ ØÙØ¯ÙØ¨Ù ÙÙÙØ³ÙÙÙÙÙÙ (QS. Al-Anbiya: 96)",
desc: "Dua suku berkekuatan luar biasa yang akan keluar dari tembok penghalang, turun dengan cepat dari tempat tinggi dan merusak bumi."
},
{
title: "5. Matahari Terbit dari Barat",
dalil: "Tanda tertutupnya pintu taubat secara permanen.",
desc: "Fenomena drastis di mana hukum alam berubah atas kehendak Allah. Setelah ini, iman seseorang yang baru masuk tidak lagi bermanfaat."
},
{
title: "6. Munculnya Dabbah",
dalil: "ÙÙØ¥ÙØ°ÙØ§ ÙÙÙÙØ¹Ù Ù±ÙÙÙÙÙÙÙÙ Ø¹ÙÙÙÙÙÙÙÙÙ Ø£ÙØ®ÙØ±ÙØ¬ÙÙÙØ§ ÙÙÙÙÙÙ Ø¯ÙØ¢Ø¨ÙÙØ©Ù mÙÙÙÙ Ù±ÙÙØ£ÙØ±ÙØ¶Ù ØªÙÙÙÙÙÙÙÙÙÙÙÙ... (QS. An-Naml: 82)",
desc: "Binatang melata dari bumi yang dapat berbicara dan memberi tanda pada wajah manusia untuk membedakan orang mukmin dan kafir."
},
{
title: "7. Gerhana di Timur",
dalil: "Bagian dari tiga gerhana besar (Khusuf) akhir zaman.",
desc: "Penenggelaman daratan atau gempa/likuefaksi dahsyat yang terjadi di wilayah timur bumi."
},
{
title: "8. Gerhana di Barat",
dalil: "Bagian dari tiga gerhana besar (Khusuf) akhir zaman.",
desc: "Penenggelaman daratan atau gempa/likuefaksi dahsyat yang terjadi di wilayah barat bumi."
},
{
title: "9. Gerhana di Jazirah Arab",
dalil: "Bagian dari tiga gerhana besar (Khusuf) akhir zaman.",
desc: "Penenggelaman daratan atau gempa/likuefaksi dahsyat yang terjadi khusus di Jazirah Arab."
},
{
title: "10. Api dari Yaman",
dalil: "Tanda terakhir sebelum kiamat benar-benar terjadi.",
desc: "Api besar yang keluar dari jurang Aden, Yaman, menggiring manusia menuju tempat berkumpul (Padang Mahsyar)."
}
];

function showSection(sectionId) {
document.querySelectorAll('.section-content').forEach(s => s.classList.add('hidden'));
document.getElementById(sectionId).classList.remove('hidden');
}

function changeVideo(url, title, desc) {
document.getElementById('mainVideo').src = url;
document.getElementById('videoTitle').innerText = title;
document.getElementById('videoDesc').innerText = desc;
}

function initTandaButtons() {
const container = document.getElementById('tandaButtons');
tandaData.forEach((item, index) => {
const btn = document.createElement('button');
btn.className = "w-full text-left p-4 card rounded-xl text-sm border-l-4 border-transparent hover:border-red-500 transition-all";
btn.innerText = item.title;
btn.onclick = () => selectTanda(index, btn);
container.appendChild(btn);
});
}

function selectTanda(index, btn) {
document.querySelectorAll('#tandaButtons button').forEach(b => b.classList.remove('bg-red-900/40', 'border-red-500'));
btn.classList.add('bg-red-900/40', 'border-red-500');

document.getElementById('detailInitial').classList.add('hidden');
const content = document.getElementById('detailContent');
content.classList.remove('hidden');

const data = tandaData[index];
document.getElementById('detailTitle').innerText = data.title;
document.getElementById('detailDalil').innerText = data.dalil;
document.getElementById('detailDesc').innerText = data.desc;
}

// Quiz Logic
const quizData = [
{
q: "Apa tanda kiamat yang menandai tertutupnya pintu taubat?",
options: ["Munculnya Dajjal", "Matahari terbit dari Barat", "Turunnya Nabi Isa", "Keluarnya Dukhan"],
correct: 1
},
{
q: "Malaikat yang meniup sangkakala adalah...",
options: ["Jibril", "Israfil", "Mikail", "Izrail"],
correct: 1
},
{
q: "Apa tugas utama Nabi Isa AS saat turun di akhir zaman?",
options: ["Membawa Dajjal", "Membunuh Dajjal & Menegakkan Syariat", "Membangun Ka'bah", "Meniup Sangkakala"],
correct: 1
},
{
q: "Hewan melata yang dapat berbicara kepada manusia disebut...",
options: ["Dajjal", "Dabbah", "Buraq", "Ya'juj Ma'juj"],
correct: 1
}
];

let currentQ = 0;
let score = 0;

function loadQuestion() {
const q = quizData[currentQ];
document.getElementById('question').innerText = q.q;
const opts = document.getElementById('options');
opts.innerHTML = '';
q.options.forEach((opt, idx) => {
const b = document.createElement('div');
b.className = 'quiz-option p-4 rounded-xl text-sm';
b.innerText = opt;
b.onclick = () => checkAns(idx);
opts.appendChild(b);
});
document.getElementById('nextBtn').classList.add('hidden');
}

function checkAns(idx) {
const q = quizData[currentQ];
const items = document.querySelectorAll('.quiz-option');
items.forEach(it => it.onclick = null);
if(idx === q.correct) {
items[idx].classList.add('correct');
score += 25;
} else {
items[idx].classList.add('wrong');
items[q.correct].classList.add('correct');
}
document.getElementById('score').innerText = `Skor: ${score}`;
document.getElementById('nextBtn').classList.remove('hidden');
}

function nextQuestion() {
currentQ++;
if(currentQ < quizData.length) loadQuestion();
else {
document.getElementById('quiz-container').classList.add('hidden');
document.getElementById('result-container').classList.remove('hidden');
document.getElementById('final-score').innerText = `Skor Akhir: ${score}`;
}
}

function resetQuiz() {
currentQ = 0; score = 0;
document.getElementById('score').innerText = "Skor: 0";
document.getElementById('quiz-container').classList.remove('hidden');
document.getElementById('result-container').classList.add('hidden');
loadQuestion();
}

window.onload = () => {
initTandaButtons();
loadQuestion();
};
</script>
</body>
</html>