{"id":8,"date":"2026-07-28T14:55:05","date_gmt":"2026-07-28T14:55:05","guid":{"rendered":"https:\/\/doodlebob.lol\/?page_id=8"},"modified":"2026-07-29T09:01:36","modified_gmt":"2026-07-29T09:01:36","slug":"elementor-8","status":"publish","type":"page","link":"https:\/\/doodlebob.lol\/","title":{"rendered":"Elementor #8"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"8\" class=\"elementor elementor-8\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66f81dd e-flex e-con-boxed e-con e-parent\" data-id=\"66f81dd\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;video&quot;,&quot;background_video_link&quot;:&quot;https:\\\/\\\/doodlebob.lol\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/HERO-DOODLEBOB.mp4&quot;,&quot;background_play_on_mobile&quot;:&quot;yes&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-background-video-container\">\n\t\t\t\t\t\t\t<video class=\"elementor-background-video-hosted elementor-html5-video\" autoplay muted playsinline loop><\/video>\n\t\t\t\t\t<\/div><div class=\"elementor-element elementor-element-578964e e-con-full e-flex e-con e-child\" data-id=\"578964e\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-92a4ad3 elementor-widget elementor-widget-html\" data-id=\"92a4ad3\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Import Font Google (Schoolbell & Patrick Hand) -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Patrick+Hand&family=Schoolbell&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  \/* RESET & BASIC SETUP *\/\r\n  .db-nav-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .db-nav-wrapper {\r\n    width: 100%;\r\n    background: transparent;\r\n    padding: 15px 20px;\r\n    font-family: 'Patrick Hand', cursive;\r\n  }\r\n\r\n  \/* NAVBAR DESIGN *\/\r\n  .db-nav {\r\n    max-width: 1100px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    background: rgba(255, 255, 255, 0.95);\r\n    border: 3.5px solid #000;\r\n    padding: 12px 24px;\r\n    border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\r\n    box-shadow: 5px 5px 0px #000;\r\n  }\r\n\r\n  .db-logo {\r\n    font-family: 'Schoolbell', cursive;\r\n    font-size: 2rem;\r\n    font-weight: 500;\r\n    color: #000;\r\n    text-decoration: none;\r\n    letter-spacing: 1px;\r\n    transition: transform 0.2s ease;\r\n  }\r\n\r\n  .db-logo:hover {\r\n    transform: scale(1.05) rotate(-2deg);\r\n  }\r\n\r\n  .db-menu {\r\n    display: flex;\r\n    gap: 25px;\r\n    list-style: none;\r\n    align-items: center;\r\n  }\r\n\r\n  .db-link {\r\n    text-decoration: none;\r\n    color: #000;\r\n    font-size: 1.35rem;\r\n    font-family: 'Patrick Hand', cursive;\r\n    transition: all 0.2s ease;\r\n    display: inline-block;\r\n    cursor: pointer;\r\n    background: none;\r\n    border: none;\r\n  }\r\n\r\n  .db-link:hover {\r\n    transform: translateY(-2deg) rotate(2deg);\r\n    text-decoration: underline;\r\n  }\r\n\r\n  \/* BUTTON BUY \/ SWAP *\/\r\n  .db-btn-swap {\r\n    display: inline-block;\r\n    padding: 10px 22px;\r\n    font-family: 'Patrick Hand', cursive;\r\n    font-size: 1.25rem;\r\n    font-weight: bold;\r\n    color: #000;\r\n    text-decoration: none;\r\n    background: #ffffff;\r\n    border: 3px solid #000000;\r\n    border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\r\n    box-shadow: 4px 4px 0px #000000;\r\n    cursor: pointer;\r\n    transition: all 0.2s ease-in-out;\r\n  }\r\n\r\n  .db-btn-swap:hover {\r\n    transform: translate(-2px, -2px) rotate(-1.5deg);\r\n    box-shadow: 6px 6px 0px #000000;\r\n    background: #f4f4f4;\r\n  }\r\n\r\n  \/* POP-UP MODAL OVERLAY *\/\r\n  .db-modal-overlay {\r\n    position: fixed;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100vw;\r\n    height: 100vh;\r\n    background: rgba(0, 0, 0, 0.6);\r\n    backdrop-filter: blur(4px);\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    z-index: 99999;\r\n    opacity: 0;\r\n    visibility: hidden;\r\n    transition: opacity 0.3s ease, visibility 0.3s ease;\r\n    padding: 20px;\r\n  }\r\n\r\n  \/* ANIMASI KELUAR \/ MASUK BERPUTAR (SPIN MOTION) *\/\r\n  .db-modal-overlay.active {\r\n    opacity: 1;\r\n    visibility: visible;\r\n  }\r\n\r\n  .db-modal-card {\r\n    background: #ffffff;\r\n    border: 4px solid #000000;\r\n    border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\r\n    box-shadow: 10px 10px 0px #000000;\r\n    padding: 35px 30px;\r\n    max-width: 550px;\r\n    width: 100%;\r\n    position: relative;\r\n    transform: scale(0.2) rotate(-180deg);\r\n    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n  }\r\n\r\n  .db-modal-overlay.active .db-modal-card {\r\n    transform: scale(1) rotate(0deg);\r\n  }\r\n\r\n  \/* MODAL CONTENT STYLING *\/\r\n  .db-modal-title {\r\n    font-family: 'Schoolbell', cursive;\r\n    font-size: 2.3rem;\r\n    margin-bottom: 15px;\r\n    color: #000;\r\n    border-bottom: 3px dashed #000;\r\n    padding-bottom: 5px;\r\n  }\r\n\r\n  .db-modal-body {\r\n    font-family: 'Patrick Hand', cursive;\r\n    font-size: 1.35rem;\r\n    color: #1a1a1a;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  .db-modal-body p {\r\n    margin-bottom: 12px;\r\n  }\r\n\r\n  .db-modal-body ul {\r\n    list-style: none;\r\n    padding-left: 5px;\r\n  }\r\n\r\n  .db-modal-body li {\r\n    margin-bottom: 8px;\r\n  }\r\n\r\n  \/* TOMBOL CLOSE MODAL *\/\r\n  .db-modal-close {\r\n    position: absolute;\r\n    top: 15px;\r\n    right: 20px;\r\n    background: #ffffff;\r\n    border: 3px solid #000;\r\n    font-family: 'Schoolbell', cursive;\r\n    font-size: 1.5rem;\r\n    font-weight: bold;\r\n    width: 38px;\r\n    height: 38px;\r\n    border-radius: 50%;\r\n    cursor: pointer;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    box-shadow: 3px 3px 0px #000;\r\n    transition: all 0.2s ease;\r\n  }\r\n\r\n  .db-modal-close:hover {\r\n    transform: scale(1.1) rotate(15deg);\r\n    background: #ff5555;\r\n    color: #fff;\r\n  }\r\n\r\n  \/* RESPONSIVE MOBILE *\/\r\n  @media (max-width: 768px) {\r\n    .db-nav {\r\n      flex-direction: column;\r\n      gap: 15px;\r\n      padding: 15px;\r\n      text-align: center;\r\n    }\r\n\r\n    .db-menu {\r\n      flex-wrap: wrap;\r\n      justify-content: center;\r\n      gap: 12px;\r\n    }\r\n\r\n    .db-btn-swap {\r\n      width: 100%;\r\n    }\r\n\r\n    .db-modal-card {\r\n      padding: 25px 20px;\r\n    }\r\n\r\n    .db-modal-title {\r\n      font-size: 1.8rem;\r\n    }\r\n\r\n    .db-modal-body {\r\n      font-size: 1.2rem;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- HTML NAV MENU -->\r\n<div class=\"db-nav-wrapper\">\r\n  <nav class=\"db-nav\">\r\n    <!-- Logo -->\r\n    <a href=\"#\" class=\"db-logo\">$SCRIBBLE<\/a>\r\n\r\n    <!-- Menu Link (Mengaktifkan Pop-Up) -->\r\n    <ul class=\"db-menu\">\r\n      <li><button class=\"db-link\" onclick=\"openModal('about')\">About<\/button><\/li>\r\n      <li><button class=\"db-link\" onclick=\"openModal('character')\">Character<\/button><\/li>\r\n      <li><button class=\"db-link\" onclick=\"openModal('tokenomics')\">Tokenomics<\/button><\/li>\r\n      <li><button class=\"db-link\" onclick=\"openModal('roadmap')\">Roadmap<\/button><\/li>\r\n    <\/ul>\r\n\r\n    <!-- Tombol CTA -->\r\n    <a href=\"https:\/\/swap.pump.fun\/?input=So11111111111111111111111111111111111111112&output=[CA]\" target=\"_blank\" rel=\"noopener\" class=\"db-btn-swap\">Buy $SCRIBBLE<\/a>\r\n  <\/nav>\r\n<\/div>\r\n\r\n<!-- POP-UP MODAL CONTAINER -->\r\n<div class=\"db-modal-overlay\" id=\"dbModalOverlay\" onclick=\"closeModalOnOuterClick(event)\">\r\n  <div class=\"db-modal-card\">\r\n    <button class=\"db-modal-close\" onclick=\"closeModal()\">&times;<\/button>\r\n    <h3 class=\"db-modal-title\" id=\"dbModalTitle\">Title<\/h3>\r\n    <div class=\"db-modal-body\" id=\"dbModalBody\">\r\n      <!-- Content akan diisi secara dinamis oleh JavaScript -->\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- JAVASCRIPT UNTUK POP-UP & KONTEN -->\r\n<script>\r\n  \/\/ DATA KONTEN UNTUK POP-UP\r\n  const modalData = {\r\n    about: {\r\n      title: \"Beyond the Canvas\",\r\n      content: `\r\n        <p>In a landscape filled with complex jargon and rigid frameworks, DoodleBob takes an entirely different path. He doesn't overcomplicate or make grand promises.<\/p>\r\n        <p>His appeal lies in his simplicity: appearing out of nowhere, capturing the crowd's attention, and leaving a lasting impression on the timeline. DoodleBob represents pure spontaneity in the digital space\u2014bringing lighthearted humor and genuine momentum to everyone who encounters him.<\/p>\r\n      `\r\n    },\r\n    character: {\r\n      title: \"Core Pillars\",\r\n      content: `\r\n        <ul>\r\n          <li><strong>Pure Spontaneity:<\/strong> Unbound by schedules or expectations. Every appearance brings a natural spark that brightens up the community.<\/li>\r\n          <li style=\"margin-top:10px;\"><strong>Effortless Attraction:<\/strong> Without relying on forced narratives, his raw design and playful nature naturally command the room.<\/li>\r\n          <li style=\"margin-top:10px;\"><strong>Community Driven:<\/strong> DoodleBob thrives on shared moments and engagement. This space belongs entirely to the collective energy of those who appreciate the fun.<\/li>\r\n        <\/ul>\r\n      `\r\n    },\r\n    tokenomics: {\r\n      title: \"Token Overview\",\r\n      content: `\r\n        <ul>\r\n          <li><strong>Ticker:<\/strong> $SCRIBBLE<\/li>\r\n          <li><strong>Transaction Tax:<\/strong> 0% \/ 0%<\/li>\r\n          <li><strong>Ownership:<\/strong> Renounced<\/li>\r\n          <li><strong>Liquidity:<\/strong> Burned<\/li>\r\n        <\/ul>\r\n      `\r\n    },\r\n    roadmap: {\r\n      title: \"Doodle Roadmap\",\r\n      content: `\r\n        <ul>\r\n          <li><strong>Phase 1: The First Scribble<\/strong><br>Spontaneous appearance on the blockchain, initial community gathering, and contract deployment.<\/li>\r\n          <li style=\"margin-top:12px;\"><strong>Phase 2: Spreading Chaos<\/strong><br>Social media takeover, community memes creation, and DEX listing integrations.<\/li>\r\n          <li style=\"margin-top:12px;\"><strong>Phase 3: Endless Canvas<\/strong><br>Long-term community initiatives, viral artistic events, and timeline domination.<\/li>\r\n        <\/ul>\r\n      `\r\n    }\r\n  };\r\n\r\n  \/\/ FUNGSI BUKA MODAL\r\n  function openModal(key) {\r\n    const data = modalData[key];\r\n    if (data) {\r\n      document.getElementById('dbModalTitle').innerText = data.title;\r\n      document.getElementById('dbModalBody').innerHTML = data.content;\r\n      \r\n      const overlay = document.getElementById('dbModalOverlay');\r\n      overlay.classList.add('active');\r\n    }\r\n  }\r\n\r\n  \/\/ FUNGSI TUTUP MODAL\r\n  function closeModal() {\r\n    const overlay = document.getElementById('dbModalOverlay');\r\n    overlay.classList.remove('active');\r\n  }\r\n\r\n  \/\/ TUTUP MODAL SAAT KLIK DI LUAR KOTAK\r\n  function closeModalOnOuterClick(event) {\r\n    if (event.target.classList.contains('db-modal-overlay')) {\r\n      closeModal();\r\n    }\r\n  }\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-4e03e79 e-con-full e-flex e-con e-child\" data-id=\"4e03e79\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-16dcd90 elementor-widget elementor-widget-html\" data-id=\"16dcd90\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Import Google Fonts (Schoolbell & Patrick Hand) -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Patrick+Hand&family=Schoolbell&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  \/* RESET & BASIC SETUP *\/\r\n  .db-hero-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .db-hero-wrapper {\r\n    width: 100%;\r\n    background: transparent;\r\n    padding: 60px 20px 40px 20px;\r\n    font-family: 'Patrick Hand', cursive;\r\n    position: relative;\r\n    overflow: visible !important; \/* Agar animasi float karakter tidak terpotong *\/\r\n  }\r\n\r\n  \/* HERO CONTAINER - LAYOUT 2 BAGIAN (50\/50) *\/\r\n  .db-hero-container {\r\n    max-width: 1100px;\r\n    margin: 0 auto;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n    gap: 40px;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  \/* BAGIAN KIRI (NARRATIVE \/ TEKS) *\/\r\n  .db-hero-left {\r\n    flex: 1;\r\n    text-align: left;\r\n    background: rgba(255, 255, 255, 0.95);\r\n    border: 3.5px solid #000;\r\n    padding: 35px;\r\n    border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\r\n    box-shadow: 6px 6px 0px #000;\r\n    position: relative;\r\n  }\r\n\r\n  .db-hero-left h1 {\r\n    font-family: 'Schoolbell', cursive;\r\n    font-size: 2.8rem;\r\n    line-height: 1.15;\r\n    color: #000;\r\n    margin-bottom: 15px;\r\n  }\r\n\r\n  .db-hero-left p {\r\n    font-size: 1.3rem;\r\n    color: #1a1a1a;\r\n    line-height: 1.5;\r\n    margin-bottom: 25px;\r\n  }\r\n\r\n  \/* BAGIAN KANAN (CONTRACT ADDRESS & ACTION BOX) *\/\r\n  .db-hero-right {\r\n    flex: 1;\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 20px;\r\n    background: rgba(255, 255, 255, 0.95);\r\n    border: 3.5px solid #000;\r\n    padding: 35px;\r\n    border-radius: 15px 255px 15px 225px\/225px 15px 255px 15px;\r\n    box-shadow: 6px 6px 0px #000;\r\n    text-align: center;\r\n    position: relative;\r\n  }\r\n\r\n  .db-hero-right h3 {\r\n    font-family: 'Schoolbell', cursive;\r\n    font-size: 2rem;\r\n    color: #000;\r\n    border-bottom: 2px dashed #000;\r\n    padding-bottom: 8px;\r\n  }\r\n\r\n  \/* CA CONTAINER & INPUT *\/\r\n  .db-ca-box {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 10px;\r\n    background: #f9f9f9;\r\n    border: 2.5px solid #000;\r\n    padding: 15px;\r\n    border-radius: 12px;\r\n    box-shadow: 3px 3px 0px #000;\r\n  }\r\n\r\n  .db-ca-text {\r\n    font-family: monospace;\r\n    font-size: 1.05rem;\r\n    color: #000;\r\n    word-break: break-all;\r\n    background: #fff;\r\n    border: 2px solid #000;\r\n    padding: 10px;\r\n    border-radius: 8px;\r\n    user-select: all;\r\n  }\r\n\r\n  \/* BUTTON STYLES *\/\r\n  .db-btn-group {\r\n    display: flex;\r\n    gap: 12px;\r\n    flex-wrap: wrap;\r\n    position: relative;\r\n    z-index: 10;\r\n  }\r\n\r\n  .db-btn {\r\n    flex: 1;\r\n    display: inline-block;\r\n    padding: 12px 20px;\r\n    font-family: 'Patrick Hand', cursive;\r\n    font-size: 1.25rem;\r\n    font-weight: bold;\r\n    color: #000;\r\n    text-decoration: none;\r\n    background: #ffffff;\r\n    border: 3px solid #000000;\r\n    border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\r\n    box-shadow: 4px 4px 0px #000000;\r\n    cursor: pointer;\r\n    transition: all 0.2s ease-in-out;\r\n    text-align: center;\r\n    white-space: nowrap;\r\n  }\r\n\r\n  .db-btn:hover {\r\n    transform: translate(-2px, -2px) rotate(-1deg);\r\n    box-shadow: 6px 6px 0px #000000;\r\n    background: #f4f4f4;\r\n  }\r\n\r\n  .db-btn:active {\r\n    transform: translate(2px, 2px);\r\n    box-shadow: 2px 2px 0px #000000;\r\n  }\r\n\r\n  .db-btn-copy {\r\n    width: 100%;\r\n    background: #fff;\r\n  }\r\n\r\n  \/* KARAKTER ASET DENGAN GERAKAN STATIK (FLOATING IN PLACE) *\/\r\n  .db-hero-char {\r\n    position: absolute;\r\n    width: 160px; \/* Ukuran gambar karakter *\/\r\n    height: auto;\r\n    top: -75px;  \/* Muncul sedikit di atas kartu kanan *\/\r\n    right: 20px;\r\n    z-index: 5;\r\n    pointer-events: none; \/* Tidak mengganggu klik elemen di bawahnya *\/\r\n    \/* Animasi Gerak Statik: Melayang naik-turun dan miring halus di tempat *\/\r\n    animation: staticFloat 3.5s ease-in-out infinite alternate;\r\n  }\r\n\r\n  \/* KEYFRAMES ANIMASI GERAK STATIK *\/\r\n  @keyframes staticFloat {\r\n    0% {\r\n      transform: translateY(0px) rotate(-4deg);\r\n    }\r\n    50% {\r\n      transform: translateY(-12px) rotate(3deg) scale(1.02);\r\n    }\r\n    100% {\r\n      transform: translateY(-5px) rotate(-2deg);\r\n    }\r\n  }\r\n\r\n  \/* TOAST NOTIFICATION *\/\r\n  #db-toast {\r\n    visibility: hidden;\r\n    min-width: 220px;\r\n    background-color: #000;\r\n    color: #fff;\r\n    text-align: center;\r\n    border-radius: 10px;\r\n    padding: 12px;\r\n    position: fixed;\r\n    z-index: 99999;\r\n    bottom: 30px;\r\n    left: 50%;\r\n    transform: translateX(-50%);\r\n    font-family: 'Patrick Hand', cursive;\r\n    font-size: 1.25rem;\r\n    border: 2.5px solid #fff;\r\n    box-shadow: 4px 4px 0px rgba(0,0,0,0.3);\r\n  }\r\n\r\n  #db-toast.show {\r\n    visibility: visible;\r\n    animation: dbfadein 0.4s, dbfadeout 0.4s 2.6s;\r\n  }\r\n\r\n  @keyframes dbfadein {\r\n    from { bottom: 0; opacity: 0; }\r\n    to { bottom: 30px; opacity: 1; }\r\n  }\r\n\r\n  @keyframes dbfadeout {\r\n    from { bottom: 30px; opacity: 1; }\r\n    to { bottom: 0; opacity: 0; }\r\n  }\r\n\r\n  \/* RESPONSIVE DESIGN (MOBILE FRIENDLY) *\/\r\n  @media (max-width: 850px) {\r\n    .db-hero-container {\r\n      flex-direction: column;\r\n      gap: 35px;\r\n    }\r\n\r\n    .db-hero-left, .db-hero-right {\r\n      width: 100%;\r\n      padding: 25px 20px;\r\n    }\r\n\r\n    .db-hero-left h1 {\r\n      font-size: 2.2rem;\r\n    }\r\n\r\n    .db-btn-group {\r\n      flex-direction: column;\r\n    }\r\n\r\n    .db-btn {\r\n      width: 100%;\r\n    }\r\n\r\n    \/* Penyesuaian Karakter di Mobile *\/\r\n    .db-hero-char {\r\n      width: 110px;\r\n      top: -55px;\r\n      right: 10px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- HERO SECTION HTML -->\r\n<div class=\"db-hero-wrapper\">\r\n  <div class=\"db-hero-container\">\r\n    \r\n    <!-- BAGIAN KIRI (NARRATIVE \/ TEKS HERO) -->\r\n    <div class=\"db-hero-left\">\r\n      <h1>Spontaneous. Unfiltered. Pure Presence.<\/h1>\r\n      <p>DoodleBob enters the blockchain space not to follow rules or trends, but to bring a fresh, unpredictable energy to an otherwise predictable timeline.<\/p>\r\n      \r\n      <div class=\"db-btn-group\">\r\n        <a href=\"https:\/\/x.com\/puredoodlebob\" target=\"_blank\" rel=\"noopener\" class=\"db-btn\">Join Community<\/a>\r\n        <a href=\"YOUR-LINK\" target=\"_blank\" rel=\"noopener\" class=\"db-btn\">Live Chart<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- BAGIAN KANAN (CONTRACT ADDRESS & ACTION) -->\r\n    <div class=\"db-hero-right\">\r\n      <!-- KARAKTER DENGAN GERAKAN STATIK (FLOATING IN PLACE) -->\r\n      <img decoding=\"async\" src=\"https:\/\/doodlebob.lol\/wp-content\/uploads\/2026\/07\/ASET.png\" alt=\"DoodleBob Character\" class=\"db-hero-char\">\r\n\r\n      <h3>Official Contract<\/h3>\r\n      \r\n      <div class=\"db-ca-box\">\r\n        <!-- Gantilah alamat di bawah dengan CA asli milikmu -->\r\n        <div class=\"db-ca-text\" id=\"dbCaText\">0x0000000000000000000000000000000000000000<\/div>\r\n        <button class=\"db-btn db-btn-copy\" onclick=\"copyHeroCA()\">Copy Contract Address<\/button>\r\n      <\/div>\r\n\r\n      <a href=\"https:\/\/swap.pump.fun\/?input=So11111111111111111111111111111111111111112&output=[CA]\" target=\"_blank\" rel=\"noopener\" class=\"db-btn\" style=\"background: #fff; position: relative; z-index: 10;\">Buy $SCRIBBLE<\/a>\r\n    <\/div>\r\n\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- NOTIFIKASI TOAST SCRIPT -->\r\n<div id=\"db-toast\">Contract Address Copied!<\/div>\r\n\r\n<script>\r\n  function copyHeroCA() {\r\n    \/\/ Mengambil nilai teks CA dari elemen #dbCaText secara presisi\r\n    var caValue = document.getElementById(\"dbCaText\").innerText.trim();\r\n\r\n    if (navigator.clipboard && window.isSecureContext) {\r\n      navigator.clipboard.writeText(caValue).then(function() {\r\n        showHeroToast(\"Contract Address Copied!\");\r\n      }).catch(function(err) {\r\n        fallbackCopyText(caValue);\r\n      });\r\n    } else {\r\n      fallbackCopyText(caValue);\r\n    }\r\n  }\r\n\r\n  function fallbackCopyText(text) {\r\n    var textArea = document.createElement(\"textarea\");\r\n    textArea.value = text;\r\n    textArea.style.position = \"fixed\";\r\n    textArea.style.left = \"-9999px\";\r\n    document.body.appendChild(textArea);\r\n    textArea.focus();\r\n    textArea.select();\r\n    try {\r\n      document.execCommand('copy');\r\n      showHeroToast(\"Contract Address Copied!\");\r\n    } catch (err) {\r\n      showHeroToast(\"Failed to copy!\");\r\n    }\r\n    document.body.removeChild(textArea);\r\n  }\r\n\r\n  function showHeroToast(message) {\r\n    var toast = document.getElementById(\"db-toast\");\r\n    toast.innerText = message;\r\n    toast.className = \"show\";\r\n    setTimeout(function() { \r\n      toast.className = toast.className.replace(\"show\", \"\"); \r\n    }, 3000);\r\n  }\r\n<\/script>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-455c798 e-flex e-con-boxed e-con e-parent\" data-id=\"455c798\" data-element_type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-2aa5902 e-con-full e-flex e-con e-child\" data-id=\"2aa5902\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-ec0edf5 elementor-widget elementor-widget-html\" data-id=\"ec0edf5\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<!-- Import Google Fonts (Schoolbell & Patrick Hand) -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Patrick+Hand&family=Schoolbell&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n  \/* RESET & BASIC SETUP *\/\r\n  .db-join-wrapper * {\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n  }\r\n\r\n  .db-join-wrapper {\r\n    width: 100%;\r\n    background: transparent;\r\n    padding: 100px 20px 40px 20px; \r\n    font-family: 'Patrick Hand', cursive;\r\n    position: relative;\r\n    overflow: visible !important; \r\n  }\r\n\r\n  .db-join-container {\r\n    max-width: 850px;\r\n    margin: 0 auto;\r\n    position: relative;\r\n    z-index: 2;\r\n  }\r\n\r\n  \/* MAIN CARD JOIN US *\/\r\n  .db-join-card {\r\n    background: rgba(255, 255, 255, 0.95);\r\n    border: 4px solid #000;\r\n    padding: 50px 30px;\r\n    border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\r\n    box-shadow: 8px 8px 0px #000;\r\n    text-align: center;\r\n    position: relative;\r\n  }\r\n\r\n  .db-join-card h2 {\r\n    font-family: 'Schoolbell', cursive;\r\n    font-size: 3.2rem;\r\n    color: #000;\r\n    margin-bottom: 15px;\r\n    line-height: 1.1;\r\n  }\r\n\r\n  .db-join-card p {\r\n    font-size: 1.45rem;\r\n    color: #1a1a1a;\r\n    line-height: 1.5;\r\n    max-width: 600px;\r\n    margin: 0 auto 30px auto;\r\n  }\r\n\r\n  \/* BUTTON GROUP *\/\r\n  .db-join-buttons {\r\n    display: flex;\r\n    justify-content: center;\r\n    gap: 15px;\r\n    flex-wrap: wrap;\r\n    position: relative;\r\n    z-index: 30;\r\n  }\r\n\r\n  .db-join-btn {\r\n    display: inline-block;\r\n    padding: 12px 28px;\r\n    font-family: 'Patrick Hand', cursive;\r\n    font-size: 1.3rem;\r\n    font-weight: bold;\r\n    color: #000;\r\n    text-decoration: none;\r\n    background: #ffffff;\r\n    border: 3px solid #000000;\r\n    border-radius: 255px 15px 225px 15px\/15px 225px 15px 255px;\r\n    box-shadow: 4px 4px 0px #000000;\r\n    cursor: pointer;\r\n    transition: all 0.2s ease-in-out;\r\n  }\r\n\r\n  .db-join-btn:hover {\r\n    transform: translate(-3px, -3px) rotate(-1.5deg);\r\n    box-shadow: 7px 7px 0px #000000;\r\n    background: #f4f4f4;\r\n  }\r\n\r\n  \/* COPYRIGHT SIMPEL *\/\r\n  .db-simple-copy {\r\n    text-align: center;\r\n    font-family: 'Patrick Hand', cursive;\r\n    font-size: 1.15rem;\r\n    color: #000;\r\n    margin-top: 30px;\r\n    position: relative;\r\n    z-index: 30;\r\n    opacity: 0.85;\r\n  }\r\n\r\n  \/* KARAKTER UTUH DI DEPAN KONTEN *\/\r\n  .db-char-left,\r\n  .db-char-right {\r\n    position: absolute;\r\n    width: 260px;\r\n    height: auto;\r\n    z-index: 20;\r\n    pointer-events: none;\r\n  }\r\n\r\n  \/* KARAKTER KIRI: MASUK & KELUAR SECARA UTUH DARI KIRI *\/\r\n  .db-char-left {\r\n    bottom: 30px;\r\n    left: 0;\r\n    animation: fullPeekLeft 6s cubic-bezier(0.4, 0, 0.2, 1) infinite;\r\n  }\r\n\r\n  \/* KARAKTER KANAN: MASUK & KELUAR SECARA UTUH DARI BAWAH *\/\r\n  .db-char-right {\r\n    bottom: 30px;\r\n    right: 0;\r\n    transform: scaleX(-1);\r\n    animation: fullPeekBottom 5s ease-in-out infinite;\r\n  }\r\n\r\n  \/* KEYFRAMES ANIMASI *\/\r\n  @keyframes fullPeekLeft {\r\n    0% {\r\n      transform: translateX(-120%) rotate(-12deg); \r\n    }\r\n    35% {\r\n      transform: translateX(20%) rotate(4deg); \r\n    }\r\n    55% {\r\n      transform: translateX(10%) translateY(-15px) rotate(-2deg); \r\n    }\r\n    70% {\r\n      transform: translateX(25%) rotate(6deg);\r\n    }\r\n    100% {\r\n      transform: translateX(-120%) rotate(-12deg); \r\n    }\r\n  }\r\n\r\n  @keyframes fullPeekBottom {\r\n    0% {\r\n      transform: scaleX(-1) translateY(140%) rotate(8deg); \r\n    }\r\n    40% {\r\n      transform: scaleX(-1) translateY(-15%) rotate(-5deg); \r\n    }\r\n    65% {\r\n      transform: scaleX(-1) translateY(-5%) rotate(3deg); \r\n    }\r\n    100% {\r\n      transform: scaleX(-1) translateY(140%) rotate(8deg); \r\n    }\r\n  }\r\n\r\n  \/* RESPONSIVE DESIGN FOR MOBILE *\/\r\n  @media (max-width: 850px) {\r\n    .db-char-left,\r\n    .db-char-right {\r\n      width: 170px;\r\n    }\r\n  }\r\n\r\n  @media (max-width: 600px) {\r\n    .db-join-wrapper {\r\n      padding: 60px 15px 30px 15px;\r\n    }\r\n\r\n    .db-join-card {\r\n      padding: 35px 20px;\r\n    }\r\n\r\n    .db-join-card h2 {\r\n      font-size: 2.2rem;\r\n    }\r\n\r\n    .db-join-card p {\r\n      font-size: 1.2rem;\r\n    }\r\n\r\n    .db-join-buttons {\r\n      flex-direction: column;\r\n    }\r\n\r\n    .db-join-btn {\r\n      width: 100%;\r\n    }\r\n\r\n    .db-char-left,\r\n    .db-char-right {\r\n      width: 130px;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<!-- SECTION JOIN US HTML -->\r\n<div class=\"db-join-wrapper\">\r\n  \r\n  <!-- Karakter Bergerak Kiri (Keluar-masuk utuh dari kiri) -->\r\n  <img decoding=\"async\" src=\"https:\/\/doodlebob.lol\/wp-content\/uploads\/2026\/07\/ASET.png\" alt=\"DoodleBob Left\" class=\"db-char-left\">\r\n\r\n  <!-- Card Konten Tengah -->\r\n  <div class=\"db-join-container\">\r\n    <div class=\"db-join-card\">\r\n      <h2>Join The Chaos<\/h2>\r\n      <p>Step into the world of DoodleBob. No roadmap promises, no complex jargon\u2014just pure spontaneous energy on the blockchain.<\/p>\r\n      \r\n      <div class=\"db-join-buttons\">\r\n        <a href=\"YOUR-LINK\" target=\"_blank\" rel=\"noopener\" class=\"db-join-btn\">Telegram<\/a>\r\n        <a href=\"YOUR-LINK\" target=\"_blank\" rel=\"noopener\" class=\"db-join-btn\">X \/ Twitter<\/a>\r\n        <a href=\"YOUR-LINK\" target=\"_blank\" rel=\"noopener\" class=\"db-join-btn\">DexScreener<\/a>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <!-- COPYRIGHT SIMPEL -->\r\n    <div class=\"db-simple-copy\">\r\n      \u00a9 2026 $SCRIBBLE. All rights reserved.\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <!-- Karakter Bergerak Kanan (Keluar-masuk utuh dari bawah) -->\r\n  <img decoding=\"async\" src=\"https:\/\/doodlebob.lol\/wp-content\/uploads\/2026\/07\/ASET.png\" alt=\"DoodleBob Right\" class=\"db-char-right\">\r\n\r\n<\/div>\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\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>$SCRIBBLE About Character Tokenomics Roadmap Buy $SCRIBBLE &times; Title Spontaneous. Unfiltered. Pure Presence. DoodleBob enters the blockchain space not to follow rules or trends, but to bring a fresh, unpredictable energy to an otherwise predictable timeline. Join Community Live Chart Official Contract 0x0000000000000000000000000000000000000000 Copy Contract Address Buy $SCRIBBLE Contract Address Copied! Join The Chaos Step [&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-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/doodlebob.lol\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/doodlebob.lol\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/doodlebob.lol\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/doodlebob.lol\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/doodlebob.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":13,"href":"https:\/\/doodlebob.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"predecessor-version":[{"id":30,"href":"https:\/\/doodlebob.lol\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions\/30"}],"wp:attachment":[{"href":"https:\/\/doodlebob.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}