{"id":1603,"date":"2025-09-17T20:47:43","date_gmt":"2025-09-17T20:47:43","guid":{"rendered":"https:\/\/crvo.sajtkreator.mk\/?page_id=1603"},"modified":"2025-09-21T14:38:13","modified_gmt":"2025-09-21T12:38:13","slug":"uredi","status":"publish","type":"page","link":"https:\/\/konektroam.com\/mk\/uredi\/","title":{"rendered":"\u041f\u043e\u0434\u0434\u0440\u0436\u0430\u043d\u0438 \u0443\u0440\u0435\u0434\u0438"},"content":{"rendered":"<div class='breakdance'><section class=\"bde-section-1603-100 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h3 class=\"bde-heading-1603-102 bde-heading\">\n\u041f\u0440\u043e\u0432\u0435\u0440\u0438 \u0434\u0430\u043b\u0438 \u0442\u0432\u043e\u0458\u043e\u0442 \u0443\u0440\u0435\u0434 \u0435 \u043a\u043e\u043c\u043f\u0430\u0442\u0438\u0431\u0438\u043b\u0435\u043d\n<\/h3><\/div>\n<\/section><div class=\"bde-globalblock-1603-103 bde-globalblock\"><div class='breakdance'><section class=\"bde-section-1530-100-1530-1 bde-section bde-section-1530-100\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><div class=\"bde-columns-1530-101-1530-1 bde-columns bde-columns-1530-101\"><div class=\"bde-column-1530-102-1530-1 bde-column bde-column-1530-102\">\n  \n  \n\t\n\n\n\n<h3 class=\"bde-heading-1530-103-1530-1 bde-heading bde-heading-1530-103\">\n\u0411\u0440\u0437\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430\n<\/h3><div class=\"bde-text-1530-104-1530-1 bde-text bde-text-1530-104\">\n\u041f\u0440\u043e\u0432\u0435\u0440\u0438 \u0434\u0430\u043b\u0438 \u0442\u0432\u043e\u0458\u043e\u0442 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u043f\u043e\u0434\u0440\u0436\u0443\u0432\u0430 \u0435\u0421\u0418\u041c.\n<\/div>\n<\/div><div class=\"bde-column-1530-105-1530-1 bde-column bde-column-1530-105\">\n  \n  \n\t\n\n\n\n<div class=\"bde-div-1530-106-1530-1 bde-div bde-div-1530-106\">\n  \n  \n\t\n\n\n\n<div class=\"bde-text-1530-107-1530-1 bde-text bde-text-1530-107\">\n\u0422\u0432\u043e\u0458\u043e\u0442 \u0443\u0440\u0435\u0434\n<\/div><div class=\"bde-code-block-1530-108-1530-1 bde-code-block bde-code-block-1530-108\">\n\n  <div class=\"device-field suggestable\">\n  <input\n    id=\"deviceInput\"\n    name=\"device\"\n    class=\"device-input\"\n    placeholder=\"e.g., iPhone 15, Galaxy S24, Pixel 8\"\n    autocomplete=\"off\"\n  \/>\n  <!-- dropdown -->\n  <div id=\"deviceSuggestions\" class=\"suggestions\" role=\"listbox\" aria-label=\"Device suggestions\"><\/div>\n<\/div>\n\n<!-- Modal -->\n<div id=\"esimOverlay\" class=\"overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"esimTitle\" style=\"display:none;\">\n  <div class=\"modal\">\n    <div class=\"m-head\"><h2 id=\"esimTitle\"><\/h2><\/div>\n    <div class=\"m-body\"><p id=\"esimMsg\"><\/p><\/div>\n    <div class=\"m-foot\"><button class=\"btn\" id=\"esimClose\">\u0417\u0430\u0442\u0432\u043e\u0440\u0438<\/button><\/div>\n  <\/div>\n<\/div>\n\n<\/div>\n  \n<script>\n(function(){\n  const DATA_URL = 'https:\/\/konektroam.com\/devices.php';\n\n  const input   = document.getElementById('deviceInput');\n  const box     = document.getElementById('deviceSuggestions');\n\n  const overlay = document.getElementById('esimOverlay');\n  const mTitle  = document.getElementById('esimTitle');\n  const mMsg    = document.getElementById('esimMsg');\n  const mClose  = document.getElementById('esimClose');\n\n  let devices = [];\n  let ready = false;\n\n  const norm = s => String(s||'').toLowerCase().normalize('NFKD').replace(\/[\\u0300-\\u036f]\/g, '');\n\n  fetch(DATA_URL)\n    .then(r => { if(!r.ok) throw new Error('HTTP ' + r.status); return r.json(); })\n    .then(json => { devices = Array.isArray(json) ? json : []; ready = true; })\n    .catch(err => console.error('Device load failed:', err));\n\n  input.addEventListener('input', () => {\n    if (!ready) return;\n    const q = norm(input.value.trim());\n    if (!q) { box.style.display = 'none'; box.innerHTML = ''; return; }\n\n    \/\/ filter \u2192 rank by contains position\/length \u2192 take 5\n    const results = devices\n      .map(d => ({ d, hay: norm(`${d.brand} ${d.device}`) }))\n      .filter(x => x.hay.includes(q))\n      .sort((a,b) => a.hay.indexOf(q) - b.hay.indexOf(q) || a.hay.length - b.hay.length)\n      .slice(0, 5)\n      .map(x => x.d);\n\n    render(results);\n  });\n\n  \/\/ Close dropdown on blur\/click-out\n  document.addEventListener('click', (e) => {\n    if (!e.target.closest('.suggestable')) { hideBox(); }\n  });\n\n  function render(list) {\n    if (!list.length) { hideBox(); return; }\n    box.innerHTML = list.map(rowHtml).join('');\n    box.style.display = 'block';\n  }\n\n  function rowHtml(d) {\n    const full = `${d.brand} ${d.device}`;\n    const { cls, label, message } = esimMeta(d);\n    \/\/ store details as data-* for click handler\n    return `\n      <div class=\"suggestion\" role=\"option\"\n           data-title=\"${escapeHtml(full)}\"\n           data-msg=\"${escapeHtml(message)}\">\n        <div>\n          <div class=\"title\">${escapeHtml(d.device)}<\/div>\n          <div class=\"brand\">${escapeHtml(d.brand)}<\/div>\n        <\/div>\n        <div class=\"badge ${cls}\">${label}<\/div>\n      <\/div>`;\n  }\n\n  box.addEventListener('click', (e) => {\n    const row = e.target.closest('.suggestion');\n    if (!row) return;\n    const title = row.dataset.title;\n    const msg   = row.dataset.msg;\n    input.value = title;      \/\/ fill input\n    hideBox();\n    openModal(title, msg);\n  });\n\n  function hideBox(){ box.style.display = 'none'; box.innerHTML = ''; }\n\n  function esimMeta(d) {\n    if (Number(d.esim) === 1) {\n      return {\n        cls: 'ok',\n        label: '\u041f\u043e\u0434\u0434\u0440\u0436\u0443\u0432\u0430 eSIM',\n        message: d.note?.trim()\n          ? d.note\n          : '\u0412\u0430\u0448\u0438\u043e\u0442 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u043f\u043e\u0434\u0434\u0440\u0436\u0443\u0432\u0430 eSIM.'\n      };\n    } else if (Number(d.esim) === 2) {\n      return {\n        cls: 'maybe',\n        label: '\u0414\u0435\u043b\u0443\u043c\u043d\u0430 \u043f\u043e\u0434\u0434\u0440\u0448\u043a\u0430',\n        message: d.note?.trim()\n          ? d.note\n          : '\u041d\u0435\u043a\u043e\u0438 \u043c\u043e\u0434\u0435\u043b\u0438 \u043d\u0430 \u043e\u0432\u043e\u0458 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u043f\u043e\u0434\u0434\u0440\u0436\u0443\u0432\u0430\u0430\u0442 eSIM. \u0412\u043e \u041f\u043e\u0441\u0442\u0430\u0432\u043a\u0438 > \u0423\u043f\u0440\u0430\u0432\u0443\u0432\u0430\u0447 \u0441\u043e \u043c\u043e\u0431\u0438\u043b\u043d\u0430 \u043c\u0440\u0435\u0436\u0430\/SIM, \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u0442\u0435 \u0434\u0430\u043b\u0438 \u0438\u043c\u0430 \u043e\u043f\u0446\u0438\u0458\u0430 \u0437\u0430 \u201e\u0414\u043e\u0434\u0430\u0458 eSIM\u201c.'\n      };\n    }\n    return {\n      cls: 'no',\n      label: 'Bez eSIM',\n      message: d.note?.trim()\n        ? d.note\n        : '\u041e\u0432\u043e\u0458 \u0443\u0440\u0435\u0434 \u043d\u0435 \u043f\u043e\u0434\u0434\u0440\u0436\u0443\u0432\u0430 eSIM.'\n    };\n  }\n\n  function openModal(title, msg){\n    mTitle.textContent = title;\n    mMsg.textContent = msg;\n    overlay.style.display = 'grid';\n  }\n  function closeModal(){ overlay.style.display = 'none'; }\n\n  mClose.addEventListener('click', closeModal);\n  overlay.addEventListener('click', (e)=>{ if(e.target === overlay) closeModal(); });\n\n  function escapeHtml(str){\n    return String(str).replace(\/[&<>\"']\/g, s => ({\n      '&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'\n    }[s]));\n  }\n})();\n<\/script>\n\n\n\n\n\n<\/div>\n<\/div>\n<\/div><\/div><\/div>\n<\/section><\/div><\/div><section class=\"bde-section-1603-104 bde-section\">\n  \n  \n\t\n\n\n\n<div class=\"section-container\"><h3 class=\"bde-heading-1603-106 bde-heading\">\n\u041b\u0438\u0441\u0442\u0430 \u043d\u0430 \u0443\u0440\u0435\u0434\u0438\n<\/h3><div class=\"bde-code-block-1603-105 bde-code-block\">\n\n  <div id=\"crvo-esim-device-list\">\n  <!-- Brand \u2192 device pills -->\n  <div id=\"deviceGrid\"><\/div>\n\n  <!-- Modal (reuse your overlay\/modal) -->\n  <div id=\"esimOverlay\" class=\"overlay\" role=\"dialog\" aria-modal=\"true\" aria-labelledby=\"esimTitle\" style=\"display:none;\">\n    <div class=\"modal\">\n      <div class=\"m-head\"><h2 id=\"esimTitle\"><\/h2><\/div>\n      <div class=\"m-body\"><p id=\"esimMsg\"><\/p><\/div>\n      <div class=\"m-foot\"><button class=\"btn\" id=\"esimClose\">\u0417\u0430\u0442\u0432\u043e\u0440\u0438<\/button><\/div>\n    <\/div>\n  <\/div>\n\n  <style>\n    \/* Minimal pills like your screenshot *\/\n    #crvo-esim-device-list .brand-title{\n      font-size:14px;font-weight:600;color:#64748b;margin:18px 0 10px\n    }\n    #crvo-esim-device-list .grid{\n      display:grid;gap:12px;\n      grid-template-columns:repeat(auto-fill,minmax(220px,1fr));\n    }\n    #crvo-esim-device-list .pill{\n      display:flex;align-items:center;justify-content:center;\n      padding:12px;border-radius:14px;border:1px solid #e5e7eb;\n      background:#f8fafc;color:#0f172a;cursor:pointer;text-align:center;\n      transition:transform .06s ease, background .15s ease, border-color .15s ease;\n      min-height:44px;\n    }\n    #crvo-esim-device-list .pill:hover{ transform:translateY(-1px) }\n    #crvo-esim-device-list .pill .name{ font-weight:500; line-height:1.25 }\n\n    \/* status tints (no badges, only subtle color) *\/\n    #crvo-esim-device-list .pill.ok{\n      background:rgba(5,150,105,.06); border-color:rgba(5,150,105,.25);\n    }\n    #crvo-esim-device-list .pill.maybe{\n      background:rgba(217,119,6,.06); border-color:rgba(217,119,6,.25);\n    }\n    #crvo-esim-device-list .pill.no{\n      background:#f8fafc; border-color:#e5e7eb; color:#475569;\n    }\n\n    \/* Dark mode tweaks (if .dark on html\/body) *\/\n    .dark #crvo-esim-device-list .pill{ background:#0b1220; border-color:#223047; color:#e5e7eb }\n    .dark #crvo-esim-device-list .pill.ok{    background:rgba(5,150,105,.12); border-color:rgba(5,150,105,.35) }\n    .dark #crvo-esim-device-list .pill.maybe{ background:rgba(217,119,6,.12); border-color:rgba(217,119,6,.35) }\n    .dark #crvo-esim-device-list .brand-title{ color:#94a3b8 }\n  <\/style>\n\n  <script>\n  (function(){\n    const DATA_URL = 'https:\/\/konektroam.com\/devices.php';\n\n    const root   = document.getElementById('crvo-esim-device-list');\n    const gridEl = root.querySelector('#deviceGrid');\n\n    const overlay= root.querySelector('#esimOverlay');\n    const mTitle = root.querySelector('#esimTitle');\n    const mMsg   = root.querySelector('#esimMsg');\n    const mClose = root.querySelector('#esimClose');\n\n    fetch(DATA_URL,{credentials:'omit'})\n      .then(r=>{ if(!r.ok) throw new Error('HTTP '+r.status); return r.json(); })\n      .then(list=>{\n        const devices = Array.isArray(list) ? list : [];\n        render(devices);\n      })\n      .catch(err=>{\n        console.error(err);\n        gridEl.innerHTML = '<p style=\"color:#b91c1c\">\u041d\u0435 \u0443\u0441\u043f\u0435\u0430\u0432 \u0434\u0430 \u0458\u0430 \u0432\u0447\u0438\u0442\u0430\u043c \u043b\u0438\u0441\u0442\u0430\u0442\u0430 \u043d\u0430 \u0443\u0440\u0435\u0434\u0438.<\/p>';\n      });\n\n    function render(devices){\n      \/\/ group by brand, sort brands + device names\n      const byBrand = devices.reduce((a,d)=>{\n        const b = d.brand || 'Other'; (a[b] ||= []).push(d); return a;\n      },{});\n      const brands = Object.keys(byBrand).sort((a,b)=>a.localeCompare(b));\n\n      let html = '';\nfor(const b of brands){\n  const arr = byBrand[b].slice().sort((x,y)=>x.device.localeCompare(y.device));\n  const brandLabel = (b === 'Other') ? '\u0414\u0440\u0443\u0433\u0438' : b;   \/\/ \ud83d\udc48 translate \"Other\"\n  html += `<div class=\"brand-title\">${esc(brandLabel)}<\/div><div class=\"grid\">`;\n  html += arr.map(d=>{\n    const meta = esimMeta(d);\n    const title = `${d.brand} ${d.device}`;\n    return `\n      <button type=\"button\" class=\"pill ${meta.cls}\" data-title=\"${esc(title)}\" data-msg=\"${esc(meta.message)}\" aria-label=\"${esc(title)}\">\n        <span class=\"name\">${esc(d.device)}<\/span>\n      <\/button>`;\n  }).join('');\n  html += `<\/div>`;\n}\n      gridEl.innerHTML = html;\n    }\n\n    \/\/ click -> modal\n    gridEl.addEventListener('click', e=>{\n      const pill = e.target.closest('.pill'); if(!pill) return;\n      openModal(pill.dataset.title, pill.dataset.msg);\n    });\n\n    function esimMeta(d){\n      const n = Number(d.esim);\n      if(n===1) return { cls:'ok',    message: d.note?.trim() || '\u0412\u0430\u0448\u0438\u043e\u0442 \u0443\u0440\u0435\u0434 \u0446\u0435\u043b\u043e\u0441\u043d\u043e \u043f\u043e\u0434\u0434\u0440\u0436\u0443\u0432\u0430 eSIM.' };\n      if(n===2) return { cls:'maybe', message: d.note?.trim() || '\u041d\u0435\u043a\u043e\u0438 \u0432\u0430\u0440\u0438\u0458\u0430\u043d\u0442\u0438 \u043d\u0430 \u043e\u0432\u043e\u0458 \u043c\u043e\u0434\u0435\u043b \u043f\u043e\u0434\u0434\u0440\u0436\u0443\u0432\u0430\u0430\u0442 eSIM. \u0412\u043e \u041f\u043e\u0441\u0442\u0430\u0432\u043a\u0438 \u2192 \u041c\u043e\u0431\u0438\u043b\u043d\u0430 \u043c\u0440\u0435\u0436\u0430\/SIM \u043f\u0440\u043e\u0432\u0435\u0440\u0435\u0442\u0435 \u0434\u0430\u043b\u0438 \u0438\u043c\u0430 \u201e\u0414\u043e\u0434\u0430\u0458 eSIM\u201c.' };\n      return          { cls:'no',    message: d.note?.trim() || '\u041e\u0432\u043e\u0458 \u0443\u0440\u0435\u0434 \u043d\u0435 \u043f\u043e\u0434\u0434\u0440\u0436\u0443\u0432\u0430 eSIM.' };\n    }\n\n    function openModal(title,msg){\n      mTitle.textContent = title;\n      mMsg.textContent   = msg;\n      overlay.style.display = 'grid';\n    }\n    function closeModal(){ overlay.style.display = 'none'; }\n    mClose.addEventListener('click', closeModal);\n    overlay.addEventListener('click', e=>{ if(e.target===overlay) closeModal(); });\n\n    function esc(str){ return String(str).replace(\/[&<>\"']\/g,s=>({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',\"'\":'&#39;'}[s])); }\n  })();\n  <\/script>\n<\/div>\n\n\n\n<\/div><\/div>\n<\/section><\/div>","protected":false},"excerpt":{"rendered":"<p>\u041f\u0440\u043e\u0432\u0435\u0440\u0438 \u0434\u0430\u043b\u0438 \u0442\u0432\u043e\u0458\u043e\u0442 \u0443\u0440\u0435\u0434 \u0435 \u043a\u043e\u043c\u043f\u0430\u0442\u0438\u0431\u0438\u043b\u0435\u043d \u0411\u0440\u0437\u0430 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0430 \u041f\u0440\u043e\u0432\u0435\u0440\u0438 \u0434\u0430\u043b\u0438 \u0442\u0432\u043e\u0458\u043e\u0442 \u0442\u0435\u043b\u0435\u0444\u043e\u043d \u043f\u043e\u0434\u0440\u0436\u0443\u0432\u0430 \u0435\u0421\u0418\u041c. \u0422\u0432\u043e\u0458\u043e\u0442 \u0443\u0440\u0435\u0434 \u0417\u0430\u0442\u0432\u043e\u0440\u0438 \u041b\u0438\u0441\u0442\u0430 \u043d\u0430 \u0443\u0440\u0435\u0434\u0438 \u0417\u0430\u0442\u0432\u043e\u0440\u0438<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"bwfblock_default_font":"","_breakdance_hide_in_design_set":false,"_breakdance_tags":"","footnotes":""},"class_list":["post-1603","page","type-page","status-publish","hentry"],"aioseo_notices":[],"acf":[],"_links":{"self":[{"href":"https:\/\/konektroam.com\/mk\/wp-json\/wp\/v2\/pages\/1603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/konektroam.com\/mk\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/konektroam.com\/mk\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/konektroam.com\/mk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/konektroam.com\/mk\/wp-json\/wp\/v2\/comments?post=1603"}],"version-history":[{"count":10,"href":"https:\/\/konektroam.com\/mk\/wp-json\/wp\/v2\/pages\/1603\/revisions"}],"predecessor-version":[{"id":1890,"href":"https:\/\/konektroam.com\/mk\/wp-json\/wp\/v2\/pages\/1603\/revisions\/1890"}],"wp:attachment":[{"href":"https:\/\/konektroam.com\/mk\/wp-json\/wp\/v2\/media?parent=1603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}