{"id":286,"date":"2026-08-18T15:47:22","date_gmt":"2026-08-18T15:47:22","guid":{"rendered":"https:\/\/lab.rwb.my.id\/story\/?page_id=286"},"modified":"2026-08-18T16:18:38","modified_gmt":"2026-08-18T16:18:38","slug":"kejutan-hari-ini","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/story\/kejutan-hari-ini\/","title":{"rendered":"Kejutan Hari Ini"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"286\" class=\"elementor elementor-286\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1fe3367 e-con-full e-flex e-con e-parent\" data-id=\"1fe3367\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-dd92302 elementor-widget elementor-widget-html\" data-id=\"dd92302\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n  @import url('https:\/\/fonts.googleapis.com\/css2?family=Bangers&family=Nunito:wght@400;600;700;800&display=swap');\n\n  .kt-surprise-section {\n    background-color: #FFF8E1;\n    font-family: 'Nunito', sans-serif;\n    padding: 60px 0;\n    min-height: 80vh;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n    overflow: hidden;\n  }\n  .kt-surprise-wrap {\n    max-width: 500px;\n    width: 100%;\n    margin: 0 auto;\n    padding: 0 20px;\n    text-align: center;\n    position: relative;\n    z-index: 2;\n  }\n\n  .kt-surprise-title {\n    font-family: 'Bangers', cursive;\n    font-size: clamp(2rem, 6vw, 3rem);\n    color: #EF4444;\n    -webkit-text-stroke: 2px #1A1A1A;\n    paint-order: stroke fill;\n    margin-bottom: 10px;\n    line-height: 1.1;\n  }\n  .kt-surprise-desc {\n    font-size: 14px;\n    font-weight: 700;\n    color: #57534E;\n    margin-bottom: 40px;\n  }\n\n  \/* AREA KADO & BALON *\/\n  .kt-gift-area {\n    position: relative;\n    display: inline-block;\n    cursor: pointer;\n  }\n  .kt-gift-box {\n    display: inline-block;\n    transition: transform 0.3s ease;\n    animation: ktFloat 3s ease-in-out infinite;\n  }\n  .kt-gift-box:hover {\n    transform: scale(1.1) rotate(-5deg);\n  }\n  .kt-gift-emoji {\n    font-size: 6rem;\n    display: block;\n  }\n  .kt-gift-text {\n    font-family: 'Bangers', cursive;\n    font-size: 1.5rem;\n    color: #1A1A1A;\n    background: #FBBF24;\n    padding: 10px 25px;\n    border: 3px solid #1A1A1A;\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\n    box-shadow: 4px 4px 0 #1A1A1A;\n    margin-top: 20px;\n    display: inline-block;\n  }\n\n  \/* BALON TEKS NGAMBEK *\/\n  .kt-angry-bubble {\n    position: absolute;\n    top: -80px;\n    left: 50%;\n    transform: translateX(-50%);\n    background: #FFFFFF;\n    border: 3px solid #1A1A1A;\n    border-radius: 20px;\n    padding: 10px 20px;\n    font-family: 'Bangers', cursive;\n    font-size: 1rem;\n    color: #1A1A1A;\n    white-space: nowrap;\n    box-shadow: 4px 4px 0 #EF4444;\n    z-index: 10;\n    opacity: 0;\n    pointer-events: none;\n    transition: all 0.3s ease;\n  }\n  .kt-angry-bubble.kt-show {\n    opacity: 1;\n    top: -90px;\n  }\n  .kt-angry-bubble::after {\n    content: '';\n    position: absolute;\n    bottom: -10px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: 10px solid transparent;\n    border-right: 10px solid transparent;\n    border-top: 10px solid #1A1A1A;\n  }\n  .kt-angry-bubble::before {\n    content: '';\n    position: absolute;\n    bottom: -6px;\n    left: 50%;\n    transform: translateX(-50%);\n    width: 0;\n    height: 0;\n    border-left: 7px solid transparent;\n    border-right: 7px solid transparent;\n    border-top: 8px solid #FFFFFF;\n    z-index: 1;\n  }\n\n  @keyframes ktFloat {\n    0%, 100% { transform: translateY(0); }\n    50% { transform: translateY(-15px); }\n  }\n  @keyframes ktShake {\n    0%, 100% { transform: rotate(0deg); }\n    25% { transform: rotate(-10deg); }\n    75% { transform: rotate(10deg); }\n  }\n  .kt-shake {\n    animation: ktShake 0.5s ease-in-out;\n  }\n\n  \/* MODAL POP-UP KEJUTAN *\/\n  .kt-modal-overlay {\n    display: none;\n    position: fixed;\n    inset: 0;\n    background: rgba(26, 26, 26, 0.7);\n    z-index: 9999;\n    align-items: center;\n    justify-content: center;\n    padding: 20px;\n    backdrop-filter: blur(4px);\n  }\n  .kt-modal-overlay.kt-show {\n    display: flex;\n    animation: ktFadeIn 0.3s;\n  }\n  @keyframes ktFadeIn { from { opacity: 0; } to { opacity: 1; } }\n\n  .kt-surprise-card {\n    background: #FFFFFF;\n    border: 3.5px solid #1A1A1A;\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\n    box-shadow: 8px 8px 0 #1A1A1A;\n    padding: 50px 30px 40px 30px;\n    max-width: 400px;\n    width: 100%;\n    text-align: center;\n    position: relative;\n    animation: ktPopIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n  @keyframes ktPopIn {\n    0% { transform: scale(0.5); opacity: 0; }\n    100% { transform: scale(1); opacity: 1; }\n  }\n\n  .kt-close-btn {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    width: 36px;\n    height: 36px;\n    background: #EF4444;\n    color: #FFF;\n    border: 2.5px solid #1A1A1A;\n    border-radius: 50%;\n    font-size: 20px;\n    font-weight: 800;\n    cursor: pointer;\n    box-shadow: 2px 2px 0 #1A1A1A;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    line-height: 0;\n    z-index: 99;\n  }\n\n  .kt-surprise-icon {\n    font-size: 4rem;\n    margin-bottom: 15px;\n    display: block;\n  }\n  .kt-surprise-type {\n    font-family: 'Bangers', cursive;\n    font-size: 1.5rem;\n    color: #EF4444;\n    -webkit-text-stroke: 1px #1A1A1A;\n    paint-order: stroke fill;\n    margin-bottom: 15px;\n    text-transform: uppercase;\n  }\n  .kt-surprise-content {\n    font-size: 1.1rem;\n    font-weight: 700;\n    color: #1A1A1A;\n    line-height: 1.6;\n    margin-bottom: 25px;\n  }\n  .kt-surprise-note {\n    font-size: 0.9rem;\n    font-weight: 700;\n    color: #57534E;\n    font-style: italic;\n  }\n\n  .kt-surprise-star {\n    position: absolute;\n    font-size: 2rem;\n    opacity: 0.3;\n    animation: ktFloat 4s ease-in-out infinite;\n  }\n  .kt-star-1 { top: 10%; left: 10%; }\n  .kt-star-2 { bottom: 15%; right: 10%; animation-delay: 1s; }\n<\/style>\n\n<div class=\"kt-surprise-section\">\n  <div class=\"kt-surprise-star kt-star-1\">\u2728<\/div>\n  <div class=\"kt-surprise-star kt-star-2\">\u2b50<\/div>\n\n  <div class=\"kt-surprise-wrap\">\n    <h2 class=\"kt-surprise-title\">\ud83e\ude84 KEJUTAN HARI INI<\/h2>\n    <p class=\"kt-surprise-desc\">Ayo klik kotak hadiah di bawah ini! Mungkin kamu dapet fakta seru, lelucon, atau pengetahuan baru!<\/p>\n    \n    <div class=\"kt-gift-area\" id=\"ktGiftArea\" onclick=\"handleGiftClick()\">\n      <!-- Balon Ngambek -->\n      <div class=\"kt-angry-bubble\" id=\"ktAngryBubble\">Sabar ya! Besok baru bisa buka lagi!<\/div>\n      \n      <div class=\"kt-gift-box\" id=\"ktGiftBox\">\n        <span class=\"kt-gift-emoji\">\ud83c\udf81<\/span>\n        <span class=\"kt-gift-text\">Klik Aku!<\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- MODAL POPUP -->\n<div class=\"kt-modal-overlay\" id=\"ktModalOverlay\" onclick=\"closeModal(event)\">\n  <div class=\"kt-surprise-card\" onclick=\"event.stopPropagation()\">\n    <button class=\"kt-close-btn\" onclick=\"closeModal(event)\">\u2715<\/button>\n    <span class=\"kt-surprise-icon\" id=\"ktSurpriseIcon\">\ud83d\udc09<\/span>\n    <div class=\"kt-surprise-type\" id=\"ktSurpriseType\">Fakta Seru!<\/div>\n    <div class=\"kt-surprise-content\" id=\"ktSurpriseContent\">\n      Tahukah kamu? Dalam banyak cerita, naga digambarkan sebagai penjaga harta karun yang sangat rakus!\n    <\/div>\n    <div class=\"kt-surprise-note\">Yuk balik lagi besok buat buka kejutan baru! \ud83c\udf1f<\/div>\n  <\/div>\n<\/div>\n\n<script>\n  \/\/ ==========================================\n  \/\/ DATA KEJUTAN (7 MACEM)\n  \/\/ ==========================================\n  const surprises = [\n    { icon: \"\ud83d\udc09\", type: \"Fakta Dongeng\", content: \"Tahukah kamu? Dalam banyak cerita, naga digambarkan sebagai penjaga harta karun. Tapi naga bisa juga makhluk bijak lho!\" },\n    { icon: \"\ud83d\ude02\", type: \"Lelucon Anak\", content: \"Kenapa kelinci suka makan wortel?\\n\\nKarena kalau makan coklat, nanti giginya hitam! Hahaha! \ud83d\udc30\ud83e\udd55\" },\n    { icon: \"\ud83e\udde0\", type: \"Pengetahuan Seru\", content: \"Tahukah kamu? Saat kamu sedang bermimpi, otakmu bekerja jauh lebih aktif dibandingkan saat kamu sedang belajar di sekolah lho!\" },\n    { icon: \"\ud83e\udd89\", type: \"Fakta Hewan\", content: \"Tahukah kamu? Burung hantu bisa memutar kepalanya sampai 270 derajat! Wow, penasaran banget ya dia! \ud83e\udd89\" },\n    { icon: \"\ud83c\udf1f\", type: \"Kata Mutiara\", content: \"'Jadilah kayak kura-kura, dia gak cepat-cepat, tapi dia gak pernah menyerah sampai garis finish!' \ud83d\udc22\" },\n    { icon: \"\ud83d\udc19\", type: \"Pengetahuan Laut\", content: \"Tahukah kamu? Gurita punya 3 buah jantung! Dua jantung buat memompa darah ke insang, dan satu jantung lagi buat seluruh tubuhnya.\" },\n    { icon: \"\ud83d\udcd6\", type: \"Rekomendasi Cerita\", content: \"Mau baca cerita yang seru banget? Cari cerita tentang 'Kancil dan Buaya' di Rak Majalah! Kancil itu pintar tapi nakal lho! \ud83e\udd8c\" }\n  ];\n\n  \/\/ Balon Ngambek (3 Versi)\n  const angryBubbles = [\n    \"Eh, sudah dibuka tadi kan? Sabar ya... \ud83e\udd71\",\n    \"Klik lagi? Aduh, sabar dong... \ud83d\ude05\",\n    \"Aduh, aku ngambek nih! Besok baru boleh buka lagi! \ud83d\ude24\ud83d\udca2\"\n  ];\n\n  const HOUR_24 = 24 * 60 * 60 * 1000; \/\/ Waktu 24 jam dalam milidetik\n  let clickCount = 0;\n  let bubbleTimeout;\n\n  \/\/ Cek apakah 24 jam udah lewat\n  function isAvailable() {\n    const lastOpened = localStorage.getItem('kt_surprise_time');\n    if (!lastOpened) return true;\n    \n    const now = new Date().getTime();\n    const diff = now - parseInt(lastOpened);\n    \n    if (diff >= HOUR_24) {\n      \/\/ Udah lewat 24 jam, reset semuanya\n      localStorage.removeItem('kt_surprise_time');\n      localStorage.removeItem('kt_surprise_index');\n      clickCount = 0;\n      return true;\n    }\n    return false;\n  }\n\n  function handleGiftClick() {\n    if (isAvailable()) {\n      \/\/ Buka kejutan\n      openSurprise();\n    } else {\n      \/\/ Munculin balon ngambek\n      showAngryBubble();\n    }\n  }\n\n  function showAngryBubble() {\n    const bubble = document.getElementById('ktAngryBubble');\n    \n    \/\/ Pilih teks ngambek berdasarkan jumlah klik\n    bubble.innerText = angryBubbles[Math.min(clickCount, angryBubbles.length - 1)];\n    bubble.classList.add('kt-show');\n\n    \/\/ Bikin kado goyang dikit\n    document.getElementById('ktGiftBox').classList.add('kt-shake');\n    setTimeout(() => document.getElementById('ktGiftBox').classList.remove('kt-shake'), 500);\n\n    clickCount++;\n\n    \/\/ Clear timeout sebelumnya biar gak nutup sendiri cepat\n    clearTimeout(bubbleTimeout);\n\n    \/\/ Balon ilang sendiri setelah 3 detik\n    bubbleTimeout = setTimeout(() => {\n      bubble.classList.remove('kt-show');\n    }, 3000);\n  }\n\n  function openSurprise() {\n    let box = document.getElementById('ktGiftBox');\n    box.classList.add('kt-shake');\n    playPopSound();\n\n    setTimeout(() => {\n      \/\/ Simpen waktu dibuka (sekarang)\n      localStorage.setItem('kt_surprise_time', new Date().getTime());\n      \n      \/\/ Hitung index kejutan biar ganti tiap hari\n      let dayOfYear = Math.floor((Date.now() - new Date(new Date().getFullYear(), 0, 0)) \/ 86400000);\n      let surpriseIndex = dayOfYear % surprises.length;\n      let data = surprises[surpriseIndex];\n\n      \/\/ Isi data ke modal\n      document.getElementById('ktSurpriseIcon').innerText = data.icon;\n      document.getElementById('ktSurpriseType').innerText = data.type;\n      document.getElementById('ktSurpriseContent').innerHTML = data.content.replace(\/\\n\/g, '<br>');\n\n      \/\/ Tampilin modal\n      document.getElementById('ktModalOverlay').classList.add('kt-show');\n    }, 500);\n  }\n\n  function closeModal(event) {\n    if (event.target.classList.contains('kt-modal-overlay') || event.target.classList.contains('kt-close-btn') || event.target.closest('.kt-close-btn')) {\n      document.getElementById('ktModalOverlay').classList.remove('kt-show');\n    }\n  }\n\n  \/\/ ==========================================\n  \/\/ KONFIGURASI SUARA\n  \/\/ ==========================================\n  let audioCtx;\n  function getAudioCtx() {\n    if (!audioCtx) {\n      audioCtx = new (window.AudioContext || window.webkitAudioContext)();\n    }\n    if (audioCtx.state === 'suspended') audioCtx.resume();\n    return audioCtx;\n  }\n\n  function playPopSound() {\n    let ctx = getAudioCtx();\n    let osc = ctx.createOscillator();\n    let gain = ctx.createGain();\n    osc.connect(gain);\n    gain.connect(ctx.destination);\n    \n    osc.type = 'sine';\n    osc.frequency.setValueAtTime(300, ctx.currentTime);\n    osc.frequency.exponentialRampToValueAtTime(900, ctx.currentTime + 0.1);\n    \n    gain.gain.setValueAtTime(0.3, ctx.currentTime);\n    gain.gain.exponentialRampToValueAtTime(0.001, ctx.currentTime + 0.15);\n    \n    osc.start(ctx.currentTime);\n    osc.stop(ctx.currentTime + 0.15);\n  }\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u2728 \u2b50 \ud83e\ude84 KEJUTAN HARI INI Ayo klik kotak hadiah di bawah ini! Mungkin kamu dapet fakta seru, lelucon, atau pengetahuan baru! Sabar ya! Besok baru bisa buka lagi! \ud83c\udf81 Klik Aku! \u2715 \ud83d\udc09 Fakta Seru! Tahukah kamu? Dalam banyak cerita, naga digambarkan sebagai penjaga harta karun yang sangat rakus! Yuk balik lagi besok buat [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-286","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/286","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/comments?post=286"}],"version-history":[{"count":13,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/286\/revisions"}],"predecessor-version":[{"id":299,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/286\/revisions\/299"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/media?parent=286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}