{"id":27,"date":"2026-10-29T07:01:13","date_gmt":"2026-10-29T07:01:13","guid":{"rendered":"https:\/\/www.azizolhafizi.com\/ai\/?page_id=27"},"modified":"2026-10-29T07:11:28","modified_gmt":"2026-10-29T07:11:28","slug":"ai_26","status":"publish","type":"page","link":"https:\/\/www.azizolhafizi.com\/ai\/","title":{"rendered":"ai"},"content":{"rendered":"<!-- \"Tanya Azizol\" page. Replace the whole content of the AI Page snippet (ID 26) with this file. -->\r\n<style>\r\n@import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700&display=swap');\r\n\r\n\/* Hide theme header, title and footer on this page only (page id 27). Delete this block to bring them back. *\/\r\nbody.page-id-27 .wp-site-blocks > header,\r\nbody.page-id-27 .wp-site-blocks > footer,\r\nbody.page-id-27 .wp-block-post-title,\r\nbody.page-id-27 .entry-title{display:none!important}\r\nbody.page-id-27{overflow:hidden!important}\r\nbody.page-id-27 .wp-site-blocks{padding:0!important}\r\nbody.page-id-27 main,body.page-id-27 .wp-block-post-content{margin:0!important;padding:0!important;max-width:none!important}\r\n\r\n\/* Cancel the theme's narrow content width so the page can fill the whole screen. *\/\r\n.az-ai#az-root{max-width:none!important;width:auto!important;margin:0!important}\r\n\r\n.az-ai{\r\n  --bg:#f5f5f7; --card:#ffffff; --ink:#1d1d1f; --ink2:#6e6e73; --line:rgba(0,0,0,.09);\r\n  --accent:#0071e3; --accent-ink:#ffffff; --shadow:0 10px 40px -12px rgba(0,0,0,.18);\r\n  --glow:radial-gradient(60% 50% at 50% 0%,rgba(0,113,227,.10),transparent 70%);\r\n  font-family:-apple-system,BlinkMacSystemFont,\"SF Pro Display\",\"SF Pro Text\",Inter,\"Segoe UI\",Roboto,sans-serif;\r\n  -webkit-font-smoothing:antialiased;\r\n  color:var(--ink);background:var(--glow),var(--bg);line-height:1.5;\r\n  position:fixed;top:var(--wp-admin--admin-bar--height,0px);left:0;right:0;bottom:0;z-index:99999;\r\n  display:flex;flex-direction:column;overflow:hidden}\r\n@media (prefers-color-scheme:dark){\r\n  .az-ai{--bg:#000000; --card:#1c1c1e; --ink:#f5f5f7; --ink2:#98989d; --line:rgba(255,255,255,.12);\r\n    --accent:#2997ff; --accent-ink:#ffffff; --shadow:0 10px 40px -12px rgba(0,0,0,.8);\r\n    --glow:radial-gradient(60% 50% at 50% 0%,rgba(41,151,255,.16),transparent 70%)}\r\n}\r\n\/* Follow the real visible height on phones (address bar, keyboard). *\/\r\n@supports (height:100dvh){\r\n  .az-ai{bottom:auto;height:calc(100dvh - var(--wp-admin--admin-bar--height,0px))}\r\n}\r\n.az-ai{-webkit-text-size-adjust:100%;text-size-adjust:100%}\r\nhtml:has(body.page-id-27){overflow:hidden!important;max-width:100%}\r\n.az-ai .stage>*{max-width:100%;min-width:0}\r\n.az-ai .note,.az-ai .chips button,.az-ai .msg{overflow-wrap:anywhere}\r\n.az-ai *{box-sizing:border-box}\r\n.az-ai :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:12px}\r\n\r\n.az-ai .stage{flex:1;min-height:0;width:100%;max-width:840px;margin:0 auto;padding:24px 22px calc(18px + env(safe-area-inset-bottom));\r\n  display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}\r\n\/* Safe vertical centering: centers when there is room, scrolls from the top when there is not. *\/\r\n.az-ai .stage::before,.az-ai .stage::after{content:\"\";flex:1 0 0}\r\n.az-ai.started .stage::before,.az-ai.started .stage::after{display:none}\r\n.az-ai .stage>h1,.az-ai .stage>form,.az-ai .stage>.chips,.az-ai .stage>.note{flex:none}\r\n\r\n.az-ai h1{margin:0 0 36px;text-align:center;font-weight:700;letter-spacing:-.045em;line-height:1.02;\r\n  font-size:clamp(46px,10vw,96px);color:var(--ink);\r\n  transition:font-size .5s cubic-bezier(.2,.7,.2,1),margin .5s cubic-bezier(.2,.7,.2,1);\r\n  animation:az-rise .9s cubic-bezier(.2,.7,.2,1) both}\r\n@keyframes az-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}\r\n\r\n.az-ai .log{display:none;flex:1;min-height:0;overflow-y:auto;flex-direction:column;gap:12px;padding:4px 2px 18px;scrollbar-width:thin}\r\n.az-ai.started .log{display:flex}\r\n.az-ai.started .stage{justify-content:flex-start}\r\n.az-ai.started h1{font-size:clamp(26px,4vw,34px);margin:6px 0 18px}\r\n\r\n.az-ai .msg{max-width:86%;padding:12px 17px;border-radius:20px;font-size:17px;line-height:1.5;white-space:pre-wrap;word-break:break-word}\r\n.az-ai .msg.ai{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px}\r\n.az-ai .msg.me{align-self:flex-end;background:var(--accent);color:var(--accent-ink);border-bottom-right-radius:6px}\r\n.az-ai .msg.err{align-self:flex-start;background:transparent;border:1px dashed var(--line);color:var(--ink2)}\r\n.az-ai .msg.wait{color:var(--ink2)}\r\n.az-ai .msg code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:rgba(127,127,127,.16);padding:1px 6px;border-radius:6px}\r\n\r\n.az-ai form{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:7px 7px 7px 24px;box-shadow:var(--shadow);transition:box-shadow .2s,border-color .2s}\r\n.az-ai form:focus-within{border-color:var(--accent);box-shadow:var(--shadow),0 0 0 4px rgba(0,113,227,.18)}\r\n.az-ai input{flex:1;min-width:0;font:inherit;font-size:18px;border:0;background:transparent;color:var(--ink);padding:12px 0}\r\n.az-ai input::placeholder{color:var(--ink2)}\r\n.az-ai input:focus{outline:none}\r\n.az-ai button.go{flex:none;width:46px;height:46px;border-radius:50%;border:0;background:var(--accent);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .15s,opacity .15s}\r\n.az-ai button.go:hover{transform:scale(1.06)}\r\n.az-ai button.go:disabled{opacity:.4;cursor:default;transform:none}\r\n.az-ai button.go svg{width:20px;height:20px}\r\n\r\n.az-ai .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:22px}\r\n.az-ai .chips button{font:inherit;font-size:15px;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:9px 18px;cursor:pointer;transition:border-color .15s,transform .15s}\r\n.az-ai .chips button:hover{border-color:var(--accent);transform:translateY(-1px)}\r\n.az-ai .note{margin:22px 0 0;text-align:center;font-size:13px;color:var(--ink2)}\r\n.az-ai.started .note{margin-top:14px}\r\n\r\n@media (max-width:560px){\r\n  .az-ai .stage{padding:16px 14px calc(12px + env(safe-area-inset-bottom))}\r\n  .az-ai h1{font-size:clamp(36px,11.5vw,56px);margin-bottom:24px;letter-spacing:-.04em}\r\n  .az-ai.started h1{font-size:26px;margin:2px 0 12px}\r\n  .az-ai form{padding:5px 5px 5px 18px}\r\n  .az-ai button.go{width:42px;height:42px}\r\n  .az-ai input{font-size:16px;padding:10px 0}\r\n  .az-ai .chips{gap:8px;margin-top:16px}\r\n  .az-ai .chips button{font-size:14px;padding:8px 14px;text-align:left}\r\n  .az-ai .msg{max-width:94%;font-size:16px;padding:10px 14px}\r\n  .az-ai .note{font-size:12px;margin-top:16px}\r\n}\r\n@media (prefers-reduced-motion:reduce){\r\n  .az-ai h1{animation:none;transition:none}\r\n  .az-ai button.go,.az-ai .chips button{transition:none}\r\n}\r\n<\/style>\r\n\r\n<div class=\"az-ai\" id=\"az-root\">\r\n  <div class=\"stage\">\r\n    <h1>Tanya Azizol<\/h1>\r\n\r\n    <div class=\"log\" id=\"az-log\" role=\"log\" aria-live=\"polite\"><\/div>\r\n\r\n    <form id=\"az-form\" autocomplete=\"off\">\r\n      <input id=\"az-input\" type=\"text\" maxlength=\"500\" placeholder=\"Tanya tentang server, hosting atau IT\" aria-label=\"Soalan anda\" required>\r\n      <button class=\"go\" id=\"az-send\" type=\"submit\" aria-label=\"Hantar soalan\">\r\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 19V5\"\/><path d=\"M5 12l7-7 7 7\"\/><\/svg>\r\n      <\/button>\r\n    <\/form>\r\n\r\n    <div class=\"chips\" id=\"az-chips\">\r\n      <button type=\"button\">Kenapa backup job boleh gagal?<\/button>\r\n      <button type=\"button\">Apa beza VPS dengan shared hosting?<\/button>\r\n      <button type=\"button\">Bila perlu guna firewall FortiGate?<\/button>\r\n    <\/div>\r\n\r\n    <p class=\"note\">Jawapan datang daripada AI dan mungkin tersilap. Semak dulu sebelum ubah apa-apa pada sistem live, dan jangan kongsi kata laluan atau data pelanggan.<\/p>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n(function(){\r\n  var root=document.getElementById('az-root'),\r\n      form=document.getElementById('az-form'),input=document.getElementById('az-input'),\r\n      log=document.getElementById('az-log'),send=document.getElementById('az-send'),\r\n      chips=document.getElementById('az-chips'),history=[],busy=false;\r\n  if(!form)return;\r\n\r\n  \/\/ Phone fit: make sure the page uses the device width, then size the app to the area the visitor can actually see.\r\n  var vm=document.querySelector('meta[name=\"viewport\"]');\r\n  if(!vm){vm=document.createElement('meta');vm.name='viewport';document.head.appendChild(vm);}\r\n  vm.content='width=device-width, initial-scale=1';\r\n  var vv=window.visualViewport;\r\n  function fit(){\r\n    var w=vv?vv.width:window.innerWidth,h=vv?vv.height:window.innerHeight;\r\n    root.style.setProperty('left',(vv?vv.offsetLeft:0)+'px','important');\r\n    root.style.setProperty('width',w+'px','important');\r\n    root.style.setProperty('height','calc('+h+'px - var(--wp-admin--admin-bar--height, 0px))','important');\r\n  }\r\n  fit();\r\n  window.addEventListener('resize',fit);\r\n  window.addEventListener('orientationchange',fit);\r\n  if(vv){vv.addEventListener('resize',fit);vv.addEventListener('scroll',fit);}\r\n\r\n  function endpoint(){\r\n    var l=document.querySelector('link[rel=\"https:\/\/api.w.org\/\"]');\r\n    var root=l?l.href:'\/wp-json\/';\r\n    if(root.slice(-1)!=='\/')root+='\/';\r\n    return root+'az-ai\/v1\/chat';\r\n  }\r\n  \/\/ Safe mini formatter: escape HTML first, then allow **bold** and `code`.\r\n  function fmt(t){\r\n    t=String(t).replace(\/&\/g,'&amp;').replace(\/<\/g,'&lt;').replace(\/>\/g,'&gt;');\r\n    t=t.replace(\/^#{1,6}\\s*\/gm,'');\r\n    t=t.replace(\/\\*\\*([^*\\n]+)\\*\\*\/g,'<strong>$1<\/strong>');\r\n    t=t.replace(\/`([^`\\n]+)`\/g,'<code>$1<\/code>');\r\n    return t;\r\n  }\r\n  function add(cls,text,html){\r\n    var d=document.createElement('div');\r\n    d.className='msg '+cls;\r\n    if(html)d.innerHTML=fmt(text);else d.textContent=text;\r\n    log.appendChild(d);log.scrollTop=log.scrollHeight;return d;\r\n  }\r\n  function ask(q){\r\n    q=(q||'').trim();\r\n    if(!q||busy)return;\r\n    busy=true;send.disabled=true;\r\n    root.classList.add('started');\r\n    if(chips){chips.remove();chips=null;}\r\n    add('me',q);history.push({role:'user',content:q});\r\n    var wait=add('ai wait','Sekejap...');\r\n    fetch(endpoint(),{method:'POST',headers:{'Content-Type':'application\/json'},\r\n      body:JSON.stringify({messages:history.slice(-6)})})\r\n    .then(function(r){return r.json().then(function(j){return{ok:r.ok,status:r.status,j:j};});})\r\n    .then(function(res){\r\n      wait.remove();\r\n      if(res.ok&&res.j&&res.j.reply){\r\n        add('ai',res.j.reply,true);history.push({role:'assistant',content:res.j.reply});\r\n      }else if(res.status===429){\r\n        add('err','Terlalu banyak soalan buat masa ini. Cuba lagi dalam sejam.');\r\n      }else{\r\n        if(window.console&&res.j)console.warn('Tanya Azizol:',res.j.detail||res.j.error||res.status);\r\n        add('err','Maaf, AI tak dapat jawab sekarang. Cuba lagi sebentar.');\r\n      }\r\n    })\r\n    .catch(function(){wait.remove();add('err','Tak dapat sambung. Semak internet dan cuba lagi.');})\r\n    .then(function(){busy=false;send.disabled=false;input.focus();});\r\n  }\r\n  form.addEventListener('submit',function(e){e.preventDefault();var q=input.value;input.value='';ask(q);});\r\n  if(chips)chips.addEventListener('click',function(e){if(e.target.tagName==='BUTTON')ask(e.target.textContent);});\r\n})();\r\n<\/script>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-27","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.azizolhafizi.com\/ai\/index.php?rest_route=\/wp\/v2\/pages\/27","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.azizolhafizi.com\/ai\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.azizolhafizi.com\/ai\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.azizolhafizi.com\/ai\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.azizolhafizi.com\/ai\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=27"}],"version-history":[{"count":2,"href":"https:\/\/www.azizolhafizi.com\/ai\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/www.azizolhafizi.com\/ai\/index.php?rest_route=\/wp\/v2\/pages\/27\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/www.azizolhafizi.com\/ai\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}