1<!DOCTYPE html><html lang="en-US"><head><meta charset="utf-8"/>
2<script>var __ezHttpConsent={setByCat:function(src,tagType,attributes,category,force,customSetScriptFn=null){var setScript=function(){if(force||window.ezTcfConsent[category]){if(typeof customSetScriptFn==='function'){customSetScriptFn();}else{var scriptElement=document.createElement(tagType);scriptElement.src=src;attributes.forEach(function(attr){for(var key in attr){if(attr.hasOwnProperty(key)){scriptElement.setAttribute(key,attr[key]);}}});var firstScript=document.getElementsByTagName(tagType)[0];firstScript.parentNode.insertBefore(scriptElement,firstScript);}}};if(force||(window.ezTcfConsent&&window.ezTcfConsent.loaded)){setScript();}else if(typeof getEzConsentData==="function"){getEzConsentData().then(function(ezTcfConsent){if(ezTcfConsent&&ezTcfConsent.loaded){setScript();}else{console.error("cannot get ez consent data");force=true;setScript();}});}else{force=true;setScript();console.error("getEzConsentData is not a function");}},};</script>
vendor: 1 bytes, line 2
2
3<script>var ezTcfConsent=window.ezTcfConsent?window.ezTcfConsent:{loaded:false,store_info:false,develop_and_improve_services:false,measure_ad_performance:false,measure_content_performance:false,select_basic_ads:false,create_ad_profile:false,select_personalized_ads:false,create_content_profile:false,select_personalized_content:false,understand_audiences:false,use_limited_data_to_select_content:false,};function getEzConsentData(){return new Promise(function(resolve){document.addEventListener("ezConsentEvent",function(event){var ezTcfConsent=event.detail.ezTcfConsent;resolve(ezTcfConsent);});});}</script>
vendor: 1 bytes, line 3
3
4<script>if(typeof _setEzCookies!=='function'){function _setEzCookies(ezConsentData){var cookies=window.ezCookieQueue;for(var i=0;i<cookies.length;i++){var cookie=cookies[i];if(ezConsentData&&ezConsentData.loaded&&ezConsentData[cookie.tcfCategory]){document.cookie=cookie.name+"="+cookie.value;}}}} 5window.ezCookieQueue=window.ezCookieQueue||[];if(typeof addEzCookies!=='function'){function addEzCookies(arr){window.ezCookieQueue=[...window.ezCookieQueue,...arr];}} 6addEzCookies([{name:"ezoab_271555",value:"mod1; Path=/; Domain=barcode-generator.de; Expires=Fri, 02 Oct 2026 20:07:43 UTC",tcfCategory:"store_info",isEzoic:"true",}]);if(window.ezTcfConsent&&window.ezTcfConsent.loaded){_setEzCookies(window.ezTcfConsent);}else if(typeof getEzConsentData==="function"){getEzConsentData().then(function(ezTcfConsent){if(ezTcfConsent&&ezTcfConsent.loaded){_setEzCookies(window.ezTcfConsent);}else{console.error("cannot get ez consent data");_setEzCookies(window.ezTcfConsent);}});}else{console.error("getEzConsentData is not a function");_setEzCookies(window.ezTcfConsent);}</script>
vendor: 1 bytes, line 6
6
7<script data-ezscrex='false' data-cfasync='false' data-pagespeed-no-defer>var __ez=__ez||{};__ez.stms=Date.now();__ez.evt={};__ez.script={};__ez.ck=__ez.ck||{};__ez.template={};__ez.template.isOrig=true;window.__ezScriptHost="//www.ezojs.com";__ez.queue=__ez.queue||function(){var e=0,i=0,t=[],n=!1,o=[],r=[],s=!0,a=function(e,i,n,o,r,s,a){var l=arguments.length>7&&void 0!==arguments[7]?arguments[7]:window,d=this;this.name=e,this.funcName=i,this.parameters=null===n?null:w(n)?n:[n],this.isBlock=o,this.blockedBy=r,this.deleteWhenComplete=s,this.isError=!1,this.isComplete=!1,this.isInitialized=!1,this.proceedIfError=a,this.fWindow=l,this.isTimeDelay=!1,this.process=function(){f("... func = "+e),d.isInitialized=!0,d.isComplete=!0,f("... func.apply: "+e);var i=d.funcName.split("."),n=null,o=this.fWindow||window;i.length>3||(n=3===i.length?o[i[0]][i[1]][i[2]]:2===i.length?o[i[0]][i[1]]:o[d.funcName]),null!=n&&n.apply(null,this.parameters),!0===d.deleteWhenComplete&&delete t[e],!0===d.isBlock&&(f("----- F'D: "+d.name),p())}},l=function(e,i,t,n,o,r,s){var a=arguments.length>7&&void 0!==arguments[7]?arguments[7]:window,l=this;this.name=e,this.path=i,this.async=o,this.defer=r,this.isBlock=t,this.blockedBy=n,this.isInitialized=!1,this.isError=!1,this.isComplete=!1,this.proceedIfError=s,this.fWindow=a,this.isTimeDelay=!1,this.isPath=function(e){return"/"===e[0]&&"/"!==e[1]}
7,this.getSrc=function(e){return void 0!==window.__ezScriptHost&&this.isPath(e)?window.__ezScriptHost+e:e},this.process=function(){l.isInitialized=!0,f("... file = "+e);var i=this.fWindow?this.fWindow.document:document,t=i.createElement("script");t.src=this.getSrc(this.path),!0===o?t.async=!0:!0===r&&(t.defer=!0),t.onerror=function(){var e={url:window.location.href,name:l.name,path:l.path,user_agent:window.navigator.userAgent};"undefined"!=typeof _ezaq&&(e.pageview_id=_ezaq.page_view_id);var i=encodeURIComponent(JSON.stringify(e)),t=new XMLHttpRequest;t.open("GET","//g.ezoic.net/ezqlog?d="+i,!0),t.send(),f("----- ERR'D: "+l.name),l.isError=!0,!0===l.isBlock&&p()},t.onreadystatechange=t.onload=function(){var e=t.readyState;f("----- F'D: "+l.name),e&&!/loaded|complete/.test(e)||(l.isComplete=!0,!0===l.isBlock&&p())},i.getElementsByTagName("head")[0].appendChild(t)}},d=function(e,i){this.name=e,this.path="",this.async=!1,this.defer=!1,this.isBlock=!1,this.blockedBy=[],this.isInitialized=!0,this.isError=!1,this.isComplete=i,this.proceedIfError=!1,this.isTimeDelay=!1,this.process=function(){}};function c(e,i,n,s,a,d,c,u,f){var p=new l(e,i,n,s,a,d,c,f);!0===u?o[e]=p:r[e]=p,t[e]=p,h(p)}function h(e){!0!==u(e)&&0!=s&&e.process()}function u(e){if(!0===e.isTimeDelay&&!1===n)return f(e.name+" blocked = TIME DELAY!"),!0;if(w(e.blockedBy))for(var i=0;i<e.blockedBy.length;i++){var o=e.blockedBy[i];if(!1===t.hasOwnProperty(o))return f(e.name+" blocked = "+o),!0;if(!0===e.proceedIfError&&!0===t[o].isError)return!1;if(!1===t[o].isComplete)return f(e.name+" blocked = "+o),!0}return!1}function f(e){var i=window.location.href,t=new RegExp("[?&]ezq=([^&#]*)","i").exec(i);"1"===(t?t[1]:null)&&console.debug(e)}function p(){++e>200||(f("let's go"),m(o),m(r))}function m(e){for(var i in e)if(!1!==e.hasOwnProperty(i)){var t=e[i];!0===t.isComplete||u(t)||!0===t.isInitialized||!0===t.isError?!0===t.isError?f(t.name+": error"):!0===t.isComplete?f(t.name+": complete already"):!0===t.isInitialized&&f(t.name+": initialized already"):t.process()}}function w(e){return"[object Array]"==Object.prototype.toString.call(e)}return window.addEventListener("load",(function(){setTimeout((function(){n=!0,f("TDELAY -----"),p()}),5e3)}),!1),{addFile:c,addFileOnce:function(e,i,n,o,r,s,a,l,d){t[e]||c(e,i,n,o,r,s,a,l,d)},addDelayFile:function(e,i){var n=new l(e,i,!1,[],!1,!1,!0);n.isTimeDelay=!0,f(e+" ... FILE! TDELAY"),r[e]=n,t[e]=n,h(n)},addFunc:function(e,n,s,l,d,c,u,f,p,m){!0===c&&(e=e+"_"+i++);var w=new a(e,n,s,l,d,u,f,m);!0===p?o[e]=w:r[e]=w,t[e]=w,h(w)},addDelayFunc:function(e,i,n){var o=new a(e,i,n,!1,[],!0,!0);o.isTimeDelay=!0,f(e+" ... FUNCTION! TDELAY"),r[e]=o,t[e]=o,h(o)},items:t,processAll:p,setallowLoad:function(e){s=e},markLoaded:function(e){if(e&&0!==e.length){if(e in t){var i=t[e];!0===i.isComplete?f(i.name+" "+e+": error loaded duplicate"):(i.isComplete=!0,i.isInitialized=!0)}else t[e]=new d(e,!0);f("markLoaded dummyfile: "+t[e].name)}},logWhatsBlocked:function(){for(var e in t)!1!==t.hasOwnProperty(e)&&u(t[e])}}}();__ez.evt.add=function(e,t,n){e.addEventListener?e.addEventListener(t,n,!1):e.attachEvent?e.attachEvent("on"+t,n):e["on"+t]=n()},__ez.evt.remove=function(e,t,n){e.removeEventListener?e.removeEventListener(t,n,!1):e.detachEvent?e.detachEvent("on"+t,n):delete e["on"+t]};__ez.script.add=function(e){var t=document.createElement("script");t.src=e,t.async=!0,t.type="text/javascript",document.getElementsByTagName("head")[0].appendChild(t)};__ez.dot=__ez.dot||{};__ez.queue.addFileOnce('/detroitchicago/boise.js', '/detroitchicago/boise.js?gcb=195-9&cb=5', true, [], true, false, true, false);__ez.queue.addFileOnce('/parsonsmaize/abilene.js', '/parsonsmaize/abilene.js?gcb=195-9&cb=651274f0d1', true, [], true, false, true, false);__ez.queue.addFileOnce('/parsonsmaize/mulvane.js', '/parsonsmaize/mulvane.js?gcb=195-9&cb=e75e48eec0', true, ['/parsonsmaize/abilene.js'], true, false, true, false);__ez.queue.addFileOnce('/detroitchicago/birmingham.js', '/detroitchicago/birmingham.js?gcb=195-9&cb=c4ed651ab8', true, ['/parsonsmaize/abilene.js'], true, false, true, false);</script>
vendor: 1 bytes, line 7
7
8<script data-ezscrex="false" type="text/javascript" data-cfasync="false">window._ezaq = Object.assign({"ad_cache_level":0,"adpicker_placement_cnt":0,"ai_placeholder_cache_level":0,"ai_placeholder_placement_cnt":-1,"domain":"barcode-generator.de","domain_id":271555,"ezcache_level":1,"ezcache_skip_code":0,"has_bad_image":0,"has_bad_words":0,"is_sitespeed":0,"lt_cache_level":0,"response_size":138934,"response_size_orig":133154,"response_time_orig":1971,"template_id":5,"url":"https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes","word_count":0,"worst_bad_word_level":0}, typeof window._ezaq !== "undefined" ? window._ezaq : {});__ez.queue.markLoaded('ezaqBaseReady');if(window._ezaq&&window._ezaq.page_view_id==="01a0fdcc-f69c-74ec-a3a7-b38f4b06d7e6"){window.__ezPvSig=window.__ezPvSig||"tmal0w.7dcab897716dffe11cd6e6921e686164";}</script>
vendor: 1 bytes, line 8
8
9<script type='text/javascript' data-ezscrex='false' data-cfasync='false'> 10window.ezAnalyticsStatic = true; 11 12function analyticsAddScript(script) { 13 var ezDynamic = document.createElement('script'); 14 ezDynamic.type = 'text/javascript'; 15 ezDynamic.innerHTML = script; 16 document.head.appendChild(ezDynamic); 17} 18function getCookiesWithPrefix() { 19 var allCookies = document.cookie.split(';'); 20 var cookiesWithPrefix = {}; 21 22 for (var i = 0; i < allCookies.length; i++) { 23 var cookie = allCookies[i].trim(); 24 25 for (var j = 0; j < arguments.length; j++) { 26 var prefix = arguments[j]; 27 if (cookie.indexOf(prefix) === 0) { 28 var cookieParts = cookie.split('='); 29 var cookieName = cookieParts[0]; 30 var cookieValue = cookieParts.slice(1).join('='); 31 cookiesWithPrefix[cookieName] = decodeURIComponent(cookieValue); 32 break; // Once matched, no need to check other prefixes 33 } 34 } 35 } 36 37 return cookiesWithPrefix; 38} 39function getOrMintFss() { 40 var UINT32_MAX = 4294967295; 41 var UINT32_DECIMAL = /^\d{1,10}$/; 42 function ensureEz() { 43 if (!window.__ez || typeof window.__ez !== 'object') { 44 window.__ez = {}; 45 } 46 return window.__ez; 47 } 48 function isValidUint32String(value) { 49 if (typeof value !== 'string' || !value) { 50 return false; 51 } 52 if (!UINT32_DECIMAL.test(value)) { 53 return false; 54 } 55 return Number(value) <= UINT32_MAX; 56 } 57 if (window.__ez && isValidUint32String(window.__ez.fss)) { 58 return window.__ez.fss; 59 } 60 var cookieStr = ''; 61 try { 62 cookieStr = document.cookie; 63 } catch (err) { 64 cookieStr = ''; 65 } 66 if (cookieStr && typeof cookieStr === 'string') { 67 var parts = cookieStr.split(';'); 68 for (var i = 0; i < parts.length; i++) { 69 var part = parts[i]; 70 var eq = part.indexOf('='); 71 if (eq === -1) { 72 continue; 73 } 74 var name = part.slice(0, eq).trim(); 75 if (name.indexOf('ezfs_') !== 0) { 76 continue; 77 } 78 var raw = part.slice(eq + 1).trim(); 79 var value; 80 try { 81 value = decodeURIComponent(raw); 82 } catch (err) { 83 continue; 84 } 85 if (!isValidUint32String(value)) { 86 continue; 87 } 88 ensureEz().fss = value; 89 return value; 90 } 91 } 92 var seed; 93 if ( 94 typeof crypto !== 'undefined' && 95 typeof crypto.getRandomValues === 'function' && 96 typeof Uint32Array === 'function' 97 ) { 98 seed = crypto.getRandomValues(new Uint32Array(1))[0]; 99 } else { 100 seed = Math.floor(Math.random() * 4294967296); 101 } 102 var minted = String(seed >>> 0); 103 ensureEz().fss = minted; 104 return minted; 105} 106function productAnalytics() { 107 var d = {"pr":[6,3],"omd5":"a88b7312c28f1f0afb89f9c76c4920b3","nar":"fastresponse","fs_seed":"3594620207"}; 108 d.u = _ezaq.url; 109 d.p = _ezaq.page_view_id; 110 d.v = _ezaq.visit_uuid; 111 d.ab = _ezaq.ab_test_id; 112 d.e = JSON.stringify(_ezaq); 113 d.ref = document.referrer; 114 d.dw = document.documentElement.clientWidth || window.innerWidth || 0; 115 d.dh = window.screen.height || 0; 116 d.vpw = window.innerWidth || document.documentElement.clientWidth || 0; 117 d.vph = window.innerHeight || document.documentElement.clientHeight || 0; 118 d.doch = Math.max((document.body && document.body.scrollHeight) || 0, (document.documentElement && document.documentElement.scrollHeight) || 0, (document.body && document.body.offsetHeight) || 0, (document.documentElement && document.documentElement.offsetHeight) || 0, (document.body && document.body.clientHeight) || 0, (document.documentElement && document.documentElement.clientHeight) || 0); 119 d.c = getCookiesWithPrefix('active_template', 'ez', 'lp_'); 120 if(typeof ez_utmParams !== 'undefined') { 121 d.utm = ez_utmParams; 122 } 123 d.qs = window.location.search; 124 if (typeof d.fs_seed === 'string' && d.fs_seed && (!window.__ez || !window.__ez.fss)) { 125 if (!window.__ez || typeof window.__ez !== 'object') { 126 window.__ez = {}; 127 } 128 window.__ez.fss = d.fs_seed; 129 } 130 d.fs_seed = getOrMintFss(); 131 132 var dataText = JSON.stringify(d); 133 var xhr = new XMLHttpRequest(); 134 xhr.open('POST','/ezais/analytics?cb=1', true); 135 xhr.onload = function () { 136 if (xhr.status!=200) { 137 return; 138 } 139 140 if(document.readyState !== 'loading') { 141 analyticsAddScript(xhr.response); 142 return; 143 } 144 145 var eventFunc = function() { 146 if(document.readyState === 'loading') { 147 return; 148 } 149 document.removeEventListener('readystatechange', eventFunc, false); 150 analyticsAddScript(xhr.response); 151 }; 152 153 document.addEventListener('readystatechange', eventFunc, false); 154 }; 155 xhr.setRequestHeader('Content-Type','text/plain'); 156 xhr.send(dataText); 157} 158__ez.queue.addFunc("productAnalytics", "productAnalytics", null, true, ['ezaqBaseReady'], false, false, false, true); 159</script>
159<base href="https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes"/> 160 161 162<meta name="robots" content="index,follow"/> 163 164 <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 165 166<title>Free Barcode Generator â EAN, QR, Code128 & 180+ More</title> 167 168 169 170<meta name="description" content="Create barcodes for free â 189 types (EAN13, QR, Code128) â Commercial use allowed â Download as PNG, PDF, Excel. Generate your barcode in 3 easy steps!"/> 171 172 173<meta name="keywords" content="barcode generator, free barcode generator, online barcode generator, QR code generator, EAN13 generator, Code128 generator, barcode creator, barcode maker, create barcode, generate barcode free, PNG, PDF, Excel, commercial use"/> 174 175 <link rel="canonical" href="https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes"/> 176 177 178 179 180<meta property="og:type" content="website"/> 181<meta property="og:site_name" content="Barcode Generator"/> 182<meta property="og:title" content="Free Barcode Generator â EAN, QR, Code128 & 180+ More"/> 183<meta property="og:description" content="Create barcodes for free â 189 types (EAN13, QR, Code128) â Commercial use allowed â Download as PNG, PDF, Excel. Generate your barcode in 3 easy steps!"/> 184<meta property="og:url" content="https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes"/> 185<meta property="og:image" content="https://www.barcode-generator.de/images/og-barcode-generator.png"/> 186<meta property="og:image:width" content="1200"/> 187<meta property="og:image:height" content="634"/> 188<meta property="og:locale" content="en_US"/> 189 190<meta name="twitter:card" content="summary_large_image"/> 191<meta name="twitter:title" content="Free Barcode Generator â EAN, QR, Code128 & 180+ More"/> 192<meta name="twitter:description" content="Create barcodes for free â 189 types (EAN13, QR, Code128) â Commercial use allowed â Download as PNG, PDF, Excel. Generate your barcode in 3 easy steps!"/> 193<meta name="twitter:image" content="https://www.barcode-generator.de/images/og-barcode-generator.png"/> 194 195 196 197 198
199<script type="application/ld+json">{ 200 "@context": "https://schema.org", 201 "@graph": [ 202 { 203 "@type": "Organization", 204 "@id": "https://www.barcode-generator.de/#organization", 205 "name": "CodeXpress e.K.", 206 "alternateName": "barcode-generator.de", 207 "url": "https://www.barcode-generator.de/", 208 "logo": { 209 "@type": "ImageObject", 210 "url": "https://www.barcode-generator.de/images/logo_barcode_generator.png", 211 "width": 531, 212 "height": 457 213 } 214 }, 215 { 216 "@type": "WebSite", 217 "@id": "https://www.barcode-generator.de/#website", 218 "name": "barcode-generator.de", 219 "url": "https://www.barcode-generator.de/", 220 "publisher": { 221 "@id": "https://www.barcode-generator.de/#organization" 222 }, 223 "inLanguage": "en-US" 224 }, 225 { 226 "@type": "BreadcrumbList", 227 "@id": "https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes#breadcrumb", 228 "itemListElement": [ 229 { 230 "@type": "ListItem", 231 "position": 1, 232 "name": "Barcode Generator", 233 "item": "https://www.barcode-generator.de/en-US/home-page" 234 }, 235 { 236 "@type": "ListItem", 237 "position": 2, 238 "name": "Free Online Barcode Generator", 239 "item": "https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes" 240 } 241 ] 242 }, 243 { 244 "@type": "WebPage", 245 "@id": "https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes#webpage", 246 "url": "https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes", 247 "name": "Free Online Barcode Generator", 248 "isPartOf": { 249 "@id": "https://www.barcode-generator.de/#website" 250 }, 251 "about": { 252 "@id": "https://www.barcode-generator.de/#organization" 253 }, 254 "breadcrumb": { 255 "@id": "https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes#breadcrumb" 256 }, 257 "inLanguage": "en-US", 258 "description": "Create barcodes for free online. Generate EAN13, Code128, QR codes and over 180 barcode types. Download as PNG, PDF or Excel.", 259 "keywords": [ 260 "Barcode Generator", 261 "EAN13", 262 "Code128", 263 "QR Code", 264 "DataMatrix", 265 "Free", 266 "Online" 267 ], 268 "mainEntity": { 269 "@id": "https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes#howto" 270 } 271 }, 272 { 273 "@type": "HowTo", 274 "@id": "https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes#howto", 275 "name": "How to create a barcode", 276 "inLanguage": "en-US", 277 "description": "Create barcodes in three easy steps with our free barcode generator", 278 "totalTime": "PT1M", 279 "step": [ 280 { 281 "@type": "HowToStep", 282 "position": 1, 283 "name": "Choose barcode type", 284 "text": "Select your barcode type from 189 options including EAN13, Code128, QR Code, DataMatrix and more." 285 }, 286 { 287 "@type": "HowToStep", 288 "position": 2, 289 "name": "Configure properties", 290 "text": "Set dimensions, DPI, display options and enter your barcode data. Use batch mode for multiple barcodes." 291 }, 292 { 293 "@type": "HowToStep", 294 "position": 3, 295 "name": "Generate and download", 296 "text": "Click generate to create your barcode. Download as PNG, JPG, PDF, Excel or print directly." 297 } 298 ] 299 } 300 ] 301}</script>
301 302 303 304 305 306 307 <style> 308 div.card { 309 min-width: min(20rem, 100%); /* 20rem allein sprengte die Sidebar-Spalte: Karte 320 px in 306 px */ 310 } 311 312 .link-unstyled, .link-unstyled:link, .link-unstyled:hover { 313 color: inherit; 314 text-decoration: inherit; 315 } 316 317 .link-unstyled:hover { 318 text-decoration: underline; 319 } 320 </style> 321 322 323 324 325 326 <!-- Cookie Consent Chooser Static --> 327 328<!-- Cookie Consent Chooser End --> 329 330 <!-- Href lang --> 331 <link rel="alternate" href="https://www.barcode-generator.de/be/prosty-generatar-dlya-usikh-shtrykhkodau" hreflang="be"/> 332 <link rel="alternate" href="https://www.barcode-generator.de/bg/prost-generator-za-vsichki-barkodove" hreflang="bg"/> 333 <link rel="alternate" href="https://www.barcode-generator.de/bn/saadhaarnn-jenaarettr-smst-baarkodder-jny" hreflang="bn"/> 334 <link rel="alternate" href="https://www.barcode-generator.de/bs/jednostavan-generator-za-sve-bar-kodove" hreflang="bs"/> 335 <link rel="alternate" href="https://www.barcode-generator.de/cs/jednoduchy-generator-pro-vsechny-carove-kody" hreflang="cs"/> 336 <link rel="alternate" href="https://www.barcode-generator.de/da/simple-generator-til-alle-stregkoder" hreflang="da"/> 337 <link rel="alternate" href="https://www.barcode-generator.de/de/einfacher-generator-fur-alle-barcodes" hreflang="de"/> 338 <link rel="alternate" href="https://www.barcode-generator.de/el/aple-gennetria-gia-olous-tous-grammotous-kodikes" hreflang="el"/> 339 <link rel="alternate" href="https://www.barcode-generator.de/en/simple-generator-for-all-barcodes" hreflang="en"/> 340 <link rel="alternate" href="https://www.barcode-generator.de/en-US/simple-generator-for-all-barcodes" hreflang="en-US"/> 341 <link rel="alternate" href="https://www.barcode-generator.de/es/generador-simple-para-todos-los-codigos-de-barras" hreflang="es"/> 342 <link rel="alternate" href="https://www.barcode-generator.de/es-MX/generador-simple-para-todos-los-codigos-de-barras" hreflang="es-MX"/> 343 <link rel="alternate" href="https://www.barcode-generator.de/et/lihtne-generaator-koikide-vootkoodide-jaoks" hreflang="et"/> 344 <link rel="alternate" href="https://www.barcode-generator.de/fa/jnrtwr-sdh-bry-hmh-brkhdh" hreflang="fa"/> 345 <link rel="alternate" href="https://www.barcode-generator.de/fi/yksinkertainen-generaattori-kaikille-viivakoodeille" hreflang="fi"/> 346 <link rel="alternate" href="https://www.barcode-generator.de/fr/generateur-simple-pour-tous-les-codesbarres" hreflang="fr"/> 347 <link rel="alternate" href="https://www.barcode-generator.de/hi/saadhaarnn-jenrettr-sbhii-baarkodd-ke-lie" hreflang="hi"/> 348 <link rel="alternate" href="https://www.barcode-generator.de/hu/egyszeru-generator-minden-vonalkodhoz" hreflang="hu"/> 349 <link rel="alternate" href="https://www.barcode-generator.de/id/generator-sederhana-untuk-semua-barcode" hreflang="id"/> 350 <link rel="alternate" href="https://www.barcode-generator.de/is/einfaldur-rafall-fyrir-oll-strikamerki" hreflang="is"/> 351 <link rel="alternate" href="https://www.barcode-generator.de/it/simple-generator-per-tutti-i-codici-a-barre" hreflang="it"/> 352 <link rel="alternate" href="https://www.barcode-generator.de/ja/simple-generator-subetenobakodoyong" hreflang="ja"/> 353 <link rel="alternate" href="https://www.barcode-generator.de/ms/penjana-mudah-untuk-semua-kod-bar" hreflang="ms"/> 354 <link rel="alternate" href="https://www.barcode-generator.de/nl/simple-generator-voor-alle-barcodes" hreflang="nl"/> 355 <link rel="alternate" href="https://www.barcode-generator.de/pl/prosty-generator-dla-wszystkich-kodow-kreskowych" hreflang="pl"/> 356 <link rel="alternate" href="https://www.barcode-generator.de/pt/gerador-simples-para-todos-os-codigos-de-barras" hreflang="pt"/> 357 <link rel="alternate" href="https://www.barcode-generator.de/pt-BR/gerador-simples-para-todos-os-codigos-de-barras" hreflang="pt-BR"/> 358 <link rel="alternate" href="https://www.barcode-generator.de/ru/prostoy-generator-dlya-vsekh-shtrikhkodov" hreflang="ru"/> 359 <link rel="alternate" href="https://www.barcode-generator.de/sv/simple-generator-for-alla-streckkoder" hreflang="sv"/> 360 <link rel="alternate" href="https://www.barcode-generator.de/tr/basit-jenerator-tum-barkodlar-icin" hreflang="tr"/> 361 <link rel="alternate" href="https://www.barcode-generator.de/zh-CN/jian-dan-sheng-cheng-qi-gua-yong-yu-suo-you-tiao-xing-ma" hreflang="zh-CN"/> 362 <link rel="alternate" href="https://www.barcode-generator.de/zh-TW/jian-dan-sheng-cheng-qi-shi-yong-yu-suo-you-tiao-xing-ma" hreflang="zh-TW"/> 363 <link rel="alternate" href="https://www.barcode-generator.de/vi/cong-cu-tao-ma-vach-don-gian-cho-tat-ca-cac-loai-ma-vach" hreflang="vi"/> 364 <link rel="alternate" href="https://www.barcode-generator.de/ar/mwld-albarkwd-albsyt-ljmye-alaanwae" hreflang="ar"/> 365 <link rel="alternate" href="https://www.barcode-generator.de/hr/jednostavan-generator-za-sve-crticne-kodove" hreflang="hr"/> 366 <link rel="alternate" href="https://www.barcode-generator.de/ko/simple-generator-for-all-barco
366des" hreflang="ko"/> 367 <link rel="alternate" href="https://www.barcode-generator.de/nb/enkel-strekkodegenerator-for-alle-strekkoder" hreflang="nb"/> 368 <link rel="alternate" href="https://www.barcode-generator.de/ro/generator-simplu-pentru-toate-codurile-de-bare" hreflang="ro"/> 369 <link rel="alternate" href="https://www.barcode-generator.de/sk/jednoduchy-generator-ciarovych-kodov" hreflang="sk"/> 370 <link rel="alternate" href="https://www.barcode-generator.de/sl/preprost-generator-crtnih-kod" hreflang="sl"/> 371 <link rel="alternate" href="https://www.barcode-generator.de/sr/jednostavan-generator-za-sve-bar-kodove" hreflang="sr"/> 372 <link rel="alternate" href="https://www.barcode-generator.de/ta/simple-barcode-generator" hreflang="ta"/> 373 <link rel="alternate" href="https://www.barcode-generator.de/te/simple-barcode-generator" hreflang="te"/> 374 <link rel="alternate" href="https://www.barcode-generator.de/th/simple-barcode-generator" hreflang="th"/> 375 <link rel="alternate" href="https://www.barcode-generator.de/uk/prostyi-generator-shtrykh-kodiv" hreflang="uk"/> 376 <link rel="alternate" href="https://www.barcode-generator.de/en/simple-generator-for-all-barcodes" hreflang="x-default"/> 377 378 379 <!-- Bootstrap CSS und Script --> 380 <!-- CDN Versionen für bessere Performance --> 381 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/css/bootstrap.min.css" integrity="sha512-2bBQCjcnw658Lho4nlXJcc6WkV/UxpE/sAokbXPxQNGqmNdQrWqtw26Ns9kFF/yG792pKR1Sx8/Y1Lf1XN4GKA==" crossorigin="anonymous" referrerpolicy="no-referrer"/> 382 <link rel="stylesheet" href="/css/site.css?v=Az5vLzucZCBQ6CoXDnJubIG9Xm38bzuXiAI5Iq7gF5k"/> 383 <link rel="stylesheet" href="/css/bg.css?v=DocGNE6RrwotjL0f4QOj0CQ4kpBsaGP44WQ3AQs7Bbo"/> 384 385 386 <!-- Bootstrap Icons --> 387 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"/> 388 389 390 <!-- Google Analytics --> 391 392 393<!-- Google Analytics Chooser --> 394 <!-- GA4 -->
vendor: 67 bytes, lines 394-395
394 395<script async="" src="https://www.googletagmanager.com/gtag/js?id=
395G-KJCT330TDG
vendor: 12 bytes, line 395
395"></script>
396<script> 397
vendor: 143 bytes, lines 397-401
397window.dataLayer = window.dataLayer || []; 398 function gtag() { dataLayer.push(arguments); } 399 gtag('js', new Date()); 400 401 gtag('config', '
401G-KJCT330TDG
vendor: 4 bytes, line 401
401');
402</script>
402 403<!-- Google Analytics End --> 404 405 406 407 408 409<!-- LiveChat Chooser --> 410<!-- LiveChat Chooser End --> 411 412 413
414<script type='text/javascript'> 415var ezoTemplate = 'orig_site'; 416var ezouid = '1'; 417var ezoFormfactor = '1'; 418</script>
418<script data-ezscrex="false" type='text/javascript'> 419var soc_app_id = '0'; 420var did = 271555; 421var ezdomain = 'barcode-generator.de'; 422var ezoicSearchable = 1; 423</script>
vendor: 1 bytes, line 423
423
424<script async data-ezscrex="false" data-cfasync="false" src="//open.video/video.js"></script>
424</head> 425<body>
425<script id="rewarded-custom-ezoic" src="https://g.ezoic.net/porpoiseant/rcs.js?did=271555&url=https%3A%2F%2Fwww.barcode-generator.de%2Fen-US%2Fsimple-generator-for-all-barcodes" async></script>
425 426 427 <style> 428 429 .floatingad { 430 position: absolute; 431 top: 450px; 432 left: 10px; 433 width: 300px; 434 height: 600px; 435 z-index: 2000; 436 } 437 438 @media screen and (max-width: 1900px) { 439 .floatingad { 440 display: none; 441 } 442 } 443 444 </style> 445 446 <div class="floatingad" style=""> 447 <!-- Ezoic - slot7_sidebar_floating_1 - sidebar_floating_1 --> 448<div id="ezoic-pub-ad-placeholder-193"> </div> 449<!-- End Ezoic - slot7_sidebar_floating_1 - sidebar_floating_1 --> 450 </div> 451 452 453 454<style> 455 div.localHeaderImage { 456 background-image: url(/images/barcodes.gif); 457 background-repeat: repeat-x; 458 height: 14px; 459 } 460 461 .localHeaderLangSelector { 462 font-size: 0.8em; 463 padding: 0 5px 0 10px; 464 margin: 0; 465 text-align: right; 466 } 467 468 .navbar-nav > li { 469 padding-right: 22px; 470 } 471 472</style> 473 474 <div class="container" style="padding-top: 10px; padding-bottom: 5px"> 475 <!-- Top Advertisement --> 476 <div class="text-center mb-2"> 477 <!-- Ezoic - slot3_top_of_page - top_of_page --> 478<div id="ezoic-pub-ad-placeholder-187"> </div> 479<!-- End Ezoic - slot3_top_of_page - top_of_page --> 480 </div> 481 <!-- Header with Language Selector --> 482 <div class="d-flex align-items-center border-top border-bottom border-dark py-1 mb-2" style="height: 20px;"> 483 <div class="flex-grow-1 localHeaderImage"></div> 484 <div class="localHeaderLangSelector"> 485 <a class="linkblack" href="/de/startseite">de</a> | 486 <a class="linkblack" href="/en/home-page">en</a> 487 <a class="linkblack ms-2" href="/en-US/change-language"> 488 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-globe" viewBox="0 0 16 16"> 489 <path d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm7.5-6.923c-.67.204-1.335.82-1.887 1.855A7.97 7.97 0 0 0 5.145 4H7.5V1.077zM4.09 4a9.267 9.267 0 0 1 .64-1.539 6.7 6.7 0 0 1 .597-.933A7.025 7.025 0 0 0 2.255 4H4.09zm-.582 3.5c.03-.877.138-1.718.312-2.5H1.674a6.958 6.958 0 0 0-.656 2.5h2.49zM4.847 5a12.5 12.5 0 0 0-.338 2.5H7.5V5H4.847zM8.5 5v2.5h2.99a12.495 12.495 0 0 0-.337-2.5H8.5zM4.51 8.5a12.5 12.5 0 0 0 .337 2.5H7.5V8.5H4.51zm3.99 0V11h2.653c.187-.765.306-1.608.338-2.5H8.5zM5.145 12c.138.386.295.744.468 1.068.552 1.035 1.218 1.65 1.887 1.855V12H5.145zm.182 2.472a6.696 6.696 0 0 1-.597-.933A9.268 9.268 0 0 1 4.09 12H2.255a7.024 7.024 0 0 0 3.072 2.472zM3.82 11a13.652 13.652 0 0 1-.312-2.5h-2.49c.062.89.291 1.733.656 2.5H3.82zm6.853 3.472A7.024 7.024 0 0 0 13.745 12H11.91a9.27 9.27 0 0 1-.64 1.539 6.688 6.688 0 0 1-.597.933zM8.5 12v2.923c.67-.204 1.335-.82 1.887-1.855.173-.324.33-.682.468-1.068H8.5zm3.68-1h2.146c.365-.767.594-1.61.656-2.5h-2.49a13.65 13.65 0 0 1-.312 2.5zm2.802-3.5a6.959 6.959 0 0 0-.656-2.5H12.18c.174.782.282 1.623.312 2.5h2.49zM11.27 2.461c.247.464.462.98.64 1.539h1.835a7.024 7.024 0 0 0-3.072-2.472c.218.284.418.598.597.933zM10.855 4a7.966 7.966 0 0 0-.468-1.068C9.835 1.897 9.17 1.282 8.5 1.077V4h2.355z"></path> 490 </svg> 491 </a> 492 </div> 493 </div> 494 495 <!-- Main Header with Logo --> 496 <div class="d-flex align-items-center justify-content-between pt-2 pb-3"> 497 <div class="flex-grow-1"> 498 <a class="linkblack nounderline" href="/en-US/home-page"> 499 <h1 class="mb-0"> 500 online barcode generator 501 </h1> 502 </a> 503 </div> 504 <div class="d-none d-sm-block"> 505 <a href="/en-US/home-page"> 506 <img src="/images/Logo_barcode-generator.de.jpg" height="50" alt="Barcode Generator Logo"/> 507 </a> 508 </div> 509 </div> 510
511 <!-- Advertisement Section --> 512 <div class="text-center p-3 rounded mb-3" style="background-color: whitesmoke;"> 513 <!-- Ezoic - slot_4_under_page_title - under_page_title --> 514<div id="ezoic-pub-ad-placeholder-188"> </div> 515<!-- End Ezoic - slot_4_under_page_title - under_page_title --> 516 </div> 517 518 <!-- Page Subtitle Section --> 519 <div class="text-justify rounded p-3 mb-3" style="background-color: whitesmoke;"> 520 521Free Online Barcode Generator â 180+ types including EAN-13, QR Code, Code128 & DataMatrix. 522<br/> 523Commercial use â No registration â PNG, JPG, EPS, PDF, Excel â 300 DPI 524 525 </div> 526 527 528 </div> 529 530<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom border-top box-shadow shadow mb-3"> 531 <div class="container"> 532 <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> 533 <span class="navbar-toggler-icon"></span> 534 </button> 535 <div class="collapse navbar-collapse" id="navbarTogglerDemo03"> 536 <ul class="navbar-nav me-auto mb-2 mb-lg-0"> 537 538 <!--Home--> 539 <li class="nav-item"> 540 <a class="nav-link text-dark" href="/en-US/home-page">Intro</a> 541 </li> 542 543 <!--Generator--> 544 <li class="nav-item dropdown"> 545 <a class="nav-link dropdown-toggle text-dark" href="#" id="generatorDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 546 generator 547 </a> 548 <ul class="dropdown-menu" aria-labelledby="generatorDropdown"> 549 <li> 550 <a role="button" class="dropdown-item" href="/en-US/simple-generator-for-all-barcodes">Simple Generator (for all barcodes)</a> 551 </li> 552 <li><hr class="dropdown-divider"/></li> 553 <li> 554 <a role="button" class="dropdown-item" href="/en-US/serial-number-generator">Serial Number Generator</a> 555 </li> 556 <li><hr class="dropdown-divider"/></li> 557 <a role="button" class="dropdown-item text-capitalize disabled">special generators</a> 558 <a role="button" class="dropdown-item text-capitalize px-4" href="/en-US/create-code128/Code128">Code128</a> 559 <a role="button" class="dropdown-item text-capitalize px-4" href="/en-US/create-ean13/EAN13">EAN13</a> 560 <a role="button" class="dropdown-item text-capitalize px-4" href="/en-US/create-qrcode/QR">QR-Code</a> 561 <a role="button" class="dropdown-item text-capitalize px-4" href="/en-US/create-isbn/ISBN">ISBN</a> 562 <a role="button" class="dropdown-item text-capitalize px-4" href="/en-US/create-datamatrix/Datamatrix">DataMatrix</a> 563 <li><hr class="dropdown-divider"/></li> 564 <a role="button" class="dropdown-item" href="/en-US/request-a-quote-for-printing">Request a Quote for Printing</a> 565 <li><hr class="dropdown-divider"/></li> 566 <a class="dropdown-item" href="https://v2.barcode-generator.de">Generator old version 2</a> 567 <li><hr class="dropdown-divider"/></li> 568 <a role="button" class="dropdown-item" href="/en-US/api-for-barcode-generatorde">API for barcode-generator.de</a> 569 </ul> 570 </li> 571 572 <!--Hilfe--> 573 <li class="nav-item dropdown"> 574 <a class="nav-link dropdown-toggle text-dark" href="#" id="helpDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 575 help 576 </a> 577 <ul class="dropdown-menu" aria-labelledby="helpDropdown"> 578 <li><a role="button" class="dropdown-item" href="/en-US/what-is-a-barcode">What is a Barcode</a></li> 579 <li><a role="button" class="dropdown-item" href="/en-US/history-of-barco
579des">History of Barcodes</a></li> 580 <li><hr class="dropdown-divider"/></li> 581 <li><a role="button" class="dropdown-item text-capitalize disabled">barcode types and usages</a></li> 582 <li><a role="button" class="dropdown-item px-4" href="/en-US/ean13-use-in-practice">EAN13: Use in practice</a></li> 583 <li><a role="button" class="dropdown-item px-4" href="/en-US/code128-usage-in-practice">Code128: Usage in practice</a></li> 584 <li><hr class="dropdown-divider"/></li> 585 <li><a role="button" class="dropdown-item text-capitalize disabled">role of GS1</a></li> 586 <li><a role="button" class="dropdown-item px-4" href="/en-US/what-is-the-role-of-the-gs1">What is the Role of the GS1</a></li> 587 <li><a role="button" class="dropdown-item px-4" href="/en-US/gs1-application-identifier">GS1 Application Identifier</a></li> 588 <li><a role="button" class="dropdown-item px-4" href="/en-US/list-of-gs1-application-identifier">List of GS1 Application Identifier</a></li> 589 <li><a role="button" class="dropdown-item px-4" href="/en-US/fnc1-data-divider">FNC1 Data Divider</a></li> 590 <li><hr class="dropdown-divider"/></li> 591 <li><a role="button" class="dropdown-item text-capitalize disabled">Amazon</a></li> 592 <li><a role="button" class="dropdown-item px-4" href="/en-US/amazon-fulfillment-and-barcodes">Amazon Fulfillment and Barcodes</a></li> 593 </ul> 594 </li> 595 596 <!--Kaufen --> 597 <li class="nav-item dropdown"> 598 <a class="nav-link dropdown-toggle text-dark" href="#" id="shopDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false"> 599 shop 600 </a> 601 <ul class="dropdown-menu" aria-labelledby="shopDropdown"> 602 <li> 603 <a role="button" class="dropdown-item" href="/en-US/request-a-quote-for-printing">Request a Quote for Printing</a> 604 </li> 605 <li><hr class="dropdown-divider"/></li> 606 <li> 607 <a role="button" class="dropdown-item" href="/en-US/unlock-advanced-features">unlock advanced features</a> 608 </li> 609 </ul> 610 </li> 611 612 <!--Kontakt--> 613 <li class="nav-item"> 614 <a class="nav-link text-dark" href="/en-US/contact-us">contact</a> 615 </li> 616 <li class="nav-item"> 617 <a class="nav-link text-dark" href="/en-US/legal-notice">about us</a> 618 </li> 619 <li class="nav-item"> 620 <a class="nav-link text-dark" href="/en-US/change-language">language</a> 621 </li> 622 623 </ul> 624 625 <div class="d-flex align-items-center"> 626 627<ul class="navbar-nav"> 628 <li class="nav-item"> 629 <a class="nav-link text-dark" href="/Identity/Account/Register">Register</a> 630 </li> 631 <li class="nav-item"> 632 <a class="nav-link text-dark" href="/Identity/Account/Login">Login</a> 633 </li> 634</ul> 635 636 </div> 637 </div> 638 </div> 639 640</nav> 641 642 643 <div class="container" style="padding-top: 0px"> 644 <main role="main" class="pb-3"> 645 646 647 648 649<h2>Simple Barcode Generator</h2> 650 651<p> 652 653 654</p> 655 656 657<form action="/en-US/42/generated-barcode-list" method="post" target="_blank"><input data-val="true" data-val-number="The field quiet zone width must be a number." id="SilentZonesWidth" name="SilentZonesWidth" type="hidden" value="3"/> <div class="row"> 658 <div class="col-lg-9 col-12"> 659 <div class="row"> 660 <div class="col-xxl-4 col-md-6 col-12 mb-3"> 661 662 663<div class="card shadow-sm h-100"> 664 <div class="card-header"> 665 <h3 class="my-0 fw-normal">1. choose barcode</h3> 666 </div> 667 <div class="card-body">
668 <div class="mb-3 text-justify"> 669 Choose from 189 different barcodes such as EAN13, Code128, Interleaved2of5, QR, Datamatrix and many more: 670 </div> 671 <div class="d-flex"> 672 <div class="flex-grow-1"> 673 <select class="form-select" id="BarcodeTypeVendorSelectBox" onchange="BarcodeTypeVendorChangedEvent(this)" name="BarcodeTypeVendor"> 674 <optgroup label="1) Popular"> 675 <option value="5" selected="">Code128</option> 676 <option value="7">Ean8</option> 677 <option value="8">Ean13</option> 678 <option value="16">UccEan128</option> 679 <option value="41">QRCode</option> 680 <option value="3">Code39</option> 681 <option value="0">Codabar</option> 682 <option value="10">Interleaved2of5</option> 683 <option value="13">Pdf417</option> 684 <option value="6">DataMatrix</option> 685 <option value="17">UpcA</option> 686 <option value="18">UpcE</option> 687 </optgroup> 688 <optgroup label="2) Others"> 689 <option value="1">Code11</option> 690 <option value="2">Code16k</option> 691 <option value="4">Code93</option> 692 <option value="9">Industrial2of5</option> 693 <option value="11">Isbn</option> 694 <option value="12">Msi</option> 695 <option value="14">Planet</option> 696 <option value="15">Postnet</option> 697 <option value="19">UspsOneCode4CB</option> 698 <option value="20">RoyalMail</option> 699 <option value="21">AustraliaPost</option> 700 <option value="22">RoyalTpgPostKix</option> 701 <option value="23">Sscc18</option> 702 <option value="24">Pzn</option> 703 <option value="25">DeutschePostLeitcode</option> 704 <option value="26">DeutschePostIdentcode</option> 705 <option value="27">UspsTrayLabel</option> 706 <option value="28">UspsSackLabel</option> 707 <option value="29">EanVelocity</option> 708 <option value="30">SingaporePost</option> 709 <option value="31">Jan8</option> 710 <option value="32">Jan13</option> 711 <option value="33">SwissPostParcel</option> 712 <option value="34">Opc</option> 713 <option value="35">Ean99</option> 714 <option value="36">Itf14</option> 715 <option value="37">Scc14</option> 716 <option value="38">Issn</option> 717 <option value="39">Ismn</option> 718 <option value="40">NumlyNumber</option> 719 <option value="42">UspsFim</option> 720 <option value="43">UspsHorizontalBars</option> 721 <option value="44">Telepen</option> 722 <option value="45">Pharmacode</option> 723 <option value="46">Semacode</option> 724 <option value="47">Code32</option> 725 <option value="48">UspsPicUccEan128</option> 726 <option value="49">FedExGround96</option> 727 <option value="50">AztecCode</option> 728 <option value="51">CompactPdf417</option> 729 <option value="52">MacroPdf417</option> 730 <option value="53">MicroPdf417</option> 731 <option value="54">VicsBol</option> 732 <option value="55">VicsScacPro</option> 733 <option value="56">ItalianPost25</option>
734 <option value="57">Isbt128</option> 735 <option value="58">HibcLic39</option> 736 <option value="59">HibcLic128</option> 737 <option value="60">HibcPas39</option> 738 <option value="61">HibcPas128</option> 739 <option value="62">UspsIntelligentMail</option> 740 <option value="63">EanUpcAddOn2</option> 741 <option value="64">EanUpcAddOn5</option> 742 <option value="65">UspsPicCode128</option> 743 <option value="66">GS1DataBarOmnidirectional</option> 744 <option value="67">GS1DataBar14</option> 745 <option value="68">Rss14</option> 746 <option value="69">GS1DataBarTruncated</option> 747 <option value="70">GS1DataBar14Truncated</option> 748 <option value="71">Rss14Truncated</option> 749 <option value="72">GS1DataBarStacked</option> 750 <option value="73">GS1DataBar14Stacked</option> 751 <option value="74">Rss14Stacked</option> 752 <option value="75">GS1DataBarStackedOmnidirectional</option> 753 <option value="76">GS1DataBar14StackedOmnidirectional</option> 754 <option value="77">Rss14StackedOmnidirectional</option> 755 <option value="78">GS1DataBarLimited</option> 756 <option value="80">RssLimited</option> 757 <option value="81">GS1DataBarExpanded</option> 758 <option value="82">RssExpanded</option> 759 <option value="83">GS1DataBarExpandedStacked</option> 760 <option value="84">RssExpandedStacked</option> 761 <option value="85">GS1128</option> 762 <option value="86">MaxiCode</option> 763 <option value="87">MicroQRCode</option> 764 <option value="88">Matrix2of5</option> 765 <option value="89">DanishPostal39</option> 766 <option value="90">FrenchPostal39AR</option> 767 <option value="91">IATA2of5</option> 768 <option value="92">AustraliaPostDomesticEParcelBarcode</option> 769 <option value="93">UspsIntelligentMailContainerBarcode</option> 770 <option value="94">KodakPatchCode</option> 771 <option value="95">GS1DataMatrix</option> 772 <option value="96">Ean13CCA</option> 773 <option value="97">Ean13CCB</option> 774 <option value="98">Ean8CCA</option> 775 <option value="99">Ean8CCB</option> 776 <option value="100">UpcACCA</option> 777 <option value="101">UpcACCB</option> 778 <option value="102">UpcECCA</option> 779 <option value="103">UpcECCB</option> 780 <option value="104">UccEan128CCA</option> 781 <option value="105">UccEan128CCB</option> 782 <option value="106">UccEan128CCC</option> 783 <option value="107">GS1128CCA</option> 784 <option value="108">GS1128CCB</option> 785 <option value="109">GS1128CCC</option> 786 <option value="110">GS1DataBarOmnidirectionalCCA</option> 787 <option value="111">
787GS1DataBar14CCA</option> 788 <option value="112">Rss14CCA</option> 789 <option value="113">GS1DataBarOmnidirectionalCCB</option> 790 <option value="114">GS1DataBar14CCB</option> 791 <option value="115">Rss14CCB</option> 792 <option value="116">GS1DataBarTruncatedCCA</option> 793 <option value="117">GS1DataBar14TruncatedCCA</option> 794 <option value="118">Rss14TruncatedCCA</option> 795 <option value="119">GS1DataBarTruncatedCCB</option> 796 <option value="120">GS1DataBar14TruncatedCCB</option> 797 <option value="121">Rss14TruncatedCCB</option> 798 <option value="122">GS1DataBarLimitedCCA</option> 799 <option value="123">RssLimitedCCA</option> 800 <option value="124">GS1DataBarLimitedCCB</option> 801 <option value="125">RssLimitedCCB</option> 802 <option value="126">GS1DataBarStackedCCA</option> 803 <option value="127">GS1DataBar14StackedCCA</option> 804 <option value="128">Rss14StackedCCA</option> 805 <option value="129">GS1DataBarStackedCCB</option> 806 <option value="130">GS1DataBar14StackedCCB</option> 807 <option value="131">Rss14StackedCCB</option> 808 <option value="132">GS1DataBarStackedOmnidirectionalCCA</option> 809 <option value="133">GS1DataBar14StackedOmnidirectionalCCA</option> 810 <option value="134">Rss14StackedOmnidirectionalCCA</option> 811 <option value="135">GS1DataBarStackedOmnidirectionalCCB</option> 812 <option value="136">GS1DataBar14StackedOmnidirectionalCCB</option> 813 <option value="137">Rss14StackedOmnidirectionalCCB</option> 814 <option value="138">GS1DataBarExpandedCCA</option> 815 <option value="139">RssExpandedCCA</option> 816 <option value="140">GS1DataBarExpandedCCB</option> 817 <option value="141">RssExpandedCCB</option> 818 <option value="142">GS1DataBarExpandedStackedCCA</option> 819 <option value="143">RssExpandedStackedCCA</option> 820 <option value="144">GS1DataBarExpandedStackedCCB</option> 821 <option value="145">RssExpandedStackedCCB</option> 822 <option value="147">Ean14</option> 823 <option value="148">Dun14Itf</option> 824 <option value="149">Dun14Ean</option> 825 <option value="150">GS1QRCode</option> 826 <option value="151">Ppn</option> 827 <option value="152">IFAsecurPharm</option> 828 <option value="153">DhlAwb</option> 829 <option value="154">HibcLicDataMatrix</option> 830 <option value="155">HibcLicQRCode</option> 831 <option value="156">HibcLicAztecCode</option> 832 <option value="157">HibcPasDataMatrix</option> 833 <option value="158">HibcPasQRCode</option> 834 <option value="159">HibcPasAztecCode</option> 835 <option value="160">Isbt128DataMatrix</option> 836 <option value="161">DeutschePostResponsePlusPostMatrix</option> 837 <option value="162">
837DeutschePostBzl</option> 838 <option value="163">UspsIntelligentMailPackageBarcode</option> 839 <option value="164">HanXinCode</option> 840 <option value="165">JapanPost</option> 841 <option value="166">KoreaPost</option> 842 <option value="167">DataLogic2of5</option> 843 <option value="168">MailmarkCMDM</option> 844 <option value="169">Mailmark4StateC</option> 845 <option value="170">Mailmark4StateL</option> 846 <option value="171">DotCode</option> 847 <option value="172">GS1AztecCode</option> 848 <option value="173">SwissQRCode</option> 849 <option value="174">Pharmacode2D</option> 850 <option value="175">ChannelCode</option> 851 <option value="176">JABCode</option> 852 <option value="177">Plessey</option> 853 <option value="178">EPCQRCode</option> 854 <option value="179">Code49</option> 855 <option value="180">CodablockF</option> 856 <option value="181">Tlc39</option> 857 <option value="182">HibcLicCodablockF</option> 858 <option value="183">HibcPasCodablockF</option> 859 <option value="184">TriOptic</option> 860 <option value="185">DINSpecQRCode</option> 861 <option value="186">
861DINSpecDataMatrix</option> 862 <option value="187">RectMicroQRCode</option> 863 <option value="188">GS1RectMicroQRCode</option> 864 <option value="189">DPDCode</option> 865 <option value="190">DAFT</option> 866 <option value="191">VINCode39</option> 867 <option value="192">VINQRCode</option> 868 <option value="193">VINDataMatrix</option> 869 <option value="194">PharmacodeTwoTrack</option> 870 <option value="195">Ultracode</option> 871 </optgroup> 872 </select> 873 </div> 874 <div class="ps-1"> 875 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpBarcodeList" data-bs-toggle="modal"> 876 <i class="bi bi-question-circle"></i> 877 </button> 878 </div> 879 </div> 880 881 <div class="mt-3 mb-1 fw-bold"> 882 <div class="d-flex align-items-center justify-content-between"> 883 <span>Enter one barcode per line</span> 884 </div> 885 </div> 886 887 <div class="d-flex"> 888 <div class="flex-grow-1"> 889 <textarea class="form-control" id="BarcodeValue" rows="8" style="height: 185px; resize: vertical;" data-val="true" data-val-required="barcode value is required" name="BarcodeValue">8949461894921 8906515645 8916548964631668</textarea> 892 </div> 893 <div class="ps-1 d-flex flex-column"> 894 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpBarcodeValues" data-bs-toggle="modal"> 895 <i class="bi bi-question-circle"></i> 896 </button> 897 <!-- Upload button under the question mark --> 898 <button type="button" class="btn btn-outline-primary mt-1 js-barcode-import-trigger" data-bs-target="#barcodeImportModal" data-bs-toggle="modal" data-target-textarea="#BarcodeValue" title="Excel/CSV Upload"> 899 <i class="bi bi-upload"></i> 900 </button> 901 </div> 902 </div> 903 904 <div class="mt-3"> 905 <button type="button" class="btn btn-outline-secondary w-100" data-bs-target="#modalCustomTextAbove" data-bs-toggle="modal" id="customTextButton"> 906 <i class="bi bi-fonts me-2"></i>Custom text above barcode... <span class="badge bg-warning text-dark ms-2">BETA</span> 907 </button> 908 </div> 909 </div> 910</div> 911 912 913<!-- Modal Hilfe Barcodeliste --> 914<div class="modal fade" id="modalHelpBarcodeList" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 915 <div class="modal-dialog modal-dialog-centered"> 916 <div class="modal-content"> 917 <div class="modal-header"> 918 <h3 class="modal-title" id="exampleModalLabel" style="margin-top:0px">List of barcodes</h3> 919 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 920 </div> 921 <div class="modal-body"> 922 Select your desired barcode from a list of 189 barcode types. 923 <h3>for beginners</h3> 924 If you don't have any defaults, use Code128. This barcode can be read by any reader and is widely used. 925 </div> 926 <div class="modal-footer"> 927 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 928 </div> 929 </div> 930 </div> 931</div> 932 933<!-- Modal Hilfe Barcodeliste --> 934<div class="modal fade" id="modalHelpBarcodeValues" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 935 <div class="modal-dialog modal-dialog-centered"> 936 <div class="modal-content"> 937 <div class="modal-header"> 938 <h3 class="modal-title" id="exampleModalLabel" style="margin-top:0px">Barcode values</h3> 939 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 940 </div> 941 <div class="modal-body"> 942 <p> 943 Here you enter the barcode value (i.e. the character string) for which you want to generate a barcode. 944 </p> 945 <p> 946 You can generate multiple barcodes at once by entering multiple lines. One barcode is generated for each line. 947 </p> 948 <p> 949 In the future, an import of Excel and CSV data will be added here. 950 </p> 951 </div> 952 <div class="modal-footer"> 953 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 954 </div> 955 </div> 956 </div> 957</div> 958 959<!-- Modal für Custom Text Above Barcode --> 960<div class="modal fade" id="modalCustomTextAbove" tabindex="-1" aria-labelledby="modalCustomTextAboveLabel" aria-hidden="true"> 961 <div class="modal-dialog"> 962 <div class="modal-content"> 963 <div class="modal-header"> 964 <h5 class="modal-title" id="modalCustomTextAboveLabel"> 965 <i class="bi bi-fonts me-2"></i>Custom Text Above Barcode
966 <span class="badge bg-warning text-dark ms-2">BETA</span> 967 </h5> 968 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 969 </div> 970 <div class="modal-body"> 971 <div class="alert alert-warning"> 972 <i class="bi bi-exclamation-triangle me-2"></i> 973 <strong>Beta feature:</strong> This new feature is currently in beta testing. 974 We appreciate your feedback to help us improve! 975 976 </div> 977 978 <div class="mb-3"> 979 <label for="TextOnTop" class="form-label">Text</label> 980 <input class="form-control" placeholder="Company name, product description, etc." maxlength="50" type="text" id="TextOnTop" name="TextOnTop" value=""/> 981 <div class="form-text">Enter the text to display above the barcode</div> 982 </div> 983 984 <div class="mb-3"> 985 <label for="TextOnTopFontSize" class="form-label">Font Size</label> 986 <div class="input-group"> 987 <input class="form-control" type="number" min="0.1" max="20" step="0.1" placeholder="6" data-val="true" data-val-number="The field Font Size Top must be a number." data-val-required="The Font Size Top field is required." id="TextOnTopFontSize" name="TextOnTopFontSize" value="6"/><input name="__Invariant" type="hidden" value="TextOnTopFontSize"/> 988 <span class="input-group-text">pt</span> 989 </div> 990 </div> 991 992 <div class="mb-3"> 993 <label for="TextOnTopFontFamily" class="form-label">Font Family</label> 994 <select class="form-select" id="TextOnTopFontFamily" name="TextOnTopFontFamily"> 995 <option value="">-- Wählen --</option> 996 <option value="Arial" selected="">Arial</option> 997 <option value="Times New Roman">Times New Roman</option> 998 <option value="Courier New">Courier New</option> 999 <option value="Helvetica">Helvetica</option> 1000 <option value="Verdana">Verdana</option> 1001 </select> 1002 </div> 1003 1004 <div class="alert alert-info"> 1005 <i class="bi bi-info-circle me-2"></i> 1006 The text will be displayed above each barcode. Leave empty to disable. 1007 </div> 1008 </div> 1009 <div class="modal-footer"> 1010 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" onclick="clearCustomText()"> 1011 remove text 1012 </button> 1013 <button type="button" class="btn btn-primary" onclick="applyCustomText()"> 1014 Apply 1015 </button> 1016 </div> 1017 </div> 1018 </div> 1019</div> 1020
1021<script> 1022 function BarcodeTypeVendorChangedEvent(selectElement) { 1023 var unit = selectElement.value; 1024 if (unit == "8") { // EAN13 1025 var silentZoneCheckBox = document.getElementById("silentZoneCheckBox"); 1026 if (silentZoneCheckBox) { 1027 silentZoneCheckBox.checked = true; 1028 silentZoneCheckBox.disabled = true; 1029 } 1030 } else { 1031 var silentZoneCheckBox = document.getElementById("silentZoneCheckBox"); 1032 if (silentZoneCheckBox) { 1033 silentZoneCheckBox.disabled = false; 1034 } 1035 } 1036 } 1037 1038 // Vereinfachte Custom Text Funktionen - asp-for kümmert sich um Model Binding 1039 function applyCustomText() { 1040 // Setze Default-Werte falls leer 1041 var fontSizeField = document.getElementById('TextOnTopFontSize'); 1042 var fontFamilyField = document.getElementById('TextOnTopFontFamily'); 1043 1044 if (!fontSizeField.value || fontSizeField.value == '0') { 1045 fontSizeField.value = '6'; 1046 } 1047 1048 if (!fontFamilyField.value) { 1049 fontFamilyField.value = 'Arial'; 1050 } 1051 1052 // Modal schlieÃen 1053 var modal = bootstrap.Modal.getInstance(document.getElementById('modalCustomTextAbove')); 1054 modal.hide(); 1055 1056 // Visuelles Feedback aktualisieren 1057 updateCustomTextButton(); 1058 } 1059 1060 function clearCustomText() { 1061 // Felder leeren - asp-for kümmert sich um das Model Binding 1062 document.getElementById('TextOnTop').value = ''; 1063 document.getElementById('TextOnTopFontSize').value = ''; 1064 document.getElementById('TextOnTopFontFamily').value = 'Arial'; 1065 1066 // Button-Status zurücksetzen 1067 updateCustomTextButton(); 1068 } 1069 1070 function updateCustomTextButton() { 1071 var text = document.getElementById('TextOnTop').value; 1072 var button = document.getElementById('customTextButton'); 1073 1074 if (text && text.trim() !== '') { 1075 button.classList.remove('btn-outline-secondary'); 1076 button.classList.add('btn-outline-success'); 1077 } else { 1078 button.classList.remove('btn-outline-success'); 1079 button.classList.add('btn-outline-secondary'); 1080 } 1081 } 1082 1083 // Initialisierung beim Laden der Seite 1084 document.addEventListener('DOMContentLoaded', function() { 1085 // Button-Status beim Laden aktualisieren 1086 updateCustomTextButton(); 1087 1088 // Modal Event-Listener für Button-Update 1089 var modal = document.getElementById('modalCustomTextAbove'); 1090 modal.addEventListener('hide.bs.modal', function() { 1091 updateCustomTextButton(); 1092 }); 1093 }); 1094</script>
1094 1095 </div> 1096 1097 <div class="col-xxl-4 col-md-6 col-12 mb-3"> 1098 1099 1100 1101<div class="card shadow-sm h-100"> 1102 <div class="card-header"> 1103 <h3 class="my-0 fw-normal">2. value and properties</h3> 1104 </div> 1105 <div class="card-body"> 1106 <div class="container p-0 m-0"> 1107 <div class="row row-cols-3"> 1108 <div class="col-4 mt-1 col-sm-6"> 1109 unit of measure 1110 </div> 1111 <div class="col-6 pb-2 col-sm-4"> 1112 <select class="form-select" id="unitSelectBox" onchange="UnitChangedEvent(this)" data-val="true" data-val-required="unit is required" name="Unit"> 1113 <option value="mm" selected="">mm</option> 1114 <option value="inch">inch</option> 1115 <option value="pixel">pixel</option> 1116 </select> 1117 </div> 1118 <div class="col-2 p-0 pb-2"> 1119 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpUnit" data-bs-toggle="modal"> 1120 <i class="bi bi-question-circle"></i> 1121 </button> 1122 </div> 1123 1124 <div class="col-4 mt-1 col-sm-6"> 1125 fixed width 1126 </div> 1127 <div class="col-6 pb-2 col-sm-4"> 1128 <div class="form-check"> 1129 <input class="form-check-input" type="checkbox" id="fixedWidthCheckBox" onchange="FixedSizeChangedEvent(this)" onload="FixedSizeOnInitialized(this)" data-val="true" data-val-required="The AusgabegröÃe vorbestimmt field is required." name="FixedSize" value="true"/> 1130 </div> 1131 </div> 1132 <div class="col-2 p-0 pb-2"> 1133 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpFixedSize" data-bs-toggle="modal"> 1134 <i class="bi bi-question-circle"></i> 1135 </button> 1136 </div> 1137 1138 <div class="col-4 mt-1 col-sm-6" id="barWidthCaption"> 1139 bar width 1140 </div> 1141 <div class="col-6 pb-2 col-sm-4" id="barWidthValue"> 1142 <input class="form-control" type="number" step="0.01" id="barWidthNumberBox" data-val="true" data-val-number="The field BarWidth must be a number." data-val-required="The BarWidth field is required." name="BarWidth" value="0.60"/><input name="__Invariant" type="hidden" value="BarWidth"/> 1143 </div> 1144 <div class="col-2 p-0 pb-2" id="barWidthHelp"> 1145 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpBarWidth" data-bs-toggle="modal"> 1146 <i class="bi bi-question-circle"></i> 1147 </button> 1148 </div> 1149 1150 <div class="col-4 mt-1 col-sm-6" id="widthCaption"> 1151 width 1152 </div> 1153 <div class="col-6 pb-2 col-sm-4" id="widthValue"> 1154 <input class="form-control" type="number" step="1" id="widthNumberBox" data-val="true" data-val-number="The field width must be a number." data-val-range="width must be between 0.1 and 4096" data-val-range-max="4096" data-val-range-min="0.1" data-val-required="width is required" name="SizeX" value="50"/><input name="__Invariant" type="hidden" value="SizeX"/> 1155 </div> 1156 <div class="col-2 p-0 pb-2" id="widthHelp"> 1157 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpWidth" data-bs-toggle="modal"> 1158 <i class="bi bi-question-circle"></i> 1159 </button> 1160 </div> 1161 1162 <div class="col-4 mt-1 col-sm-6"> 1163 height 1164 </div> 1165 <div class="col-6 pb-2 col-sm-4"> 1166 <input class="form-control" type="number" step="1" id="heightNumberBox" data-val="true" data-val-number="The field height must be a number." data-val-range="height must be between 0.1 and 4096" data-val-range-max="4096" data-val-range-min="0.1" data-val-required="height is required" name="SizeY" value="25"/><input name="__Invariant" type="hidden" value="SizeY"/> 1167 </div> 1168 <div class="col-2 p-0 pb-2"> 1169 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpHeight" data-bs-toggle="modal"> 1170 <i class="bi bi-question-circle"></i> 1171 </button> 1172 </div> 1173 1174 <div class="col-4 mt-1 col-sm-6"> 1175 check digit 1176 </div> 1177 <div class="col-6 pb-2 col-sm-4"> 1178 <div class="form-check"> 1179 <input class="form-check-input" type="checkbox" data-val="true" data-val-required="The CalculateCheckDigit field is required." id="CalculateCheckDigit" name="CalculateCheckDigit" value="true"/> 1180 </div> 1181 </div> 1182 <div class="col-2 p-0 pb-2"> 1183 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpChecksum" data-bs-toggle="modal"> 1184 <i class="bi bi-question-circle"></i> 1185 </button> 1186 </div> 1187 1188 <div class="col-4 mt-1 col-sm-6"> 1189 quiet zone 1190 </div> 1191 <div class="col-6 pb-2 col-sm-4"> 1192 <div class="form-check"> 1193 <input class="form-check-input" type="checkbox" id="silentZoneCheckBox" data-val="true" data-val-required="The quiet zone field is required." name="SilentZones" value="true"/> 1194 </div> 1195 </div> 1196 <div class="col-2 p-0 pb-2"> 1197 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpSilentZone" data-bs-toggle="modal"> 1198 <i class="bi bi-question-circle"></i> 1199 </button> 1200 </div> 1201 1202 <div class="col-4 mt-1 col-sm-6"> 1203 show text 1204 </div> 1205 <div class="col-6 pb-2 col-sm-4"> 1206 <div class="form-check"> 1207 <input class="form-check-input" type="checkbox" checked="checked" data-val="true" data-val-required="The show text field is required." id="ShowText" name="ShowText" value="true"/> 1208 </div> 1209 </div> 1210 <div class="col-2 p-0 pb-2"> 1211 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpShowText" data-bs-toggle="modal"> 1212 <i class="bi bi-question-circle"></i> 1213 </button> 1214 </div> 1215 1216 <div class="col-4 mt-1 col-sm-6"> 1217 font size 1218 </div> 1219 <div class="col-6 pb-2 col-sm-4"> 1220 <input class="form-control" type="number" step="0.01" max="99" id="fontSizeNumberBox" data-val="true" data-val-number="The field Font Size must be a number." data-val-required="The Font Size field is required." name="FontSize" value="6"/><input name="__Invariant" type="hidden" value="FontSize"/> 1221 </div> 1222 <div class="col-2 p-0 pb-2"> 1223 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpFontSize" data-bs-toggle="modal"> 1224 <i class="bi bi-question-circle"></i> 1225 </button> 1226 </div> 1227 1228 <div class="col-4 mt-1 col-sm-6"> 1229 DPI 1230 </div> 1231 <div class="col-6 pb-2 col-sm-4"> 1232 <input class="form-control" type="number" step="1" min="92" max="600" data-val="true" data-val-range="value must be between 92 and 1200" data-val-range-max="1200" data-val-range-min="92" data-val-required="The DPI field is required." id="DPI" name="DPI" value="300"/><input name="__Invariant" type="hidden" value="DPI"/> 1233 </div> 1234 <div class="col-2 p-0 pb-2"> 1235 <button type="button" class="btn btn-outline-secondary" data-bs-target="#modalHelpDpi" data-bs-toggle="modal"> 1236 <i class="bi bi-question-circle"></i> 1237 </button> 1238 </div> 1239 </div> 1240 1241 <div id="renderSizeInfo" class="pt-1" hidden=""> 1242 <div class="small text-muted"> 1243 <i class="bi bi-aspect-ratio"></i>
1244 <span id="renderSizeValue"></span> 1245 </div> 1246 <div id="renderSizeWarning" class="small text-danger mt-1" hidden=""></div> 1247 <div id="renderValueWarning" class="small text-danger mt-1" hidden=""></div> 1248 </div> 1249 </div> 1250 </div> 1251</div> 1252 1253 1254<!-- Modal Hilfe Barcodeliste --> 1255<div class="modal fade" id="modalHelpDpi" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 1256 <div class="modal-dialog modal-dialog-centered"> 1257 <div class="modal-content"> 1258 <div class="modal-header"> 1259 <h3 class="modal-title text-capitalize" id="exampleModalLabel" style="margin-top:0px">DPI</h3> 1260 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1261 </div> 1262 <div class="modal-body"> 1263 The DPI resolution for the barcode image. 1264 </div> 1265 <div class="modal-footer"> 1266 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 1267 </div> 1268 </div> 1269 </div> 1270</div> 1271 1272<!-- Modal Hilfe Barcodeliste --> 1273<div class="modal fade" id="modalHelpUnit" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 1274 <div class="modal-dialog modal-dialog-centered"> 1275 <div class="modal-content"> 1276 <div class="modal-header"> 1277 <h3 class="modal-title" id="exampleModalLabel" style="margin-top:0px">unit of measure</h3> 1278 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1279 </div> 1280 <div class="modal-body"> 1281 Specifies the unit in which the height and width are specified. 1282 </div> 1283 <div class="modal-footer"> 1284 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 1285 </div> 1286 </div> 1287 </div> 1288</div> 1289 1290<!-- Modal Hilfe Barcodeliste --> 1291<div class="modal fade" id="modalHelpHeight" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 1292 <div class="modal-dialog modal-dialog-centered"> 1293 <div class="modal-content"> 1294 <div class="modal-header"> 1295 <h3 class="modal-title" id="exampleModalLabel" style="margin-top:0px">height of barcode</h3> 1296 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1297 </div> 1298 <div class="modal-body"> 1299 Indicates the height of the barcode. The unit of measurement is specified in the preceding property. 1300 </div> 1301 <div class="modal-footer"> 1302 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 1303 </div> 1304 </div> 1305 </div> 1306</div> 1307 1308<!-- Modal Hilfe Barcodeliste --> 1309<div class="modal fade" id="modalHelpBarWidth" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 1310 <div class="modal-dialog modal-dialog-centered"> 1311 <div class="modal-content"> 1312 <div class="modal-header"> 1313 <h3 class="modal-title" id="exampleModalLabel" style="margin-top:0px">width of the narrow bars</h3> 1314 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1315 </div> 1316 <div class="modal-body"> 1317 Specifies the width of the narrow bars in the barcode. In barcode terminology, this is known as the X value. The unit of measurement is specified in the preceding property. 1318 </div> 1319 <div class="modal-footer"> 1320 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 1321 </div> 1322 </div> 1323 </div> 1324</div> 1325 1326<!-- Modal Hilfe Barcodeliste --> 1327<div class="modal fade" id="modalHelpShowText" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 1328 <div class="modal-dialog modal-dialog-centered"> 1329 <div class="modal-content"> 1330 <div class="modal-header"> 1331 <h3 class="modal-title" id="exampleModalLabel" style="margin-top:0px">Visibility of Text under the barcode</h3> 1332 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1333 </div> 1334 <div class="modal-body"> 1335 Specifies whether the text should be displayed in plain text below the barcode 1336 </div> 1337 <div class="modal-footer"> 1338 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 1339 </div> 1340 </div> 1341 </div> 1342</div> 1343 1344<!-- Modal Hilfe Barcodeliste --> 1345<div class="modal fade" id="modalHelpFontSize" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 1346 <div class="modal-dialog modal-dialog-centered"> 1347 <div class="modal-content"> 1348 <div class="modal-header"> 1349 <h3 class="modal-title" id="exampleModalLabel" style="margin-top:0px">Font Size</h3> 1350 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1351 </div> 1352 <div class="modal-body"> 1353 <div class="float-end"> 1354 <img src="/images/popups/help/font_size.png" width="200px"/> 1355 </div> 1356 Specifies the font size under the barcode if the text display is switched on. 1357 </div> 1358 <div class="modal-footer"> 1359 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 1360 </div> 1361 </div> 1362 </div> 1363</div> 1364 1365<!-- Modal Hilfe Barcodeliste --> 1366<div class="modal fade" id="modalHelpFixedSize" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 1367 <div class="modal-dialog modal-dialog-centered"> 1368 <div class="modal-content"> 1369 <div class="modal-header"> 1370 <h3 class="modal-title" id="exampleModalLabel" style="margin-top:0px">fixed size</h3> 1371 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1372 </div> 1373 <div class="modal-body"> 1374 The dimensions of the barcode can be set in two ways. Either a fixed size is defined or the width of the barcode varies based on the amount of data for better readability. 1375 </div> 1376 <div class="modal-footer"> 1377 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 1378 </div> 1379 </div> 1380 </div> 1381</div> 1382 1383<!-- Modal Hilfe Barcodeliste --> 1384<div class="modal fade" id="modalHelpWidth" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"> 1385 <div class="modal-dialog modal-dialog-centered"> 1386 <div class="modal-content"> 1387 <div class="modal-header"> 1388 <h3 class="modal-title" id="exampleModalLabel" style="margin-top:0px">width of barcode</h3> 1389 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1390 </div> 1391 <div class="modal-body"> 1392 Specifies the width of the barcode in the specified unit. 1393 </div> 1394 <div class="modal-footer"> 1395 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 1396 </div> 1397 </div> 1398 </div> 1399</div> 1400 1401<!-- Modal Hilfe Barcodeliste --> 1402<div class="modal fade" id="modalHelpChecksum" tabindex="-1" aria-labelledby="modalHelpChecksumLabel" aria-hidden="true"> 1403 <div class="modal-dialog modal-dialog-centered"> 1404 <div class="modal-content"> 1405 <div class="modal-header"> 1406 <h3 class="modal-title" id="modalHelpChecksumLabel" style="margin-top:0px">checksum</h3> 1407 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1408 </div> 1409 <div class="modal-body"> 1410 The check digit or checksum is generated using an arithmetic rule for the respective barcode. 1411 This value is attached to the barcode. 1412 This check digit is checked when the barcode is read. 1413 This check can be used to reduce read errors. 1414 </div> 1415 <div class="modal-footer"> 1416 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 1417 </div> 1418 </div> 1419 </div> 1420</div> 1421 1422<!-- Modal Hilfe Barcodeliste --> 1423<div class="modal fade" id="modalHelpSilentZone" tabindex="-1" aria-labelledby="modalHelpSilentZoneLabel" aria-hidden="true"> 1424 <div class="modal-dialog modal-dialog-centered"> 1425 <div class="modal-content"> 1426 <div class="modal-header"> 1427 <h3 class="modal-title" id="modalHelpSilentZoneLabel" style="margin-top:0px">quiet zone</h3> 1428 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 1429 </div> 1430 <div class="modal-body"> 1431 The quiet zone describes the area around the barcode in which no text or lines may be printed so that the barcode can be read properly. 1432 </div> 1433 <div class="modal-footer"> 1434 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close popup</button> 1435 </div> 1436 </div> 1437 </div> 1438</div> 1439
1440<script> 1441 // Kultur-spezifische Konfiguration aus Server 1442 var cultureInfo = { 1443 name: "en-US", 1444 decimalSeparator: "." 1445 }; 1446 1447 function UnitChangedEvent(selectElement) { 1448 var unit = selectElement.value; 1449 var barWidthInput = document.getElementById("barWidthNumberBox"); 1450 var heightInput = document.getElementById("heightNumberBox"); 1451 var fontSizeInput = document.getElementById("fontSizeNumberBox"); 1452 1453 if (unit == 'mm') { 1454 if (barWidthInput) { 1455 barWidthInput.value = 0.60; 1456 barWidthInput.step = 0.01; 1457 } 1458 if (heightInput) { 1459 heightInput.value = 25; 1460 heightInput.step = 1; 1461 } 1462 if (fontSizeInput) { 1463 fontSizeInput.value = 6.00; 1464 fontSizeInput.step = 0.1; 1465 } 1466 } else if (unit == 'inch') { 1467 if (barWidthInput) { 1468 barWidthInput.value = 0.02; 1469 barWidthInput.step = 0.01; 1470 } 1471 if (heightInput) { 1472 heightInput.value = 1; 1473 heightInput.step = 0.1; 1474 } 1475 if (fontSizeInput) { 1476 fontSizeInput.value = 0.25; 1477 fontSizeInput.step = 0.01; 1478 } 1479 } else if (unit == 'pixel') { 1480 if (barWidthInput) { 1481 barWidthInput.value = 2; 1482 barWidthInput.step = 0.1; 1483 } 1484 if (heightInput) { 1485 heightInput.value = 100; 1486 heightInput.step = 1; 1487 } 1488 if (fontSizeInput) { 1489 fontSizeInput.value = 10; 1490 fontSizeInput.step = 0.1; 1491 } 1492 } 1493 } 1494 1495 function FixedSizeChangedEvent(checkboxElement) { 1496 var isChecked = checkboxElement.checked; 1497 var widthCaption = document.getElementById("widthCaption"); 1498 var widthValue = document.getElementById("widthValue"); 1499 var widthHelp = document.getElementById("widthHelp"); 1500 var barWidthCaption = document.getElementById("barWidthCaption"); 1501 var barWidthValue = document.getElementById("barWidthValue"); 1502 var barWidthHelp = document.getElementById("barWidthHelp"); 1503 1504 if (isChecked) { 1505 if (widthCaption) widthCaption.style.display = "block"; 1506 if (widthValue) widthValue.style.display = "block"; 1507 if (widthHelp) widthHelp.style.display = "block"; 1508 if (barWidthCaption) barWidthCaption.style.display = "none"; 1509 if (barWidthValue) barWidthValue.style.display = "none"; 1510 if (barWidthHelp) barWidthHelp.style.display = "none"; 1511 } else { 1512 if (widthCaption) widthCaption.style.display = "none"; 1513 if (widthValue) widthValue.style.display = "none"; 1514 if (widthHelp) widthHelp.style.display = "none"; 1515 if (barWidthCaption) barWidthCaption.style.display = "block"; 1516 if (barWidthValue) barWidthValue.style.display = "block"; 1517 if (barWidthHelp) barWidthHelp.style.display = "block"; 1518 } 1519 } 1520 1521 function FixedSizeOnInitialized(checkboxElement) { 1522 FixedSizeChangedEvent(checkboxElement); 1523 } 1524 1525 // Voraussichtliche Ausgabegroesse. Gerechnet wird auf dem Server mit demselben 1526 // Guard, der beim Rendern greift - eine zweite Formel im Browser wuerde sonst 1527 // frueher oder spaeter von der tatsaechlichen Pruefung abweichen. 1528 var renderSizeUrl = '/en-US/Generator/EstimateRenderSize'; 1529 var renderSizeTimer = null; 1530 1531 function ReadNumber(elementId, fallback) { 1532 var element = document.getElementById(elementId); 1533 if (!element || element.value === '') return fallback; 1534 var parsed = parseFloat(element.value); 1535 return isNaN(parsed) ? fallback : parsed; 1536 } 1537 1538 function ReadChecked(elementId) { 1539 var element = document.getElementById(elementId); 1540 return element ? element.checked : false; 1541 } 1542 1543 function CollectRenderSizeRequest() { 1544 var unitElement = document.getElementById("unitSelectBox"); 1545 var typeElement = document.querySelector('[name="BarcodeType"]'); 1546 var vendorElement = document.getElementById("BarcodeTypeVendorSelectBox"); 1547 var valueElement = document.getElementById("BarcodeValue"); 1548 1549 // Auf dieser Seite waehlt der Besucher aus 189 Vendor-Symbologien; ein Feld 1550 // BarcodeType gibt es hier nicht. Ohne die Vendor-Nummer schaetzt der Server 1551 // jede Anfrage als Code128, und ein QR-Code mit einer normalen U
1551RL wird als 1552 // mehrere tausend Pixel breit abgelehnt (Ticket 2295). 1553 var vendorValue = vendorElement ? parseInt(vendorElement.value, 10) : NaN; 1554 1555 return { 1556 sizeX: ReadNumber("widthNumberBox", 50), 1557 sizeY: ReadNumber("heightNumberBox", 25), 1558 dpi: ReadNumber("DPI", 300), 1559 barWidth: ReadNumber("barWidthNumberBox", 0.6), 1560 fixedSize: ReadChecked("fixedWidthCheckBox"), 1561 silentZones: ReadChecked("silentZoneCheckBox"), 1562 unit: unitElement ? unitElement.value : null, 1563 barcodeType: typeElement ? typeElement.value : null, 1564 barcodeTypeVendor: isNaN(vendorValue) ? null : vendorValue, 1565 barcodeValue: valueElement ? valueElement.value : null 1566 }; 1567 } 1568 1569 function ShowValueWarning(data) { 1570 var valueWarning = document.getElementById("renderValueWarning"); 1571 if (!valueWarning) return; 1572 1573 var message = (data && data.valueValid === false) ? data.valueMessage : null; 1574 valueWarning.textContent = message || ""; 1575 valueWarning.hidden = !message; 1576 } 1577 1578 function ShowRenderSize(data) { 1579 var info = document.getElementById("renderSizeInfo"); 1580 var value = document.getElementById("renderSizeValue"); 1581 var warning = document.getElementById("renderSizeWarning"); 1582 if (!info || !value || !warning) return; 1583 1584 if (!data || !data.available) { 1585 info.hidden = true; 1586 ShowValueWarning(null); 1587 return; 1588 } 1589 1590 info.hidden = false; 1591 ShowValueWarning(data); 1592 1593 var hasSize = data.widthPixels > 0 && data.heightPixels > 0; 1594 value.textContent = hasSize 1595 ? data.widthPixels + " x " + data.heightPixels + " px" 1596 : "-"; 1597 1598 if (data.withinLimits) { 1599 value.classList.remove("text-danger"); 1600 warning.hidden = true; 1601 warning.textContent = ""; 1602 } else { 1603 value.classList.add("text-danger"); 1604 warning.textContent = data.message || ""; 1605 warning.hidden = !data.message; 1606 } 1607 } 1608 1609 function UpdateRenderSize() { 1610 if (!renderSizeUrl) return; 1611 1612 fetch(renderSizeUrl, { 1613 method: 'POST', 1614 headers: { 1615 // Kein Antiforgery-Token, das wuerde die Seite fuer den CDN-Cache 1616 // unbrauchbar machen. X-Requested-With erzwingt bei fremder Herkunft 1617 // einen CORS-Preflight, den es hier nicht gibt. 1618 'Content-Type': 'application/json', 1619 'X-Requested-With': 'XMLHttpRequest' 1620 }, 1621 body: JSON.stringify(CollectRenderSizeRequest()) 1622 }) 1623 .then(function (response) { return response.ok ? response.json() : null; }) 1624 .then(ShowRenderSize) 1625 .catch(function () { 1626 // Die Anzeige ist eine Hilfe, kein Bestandteil der Erzeugung. Faellt sie aus, 1627 // greift weiterhin die Pruefung beim Absenden. 1628 }); 1629 } 1630 1631 function ScheduleRenderSizeUpdate() { 1632 clearTimeout(renderSizeTimer); 1633 renderSizeTimer = setTimeout(UpdateRenderSize, 350); 1634 } 1635 1636 // Initialisierung beim Laden der Seite 1637 document.addEventListener('DOMContentLoaded', function() { 1638 var fixedSizeCheckbox = document.getElementById("fixedWidthCheckBox"); 1639 if (fixedSizeCheckbox) { 1640 FixedSizeOnInitialized(fixedSizeCheckbox); 1641 } 1642 1643 var watchedIds = ["unitSelectBox", "fixedWidthCheckBox", "barWidthNumberBox", 1644 "widthNumberBox", "heightNumberBox", "DPI", "silentZoneCheckBox", 1645 "BarcodeValue"]; 1646 1647 watchedIds.forEach(function (id) { 1648 var element = document.getElementById(id); 1649 if (!element) return; 1650 element.addEventListener("input", ScheduleRenderSizeUpdate); 1651 element.addEventListener("change", ScheduleRenderSizeUpdate); 1652 }); 1653 1654 // Der Typ steht auf dieser Seite im Vendor-Auswahlfeld. Das frueher hier 1655 // gesuchte Feld BarcodeType gibt es auf der Landingpage nicht, ein Wechsel 1656 // des Barcodetyps hat deshalb die Groessenanzeige nie neu berechnet. 1657 var barcodeTypeElement = document.getElementById("BarcodeTypeVendorSelectBox") 1658 || document.querySelector('[name="BarcodeType"]'); 1659 if (barcodeTypeElement) { 1660 barcodeTypeElement.addEventListener("change", ScheduleRenderSizeUpdate); 1661 } 1662 1663 UpdateRenderSize(); 1664 }); 1665</script>
1665 1666 1667 </div> 1668 1669 <div class="col-xxl-4 col-12 mb-3"> 1670 1671 1672<div class="card shadow-sm h-100 d-flex flex-column"> 1673 <div class="card-header"> 1674 <h3 class="my-0 fw-normal">3. generate barcode</h3> 1675 </div> 1676 <div class="card-body d-flex flex-column flex-grow-1"> 1677 <div class="pb-3"> 1678 Generate your barcode and then select the output target (display, print directly, JPG, ZIP, PDF, Excel). 1679 </div> 1680 1681 <div class="d-flex justify-content-center"> 1682 <button type="submit" class="btn btn-success btn-lg px-4"> 1683 <i class="bi bi-qr-code me-2"></i>generate barcode 1684 </button> 1685 </div> 1686 </div> 1687</div> 1688 1689 </div> 1690 1691 <div class="col-12 mb-3"> 1692 1693<div class="card shadow-sm"> 1694 <div class="card-header"> 1695 <h3 class="my-0 fw-normal">How our barcode generator works</h3> 1696 </div> 1697 <div class="card-body"> 1698 <div class="float-end ms-4 mb-4 text-center"> 1699 <a href="https://www.youtube.com/watch?v=ENMy8XwOjBc" target="_blank" class="text-decoration-none"> 1700 <img src="/images/logo_youtube.png" style="height: 24px" alt="Watch video tutorial on YouTube"/><br/> 1701 <small>Video tutorial</small> 1702 </a> 1703 </div> 1704 1705 <p class="lead mb-4"> 1706 Create professional barcodes in just three steps with our free barcode generator. 1707 Over <strong>180 different barcode types</strong> are available. 1708 </p> 1709 1710 <div class="row"> 1711 <div class="col-md-4 mb-3"> 1712 <h5><span class="badge bg-secondary bg-opacity-25 text-dark rounded-pill me-2">1</span> Choose barcode type</h5> 1713 <p> 1714 Select the right barcode for your use case. Not sure? Choose Code128 â it works with almost any scanner. 1715 </p> 1716 <p class="small text-muted mb-0"> 1717 Then enter your barcode value (e.g. EAN number). Multiple values? Simply enter one per line. 1718 </p> 1719 </div> 1720 <div class="col-md-4 mb-3"> 1721 <h5><span class="badge bg-secondary bg-opacity-25 text-dark rounded-pill me-2">2</span> Adjust properties</h5> 1722 <p> 1723 Customize your barcode: height, width, resolution (DPI) and whether the value should be displayed as text. 1724 </p> 1725 <p class="small text-muted mb-0"> 1726 Tip: For printing we recommend 300 DPI and enabled quiet zone for better scanner readability. 1727 </p> 1728 </div> 1729 <div class="col-md-4 mb-3"> 1730 <h5><span class="badge bg-secondary bg-opacity-25 text-dark rounded-pill me-2">3</span> Generate & Download</h5> 1731 <p> 1732 Click "Generate barcode". In the popup you can view, print or download your barcodes. 1733 </p> 1734 <p class="small text-muted mb-0"> 1735 Formats: PNG, JPG, PDF, Excel or as ZIP archive. 1736 </p> 1737 </div> 1738 </div> 1739 1740 <div class="alert alert-success mt-3 mb-0" role="alert"> 1741 <i class="bi bi-check-circle-fill me-2"></i> 1742 <strong>100% free</strong> â also for commercial use. No registration required. 1743 </div> 1744 </div> 1745</div> 1746 1747 </div> 1748 1749 <div class="col-12 mb-3"> 1750 1751<div class="card shadow-sm mb-4"> 1752 <div class="card-header"> 1753 <h3 class="my-0 fw-normal">Who uses our barcode generator?</h3> 1754 </div> 1755 <div class="card-body"> 1756 <div class="row"> 1757 <div class="col-md-6 mb-3"> 1758 <h5><i class="bi bi-shop text-primary"></i> E-Commerce & Retail</h5> 1759 <p> 1760 Create <strong>EAN-13 codes</strong> for your products, product labels with barcode and item description, or <strong>Amazon FBA labels</strong> for shipping. 1761 </p> 1762 </div> 1763 <div class="col-md-6 mb-3"> 1764 <h5><i class="bi bi-truck text-primary"></i> Logistics & Warehouse</h5> 1765 <p> 1766 Optimize your processes with <strong>Code128</strong> for shipping labels, <strong>GS1-128</strong> with Application Identifiers, or generate serial numbers in batch. 1767 </p> 1768 </div> 1769 <div class="col-md-6 mb-3"> 1770 <h5><i class="bi bi-gear text-primary"></i> Industry & Manufacturing</h5> 1771 <p> 1772 Label components with <strong>DataMatrix</strong> for small surfaces or QR codes with serial numbers. High resolution for laser engraving available. 1773 </p> 1774 </div> 1775 <div class="col-md-6 mb-3"> 1776 <h5><i class="bi bi-megaphone text-primary"></i> Marketing & Events</h5> 1777 <p> 1778 <strong>QR codes</strong> for business cards, flyers and event tickets. Ideal for contests and marketing campaigns. 1779 </p> 1780 </div> 1781 </div> 1782 </div> 1783</div> 1784 1785<div class="card shadow-sm mb-4"> 1786 <div class="card-header"> 1787 <h3 class="my-0 fw-normal">Frequently Asked Questions</h3> 1788 </div> 1789 <div class="card-body"> 1790 <div class="accordion" id="faqAccordion"> 1791 1792 <div class="accordion-item"> 1793 <h4 class="accordion-header"> 1794 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq1"> 1795 Which barcode type should I use? 1796 </button> 1797 </h4> 1798 <div id="faq1" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> 1799 <div class="accordion-body"> 1800 <ul class="mb-0"> 1801 <li><strong>Supermarket products:</strong> EAN-13 (Europe) or UPC-A (USA)</li> 1802 <li><strong>Logistics and shipping:</strong> Code128 â universal and readable by any scanner</li> 1803 <li><strong>Smartphone scanning:</strong> QR-Code â can contain URLs, text and contact data</li> 1804 <li><strong>Small surfaces:</strong> DataMatrix â very compact and robust</li> 1805 </ul> 1806 <p class="mt-2 mb-0"><strong>Tip:</strong> Not sure? Choose <strong>Code128</strong> â it works with virtually any barcode scanner.</p> 1807 </div> 1808 </div> 1809 </div> 1810 1811 <div class="accordion-item"> 1812 <h4 class="accordion-header"> 1813 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2"> 1814 Are the generated barcodes free to use? 1815 </button> 1816 </h4> 1817 <div id="faq2" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> 1818 <div class="accordion-body"> 1819 <strong>Yes!</strong> All barcodes created with our barcode generator are free â including for <strong>commercial purposes</strong>. You may use the barcodes on products, labels, packaging and in documents. 1820 </div> 1821 </div> 1822 </div> 1823 1824 <div class="accordion-item"> 1825 <h4 class="accordion-header"> 1826 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3">
1827 What resolution do I need for printing? 1828 </button> 1829 </h4> 1830 <div id="faq3" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> 1831 <div class="accordion-body"> 1832 <table class="table table-sm mb-2"> 1833 <thead> 1834 <tr><th>Usage</th><th>Recommended DPI</th></tr> 1835 </thead> 1836 <tbody> 1837 <tr><td>Screen/Web</td><td>72-96 DPI</td></tr> 1838 <tr><td>Office printer</td><td>150-200 DPI</td></tr> 1839 <tr><td>Professional printing</td><td>300 DPI</td></tr> 1840 </tbody> 1841 </table> 1842 <p class="mb-0"><strong>Tip:</strong> For labels and product packaging we recommend at least 300 DPI.</p> 1843 </div> 1844 </div> 1845 </div> 1846 1847 <div class="accordion-item"> 1848 <h4 class="accordion-header"> 1849 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4"> 1850 Can I create multiple barcodes at once? 1851 </button> 1852 </h4> 1853 <div id="faq4" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> 1854 <div class="accordion-body"> 1855 <strong>Yes!</strong> Simply enter multiple values â one per line. Our generator creates all barcodes at once. Ideal for: 1856 <ul class="mb-0 mt-2"> 1857 <li>Copying item lists from Excel</li> 1858 <li>Generating serial numbers in batch</li> 1859 <li>Creating inventory lists</li> 1860 </ul> 1861 </div> 1862 </div> 1863 </div> 1864 1865 <div class="accordion-item"> 1866 <h4 class="accordion-header"> 1867 <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5"> 1868 My barcode won't scan â what to do? 1869 </button> 1870 </h4> 1871 <div id="faq5" class="accordion-collapse collapse" data-bs-parent="#faqAccordion"> 1872 <div class="accordion-body"> 1873 Check the following points: 1874 <ol class="mb-0 mt-2"> 1875 <li><strong>Size:</strong> The barcode must be large enough (min. 20mm height for EAN-13)</li> 1876 <li><strong>Contrast:</strong> Black on white works best</li> 1877 <li><strong>Quiet zone:</strong> Enable the "Quiet zone" option for white border</li> 1878 <li><strong>Print quality:</strong> Use at least 200 DPI</li> 1879 <li><strong>Damage:</strong> No scratches, folds or dirt</li> 1880 </ol> 1881 </div> 1882 </div> 1883 </div> 1884 1885 </div> 1886 </div> 1887</div> 1888 1889<div class="card shadow-sm"> 1890 <div class="card-header"> 1891 <h3 class="my-0 fw-normal">Why use our barcode generator?</h3> 1892 </div> 1893 <div class="card-body"> 1894 <div class="row row-cols-2 row-cols-md-4 g-3 text-center"> 1895 <div class="col"> 1896 <div class="p-2"> 1897 <i class="bi bi-gift fs-2 text-success"></i> 1898 <div class="fw-bold">free</div> 1899 <small class="text-muted">No hidden costs</small> 1900 </div> 1901 </div> 1902 <div class="col"> 1903 <div class="p-2"> 1904 <i class="bi bi-collection fs-2 text-success"></i> 1905 <div class="fw-bold">180+ Types</div> 1906 <small class="text-muted">Largest selection</small> 1907 </div> 1908 </div> 1909 <div class="col"> 1910 <div class="p-2"> 1911 <i class="bi bi-lightning fs-2 text-success"></i> 1912 <div class="fw-bold">Ready to use</div> 1913 <small class="text-muted">No installation</small> 1914 </div> 1915 </div> 1916 <div class="col"> 1917 <div class="p-2"> 1918 <i class="bi bi-printer fs-2 text-success"></i> 1919 <div class="fw-bold">Print quality</div> 1920 <small class="text-muted">Up to 300 DPI</small> 1921 </div> 1922 </div> 1923 <div class="col"> 1924 <div class="p-2"> 1925 <i class="bi bi-layers fs-2 text-success"></i> 1926 <div class="fw-bold">Batch creation</div> 1927 <small class="text-muted">Many at once</small> 1928 </div> 1929 </div> 1930 <div class="col"> 1931 <div class="p-2"> 1932 <i class="bi bi-file-earmark-zip fs-2 text-success"></i> 1933 <div class="fw-bold">Multiple formats</div> 1934 <small class="text-muted">PNG, PDF, Excel, ZIP</small> 1935 </div> 1936 </div> 1937 <div class="col"> 1938 <div class="p-2"> 1939 <i class="bi bi-briefcase fs-2 text-success"></i> 1940 <div class="fw-bold">Commercial</div> 1941 <small class="text-muted">Use allowed</small> 1942 </div> 1943 </div> 1944 <div class="col"> 1945 <div class="p-2"> 1946 <i class="bi bi-shield-check fs-2 text-success"></i> 1947 <div class="fw-bold">Privacy</div> 1948 <small class="text-muted">No data storage</small> 1949 </div> 1950 </div> 1951 </div> 1952 </div> 1953</div> 1954 1955 </div> 1956 1957 </div> 1958 </div> 1959 1960 <div class="col-lg-3 col-12"> 1961 <div class="mb-3"> 1962 1963<div class="card shadow-sm h-100"> 1964 <div class="card-header"> 1965 <h3 class="my-0 fw-normal">Information</h3> 1966 </div> 1967 <div class="card-body text-center center p-0 m-0 pt-2 pb-2" style="max-height:1024px"> 1968 1969 <!-- Ezoic - slot1_mid_content - mid_content --> 1970<div id="ezoic-pub-ad-placeholder-189"> </div> 1971<!-- End Ezoic - slot1_mid_content - mid_content --> 1972 1973 </div> 1974 1975</div> 1976 1977 1978 1979 </div> 1980 </div> 1981 </div>
1982<input name="FixedSize" type="hidden" value="false"/><input name="CalculateCheckDigit" type="hidden" value="false"/><input name="SilentZones" type="hidden" value="false"/><input name="ShowText" type="hidden" value="false"/></form> 1983<!-- Reusable popup (Excel/CSV import) --> 1984 1985<!-- Reusable Barcode Import Popup (Excel/CSV) --> 1986<div class="barcode-import-root" data-default-target="#BarcodeValue"> 1987 <!-- Hidden container for translations (SEO friendly, Scanner friendly) --> 1988 <!-- The <tl> tags are processed by the server, rendering only the localized text --> 1989 <div id="barcodeImportTranslations" class="d-none"> 1990 <span data-key="uploading">File is uploading...</span> 1991 <span data-key="processing">File is processing...</span> 1992 <span data-key="upload_failed">Upload failed.</span> 1993 <span data-key="preview_failed">Preview failed.</span> 1994 <span data-key="extract_failed">Extraction failed.</span> 1995 <span data-key="select_column">Please select a column...</span> 1996 <span data-key="file_loaded">File loaded.</span> 1997 <span data-key="error">Error.</span> 1998 <span data-key="preview_updating">Updating preview...</span> 1999 <span data-key="preview_updated">Preview updated.</span> 2000 <span data-key="reading_barcodes">Reading barcodes...</span> 2001 <span data-key="no_barcodes">No barcodes found.</span> 2002 <span data-key="target_not_found">Target input field not found.</span> 2003 <span data-key="applied">Applied.</span> 2004 </div> 2005 2006 <div class="modal fade" id="barcodeImportModal" tabindex="-1" aria-labelledby="barcodeImportModalLabel" aria-hidden="true"> 2007 <div class="modal-dialog modal-lg modal-dialog-centered"> 2008 <div class="modal-content"> 2009 <div class="modal-header"> 2010 <h5 class="modal-title" id="barcodeImportModalLabel"> 2011 <i class="bi bi-upload me-2"></i>Import barcodes from Excel/CSV 2012 </h5> 2013 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> 2014 </div> 2015 2016 <div class="modal-body"> 2017 <div class="alert alert-warning d-flex align-items-center justify-content-between mb-3" role="alert"> 2018 <div class="d-flex align-items-center"> 2019 <i class="bi bi-exclamation-triangle-fill me-2"></i> 2020 <div> 2021 This import function is new and currently in BETA stage. 2022 </div> 2023 </div> 2024 <a href="#" id="excelImportFeedbackLink" class="btn btn-sm btn-outline-primary ms-2 flex-shrink-0"> 2025 <i class="bi bi-chat-heart me-1"></i>Feedback 2026 </a> 2027 </div> 2028 <style> 2029 .barcode-import-dropzone { 2030 border: 2px dashed #adb5bd; 2031 border-radius: 12px; 2032 padding: 20px; 2033 text-align: center; 2034 background: #f8f9fa; 2035 transition: all .15s ease-in-out; 2036 cursor: pointer; 2037 } 2038 .barcode-import-dropzone.dragover { 2039 border-color: #0d6efd; 2040 background: #e7f1ff; 2041 } 2042 .barcode-import-muted { 2043 color: #6c757d; 2044 font-size: .9rem; 2045 } 2046 .barcode-import-spinner { 2047 display: none; 2048 align-items: center; 2049 gap: .5rem; 2050 } 2051 .barcode-import-spinner.show { 2052 display: inline-flex; 2053 } 2054 </style> 2055 2056 <div class="mb-3"> 2057 <div id="barcodeImportDropzone" class="barcode-import-dropzone"> 2058 <div class="mb-2"> 2059 <i class="bi bi-file-earmark-spreadsheet" style="font-size: 2rem;"></i> 2060 </div> 2061 <div class="fw-bold">Drop file here</div> 2062 <div class="barcode-import-muted"> 2063 or click to choose â <code>.xlsx</code>, <code>.csv</code> 2064 </div> 2065 <input id="barcodeImportFileInput" type="file" class="d-none" accept=".xlsx,.csv,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,text/csv"/> 2066 </div> 2067 </div> 2068 2069 <div id="barcodeImportStatus" class="alert alert-info d-none" role="alert"></div> 2070 2071 <div class="d-flex align-items-center mb-3"> 2072 <div id="barcodeImportBusy" class="barcode-import-spinner">
2073 <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 2074 <span id="barcodeImportBusyText"></span> 2075 </div> 2076 </div> 2077 2078 <div class="row g-3"> 2079 <div class="col-md-6"> 2080 <label for="barcodeImportSheetSelect" class="form-label">Worksheet</label> 2081 <select id="barcodeImportSheetSelect" class="form-select" disabled=""></select> 2082 </div> 2083 <div class="col-md-6"> 2084 <label for="barcodeImportColumnSelect" class="form-label">Barcode column</label> 2085 <select id="barcodeImportColumnSelect" class="form-select" disabled=""></select> 2086 </div> 2087 </div> 2088 2089 <div class="row g-3 mt-1"> 2090 <div class="col-md-6"> 2091 <div class="form-check mt-2"> 2092 <input class="form-check-input" type="checkbox" id="barcodeImportHasHeader" checked=""/> 2093 <label class="form-check-label" for="barcodeImportHasHeader"> 2094 First row is header (skip) 2095 </label> 2096 </div> 2097 </div> 2098 <div class="col-md-6"> 2099 <div class="form-check mt-2"> 2100 <input class="form-check-input" type="checkbox" id="barcodeImportDedup" checked=""/> 2101 <label class="form-check-label" for="barcodeImportDedup"> 2102 Remove duplicates 2103 </label> 2104 </div> 2105 </div> 2106 </div> 2107 2108 <div class="row g-3 mt-1"> 2109 <div class="col-md-12"> 2110 <div class="form-check mt-2"> 2111 <input class="form-check-input" type="checkbox" id="barcodeImportAppendCheckbox"/> 2112 <label class="form-check-label" for="barcodeImportAppendCheckbox"> 2113 Append to existing list 2114 </label> 2115 </div> 2116 </div> 2117 </div> 2118 2119 <div class="mt-3 barcode-import-muted"> 2120 Note: Excel is processed server-side; only the selected column values are imported. 2121 </div> 2122 </div> 2123 2124 <div class="modal-footer"> 2125 <button type="button" class="btn btn-outline-secondary" id="barcodeImportResetBtn"> 2126 <i class="bi bi-arrow-counterclockwise me-1"></i>Reset 2127 </button> 2128 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"> 2129 Cancel 2130 </button> 2131 <button type="button" class="btn btn-primary" id="barcodeImportApplyBtn" disabled=""> 2132 <i class="bi bi-check2-circle me-1"></i>Apply 2133 </button> 2134 </div> 2135 </div> 2136 </div> 2137 </div> 2138</div> 2139
2140<script> 2141 (function() { 2142 // Collect server-translated texts from the hidden container 2143 var texts = {}; 2144 var container = document.getElementById('barcodeImportTranslations'); 2145 if (container) { 2146 var nodes = container.querySelectorAll('span[data-key]'); 2147 for (var i = 0; i < nodes.length; i++) { 2148 texts[nodes[i].getAttribute('data-key')] = nodes[i].textContent; 2149 } 2150 } 2151 // Expose to the external script 2152 window.BarcodeImportConfig = { texts: texts }; 2153 })(); 2154</script>
2154 2155
2156<script src="/js/barcode-import-popup.js"></script>
2156 2157 2158<!-- Hidden container for Excel Import feedback translations --> 2159<div id="excelImportFeedbackTranslations" class="d-none"> 2160 <span data-key="title">Excel Import Feedback</span> 2161 <span data-key="question">Did the Excel import work for you?</span> 2162 <span data-key="yesno_question">Was the import successful?</span> 2163</div> 2164
2165<script> 2166 (function() { 2167 var feedbackLink = document.getElementById('excelImportFeedbackLink'); 2168 if (feedbackLink) { 2169 feedbackLink.addEventListener('click', function(e) { 2170 e.preventDefault(); 2171 2172 // Collect translations 2173 var trans = {}; 2174 var container = document.getElementById('excelImportFeedbackTranslations'); 2175 if (container) { 2176 var nodes = container.querySelectorAll('span[data-key]'); 2177 for (var i = 0; i < nodes.length; i++) { 2178 trans[nodes[i].getAttribute('data-key')] = nodes[i].textContent; 2179 } 2180 } 2181 2182 // Close the import modal first 2183 var importModal = bootstrap.Modal.getInstance(document.getElementById('barcodeImportModal')); 2184 if (importModal) { 2185 importModal.hide(); 2186 } 2187 2188 // Open feedback popup with Excel-specific options 2189 setTimeout(function() { 2190 if (typeof BarcodeGeneratorFeedback !== 'undefined') { 2191 BarcodeGeneratorFeedback.show({ 2192 surveyType: 'excel_import', 2193 title: trans.title || 'Excel Import Feedback', 2194 question: trans.question || 'Did the Excel import work for you?', 2195 showRating: true, 2196 showYesNo: true, 2197 yesNoQuestion: trans.yesno_question || 'Was the import successful?', 2198 showComments: true, 2199 context: 'Excel/CSV Import Popup' 2200 }); 2201 } 2202 }, 300); 2203 }); 2204 } 2205 })(); 2206</script>
2206 2207 2208 2209 2210<!-- Hidden Translations Container --> 2211<div id="feedbackTranslations" class="d-none"> 2212 <span data-key="title_default">Your Feedback</span> 2213 <span data-key="question_default">How satisfied are you?</span> 2214 <span data-key="yes_no_question">Did everything work?</span> 2215 <span data-key="yes">Yes</span> 2216 <span data-key="no">No</span> 2217 <span data-key="comment_label">Your comment (optional)</span> 2218 <span data-key="comment_placeholder">Tell us what you think...</span> 2219 <span data-key="email_label">Your email (if we may contact you)</span> 2220 <span data-key="submit">Submit</span> 2221 <span data-key="close">Close</span> 2222 <span data-key="thank_you">Thank you for your feedback!</span> 2223 <span data-key="error">An error occurred. Please try again.</span> 2224 <span data-key="rating_required">Please select a rating.</span> 2225 <span data-key="privacy_required">Please accept the privacy policy to submit your email.</span> 2226 <span data-key="accept_privacy">I accept the privacy policy</span> 2227</div> 2228 2229<!-- Feedback Modal --> 2230<div class="modal fade" id="feedbackModal" tabindex="-1" aria-labelledby="feedbackModalLabel" aria-hidden="true"> 2231 <div class="modal-dialog modal-dialog-centered"> 2232 <div class="modal-content"> 2233 <div class="modal-header bg-primary text-white"> 2234 <h5 class="modal-title" id="feedbackModalLabel"> 2235 <i class="bi bi-chat-heart me-2"></i><span id="feedbackTitle"></span> 2236 </h5> 2237 <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button> 2238 </div> 2239 2240 <div class="modal-body"> 2241 <!-- Success Message (hidden by default) --> 2242 <div id="feedbackSuccess" class="text-center py-4" style="display: none;"> 2243 <div class="mb-3"> 2244 <i class="bi bi-check-circle-fill text-success" style="font-size: 4rem;"></i> 2245 </div> 2246 <h5 id="feedbackSuccessText" class="text-success"></h5> 2247 </div> 2248 2249 <!-- Feedback Form --> 2250 <div id="feedbackFormWrapper"> 2251 <p id="feedbackQuestion" class="mb-3 fw-medium"></p> 2252 2253 <!-- 5-Star Rating --> 2254 <div id="feedbackRatingSection" class="mb-4"> 2255 <div class="star-rating d-flex justify-content-center gap-2"> 2256 <button type="button" class="btn btn-outline-warning star-btn" data-rating="1" title="1 Stern"> 2257 <i class="bi bi-star-fill"></i> 2258 </button> 2259 <button type="button" class="btn btn-outline-warning star-btn" data-rating="2" title="2 Sterne"> 2260 <i class="bi bi-star-fill"></i> 2261 </button> 2262 <button type="button" class="btn btn-outline-warning star-btn" data-rating="3" title="3 Sterne"> 2263 <i class="bi bi-star-fill"></i> 2264 </button> 2265 <button type="button" class="btn btn-outline-warning star-btn" data-rating="4" title="4 Sterne"> 2266 <i class="bi bi-star-fill"></i> 2267 </button> 2268 <button type="button" class="btn btn-outline-warning star-btn" data-rating="5" title="5 Sterne"> 2269 <i class="bi bi-star-fill"></i> 2270 </button> 2271 </div> 2272 <div class="text-center mt-2 text-muted small" id="ratingHint"></div> 2273 </div> 2274 2275 <!-- Yes/No Question --> 2276 <div id="feedbackYesNoSection" class="mb-4" style="display: none;"> 2277 <label class="form-label" id="feedbackYesNoLabel"></label> 2278 <div class="d-flex justify-content-center gap-3"> 2279 <button type="button" class="btn btn-outline-success yesno-btn" data-value="true"> 2280 <i class="bi bi-hand-thumbs-up me-1"></i><span class="yesno-yes"></span> 2281 </button> 2282 <button type="button" class="btn btn-outline-danger yesno-btn" data-value="false"> 2283 <i class="bi bi-hand-thumbs-down me-1"></i><span class="yesno-no"></span> 2284 </button> 2285 </div> 2286 </div> 2287 2288 <!-- Comments --> 2289 <div id="feedbackCommentsSection" class="mb-3"> 2290 <label for="feedbackComments" class="form-label" id="feedbackCommentLabel"></label> 2291 <textarea id="feedbackComments" class="form-control" rows="3" maxlength="2000"></textarea> 2292 </div> 2293 2294 <!-- Email (optional) --> 2295 <div id="feedbackEmailSection" class="mb-3"> 2296 <label for="feedbackEmail" class="form-label" id="feedbackEmailLabel"></label> 2297 <input type="email" id="feedbackEmail" class="form-control" maxlength="256"/> 2298 2299 <div class="form-check mt-2" id="feedbackPrivacyWrapper" style="display: none;"> 2300 <input class="form-check-input" type="checkbox" id="feedbackPrivacy"/> 2301 <label class="form-check-label small" for="feedbackPrivacy" id="feedbackPrivacyLabel"></label> 2302 </div> 2303 </div> 2304 2305 <!-- Error Message --> 2306 <div id="feedbackError" class="alert alert-danger" style="display: none;"></div> 2307 </div> 2308 </div> 2309 2310 <div class="modal-footer" id="feedbackFooter"> 2311 <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" id="feedbackCloseBtn"></button> 2312 <button type="button" class="btn btn-primary" id="feedbackSubmitBtn">
2313 <span class="spinner-border spinner-border-sm me-1" role="status" aria-hidden="true" style="display: none;"></span> 2314 <span id="feedbackSubmitText"></span> 2315 </button> 2316 </div> 2317 </div> 2318 </div> 2319</div> 2320 2321<style> 2322 .star-rating .star-btn { 2323 font-size: 1.5rem; 2324 padding: 0.5rem 0.75rem; 2325 transition: all 0.2s ease; 2326 } 2327 2328 .star-rating .star-btn:hover, 2329 .star-rating .star-btn.active { 2330 background-color: #ffc107; 2331 border-color: #ffc107; 2332 color: white; 2333 transform: scale(1.1); 2334 } 2335 2336 .star-rating .star-btn.hovered { 2337 background-color: #ffda6a; 2338 border-color: #ffda6a; 2339 color: white; 2340 } 2341 2342 .yesno-btn { 2343 min-width: 100px; 2344 transition: all 0.2s ease; 2345 } 2346 2347 .yesno-btn.active { 2348 transform: scale(1.05); 2349 } 2350 2351 .yesno-btn.active[data-value="true"] { 2352 background-color: #198754; 2353 border-color: #198754; 2354 color: white; 2355 } 2356 2357 .yesno-btn.active[data-value="false"] { 2358 background-color: #dc3545; 2359 border-color: #dc3545; 2360 color: white; 2361 } 2362 2363 #feedbackModal .modal-header { 2364 border-radius: 0.375rem 0.375rem 0 0; 2365 } 2366 2367 #feedbackSuccess { 2368 min-height: 200px; 2369 display: flex; 2370 flex-direction: column; 2371 justify-content: center; 2372 align-items: center; 2373 } 2374</style> 2375
2376<script> 2377(function() { 2378 // Collect translations 2379 var translations = {}; 2380 var container = document.getElementById('feedbackTranslations'); 2381 if (container) { 2382 var nodes = container.querySelectorAll('span[data-key]'); 2383 for (var i = 0; i < nodes.length; i++) { 2384 translations[nodes[i].getAttribute('data-key')] = nodes[i].textContent; 2385 } 2386 } 2387 2388 var ratingHints = { 2389 1: 'ð Sehr unzufrieden', 2390 2: 'ð Unzufrieden', 2391 3: 'ð Neutral', 2392 4: 'ð Zufrieden', 2393 5: '𤩠Sehr zufrieden' 2394 }; 2395 2396 // State 2397 var currentOptions = {}; 2398 var selectedRating = null; 2399 var selectedYesNo = null; 2400 var modal = null; 2401 2402 // DOM Elements 2403 var modalEl, titleEl, questionEl, ratingSection, yesNoSection, commentsSection, emailSection; 2404 var starBtns, yesNoBtns, commentsInput, emailInput, privacyWrapper, privacyCheckbox; 2405 var submitBtn, submitText, submitSpinner, closeBtn, errorEl, successEl, successTextEl; 2406 var formWrapper, footerEl, ratingHintEl; 2407 2408 function init() { 2409 modalEl = document.getElementById('feedbackModal'); 2410 if (!modalEl) return; 2411 2412 titleEl = document.getElementById('feedbackTitle'); 2413 questionEl = document.getElementById('feedbackQuestion'); 2414 ratingSection = document.getElementById('feedbackRatingSection'); 2415 yesNoSection = document.getElementById('feedbackYesNoSection'); 2416 commentsSection = document.getElementById('feedbackCommentsSection'); 2417 emailSection = document.getElementById('feedbackEmailSection'); 2418 2419 starBtns = modalEl.querySelectorAll('.star-btn'); 2420 yesNoBtns = modalEl.querySelectorAll('.yesno-btn'); 2421 commentsInput = document.getElementById('feedbackComments'); 2422 emailInput = document.getElementById('feedbackEmail'); 2423 privacyWrapper = document.getElementById('feedbackPrivacyWrapper'); 2424 privacyCheckbox = document.getElementById('feedbackPrivacy'); 2425 2426 submitBtn = document.getElementById('feedbackSubmitBtn'); 2427 submitText = document.getElementById('feedbackSubmitText'); 2428 submitSpinner = submitBtn.querySelector('.spinner-border'); 2429 closeBtn = document.getElementById('feedbackCloseBtn'); 2430 errorEl = document.getElementById('feedbackError'); 2431 successEl = document.getElementById('feedbackSuccess'); 2432 successTextEl = document.getElementById('feedbackSuccessText'); 2433 formWrapper = document.getElementById('feedbackFormWrapper'); 2434 footerEl = document.getElementById('feedbackFooter'); 2435 ratingHintEl = document.getElementById('ratingHint'); 2436 2437 // Set static translations 2438 closeBtn.textContent = translations.close || 'Close'; 2439 submitText.textContent = translations.submit || 'Submit'; 2440 document.getElementById('feedbackCommentLabel').textContent = translations.comment_label || 'Your comment (optional)'; 2441 commentsInput.placeholder = translations.comment_placeholder || 'Tell us what you think...'; 2442 document.getElementById('feedbackEmailLabel').textContent = translations.email_label || 'Your email'; 2443 document.getElementById('feedbackPrivacyLabel').textContent = translations.accept_privacy || 'I accept the privacy policy'; 2444 modalEl.querySelectorAll('.yesno-yes').forEach(function(el) { el.textContent = translations.yes || 'Yes'; }); 2445 modalEl.querySelectorAll('.yesno-no').forEach(function(el) { el.textContent = translations.no || 'No'; }); 2446 2447 // Star Rating Events 2448 starBtns.forEach(function(btn) { 2449 btn.addEventListener('click', function() { 2450 selectedRating = parseInt(this.getAttribute('data-rating')); 2451 updateStars(); 2452 }); 2453 2454 btn.addEventListener('mouseenter', function() { 2455 var hoverRating = parseInt(this.getAttribute('data-rating')); 2456 starBtns.forEach(function(b, index) { 2457 if (index < hoverRating) { 2458 b.classList.add('hovered'); 2459 } else { 2460 b.classList.remove('hovered'); 2461 } 2462 }); 2463 ratingHintEl.textContent = ratingHints[hoverRating] || ''; 2464 }); 2465 2466 btn.addEventListener('mouseleave', function() { 2467 starBtns.forEach(function(b) { b.classList.remove('hovered'); }); 2468 ratingHintEl.textContent = selectedRating ? ratingHints[selectedRating] : ''; 2469 }); 2470 }); 2471 2472 // Yes/No Events
2473 yesNoBtns.forEach(function(btn) { 2474 btn.addEventListener('click', function() { 2475 selectedYesNo = this.getAttribute('data-value') === 'true'; 2476 updateYesNo(); 2477 }); 2478 }); 2479 2480 // Email Privacy Toggle 2481 emailInput.addEventListener('input', function() { 2482 var hasEmail = emailInput.value.trim().length > 0; 2483 privacyWrapper.style.display = hasEmail ? 'block' : 'none'; 2484 if (!hasEmail) { 2485 privacyCheckbox.checked = false; 2486 } 2487 }); 2488 2489 // Submit 2490 submitBtn.addEventListener('click', handleSubmit); 2491 2492 // Modal Events 2493 modalEl.addEventListener('hidden.bs.modal', resetForm); 2494 2495 modal = new bootstrap.Modal(modalEl); 2496 } 2497 2498 function updateStars() { 2499 starBtns.forEach(function(btn, index) { 2500 if (index < selectedRating) { 2501 btn.classList.add('active'); 2502 } else { 2503 btn.classList.remove('active'); 2504 } 2505 }); 2506 ratingHintEl.textContent = selectedRating ? ratingHints[selectedRating] : ''; 2507 } 2508 2509 function updateYesNo() { 2510 yesNoBtns.forEach(function(btn) { 2511 var btnValue = btn.getAttribute('data-value') === 'true'; 2512 if (btnValue === selectedYesNo) { 2513 btn.classList.add('active'); 2514 } else { 2515 btn.classList.remove('active'); 2516 } 2517 }); 2518 } 2519 2520 function handleSubmit() { 2521 // Validate 2522 var showRating = currentOptions.showRating !== false; 2523 var showYesNo = currentOptions.showYesNo === true; 2524 2525 if (showRating && !selectedRating && !showYesNo) { 2526 showError(translations.rating_required || 'Please select a rating.'); 2527 return; 2528 } 2529 2530 var email = emailInput.value.trim(); 2531 if (email && !privacyCheckbox.checked) { 2532 showError(translations.privacy_required || 'Please accept the privacy policy.'); 2533 return; 2534 } 2535 2536 // Prepare data 2537 var formData = new FormData(); 2538 formData.append('SurveyType', currentOptions.surveyType); 2539 2540 if (selectedRating) { 2541 formData.append('Rating', selectedRating); 2542 } 2543 2544 if (selectedYesNo !== null) { 2545 formData.append('IsPositive', selectedYesNo); 2546 } 2547 2548 var comments = commentsInput.value.trim(); 2549 if (comments) { 2550 formData.append('Comments', comments); 2551 } 2552 2553 if (currentOptions.context) { 2554 formData.append('Context', currentOptions.context); 2555 } 2556 2557 if (email) { 2558 formData.append('UserEmail', email); 2559 // Serverseitige Prüfung (Consent darf nicht nur clientseitig passieren) 2560 formData.append('AcceptPrivacy', privacyCheckbox.checked ? 'true' : 'false'); 2561 } 2562 2563 // Show loading 2564 setLoading(true); 2565 hideError(); 2566 2567 fetch('/en-US/Survey/SubmitFeedback', { 2568 method: 'POST', 2569 body: formData, 2570 headers: { 'X-Requested-With': 'XMLHttpRequest' } 2571 }) 2572 .then(function(response) { 2573 if (!response.ok) { 2574 return response.text().then(function(text) { throw new Error(text || response.statusText); }); 2575 } 2576 return response.json(); 2577 }) 2578 .then(function(data) { 2579 setLoading(false); 2580 if (data.success) { 2581 showSuccess(); 2582 if (typeof currentOptions.onSuccess === 'function') { 2583 currentOptions.onSuccess(data); 2584 } 2585 } else { 2586 showError(data.message || translations.error); 2587 } 2588 }) 2589 .catch(function(error) { 2590 setLoading(false); 2591 console.error('Feedback Error:', error); 2592 showError(translations.error || 'An error occurred.'); 2593 }); 2594 } 2595 2596 function setLoading(loading) { 2597 submitBtn.disabled = loading; 2598 submitSpinner.style.display = loading ? 'inline-block' : 'none'; 2599 } 2600 2601 function showError(message) { 2602 errorEl.textContent = message; 2603 errorEl.style.display = 'block'; 2604 } 2605 2606 function hideError() { 2607 errorEl.style.display = 'none'; 2608 } 2609 2610 function showSuccess() { 2611 formWrapper.style.display = 'none'; 2612 successTextEl.textContent = translations.thank_you || 'Thank you for your feedback!'; 2613 successEl.style.display = 'flex'; 2614 submitBtn.style.display = 'none'; 2615 closeBtn.classList.remove('btn-secondary'); 2616 closeBtn.classList.add('btn-primary'); 2617 } 2618 2619 function resetForm() { 2620 selectedRating = null; 2621 selectedYesNo = null; 2622 currentOptions = {}; 2623
2624 starBtns.forEach(function(btn) { btn.classList.remove('active', 'hovered'); }); 2625 yesNoBtns.forEach(function(btn) { btn.classList.remove('active'); }); 2626 2627 commentsInput.value = ''; 2628 emailInput.value = ''; 2629 privacyCheckbox.checked = false; 2630 privacyWrapper.style.display = 'none'; 2631 2632 formWrapper.style.display = 'block'; 2633 successEl.style.display = 'none'; 2634 submitBtn.style.display = 'inline-block'; 2635 closeBtn.classList.add('btn-secondary'); 2636 closeBtn.classList.remove('btn-primary'); 2637 2638 hideError(); 2639 setLoading(false); 2640 ratingHintEl.textContent = ''; 2641 } 2642 2643 function show(options) { 2644 if (!modal) init(); 2645 2646 currentOptions = options || {}; 2647 2648 // Set title and question 2649 titleEl.textContent = currentOptions.title || translations.title_default || 'Your Feedback'; 2650 questionEl.textContent = currentOptions.question || translations.question_default || 'How satisfied are you?'; 2651 2652 // Show/hide sections 2653 var showRating = currentOptions.showRating !== false; 2654 var showYesNo = currentOptions.showYesNo === true; 2655 var showComments = currentOptions.showComments !== false; 2656 2657 ratingSection.style.display = showRating ? 'block' : 'none'; 2658 yesNoSection.style.display = showYesNo ? 'block' : 'none'; 2659 commentsSection.style.display = showComments ? 'block' : 'none'; 2660 2661 if (showYesNo) { 2662 var yesNoLabel = document.getElementById('feedbackYesNoLabel'); 2663 yesNoLabel.textContent = currentOptions.yesNoQuestion || translations.yes_no_question || 'Did everything work?'; 2664 } 2665 2666 modal.show(); 2667 } 2668 2669 function hide() { 2670 if (modal) modal.hide(); 2671 } 2672 2673 // Init on DOMContentLoaded 2674 if (document.readyState === 'loading') { 2675 document.addEventListener('DOMContentLoaded', init); 2676 } else { 2677 init(); 2678 } 2679 2680 // Expose API 2681 window.BarcodeGeneratorFeedback = { 2682 show: show, 2683 hide: hide 2684 }; 2685})(); 2686</script>
2686 2687 2688 2689 2690
2691<script> 2692 2693 function showBootstrapAlert(message, type) { 2694 // Erstelle Bootstrap Alert Element 2695 const alertDiv = document.createElement('div'); 2696 alertDiv.className = `alert alert-${type} alert-dismissible fade show position-fixed`; 2697 alertDiv.style.cssText = 'top: 20px; right: 20px; z-index: 9999; max-width: 400px;'; 2698 alertDiv.innerHTML = ` 2699 ${message} 2700 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button> 2701 `; 2702 2703 document.body.appendChild(alertDiv); 2704 2705 // Auto-remove nach 7 Sekunden 2706 setTimeout(() => { 2707 if (alertDiv.parentNode) { 2708 alertDiv.remove(); 2709 } 2710 }, 7000); 2711 } 2712</script>
2712 2713 2714 <br/><br/> 2715 2716 <footer class="border-top navbar-fixed-bottom text-center" style="padding-top:15px"> 2717 <!-- Grid container --> 2718 <div class="container p-3"> 2719 <div class="row"> 2720 <!--Grid column--> 2721 2722 <!--Grid column--> 2723 <div class="col-lg-4 col-md-6 mb-3"> 2724 <h5 class="footerheader">Barcodes</h5> 2725 2726 <ul class="list-unstyled mb-0"> 2727 <li> 2728 <a class="footerlink" id="link_barcode_chooser" href="/en-US/create-ean13/EAN13">EAN13</a> 2729 </li> 2730 <li> 2731 <a class="footerlink" id="link_barcode_chooser" href="/en-US/create-code128/Code128">Code128</a> 2732 </li> 2733 <li> 2734 <a class="footerlink" id="link_barcode_chooser" href="/en-US/create-datamatrix/Datamatrix">Datamatrix</a> 2735 </li> 2736 <li> 2737 <a class="footerlink" id="link_barcode_chooser" href="/en-US/create-qrcode/QR">QR</a> 2738 </li> 2739 <li> 2740 <a class="footerlink" id="link_barcode_chooser" href="/en-US/create-isbn/ISBN">ISBN</a> 2741 </li> 2742 </ul> 2743 </div> 2744 2745 <!--Grid column--> 2746 <div class="col-lg-4 col-md-6 mb-3"> 2747 <h5 class="footerheader">features</h5> 2748 <ul class="list-unstyled text-small"> 2749 <li> 2750 <a class="footerlink" href="/en-US/unlock-advanced-features">more features</a> 2751 </li> 2752 <li> 2753 <a class="footerlink" href="/en-US/api-for-barcode-generatorde">API for barcode-generator.de</a> 2754 </li> 2755 <li> 2756 <a class="footerlink">Version 26-09-03 (bg-lb-4)</a> 2757 </li> 2758 </ul> 2759 </div> 2760 2761 <!--Grid column--> 2762 <div class="col-lg-4 col-md-6 mb-3"> 2763 <h5 class="footerheader">about us</h5> 2764 <ul class="list-unstyled text-small"> 2765 <li> 2766 <a class="footerlink" href="/en-US/legal-notice">Legal Notice</a> 2767 </li> 2768 <li> 2769 <a class="footerlink" href="/en-US/data-protection-declaration">data protection declaration</a> 2770 </li> 2771 <li> 2772 <a class="footerlink" href="/en-US/terms-of-service">terms of service</a> 2773 </li> 2774 <li> 2775 <a class="footerlink" href="/en-US/cancellation-policy">Right of Withdrawal</a> 2776 </li> 2777 </ul> 2778 </div> 2779 2780 2781 2782 </div> 2783 </div> 2784 </footer> 2785 2786 </main> 2787 </div> 2788 2789 <!-- Bootstrap JavaScript --> 2790
2790<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.8/js/bootstrap.bundle.min.js" integrity="sha512-HvOjJrdwNpDbkGJIG2ZNqDlVqMo77qbs4Me4cah0HoDrfhrbA+8SBlZn1KrvAQw7cILLPFJvdwIgphzQmMm+Pw==" crossorigin="anonymous" referrerpolicy="no-referrer" defer=""></script>
2790 2791 2792 <!-- Render Scripts Section --> 2793 2794 <!-- Render Scripts Section End --> 2795 2796 2797
2798<script data-ezscrex="false" data-cfasync="false"> 2799 window.humixPlayers = window.humixPlayers || []; 2800 window.humixPlayers.push({ target: 'autoinsert', isGenerated: true }); 2801 </script>
2801<script data-cfasync="false">function _emitEzConsentEvent(){var customEvent=new CustomEvent("ezConsentEvent",{detail:{ezTcfConsent:window.ezTcfConsent},bubbles:true,cancelable:true,});document.dispatchEvent(customEvent);} 2802(function(window,document){function _setAllEzConsentTrue(){window.ezTcfConsent.loaded=true;window.ezTcfConsent.store_info=true;window.ezTcfConsent.develop_and_improve_services=true;window.ezTcfConsent.measure_ad_performance=true;window.ezTcfConsent.measure_content_performance=true;window.ezTcfConsent.select_basic_ads=true;window.ezTcfConsent.create_ad_profile=true;window.ezTcfConsent.select_personalized_ads=true;window.ezTcfConsent.create_content_profile=true;window.ezTcfConsent.select_personalized_content=true;window.ezTcfConsent.understand_audiences=true;window.ezTcfConsent.use_limited_data_to_select_content=true;window.ezTcfConsent.select_personalized_content=true;} 2803function _clearEzConsentCookie(){document.cookie="ezCMPCookieConsent=tcf2;Domain=.barcode-generator.de;Path=/;expires=Thu, 01 Jan 1970 00:00:00 GMT";} 2804_clearEzConsentCookie();if(typeof window.__tcfapi!=="undefined"){window.ezgconsent=false;var amazonHasRun=false;function _ezAllowed(tcdata,purpose){return(tcdata.purpose.consents[purpose]||tcdata.purpose.legitimateInterests[purpose]);} 2805function _handleConsentDecision(tcdata){window.ezTcfConsent.loaded=true;if(!tcdata.vendor.consents["347"]&&!tcdata.vendor.legitimateInterests["347"]){window._emitEzConsentEvent();return;} 2806window.ezTcfConsent.store_info=_ezAllowed(tcdata,"1");window.ezTcfConsent.develop_and_improve_services=_ezAllowed(tcdata,"10");window.ezTcfConsent.measure_content_performance=_ezAllowed(tcdata,"8");window.ezTcfConsent.select_basic_ads=_ezAllowed(tcdata,"2");window.ezTcfConsent.create_ad_profile=_ezAllowed(tcdata,"3");window.ezTcfConsent.select_personalized_ads=_ezAllowed(tcdata,"4");window.ezTcfConsent.create_content_profile=_ezAllowed(tcdata,"5");window.ezTcfConsent.measure_ad_performance=_ezAllowed(tcdata,"7");window.ezTcfConsent.use_limited_data_to_select_content=_ezAllowed(tcdata,"11");window.ezTcfConsent.select_personalized_content=_ezAllowed(tcdata,"6");window.ezTcfConsent.understand_audiences=_ezAllowed(tcdata,"9");window._emitEzConsentEvent();} 2807function _handleGoogleConsentV2(tcdata){if(!tcdata||!tcdata.purpose||!tcdata.purpose.consents){return;} 2808var consents=tcdata.purpose.consents;var googConsentV2={ad_storage:consents[1]?'granted':'denied',analytics_storage:consents[1]?'granted':'denied',ad_personalization:(consents[3]&&consents[4])?'granted':'denied',ad_user_data:(consents[1]&&consents[7])?'granted':'denied'};if(googConsentV2.analytics_storage==='denied'){gtag('set','url_passthrough',true);} 2809gtag('consent','update',googConsentV2);} 2810__tcfapi("addEventListener",2,function(tcdata,success){if(!success||!tcdata){window._emitEzConsentEvent();return;} 2811if(!tcdata.gdprApplies){_setAllEzConsentTrue();window._emitEzConsentEvent();return;} 2812if(tcdata.eventStatus==="useractioncomplete"||tcdata.eventStatus==="tcloaded"){if(typeof gtag!='undefined'){_handleGoogleConsentV2(tcdata);} 2813_handleConsentDecision(tcdata);if(tcdata.purpose.consents["1"]===true&&tcdata.vendor.consents["755"]!==false){window.ezgconsent=true;(adsbygoogle=window.adsbygoogle||[]).pauseAdRequests=0;} 2814if(window.__ezconsent){__ezconsent.setEzoicConsentSettings(ezConsentCategories);} 2815__tcfapi("removeEventListener",2,function(success){return null;},tcdata.listenerId);if(!(tcdata.purpose.consents["1"]===true&&_ezAllowed(tcdata,"2")&&_ezAllowed(tcdata,"3")&&_ezAllowed(tcdata,"4"))){if(typeof __ez=="object"&&typeof __ez.bit=="object"&&typeof window["_ezaq"]=="object"&&typeof window["_ezaq"]["page_view_id"]=="string"){__ez.bit.Add(window["_ezaq"]["page_view_id"],[new __ezDotData("non_personalized_ads",true),]);}}}});}else{_setAllEzConsentTrue();window._emitEzConsentEvent();}})(window,document);</script>
2815</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.