DURA Product Configurator<\/title>\r\n<style>\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n body { font-family: 'Segoe UI', sans-serif; background: #f5f5f5; color: #222; }\r\n\r\n .app { display: flex; min-height: 100vh; }\r\n\r\n \/* LEFT SIDEBAR \u2014 product list *\/\r\n .sidebar {\r\n width: 200px; flex-shrink: 0;\r\n background: #fff; border-right: 1px solid #e8e8e8;\r\n padding: 24px 12px; display: flex; flex-direction: column; gap: 10px;\r\n }\r\n .sidebar h2 { font-size: .75rem; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; padding: 0 4px; }\r\n\r\n .product-card {\r\n background: #fafafa; border: 2px solid #e8e8e8; border-radius: 10px;\r\n cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s;\r\n display: flex; flex-direction: column; align-items: center;\r\n padding: 10px 8px; gap: 8px;\r\n }\r\n .product-card:hover { border-color: #ED232E; background: #fff; box-shadow: 0 2px 10px rgba(237,35,46,.12); }\r\n .product-card.selected { border-color: #ED232E; background: #fff; box-shadow: 0 2px 14px rgba(237,35,46,.2); }\r\n .product-card img.thumb { width: 80px; height: 80px; object-fit: contain; }\r\n .product-card .name { font-size: .72rem; font-weight: 600; color: #333; text-align: center; line-height: 1.3; }\r\n .product-card .sub { font-size: .68rem; color: #ED232E; font-weight: 700; }\r\n\r\n \/* MAIN AREA *\/\r\n .main { flex: 1; padding: 32px; display: flex; flex-direction: column; gap: 28px; }\r\n\r\n .editor-row { display: flex; flex-wrap: wrap; gap: 36px; }\r\n\r\n \/* Canvas *\/\r\n .canvas-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }\r\n #canvas-container {\r\n position: relative; width: 500px; height: 500px;\r\n border: 2px dashed #ddd; border-radius: 14px;\r\n overflow: hidden; background: #fff; user-select: none;\r\n }\r\n #product-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; }\r\n #logo-overlay { position: absolute; cursor: move; display: none; touch-action: none; }\r\n #logo-canvas { width: 100%; height: 100%; display: block; pointer-events: none; }\r\n #resize-handle {\r\n position: absolute; bottom: -10px; right: -10px;\r\n width: 20px; height: 20px;\r\n background: #fff; border: 2px solid #555;\r\n border-radius: 4px; cursor: se-resize; z-index: 10;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n #resize-handle::before, #resize-handle::after {\r\n content: ''; position: absolute; background: #555; border-radius: 2px;\r\n }\r\n #resize-handle::before { width: 2px; height: 10px; }\r\n #resize-handle::after { width: 10px; height: 2px; }\r\n #remove-logo-btn {\r\n position: absolute; top: 8px; right: 8px;\r\n background: rgba(30,30,30,.75); color: #fff; border: none;\r\n border-radius: 6px; font-size: .75rem; font-weight: 600;\r\n padding: 4px 10px; cursor: pointer; opacity: 0;\r\n transition: opacity .2s; z-index: 20; pointer-events: none;\r\n }\r\n #canvas-container:hover #remove-logo-btn.visible { opacity: 1; pointer-events: auto; }\r\n .canvas-hint { font-size: .78rem; color: #aaa; text-align: center; }\r\n\r\n \/* Controls *\/\r\n .controls { flex: 1 1 260px; display: flex; flex-direction: column; gap: 18px; min-width: 220px; }\r\n .product-title { font-size: 1.2rem; font-weight: 700; color: #1e1e1e; }\r\n .product-sub { font-size: .9rem; color: #ED232E; font-weight: 600; }\r\n\r\n .upload-area {\r\n border: 2px dashed #ddd; border-radius: 10px; padding: 20px;\r\n text-align: center; cursor: pointer; transition: border-color .2s, background .2s;\r\n }\r\n .upload-area:hover { border-color: #ED232E; background: #fff5f5; }\r\n .upload-area .icon { font-size: 1.8rem; margin-bottom: 6px; }\r\n .upload-area p { font-size: .82rem; color: #666; }\r\n .upload-area span { color: #ED232E; font-weight: 600; }\r\n #file-input { display: none; }\r\n\r\n .control-group { display: flex; flex-direction: column; gap: 8px; }\r\n .control-group label { font-size: .78rem; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: .5px; }\r\n\r\n input[type=range] { width: 100%; accent-color: #ED232E; cursor: pointer; }\r\n\r\n .color-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\r\n .color-swatch {\r\n width: 26px; height: 26px; border-radius: 50%; cursor: pointer;\r\n border: 2px solid transparent; transition: border-color .15s, transform .15s; flex-shrink: 0;\r\n }\r\n .color-swatch:hover, .color-swatch.active { border-color: #ED232E; transform: scale(1.15); }\r\n .color-swatch.custom { background: conic-gradient(red,yellow,lime,cyan,blue,magenta,red); position: relative; overflow: hidden; }\r\n .color-swatch.custom input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: none; padding: 0; }\r\n\r\n \/* Remove BG *\/\r\n .bg-remove-row { display: flex; align-items: center; gap: 10px; }\r\n .btn-sm {\r\n padding: 7px 14px; border: none; border-radius: 7px; font-size: .8rem;\r\n font-weight: 600; cursor: pointer; transition: opacity .2s;\r\n }\r\n .btn-sm:hover { opacity: .82; }\r\n .btn-ghost { background: #e8e8e8; color: #333; border: 1px solid #ccc; }\r\n .btn-ghost:hover { background: #ddd; }\r\n .btn-ghost.active { background: #1e1e1e; color: #fff; border-color: #1e1e1e; }\r\n .bg-hint { font-size: .74rem; color: #aaa; }\r\n\r\n textarea {\r\n width: 100%; min-height: 80px; padding: 10px 12px;\r\n border: 2px solid #e0e0e0; border-radius: 8px;\r\n font-family: inherit; font-size: .88rem; color: #333;\r\n resize: vertical; outline: none; line-height: 1.5; transition: border-color .2s;\r\n }\r\n textarea:focus { border-color: #ED232E; }\r\n textarea::placeholder { color: #bbb; }\r\n\r\n .btn-primary {\r\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\r\n padding: 11px 24px; background: #ED232E; color: #fff; border: none;\r\n border-radius: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; transition: opacity .2s;\r\n }\r\n .btn-primary:hover { opacity: .87; }\r\n\r\n hr { border: none; border-top: 1px solid #f0f0f0; }\r\n\r\n .placeholder-msg {\r\n flex: 1; display: flex; align-items: center; justify-content: center;\r\n color: #ccc; font-size: 1rem; font-weight: 500; letter-spacing: .5px;\r\n text-align: center; padding: 40px;\r\n }\r\n\r\n #logo-panel { display: none; flex-direction: column; gap: 18px; }\r\n\r\n @media(max-width:700px) {\r\n .app { flex-direction: column; }\r\n .sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 12px; border-right: none; border-bottom: 1px solid #e8e8e8; }\r\n .sidebar h2 { display: none; }\r\n .product-card { min-width: 110px; }\r\n #canvas-container { width: 320px; height: 320px; }\r\n .main { padding: 20px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"app\">\r\n\r\n \r\n <div class=\"sidebar\">\r\n <h2>Products<\/h2>\r\n <div id=\"products-list\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"main\">\r\n <div id=\"placeholder-msg\" class=\"placeholder-msg\">\u2190 Select a product to get started<\/div>\r\n\r\n <div class=\"editor-row\" id=\"editor-row\" style=\"display:none\">\r\n\r\n <div class=\"canvas-wrap\">\r\n <div id=\"canvas-container\">\r\n <img decoding=\"async\" id=\"product-img\" src=\"\" alt=\"Product\" crossorigin=\"anonymous\">\r\n <div id=\"logo-overlay\">\r\n <canvas id=\"logo-canvas\"><\/canvas>\r\n <div id=\"resize-handle\"><\/div>\r\n <\/div>\r\n <button id=\"remove-logo-btn\">\u2715 Remove<\/button>\r\n <\/div>\r\n <p class=\"canvas-hint\" id=\"canvas-hint\">Upload your logo and place it on the product<\/p>\r\n <\/div>\r\n\r\n <div class=\"controls\">\r\n <div>\r\n <div class=\"product-title\" id=\"ctrl-name\"><\/div>\r\n <div class=\"product-sub\" id=\"ctrl-sub\"><\/div>\r\n <\/div>\r\n\r\n <hr>\r\n\r\n <div class=\"upload-area\" id=\"upload-area\">\r\n <div class=\"icon\">\ud83d\udcc2<\/div>\r\n <div class=\"upload-text\">\r\n <p><span>Click<\/span> or drag & drop your logo<\/p>\r\n <p>PNG, JPG, SVG \u2014 max. 5 MB<\/p>\r\n <\/div>\r\n <input type=\"file\" id=\"file-input\" accept=\"image\/*\">\r\n <\/div>\r\n\r\n <div id=\"logo-panel\">\r\n\r\n <div class=\"bg-remove-row\">\r\n <button class=\"btn-sm btn-ghost\" id=\"bg-remove-btn\">\u2702 Remove background<\/button>\r\n <span class=\"bg-hint\" id=\"bg-hint\">Works best on white\/light backgrounds<\/span>\r\n <\/div>\r\n\r\n <div class=\"control-group\">\r\n <label>Logo Colour<\/label>\r\n <div class=\"color-row\" id=\"color-swatches\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"control-group\">\r\n <label>Opacity: <strong id=\"opacity-val\">100<\/strong>%<\/label>\r\n <input type=\"range\" id=\"opacity-slider\" min=\"10\" max=\"100\" value=\"100\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <hr>\r\n\r\n <div class=\"control-group\">\r\n <label>Additional Notes<\/label>\r\n <textarea id=\"notes\" placeholder=\"e.g. Pantone 286 C, specific thread colour, any other additional information\u2026\"><\/textarea>\r\n <\/div>\r\n\r\n <button class=\"btn-primary\" id=\"download-btn\">\u2b07 Download Preview<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst products = [\r\n { name:'DURA Pistol Trigger Holster', sub:'Size S', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pistol%20Trigger%20Holster%20-%20Size%20S.jpg' },\r\n { name:'DURA Pocket Holster', sub:'Size L', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pocket%20Holster%20-%20Size%20L.jpg' },\r\n { name:'DURA Pocket Holster', sub:'Size M', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pocket%20Holster%20-%20Size%20M.jpg' },\r\n { name:'DURA Pouch Holster', sub:'Size L', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pouch%20Holster%20-%20Size%20L.jpg' },\r\n { name:'DURA Pouch Holster', sub:'Size M', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pouch%20Holster%20-%20Size%20M.jpg' },\r\n { name:'DURA Pouch Holster', sub:'Size S', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pouch%20Holster%20-%20Size%20S.jpg' },\r\n];\r\n\r\nconst colorPresets = [\r\n { label:'Original', color:null, isOriginal:true },\r\n { label:'Black', color:'#000000', bg:'#000000' },\r\n { label:'White', color:'#ffffff', bg:'#ffffff' },\r\n { label:'Red', color:'#ED232E', bg:'#ED232E' },\r\n { label:'Navy', color:'#1a2a6c', bg:'#1a2a6c' },\r\n { label:'Gold', color:'#f5a623', bg:'#f5a623' },\r\n { label:'Custom', color:null, isCustom:true },\r\n];\r\n\r\nlet logoImg=null, logoImgOriginal=null;\r\nlet logoPos={x:130,y:130}, logoSize={w:140,h:140};\r\nlet dragging=false, resizing=false, dragStart={}, resizeStart={};\r\nlet currentTint=null, currentOpacity=1;\r\nlet bgRemoved=false;\r\n\r\nconst productsList = document.getElementById('products-list');\r\nconst editorRow = document.getElementById('editor-row');\r\nconst placeholder = document.getElementById('placeholder-msg');\r\nconst productImgEl = document.getElementById('product-img');\r\nconst ctrlName = document.getElementById('ctrl-name');\r\nconst ctrlSub = document.getElementById('ctrl-sub');\r\nconst logoOverlay = document.getElementById('logo-overlay');\r\nconst logoCanvas = document.getElementById('logo-canvas');\r\nconst fileInput = document.getElementById('file-input');\r\nconst uploadArea = document.getElementById('upload-area');\r\nconst opacitySlider= document.getElementById('opacity-slider');\r\nconst opacityVal = document.getElementById('opacity-val');\r\nconst logoPanel = document.getElementById('logo-panel');\r\nconst removeLogo = document.getElementById('remove-logo-btn');\r\nconst downloadBtn = document.getElementById('download-btn');\r\nconst canvasHint = document.getElementById('canvas-hint');\r\nconst bgBtn = document.getElementById('bg-remove-btn');\r\nconst bgHint = document.getElementById('bg-hint');\r\n\r\n\/\/ Build sidebar\r\nproducts.forEach(p => {\r\n const card = document.createElement('div');\r\n card.className = 'product-card';\r\n const img = document.createElement('img');\r\n img.className='thumb'; img.src=p.url; img.alt=p.name; img.crossOrigin='anonymous';\r\n const nameEl = document.createElement('div');\r\n nameEl.className='name'; nameEl.textContent=p.name;\r\n const subEl = document.createElement('div');\r\n subEl.className='sub'; subEl.textContent=p.sub;\r\n card.appendChild(img); card.appendChild(nameEl); card.appendChild(subEl);\r\n card.addEventListener('click', () => selectProduct(p, card));\r\n productsList.appendChild(card);\r\n});\r\n\r\nfunction selectProduct(p, card) {\r\n document.querySelectorAll('.product-card').forEach(c=>c.classList.remove('selected'));\r\n card.classList.add('selected');\r\n ctrlName.textContent=p.name; ctrlSub.textContent=p.sub;\r\n productImgEl.src=p.url;\r\n placeholder.style.display='none';\r\n editorRow.style.display='flex';\r\n}\r\n\r\n\/\/ Colour swatches\r\nconst swatchRow = document.getElementById('color-swatches');\r\ncolorPresets.forEach((preset,idx) => {\r\n const sw = document.createElement('div');\r\n sw.className='color-swatch'+(idx===0?' active':'');\r\n sw.title=preset.label;\r\n if(preset.isOriginal){\r\n sw.style.cssText='background:#e8e8e8;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa;';\r\n sw.textContent='\u2715';\r\n sw.addEventListener('click',()=>{ currentTint=null; setActiveSwatch(sw); redrawLogo(); });\r\n } else if(preset.isCustom){\r\n sw.classList.add('custom');\r\n const ci=document.createElement('input'); ci.type='color'; ci.value='#ED232E';\r\n ci.addEventListener('input',e=>{ currentTint=e.target.value; setActiveSwatch(sw); redrawLogo(); });\r\n sw.appendChild(ci);\r\n } else {\r\n sw.style.background=preset.bg;\r\n if(preset.color==='#ffffff') sw.style.border='2px solid #ccc';\r\n sw.addEventListener('click',()=>{ currentTint=preset.color; setActiveSwatch(sw); redrawLogo(); });\r\n }\r\n swatchRow.appendChild(sw);\r\n});\r\nfunction setActiveSwatch(el){ document.querySelectorAll('.color-swatch').forEach(s=>s.classList.remove('active')); el.classList.add('active'); }\r\n\r\n\/\/ Upload\r\nuploadArea.addEventListener('click',()=>fileInput.click());\r\nuploadArea.addEventListener('dragover',e=>{e.preventDefault();uploadArea.style.borderColor='#ED232E';});\r\nuploadArea.addEventListener('dragleave',()=>uploadArea.style.borderColor='');\r\nuploadArea.addEventListener('drop',e=>{e.preventDefault();uploadArea.style.borderColor='';if(e.dataTransfer.files[0])loadLogo(e.dataTransfer.files[0]);});\r\nfileInput.addEventListener('change',()=>{if(fileInput.files[0])loadLogo(fileInput.files[0]);});\r\n\r\nfunction loadLogo(file){\r\n if(file.size>5*1024*1024){alert('File too large (max 5 MB)');return;}\r\n const r=new FileReader();\r\n r.onload=e=>{\r\n const img=new Image();\r\n img.onload=()=>{\r\n logoImg=img; logoImgOriginal=img;\r\n bgRemoved=false; bgBtn.classList.remove('active'); bgHint.textContent='Works best on white\/light backgrounds';\r\n const ratio=img.naturalWidth\/img.naturalHeight;\r\n const initW=160, initH=Math.round(initW\/ratio);\r\n logoPos={x:Math.round((500-initW)\/2), y:Math.round((500-initH)\/2)};\r\n logoSize={w:initW, h:initH};\r\n applyLogoTransform(); redrawLogo();\r\n logoOverlay.style.display='block';\r\n logoPanel.style.display='flex';\r\n removeLogo.classList.add('visible');\r\n canvasHint.textContent='Drag the logo to reposition \u00b7 grab the red dot to resize';\r\n };\r\n img.src=e.target.result;\r\n };\r\n r.readAsDataURL(file);\r\n}\r\n\r\n\/\/ Remove background (canvas-based, targets light\/white pixels)\r\nbgBtn.addEventListener('click',()=>{\r\n if(!logoImg) return;\r\n if(bgRemoved){\r\n \/\/ Restore original\r\n logoImg=logoImgOriginal; bgRemoved=false;\r\n bgBtn.classList.remove('active'); bgBtn.textContent='\u2702 Remove background';\r\n bgHint.textContent='Works best on white\/light backgrounds';\r\n redrawLogo(); return;\r\n }\r\n const tmp=document.createElement('canvas');\r\n tmp.width=logoImg.naturalWidth; tmp.height=logoImg.naturalHeight;\r\n const ctx=tmp.getContext('2d');\r\n ctx.drawImage(logoImg,0,0);\r\n const data=ctx.getImageData(0,0,tmp.width,tmp.height);\r\n const d=data.data;\r\n const threshold=230; \/\/ pixels brighter than this become transparent\r\n for(let i=0;i<d.length;i+=4){\r\n const r=d[i],g=d[i+1],b=d[i+2];\r\n const brightness=(r+g+b)\/3;\r\n if(brightness>threshold){\r\n \/\/ Soft edge: fade based on how close to white\r\n const alpha=Math.round((255-brightness)\/(255-threshold)*255);\r\n d[i+3]=Math.min(d[i+3],alpha);\r\n }\r\n }\r\n ctx.putImageData(data,0,0);\r\n const newImg=new Image();\r\n newImg.onload=()=>{\r\n logoImg=newImg; bgRemoved=true;\r\n bgBtn.classList.add('active'); bgBtn.textContent='\u21a9 Restore original';\r\n bgHint.textContent='Background removed';\r\n redrawLogo();\r\n };\r\n newImg.src=tmp.toDataURL();\r\n});\r\n\r\nfunction redrawLogo(){\r\n if(!logoImg) return;\r\n const w=logoSize.w, h=logoSize.h;\r\n logoCanvas.width=w; logoCanvas.height=h;\r\n const ctx=logoCanvas.getContext('2d');\r\n ctx.clearRect(0,0,w,h);\r\n ctx.drawImage(logoImg,0,0,w,h);\r\n if(currentTint){\r\n ctx.globalCompositeOperation='source-in';\r\n ctx.fillStyle=currentTint; ctx.fillRect(0,0,w,h);\r\n ctx.globalCompositeOperation='source-over';\r\n }\r\n}\r\n\r\nfunction applyLogoTransform(){\r\n const cont=document.getElementById('canvas-container');\r\n logoPos.x=Math.max(0,Math.min(logoPos.x,cont.offsetWidth-logoSize.w));\r\n logoPos.y=Math.max(0,Math.min(logoPos.y,cont.offsetHeight-logoSize.h));\r\n logoOverlay.style.left=logoPos.x+'px'; logoOverlay.style.top=logoPos.y+'px';\r\n logoOverlay.style.width=logoSize.w+'px'; logoOverlay.style.height=logoSize.h+'px';\r\n logoCanvas.width=logoSize.w; logoCanvas.height=logoSize.h;\r\n redrawLogo();\r\n}\r\n\r\n\/\/ Drag & resize\r\nlogoOverlay.addEventListener('mousedown',e=>{ if(e.target===document.getElementById('resize-handle')) return; dragging=true; dragStart={mx:e.clientX,my:e.clientY,lx:logoPos.x,ly:logoPos.y}; e.preventDefault(); });\r\nlogoOverlay.addEventListener('touchstart',e=>{ if(e.target===document.getElementById('resize-handle')) return; const t=e.touches[0]; dragging=true; dragStart={mx:t.clientX,my:t.clientY,lx:logoPos.x,ly:logoPos.y}; },{passive:true});\r\ndocument.addEventListener('mousemove',e=>{ if(dragging){logoPos.x=dragStart.lx+e.clientX-dragStart.mx;logoPos.y=dragStart.ly+e.clientY-dragStart.my;applyLogoTransform();} if(resizing){ const delta=e.clientX-resizeStart.mx; const newW=Math.max(30,resizeStart.w+delta); logoSize.w=newW; logoSize.h=Math.round(newW\/resizeStart.ratio); applyLogoTransform(); } });\r\ndocument.addEventListener('touchmove',e=>{ const t=e.touches[0]; if(dragging){logoPos.x=dragStart.lx+t.clientX-dragStart.mx;logoPos.y=dragStart.ly+t.clientY-dragStart.my;applyLogoTransform();} if(resizing){ const delta=t.clientX-resizeStart.mx; const newW=Math.max(30,resizeStart.w+delta); logoSize.w=newW; logoSize.h=Math.round(newW\/resizeStart.ratio); applyLogoTransform(); } },{passive:true});\r\ndocument.addEventListener('mouseup',()=>{dragging=false;resizing=false;});\r\ndocument.addEventListener('touchend',()=>{dragging=false;resizing=false;});\r\ndocument.getElementById('resize-handle').addEventListener('mousedown',e=>{ resizing=true; const ratio=logoSize.w\/logoSize.h; resizeStart={mx:e.clientX,my:e.clientY,w:logoSize.w,h:logoSize.h,ratio}; e.preventDefault(); e.stopPropagation(); });\r\ndocument.getElementById('resize-handle').addEventListener('touchstart',e=>{ const t=e.touches[0]; resizing=true; const ratio=logoSize.w\/logoSize.h; resizeStart={mx:t.clientX,my:t.clientY,w:logoSize.w,h:logoSize.h,ratio}; e.stopPropagation(); },{passive:true});\r\n\r\nopacitySlider.addEventListener('input',()=>{ opacityVal.textContent=opacitySlider.value; currentOpacity=opacitySlider.value\/100; logoOverlay.style.opacity=currentOpacity; });\r\n\r\nremoveLogo.addEventListener('click',()=>{\r\n logoOverlay.style.display='none'; logoPanel.style.display='none';\r\n removeLogo.classList.remove('visible');\r\n logoImg=null; logoImgOriginal=null; bgRemoved=false;\r\n opacitySlider.value=100; opacityVal.textContent='100'; logoOverlay.style.opacity=1; currentOpacity=1;\r\n currentTint=null; fileInput.value='';\r\n bgBtn.classList.remove('active'); bgBtn.textContent='\u2702 Remove background';\r\n canvasHint.textContent='Upload your logo and place it on the product';\r\n document.querySelectorAll('.color-swatch').forEach((s,i)=>s.classList.toggle('active',i===0));\r\n});\r\n\r\n\/\/ Download\r\ndownloadBtn.addEventListener('click',()=>{\r\n const cont=document.getElementById('canvas-container');\r\n const contRect=cont.getBoundingClientRect();\r\n const W=cont.clientWidth, H=cont.clientHeight;\r\n\r\n const canvas=document.createElement('canvas');\r\n canvas.width=W; canvas.height=H;\r\n const ctx=canvas.getContext('2d');\r\n\r\n const pImg=new Image(); pImg.crossOrigin='anonymous';\r\n pImg.onload=()=>{ ctx.fillStyle='#fff'; ctx.fillRect(0,0,W,H); ctx.drawImage(pImg,0,0,W,H); addLogoAndSave(ctx,canvas,W,H,contRect); };\r\n pImg.onerror=()=>{ ctx.fillStyle='#f0f0f0'; ctx.fillRect(0,0,W,H); addLogoAndSave(ctx,canvas,W,H,contRect); };\r\n pImg.src=productImgEl.src;\r\n});\r\n\r\nfunction addLogoAndSave(ctx,canvas,W,H,contRect){\r\n if(logoImg&&logoOverlay.style.display!=='none'){\r\n const overlayRect=logoOverlay.getBoundingClientRect();\r\n const x=overlayRect.left-contRect.left;\r\n const y=overlayRect.top-contRect.top;\r\n const w=overlayRect.width;\r\n const h=overlayRect.height;\r\n ctx.globalAlpha=currentOpacity;\r\n ctx.drawImage(logoCanvas,x,y,w,h);\r\n ctx.globalAlpha=1;\r\n }\r\n const notes=document.getElementById('notes').value.trim();\r\n if(!notes){ doDownload(canvas); return; }\r\n\r\n const fs=14, pad=20, lh=20;\r\n ctx.font=fs+'px Segoe UI,sans-serif';\r\n const maxW=W-pad*2;\r\n const words=notes.split(' '); let lines=[],line='';\r\n for(const w of words){ const test=line?line+' '+w:w; if(ctx.measureText(test).width>maxW&&line){lines.push(line);line=w;}else line=test; }\r\n if(line) lines.push(line);\r\n\r\n const labelH=20, textH=lines.length*lh+pad;\r\n const extra=labelH+textH+pad;\r\n const final=document.createElement('canvas'); final.width=W; final.height=H+extra;\r\n const fc=final.getContext('2d');\r\n fc.fillStyle='#fff'; fc.fillRect(0,0,final.width,final.height);\r\n fc.drawImage(canvas,0,0);\r\n fc.strokeStyle='#e0e0e0'; fc.lineWidth=1;\r\n fc.beginPath(); fc.moveTo(pad,H+10); fc.lineTo(final.width-pad,H+10); fc.stroke();\r\n fc.fillStyle='#ED232E'; fc.font='bold 10px Segoe UI,sans-serif';\r\n fc.fillText('ADDITIONAL NOTES',pad,H+26);\r\n fc.fillStyle='#333'; fc.font=fs+'px Segoe UI,sans-serif';\r\n lines.forEach((l,i)=>fc.fillText(l,pad,H+labelH+pad+(i*lh)));\r\n doDownload(final);\r\n}\r\n\r\n\r\nfunction doDownload(canvas){ const a=document.createElement('a'); a.download='DURA-preview.png'; a.href=canvas.toDataURL('image\/png'); a.click(); }\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DURA Product Configurator Products \u2190 Select a product to get started \u2715 Remove Upload your logo and place it on the product \ud83d\udcc2 Click or drag & drop your logo PNG, JPG, SVG \u2014 max. 5 MB \u2702 Remove background Works best on white\/light backgrounds Logo Colour Opacity: 100% Additional Notes \u2b07 Download Preview<\/p>","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-55804","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Add a logo to your DURA Holsters - Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/duratis.com\/it\/add-a-logo-to-your-dura-holsters\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add a logo to your DURA Holsters - Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors\" \/>\n<meta property=\"og:description\" content=\"DURA Product Configurator Products \u2190 Select a product to get started \u2715 Remove Upload your logo and place it on the product \ud83d\udcc2 Click or drag & drop your logo PNG, JPG, SVG \u2014 max. 5 MB \u2702 Remove background Works best on white\/light backgrounds Logo Colour Opacity: 100% Additional Notes \u2b07 Download Preview\" \/>\n<meta property=\"og:url\" content=\"https:\/\/duratis.com\/it\/add-a-logo-to-your-dura-holsters\/\" \/>\n<meta property=\"og:site_name\" content=\"Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/duratis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-12T06:07:23+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/duratis.com\\\/add-a-logo-to-your-dura-holsters\\\/\",\"url\":\"https:\\\/\\\/duratis.com\\\/add-a-logo-to-your-dura-holsters\\\/\",\"name\":\"Add a logo to your DURA Holsters - Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/duratis.com\\\/#website\"},\"datePublished\":\"2026-05-11T10:22:35+00:00\",\"dateModified\":\"2026-05-12T06:07:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/duratis.com\\\/add-a-logo-to-your-dura-holsters\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/duratis.com\\\/add-a-logo-to-your-dura-holsters\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/duratis.com\\\/add-a-logo-to-your-dura-holsters\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/duratis.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add a logo to your DURA Holsters\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/duratis.com\\\/#website\",\"url\":\"https:\\\/\\\/duratis.com\\\/\",\"name\":\"Duratis Accessories | Custom-made Cases, Holsters, Mounts, Screen & Keypad Protectors\",\"description\":\"We make accessories for payment terminals, mobile scanners, mobile computers and other devices.\",\"publisher\":{\"@id\":\"https:\\\/\\\/duratis.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/duratis.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/duratis.com\\\/#organization\",\"name\":\"Duratis\",\"url\":\"https:\\\/\\\/duratis.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/duratis.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/duratis.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/duratis-logo.svg\",\"contentUrl\":\"https:\\\/\\\/duratis.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/duratis-logo.svg\",\"width\":270,\"height\":61,\"caption\":\"Duratis\"},\"image\":{\"@id\":\"https:\\\/\\\/duratis.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/duratis\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/duratis-accessories\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCgCWiGf6mJ-MMSx3M1gfdeg\\\/featured\"],\"legalName\":\"Unito Sp. z o.o. Sp. k.\",\"description\":\"Duratis is a European manufacturer of accessories for POS payment terminals, Data Capture devices and other devices used in business.\",\"email\":\"info@duratis.com\",\"telephone\":\"+48 668 164 082\",\"vatID\":\"PL5862296099\",\"taxID\":\"5862296099\",\"identifier\":{\"@type\":\"PropertyValue\",\"propertyID\":\"KRS\",\"value\":\"0000551492\"},\"address\":{\"@type\":\"PostalAddress\",\"streetAddress\":\"Rewerenda 28\",\"postalCode\":\"80-209\",\"addressLocality\":\"Chwaszczyno\",\"addressCountry\":\"PL\"},\"contactPoint\":{\"@type\":\"ContactPoint\",\"contactType\":\"sales\",\"email\":\"info@duratis.com\",\"telephone\":\"+48 668 164 082\",\"url\":\"https:\\\/\\\/duratis.com\\\/contact\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Aggiungete un logo alle vostre fondine DURA - Accessori Duratis | Custodie, supporti, protezioni per schermi e tastiere","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/duratis.com\/it\/add-a-logo-to-your-dura-holsters\/","og_locale":"it_IT","og_type":"article","og_title":"Add a logo to your DURA Holsters - Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors","og_description":"DURA Product Configurator Products \u2190 Select a product to get started \u2715 Remove Upload your logo and place it on the product \ud83d\udcc2 Click or drag & drop your logo PNG, JPG, SVG \u2014 max. 5 MB \u2702 Remove background Works best on white\/light backgrounds Logo Colour Opacity: 100% Additional Notes \u2b07 Download Preview","og_url":"https:\/\/duratis.com\/it\/add-a-logo-to-your-dura-holsters\/","og_site_name":"Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors","article_publisher":"https:\/\/www.facebook.com\/duratis\/","article_modified_time":"2026-05-12T06:07:23+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/duratis.com\/add-a-logo-to-your-dura-holsters\/","url":"https:\/\/duratis.com\/add-a-logo-to-your-dura-holsters\/","name":"Aggiungete un logo alle vostre fondine DURA - Accessori Duratis | Custodie, supporti, protezioni per schermi e tastiere","isPartOf":{"@id":"https:\/\/duratis.com\/#website"},"datePublished":"2026-05-11T10:22:35+00:00","dateModified":"2026-05-12T06:07:23+00:00","breadcrumb":{"@id":"https:\/\/duratis.com\/add-a-logo-to-your-dura-holsters\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/duratis.com\/add-a-logo-to-your-dura-holsters\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/duratis.com\/add-a-logo-to-your-dura-holsters\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/duratis.com\/"},{"@type":"ListItem","position":2,"name":"Add a logo to your DURA Holsters"}]},{"@type":"WebSite","@id":"https:\/\/duratis.com\/#website","url":"https:\/\/duratis.com\/","name":"Accessori Duratis | Custodie su misura, fondine, supporti, protezioni per schermo e tastiera","description":"Produciamo accessori per terminali di pagamento, scanner mobili, computer portatili e altri dispositivi.","publisher":{"@id":"https:\/\/duratis.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/duratis.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/duratis.com\/#organization","name":"Duratis","url":"https:\/\/duratis.com\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/duratis.com\/#\/schema\/logo\/image\/","url":"https:\/\/duratis.com\/wp-content\/uploads\/2024\/08\/duratis-logo.svg","contentUrl":"https:\/\/duratis.com\/wp-content\/uploads\/2024\/08\/duratis-logo.svg","width":270,"height":61,"caption":"Duratis"},"image":{"@id":"https:\/\/duratis.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/duratis\/","https:\/\/www.linkedin.com\/company\/duratis-accessories\/","https:\/\/www.youtube.com\/channel\/UCgCWiGf6mJ-MMSx3M1gfdeg\/featured"],"legalName":"Unito Sp. z o.o. Sp. k.","description":"Duratis is a European manufacturer of accessories for POS payment terminals, Data Capture devices and other devices used in business.","email":"info@duratis.com","telephone":"+48 668 164 082","vatID":"PL5862296099","taxID":"5862296099","identifier":{"@type":"PropertyValue","propertyID":"KRS","value":"0000551492"},"address":{"@type":"PostalAddress","streetAddress":"Rewerenda 28","postalCode":"80-209","addressLocality":"Chwaszczyno","addressCountry":"PL"},"contactPoint":{"@type":"ContactPoint","contactType":"sales","email":"info@duratis.com","telephone":"+48 668 164 082","url":"https:\/\/duratis.com\/contact\/"}}]}},"_links":{"self":[{"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/pages\/55804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/comments?post=55804"}],"version-history":[{"count":0,"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/pages\/55804\/revisions"}],"wp:attachment":[{"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/media?parent=55804"}],"curies":[{"name":"parola chiave","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nDURA Product Configurator<\/title>\r\n<style>\r\n * { box-sizing: border-box; margin: 0; padding: 0; }\r\n body { font-family: 'Segoe UI', sans-serif; background: #f5f5f5; color: #222; }\r\n\r\n .app { display: flex; min-height: 100vh; }\r\n\r\n \/* LEFT SIDEBAR \u2014 product list *\/\r\n .sidebar {\r\n width: 200px; flex-shrink: 0;\r\n background: #fff; border-right: 1px solid #e8e8e8;\r\n padding: 24px 12px; display: flex; flex-direction: column; gap: 10px;\r\n }\r\n .sidebar h2 { font-size: .75rem; font-weight: 700; color: #999; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; padding: 0 4px; }\r\n\r\n .product-card {\r\n background: #fafafa; border: 2px solid #e8e8e8; border-radius: 10px;\r\n cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s;\r\n display: flex; flex-direction: column; align-items: center;\r\n padding: 10px 8px; gap: 8px;\r\n }\r\n .product-card:hover { border-color: #ED232E; background: #fff; box-shadow: 0 2px 10px rgba(237,35,46,.12); }\r\n .product-card.selected { border-color: #ED232E; background: #fff; box-shadow: 0 2px 14px rgba(237,35,46,.2); }\r\n .product-card img.thumb { width: 80px; height: 80px; object-fit: contain; }\r\n .product-card .name { font-size: .72rem; font-weight: 600; color: #333; text-align: center; line-height: 1.3; }\r\n .product-card .sub { font-size: .68rem; color: #ED232E; font-weight: 700; }\r\n\r\n \/* MAIN AREA *\/\r\n .main { flex: 1; padding: 32px; display: flex; flex-direction: column; gap: 28px; }\r\n\r\n .editor-row { display: flex; flex-wrap: wrap; gap: 36px; }\r\n\r\n \/* Canvas *\/\r\n .canvas-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }\r\n #canvas-container {\r\n position: relative; width: 500px; height: 500px;\r\n border: 2px dashed #ddd; border-radius: 14px;\r\n overflow: hidden; background: #fff; user-select: none;\r\n }\r\n #product-img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; display: block; }\r\n #logo-overlay { position: absolute; cursor: move; display: none; touch-action: none; }\r\n #logo-canvas { width: 100%; height: 100%; display: block; pointer-events: none; }\r\n #resize-handle {\r\n position: absolute; bottom: -10px; right: -10px;\r\n width: 20px; height: 20px;\r\n background: #fff; border: 2px solid #555;\r\n border-radius: 4px; cursor: se-resize; z-index: 10;\r\n display: flex; align-items: center; justify-content: center;\r\n }\r\n #resize-handle::before, #resize-handle::after {\r\n content: ''; position: absolute; background: #555; border-radius: 2px;\r\n }\r\n #resize-handle::before { width: 2px; height: 10px; }\r\n #resize-handle::after { width: 10px; height: 2px; }\r\n #remove-logo-btn {\r\n position: absolute; top: 8px; right: 8px;\r\n background: rgba(30,30,30,.75); color: #fff; border: none;\r\n border-radius: 6px; font-size: .75rem; font-weight: 600;\r\n padding: 4px 10px; cursor: pointer; opacity: 0;\r\n transition: opacity .2s; z-index: 20; pointer-events: none;\r\n }\r\n #canvas-container:hover #remove-logo-btn.visible { opacity: 1; pointer-events: auto; }\r\n .canvas-hint { font-size: .78rem; color: #aaa; text-align: center; }\r\n\r\n \/* Controls *\/\r\n .controls { flex: 1 1 260px; display: flex; flex-direction: column; gap: 18px; min-width: 220px; }\r\n .product-title { font-size: 1.2rem; font-weight: 700; color: #1e1e1e; }\r\n .product-sub { font-size: .9rem; color: #ED232E; font-weight: 600; }\r\n\r\n .upload-area {\r\n border: 2px dashed #ddd; border-radius: 10px; padding: 20px;\r\n text-align: center; cursor: pointer; transition: border-color .2s, background .2s;\r\n }\r\n .upload-area:hover { border-color: #ED232E; background: #fff5f5; }\r\n .upload-area .icon { font-size: 1.8rem; margin-bottom: 6px; }\r\n .upload-area p { font-size: .82rem; color: #666; }\r\n .upload-area span { color: #ED232E; font-weight: 600; }\r\n #file-input { display: none; }\r\n\r\n .control-group { display: flex; flex-direction: column; gap: 8px; }\r\n .control-group label { font-size: .78rem; font-weight: 700; color: #444; text-transform: uppercase; letter-spacing: .5px; }\r\n\r\n input[type=range] { width: 100%; accent-color: #ED232E; cursor: pointer; }\r\n\r\n .color-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }\r\n .color-swatch {\r\n width: 26px; height: 26px; border-radius: 50%; cursor: pointer;\r\n border: 2px solid transparent; transition: border-color .15s, transform .15s; flex-shrink: 0;\r\n }\r\n .color-swatch:hover, .color-swatch.active { border-color: #ED232E; transform: scale(1.15); }\r\n .color-swatch.custom { background: conic-gradient(red,yellow,lime,cyan,blue,magenta,red); position: relative; overflow: hidden; }\r\n .color-swatch.custom input[type=color] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; border: none; padding: 0; }\r\n\r\n \/* Remove BG *\/\r\n .bg-remove-row { display: flex; align-items: center; gap: 10px; }\r\n .btn-sm {\r\n padding: 7px 14px; border: none; border-radius: 7px; font-size: .8rem;\r\n font-weight: 600; cursor: pointer; transition: opacity .2s;\r\n }\r\n .btn-sm:hover { opacity: .82; }\r\n .btn-ghost { background: #e8e8e8; color: #333; border: 1px solid #ccc; }\r\n .btn-ghost:hover { background: #ddd; }\r\n .btn-ghost.active { background: #1e1e1e; color: #fff; border-color: #1e1e1e; }\r\n .bg-hint { font-size: .74rem; color: #aaa; }\r\n\r\n textarea {\r\n width: 100%; min-height: 80px; padding: 10px 12px;\r\n border: 2px solid #e0e0e0; border-radius: 8px;\r\n font-family: inherit; font-size: .88rem; color: #333;\r\n resize: vertical; outline: none; line-height: 1.5; transition: border-color .2s;\r\n }\r\n textarea:focus { border-color: #ED232E; }\r\n textarea::placeholder { color: #bbb; }\r\n\r\n .btn-primary {\r\n display: inline-flex; align-items: center; justify-content: center; gap: 8px;\r\n padding: 11px 24px; background: #ED232E; color: #fff; border: none;\r\n border-radius: 8px; font-size: .9rem; font-weight: 600; cursor: pointer; transition: opacity .2s;\r\n }\r\n .btn-primary:hover { opacity: .87; }\r\n\r\n hr { border: none; border-top: 1px solid #f0f0f0; }\r\n\r\n .placeholder-msg {\r\n flex: 1; display: flex; align-items: center; justify-content: center;\r\n color: #ccc; font-size: 1rem; font-weight: 500; letter-spacing: .5px;\r\n text-align: center; padding: 40px;\r\n }\r\n\r\n #logo-panel { display: none; flex-direction: column; gap: 18px; }\r\n\r\n @media(max-width:700px) {\r\n .app { flex-direction: column; }\r\n .sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 12px; border-right: none; border-bottom: 1px solid #e8e8e8; }\r\n .sidebar h2 { display: none; }\r\n .product-card { min-width: 110px; }\r\n #canvas-container { width: 320px; height: 320px; }\r\n .main { padding: 20px; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n<div class=\"app\">\r\n\r\n \r\n <div class=\"sidebar\">\r\n <h2>Products<\/h2>\r\n <div id=\"products-list\"><\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"main\">\r\n <div id=\"placeholder-msg\" class=\"placeholder-msg\">\u2190 Select a product to get started<\/div>\r\n\r\n <div class=\"editor-row\" id=\"editor-row\" style=\"display:none\">\r\n\r\n <div class=\"canvas-wrap\">\r\n <div id=\"canvas-container\">\r\n <img decoding=\"async\" id=\"product-img\" src=\"\" alt=\"Product\" crossorigin=\"anonymous\">\r\n <div id=\"logo-overlay\">\r\n <canvas id=\"logo-canvas\"><\/canvas>\r\n <div id=\"resize-handle\"><\/div>\r\n <\/div>\r\n <button id=\"remove-logo-btn\">\u2715 Remove<\/button>\r\n <\/div>\r\n <p class=\"canvas-hint\" id=\"canvas-hint\">Upload your logo and place it on the product<\/p>\r\n <\/div>\r\n\r\n <div class=\"controls\">\r\n <div>\r\n <div class=\"product-title\" id=\"ctrl-name\"><\/div>\r\n <div class=\"product-sub\" id=\"ctrl-sub\"><\/div>\r\n <\/div>\r\n\r\n <hr>\r\n\r\n <div class=\"upload-area\" id=\"upload-area\">\r\n <div class=\"icon\">\ud83d\udcc2<\/div>\r\n <div class=\"upload-text\">\r\n <p><span>Click<\/span> or drag & drop your logo<\/p>\r\n <p>PNG, JPG, SVG \u2014 max. 5 MB<\/p>\r\n <\/div>\r\n <input type=\"file\" id=\"file-input\" accept=\"image\/*\">\r\n <\/div>\r\n\r\n <div id=\"logo-panel\">\r\n\r\n <div class=\"bg-remove-row\">\r\n <button class=\"btn-sm btn-ghost\" id=\"bg-remove-btn\">\u2702 Remove background<\/button>\r\n <span class=\"bg-hint\" id=\"bg-hint\">Works best on white\/light backgrounds<\/span>\r\n <\/div>\r\n\r\n <div class=\"control-group\">\r\n <label>Logo Colour<\/label>\r\n <div class=\"color-row\" id=\"color-swatches\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"control-group\">\r\n <label>Opacity: <strong id=\"opacity-val\">100<\/strong>%<\/label>\r\n <input type=\"range\" id=\"opacity-slider\" min=\"10\" max=\"100\" value=\"100\">\r\n <\/div>\r\n\r\n <\/div>\r\n\r\n <hr>\r\n\r\n <div class=\"control-group\">\r\n <label>Additional Notes<\/label>\r\n <textarea id=\"notes\" placeholder=\"e.g. Pantone 286 C, specific thread colour, any other additional information\u2026\"><\/textarea>\r\n <\/div>\r\n\r\n <button class=\"btn-primary\" id=\"download-btn\">\u2b07 Download Preview<\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/div>\r\n\r\n<script>\r\nconst products = [\r\n { name:'DURA Pistol Trigger Holster', sub:'Size S', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pistol%20Trigger%20Holster%20-%20Size%20S.jpg' },\r\n { name:'DURA Pocket Holster', sub:'Size L', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pocket%20Holster%20-%20Size%20L.jpg' },\r\n { name:'DURA Pocket Holster', sub:'Size M', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pocket%20Holster%20-%20Size%20M.jpg' },\r\n { name:'DURA Pouch Holster', sub:'Size L', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pouch%20Holster%20-%20Size%20L.jpg' },\r\n { name:'DURA Pouch Holster', sub:'Size M', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pouch%20Holster%20-%20Size%20M.jpg' },\r\n { name:'DURA Pouch Holster', sub:'Size S', url:'https:\/\/duratis.com\/wp-content\/uploads\/holsters-logo\/DURA%20Pouch%20Holster%20-%20Size%20S.jpg' },\r\n];\r\n\r\nconst colorPresets = [\r\n { label:'Original', color:null, isOriginal:true },\r\n { label:'Black', color:'#000000', bg:'#000000' },\r\n { label:'White', color:'#ffffff', bg:'#ffffff' },\r\n { label:'Red', color:'#ED232E', bg:'#ED232E' },\r\n { label:'Navy', color:'#1a2a6c', bg:'#1a2a6c' },\r\n { label:'Gold', color:'#f5a623', bg:'#f5a623' },\r\n { label:'Custom', color:null, isCustom:true },\r\n];\r\n\r\nlet logoImg=null, logoImgOriginal=null;\r\nlet logoPos={x:130,y:130}, logoSize={w:140,h:140};\r\nlet dragging=false, resizing=false, dragStart={}, resizeStart={};\r\nlet currentTint=null, currentOpacity=1;\r\nlet bgRemoved=false;\r\n\r\nconst productsList = document.getElementById('products-list');\r\nconst editorRow = document.getElementById('editor-row');\r\nconst placeholder = document.getElementById('placeholder-msg');\r\nconst productImgEl = document.getElementById('product-img');\r\nconst ctrlName = document.getElementById('ctrl-name');\r\nconst ctrlSub = document.getElementById('ctrl-sub');\r\nconst logoOverlay = document.getElementById('logo-overlay');\r\nconst logoCanvas = document.getElementById('logo-canvas');\r\nconst fileInput = document.getElementById('file-input');\r\nconst uploadArea = document.getElementById('upload-area');\r\nconst opacitySlider= document.getElementById('opacity-slider');\r\nconst opacityVal = document.getElementById('opacity-val');\r\nconst logoPanel = document.getElementById('logo-panel');\r\nconst removeLogo = document.getElementById('remove-logo-btn');\r\nconst downloadBtn = document.getElementById('download-btn');\r\nconst canvasHint = document.getElementById('canvas-hint');\r\nconst bgBtn = document.getElementById('bg-remove-btn');\r\nconst bgHint = document.getElementById('bg-hint');\r\n\r\n\/\/ Build sidebar\r\nproducts.forEach(p => {\r\n const card = document.createElement('div');\r\n card.className = 'product-card';\r\n const img = document.createElement('img');\r\n img.className='thumb'; img.src=p.url; img.alt=p.name; img.crossOrigin='anonymous';\r\n const nameEl = document.createElement('div');\r\n nameEl.className='name'; nameEl.textContent=p.name;\r\n const subEl = document.createElement('div');\r\n subEl.className='sub'; subEl.textContent=p.sub;\r\n card.appendChild(img); card.appendChild(nameEl); card.appendChild(subEl);\r\n card.addEventListener('click', () => selectProduct(p, card));\r\n productsList.appendChild(card);\r\n});\r\n\r\nfunction selectProduct(p, card) {\r\n document.querySelectorAll('.product-card').forEach(c=>c.classList.remove('selected'));\r\n card.classList.add('selected');\r\n ctrlName.textContent=p.name; ctrlSub.textContent=p.sub;\r\n productImgEl.src=p.url;\r\n placeholder.style.display='none';\r\n editorRow.style.display='flex';\r\n}\r\n\r\n\/\/ Colour swatches\r\nconst swatchRow = document.getElementById('color-swatches');\r\ncolorPresets.forEach((preset,idx) => {\r\n const sw = document.createElement('div');\r\n sw.className='color-swatch'+(idx===0?' active':'');\r\n sw.title=preset.label;\r\n if(preset.isOriginal){\r\n sw.style.cssText='background:#e8e8e8;display:flex;align-items:center;justify-content:center;font-size:12px;color:#aaa;';\r\n sw.textContent='\u2715';\r\n sw.addEventListener('click',()=>{ currentTint=null; setActiveSwatch(sw); redrawLogo(); });\r\n } else if(preset.isCustom){\r\n sw.classList.add('custom');\r\n const ci=document.createElement('input'); ci.type='color'; ci.value='#ED232E';\r\n ci.addEventListener('input',e=>{ currentTint=e.target.value; setActiveSwatch(sw); redrawLogo(); });\r\n sw.appendChild(ci);\r\n } else {\r\n sw.style.background=preset.bg;\r\n if(preset.color==='#ffffff') sw.style.border='2px solid #ccc';\r\n sw.addEventListener('click',()=>{ currentTint=preset.color; setActiveSwatch(sw); redrawLogo(); });\r\n }\r\n swatchRow.appendChild(sw);\r\n});\r\nfunction setActiveSwatch(el){ document.querySelectorAll('.color-swatch').forEach(s=>s.classList.remove('active')); el.classList.add('active'); }\r\n\r\n\/\/ Upload\r\nuploadArea.addEventListener('click',()=>fileInput.click());\r\nuploadArea.addEventListener('dragover',e=>{e.preventDefault();uploadArea.style.borderColor='#ED232E';});\r\nuploadArea.addEventListener('dragleave',()=>uploadArea.style.borderColor='');\r\nuploadArea.addEventListener('drop',e=>{e.preventDefault();uploadArea.style.borderColor='';if(e.dataTransfer.files[0])loadLogo(e.dataTransfer.files[0]);});\r\nfileInput.addEventListener('change',()=>{if(fileInput.files[0])loadLogo(fileInput.files[0]);});\r\n\r\nfunction loadLogo(file){\r\n if(file.size>5*1024*1024){alert('File too large (max 5 MB)');return;}\r\n const r=new FileReader();\r\n r.onload=e=>{\r\n const img=new Image();\r\n img.onload=()=>{\r\n logoImg=img; logoImgOriginal=img;\r\n bgRemoved=false; bgBtn.classList.remove('active'); bgHint.textContent='Works best on white\/light backgrounds';\r\n const ratio=img.naturalWidth\/img.naturalHeight;\r\n const initW=160, initH=Math.round(initW\/ratio);\r\n logoPos={x:Math.round((500-initW)\/2), y:Math.round((500-initH)\/2)};\r\n logoSize={w:initW, h:initH};\r\n applyLogoTransform(); redrawLogo();\r\n logoOverlay.style.display='block';\r\n logoPanel.style.display='flex';\r\n removeLogo.classList.add('visible');\r\n canvasHint.textContent='Drag the logo to reposition \u00b7 grab the red dot to resize';\r\n };\r\n img.src=e.target.result;\r\n };\r\n r.readAsDataURL(file);\r\n}\r\n\r\n\/\/ Remove background (canvas-based, targets light\/white pixels)\r\nbgBtn.addEventListener('click',()=>{\r\n if(!logoImg) return;\r\n if(bgRemoved){\r\n \/\/ Restore original\r\n logoImg=logoImgOriginal; bgRemoved=false;\r\n bgBtn.classList.remove('active'); bgBtn.textContent='\u2702 Remove background';\r\n bgHint.textContent='Works best on white\/light backgrounds';\r\n redrawLogo(); return;\r\n }\r\n const tmp=document.createElement('canvas');\r\n tmp.width=logoImg.naturalWidth; tmp.height=logoImg.naturalHeight;\r\n const ctx=tmp.getContext('2d');\r\n ctx.drawImage(logoImg,0,0);\r\n const data=ctx.getImageData(0,0,tmp.width,tmp.height);\r\n const d=data.data;\r\n const threshold=230; \/\/ pixels brighter than this become transparent\r\n for(let i=0;i<d.length;i+=4){\r\n const r=d[i],g=d[i+1],b=d[i+2];\r\n const brightness=(r+g+b)\/3;\r\n if(brightness>threshold){\r\n \/\/ Soft edge: fade based on how close to white\r\n const alpha=Math.round((255-brightness)\/(255-threshold)*255);\r\n d[i+3]=Math.min(d[i+3],alpha);\r\n }\r\n }\r\n ctx.putImageData(data,0,0);\r\n const newImg=new Image();\r\n newImg.onload=()=>{\r\n logoImg=newImg; bgRemoved=true;\r\n bgBtn.classList.add('active'); bgBtn.textContent='\u21a9 Restore original';\r\n bgHint.textContent='Background removed';\r\n redrawLogo();\r\n };\r\n newImg.src=tmp.toDataURL();\r\n});\r\n\r\nfunction redrawLogo(){\r\n if(!logoImg) return;\r\n const w=logoSize.w, h=logoSize.h;\r\n logoCanvas.width=w; logoCanvas.height=h;\r\n const ctx=logoCanvas.getContext('2d');\r\n ctx.clearRect(0,0,w,h);\r\n ctx.drawImage(logoImg,0,0,w,h);\r\n if(currentTint){\r\n ctx.globalCompositeOperation='source-in';\r\n ctx.fillStyle=currentTint; ctx.fillRect(0,0,w,h);\r\n ctx.globalCompositeOperation='source-over';\r\n }\r\n}\r\n\r\nfunction applyLogoTransform(){\r\n const cont=document.getElementById('canvas-container');\r\n logoPos.x=Math.max(0,Math.min(logoPos.x,cont.offsetWidth-logoSize.w));\r\n logoPos.y=Math.max(0,Math.min(logoPos.y,cont.offsetHeight-logoSize.h));\r\n logoOverlay.style.left=logoPos.x+'px'; logoOverlay.style.top=logoPos.y+'px';\r\n logoOverlay.style.width=logoSize.w+'px'; logoOverlay.style.height=logoSize.h+'px';\r\n logoCanvas.width=logoSize.w; logoCanvas.height=logoSize.h;\r\n redrawLogo();\r\n}\r\n\r\n\/\/ Drag & resize\r\nlogoOverlay.addEventListener('mousedown',e=>{ if(e.target===document.getElementById('resize-handle')) return; dragging=true; dragStart={mx:e.clientX,my:e.clientY,lx:logoPos.x,ly:logoPos.y}; e.preventDefault(); });\r\nlogoOverlay.addEventListener('touchstart',e=>{ if(e.target===document.getElementById('resize-handle')) return; const t=e.touches[0]; dragging=true; dragStart={mx:t.clientX,my:t.clientY,lx:logoPos.x,ly:logoPos.y}; },{passive:true});\r\ndocument.addEventListener('mousemove',e=>{ if(dragging){logoPos.x=dragStart.lx+e.clientX-dragStart.mx;logoPos.y=dragStart.ly+e.clientY-dragStart.my;applyLogoTransform();} if(resizing){ const delta=e.clientX-resizeStart.mx; const newW=Math.max(30,resizeStart.w+delta); logoSize.w=newW; logoSize.h=Math.round(newW\/resizeStart.ratio); applyLogoTransform(); } });\r\ndocument.addEventListener('touchmove',e=>{ const t=e.touches[0]; if(dragging){logoPos.x=dragStart.lx+t.clientX-dragStart.mx;logoPos.y=dragStart.ly+t.clientY-dragStart.my;applyLogoTransform();} if(resizing){ const delta=t.clientX-resizeStart.mx; const newW=Math.max(30,resizeStart.w+delta); logoSize.w=newW; logoSize.h=Math.round(newW\/resizeStart.ratio); applyLogoTransform(); } },{passive:true});\r\ndocument.addEventListener('mouseup',()=>{dragging=false;resizing=false;});\r\ndocument.addEventListener('touchend',()=>{dragging=false;resizing=false;});\r\ndocument.getElementById('resize-handle').addEventListener('mousedown',e=>{ resizing=true; const ratio=logoSize.w\/logoSize.h; resizeStart={mx:e.clientX,my:e.clientY,w:logoSize.w,h:logoSize.h,ratio}; e.preventDefault(); e.stopPropagation(); });\r\ndocument.getElementById('resize-handle').addEventListener('touchstart',e=>{ const t=e.touches[0]; resizing=true; const ratio=logoSize.w\/logoSize.h; resizeStart={mx:t.clientX,my:t.clientY,w:logoSize.w,h:logoSize.h,ratio}; e.stopPropagation(); },{passive:true});\r\n\r\nopacitySlider.addEventListener('input',()=>{ opacityVal.textContent=opacitySlider.value; currentOpacity=opacitySlider.value\/100; logoOverlay.style.opacity=currentOpacity; });\r\n\r\nremoveLogo.addEventListener('click',()=>{\r\n logoOverlay.style.display='none'; logoPanel.style.display='none';\r\n removeLogo.classList.remove('visible');\r\n logoImg=null; logoImgOriginal=null; bgRemoved=false;\r\n opacitySlider.value=100; opacityVal.textContent='100'; logoOverlay.style.opacity=1; currentOpacity=1;\r\n currentTint=null; fileInput.value='';\r\n bgBtn.classList.remove('active'); bgBtn.textContent='\u2702 Remove background';\r\n canvasHint.textContent='Upload your logo and place it on the product';\r\n document.querySelectorAll('.color-swatch').forEach((s,i)=>s.classList.toggle('active',i===0));\r\n});\r\n\r\n\/\/ Download\r\ndownloadBtn.addEventListener('click',()=>{\r\n const cont=document.getElementById('canvas-container');\r\n const contRect=cont.getBoundingClientRect();\r\n const W=cont.clientWidth, H=cont.clientHeight;\r\n\r\n const canvas=document.createElement('canvas');\r\n canvas.width=W; canvas.height=H;\r\n const ctx=canvas.getContext('2d');\r\n\r\n const pImg=new Image(); pImg.crossOrigin='anonymous';\r\n pImg.onload=()=>{ ctx.fillStyle='#fff'; ctx.fillRect(0,0,W,H); ctx.drawImage(pImg,0,0,W,H); addLogoAndSave(ctx,canvas,W,H,contRect); };\r\n pImg.onerror=()=>{ ctx.fillStyle='#f0f0f0'; ctx.fillRect(0,0,W,H); addLogoAndSave(ctx,canvas,W,H,contRect); };\r\n pImg.src=productImgEl.src;\r\n});\r\n\r\nfunction addLogoAndSave(ctx,canvas,W,H,contRect){\r\n if(logoImg&&logoOverlay.style.display!=='none'){\r\n const overlayRect=logoOverlay.getBoundingClientRect();\r\n const x=overlayRect.left-contRect.left;\r\n const y=overlayRect.top-contRect.top;\r\n const w=overlayRect.width;\r\n const h=overlayRect.height;\r\n ctx.globalAlpha=currentOpacity;\r\n ctx.drawImage(logoCanvas,x,y,w,h);\r\n ctx.globalAlpha=1;\r\n }\r\n const notes=document.getElementById('notes').value.trim();\r\n if(!notes){ doDownload(canvas); return; }\r\n\r\n const fs=14, pad=20, lh=20;\r\n ctx.font=fs+'px Segoe UI,sans-serif';\r\n const maxW=W-pad*2;\r\n const words=notes.split(' '); let lines=[],line='';\r\n for(const w of words){ const test=line?line+' '+w:w; if(ctx.measureText(test).width>maxW&&line){lines.push(line);line=w;}else line=test; }\r\n if(line) lines.push(line);\r\n\r\n const labelH=20, textH=lines.length*lh+pad;\r\n const extra=labelH+textH+pad;\r\n const final=document.createElement('canvas'); final.width=W; final.height=H+extra;\r\n const fc=final.getContext('2d');\r\n fc.fillStyle='#fff'; fc.fillRect(0,0,final.width,final.height);\r\n fc.drawImage(canvas,0,0);\r\n fc.strokeStyle='#e0e0e0'; fc.lineWidth=1;\r\n fc.beginPath(); fc.moveTo(pad,H+10); fc.lineTo(final.width-pad,H+10); fc.stroke();\r\n fc.fillStyle='#ED232E'; fc.font='bold 10px Segoe UI,sans-serif';\r\n fc.fillText('ADDITIONAL NOTES',pad,H+26);\r\n fc.fillStyle='#333'; fc.font=fs+'px Segoe UI,sans-serif';\r\n lines.forEach((l,i)=>fc.fillText(l,pad,H+labelH+pad+(i*lh)));\r\n doDownload(final);\r\n}\r\n\r\n\r\nfunction doDownload(canvas){ const a=document.createElement('a'); a.download='DURA-preview.png'; a.href=canvas.toDataURL('image\/png'); a.click(); }\r\n<\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>DURA Product Configurator Products \u2190 Select a product to get started \u2715 Remove Upload your logo and place it on the product \ud83d\udcc2 Click or drag & drop your logo PNG, JPG, SVG \u2014 max. 5 MB \u2702 Remove background Works best on white\/light backgrounds Logo Colour Opacity: 100% Additional Notes \u2b07 Download Preview<\/p>","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-55804","page","type-page","status-publish","hentry"],"yoast_head":"\n<title>Add a logo to your DURA Holsters - Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/duratis.com\/it\/add-a-logo-to-your-dura-holsters\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Add a logo to your DURA Holsters - Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors\" \/>\n<meta property=\"og:description\" content=\"DURA Product Configurator Products \u2190 Select a product to get started \u2715 Remove Upload your logo and place it on the product \ud83d\udcc2 Click or drag & drop your logo PNG, JPG, SVG \u2014 max. 5 MB \u2702 Remove background Works best on white\/light backgrounds Logo Colour Opacity: 100% Additional Notes \u2b07 Download Preview\" \/>\n<meta property=\"og:url\" content=\"https:\/\/duratis.com\/it\/add-a-logo-to-your-dura-holsters\/\" \/>\n<meta property=\"og:site_name\" content=\"Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/duratis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2026-05-12T06:07:23+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/duratis.com\\\/add-a-logo-to-your-dura-holsters\\\/\",\"url\":\"https:\\\/\\\/duratis.com\\\/add-a-logo-to-your-dura-holsters\\\/\",\"name\":\"Add a logo to your DURA Holsters - Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/duratis.com\\\/#website\"},\"datePublished\":\"2026-05-11T10:22:35+00:00\",\"dateModified\":\"2026-05-12T06:07:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/duratis.com\\\/add-a-logo-to-your-dura-holsters\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/duratis.com\\\/add-a-logo-to-your-dura-holsters\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/duratis.com\\\/add-a-logo-to-your-dura-holsters\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/duratis.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Add a logo to your DURA Holsters\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/duratis.com\\\/#website\",\"url\":\"https:\\\/\\\/duratis.com\\\/\",\"name\":\"Duratis Accessories | Custom-made Cases, Holsters, Mounts, Screen & Keypad Protectors\",\"description\":\"We make accessories for payment terminals, mobile scanners, mobile computers and other devices.\",\"publisher\":{\"@id\":\"https:\\\/\\\/duratis.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/duratis.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/duratis.com\\\/#organization\",\"name\":\"Duratis\",\"url\":\"https:\\\/\\\/duratis.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/duratis.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/duratis.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/duratis-logo.svg\",\"contentUrl\":\"https:\\\/\\\/duratis.com\\\/wp-content\\\/uploads\\\/2024\\\/08\\\/duratis-logo.svg\",\"width\":270,\"height\":61,\"caption\":\"Duratis\"},\"image\":{\"@id\":\"https:\\\/\\\/duratis.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/duratis\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/duratis-accessories\\\/\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCgCWiGf6mJ-MMSx3M1gfdeg\\\/featured\"],\"legalName\":\"Unito Sp. z o.o. Sp. k.\",\"description\":\"Duratis is a European manufacturer of accessories for POS payment terminals, Data Capture devices and other devices used in business.\",\"email\":\"info@duratis.com\",\"telephone\":\"+48 668 164 082\",\"vatID\":\"PL5862296099\",\"taxID\":\"5862296099\",\"identifier\":{\"@type\":\"PropertyValue\",\"propertyID\":\"KRS\",\"value\":\"0000551492\"},\"address\":{\"@type\":\"PostalAddress\",\"streetAddress\":\"Rewerenda 28\",\"postalCode\":\"80-209\",\"addressLocality\":\"Chwaszczyno\",\"addressCountry\":\"PL\"},\"contactPoint\":{\"@type\":\"ContactPoint\",\"contactType\":\"sales\",\"email\":\"info@duratis.com\",\"telephone\":\"+48 668 164 082\",\"url\":\"https:\\\/\\\/duratis.com\\\/contact\\\/\"}}]}<\/script>\n","yoast_head_json":{"title":"Aggiungete un logo alle vostre fondine DURA - Accessori Duratis | Custodie, supporti, protezioni per schermi e tastiere","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/duratis.com\/it\/add-a-logo-to-your-dura-holsters\/","og_locale":"it_IT","og_type":"article","og_title":"Add a logo to your DURA Holsters - Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors","og_description":"DURA Product Configurator Products \u2190 Select a product to get started \u2715 Remove Upload your logo and place it on the product \ud83d\udcc2 Click or drag & drop your logo PNG, JPG, SVG \u2014 max. 5 MB \u2702 Remove background Works best on white\/light backgrounds Logo Colour Opacity: 100% Additional Notes \u2b07 Download Preview","og_url":"https:\/\/duratis.com\/it\/add-a-logo-to-your-dura-holsters\/","og_site_name":"Duratis Accessories | Cases, Mounts, Screen & Keypad Protectors","article_publisher":"https:\/\/www.facebook.com\/duratis\/","article_modified_time":"2026-05-12T06:07:23+00:00","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/duratis.com\/add-a-logo-to-your-dura-holsters\/","url":"https:\/\/duratis.com\/add-a-logo-to-your-dura-holsters\/","name":"Aggiungete un logo alle vostre fondine DURA - Accessori Duratis | Custodie, supporti, protezioni per schermi e tastiere","isPartOf":{"@id":"https:\/\/duratis.com\/#website"},"datePublished":"2026-05-11T10:22:35+00:00","dateModified":"2026-05-12T06:07:23+00:00","breadcrumb":{"@id":"https:\/\/duratis.com\/add-a-logo-to-your-dura-holsters\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/duratis.com\/add-a-logo-to-your-dura-holsters\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/duratis.com\/add-a-logo-to-your-dura-holsters\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/duratis.com\/"},{"@type":"ListItem","position":2,"name":"Add a logo to your DURA Holsters"}]},{"@type":"WebSite","@id":"https:\/\/duratis.com\/#website","url":"https:\/\/duratis.com\/","name":"Accessori Duratis | Custodie su misura, fondine, supporti, protezioni per schermo e tastiera","description":"Produciamo accessori per terminali di pagamento, scanner mobili, computer portatili e altri dispositivi.","publisher":{"@id":"https:\/\/duratis.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/duratis.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/duratis.com\/#organization","name":"Duratis","url":"https:\/\/duratis.com\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/duratis.com\/#\/schema\/logo\/image\/","url":"https:\/\/duratis.com\/wp-content\/uploads\/2024\/08\/duratis-logo.svg","contentUrl":"https:\/\/duratis.com\/wp-content\/uploads\/2024\/08\/duratis-logo.svg","width":270,"height":61,"caption":"Duratis"},"image":{"@id":"https:\/\/duratis.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/duratis\/","https:\/\/www.linkedin.com\/company\/duratis-accessories\/","https:\/\/www.youtube.com\/channel\/UCgCWiGf6mJ-MMSx3M1gfdeg\/featured"],"legalName":"Unito Sp. z o.o. Sp. k.","description":"Duratis is a European manufacturer of accessories for POS payment terminals, Data Capture devices and other devices used in business.","email":"info@duratis.com","telephone":"+48 668 164 082","vatID":"PL5862296099","taxID":"5862296099","identifier":{"@type":"PropertyValue","propertyID":"KRS","value":"0000551492"},"address":{"@type":"PostalAddress","streetAddress":"Rewerenda 28","postalCode":"80-209","addressLocality":"Chwaszczyno","addressCountry":"PL"},"contactPoint":{"@type":"ContactPoint","contactType":"sales","email":"info@duratis.com","telephone":"+48 668 164 082","url":"https:\/\/duratis.com\/contact\/"}}]}},"_links":{"self":[{"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/pages\/55804","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/comments?post=55804"}],"version-history":[{"count":0,"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/pages\/55804\/revisions"}],"wp:attachment":[{"href":"https:\/\/duratis.com\/it\/wp-json\/wp\/v2\/media?parent=55804"}],"curies":[{"name":"parola chiave","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}