{"id":5249,"date":"2026-04-05T12:37:11","date_gmt":"2026-04-05T11:37:11","guid":{"rendered":"https:\/\/alhisn.tech\/?page_id=5249"},"modified":"2026-04-05T12:37:12","modified_gmt":"2026-04-05T11:37:12","slug":"code-playground","status":"publish","type":"page","link":"https:\/\/alhisn.tech\/en\/code-playground\/","title":{"rendered":"Code Playground"},"content":{"rendered":"\n<style>\n#alhisn-playground {\n  width: 100%;\n  font-family: 'Tajawal', sans-serif;\n  direction: rtl;\n  border-radius: 12px;\n  overflow: hidden;\n  border: 1px solid #2a2e3e;\n  background: #0d0f14;\n}\n#alhisn-playground .pg-toolbar {\n  background: #161921;\n  border-bottom: 1px solid #2a2e3e;\n  display: flex;\n  align-items: center;\n  padding: 8px 14px;\n  gap: 8px;\n}\n#alhisn-playground .pg-logo {\n  font-size: 14px;\n  font-weight: 900;\n  color: #fff;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n}\n#alhisn-playground .pg-spacer { flex: 1; }\n#alhisn-playground .pg-btn {\n  height: 28px;\n  padding: 0 12px;\n  border-radius: 6px;\n  font-size: 12px;\n  font-weight: 700;\n  cursor: pointer;\n  border: none;\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-family: inherit;\n  transition: filter .15s;\n}\n#alhisn-playground .pg-btn:active { transform: scale(.95); }\n#alhisn-playground .pg-btn-run  { background: #34d399; color: #0a1a12; }\n#alhisn-playground .pg-btn-run:hover { filter: brightness(1.1); }\n#alhisn-playground .pg-btn-clear { background: transparent; color: #5a6180; border: 1px solid #2a2e3e; }\n#alhisn-playground .pg-btn-clear:hover { color: #c9d1e8; }\n\n#alhisn-playground .pg-editors {\n  display: flex;\n  height: 280px;\n  border-bottom: 1px solid #2a2e3e;\n}\n#alhisn-playground .pg-pane {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  border-left: 1px solid #2a2e3e;\n  min-width: 0;\n}\n#alhisn-playground .pg-pane:last-child { border-left: none; }\n#alhisn-playground .pg-tab {\n  height: 34px;\n  background: #1c1f2a;\n  border-bottom: 1px solid #2a2e3e;\n  display: flex;\n  align-items: center;\n  padding: 0 10px;\n  gap: 6px;\n  font-size: 11px;\n  font-weight: 700;\n  color: #c9d1e8;\n  flex-shrink: 0;\n}\n#alhisn-playground .pg-dot {\n  width: 7px; height: 7px;\n  border-radius: 50%;\n}\n#alhisn-playground .d-html { background: #e44d26; }\n#alhisn-playground .d-css  { background: #264de4; }\n#alhisn-playground .d-js   { background: #f0db4f; }\n\n#alhisn-playground textarea {\n  flex: 1;\n  width: 100%;\n  resize: none;\n  border: none;\n  outline: none;\n  background: #0d0f14;\n  color: #c9d1e8;\n  font-family: 'IBM Plex Mono', 'Courier New', monospace;\n  font-size: 12.5px;\n  line-height: 1.6;\n  padding: 10px 12px;\n  tab-size: 2;\n  caret-color: #4f8ef7;\n  box-sizing: border-box;\n}\n#alhisn-playground textarea:focus { background: #0e1018; outline: none; }\n#alhisn-playground textarea::-webkit-scrollbar { width: 4px; }\n#alhisn-playground textarea::-webkit-scrollbar-thumb { background: #2a2e3e; border-radius: 2px; }\n\n#alhisn-playground .pg-resize {\n  height: 5px;\n  background: #2a2e3e;\n  cursor: ns-resize;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n#alhisn-playground .pg-resize:hover { background: #4f8ef7; }\n#alhisn-playground .pg-resize::after {\n  content: '';\n  width: 28px; height: 2px;\n  background: #5a6180;\n  border-radius: 2px;\n}\n\n#alhisn-playground .pg-preview-bar {\n  height: 34px;\n  background: #1c1f2a;\n  border-bottom: 1px solid #2a2e3e;\n  display: flex;\n  align-items: center;\n  padding: 0 12px;\n  gap: 8px;\n}\n#alhisn-playground .pg-lights { display: flex; gap: 4px; }\n#alhisn-playground .pg-tl { width: 9px; height: 9px; border-radius: 50%; }\n#alhisn-playground .tl-r { background: #ff5f56; }\n#alhisn-playground .tl-y { background: #ffbd2e; }\n#alhisn-playground .tl-g { background: #27c93f; }\n#alhisn-playground .pg-preview-label { font-size: 11px; font-weight: 700; color: #5a6180; }\n\n#alhisn-playground iframe {\n  width: 100%;\n  height: 890px;\n  border: none;\n  background: #fff;\n  display: block;\n}\n#alhisn-playground .pg-statusbar {\n  height: 20px;\n  background: #4f8ef7;\n  display: flex;\n  align-items: center;\n  padding: 0 12px;\n  gap: 10px;\n}\n#alhisn-playground .pg-statusbar span {\n  font-size: 10px;\n  font-family: monospace;\n  color: rgba(255,255,255,.85);\n}\n#alhisn-playground .pg-statusbar .pg-sitetag {\n  margin-inline-start: auto;\n  font-weight: 700;\n  color: #fff;\n}\n\n@media (max-width: 640px) {\n  #alhisn-playground .pg-editors { flex-direction: column; height: auto; }\n  #alhisn-playground .pg-pane { height: 160px; border-left: none; border-bottom: 1px solid #2a2e3e; }\n  #alhisn-playground .pg-pane:last-child { border-bottom: none; }\n}\n<\/style>\n\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=IBM+Plex+Mono&#038;family=Tajawal:wght@700;900&#038;display=swap\" rel=\"stylesheet\">\n\n<div id=\"alhisn-playground\">\n  <div class=\"pg-toolbar\">\n    <div class=\"pg-logo\">\n      <svg width=\"18\" height=\"18\" viewBox=\"0 0 22 22\" fill=\"none\"><rect width=\"22\" height=\"22\" rx=\"5\" fill=\"#4f8ef7\"\/><path d=\"M6 8L3 11L6 14M16 8L19 11L16 14M13 6L9 16\" stroke=\"#fff\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n      \u0645\u0644\u0639\u0628 \u0627\u0644\u0643\u0648\u062f\n    <\/div>\n    <div class=\"pg-spacer\"><\/div>\n    <button class=\"pg-btn pg-btn-clear\" id=\"pg-clear\">\ud83d\uddd1 \u0645\u0633\u062d<\/button>\n    <button class=\"pg-btn pg-btn-run\" id=\"pg-run\">\u25b6 \u062a\u0634\u063a\u064a\u0644<\/button>\n  <\/div>\n\n  <div class=\"pg-editors\" id=\"pg-editors\">\n    <div class=\"pg-pane\">\n      <div class=\"pg-tab\"><span class=\"pg-dot d-html\"><\/span>HTML<\/div>\n      <textarea id=\"pg-html\" spellcheck=\"false\" autocorrect=\"off\" autocomplete=\"off\"><\/textarea>\n    <\/div>\n    <div class=\"pg-pane\">\n      <div class=\"pg-tab\"><span class=\"pg-dot d-css\"><\/span>CSS<\/div>\n      <textarea id=\"pg-css\" spellcheck=\"false\" autocorrect=\"off\" autocomplete=\"off\"><\/textarea>\n    <\/div>\n    <div class=\"pg-pane\">\n      <div class=\"pg-tab\"><span class=\"pg-dot d-js\"><\/span>JS<\/div>\n      <textarea id=\"pg-js\" spellcheck=\"false\" autocorrect=\"off\" autocomplete=\"off\"><\/textarea>\n    <\/div>\n  <\/div>\n\n  <div class=\"pg-resize\" id=\"pg-resize\"><\/div>\n\n  <div class=\"pg-preview-bar\">\n    <div class=\"pg-lights\">\n      <div class=\"pg-tl tl-r\"><\/div>\n      <div class=\"pg-tl tl-y\"><\/div>\n      <div class=\"pg-tl tl-g\"><\/div>\n    <\/div>\n    <span class=\"pg-preview-label\">\u0627\u0644\u0646\u062a\u064a\u062c\u0629<\/span>\n  <\/div>\n\n  <iframe id=\"pg-frame\" sandbox=\"allow-scripts\"><\/iframe>\n\n  <div class=\"pg-statusbar\">\n    <span id=\"pg-status\">\u062c\u0627\u0647\u0632<\/span>\n    <span id=\"pg-chars\"><\/span>\n    <span class=\"pg-sitetag\">\u0627\u0644\u062d\u0635\u0646 \u0627\u0644\u062a\u0642\u0646\u064a<\/span>\n  <\/div>\n<\/div>\n\n<script>\n(function(){\n  var html = document.getElementById('pg-html');\n  var css  = document.getElementById('pg-css');\n  var js   = document.getElementById('pg-js');\n  var frame = document.getElementById('pg-frame');\n  var status = document.getElementById('pg-status');\n  var chars  = document.getElementById('pg-chars');\n\n  \/\/ Default code\n  html.value = '<div class=\"card\">\\n  <h1>\u0645\u0631\u062d\u0628\u0627\u064b! \ud83d\udc4b<\/h1>\\n  <p>\u0639\u062f\u0651\u0644 \u0627\u0644\u0643\u0648\u062f \u0648\u0627\u0636\u063a\u0637 \u062a\u0634\u063a\u064a\u0644<\/p>\\n  <button onclick=\"greet()\">\u0627\u0636\u063a\u0637\u0646\u064a<\/button>\\n<\/div>';\n\n  css.value = 'body {\\n  display: flex;\\n  justify-content: center;\\n  align-items: center;\\n  min-height: 100vh;\\n  margin: 0;\\n  background: #0d0f14;\\n  font-family: sans-serif;\\n}\\n.card {\\n  background: #1c1f2a;\\n  border: 1px solid #2a2e3e;\\n  border-radius: 16px;\\n  padding: 36px 44px;\\n  text-align: center;\\n  color: #c9d1e8;\\n  direction: rtl;\\n}\\nh1 { color: #fff; margin-bottom: 12px; }\\np  { color: #8a93b3; margin-bottom: 24px; }\\nbutton {\\n  background: #4f8ef7;\\n  color: #fff;\\n  border: none;\\n  padding: 10px 24px;\\n  border-radius: 8px;\\n  font-size: 15px;\\n  cursor: pointer;\\n}';\n\n  js.value = 'function greet() {\\n  var msgs = [\"\u0623\u0647\u0644\u0627\u064b! \ud83d\udc4b\", \"\u0643\u0648\u062f \u0631\u0627\u0626\u0639! \ud83d\ude80\", \"\u0627\u0633\u062a\u0645\u0631! \ud83d\udcbb\"];\\n  alert(msgs[Math.floor(Math.random() * msgs.length)]);\\n}';\n\n  function run() {\n    var doc = '<!DOCTYPE html><html lang=\"ar\" dir=\"rtl\"><head><meta charset=\"UTF-8\"><style>' + css.value + '<\\\/style><\\\/head><body>' + html.value + '<script>(function(){try{' + js.value + '}catch(e){console.error(e)}})()<\/s' + 'cript><\\\/body><\\\/html>';\n    frame.srcdoc = doc;\n    status.textContent = '\u062a\u0645 \u0627\u0644\u062a\u0634\u063a\u064a\u0644 \u2713';\n    updateChars();\n    setTimeout(function(){ status.textContent = '\u062c\u0627\u0647\u0632'; }, 2000);\n  }\n\n  function updateChars() {\n    chars.textContent = (html.value.length + css.value.length + js.value.length) + ' \u062d\u0631\u0641';\n  }\n\n  document.getElementById('pg-run').addEventListener('click', run);\n\n  document.getElementById('pg-clear').addEventListener('click', function(){\n    if(confirm('\u0645\u0633\u062d \u0643\u0644 \u0627\u0644\u0643\u0648\u062f\u061f')) {\n      html.value = ''; css.value = ''; js.value = '';\n      frame.srcdoc = '';\n      status.textContent = '\u062a\u0645 \u0627\u0644\u0645\u0633\u062d';\n      setTimeout(function(){ status.textContent = '\u062c\u0627\u0647\u0632'; }, 1500);\n    }\n  });\n\n  \/\/ Tab key\n  [html, css, js].forEach(function(ta){\n    ta.addEventListener('keydown', function(e){\n      if(e.key === 'Tab'){\n        e.preventDefault();\n        var s = ta.selectionStart;\n        ta.value = ta.value.substring(0,s) + '  ' + ta.value.substring(ta.selectionEnd);\n        ta.selectionStart = ta.selectionEnd = s + 2;\n      }\n    });\n    ta.addEventListener('input', updateChars);\n  });\n\n  \/\/ Ctrl+Enter\n  document.addEventListener('keydown', function(e){\n    if((e.ctrlKey || e.metaKey) && e.key === 'Enter'){ e.preventDefault(); run(); }\n  });\n\n  \/\/ Resize handle\n  var handle = document.getElementById('pg-resize');\n  var editors = document.getElementById('pg-editors');\n  var dragging = false, startY = 0, startH = 0;\n  handle.addEventListener('mousedown', function(e){\n    dragging = true; startY = e.clientY; startH = editors.offsetHeight;\n    document.body.style.userSelect = 'none';\n  });\n  document.addEventListener('mousemove', function(e){\n    if(!dragging) return;\n    var newH = Math.max(100, Math.min(startH + (e.clientY - startY), 600));\n    editors.style.height = newH + 'px';\n  });\n  document.addEventListener('mouseup', function(){\n    dragging = false; document.body.style.userSelect = '';\n  });\n\n  \/\/ Auto run\n  run();\n  updateChars();\n})();\n<\/script>\n","protected":false},"excerpt":{"rendered":"<p>\u0645\u0644\u0639\u0628 \u0627\u0644\u0643\u0648\u062f \ud83d\uddd1 \u0645\u0633\u062d \u25b6 \u062a\u0634\u063a\u064a\u0644 HTML CSS JS \u0627\u0644\u0646\u062a\u064a\u062c\u0629 \u062c\u0627\u0647\u0632 \u0627\u0644\u062d\u0635\u0646 \u0627\u0644\u062a\u0642\u0646\u064a<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_gspb_post_css":"","dsgo_overlay_header":false,"dsgo_overlay_header_text_color":"","dsgo_overlay_skip_top_bar":false,"_designsetgo_exclude_llms":false,"_glsr_average":0,"_glsr_ranking":0,"_glsr_reviews":0,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-5249","page","type-page","status-publish","hentry"],"blocksy_meta":{"page_structure_type":"type-4","styles_descriptor":{"styles":{"desktop":"","tablet":"","mobile":""},"google_fonts":[],"version":6}},"acf":[],"_links":{"self":[{"href":"https:\/\/alhisn.tech\/en\/wp-json\/wp\/v2\/pages\/5249","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/alhisn.tech\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/alhisn.tech\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/alhisn.tech\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/alhisn.tech\/en\/wp-json\/wp\/v2\/comments?post=5249"}],"version-history":[{"count":0,"href":"https:\/\/alhisn.tech\/en\/wp-json\/wp\/v2\/pages\/5249\/revisions"}],"wp:attachment":[{"href":"https:\/\/alhisn.tech\/en\/wp-json\/wp\/v2\/media?parent=5249"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}