ALEX ($ALEX) - Hero Ecosystem<\/title>\r\n \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=Architects+Daughter&family=Erica+One&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* --- DESIGN SYSTEM & TOKENS --- *\/\r\n :root {\r\n --font-title: 'Erica One', cursive;\r\n --font-desc: 'Architects Daughter', cursive;\r\n --color-primary: #2e7d32;\r\n --color-primary-hover: #1b5e20;\r\n --color-accent: #ffeb3b; \r\n --color-accent-hover: #fff176;\r\n --color-dark: #000000;\r\n --color-white: #ffffff;\r\n --cartoon-border: 4px solid #000000;\r\n --cartoon-shadow: 6px 6px 0px #000000;\r\n --cartoon-shadow-hover: 2px 2px 0px #000000;\r\n \r\n \/* Swamp Metallic Gradient *\/\r\n --gradient-swamp: linear-gradient(180deg, #aeea00 0%, #4caf50 50%, #1b5e20 100%);\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html, body {\r\n width: 100%;\r\n overflow-x: hidden;\r\n background-color: #0b1d0e; \r\n color: var(--color-white);\r\n font-family: var(--font-desc);\r\n -webkit-text-size-adjust: 100%;\r\n }\r\n\r\n h1, h2, h3, .font-title {\r\n font-family: var(--font-title);\r\n letter-spacing: 1px;\r\n line-height: 1.15;\r\n }\r\n\r\n \/* --- NAVIGATION BAR (PRO-FLEXIBLE & FLUID) --- *\/\r\n header {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n z-index: 100;\r\n padding: clamp(15px, 3vw, 30px) 5%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: transparent;\r\n gap: 20px;\r\n }\r\n\r\n .logo-area {\r\n background: var(--color-accent); \r\n color: var(--color-dark);\r\n padding: 10px clamp(15px, 2.5vw, 24px);\r\n border: var(--cartoon-border);\r\n box-shadow: var(--cartoon-shadow);\r\n transform: rotate(-2deg);\r\n flex-shrink: 0;\r\n max-width: 100%;\r\n }\r\n\r\n .logo-area h2 {\r\n font-size: clamp(1.1rem, 3.5vw, 1.6rem);\r\n text-shadow: none;\r\n color: var(--color-dark);\r\n white-space: nowrap;\r\n }\r\n\r\n .nav-socials {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n justify-content: flex-end;\r\n max-width: 100%;\r\n }\r\n\r\n .btn-social {\r\n background: var(--color-white);\r\n color: var(--color-dark);\r\n text-decoration: none;\r\n padding: clamp(10px, 1.5vw, 12px) clamp(16px, 2vw, 20px);\r\n border: var(--cartoon-border);\r\n box-shadow: var(--cartoon-shadow);\r\n font-family: var(--font-title);\r\n font-size: clamp(0.75rem, 2vw, 0.9rem);\r\n font-weight: normal;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-social:hover {\r\n transform: translate(4px, 4px);\r\n box-shadow: var(--cartoon-shadow-hover);\r\n background-color: var(--color-accent);\r\n }\r\n\r\n .btn-social.btn-primary-action {\r\n background-color: var(--color-accent); \r\n }\r\n \r\n .btn-social.btn-primary-action:hover {\r\n background-color: var(--color-white);\r\n }\r\n\r\n \/* --- HERO SECTION (CLEAN & ANTI-OVERFLOW CONTROL) --- *\/\r\n #section-hero-clean {\r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n background: transparent; \r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n padding: 160px 5% 60px 5%; \r\n }\r\n\r\n .hero-clean-content {\r\n max-width: 750px;\r\n width: 100%;\r\n text-align: left;\r\n z-index: 5;\r\n padding: 10px 0;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .hero-clean-content h1 {\r\n background: var(--gradient-swamp);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n font-size: clamp(1.8rem, 6.5vw, 3.8rem);\r\n margin-bottom: 20px;\r\n overflow-wrap: break-word;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n hyphens: auto;\r\n filter: drop-shadow(4px 4px 0px var(--color-dark));\r\n }\r\n\r\n .hero-clean-content p {\r\n font-size: clamp(1rem, 3.2vw, 1.35rem);\r\n line-height: 1.55;\r\n font-weight: bold;\r\n color: var(--color-white);\r\n margin-bottom: 35px;\r\n text-shadow: 2px 2px 0px var(--color-dark), 3px 3px 0px rgba(255, 235, 59, 0.15), 0px 0px 8px rgba(0,0,0,0.8); \r\n }\r\n\r\n .hero-action-area {\r\n display: flex;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n width: 100%;\r\n }\r\n\r\n \/* --- ULTRA RESPONSIVE ADAPTIVE DESIGN --- *\/\r\n @media (max-width: 820px) {\r\n header {\r\n position: relative;\r\n padding: 20px 5% 0 5%;\r\n flex-direction: column;\r\n justify-content: center;\r\n text-align: center;\r\n gap: 16px;\r\n }\r\n\r\n .nav-socials {\r\n justify-content: center;\r\n width: 100%;\r\n gap: 8px;\r\n }\r\n\r\n #section-hero-clean {\r\n padding-top: 40px;\r\n min-height: calc(100vh - 160px);\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .hero-clean-content {\r\n text-align: center;\r\n align-items: center;\r\n }\r\n\r\n .hero-action-area {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n header {\r\n padding: 15px 4% 0 4%;\r\n }\r\n\r\n \/* Tombol Nav Sosial Dibuat Vertikal Sejajar Sempurna *\/\r\n .nav-socials {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n gap: 10px;\r\n }\r\n\r\n .btn-social {\r\n padding: 14px 20px;\r\n width: 100%;\r\n font-size: 0.9rem;\r\n box-shadow: 4px 4px 0px #000000;\r\n justify-content: center;\r\n }\r\n\r\n .btn-social:hover {\r\n transform: translate(2px, 2px);\r\n box-shadow: var(--cartoon-shadow-hover);\r\n }\r\n \r\n .logo-area {\r\n transform: none;\r\n width: 100%;\r\n text-align: center;\r\n border-width: 3px;\r\n box-shadow: 4px 4px 0px #000000;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .hero-clean-content h1 {\r\n filter: drop-shadow(3px 3px 0px var(--color-dark));\r\n margin-bottom: 16px;\r\n }\r\n \r\n .hero-clean-content p {\r\n margin-bottom: 28px;\r\n }\r\n\r\n \/* Tombol Utama CTA Ikut Vertikal Sejajar *\/\r\n .hero-action-area {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .hero-action-area .btn-primary-action {\r\n width: 100%;\r\n max-width: 100% !important;\r\n box-shadow: 4px 4px 0px #000000;\r\n padding: 16px 20px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <header>\r\n <div class=\"logo-area\">\r\n <h2>ALEX ($ALEX)<\/h2>\r\n <\/div>\r\n <div class=\"nav-socials\">\r\n <a href=\"https:\/\/x.com\/thealex_smile\" target=\"_blank\" class=\"btn-social\">X \/ TWITTER<\/a>\r\n <a href=\"https:\/\/t.me\/thealex_smile\" target=\"_blank\" class=\"btn-social\">TELEGRAM<\/a>\r\n <a href=\"https:\/\/dexscreener.com\/solana\/DgubzCb3hfrDQzQNZwqTGvEYCBmm3gJoZXzKmqRapump\" target=\"_blank\" class=\"btn-social\">DEXSCREENER<\/a>\r\n <\/div>\r\n <\/header>\r\n\r\n <section id=\"section-hero-clean\">\r\n <div class=\"hero-clean-content\">\r\n <h1>SNAP UP YOUR OPPORTUNITY WITH ALEX!<\/h1>\r\n <p>Who says the swamp is just for laying low? Meet Alex, the trendiest crocodile on the Solana network, ready to shake up the crypto world. Armed with a brilliant smile from his iconic braces and backed by a rock-solid community, we are ready to swim straight to the top!<\/p>\r\n \r\n <div class=\"hero-action-area\">\r\n <a href=\"https:\/\/swap.pump.fun\/?input=So11111111111111111111111111111111111111112&output=DgubzCb3hfrDQzQNZwqTGvEYCBmm3gJoZXzKmqRapump\" target=\"_blank\" class=\"btn-social btn-primary-action\" style=\"font-size: 1.1rem; padding: 16px 32px; width: 100%; max-width: 340px;\">\r\n LAUNCH PUMP.FUN\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\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-8af5afa e-flex e-con-boxed e-con e-parent\" data-id=\"8af5afa\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-31a08fa e-con-full e-flex e-con e-child\" data-id=\"31a08fa\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83dcb1c elementor-widget elementor-widget-html\" data-id=\"83dcb1c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n \/* --- SECTION 2 SPECIFIC STYLES --- *\/\r\n #section-swamp {\r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n background: transparent;\r\n padding: clamp(60px, 8vw, 100px) 5% 40px 5%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: clamp(30px, 5vw, 50px);\r\n }\r\n\r\n .swamp-asset-mascot {\r\n width: clamp(200px, 25vw, 280px);\r\n height: auto;\r\n filter: drop-shadow(6px 6px 0px #000000);\r\n animation: swampBounce 3s infinite ease-in-out;\r\n user-select: none;\r\n }\r\n\r\n @keyframes swampBounce {\r\n 0%, 100% { transform: translateY(0) rotate(0deg); }\r\n 50% { transform: translateY(-15px) rotate(2deg); }\r\n }\r\n\r\n .interactive-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 24px;\r\n max-width: 1100px;\r\n width: 100%;\r\n }\r\n\r\n .pop-card {\r\n background: #ffffff;\r\n color: #000000;\r\n border: var(--cartoon-border);\r\n box-shadow: var(--cartoon-shadow);\r\n padding: 30px 20px;\r\n border-radius: 16px;\r\n cursor: pointer;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n min-height: 240px;\r\n transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;\r\n }\r\n\r\n .pop-card:hover {\r\n transform: scale(1.03) translateY(-4px);\r\n background: var(--color-accent) !important;\r\n box-shadow: 8px 8px 0px #000000;\r\n }\r\n\r\n .pop-card h3 {\r\n font-size: 1.6rem;\r\n color: var(--color-dark);\r\n margin-bottom: 12px;\r\n text-shadow: none;\r\n }\r\n\r\n .pop-card p {\r\n font-size: 1.1rem;\r\n font-weight: bold;\r\n color: #333333;\r\n line-height: 1.4;\r\n flex-grow: 1;\r\n }\r\n\r\n .pop-card span {\r\n display: inline-block;\r\n margin-top: 20px;\r\n background: var(--color-accent);\r\n color: #000000;\r\n padding: 6px 20px;\r\n border: 3px solid #000000;\r\n font-weight: bold;\r\n border-radius: 20px;\r\n font-family: var(--font-title);\r\n font-size: 0.85rem;\r\n box-shadow: 2px 2px 0px #000000;\r\n transition: 0.1s ease;\r\n }\r\n \r\n .pop-card:hover span {\r\n background-color: #ffffff;\r\n transform: translate(1px, 1px);\r\n box-shadow: 1px 1px 0px #000000;\r\n }\r\n\r\n \/* --- SMART CONTRACT UTILITY BOX --- *\/\r\n .ca-box {\r\n background: #ffffff;\r\n color: #000000;\r\n border: var(--cartoon-border);\r\n padding: 25px clamp(15px, 4vw, 35px);\r\n width: 100%;\r\n max-width: 700px;\r\n border-radius: 20px;\r\n text-align: center;\r\n box-shadow: var(--cartoon-shadow);\r\n }\r\n\r\n .ca-title {\r\n color: var(--color-dark);\r\n margin-bottom: 15px;\r\n font-size: 1.5rem;\r\n font-family: var(--font-title);\r\n }\r\n\r\n .ca-input-container {\r\n display: flex;\r\n gap: 12px;\r\n width: 100%;\r\n }\r\n\r\n .ca-text {\r\n flex: 1;\r\n background: #111111;\r\n border: 3px solid #000000;\r\n color: #00ffcc;\r\n padding: 12px;\r\n font-family: var(--font-desc);\r\n font-size: clamp(0.9rem, 2.5vw, 1.1rem);\r\n text-align: center;\r\n border-radius: 10px;\r\n font-weight: bold;\r\n min-width: 0;\r\n }\r\n\r\n .btn-copy {\r\n background: var(--color-primary);\r\n color: #ffffff;\r\n border: 3px solid #000000;\r\n font-family: var(--font-title);\r\n padding: 0 24px;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n font-size: 1rem;\r\n box-shadow: 4px 4px 0px #000000;\r\n transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-copy:hover {\r\n background: var(--color-primary-hover);\r\n transform: translate(2px, 2px);\r\n box-shadow: var(--cartoon-shadow-hover);\r\n }\r\n\r\n .swamp-copyright {\r\n margin-top: 30px;\r\n text-align: center;\r\n font-weight: bold;\r\n font-size: clamp(0.9rem, 2vw, 1.1rem);\r\n color: var(--color-white);\r\n text-shadow: 2px 2px 0px #000000;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* --- INTERACTIVE CARTOON POPUP WINDOW COMPONENT --- *\/\r\n .popup-modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background: rgba(11, 29, 14, 0.85);\r\n z-index: 99999;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .popup-modal.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .popup-content {\r\n background: #ffffff;\r\n color: #000000;\r\n border: var(--cartoon-border);\r\n box-shadow: 10px 10px 0px var(--color-accent);\r\n max-width: 600px;\r\n width: 90%;\r\n padding: clamp(25px, 5vw, 45px);\r\n border-radius: 24px;\r\n text-align: center;\r\n position: relative;\r\n transform: scale(0.7);\r\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n .popup-modal.active .popup-content {\r\n transform: scale(1);\r\n }\r\n\r\n .close-popup {\r\n position: absolute;\r\n top: -20px;\r\n right: -20px;\r\n background: #f44336;\r\n color: #ffffff;\r\n border: var(--cartoon-border);\r\n width: 45px;\r\n height: 45px;\r\n font-family: var(--font-title);\r\n font-size: 1.4rem;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n box-shadow: 3px 3px 0 #000000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.1s;\r\n }\r\n\r\n .close-popup:hover {\r\n background-color: #b71c1c;\r\n transform: scale(1.05);\r\n }\r\n\r\n .popup-inner-title {\r\n color: var(--color-primary);\r\n margin-bottom: 20px;\r\n font-size: clamp(1.5rem, 4vw, 2rem);\r\n text-shadow: 2px 2px 0px var(--color-accent);\r\n }\r\n\r\n .popup-inner-text {\r\n font-size: clamp(1rem, 3vw, 1.25rem);\r\n line-height: 1.6;\r\n font-weight: bold;\r\n color: #222222;\r\n text-align: left;\r\n }\r\n\r\n .popup-inner-text ol {\r\n margin-left: 20px;\r\n margin-top: 10px;\r\n }\r\n\r\n .popup-inner-text li {\r\n margin-bottom: 12px;\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .ca-input-container {\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n .btn-copy {\r\n padding: 14px 20px;\r\n width: 100%;\r\n justify-content: center;\r\n box-shadow: 4px 4px 0px #000000;\r\n }\r\n\r\n .btn-copy:hover {\r\n transform: translate(2px, 2px);\r\n box-shadow: var(--cartoon-shadow-hover);\r\n }\r\n \r\n .pop-card {\r\n min-height: 220px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section id=\"section-swamp\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/thealex.lol\/wp-content\/uploads\/2026\/06\/ASET.png\" alt=\"Alex Mascot\" class=\"swamp-asset-mascot\">\r\n\r\n <div class=\"interactive-grid\">\r\n \r\n <div class=\"pop-card\" onclick=\"openPopup('about')\">\r\n <h3>ABOUT ALEX<\/h3>\r\n <p>Discover the story behind the sharpest sparkling smile in Web3.<\/p>\r\n <span>CLICK TO OPEN<\/span>\r\n <\/div>\r\n\r\n <div class=\"pop-card\" onclick=\"openPopup('buy')\">\r\n <h3>HOW TO BUY<\/h3>\r\n <p>Quick, safe steps to secure your slot before the big wave hits the swamp.<\/p>\r\n <span>CLICK TO OPEN<\/span>\r\n <\/div>\r\n\r\n <div class=\"pop-card\" onclick=\"openPopup('community')\">\r\n <h3>THE COLONY<\/h3>\r\n <p>See how our organic community drives momentum straight to the top.<\/p>\r\n <span>CLICK TO OPEN<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"ca-box\">\r\n <div class=\"ca-title\">OFFICIAL CONTRACT ADDRESS $ALEX<\/div>\r\n <div class=\"ca-input-container\">\r\n <input type=\"text\" class=\"ca-text\" id=\"caTokenInput\" value=\"DgubzCb3hfrDQzQNZwqTGvEYCBmm3gJoZXzKmqRapump\" readonly>\r\n <button class=\"btn-copy\" id=\"copyBtn\" onclick=\"copyContractAddress()\">COPY CA<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"swamp-copyright\">\r\n <p>\u00a9 2026 ALEX Project. Powered by Solana's Finest Croc Colony.<\/p>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<div class=\"popup-modal\" id=\"infoPopup\">\r\n <div class=\"popup-content\">\r\n <button class=\"close-popup\" onclick=\"closePopup()\">X<\/button>\r\n <h2 id=\"popupTitle\" class=\"popup-inner-title\">TITLE<\/h2>\r\n <div id=\"popupBody\" class=\"popup-inner-text\">Content goes here...<\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const contentData = {\r\n about: {\r\n title: \"A SPARKLING SMILE, HUNTER'S GRIT!\",\r\n text: \"Don\u2019t let his slightly puzzled look fool you when he first got those braces on. Behind that steel wire grill, Alex is a master opportunity hunter who never lets go of his target! Born in the heart of the bustling Solana ecosystem, Alex ($ALEX) brings a fresh wave of positive energy, transparency, and humor to the space. We aren't just another passing trend. Driven by an organic, tight-knit colony, Alex stands as a symbol that a crypto project can be remarkably fun while maintaining a logical, well-mapped foundation for growth. It\u2019s time to hop in and swim with the right current!\"\r\n },\r\n buy: {\r\n title: \"QUICK 4-STEP SWAMP GUIDE\",\r\n text: `<ol>\r\n <li><strong>Create Wallet:<\/strong> Download Phantom or Solflare app.<\/li>\r\n <li><strong>Get SOL:<\/strong> Buy SOL from an exchange and send it to your wallet.<\/li>\r\n <li><strong>Connect Platform:<\/strong> Open Pump.fun or PumpSwap in your wallet browser.<\/li>\r\n <li><strong>Swap for $ALEX:<\/strong> Paste our Contract Address, choose the amount, and click Buy!<\/li>\r\n <\/ol>`\r\n },\r\n community: {\r\n title: \"JOIN THE SWAMP COLONY\",\r\n text: \"The true backbone of Alex is our vibrant and united community. There are no vague promises or directionless talk here; everyone moves forward together through positive, transparent discussions and collective ecosystem excitement. In this swamp colony, every single member contributes to pushing the momentum forward organically. Jump into our official channels, share the viral memetic culture, participate in community events, and let's conquer the Solana network together!\"\r\n }\r\n };\r\n\r\n const modal = document.getElementById('infoPopup');\r\n const pTitle = document.getElementById('popupTitle');\r\n const pBody = document.getElementById('popupBody');\r\n\r\n function openPopup(key) {\r\n if(contentData[key]) {\r\n pTitle.innerHTML = contentData[key].title;\r\n pBody.innerHTML = contentData[key].text;\r\n modal.classList.add('active');\r\n document.body.style.overflow = 'hidden'; \r\n }\r\n }\r\n\r\n function closePopup() {\r\n modal.classList.remove('active');\r\n document.body.style.overflow = ''; \r\n }\r\n\r\n window.onclick = function(event) {\r\n if (event.target == modal) {\r\n closePopup();\r\n }\r\n }\r\n\r\n \/* --- SISTEM COPY TERBARU (DIJAMIN LANGSUNG MENYALIN ISI INPUT) --- *\/\r\n function copyContractAddress() {\r\n const copyText = document.getElementById(\"caTokenInput\");\r\n const btn = document.getElementById(\"copyBtn\");\r\n const textToCopy = copyText.value.trim();\r\n\r\n \/\/ Menggunakan Clipboard API Modern\r\n if (navigator.clipboard && window.isSecureContext) {\r\n navigator.clipboard.writeText(textToCopy).then(() => {\r\n showSuccessState(btn);\r\n }).catch(err => {\r\n fallbackCopyAction(textToCopy, btn);\r\n });\r\n } else {\r\n fallbackCopyAction(textToCopy, btn);\r\n }\r\n }\r\n\r\n function fallbackCopyAction(text, btn) {\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = text;\r\n textArea.style.position = \"fixed\";\r\n textArea.style.top = \"-999999px\";\r\n textArea.style.left = \"-999999px\";\r\n document.body.appendChild(textArea);\r\n \r\n textArea.focus();\r\n textArea.select();\r\n textArea.setSelectionRange(0, 99999); \r\n\r\n try {\r\n const successful = document.execCommand('copy');\r\n if(successful) {\r\n showSuccessState(btn);\r\n } else {\r\n alert(\"Failed to copy. Please copy the text manually.\");\r\n }\r\n } catch (err) {\r\n alert(\"Failed to copy. Please copy the text manually.\");\r\n }\r\n \r\n document.body.removeChild(textArea);\r\n }\r\n\r\n function showSuccessState(btn) {\r\n const originalText = btn.innerText;\r\n btn.innerText = \"COPIED! \ud83d\udc0a\";\r\n btn.style.backgroundColor = \"#ffeb3b\";\r\n btn.style.color = \"#000000\";\r\n \r\n setTimeout(() => {\r\n btn.innerText = originalText;\r\n btn.style.backgroundColor = \"\";\r\n btn.style.color = \"\";\r\n }, 2000);\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ALEX ($ALEX) – Hero Ecosystem ALEX ($ALEX) X \/ TWITTER TELEGRAM DEXSCREENER SNAP UP YOUR OPPORTUNITY WITH ALEX! Who says the swamp is just for laying low? Meet Alex, the trendiest crocodile on the Solana network, ready to shake up the crypto world. Armed with a brilliant smile from his iconic braces and backed by […]<\/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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thealex.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":37,"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":58,"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/58"}],"wp:attachment":[{"href":"https:\/\/thealex.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\r\n\r\n\r\n \r\n \r\n ALEX ($ALEX) - Hero Ecosystem<\/title>\r\n \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=Architects+Daughter&family=Erica+One&display=swap\" rel=\"stylesheet\">\r\n\r\n <style>\r\n \/* --- DESIGN SYSTEM & TOKENS --- *\/\r\n :root {\r\n --font-title: 'Erica One', cursive;\r\n --font-desc: 'Architects Daughter', cursive;\r\n --color-primary: #2e7d32;\r\n --color-primary-hover: #1b5e20;\r\n --color-accent: #ffeb3b; \r\n --color-accent-hover: #fff176;\r\n --color-dark: #000000;\r\n --color-white: #ffffff;\r\n --cartoon-border: 4px solid #000000;\r\n --cartoon-shadow: 6px 6px 0px #000000;\r\n --cartoon-shadow-hover: 2px 2px 0px #000000;\r\n \r\n \/* Swamp Metallic Gradient *\/\r\n --gradient-swamp: linear-gradient(180deg, #aeea00 0%, #4caf50 50%, #1b5e20 100%);\r\n }\r\n\r\n * {\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n }\r\n\r\n html, body {\r\n width: 100%;\r\n overflow-x: hidden;\r\n background-color: #0b1d0e; \r\n color: var(--color-white);\r\n font-family: var(--font-desc);\r\n -webkit-text-size-adjust: 100%;\r\n }\r\n\r\n h1, h2, h3, .font-title {\r\n font-family: var(--font-title);\r\n letter-spacing: 1px;\r\n line-height: 1.15;\r\n }\r\n\r\n \/* --- NAVIGATION BAR (PRO-FLEXIBLE & FLUID) --- *\/\r\n header {\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n z-index: 100;\r\n padding: clamp(15px, 3vw, 30px) 5%;\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: transparent;\r\n gap: 20px;\r\n }\r\n\r\n .logo-area {\r\n background: var(--color-accent); \r\n color: var(--color-dark);\r\n padding: 10px clamp(15px, 2.5vw, 24px);\r\n border: var(--cartoon-border);\r\n box-shadow: var(--cartoon-shadow);\r\n transform: rotate(-2deg);\r\n flex-shrink: 0;\r\n max-width: 100%;\r\n }\r\n\r\n .logo-area h2 {\r\n font-size: clamp(1.1rem, 3.5vw, 1.6rem);\r\n text-shadow: none;\r\n color: var(--color-dark);\r\n white-space: nowrap;\r\n }\r\n\r\n .nav-socials {\r\n display: flex;\r\n gap: 12px;\r\n flex-wrap: wrap;\r\n justify-content: flex-end;\r\n max-width: 100%;\r\n }\r\n\r\n .btn-social {\r\n background: var(--color-white);\r\n color: var(--color-dark);\r\n text-decoration: none;\r\n padding: clamp(10px, 1.5vw, 12px) clamp(16px, 2vw, 20px);\r\n border: var(--cartoon-border);\r\n box-shadow: var(--cartoon-shadow);\r\n font-family: var(--font-title);\r\n font-size: clamp(0.75rem, 2vw, 0.9rem);\r\n font-weight: normal;\r\n display: inline-flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;\r\n cursor: pointer;\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-social:hover {\r\n transform: translate(4px, 4px);\r\n box-shadow: var(--cartoon-shadow-hover);\r\n background-color: var(--color-accent);\r\n }\r\n\r\n .btn-social.btn-primary-action {\r\n background-color: var(--color-accent); \r\n }\r\n \r\n .btn-social.btn-primary-action:hover {\r\n background-color: var(--color-white);\r\n }\r\n\r\n \/* --- HERO SECTION (CLEAN & ANTI-OVERFLOW CONTROL) --- *\/\r\n #section-hero-clean {\r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n background: transparent; \r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n padding: 160px 5% 60px 5%; \r\n }\r\n\r\n .hero-clean-content {\r\n max-width: 750px;\r\n width: 100%;\r\n text-align: left;\r\n z-index: 5;\r\n padding: 10px 0;\r\n display: flex;\r\n flex-direction: column;\r\n }\r\n\r\n .hero-clean-content h1 {\r\n background: var(--gradient-swamp);\r\n -webkit-background-clip: text;\r\n -webkit-text-fill-color: transparent;\r\n font-size: clamp(1.8rem, 6.5vw, 3.8rem);\r\n margin-bottom: 20px;\r\n overflow-wrap: break-word;\r\n word-wrap: break-word;\r\n word-break: break-word;\r\n hyphens: auto;\r\n filter: drop-shadow(4px 4px 0px var(--color-dark));\r\n }\r\n\r\n .hero-clean-content p {\r\n font-size: clamp(1rem, 3.2vw, 1.35rem);\r\n line-height: 1.55;\r\n font-weight: bold;\r\n color: var(--color-white);\r\n margin-bottom: 35px;\r\n text-shadow: 2px 2px 0px var(--color-dark), 3px 3px 0px rgba(255, 235, 59, 0.15), 0px 0px 8px rgba(0,0,0,0.8); \r\n }\r\n\r\n .hero-action-area {\r\n display: flex;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n width: 100%;\r\n }\r\n\r\n \/* --- ULTRA RESPONSIVE ADAPTIVE DESIGN --- *\/\r\n @media (max-width: 820px) {\r\n header {\r\n position: relative;\r\n padding: 20px 5% 0 5%;\r\n flex-direction: column;\r\n justify-content: center;\r\n text-align: center;\r\n gap: 16px;\r\n }\r\n\r\n .nav-socials {\r\n justify-content: center;\r\n width: 100%;\r\n gap: 8px;\r\n }\r\n\r\n #section-hero-clean {\r\n padding-top: 40px;\r\n min-height: calc(100vh - 160px);\r\n justify-content: center;\r\n align-items: center;\r\n }\r\n\r\n .hero-clean-content {\r\n text-align: center;\r\n align-items: center;\r\n }\r\n\r\n .hero-action-area {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n header {\r\n padding: 15px 4% 0 4%;\r\n }\r\n\r\n \/* Tombol Nav Sosial Dibuat Vertikal Sejajar Sempurna *\/\r\n .nav-socials {\r\n display: flex;\r\n flex-direction: column;\r\n width: 100%;\r\n gap: 10px;\r\n }\r\n\r\n .btn-social {\r\n padding: 14px 20px;\r\n width: 100%;\r\n font-size: 0.9rem;\r\n box-shadow: 4px 4px 0px #000000;\r\n justify-content: center;\r\n }\r\n\r\n .btn-social:hover {\r\n transform: translate(2px, 2px);\r\n box-shadow: var(--cartoon-shadow-hover);\r\n }\r\n \r\n .logo-area {\r\n transform: none;\r\n width: 100%;\r\n text-align: center;\r\n border-width: 3px;\r\n box-shadow: 4px 4px 0px #000000;\r\n margin-bottom: 5px;\r\n }\r\n\r\n .hero-clean-content h1 {\r\n filter: drop-shadow(3px 3px 0px var(--color-dark));\r\n margin-bottom: 16px;\r\n }\r\n \r\n .hero-clean-content p {\r\n margin-bottom: 28px;\r\n }\r\n\r\n \/* Tombol Utama CTA Ikut Vertikal Sejajar *\/\r\n .hero-action-area {\r\n width: 100%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n .hero-action-area .btn-primary-action {\r\n width: 100%;\r\n max-width: 100% !important;\r\n box-shadow: 4px 4px 0px #000000;\r\n padding: 16px 20px;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <header>\r\n <div class=\"logo-area\">\r\n <h2>ALEX ($ALEX)<\/h2>\r\n <\/div>\r\n <div class=\"nav-socials\">\r\n <a href=\"https:\/\/x.com\/thealex_smile\" target=\"_blank\" class=\"btn-social\">X \/ TWITTER<\/a>\r\n <a href=\"https:\/\/t.me\/thealex_smile\" target=\"_blank\" class=\"btn-social\">TELEGRAM<\/a>\r\n <a href=\"https:\/\/dexscreener.com\/solana\/DgubzCb3hfrDQzQNZwqTGvEYCBmm3gJoZXzKmqRapump\" target=\"_blank\" class=\"btn-social\">DEXSCREENER<\/a>\r\n <\/div>\r\n <\/header>\r\n\r\n <section id=\"section-hero-clean\">\r\n <div class=\"hero-clean-content\">\r\n <h1>SNAP UP YOUR OPPORTUNITY WITH ALEX!<\/h1>\r\n <p>Who says the swamp is just for laying low? Meet Alex, the trendiest crocodile on the Solana network, ready to shake up the crypto world. Armed with a brilliant smile from his iconic braces and backed by a rock-solid community, we are ready to swim straight to the top!<\/p>\r\n \r\n <div class=\"hero-action-area\">\r\n <a href=\"https:\/\/swap.pump.fun\/?input=So11111111111111111111111111111111111111112&output=DgubzCb3hfrDQzQNZwqTGvEYCBmm3gJoZXzKmqRapump\" target=\"_blank\" class=\"btn-social btn-primary-action\" style=\"font-size: 1.1rem; padding: 16px 32px; width: 100%; max-width: 340px;\">\r\n LAUNCH PUMP.FUN\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n<\/body>\r\n<\/html>\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-8af5afa e-flex e-con-boxed e-con e-parent\" data-id=\"8af5afa\" data-element_type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-31a08fa e-con-full e-flex e-con e-child\" data-id=\"31a08fa\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-83dcb1c elementor-widget elementor-widget-html\" data-id=\"83dcb1c\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t<style>\r\n \/* --- SECTION 2 SPECIFIC STYLES --- *\/\r\n #section-swamp {\r\n position: relative;\r\n width: 100%;\r\n min-height: 100vh;\r\n background: transparent;\r\n padding: clamp(60px, 8vw, 100px) 5% 40px 5%;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n justify-content: center;\r\n gap: clamp(30px, 5vw, 50px);\r\n }\r\n\r\n .swamp-asset-mascot {\r\n width: clamp(200px, 25vw, 280px);\r\n height: auto;\r\n filter: drop-shadow(6px 6px 0px #000000);\r\n animation: swampBounce 3s infinite ease-in-out;\r\n user-select: none;\r\n }\r\n\r\n @keyframes swampBounce {\r\n 0%, 100% { transform: translateY(0) rotate(0deg); }\r\n 50% { transform: translateY(-15px) rotate(2deg); }\r\n }\r\n\r\n .interactive-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\r\n gap: 24px;\r\n max-width: 1100px;\r\n width: 100%;\r\n }\r\n\r\n .pop-card {\r\n background: #ffffff;\r\n color: #000000;\r\n border: var(--cartoon-border);\r\n box-shadow: var(--cartoon-shadow);\r\n padding: 30px 20px;\r\n border-radius: 16px;\r\n cursor: pointer;\r\n text-align: center;\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n align-items: center;\r\n min-height: 240px;\r\n transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;\r\n }\r\n\r\n .pop-card:hover {\r\n transform: scale(1.03) translateY(-4px);\r\n background: var(--color-accent) !important;\r\n box-shadow: 8px 8px 0px #000000;\r\n }\r\n\r\n .pop-card h3 {\r\n font-size: 1.6rem;\r\n color: var(--color-dark);\r\n margin-bottom: 12px;\r\n text-shadow: none;\r\n }\r\n\r\n .pop-card p {\r\n font-size: 1.1rem;\r\n font-weight: bold;\r\n color: #333333;\r\n line-height: 1.4;\r\n flex-grow: 1;\r\n }\r\n\r\n .pop-card span {\r\n display: inline-block;\r\n margin-top: 20px;\r\n background: var(--color-accent);\r\n color: #000000;\r\n padding: 6px 20px;\r\n border: 3px solid #000000;\r\n font-weight: bold;\r\n border-radius: 20px;\r\n font-family: var(--font-title);\r\n font-size: 0.85rem;\r\n box-shadow: 2px 2px 0px #000000;\r\n transition: 0.1s ease;\r\n }\r\n \r\n .pop-card:hover span {\r\n background-color: #ffffff;\r\n transform: translate(1px, 1px);\r\n box-shadow: 1px 1px 0px #000000;\r\n }\r\n\r\n \/* --- SMART CONTRACT UTILITY BOX --- *\/\r\n .ca-box {\r\n background: #ffffff;\r\n color: #000000;\r\n border: var(--cartoon-border);\r\n padding: 25px clamp(15px, 4vw, 35px);\r\n width: 100%;\r\n max-width: 700px;\r\n border-radius: 20px;\r\n text-align: center;\r\n box-shadow: var(--cartoon-shadow);\r\n }\r\n\r\n .ca-title {\r\n color: var(--color-dark);\r\n margin-bottom: 15px;\r\n font-size: 1.5rem;\r\n font-family: var(--font-title);\r\n }\r\n\r\n .ca-input-container {\r\n display: flex;\r\n gap: 12px;\r\n width: 100%;\r\n }\r\n\r\n .ca-text {\r\n flex: 1;\r\n background: #111111;\r\n border: 3px solid #000000;\r\n color: #00ffcc;\r\n padding: 12px;\r\n font-family: var(--font-desc);\r\n font-size: clamp(0.9rem, 2.5vw, 1.1rem);\r\n text-align: center;\r\n border-radius: 10px;\r\n font-weight: bold;\r\n min-width: 0;\r\n }\r\n\r\n .btn-copy {\r\n background: var(--color-primary);\r\n color: #ffffff;\r\n border: 3px solid #000000;\r\n font-family: var(--font-title);\r\n padding: 0 24px;\r\n border-radius: 10px;\r\n cursor: pointer;\r\n font-size: 1rem;\r\n box-shadow: 4px 4px 0px #000000;\r\n transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.2s ease;\r\n white-space: nowrap;\r\n }\r\n\r\n .btn-copy:hover {\r\n background: var(--color-primary-hover);\r\n transform: translate(2px, 2px);\r\n box-shadow: var(--cartoon-shadow-hover);\r\n }\r\n\r\n .swamp-copyright {\r\n margin-top: 30px;\r\n text-align: center;\r\n font-weight: bold;\r\n font-size: clamp(0.9rem, 2vw, 1.1rem);\r\n color: var(--color-white);\r\n text-shadow: 2px 2px 0px #000000;\r\n letter-spacing: 0.5px;\r\n }\r\n\r\n \/* --- INTERACTIVE CARTOON POPUP WINDOW COMPONENT --- *\/\r\n .popup-modal {\r\n position: fixed;\r\n top: 0;\r\n left: 0;\r\n width: 100vw;\r\n height: 100vh;\r\n background: rgba(11, 29, 14, 0.85);\r\n z-index: 99999;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n opacity: 0;\r\n pointer-events: none;\r\n transition: opacity 0.3s ease;\r\n }\r\n\r\n .popup-modal.active {\r\n opacity: 1;\r\n pointer-events: auto;\r\n }\r\n\r\n .popup-content {\r\n background: #ffffff;\r\n color: #000000;\r\n border: var(--cartoon-border);\r\n box-shadow: 10px 10px 0px var(--color-accent);\r\n max-width: 600px;\r\n width: 90%;\r\n padding: clamp(25px, 5vw, 45px);\r\n border-radius: 24px;\r\n text-align: center;\r\n position: relative;\r\n transform: scale(0.7);\r\n transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);\r\n }\r\n\r\n .popup-modal.active .popup-content {\r\n transform: scale(1);\r\n }\r\n\r\n .close-popup {\r\n position: absolute;\r\n top: -20px;\r\n right: -20px;\r\n background: #f44336;\r\n color: #ffffff;\r\n border: var(--cartoon-border);\r\n width: 45px;\r\n height: 45px;\r\n font-family: var(--font-title);\r\n font-size: 1.4rem;\r\n border-radius: 50%;\r\n cursor: pointer;\r\n box-shadow: 3px 3px 0 #000000;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n transition: 0.1s;\r\n }\r\n\r\n .close-popup:hover {\r\n background-color: #b71c1c;\r\n transform: scale(1.05);\r\n }\r\n\r\n .popup-inner-title {\r\n color: var(--color-primary);\r\n margin-bottom: 20px;\r\n font-size: clamp(1.5rem, 4vw, 2rem);\r\n text-shadow: 2px 2px 0px var(--color-accent);\r\n }\r\n\r\n .popup-inner-text {\r\n font-size: clamp(1rem, 3vw, 1.25rem);\r\n line-height: 1.6;\r\n font-weight: bold;\r\n color: #222222;\r\n text-align: left;\r\n }\r\n\r\n .popup-inner-text ol {\r\n margin-left: 20px;\r\n margin-top: 10px;\r\n }\r\n\r\n .popup-inner-text li {\r\n margin-bottom: 12px;\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .ca-input-container {\r\n flex-direction: column;\r\n gap: 10px;\r\n }\r\n\r\n .btn-copy {\r\n padding: 14px 20px;\r\n width: 100%;\r\n justify-content: center;\r\n box-shadow: 4px 4px 0px #000000;\r\n }\r\n\r\n .btn-copy:hover {\r\n transform: translate(2px, 2px);\r\n box-shadow: var(--cartoon-shadow-hover);\r\n }\r\n \r\n .pop-card {\r\n min-height: 220px;\r\n }\r\n }\r\n<\/style>\r\n\r\n<section id=\"section-swamp\">\r\n \r\n <img decoding=\"async\" src=\"https:\/\/thealex.lol\/wp-content\/uploads\/2026\/06\/ASET.png\" alt=\"Alex Mascot\" class=\"swamp-asset-mascot\">\r\n\r\n <div class=\"interactive-grid\">\r\n \r\n <div class=\"pop-card\" onclick=\"openPopup('about')\">\r\n <h3>ABOUT ALEX<\/h3>\r\n <p>Discover the story behind the sharpest sparkling smile in Web3.<\/p>\r\n <span>CLICK TO OPEN<\/span>\r\n <\/div>\r\n\r\n <div class=\"pop-card\" onclick=\"openPopup('buy')\">\r\n <h3>HOW TO BUY<\/h3>\r\n <p>Quick, safe steps to secure your slot before the big wave hits the swamp.<\/p>\r\n <span>CLICK TO OPEN<\/span>\r\n <\/div>\r\n\r\n <div class=\"pop-card\" onclick=\"openPopup('community')\">\r\n <h3>THE COLONY<\/h3>\r\n <p>See how our organic community drives momentum straight to the top.<\/p>\r\n <span>CLICK TO OPEN<\/span>\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <div class=\"ca-box\">\r\n <div class=\"ca-title\">OFFICIAL CONTRACT ADDRESS $ALEX<\/div>\r\n <div class=\"ca-input-container\">\r\n <input type=\"text\" class=\"ca-text\" id=\"caTokenInput\" value=\"DgubzCb3hfrDQzQNZwqTGvEYCBmm3gJoZXzKmqRapump\" readonly>\r\n <button class=\"btn-copy\" id=\"copyBtn\" onclick=\"copyContractAddress()\">COPY CA<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"swamp-copyright\">\r\n <p>\u00a9 2026 ALEX Project. Powered by Solana's Finest Croc Colony.<\/p>\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n<div class=\"popup-modal\" id=\"infoPopup\">\r\n <div class=\"popup-content\">\r\n <button class=\"close-popup\" onclick=\"closePopup()\">X<\/button>\r\n <h2 id=\"popupTitle\" class=\"popup-inner-title\">TITLE<\/h2>\r\n <div id=\"popupBody\" class=\"popup-inner-text\">Content goes here...<\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\n const contentData = {\r\n about: {\r\n title: \"A SPARKLING SMILE, HUNTER'S GRIT!\",\r\n text: \"Don\u2019t let his slightly puzzled look fool you when he first got those braces on. Behind that steel wire grill, Alex is a master opportunity hunter who never lets go of his target! Born in the heart of the bustling Solana ecosystem, Alex ($ALEX) brings a fresh wave of positive energy, transparency, and humor to the space. We aren't just another passing trend. Driven by an organic, tight-knit colony, Alex stands as a symbol that a crypto project can be remarkably fun while maintaining a logical, well-mapped foundation for growth. It\u2019s time to hop in and swim with the right current!\"\r\n },\r\n buy: {\r\n title: \"QUICK 4-STEP SWAMP GUIDE\",\r\n text: `<ol>\r\n <li><strong>Create Wallet:<\/strong> Download Phantom or Solflare app.<\/li>\r\n <li><strong>Get SOL:<\/strong> Buy SOL from an exchange and send it to your wallet.<\/li>\r\n <li><strong>Connect Platform:<\/strong> Open Pump.fun or PumpSwap in your wallet browser.<\/li>\r\n <li><strong>Swap for $ALEX:<\/strong> Paste our Contract Address, choose the amount, and click Buy!<\/li>\r\n <\/ol>`\r\n },\r\n community: {\r\n title: \"JOIN THE SWAMP COLONY\",\r\n text: \"The true backbone of Alex is our vibrant and united community. There are no vague promises or directionless talk here; everyone moves forward together through positive, transparent discussions and collective ecosystem excitement. In this swamp colony, every single member contributes to pushing the momentum forward organically. Jump into our official channels, share the viral memetic culture, participate in community events, and let's conquer the Solana network together!\"\r\n }\r\n };\r\n\r\n const modal = document.getElementById('infoPopup');\r\n const pTitle = document.getElementById('popupTitle');\r\n const pBody = document.getElementById('popupBody');\r\n\r\n function openPopup(key) {\r\n if(contentData[key]) {\r\n pTitle.innerHTML = contentData[key].title;\r\n pBody.innerHTML = contentData[key].text;\r\n modal.classList.add('active');\r\n document.body.style.overflow = 'hidden'; \r\n }\r\n }\r\n\r\n function closePopup() {\r\n modal.classList.remove('active');\r\n document.body.style.overflow = ''; \r\n }\r\n\r\n window.onclick = function(event) {\r\n if (event.target == modal) {\r\n closePopup();\r\n }\r\n }\r\n\r\n \/* --- SISTEM COPY TERBARU (DIJAMIN LANGSUNG MENYALIN ISI INPUT) --- *\/\r\n function copyContractAddress() {\r\n const copyText = document.getElementById(\"caTokenInput\");\r\n const btn = document.getElementById(\"copyBtn\");\r\n const textToCopy = copyText.value.trim();\r\n\r\n \/\/ Menggunakan Clipboard API Modern\r\n if (navigator.clipboard && window.isSecureContext) {\r\n navigator.clipboard.writeText(textToCopy).then(() => {\r\n showSuccessState(btn);\r\n }).catch(err => {\r\n fallbackCopyAction(textToCopy, btn);\r\n });\r\n } else {\r\n fallbackCopyAction(textToCopy, btn);\r\n }\r\n }\r\n\r\n function fallbackCopyAction(text, btn) {\r\n const textArea = document.createElement(\"textarea\");\r\n textArea.value = text;\r\n textArea.style.position = \"fixed\";\r\n textArea.style.top = \"-999999px\";\r\n textArea.style.left = \"-999999px\";\r\n document.body.appendChild(textArea);\r\n \r\n textArea.focus();\r\n textArea.select();\r\n textArea.setSelectionRange(0, 99999); \r\n\r\n try {\r\n const successful = document.execCommand('copy');\r\n if(successful) {\r\n showSuccessState(btn);\r\n } else {\r\n alert(\"Failed to copy. Please copy the text manually.\");\r\n }\r\n } catch (err) {\r\n alert(\"Failed to copy. Please copy the text manually.\");\r\n }\r\n \r\n document.body.removeChild(textArea);\r\n }\r\n\r\n function showSuccessState(btn) {\r\n const originalText = btn.innerText;\r\n btn.innerText = \"COPIED! \ud83d\udc0a\";\r\n btn.style.backgroundColor = \"#ffeb3b\";\r\n btn.style.color = \"#000000\";\r\n \r\n setTimeout(() => {\r\n btn.innerText = originalText;\r\n btn.style.backgroundColor = \"\";\r\n btn.style.color = \"\";\r\n }, 2000);\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\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>ALEX ($ALEX) – Hero Ecosystem ALEX ($ALEX) X \/ TWITTER TELEGRAM DEXSCREENER SNAP UP YOUR OPPORTUNITY WITH ALEX! Who says the swamp is just for laying low? Meet Alex, the trendiest crocodile on the Solana network, ready to shake up the crypto world. Armed with a brilliant smile from his iconic braces and backed by […]<\/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-9","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/pages\/9","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thealex.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=9"}],"version-history":[{"count":37,"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions"}],"predecessor-version":[{"id":58,"href":"https:\/\/thealex.lol\/index.php?rest_route=\/wp\/v2\/pages\/9\/revisions\/58"}],"wp:attachment":[{"href":"https:\/\/thealex.lol\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}