{"id":312,"date":"2026-08-18T16:47:04","date_gmt":"2026-08-18T16:47:04","guid":{"rendered":"https:\/\/lab.rwb.my.id\/story\/?page_id=312"},"modified":"2026-08-18T16:48:37","modified_gmt":"2026-08-18T16:48:37","slug":"cerita-lucu","status":"publish","type":"page","link":"https:\/\/lab.rwb.my.id\/story\/cerita-lucu\/","title":{"rendered":"Cerita Lucu"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"312\" class=\"elementor elementor-312\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6e3f767 e-con-full e-flex e-con e-parent\" data-id=\"6e3f767\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-f375b8f elementor-widget elementor-widget-html\" data-id=\"f375b8f\" 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-funny-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  }\n  .kt-funny-wrap {\n    max-width: 600px;\n    width: 100%;\n    margin: 0 auto;\n    padding: 0 20px;\n  }\n\n  \/* Kartu Cerita *\/\n  .kt-funny-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: 40px 30px;\n    text-align: center;\n    position: relative;\n  }\n\n  \/* Header *\/\n  .kt-funny-header {\n    border-bottom: 3px dashed #1A1A1A;\n    padding-bottom: 15px;\n    margin-bottom: 25px;\n  }\n  .kt-funny-title {\n    font-family: 'Bangers', cursive;\n    font-size: 1.8rem;\n    color: #EF4444;\n    -webkit-text-stroke: 1px #1A1A1A;\n    paint-order: stroke fill;\n    letter-spacing: 0.03em;\n    display: block;\n  }\n\n  \/* Isi Cerita *\/\n  .kt-funny-emoji {\n    font-size: 4.5rem;\n    margin-bottom: 15px;\n    display: block;\n    animation: ktFunnyBounce 2s infinite;\n  }\n  @keyframes ktFunnyBounce {\n    0%, 100% { transform: translateY(0) rotate(0deg); }\n    50% { transform: translateY(-8px) rotate(5deg); }\n  }\n\n  .kt-funny-story-title {\n    font-family: 'Bangers', cursive;\n    font-size: 1.5rem;\n    color: #1A1A1A;\n    margin-bottom: 20px;\n  }\n\n  .kt-funny-text {\n    font-size: 1.1rem;\n    font-weight: 600;\n    color: #1A1A1A;\n    line-height: 1.7;\n    margin-bottom: 25px;\n    text-align: justify;\n  }\n\n  \/* Box Twist (Kejutan di akhir) *\/\n  .kt-twist-box {\n    background: #FBCFE8;\n    border: 3px dashed #1A1A1A;\n    border-radius: 15px 255px 15px 225px \/ 225px 15px 255px 15px;\n    padding: 20px;\n    margin-top: 20px;\n    display: none;\n    animation: ktTwistPop 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);\n  }\n  @keyframes ktTwistPop {\n    0% { transform: scale(0.5); opacity: 0; }\n    100% { transform: scale(1); opacity: 1; }\n  }\n  .kt-twist-box h3 {\n    font-family: 'Bangers', cursive;\n    font-size: 1.3rem;\n    color: #EF4444;\n    margin-top: 0;\n    margin-bottom: 10px;\n    text-align: center;\n  }\n  .kt-twist-box p {\n    font-weight: 700;\n    color: #1A1A1A;\n    text-align: center;\n    margin: 0;\n  }\n\n  \/* Tombol Aksi *\/\n  .kt-funny-actions {\n    display: flex;\n    flex-direction: column;\n    gap: 15px;\n    margin-top: 30px;\n  }\n  .kt-funny-btn {\n    border: 3px solid #1A1A1A;\n    border-radius: 255px 15px 225px 15px \/ 15px 225px 15px 255px;\n    box-shadow: 4px 4px 0 #1A1A1A;\n    padding: 15px 20px;\n    font-size: 1.1rem;\n    font-weight: 800;\n    font-family: 'Bangers', cursive;\n    letter-spacing: 0.05em;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 10px;\n  }\n  .kt-funny-btn:hover {\n    transform: translateY(-3px) translateX(-3px);\n    box-shadow: 7px 7px 0 #1A1A1A;\n  }\n  \/* Warna Tombol *\/\n  .kt-btn-listen { background: #A7F3D0; color: #1A1A1A; }\n  .kt-btn-twist { background: #FBBF24; color: #1A1A1A; }\n  .kt-btn-next { background: #1A1A1A; color: #FFFFFF; box-shadow: 4px 4px 0 #EF4444; }\n  .kt-btn-next:hover { box-shadow: 7px 7px 0 #EF4444; }\n  \n  \/* Animasi Konyol pas diklik *\/\n  .kt-shake-funny {\n    animation: ktShakeFunny 0.5s ease-in-out;\n  }\n  @keyframes ktShakeFunny {\n    0%, 100% { transform: translateX(0); }\n    25% { transform: translateX(-10px) rotate(-5deg); }\n    75% { transform: translateX(10px) rotate(5deg); }\n  }\n<\/style>\n\n<div class=\"kt-funny-section\">\n  <div class=\"kt-funny-wrap\">\n    <div class=\"kt-funny-card\" id=\"ktFunnyCard\">\n      <!-- Konten diisi oleh JavaScript -->\n    <\/div>\n  <\/div>\n<\/div>\n\n<script>\n  \/\/ ==========================================\n  \/\/ DATABASE CERITA LUCU (3 CERITA)\n  \/\/ ==========================================\n  const funnyStories = [\n    {\n      emoji: \"\ud83d\udc08\",\n      title: \"Kucing Oyen Jadi Detektif\",\n      setup: \"Suatu hari, Oyen menemukan jejak kaki misterius berlumpur di lantai dapur. Ikan favoritnya hilang! Oyen memakai topi detektif dan mulai menyelidiki. Dia mengendus-endus jejak itu sampai ke ruang tamu.\",\n      twistEmoji: \"\ud83d\udc3e\",\n      twistTitle: \"KEJUTAN!\",\n      twistText: \"Ternyata jejak itu adalah jejak kakinya sendiri! Oyen lupa dia tadi baru saja menginjak tumpukan tepung di dapur saat mengambil ikan. Dasar pelupa!\"\n    },\n    {\n      emoji: \"\ud83d\udc22\",\n      title: \"Kura-kura Kilat\",\n      setup: \"Kura-kura menantang kelinci untuk lomba lari lagi. Semua hewan tertawa, karena dulu kura-kura menang hanya karena kelinci tidur. Tapi kali ini, kura-kura memakai sepatu roda bercahaya yang dia beli dari internet!\",\n      twistEmoji: \"\ud83d\udcf8\",\n      twistTitle: \"TWIST!\",\n      twistText: \"Kura-kura muter banget di garis start karena gak bisa ngerem. Dia muter terus sampai malam, dan kelinci yang bikin live streaming dia dapet banyak view. Kelinci malah jadi miliarder YouTube.\"\n    },\n    {\n      emoji: \"\ud83d\udc09\",\n      title: \"Naga yang Takut Gelap\",\n      setup: \"Naga adalah hewan paling menakutkan di hutan. Tapi punya satu rahasia: dia takut gelap! Tiap malam dia nyalain lampu tidur bentuk kupu-kupu. Suatu hari, lampunya mati.\",\n      twistEmoji: \"\ud83d\udd6f\ufe0f\",\n      twistTitle: \"AKHIR CERITA!\",\n      twistText: \"Naga panik dan mengeluarkan api dari mulutnya biar ada penerangan. Eh, ternyata dia nyala abadi gak bisa dimatiin. Sekarang dia jadi lampu jalan buat seluruh hewan hutan tiap malam.\"\n    }\n  ];\n\n  let currentStory = 0;\n  let isSpeaking = false;\n\n  \/\/ ==========================================\n  \/\/ ENGINE CERITA LUCU\n  \/\/ ==========================================\n  function loadStory(index) {\n    const story = funnyStories[index];\n    const card = document.getElementById('ktFunnyCard');\n    \n    let html = `<div class=\"kt-funny-header\">`;\n    html += `<span class=\"kt-funny-title\">\ud83d\ude02 CERITA LUCU<\/span>`;\n    html += `<\/div>`;\n    \n    html += `<span class=\"kt-funny-emoji\">${story.emoji}<\/span>`;\n    html += `<h2 class=\"kt-funny-story-title\">${story.title}<\/h2>`;\n    html += `<div class=\"kt-funny-text\">${story.setup}<\/div>`;\n    \n    \/\/ Box Twist (Disembunyiin dulu)\n    html += `<div class=\"kt-twist-box\" id=\"ktTwistBox\">`;\n    html += `<h3>${story.twistTitle}<\/h3>`;\n    html += `<span style=\"font-size: 3rem; display:block; margin-bottom:10px;\">${story.twistEmoji}<\/span>`;\n    html += `<p>${story.twistText}<\/p>`;\n    html += `<\/div>`;\n    \n    \/\/ Tombol\n    html += `<div class=\"kt-funny-actions\">`;\n    html += `<button class=\"kt-funny-btn kt-btn-twist\" id=\"ktTwistBtn\" onclick=\"revealTwist()\">\ud83e\udd23 Baca Twist-nya!<\/button>`;\n    html += `<button class=\"kt-funny-btn kt-btn-listen\" id=\"ktListenBtn\" onclick=\"toggleSpeech()\">\ud83d\udd0a Dengarkan<\/button>`;\n    html += `<button class=\"kt-funny-btn kt-btn-next\" onclick=\"nextStory()\">\ud83e\udd23 Cerita Lucu Lainnya<\/button>`;\n    html += `<\/div>`;\n    \n    card.innerHTML = html;\n    \n    \/\/ Reset bicara kalau ganti cerita\n    if(isSpeaking) {\n      window.speechSynthesis.cancel();\n      isSpeaking = false;\n    }\n  }\n\n  function revealTwist() {\n    let twistBox = document.getElementById('ktTwistBox');\n    let twistBtn = document.getElementById('ktTwistBtn');\n    \n    twistBox.style.display = 'block';\n    twistBtn.style.display = 'none';\n    \n    \/\/ Animasi goyang konyol\n    document.getElementById('ktFunnyCard').classList.add('kt-shake-funny');\n    setTimeout(() => {\n      document.getElementById('ktFunnyCard').classList.remove('kt-shake-funny');\n    }, 500);\n  }\n\n  function nextStory() {\n    currentStory = (currentStory + 1) % funnyStories.length;\n    loadStory(currentStory);\n    window.scrollTo({ top: 0, behavior: 'smooth' });\n  }\n\n  \/\/ ==========================================\n  \/\/ SISTEM BACA SUARA (TEXT TO SPEECH)\n  \/\/ ==========================================\n  function toggleSpeech() {\n    let btn = document.getElementById('ktListenBtn');\n    \n    if (isSpeaking) {\n      \/\/ Kalau lagi bicara, matiin\n      window.speechSynthesis.cancel();\n      isSpeaking = false;\n      btn.innerHTML = \"\ud83d\udd0a Dengarkan\";\n    } else {\n      \/\/ Kalau mati, nyalain\n      const story = funnyStories[currentStory];\n      let textToRead = `${story.title}. ${story.setup}`;\n      \n      \/\/ Cek ada twistnya belum, kalau udah dibuka, dibaca juga\n      let twistBox = document.getElementById('ktTwistBox');\n      if (twistBox.style.display === 'block') {\n        textToRead += `. ${story.twistText}`;\n      }\n\n      let utterance = new SpeechSynthesisUtterance(textToRead);\n      utterance.lang = 'id-ID'; \/\/ Bahasa Indonesia\n      utterance.rate = 0.9; \/\/ Kecepatan bicara (1 normal, 0.9 agak santai)\n      \n      \/\/ Kalau udah selesai baca, balikin tombol\n      utterance.onend = function() {\n        isSpeaking = false;\n        btn.innerHTML = \"\ud83d\udd0a Dengarkan\";\n      };\n\n      window.speechSynthesis.speak(utterance);\n      isSpeaking = true;\n      btn.innerHTML = \"\u23f8\ufe0f Stop Bacain\";\n    }\n  }\n\n  \/\/ Load cerita pertama kali\n  loadStory(0);\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":"","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-312","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/312","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=312"}],"version-history":[{"count":7,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/312\/revisions"}],"predecessor-version":[{"id":319,"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/pages\/312\/revisions\/319"}],"wp:attachment":[{"href":"https:\/\/lab.rwb.my.id\/story\/wp-json\/wp\/v2\/media?parent=312"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}