{"id":1713,"date":"2025-08-26T09:38:06","date_gmt":"2025-08-26T09:38:06","guid":{"rendered":"https:\/\/carski3dtisk.si\/?page_id=1713"},"modified":"2026-03-15T08:52:46","modified_gmt":"2026-03-15T08:52:46","slug":"hisne-stevilke","status":"publish","type":"page","link":"https:\/\/carski3dtisk.si\/?page_id=1713","title":{"rendered":"hi\u0161ne \u0161tevilke"},"content":{"rendered":"<div id=\"house-number-generator\" style=\"text-align:center; font-family:sans-serif;\">\n\n  <h2>Ustvari svojo hi\u0161no \u0161tevilko<\/h2>\n\n  <!-- \u0160tevilka -->\n  <input type=\"text\" id=\"number\" placeholder=\"Vpi\u0161i \u0161tevilko\" style=\"font-size:20px; width:100px;\"><br><br>\n\n  <!-- Kraj -->\n  <input type=\"text\" id=\"place\" placeholder=\"Vpi\u0161i kraj\" style=\"font-size:16px; width:150px;\"><br><br>\n\n  <!-- Barve -->\n  <label>Barva \u0161tevilke:<\/label>\n  <input type=\"color\" id=\"numcolor\" value=\"#000000\"><br><br>\n\n  <label>Barva ploskve:<\/label>\n  <input type=\"color\" id=\"fillcolor\" value=\"#FFD700\"><br><br>\n\n  <label>Barva naslova (texta):<\/label>\n  <input type=\"color\" id=\"titlecolor\" value=\"#000000\"><br><br>\n\n  <!-- Oblika -->\n  <label>Izberi obliko:<\/label>\n  <select id=\"shape\">\n    <option value=\"circle\">Okrogla<\/option>\n    <option value=\"square\">Kvadratna<\/option>\n    <option value=\"rectangle\">Pravokotna<\/option>\n  <\/select><br><br>\n\n  <!-- Robovi (le za kvadrat\/pravokotnik) -->\n  <div id=\"corner-container\">\n    <label>Robovi:<\/label>\n    <select id=\"corners\">\n      <option value=\"sharp\">\u0160pi\u010dasti<\/option>\n      <option value=\"rounded\">Zaobljeni<\/option>\n    <\/select><br><br>\n  <\/div>\n\n  <!-- Preview -->\n  <div id=\"preview\" style=\"\n      margin:20px auto;\n      width:150px;\n      height:150px;\n      background-color:#FFD700;\n      display:flex;\n      flex-direction:column;\n      align-items:center;\n      justify-content:center;\n      font-weight:bold;\n      border-radius:0%;\n      box-shadow: 0px 5px 15px rgba(0,0,0,0.3);\n      background: linear-gradient(145deg, #FFD700, #FFC107);\n  \">\n    <span id=\"num\" style=\"font-size:60px; color:#000; text-shadow: 1px 1px 2px rgba(0,0,0,0.5);\">12<\/span>\n    <span id=\"place-preview\" style=\"font-size:16px; color:#000;\">Vpi\u0161i kraj<\/span>\n  <\/div>\n\n  <!-- Gumb za ko\u0161arico -->\n  <button id=\"add-to-cart\" style=\"padding:10px 20px; font-size:18px;\">Dodaj v ko\u0161arico<\/button>\n\n<\/div>\n\n<script>\nconst numberInput = document.getElementById(\"number\");\nconst placeInput = document.getElementById(\"place\");\nconst numColor = document.getElementById(\"numcolor\");\nconst fillColor = document.getElementById(\"fillcolor\");\nconst titleColor = document.getElementById(\"titlecolor\");\nconst shape = document.getElementById(\"shape\");\nconst corners = document.getElementById(\"corners\");\nconst cornerContainer = document.getElementById(\"corner-container\");\n\nconst previewBox = document.getElementById(\"preview\");\nconst previewNum = document.getElementById(\"num\");\nconst previewPlace = document.getElementById(\"place-preview\");\n\n\/\/ Live preview \u0161tevilke\nnumberInput.oninput = function(){ previewNum.innerText = this.value || \"12\"; }\n\n\/\/ Live preview kraja\nplaceInput.oninput = function(){ previewPlace.innerText = this.value || \"Vpi\u0161i kraj\"; }\n\n\/\/ Barva \u0161tevilke\nnumColor.oninput = function(){ previewNum.style.color = this.value; }\n\n\/\/ Barva naslova (texta)\ntitleColor.oninput = function(){\n    previewNum.style.textShadow = `1px 1px 2px rgba(0,0,0,0.5), 0 0 0 ${this.value}`;\n    previewPlace.style.color = this.value;\n}\n\n\/\/ Barva ploskve z 3D efektom\nfillColor.oninput = function(){\n    previewBox.style.backgroundColor = this.value;\n    previewBox.style.background = `linear-gradient(145deg, ${this.value}, ${shadeColor(this.value, -15)})`;\n}\n\n\/\/ Gradient funkcija\nfunction shadeColor(color, percent) {\n    let f=parseInt(color.slice(1),16),\n        t=percent<0?0:255,\n        p=Math.abs(percent)\/100,\n        R=f>>16, G=f>>8&0x00FF, B=f&0x0000FF;\n    return \"#\"+(0x1000000+(Math.round((t-R)*p+R)*0x10000)+(Math.round((t-G)*p+G)*0x100)+(Math.round((t-B)*p+B))).toString(16).slice(1);\n}\n\n\/\/ Prikaz\/skrivanje robov glede na obliko + preview oblike\nfunction updatePreview(){\n    const value = shape.value;\n    if(value===\"circle\"){\n        cornerContainer.style.display = \"none\";\n        previewBox.style.borderRadius = \"50%\";\n        previewBox.style.width = \"150px\";\n        previewBox.style.height = \"150px\";\n    } else if(value===\"square\"){\n        cornerContainer.style.display = \"block\";\n        previewBox.style.width = \"150px\";\n        previewBox.style.height = \"150px\";\n        previewBox.style.borderRadius = (corners.value===\"rounded\") ? \"20%\" : \"0%\";\n    } else if(value===\"rectangle\"){\n        cornerContainer.style.display = \"block\";\n        previewBox.style.width = \"200px\";\n        previewBox.style.height = \"120px\";\n        previewBox.style.borderRadius = (corners.value===\"rounded\") ? \"15px\" : \"0px\";\n    }\n}\n\n\/\/ Posodobi ob spremembi\nshape.onchange = updatePreview;\ncorners.onchange = updatePreview;\n\n\/\/ Inicialno\nupdatePreview();\n\n\/\/ Dodaj v ko\u0161arico kot izdelek z unikatno \u0161tevilko\ndocument.getElementById(\"add-to-cart\").onclick = function(){\n    const productID = 123; \/\/ ID tvojega izdelka\n    const hisnaStevilka = numberInput.value || \"12\";\n    \/\/ Preusmeri na custom ko\u0161arico z add-to-cart parametrom\n    window.location.href = \"\/?page_id=211&add-to-cart=\" + productID + \"&hisna_stevilka=\" + encodeURIComponent(hisnaStevilka);\n};\n<\/script><p><\/p>","protected":false},"excerpt":{"rendered":"<p>Ustvari svojo hi\u0161no \u0161tevilko Barva \u0161tevilke: Barva ploskve: Barva naslova (texta): Izberi obliko: OkroglaKvadratnaPravokotna Robovi: \u0160pi\u010dastiZaobljeni 12 Vpi\u0161i kraj Dodaj v ko\u0161arico<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1713","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/carski3dtisk.si\/index.php?rest_route=\/wp\/v2\/pages\/1713","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carski3dtisk.si\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carski3dtisk.si\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carski3dtisk.si\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/carski3dtisk.si\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1713"}],"version-history":[{"count":32,"href":"https:\/\/carski3dtisk.si\/index.php?rest_route=\/wp\/v2\/pages\/1713\/revisions"}],"predecessor-version":[{"id":1839,"href":"https:\/\/carski3dtisk.si\/index.php?rest_route=\/wp\/v2\/pages\/1713\/revisions\/1839"}],"wp:attachment":[{"href":"https:\/\/carski3dtisk.si\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}