<!DOCTYPE html> <html lang="id"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>Kuis Al-Matsurat</title> <link href="https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Quicksand:wght@400;600;700&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { font-family: 'Quicksand', sans-serif; background: #F0FFF4; margin: 0; padding: 0; color: #22543D; height: 100vh; overflow: hidden; } .screen { position: absolute; inset: 0; width: 100%; height: 100%; display: none; flex-direction: column; align-items: center; padding: 20px; overflow-y: auto; } .screen.active { display: flex; } #screen-input { justify-content: center; background: linear-gradient(180deg, #C6F6D5 0%, #F0FFF4 100%); } .logo-area { font-size: 80px; margin-bottom: 10px; animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% {transform: translateY(0px);} 50% {transform: translateY(-15px);} } .input-card { background: white; border: 2px solid #C6F6D5; padding: 30px; border-radius: 25px; width: 90%; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); text-align: center; } .form-input { width: 100%; padding: 12px; border: 2px solid #C6F6D5; border-radius: 10px; font-size: 14px; margin-bottom: 15px; outline: none; } .btn-main { background: linear-gradient(to bottom, #48BB78, #38A169); color: white; border: none; padding: 15px; width: 100%; border-radius: 50px; font-weight: bold; cursor: pointer; box-shadow: 0 5px 0 #2F855A; font-size: 16px; margin-top: 10px; display: block; } .btn-main:active { transform: translateY(3px); box-shadow: 0 2px 0 #2F855A; } .top-bar { background: white; padding: 15px; border-radius: 20px; box-shadow: 0 4px 15px rgba(34, 84, 61, 0.1); margin-bottom: 20px; width: 100%; max-width: 500px; display: flex; justify-content: space-between; align-items: center; border: 1px solid #C6F6D5; } .progress-container { width: 100%; max-width: 500px; background: #E6FFFA; height: 10px; border-radius: 5px; margin-bottom: 15px; overflow: hidden; border: 1px solid #C6F6D5; } .progress-fill { height: 100%; background: #48BB78; width: 0%; transition: 0.3s; } .target-box { background: #fff; border: 3px solid #48BB78; border-radius: 25px; padding: 20px; margin-bottom: 20px; width: 100%; max-width: 500px; box-shadow: 0 8px 0 #2F855A; text-align: center; } .target-char { font-family: 'Amiri', serif; font-size: 28px; font-weight: bold; line-height: 1.8; direction: rtl; margin: 15px 0; } .options-container { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 500px; margin-bottom: 30px; } .option-btn { background: white; border: 2px solid #C6F6D5; border-radius: 15px; padding: 15px; font-family: 'Amiri', serif; font-size: 20px; color: #276749; direction: rtl; cursor: pointer; box-shadow: 0 4px 0 #9AE6B4; text-align: center; transition: 0.1s; line-height: 1.6; } /* SETTING POPUP MODAL */ .modal-overlay { position: fixed; inset: 0; background: rgba(34, 84, 61, 0.95); z-index: 9999; display: none; justify-content: center; align-items: center; padding: 15px; } .modal-content { background: white; padding: 20px; border-radius: 20px; width: 100%; max-width: 450px; text-align: center; border: 4px solid #F6E05E; max-height: 85vh; display: flex; flex-direction: column; } .modal-scroll-area { overflow-y: auto; padding-right: 5px; margin-bottom: 15px; } #modal-arabic { font-family: 'Amiri', serif; font-size: 20px; direction: rtl; line-height: 2; margin-bottom: 15px; color: #22543D; } #modal-arti { font-size: 13px; color: #555; border-top: 1px dashed #ccc; padding-top: 15px; font-style: italic; line-height: 1.5; } .btn-close-frame { position: absolute; top: 15px; right: 15px; width: 35px; height: 35px; background: rgba(0,0,0,0.2); border-radius: 50%; color: white; border: none; cursor: pointer; z-index: 100; font-weight: bold; } #toast { position: fixed; top: 20%; left: 50%; transform: translate(-50%, -50%) scale(0); background: rgba(0,0,0,0.85); color: #F6E05E; padding: 20px; border-radius: 20px; z-index: 10000; transition: 0.3s; text-align: center; pointer-events: none; } #toast.show { transform: translate(-50%, -50%) scale(1); } </style> </head> <body> <button class="btn-close-frame" onclick="window.parent.document.getElementById('geo-tool-frame').remove()">✕</button> <div id="toast">🌟 <b>SHAHIH!</b><br><small style="color:white">Jawaban Benar</small></div> <div id="screen-input" class="screen active"> <div class="logo-area">📿</div> <div class="input-card"> <h2>Kuis Al-Matsurat</h2> <p style="color:#38A169; font-size:12px; margin-bottom:20px;">IAGEOUPN X IAGI Digiform X HsnRos</p> <input type="text" id="in-nama" class="form-input" placeholder="Nama Lengkap"> <input type="text" id="in-target" class="form-input" placeholder="Target Rutinitas (Misal: Pagi & Petang)"> <button class="btn-main" onclick="window.unlockAudio()" id="btn-audio" style="background:#ECC94B; color:#744210; box-shadow: 0 5px 0 #975A16;">🔊 AKTIFKAN SUARA</button> <button class="btn-main" onclick="window.startApp()" style="margin-top:15px">â–¶ï¸ MULAI DZIKIR</button> </div> </div> <div id="screen-main" class="screen"> <div class="top-bar"> <div>Soal <span id="q-number">1</span>/<span id="q-total">20</span></div> <div style="background:#ECC94B; padding:2px 10px; border-radius:10px; font-weight:bold">Poin: <span id="score-val">0</span></div> </div> <div class="progress-container"><div id="progress-bar" class="progress-fill"></div></div> <div class="target-box"> <div id="surah-info" style="font-size:12px; color:#38A169; font-weight:bold; text-transform:uppercase;">JUDUL DZIKIR</div> <div id="target-text" class="target-char">...</div> <button class="btn-main" style="width:auto; padding:8px 20px; font-size:12px; margin:0 auto;" onclick="window.showFull(false)">📖 Baca Lengkap</button> </div> <div id="options-box" class="options-container"></div> </div> <div id="screen-poster" class="screen"> <h2>Alhamdulillah! 🎉</h2> <canvas id="poster-canvas" style="width:100%; max-width:400px; border-radius:15px; border:4px solid white; box-shadow:0 10px 30px rgba(0,0,0,0.1);"></canvas> <button class="btn-main" style="width:100%; max-width:400px; margin-top:20px;" onclick="window.downloadPoster()">â¬‡ï¸ DOWNLOAD SERTIFIKAT</button> <button class="btn-main" style="width:100%; max-width:400px; background:#444;" onclick="location.reload()">ULANGI</button> <div style="margin-top:20px; font-size:10px; font-weight:bold;">IAGEOUPN X IAGI Digiform X HsnRos</div> </div> <div id="modal-full" class="modal-overlay" onclick="window.closeModal()"> <div class="modal-content" onclick="event.stopPropagation()"> <h3 style="color:#2F855A; margin-top:0;">Bacaan Lengkap</h3> <div class="modal-scroll-area"> <div id="modal-arabic">...</div> <div id="modal-arti">...</div> </div> <button class="btn-main" style="margin-top:auto;" onclick="window.closeModal()">TUTUP & LANJUT</button> </div> </div> <script> // DATABASE AL-MATSURAT LENGKAP (20 SOAL URUT) var matsuratDB = [ { n: "Al-Fatihah", q: "ٱلْØَمْد٠لÙلَّه٠رَبّ٠ٱلْعَٰلَمÙينَ", a: "ٱلرَّØْمَٰن٠ٱلرَّØÙيمÙ", full: "بÙسْم٠ٱللَّه٠ٱلرَّØْمَٰن٠ٱلرَّØÙيمÙ. ٱلْØَمْد٠لÙلَّه٠رَبّ٠ٱلْعَٰلَمÙينَ. ٱلرَّØْمَٰن٠ٱلرَّØÙيمÙ. مَٰلÙك٠يَوْم٠ٱلدّÙينÙ. Ø¥Ùيَّاكَ نَعْبÙد٠وَإÙيَّاكَ نَسْتَعÙينÙ. ٱهْدÙنَا ٱلصّÙرَٰطَ ٱلْمÙسْتَقÙيمَ. صÙرَٰطَ ٱلَّذÙينَ أَنْعَمْتَ عَلَيْهÙمْ غَيْر٠ٱلْمَغْضÙوب٠عَلَيْهÙمْ وَلَا ٱلضَّآلّÙينَ", t: "Dengan menyebut nama Allah Yang Maha Pemurah lagi Maha Penyayang. Segala puji bagi Allah, Tuhan semesta alam..." }, { n: "Al-Baqarah 1-5", q: "ذَٰلÙÙƒÙŽ ٱلْكÙتَٰب٠لَا رَيْبَ Û› ÙÙيه٠ۛ", a: "Ù‡Ùدًى لّÙلْمÙتَّقÙينَ", full: "الٓمٓ. ذَٰلÙÙƒÙŽ ٱلْكÙتَٰب٠لَا رَيْبَ Û› ÙÙيه٠ۛ Ù‡Ùدًى لّÙلْمÙتَّقÙينَ. ٱلَّذÙينَ ÙŠÙؤْمÙÙ†Ùونَ بÙٱلْغَيْب٠وَيÙÙ‚ÙيمÙونَ ٱلصَّلَوٰةَ ÙˆÙŽÙ…Ùمَّا رَزَقْنَٰهÙمْ ÙŠÙÙ†ÙÙÙ‚Ùونَ. وَٱلَّذÙينَ ÙŠÙؤْمÙÙ†Ùونَ بÙمَآ Ø£ÙنزÙÙ„ÙŽ Ø¥Ùلَيْكَ وَمَآ Ø£ÙنزÙÙ„ÙŽ Ù…ÙÙ† قَبْلÙÙƒÙŽ وَبÙٱلْءَاخÙرَة٠هÙمْ ÙŠÙوقÙÙ†Ùونَ. Ø£Ùو۟لَٰٓئÙÙƒÙŽ عَلَىٰ Ù‡Ùدًى مّÙÙ† رَّبّÙÙ‡Ùمْ Û– ÙˆÙŽØ£Ùو۟لَٰٓئÙÙƒÙŽ Ù‡Ùم٠ٱلْمÙÙْلÙØÙونَ", t: "Alif laam miim. Kitab (Al Quran) ini tidak ada keraguan padanya; petunjuk bagi mereka yang bertakwa..." }, { n: "Ayat Kursi", q: "ٱللَّه٠لَآ Ø¥Ùلَٰهَ Ø¥Ùلَّا Ù‡ÙÙˆÙŽ", a: "ٱلْØَىّ٠ٱلْقَيّÙومÙ", full: "ٱللَّه٠لَآ Ø¥Ùلَٰهَ Ø¥Ùلَّا Ù‡ÙÙˆÙŽ ٱلْØَىّ٠ٱلْقَيّÙوم٠ۚ لَا تَأْخÙØ°ÙÙ‡ÙÛ¥ سÙÙ†ÙŽØ©ÙŒ وَلَا نَوْمٌ Ûš لَّهÙÛ¥ مَا ÙÙÙ‰ ٱلسَّمَٰوَٰت٠وَمَا ÙÙÙ‰ ٱلْأَرْض٠ۗ Ù…ÙŽÙ† ذَا ٱلَّذÙÙ‰ يَشْÙَع٠عÙندَهÙÛ¥Ù“ Ø¥Ùلَّا بÙØ¥ÙذْنÙÙ‡ÙÛ¦ Ûš يَعْلَم٠مَا بَيْنَ أَيْدÙيهÙمْ وَمَا خَلْÙÙŽÙ‡Ùمْ Û– وَلَا ÙŠÙØÙيطÙونَ بÙشَىْء٠مّÙنْ عÙلْمÙÙ‡ÙÛ¦Ù“ Ø¥Ùلَّا بÙمَا شَآءَ Ûš وَسÙعَ ÙƒÙرْسÙيّÙه٠ٱلسَّمَٰوَٰت٠وَٱلْأَرْضَ Û– وَلَا ÙŠÙŽÙ€Ù”ÙودÙÙ‡ÙÛ¥ ØÙÙْظÙÙ‡Ùمَا Ûš ÙˆÙŽÙ‡ÙÙˆÙŽ ٱلْعَلÙىّ٠ٱلْعَظÙيمÙ", t: "Allah, tidak ada Tuhan (yang berhak disembah) melainkan Dia Yang Hidup kekal lagi terus menerus mengurus (makhluk-Nya)..." }, { n: "Al-Baqarah 256", q: "لَآ Ø¥Ùكْرَاهَ ÙÙÙ‰ ٱلدّÙين٠ۖ", a: "قَد تَّبَيَّنَ ٱلرّÙشْد٠مÙÙ†ÙŽ ٱلْغَىّÙ", full: "لَآ Ø¥Ùكْرَاهَ ÙÙÙ‰ ٱلدّÙين٠ۖ قَد تَّبَيَّنَ ٱلرّÙشْد٠مÙÙ†ÙŽ ٱلْغَىّ٠ۚ ÙÙŽÙ…ÙŽÙ† يَكْÙÙرْ بÙٱلطَّٰغÙوت٠وَيÙؤْمÙÙ†Û¢ بÙٱللَّه٠Ùَقَد٠ٱسْتَمْسَكَ بÙٱلْعÙرْوَة٠ٱلْوÙثْقَىٰ لَا ٱنÙÙصَامَ لَهَا Û— وَٱللَّه٠سَمÙيعٌ عَلÙيمٌ", t: "Tidak ada paksaan untuk (memasuki) agama (Islam); sesungguhnya telah jelas jalan yang benar daripada jalan yang sesat..." }, { n: "Al-Baqarah Akhir", q: "ءَامَنَ ٱلرَّسÙول٠بÙمَآ Ø£ÙنزÙÙ„ÙŽ Ø¥Ùلَيْه٠مÙÙ† رَّبّÙÙ‡ÙÛ¦", a: "وَٱلْمÙؤْمÙÙ†Ùونَ", full: "ءَامَنَ ٱلرَّسÙول٠بÙمَآ Ø£ÙنزÙÙ„ÙŽ Ø¥Ùلَيْه٠مÙÙ† رَّبّÙÙ‡ÙÛ¦ وَٱلْمÙؤْمÙÙ†Ùونَ Ûš ÙƒÙلٌّ ءَامَنَ بÙٱللَّه٠وَمَلَٰٓئÙكَتÙÙ‡ÙÛ¦ ÙˆÙŽÙƒÙتÙبÙÙ‡ÙÛ¦ وَرÙسÙÙ„ÙÙ‡ÙÛ¦ لَا Ù†ÙÙَرّÙق٠بَيْنَ Ø£ÙŽØَد٠مّÙÙ† رّÙسÙÙ„ÙÙ‡ÙÛ¦ Ûš وَقَالÙوا۟ سَمÙعْنَا وَأَطَعْنَا Û– غÙÙْرَانَكَ رَبَّنَا ÙˆÙŽØ¥Ùلَيْكَ ٱلْمَصÙيرÙ", t: "Rasul telah beriman kepada Al Quran yang diturunkan kepadanya dari Tuhannya, demikian pula orang-orang yang beriman..." }, { n: "Al-Ikhlas", q: "Ù‚Ùلْ Ù‡ÙÙˆÙŽ ٱللَّه٠أَØَدٌ", a: "ٱللَّه٠ٱلصَّمَدÙ", full: "Ù‚Ùلْ Ù‡ÙÙˆÙŽ ٱللَّه٠أَØَدٌ. ٱللَّه٠ٱلصَّمَدÙ. لَمْ ÙŠÙŽÙ„Ùدْ وَلَمْ ÙŠÙولَدْ. وَلَمْ ÙŠÙŽÙƒÙÙ† لَّهÙÛ¥ ÙƒÙÙÙوًا Ø£ÙŽØَدٌۢ", t: "Katakanlah: Dialah Allah, Yang Maha Esa. Allah adalah Tuhan yang bergantung kepada-Nya segala sesuatu..." }, { n: "Al-Falaq", q: "Ù‚Ùلْ أَعÙوذ٠بÙرَبّ٠ٱلْÙÙŽÙ„ÙŽÙ‚Ù", a: "Ù…ÙÙ† شَرّ٠مَا خَلَقَ", full: "Ù‚Ùلْ أَعÙوذ٠بÙرَبّ٠ٱلْÙÙŽÙ„ÙŽÙ‚Ù. Ù…ÙÙ† شَرّ٠مَا خَلَقَ. ÙˆÙŽÙ…ÙÙ† شَرّ٠غَاسÙق٠إÙذَا وَقَبَ. ÙˆÙŽÙ…ÙÙ† شَرّ٠النَّÙَّاثَات٠ÙÙÙŠ الْعÙقَدÙ. ÙˆÙŽÙ…ÙÙ† شَرّ٠ØَاسÙد٠إÙذَا Øَسَدَ", t: "Katakanlah: Aku berlindung kepada Tuhan Yang Menguasai subuh, dari kejahatan makhluk-Nya..." }, { n: "An-Nas", q: "Ù‚Ùلْ أَعÙوذ٠بÙرَبّ٠ٱلنَّاسÙ", a: "Ù…ÙŽÙ„Ùك٠ٱلنَّاسÙ", full: "Ù‚Ùلْ أَعÙوذ٠بÙرَبّ٠ٱلنَّاسÙ. Ù…ÙŽÙ„Ùك٠ٱلنَّاسÙ. Ø¥Ùلَٰه٠ٱلنَّاسÙ. Ù…ÙÙ† شَرّ٠ٱلْوَسْوَاس٠ٱلْخَنَّاسÙ. ٱلَّذÙÙ‰ ÙŠÙوَسْوÙس٠ÙÙÙ‰ صÙدÙور٠ٱلنَّاسÙ. Ù…ÙÙ†ÙŽ ٱلْجÙنَّة٠وَٱلنَّاسÙ", t: "Katakanlah: Aku berlindung kepada Tuhannya manusia. Raja manusia. Sembahan manusia..." }, { n: "Doa Pagi/Petang", q: "أَصْبَØْنَا وَأَصْبَØÙŽ الْمÙلْك٠لÙلَّهÙ", a: "وَالْØَمْد٠لÙلَّه٠لَا شَرÙيكَ Ù„ÙŽÙ‡Ù", full: "أَصْبَØْنَا وَأَصْبَØÙŽ الْمÙلْك٠لÙلَّهÙØŒ وَالْØَمْد٠لÙلَّهÙØŒ لَا شَرÙيكَ Ù„ÙŽÙ‡ÙØŒ لَا Ø¥ÙÙ„ÙŽÙ‡ÙŽ Ø¥Ùلَّا Ù‡ÙÙˆÙŽ ÙˆÙŽØ¥Ùلَيْه٠النÙّشÙورÙ", t: "Kami telah memasuki waktu pagi dan kerajaan hanya milik Allah, segala puji bagi Allah..." }, { n: "Fitrah Islam", q: "أَصْبَØْنَا عَلَى ÙÙطْرَة٠الْإÙسْلَامÙ", a: "وَعَلَى ÙƒÙŽÙ„Ùمَة٠الْإÙخْلَاصÙ", full: "أَصْبَØْنَا عَلَى ÙÙطْرَة٠الْإÙسْلَامÙØŒ وَعَلَى ÙƒÙŽÙ„Ùمَة٠الْإÙخْلَاصÙØŒ وَعَلَى دÙين٠نَبÙÙŠÙّنَا Ù…ÙØَمَّد٠صَلَّى الله٠عَلَيْه٠وَسَلَّمَ، وَعَلَى Ù…Ùلَّة٠أَبÙينَا Ø¥ÙبْرَاهÙيمَ ØÙŽÙ†ÙÙŠÙًا Ù…ÙسْلÙمًا وَمَا كَانَ Ù…ÙÙ†ÙŽ الْمÙشْرÙÙƒÙينَ", t: "Kami berada di atas fitrah Islam, kalimat ikhlas, agama Nabi kita Muhammad..." }, { n: "Doa Syukur", q: "اللَّهÙÙ…ÙŽÙ‘ Ø¥ÙÙ†Ùّي أَصْبَØْت٠مÙنْكَ ÙÙÙŠ Ù†ÙعْمَةÙ", a: "وَعَاÙÙيَة٠وَسÙتْرÙ", full: "اللَّهÙÙ…ÙŽÙ‘ Ø¥ÙÙ†Ùّي أَصْبَØْت٠مÙنْكَ ÙÙÙŠ Ù†Ùعْمَة٠وَعَاÙÙيَة٠وَسÙتْرÙØŒ ÙَأَتÙÙ…ÙŽÙ‘ عَلَيَّ Ù†Ùعْمَتَكَ وَعَاÙÙيَتَكَ وَسÙتْرَكَ ÙÙÙŠ الدÙّنْيَا وَالْآخÙرَةÙ", t: "Ya Allah, sesungguhnya aku di pagi ini dalam kenikmatan, kesehatan, dan penjagaan-Mu..." }, { n: "Doa Persaksian", q: "اللَّهÙÙ…ÙŽÙ‘ مَا أَصْبَØÙŽ بÙÙŠ Ù…Ùنْ Ù†ÙعْمَةÙ", a: "أَوْ بÙØ£ÙŽØَد٠مÙنْ خَلْقÙÙƒÙŽ", full: "اللَّهÙÙ…ÙŽÙ‘ مَا أَصْبَØÙŽ بÙÙŠ Ù…Ùنْ Ù†Ùعْمَة٠أَوْ بÙØ£ÙŽØَد٠مÙنْ خَلْقÙÙƒÙŽ ÙÙŽÙ…Ùنْكَ ÙˆÙŽØْدَكَ لَا شَرÙيكَ Ù„ÙŽÙƒÙŽØŒ ÙÙŽÙ„ÙŽÙƒÙŽ الْØَمْد٠وَلَكَ الشÙّكْرÙ", t: "Ya Allah, nikmat apa pun yang ada padaku di waktu pagi atau yang ada pada setiap makhluk-Mu, adalah dari-Mu semata..." }, { n: "Pujian Bagi Allah", q: "يَا رَبÙÙ‘ Ù„ÙŽÙƒÙŽ الْØَمْدÙ", a: "كَمَا يَنْبَغÙÙŠ Ù„Ùجَلَال٠وَجْهÙÙƒÙŽ", full: "يَا رَبÙÙ‘ Ù„ÙŽÙƒÙŽ الْØَمْد٠كَمَا يَنْبَغÙÙŠ Ù„Ùجَلَال٠وَجْهÙÙƒÙŽ ÙˆÙŽÙ„ÙعَظÙيم٠سÙلْطَانÙÙƒÙŽ", t: "Ya Tuhanku, bagi-Mu segala puji sebagaimana selayaknya bagi keagungan wajah-Mu dan kebesaran kekuasaan-Mu." }, { n: "Ridho Billah", q: "رَضÙيت٠بÙاللَّه٠رَبًّا", a: "وَبÙالْإÙسْلَام٠دÙينًا", full: "رَضÙيت٠بÙاللَّه٠رَبًّا، وَبÙالْإÙسْلَام٠دÙينًا، وَبÙÙ…ÙØَمَّد٠صَلَّى الله٠عَلَيْه٠وَسَلَّمَ نَبÙيًّا وَرَسÙولًا", t: "Aku rela Allah sebagai Tuhan, Islam sebagai agama, dan Muhammad saw sebagai Nabi dan Rasul." }, { n: "Tasbih Malaikat", q: "سÙبْØَانَ اللَّه٠وَبÙØَمْدÙÙ‡Ù", a: "عَدَدَ خَلْقÙه٠وَرÙضَا Ù†ÙŽÙْسÙÙ‡Ù", full: "سÙبْØَانَ اللَّه٠وَبÙØَمْدÙه٠عَدَدَ خَلْقÙÙ‡ÙØŒ وَرÙضَا Ù†ÙŽÙْسÙÙ‡ÙØŒ وَزÙÙ†ÙŽØ©ÙŽ عَرْشÙÙ‡ÙØŒ ÙˆÙŽÙ…Ùدَادَ ÙƒÙŽÙ„ÙمَاتÙÙ‡Ù", t: "Maha Suci Allah dan segala puji bagi-Nya, sebanyak bilangan makhluk-Nya, sejauh kerelaan diri-Nya, seberat timbangan 'Arsy-Nya..." }, { n: "Asma Allah", q: "بÙسْم٠اللَّه٠الَّذÙÙŠ لَا يَضÙرÙÙ‘", a: "مَعَ اسْمÙه٠شَيْءٌ ÙÙÙŠ الْأَرْضÙ", full: "بÙسْم٠اللَّه٠الَّذÙÙŠ لَا يَضÙرÙÙ‘ مَعَ اسْمÙه٠شَيْءٌ ÙÙÙŠ الْأَرْض٠وَلَا ÙÙÙŠ السَّمَاء٠وَهÙÙˆÙŽ السَّمÙيع٠الْعَلÙيمÙ", t: "Dengan nama Allah yang tidak ada sesuatu pun di bumi dan di langit yang bisa memudharatkan dengan nama-Nya..." }, { n: "Tolak Syirik", q: "اللَّهÙÙ…ÙŽÙ‘ Ø¥Ùنَّا نَعÙوذ٠بÙÙƒÙŽ", a: "Ù…Ùنْ أَنْ Ù†ÙشْرÙÙƒÙŽ بÙÙƒÙŽ شَيْئًا", full: "اللَّهÙÙ…ÙŽÙ‘ Ø¥Ùنَّا نَعÙوذ٠بÙÙƒÙŽ Ù…Ùنْ أَنْ Ù†ÙشْرÙÙƒÙŽ بÙÙƒÙŽ شَيْئًا نَعْلَمÙÙ‡ÙØŒ وَنَسْتَغْÙÙرÙÙƒÙŽ Ù„Ùمَا لَا نَعْلَمÙÙ‡Ù", t: "Ya Allah, kami berlindung kepada-Mu dari menyekutukan-Mu dengan sesuatu yang kami ketahui, dan kami memohon ampun..." }, { n: "Penghilang Duka", q: "اللَّهÙÙ…ÙŽÙ‘ Ø¥ÙÙ†Ùّي أَعÙوذ٠بÙÙƒÙŽ Ù…ÙÙ†ÙŽ الْهَمÙÙ‘", a: "وَالْØَزَن٠وَالْعَجْز٠وَالْكَسَلÙ", full: "اللَّهÙÙ…ÙŽÙ‘ Ø¥ÙÙ†Ùّي أَعÙوذ٠بÙÙƒÙŽ Ù…ÙÙ†ÙŽ الْهَمÙÙ‘ وَالْØَزَنÙØŒ وَأَعÙوذ٠بÙÙƒÙŽ Ù…ÙÙ†ÙŽ الْعَجْز٠وَالْكَسَلÙØŒ وَأَعÙوذ٠بÙÙƒÙŽ Ù…ÙÙ†ÙŽ الْجÙبْن٠وَالْبÙخْلÙØŒ وَأَعÙوذ٠بÙÙƒÙŽ Ù…Ùنْ غَلَبَة٠الدَّيْن٠وَقَهْر٠الرÙّجَالÙ", t: "Ya Allah, aku berlindung kepada-Mu dari rasa gelisah dan sedih, kelemahan dan kemalasan, sifat pengecut dan kikir..." }, { n: "Doa Afiyah", q: "اللَّهÙÙ…ÙŽÙ‘ عَاÙÙÙ†ÙÙŠ ÙÙÙŠ بَدَنÙÙŠ", a: "اللَّهÙÙ…ÙŽÙ‘ عَاÙÙÙ†ÙÙŠ ÙÙÙŠ سَمْعÙÙŠ", full: "اللَّهÙÙ…ÙŽÙ‘ عَاÙÙÙ†ÙÙŠ ÙÙÙŠ بَدَنÙÙŠØŒ اللَّهÙÙ…ÙŽÙ‘ عَاÙÙÙ†ÙÙŠ ÙÙÙŠ سَمْعÙÙŠØŒ اللَّهÙÙ…ÙŽÙ‘ عَاÙÙÙ†ÙÙŠ ÙÙÙŠ بَصَرÙÙŠØŒ لَا Ø¥ÙÙ„ÙŽÙ‡ÙŽ Ø¥Ùلَّا أَنْتَ", t: "Ya Allah, sehatkanlah badanku. Ya Allah, sehatkanlah pendengaranku. Ya Allah, sehatkanlah penglihatanku..." }, { n: "Sayyidul Istighfar", q: "اللَّهÙÙ…ÙŽÙ‘ أَنْتَ رَبÙّي لَا Ø¥ÙÙ„ÙŽÙ‡ÙŽ Ø¥Ùلَّا أَنْتَ", a: "خَلَقْتَنÙÙŠ وَأَنَا عَبْدÙÙƒÙŽ", full: "اللَّهÙÙ…ÙŽÙ‘ أَنْتَ رَبÙّي لَا Ø¥ÙÙ„ÙŽÙ‡ÙŽ Ø¥Ùلَّا أَنْتَ، خَلَقْتَنÙÙŠ وَأَنَا عَبْدÙÙƒÙŽØŒ وَأَنَا عَلَى عَهْدÙÙƒÙŽ وَوَعْدÙÙƒÙŽ مَا اسْتَطَعْتÙØŒ أَعÙوذ٠بÙÙƒÙŽ Ù…Ùنْ شَرÙÙ‘ مَا صَنَعْتÙØŒ أَبÙوء٠لَكَ بÙÙ†ÙعْمَتÙÙƒÙŽ عَلَيَّ، وَأَبÙوء٠بÙذَنْبÙÙŠ ÙَاغْÙÙرْ Ù„ÙÙŠ ÙÙŽØ¥Ùنَّه٠لَا يَغْÙÙر٠الذÙّنÙوبَ Ø¥Ùلَّا أَنْتَ", t: "Ya Allah, Engkau adalah Tuhanku, tiada Tuhan selain Engkau. Engkau telah menciptakanku dan aku adalah hamba-Mu..." } ]; var score = 0, qIndex = 0, userData = {name:"", target:""}, isAuto = false; window.unlockAudio = function() { if(window.speechSynthesis) { var u = new SpeechSynthesisUtterance("بÙسْم٠الله"); u.lang = "ar-SA"; window.speechSynthesis.speak(u); } document.getElementById("btn-audio").style.display = "none"; }; window.startApp = function() { userData.name = document.getElementById("in-nama").value || "Hamba Allah"; userData.target = document.getElementById("in-target").value || "Istiqomah Dzikir"; document.getElementById("screen-input").classList.remove("active"); document.getElementById("screen-main").classList.add("active"); loadQuestion(); }; function loadQuestion() { if(qIndex >= matsuratDB.length) return endGame(); var item = matsuratDB[qIndex]; document.getElementById("q-number").innerText = qIndex + 1; document.getElementById("q-total").innerText = matsuratDB.length; document.getElementById("progress-bar").style.width = ((qIndex+1)/matsuratDB.length*100) + "%"; document.getElementById("surah-info").innerText = item.n; document.getElementById("target-text").innerText = item.q; var box = document.getElementById("options-box"); box.innerHTML = ""; var opts = [item]; while(opts.length < 3) { var r = matsuratDB[Math.floor(Math.random()*matsuratDB.length)]; if(opts.indexOf(r) === -1) opts.push(r); } opts.sort(function(){ return 0.5 - Math.random() }); opts.forEach(function(o) { var b = document.createElement("div"); b.className = "option-btn"; b.innerText = o.a; b.onclick = function(){ checkAnswer(o, b) }; box.appendChild(b); }); } function checkAnswer(o, el) { if(o.a === matsuratDB[qIndex].a) { el.style.background = "#C6F6D5"; el.style.borderColor = "#2F855A"; score += 10; document.getElementById("score-val").innerText = score; document.getElementById("toast").classList.add("show"); setTimeout(function(){ document.getElementById("toast").classList.remove("show"); window.showFull(true); }, 1000); } else { el.style.background = "#FED7D7"; el.style.borderColor = "#E53E3E"; score = Math.max(0, score-5); document.getElementById("score-val").innerText = score; } } window.showFull = function(auto) { isAuto = auto; var item = matsuratDB[qIndex]; document.getElementById("modal-arabic").innerText = item.full; document.getElementById("modal-arti").innerText = item.t; document.getElementById("modal-full").style.display = "flex"; }; window.closeModal = function() { document.getElementById("modal-full").style.display = "none"; if(isAuto) { qIndex++; loadQuestion(); } }; function endGame() { document.getElementById("screen-main").classList.remove("active"); document.getElementById("screen-poster").classList.add("active"); drawPoster(); } function drawPoster() { var c = document.getElementById("poster-canvas"); var ctx = c.getContext("2d"); c.width = 800; c.height = 1000; ctx.fillStyle = "#F0FFF4"; ctx.fillRect(0,0,800,1000); ctx.strokeStyle = "#48BB78"; ctx.lineWidth = 20; ctx.strokeRect(10,10,780,980); ctx.fillStyle = "#22543D"; ctx.font = "bold 45px Quicksand"; ctx.textAlign = "center"; ctx.fillText("PEJUANG DZIKIR", 400, 150); ctx.font = "bold 60px Quicksand"; ctx.fillStyle = "#2F855A"; ctx.fillText(userData.name, 400, 350); ctx.font = "30px Quicksand"; ctx.fillStyle = "#22543D"; ctx.fillText("Skor Kuis: " + score, 400, 500); ctx.font = "italic 25px Quicksand"; ctx.fillText("Target: " + userData.target, 400, 650); ctx.font = "bold 20px Arial"; ctx.fillStyle = "#718096"; ctx.fillText("IAGEOUPN X IAGI Digiform X HsnRos", 400, 930); } window.downloadPoster = function() { var link = document.createElement("a"); link.download = "Sertifikat_Matsurat.png"; link.href = document.getElementById("poster-canvas").toDataURL(); link.click(); }; </script> </body> </html>
