{"id":2,"date":"2025-10-22T06:46:56","date_gmt":"2025-10-22T06:46:56","guid":{"rendered":"https:\/\/ckingscapital.com\/hub\/?page_id=2"},"modified":"2026-05-18T13:54:46","modified_gmt":"2026-05-18T13:54:46","slug":"sample-page","status":"publish","type":"page","link":"https:\/\/ckingscapital.com\/hub\/","title":{"rendered":"One litre realters"},"content":{"rendered":"\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n\n<meta charset=\"UTF-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n\n<title>Opportunity hub<\/title>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Poppins:wght@300;400;500;600;700&#038;display=swap\" rel=\"stylesheet\">\n\n<style>\n\n\/* ================= RESET ================= *\/\n* {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n  font-family: 'Poppins', sans-serif;\n}\n\nbody{\n  background:#e5ddd5;\n  overflow:hidden;\n}\n\n\/* ================= HIDE FOOTER ================= *\/\nfooter,\n.site-footer,\n#colophon,\n.elementor-location-footer {\n  display: none !important;\n}\n\n\/* ================= HEADER ================= *\/\nheader {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 60px;\n  background: #075e54;\n  color: white;\n  display: flex;\n  align-items: center;\n  padding: 0 15px;\n  font-weight: 600;\n  z-index: 1000;\n}\n\n\/* ================= CHAT WRAPPER ================= *\/\n.chat-app {\n  display: flex;\n  flex-direction: column;\n  height: 100dvh;\n  padding-top: 60px;\n}\n\n.ck-chat-wrapper {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n\/* ================= CHAT BODY ================= *\/\n.ck-chat-body {\n  flex: 1;\n  overflow-y: auto;\n  padding: 12px;\n  background: #ece5dd;\n}\n\n\/* ================= MESSAGES ================= *\/\n.ck-msg {\n  max-width: 75%;\n  padding: 10px 14px;\n  margin-bottom: 10px;\n  border-radius: 10px;\n  font-size: 14px;\n  line-height: 1.4;\n}\n\n.ck-user {\n  background: #34b7f1 !important;\n  color: white !important;\n  margin-left: auto;\n}\n\n.ck-bot {\n  background: white !important;\n  color: black !important;\n  margin-right: auto;\n}\n\n.ck-bot img {\n  max-width: 240px;\n  border-radius: 8px;\n  margin-top: 6px;\n}\n\n\/* ================= INPUT AREA ================= *\/\n.ck-chat-footer {\n  position: fixed !important;\n  bottom: 0;\n  left: 0;\n  width: 100%;\n  display: flex !important;\n  align-items: center;\n  gap: 8px;\n  padding: 8px;\n  background: #f0f0f0 !important;\n  border-top: 1px solid #ddd;\n  z-index: 1000;\n}\n\n.ck-chat-footer input {\n  flex: 1;\n  border: none !important;\n  padding: 12px 16px !important;\n  border-radius: 25px !important;\n  background: white !important;\n  outline: none;\n  font-size: 16px;\n}\n\n.ck-chat-footer button {\n  width: 50px !important;\n  height: 50px !important;\n  border-radius: 50% !important;\n  background: #25d366 !important;\n  color: white !important;\n  font-size: 20px !important;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.ck-chat-footer button:hover {\n  box-shadow: 0 0 12px #25d366;\n  transform: scale(1.1);\n}\n\n\/* ================= FLOATING MENU ================= *\/\n.chat-menu {\n  position: fixed;\n  top: 15px;\n  right: 15px;\n  z-index: 1500;\n}\n\n.menu-btn {\n  width: 45px;\n  height: 45px;\n  border-radius: 50%;\n  background: #25d366;\n  color: white;\n  font-size: 24px;\n  border: none;\n  cursor: pointer;\n}\n\n.menu-items {\n  display: none;\n  position: absolute;\n  top: 55px;\n  right: 0;\n  background: white;\n  border-radius: 8px;\n  box-shadow: 0 4px 12px rgba(0,0,0,0.15);\n  flex-direction: column;\n}\n\n.menu-items a {\n  padding: 10px 15px;\n  text-decoration: none;\n  color: #075e54;\n}\n\n.menu-items a:hover {\n  background: #ece5dd;\n}\n\n\/* ================= MOBILE ================= *\/\n@media(max-width:768px){\n  .ck-msg {\n    max-width: 85%;\n    font-size: 13px;\n  }\n}\n\n\/* ================= FORCE HIDE WORDPRESS MENU ================= *\/\n\n\/* Common WP menu containers *\/\nheader nav,\nnav,\n.main-navigation,\n.site-header,\n#masthead,\n.menu,\n#site-navigation,\n.navbar,\n.elementor-nav-menu,\n.elementor-location-header {\n    display: none !important;\n    visibility: hidden !important;\n    height: 0 !important;\n    overflow: hidden !important;\n}\n\n\/* Admin bar (optional, remove if you still want it when logged in) *\/\n#wpadminbar {\n    display: none !important;\n}\n\n\/* ================= INSTALL POPUP ================= *\/\n#pwa-install-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(0,0,0,0.75);\n  display: none;\n  justify-content: center;\n  align-items: center;\n  z-index: 9999;\n}\n\n#pwa-install-box {\n  background: #fff;\n  padding: 25px;\n  border-radius: 14px;\n  text-align: center;\n  max-width: 320px;\n  width: 90%;\n}\n\n#pwa-install-btn {\n  background: #25d366;\n  color: #fff;\n  border: none;\n  padding: 12px 18px;\n  border-radius: 8px;\n  margin-right: 8px;\n  cursor: pointer;\n}\n\n#pwa-close-btn {\n  background: #ddd;\n  border: none;\n  padding: 12px 18px;\n  border-radius: 8px;\n  cursor: pointer;\n}\n\n<\/style>\n\n<\/head>\n<body>\n\n<header>\n  Opportunity hub\n<\/header>\n\n<div class=\"chat-menu\">\n  <button class=\"menu-btn\">\u2630<\/button>\n  <div class=\"menu-items\">\n    <a href=\"https:\/\/ckingscapital.com\/hub\/my-biz-dashboard\/\" target=\"_blank\">Dashboard<\/a>\n    <a href=\"https:\/\/ckingscapital.com\/hub\/thank-you\/\" target=\"_blank\">Terms &#038; Conditions<\/a>\n    <a href=\"https:\/\/ckingscapital.com\/hub\/membership-login\/\" target=\"_blank\">Member Login<\/a>\n  <\/div>\n<\/div>\n\n<div class=\"chat-app\">\n  \n<div class=\"ck-chat-wrapper\">\n\n    <div class=\"ck-chat-header\">Opportunity hub<\/div>\n\n    <div class=\"ck-chat-body\" id=\"ck-chat-body\">\n\n        <div class=\"ck-msg ck-bot\">\ud83d\udd25 <b>Latest Opportunity<\/b><br><br>Sales person | Eldoret | 15k | Sales in a beverage company<br><br><hr><br>Want to post a job?\r\n\r\nType: I want to post a job\r\n\r\n\r\nWant an AI app like this?\r\n\r\nType: Get me an AI app.<br><br>\n    <div class=\"ck-social-dropdown-wrap\">\n\n        <button class=\"ck-social-toggle\">\n            \ud83d\udd17 Follow Us\n        <\/button>\n\n        <div class=\"ck-social-dropdown\">\n    \n        <a href=\"https:\/\/www.tiktok.com\/@opportunity.hub5\" target=\"_blank\">\n            \ud83c\udfb5 TikTok\n        <\/a>\n        <\/div>\n    <\/div>\n    <\/div>\n\n    <\/div>\n\n    <div class=\"ck-chat-footer\">\n        <input\n            id=\"ck-chat-input\"\n            placeholder=\"Ask about online opportunities and jobs\" \/>\n\n        <button id=\"ck-chat-send\">\n            Send\n        <\/button>\n    <\/div>\n\n    <div id=\"ck-img-overlay\">\n        <img decoding=\"async\" src=\"\" alt=\"Image\">\n    <\/div>\n\n<\/div>\n\n<style>\n\n.ck-chat-wrapper{\n    width:100%;\n    max-width:650px;\n    height:600px;\n    border:1px solid #dbeafe;\n    border-radius:16px;\n    display:flex;\n    flex-direction:column;\n    font-family:system-ui,sans-serif;\n    background:#f0f7ff;\n    box-shadow:0 15px 35px rgba(0,0,0,0.08);\n    margin:auto;\n}\n\n.ck-chat-header{\n    padding:16px;\n    border-bottom:1px solid #dbeafe;\n    font-weight:600;\n    background:#2563eb;\n    color:white;\n    border-top-left-radius:16px;\n    border-top-right-radius:16px;\n}\n\n.ck-chat-body{\n    flex:1;\n    padding:14px;\n    overflow-y:auto;\n    background:#fff;\n}\n\n.ck-msg{\n    max-width:80%;\n    padding:12px 16px;\n    margin-bottom:12px;\n    border-radius:16px;\n    font-size:14px;\n    line-height:1.5;\n    word-wrap:break-word;\n}\n\n.ck-user{\n    background:#2563eb;\n    color:#fff;\n    margin-left:auto;\n    border-bottom-right-radius:6px;\n}\n\n.ck-bot{\n    background:#e5e7eb;\n    color:#000;\n    margin-right:auto;\n    border-bottom-left-radius:6px;\n}\n\n.ck-bot img{\n    max-width:100%;\n    border-radius:10px;\n    margin-top:8px;\n    display:block;\n}\n\n.ck-chat-footer{\n    display:flex;\n    border-top:1px solid #dbeafe;\n    background:#f0f7ff;\n    border-bottom-left-radius:16px;\n    border-bottom-right-radius:16px;\n}\n\n.ck-chat-footer input{\n    flex:1;\n    border:none;\n    padding:14px;\n    font-size:14px;\n    outline:none;\n    background:transparent;\n}\n\n.ck-chat-footer button{\n    border:none;\n    background:#2563eb;\n    color:#fff;\n    padding:0 22px;\n    cursor:pointer;\n    border-bottom-right-radius:16px;\n    font-weight:600;\n}\n\n.ck-chat-footer button:hover{\n    background:#1e40af;\n}\n\n\/* ================= SOCIAL DROPDOWN ================= *\/\n\n.ck-social-dropdown-wrap{\n    position:relative;\n    margin-top:10px;\n    display:inline-block;\n}\n\n.ck-social-toggle{\n    background:#111;\n    color:#fff;\n    border:none;\n    padding:10px 14px;\n    border-radius:8px;\n    cursor:pointer;\n    font-size:14px;\n}\n\n.ck-social-dropdown{\n    display:none;\n    position:absolute;\n    top:45px;\n    left:0;\n    background:#fff;\n    min-width:220px;\n    border-radius:10px;\n    box-shadow:0 4px 20px rgba(0,0,0,0.15);\n    z-index:999;\n    overflow:hidden;\n}\n\n.ck-social-dropdown-wrap:hover .ck-social-dropdown{\n    display:block;\n}\n\n.ck-social-dropdown a{\n    display:block;\n    padding:12px 14px;\n    text-decoration:none;\n    color:#111;\n    border-bottom:1px solid #eee;\n    font-size:14px;\n}\n\n.ck-social-dropdown a:hover{\n    background:#f5f5f5;\n}\n\n#ck-img-overlay{\n    position:fixed;\n    display:none;\n    top:0;\n    left:0;\n    width:100%;\n    height:100%;\n    background:rgba(0,0,0,0.8);\n    justify-content:center;\n    align-items:center;\n    z-index:2000;\n}\n\n#ck-img-overlay img{\n    max-width:90%;\n    max-height:90%;\n    border-radius:10px;\n    box-shadow:0 0 25px rgba(0,0,0,0.6);\n    cursor:zoom-out;\n}\n\n.ck-action-box{\n    display:flex;\n    flex-direction:column;\n    gap:12px;\n    margin-top:12px;\n}\n\n.ck-action-box button{\n    width:100%;\n    padding:14px 16px;\n    font-size:15px;\n    font-weight:600;\n    border-radius:10px;\n    border:none;\n    cursor:pointer;\n}\n\n.ck-unlock-btn{\n    background:#2563eb;\n    color:#fff;\n}\n\n.ck-cv-btn{\n    background:#10b981;\n    color:#fff;\n}\n\n.ck-action-box button:active{\n    transform:scale(0.98);\n    opacity:0.9;\n}\n\n@media (min-width:600px){\n\n    .ck-action-box{\n        flex-direction:row;\n    }\n\n    .ck-action-box button{\n        flex:1;\n    }\n}\n\n.ck-loading{\n    display:inline-block;\n    animation:pulse 1s infinite;\n}\n\n@keyframes pulse{\n    0%{opacity:0.5;}\n    50%{opacity:1;}\n    100%{opacity:0.5;}\n}\n\n<\/style>\n\n<\/div>\n\n<!-- INSTALL POPUP -->\n<div id=\"pwa-install-overlay\">\n  <div id=\"pwa-install-box\">\n    <h3>Install App<\/h3>\n    <p>Get faster access and a better experience.<\/p>\n    <button id=\"pwa-install-btn\">Install<\/button>\n    <button id=\"pwa-close-btn\">Not Now<\/button>\n  <\/div>\n<\/div>\n\n<script>\ndocument.addEventListener('DOMContentLoaded', function(){\n\n  \/\/ MENU\n  const btn = document.querySelector('.menu-btn');\n  const menu = document.querySelector('.menu-items');\n\n  btn.addEventListener('click', function(){\n    menu.style.display = (menu.style.display === 'flex') ? 'none' : 'flex';\n  });\n\n  function scrollToBottom(){\n      const chatBody = document.querySelector('.ck-chat-body');\n      if(chatBody){\n          chatBody.scrollTop = chatBody.scrollHeight;\n      }\n      window.scrollTo(0, document.body.scrollHeight);\n  }\n\n  setTimeout(scrollToBottom, 300);\n  setTimeout(scrollToBottom, 800);\n  setTimeout(scrollToBottom, 1500);\n\n  \/\/ ================= PWA INSTALL =================\n  let deferredPrompt;\n  const overlay = document.getElementById('pwa-install-overlay');\n  const installBtn = document.getElementById('pwa-install-btn');\n  const closeBtn = document.getElementById('pwa-close-btn');\n\n  window.addEventListener('beforeinstallprompt', (e) => {\n      e.preventDefault();\n      deferredPrompt = e;\n\n      if (!localStorage.getItem(\"pwaDismissed\")) {\n          overlay.style.display = 'flex';\n      }\n  });\n\n  installBtn.addEventListener('click', async () => {\n      if (!deferredPrompt) return;\n\n      deferredPrompt.prompt();\n      await deferredPrompt.userChoice;\n\n      overlay.style.display = 'none';\n  });\n\n  closeBtn.addEventListener('click', () => {\n      overlay.style.display = 'none';\n      localStorage.setItem(\"pwaDismissed\", \"true\");\n  });\n\n});\n<\/script>\n\n<\/body>\n<\/html>\n\n\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Opportunity hub Opportunity hub \u2630 Dashboard Terms &#038; Conditions Member Login Install App Get faster access and a better experience. Install Not Now<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"open","template":"","meta":{"footnotes":""},"class_list":["post-2","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/ckingscapital.com\/hub\/wp-json\/wp\/v2\/pages\/2","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ckingscapital.com\/hub\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ckingscapital.com\/hub\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ckingscapital.com\/hub\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ckingscapital.com\/hub\/wp-json\/wp\/v2\/comments?post=2"}],"version-history":[{"count":110,"href":"https:\/\/ckingscapital.com\/hub\/wp-json\/wp\/v2\/pages\/2\/revisions"}],"predecessor-version":[{"id":520,"href":"https:\/\/ckingscapital.com\/hub\/wp-json\/wp\/v2\/pages\/2\/revisions\/520"}],"wp:attachment":[{"href":"https:\/\/ckingscapital.com\/hub\/wp-json\/wp\/v2\/media?parent=2"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}