diff --git a/docs/index.2da43ba5.js b/docs/index.2da43ba5.js
deleted file mode 100644
index 89594e8..0000000
--- a/docs/index.2da43ba5.js
+++ /dev/null
@@ -1 +0,0 @@
-const e=document.querySelector("#mockup"),t=e.getContext("2d"),n=document.createElement("img"),l=document.querySelector("#temp"),o=l.getContext("2d"),r=document.querySelector("#horizontal"),a=document.querySelector("#vertical");let i=1,s=1,c=[],d={},h={};const p=document.querySelector("#palette"),u=document.querySelector("#spinner"),g=document.querySelector("#instructions");let y="";fetch("./list.json").then((e=>e.json())).then((e=>{p.innerHTML="";for(let t=0;t<e.palette.length;t++)d[e.palette[t].color]=e.palette[t],d[e.palette[t].color].code="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-*/$!?".charAt(t),c.push(e.palette[t].color),p.innerHTML+=`\n        <label title="${e.palette[t].label}">\n          <input class="color-picked" type="checkbox" value="${e.palette[t].color}" checked />\n          <span class="border">\n            <span class="color" style="background-color: ${e.palette[t].color};"></span>\n            <span class="number">${e.palette[t].num}</span>\n            </span>\n          <span class="sr-only">${e.palette[t].label}</span>\n        </label>\n      `;document.querySelectorAll(".color-picked").forEach((e=>{e.addEventListener("click",(()=>{e.checked?c.push(e.value):c.splice(c.indexOf(e.value),1),b(),v()}),!1)}))}));const f=e=>{let t=768,n=c[0];for(let l=0;l<c.length;l++){let o=0;for(let t=0;t<3;t++)o+=Math.abs(e[t]-parseInt(c[l].substring(2*t+1,2*t+3),16));o<t&&(t=o,n=c[l])}return n},m=()=>{i>s?(e.width=580,e.height=580*s/i):(e.width=580*i/s,e.height=580),g.innerHTML=""},b=()=>{if(c.length){y="",h={};for(let e=0;e<l.height;e++){for(let n=0;n<l.width;n++){const l=o.getImageData(n,e,1,1).data;if(0!=l[3]){t.beginPath();let o=i;s>i&&(o=s),t.arc((10+20*n)/o,(10+20*e)/o,8/o,0,2*Math.PI),t.lineWidth=5/o;const r=f(l);t.strokeStyle=r,void 0===h[r]&&(h[r]=0),h[r]++,y+=`<i style="color: ${d[r].color}">${d[r].code}</i>`,t.stroke()}else y+="&nbsp;"}y+="<br />"}}else alert("Pas de coloris sélectionné")},v=()=>{if(""!=y){let e=[],t=0;for(const n in h)e.push(`(${d[n].num}) ${d[n].label} [<span class="key" style="color: ${d[n].color}">${d[n].code}</span>] : ${h[n]}`),t+=h[n];e.sort(),g.innerHTML=`\n      <p>Nombre de perles à utiliser (${t})</p>\n      <ul>\n        <li>${e.join("</li><li>")}</li>\n      </ul>\n      <p>Instructions</p>\n      <p class="key">${y}</p>\n    `}else g.innerHTML=""};n.addEventListener("load",(()=>{t.clearRect(0,0,e.width,e.height),o.clearRect(0,0,l.width,l.height),(()=>{l.width=29*i,l.height=29*s;let e=n.width,t=n.height;t*=l.width/e,e=l.width,t>l.height&&(e*=l.height/t,t=l.height),o.drawImage(n,0,0,n.width,n.height,(l.width-e)/2,(l.height-t)/2,e,t)})(),b(),v(),u.style.display="none"}),!1),e.addEventListener("dragover",(e=>{e.preventDefault()}),!1),e.addEventListener("drop",(e=>{const t=e.dataTransfer.files;if(t.length>0){const e=t[0];if("undefined"!=typeof FileReader&&-1!=e.type.indexOf("image")){g.innerHTML="",u.style.display="block";const t=new FileReader;t.onload=e=>{n.src=e.target.result},t.readAsDataURL(e)}}e.preventDefault()}),!1),r.addEventListener("input",(()=>{i=r.value,m()}),!1),a.addEventListener("input",(()=>{s=a.value,m()}),!1);
\ No newline at end of file
diff --git a/docs/index.2da43ba5.js.br b/docs/index.2da43ba5.js.br
deleted file mode 100644
index cfdf2f6..0000000
Binary files a/docs/index.2da43ba5.js.br and /dev/null differ
diff --git a/docs/index.2da43ba5.js.gz b/docs/index.2da43ba5.js.gz
deleted file mode 100644
index 4c60868..0000000
Binary files a/docs/index.2da43ba5.js.gz and /dev/null differ
diff --git a/docs/index.33c72dd5.js b/docs/index.33c72dd5.js
new file mode 100644
index 0000000..6ac058c
--- /dev/null
+++ b/docs/index.33c72dd5.js
@@ -0,0 +1 @@
+const e=document.querySelector("#mockup"),t=e.getContext("2d"),l=document.createElement("img"),n=document.querySelector("#temp"),o=n.getContext("2d"),r=document.querySelector("#horizontal"),a=document.querySelector("#vertical");let i=1,s=1,c=[],d={},h={};const p=document.querySelector("#palette"),u=document.querySelector("#spinner"),g=document.querySelector("#instructions");let f="";fetch("./list.json").then((e=>e.json())).then((e=>{p.innerHTML="";for(let t=0;t<e.palette.length;t++)d[e.palette[t].color]=e.palette[t],d[e.palette[t].color].code="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+-*/$!?".charAt(t),c.push(e.palette[t].color),p.innerHTML+=`\n        <label title="${e.palette[t].label}">\n          <input class="color-picked" type="checkbox" value="${e.palette[t].color}" checked />\n          <span class="border">\n            <span class="color" style="background-color: ${e.palette[t].color};"></span>\n            <span class="number">${e.palette[t].num}</span>\n            </span>\n          <span class="sr-only">${e.palette[t].label}</span>\n        </label>\n      `;document.querySelectorAll(".color-picked").forEach((e=>{e.addEventListener("click",(()=>{e.checked?c.push(e.value):c.splice(c.indexOf(e.value),1),v(),k()}),!1)}))}));const y=e=>{let t=768,l=c[0];for(let n=0;n<c.length;n++){let o=0;for(let t=0;t<3;t++)o+=Math.abs(e[t]-parseInt(c[n].substring(2*t+1,2*t+3),16));o<t&&(t=o,l=c[n])}return l},m=()=>{for(let e=0;e<29*i;e++)for(let l=0;l<29*s;l++){let n=i;s>i&&(n=s),t.beginPath(),t.fillStyle="#999999",t.fillRect((10+20*e)/n,(10+20*l)/n,1,1),t.stroke()}},b=()=>{i>s?(e.width=580,e.height=580*s/i):(e.width=580*i/s,e.height=580),m(),g.innerHTML="",""!=l.src&&(u.style.display="block",w())},v=()=>{if(c.length){f="",h={};for(let e=0;e<n.height;e++){for(let l=0;l<n.width;l++){const n=o.getImageData(l,e,1,1).data;if(0!=n[3]){t.beginPath();let o=i;s>i&&(o=s),t.arc((10+20*l)/o,(10+20*e)/o,8/o,0,2*Math.PI),t.lineWidth=5/o;const r=y(n);t.strokeStyle=r,void 0===h[r]&&(h[r]=0),h[r]++,f+=`<i style="color: ${d[r].color}">${d[r].code}</i>`,t.stroke()}else f+="&nbsp;"}f+="<br />"}}else alert("Pas de coloris sélectionné")},k=()=>{if(""!=f){let e=[],t=0;for(const l in h)e.push(`(${d[l].num}) ${d[l].label} [<span class="key" style="color: ${d[l].color}">${d[l].code}</span>] : ${h[l]}`),t+=h[l];e.sort(),g.innerHTML=`\n      <p>Nombre de perles à utiliser (${t})</p>\n      <ul>\n        <li>${e.join("</li><li>")}</li>\n      </ul>\n      <p>Instructions</p>\n      <p class="key">${f}</p>\n    `}else g.innerHTML=""},w=()=>{t.clearRect(0,0,e.width,e.height),o.clearRect(0,0,n.width,n.height),m(),(()=>{n.width=29*i,n.height=29*s;let e=l.width,t=l.height;t*=n.width/e,e=n.width,t>n.height&&(e*=n.height/t,t=n.height),o.drawImage(l,0,0,l.width,l.height,(n.width-e)/2,(n.height-t)/2,e,t)})(),v(),k(),u.style.display="none"};l.addEventListener("load",(()=>{w()}),!1),e.addEventListener("dragover",(e=>{e.preventDefault()}),!1),e.addEventListener("drop",(e=>{const t=e.dataTransfer.files;if(t.length>0){const e=t[0];if("undefined"!=typeof FileReader&&-1!=e.type.indexOf("image")){g.innerHTML="",u.style.display="block";const t=new FileReader;t.onload=e=>{l.src=e.target.result},t.readAsDataURL(e)}}e.preventDefault()}),!1),r.addEventListener("input",(()=>{i=r.value,b()}),!1),a.addEventListener("input",(()=>{s=a.value,b()}),!1),window.addEventListener("load",(()=>{b()}));
\ No newline at end of file
diff --git a/docs/index.33c72dd5.js.br b/docs/index.33c72dd5.js.br
new file mode 100644
index 0000000..c2fda75
Binary files /dev/null and b/docs/index.33c72dd5.js.br differ
diff --git a/docs/index.33c72dd5.js.gz b/docs/index.33c72dd5.js.gz
new file mode 100644
index 0000000..c4a87aa
Binary files /dev/null and b/docs/index.33c72dd5.js.gz differ
diff --git a/docs/index.5ceefcfd.css b/docs/index.5ceefcfd.css
new file mode 100644
index 0000000..e0bceaa
--- /dev/null
+++ b/docs/index.5ceefcfd.css
@@ -0,0 +1 @@
+html{-webkit-text-size-adjust:100%;line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;margin:0}button,input{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{-webkit-appearance:button;text-transform:none}h1,p{margin:0}button{background-color:transparent;background-image:none}ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{border:0 solid;box-sizing:border-box}input::-moz-placeholder{color:#9ca3af;opacity:1}input:-ms-input-placeholder{color:#9ca3af;opacity:1}input::placeholder{color:#9ca3af;opacity:1}button{cursor:pointer}h1{font-size:inherit;font-weight:inherit}button,input{color:inherit;line-height:inherit;padding:0}canvas,svg{display:block;vertical-align:middle}*,:after,:before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.border{border-width:1px}body,html{margin:0;padding:0}body{--tw-bg-opacity:1;background-color:rgba(199,210,254,var(--tw-bg-opacity))}h1{--tw-text-opacity:1;--tw-blur:var(--tw-empty,   );--tw-brightness:var(--tw-empty,   );--tw-contrast:var(--tw-empty,   );--tw-grayscale:var(--tw-empty,   );--tw-hue-rotate:var(--tw-empty,   );--tw-invert:var(--tw-empty,   );--tw-saturate:var(--tw-empty,   );--tw-sepia:var(--tw-empty,   );--tw-drop-shadow:var(--tw-empty,   );--tw-drop-shadow:drop-shadow(0 20px 13px rgba(0,0,0,.03)) drop-shadow(0 8px 5px rgba(0,0,0,.08));color:rgba(75,85,99,var(--tw-text-opacity));display:block;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);font-size:3.75rem;font-weight:800;line-height:1;padding-bottom:1.25rem;padding-top:1.25rem}h1,p{text-align:center}#temp{display:none}#app{align-items:flex-start;display:flex;flex-direction:row;justify-content:center;padding:2.5rem;width:100%}#app #pegboard{position:relative}#app #pegboard #spinner{display:none;position:absolute;z-index:1}#app #pegboard #mockupwrapper{align-items:center;display:flex;height:580px;justify-content:center;width:580px}#app #pegboard #mockupwrapper #mockup{--tw-bg-opacity:1;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);background-color:rgba(255,255,255,var(--tw-bg-opacity));border-radius:.25rem;position:relative;transition-duration:.15s;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}#app #pegboard #mockupwrapper #mockup,#app #pegboard #mockupwrapper #mockup:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#app #pegboard #mockupwrapper #mockup:hover{--tw-bg-opacity:1;--tw-bg-opacity:0.2;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);background-color:rgba(209,250,229,var(--tw-bg-opacity))}#app #pegboard .form{align-items:center;display:flex;justify-content:space-around;margin-top:.5rem}#app #pegboard .form span{flex-grow:1}#app #pegboard .form label{margin-left:.5rem}#app #pegboard .form input{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity));border-radius:.5rem;height:2rem;margin-left:.5rem;padding-left:.5rem;padding-right:.5rem;text-align:center;width:5rem}#app #palette{display:flex;flex-wrap:wrap;max-width:28rem;padding:.5rem}#app #palette label{cursor:pointer;display:inline-block;margin:.25rem}#app #palette label input{display:none}#app #palette label .border{border-radius:9999px;display:block;height:3rem;position:relative;transition-duration:.15s;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:3rem}#app #palette label .border .color{border-radius:9999px;display:block;height:100%;width:100%}#app #palette label .border .number{--tw-bg-opacity:1;--tw-bg-opacity:0.25;--tw-text-opacity:1;align-items:center;background-color:rgba(29,78,216,var(--tw-bg-opacity));border-radius:9999px;color:rgba(255,255,255,var(--tw-text-opacity));display:flex;font-size:.75rem;font-weight:700;height:1.5rem;justify-content:center;line-height:1rem;padding:.25rem;position:absolute;right:-.25rem;top:-.25rem;transition-duration:.15s;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1.5rem;z-index:1}#app #palette label input:checked~.border{--tw-border-opacity:1;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);border-color:rgba(255,255,255,var(--tw-border-opacity));border-width:2px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#app #palette label input:checked~.border .number{--tw-bg-opacity:1}#app #palette button{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgba(59,130,246,var(--tw-bg-opacity));border-radius:.5rem;color:rgba(255,255,255,var(--tw-text-opacity));font-weight:700;margin:.5rem;padding-left:1rem;padding-right:1rem}#instructions{margin-left:auto;margin-right:auto;padding:1rem}#instructions .key{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:700;letter-spacing:.1em;line-height:1rem}.lds-grid{display:inline-block;height:80px;position:relative;width:80px}.lds-grid div{-webkit-animation:a 1.2s linear infinite;animation:a 1.2s linear infinite;background:red;border-radius:50%;height:16px;position:absolute;width:16px}.lds-grid div:first-child{-webkit-animation-delay:0s;animation-delay:0s;left:8px;top:8px}.lds-grid div:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s;left:32px;top:8px}.lds-grid div:nth-child(3){-webkit-animation-delay:-.8s;animation-delay:-.8s;left:56px;top:8px}.lds-grid div:nth-child(4){-webkit-animation-delay:-.4s;animation-delay:-.4s;left:8px;top:32px}.lds-grid div:nth-child(5){-webkit-animation-delay:-.8s;animation-delay:-.8s;left:32px;top:32px}.lds-grid div:nth-child(6){-webkit-animation-delay:-1.2s;animation-delay:-1.2s;left:56px;top:32px}.lds-grid div:nth-child(7){-webkit-animation-delay:-.8s;animation-delay:-.8s;left:8px;top:56px}.lds-grid div:nth-child(8){-webkit-animation-delay:-1.2s;animation-delay:-1.2s;left:32px;top:56px}.lds-grid div:nth-child(9){-webkit-animation-delay:-1.6s;animation-delay:-1.6s;left:56px;top:56px}@-webkit-keyframes a{0%,to{opacity:1}50%{opacity:.5}}@keyframes a{0%,to{opacity:1}50%{opacity:.5}}
\ No newline at end of file
diff --git a/docs/index.5ceefcfd.css.br b/docs/index.5ceefcfd.css.br
new file mode 100644
index 0000000..c172078
Binary files /dev/null and b/docs/index.5ceefcfd.css.br differ
diff --git a/docs/index.5ceefcfd.css.gz b/docs/index.5ceefcfd.css.gz
new file mode 100644
index 0000000..f5c5054
Binary files /dev/null and b/docs/index.5ceefcfd.css.gz differ
diff --git a/docs/index.bd4c4953.css b/docs/index.bd4c4953.css
deleted file mode 100644
index e850367..0000000
--- a/docs/index.bd4c4953.css
+++ /dev/null
@@ -1 +0,0 @@
-html{-webkit-text-size-adjust:100%;line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;margin:0}button,input{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button{-webkit-appearance:button;text-transform:none}h1,p{margin:0}button{background-color:transparent;background-image:none}ul{list-style:none;margin:0;padding:0}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{border:0 solid;box-sizing:border-box}input::-moz-placeholder{color:#9ca3af;opacity:1}input:-ms-input-placeholder{color:#9ca3af;opacity:1}input::placeholder{color:#9ca3af;opacity:1}button{cursor:pointer}h1{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input{color:inherit;line-height:inherit;padding:0}canvas,svg{display:block;vertical-align:middle}*,:after,:before{--tw-border-opacity:1;border-color:rgba(229,231,235,var(--tw-border-opacity))}.sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.border{border-width:1px}body,html{margin:0;padding:0}body{--tw-bg-opacity:1;background-color:rgba(199,210,254,var(--tw-bg-opacity))}h1{--tw-text-opacity:1;--tw-blur:var(--tw-empty,   );--tw-brightness:var(--tw-empty,   );--tw-contrast:var(--tw-empty,   );--tw-grayscale:var(--tw-empty,   );--tw-hue-rotate:var(--tw-empty,   );--tw-invert:var(--tw-empty,   );--tw-saturate:var(--tw-empty,   );--tw-sepia:var(--tw-empty,   );--tw-drop-shadow:var(--tw-empty,   );--tw-drop-shadow:drop-shadow(0 20px 13px rgba(0,0,0,.03)) drop-shadow(0 8px 5px rgba(0,0,0,.08));color:rgba(75,85,99,var(--tw-text-opacity));display:block;filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);font-size:3.75rem;font-weight:800;line-height:1;padding-bottom:1.25rem;padding-top:1.25rem}h1,p{text-align:center}#temp{display:none}#app{align-items:flex-start;display:flex;flex-direction:row;justify-content:center;padding:2.5rem;width:100%}#app #pegboard{position:relative}#app #pegboard #spinner{display:none;position:absolute;z-index:1}#app #pegboard #mockupwrapper{align-items:center;display:flex;height:580px;justify-content:center;width:580px}#app #pegboard #mockupwrapper #mockup{--tw-bg-opacity:1;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);background-color:rgba(255,255,255,var(--tw-bg-opacity));border-radius:.25rem;position:relative;transition-duration:.15s;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1)}#app #pegboard #mockupwrapper #mockup,#app #pegboard #mockupwrapper #mockup:hover{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#app #pegboard #mockupwrapper #mockup:hover{--tw-bg-opacity:1;--tw-bg-opacity:0.2;--tw-shadow:0 25px 50px -12px rgba(0,0,0,.25);background-color:rgba(209,250,229,var(--tw-bg-opacity))}#app #pegboard .form{align-items:center;display:flex;justify-content:space-around;margin-top:.5rem}#app #pegboard .form span{flex-grow:1}#app #pegboard .form label{margin-left:.5rem}#app #pegboard .form input{--tw-bg-opacity:1;background-color:rgba(255,255,255,var(--tw-bg-opacity));border-radius:.5rem;height:2rem;margin-left:.5rem;padding-left:.5rem;padding-right:.5rem;text-align:center;width:5rem}#app #palette{display:flex;flex-wrap:wrap;max-width:28rem;padding:.5rem}#app #palette label{cursor:pointer;display:inline-block;margin:.25rem}#app #palette label input{display:none}#app #palette label .border{border-radius:9999px;display:block;height:3rem;position:relative;transition-duration:.15s;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:3rem}#app #palette label .border .color{border-radius:9999px;display:block;height:100%;width:100%}#app #palette label .border .number{--tw-bg-opacity:1;--tw-bg-opacity:0.25;--tw-text-opacity:1;align-items:center;background-color:rgba(29,78,216,var(--tw-bg-opacity));border-radius:9999px;color:rgba(255,255,255,var(--tw-text-opacity));display:flex;font-size:.75rem;font-weight:700;height:1.5rem;justify-content:center;line-height:1rem;padding:.25rem;position:absolute;right:-.25rem;top:-.25rem;transition-duration:.15s;transition-duration:.3s;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);width:1.5rem;z-index:1}#app #palette label input:checked~.border{--tw-border-opacity:1;--tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);border-color:rgba(255,255,255,var(--tw-border-opacity));border-width:2px;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}#app #palette label input:checked~.border .number{--tw-bg-opacity:1}#app #palette button{--tw-bg-opacity:1;--tw-text-opacity:1;background-color:rgba(59,130,246,var(--tw-bg-opacity));border-radius:.5rem;color:rgba(255,255,255,var(--tw-text-opacity));font-weight:700;margin:.5rem;padding-left:1rem;padding-right:1rem}#instructions{margin-left:auto;margin-right:auto;padding:1rem}#instructions .key{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:700;letter-spacing:.1em;line-height:1rem}.lds-grid{display:inline-block;height:80px;position:relative;width:80px}.lds-grid div{-webkit-animation:a 1.2s linear infinite;animation:a 1.2s linear infinite;background:red;border-radius:50%;height:16px;position:absolute;width:16px}.lds-grid div:first-child{-webkit-animation-delay:0s;animation-delay:0s;left:8px;top:8px}.lds-grid div:nth-child(2){-webkit-animation-delay:-.4s;animation-delay:-.4s;left:32px;top:8px}.lds-grid div:nth-child(3){-webkit-animation-delay:-.8s;animation-delay:-.8s;left:56px;top:8px}.lds-grid div:nth-child(4){-webkit-animation-delay:-.4s;animation-delay:-.4s;left:8px;top:32px}.lds-grid div:nth-child(5){-webkit-animation-delay:-.8s;animation-delay:-.8s;left:32px;top:32px}.lds-grid div:nth-child(6){-webkit-animation-delay:-1.2s;animation-delay:-1.2s;left:56px;top:32px}.lds-grid div:nth-child(7){-webkit-animation-delay:-.8s;animation-delay:-.8s;left:8px;top:56px}.lds-grid div:nth-child(8){-webkit-animation-delay:-1.2s;animation-delay:-1.2s;left:32px;top:56px}.lds-grid div:nth-child(9){-webkit-animation-delay:-1.6s;animation-delay:-1.6s;left:56px;top:56px}@-webkit-keyframes a{0%,to{opacity:1}50%{opacity:.5}}@keyframes a{0%,to{opacity:1}50%{opacity:.5}}
\ No newline at end of file
diff --git a/docs/index.bd4c4953.css.br b/docs/index.bd4c4953.css.br
deleted file mode 100644
index 1fdc235..0000000
Binary files a/docs/index.bd4c4953.css.br and /dev/null differ
diff --git a/docs/index.bd4c4953.css.gz b/docs/index.bd4c4953.css.gz
deleted file mode 100644
index bf27be0..0000000
Binary files a/docs/index.bd4c4953.css.gz and /dev/null differ
diff --git a/docs/index.html b/docs/index.html
index 4e8c6cf..afc2ab0 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1 +1 @@
-<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="index.bd4c4953.css"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HamaCreator</title><link rel="icon" type="image/svg+xml" href="favicon.a0e8867b.svg"></head><body><h1>HamaCreator</h1><p>Glisser une image sur la zone blanche</p><div id="app"><div id="pegboard"><div id="mockupwrapper"><canvas id="mockup" width="580px" height="580px"></canvas><div id="spinner"><div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div><div class="form"><span>Nombre de plaque(s)</span><label for="horizontal">Horizontale(s)</label><input id="horizontal" type="number" value="1" min="1"><label for="vertical">Verticale(s)</label><input id="vertical" type="number" value="1" min="1"></div></div><div id="config"><p>Choisissez vos coloris disponibles (tous par défaut)</p><div id="palette"><label><input type="checkbox"><span class="border"><span class="color"></span><span class="number"></span></span><span class="sr-only"></span></label></div></div></div><div id="instructions"></div><canvas id="temp" width="29px" height="29px"></canvas><script src="index.2da43ba5.js" type="module"></script><script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="gouz" data-description="Support me on Buy me a coffee!" data-message="" data-color="#40DCA5" data-position="Right" data-x_margin="18" data-y_margin="18"></script></body></html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><link rel="stylesheet" href="index.5ceefcfd.css"><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>HamaCreator</title><link rel="icon" type="image/svg+xml" href="favicon.a0e8867b.svg"></head><body><h1>HamaCreator</h1><p>Glisser une image sur la zone blanche</p><div id="app"><div id="pegboard"><div id="mockupwrapper"><canvas id="mockup" width="580px" height="580px"></canvas><div id="spinner"><div class="lds-grid"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div></div></div><div class="form"><span>Nombre de plaque(s)</span><label for="horizontal">Horizontale(s)</label><input id="horizontal" type="number" value="1" min="1"><label for="vertical">Verticale(s)</label><input id="vertical" type="number" value="1" min="1"></div></div><div id="config"><p>Choisissez vos coloris disponibles (tous par défaut)</p><div id="palette"><label><input type="checkbox"><span class="border"><span class="color"></span><span class="number"></span></span><span class="sr-only"></span></label></div></div></div><div id="instructions"></div><canvas id="temp" width="29px" height="29px"></canvas><script src="index.33c72dd5.js" type="module"></script><script data-name="BMC-Widget" data-cfasync="false" src="https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js" data-id="gouz" data-description="Aidez moi en faisant des dons" data-message="Merci pour vos dons, je propose mes outils gratuitement, un petit don fait toujours plaisir." data-color="#40DCA5" data-position="Right" data-x_margin="18" data-y_margin="18"></script></body></html>
\ No newline at end of file
diff --git a/docs/index.html.br b/docs/index.html.br
index 578b332..201f3c1 100644
Binary files a/docs/index.html.br and b/docs/index.html.br differ
diff --git a/docs/index.html.gz b/docs/index.html.gz
index a3996eb..63a1f5b 100644
Binary files a/docs/index.html.gz and b/docs/index.html.gz differ
diff --git a/src/index.pug b/src/index.pug
index 7d76c7f..6cc67a5 100644
--- a/src/index.pug
+++ b/src/index.pug
@@ -40,8 +40,8 @@ html(lang='en')
       data-cfasync='false',
       src='https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js',
       data-id='gouz',
-      data-description='Support me on Buy me a coffee!',
-      data-message='',
+      data-description='Aidez moi en faisant des dons',
+      data-message='Merci pour vos dons, je propose mes outils gratuitement, un petit don fait toujours plaisir.',
       data-color='#40DCA5',
       data-position='Right',
       data-x_margin='18',
diff --git a/src/js/main.js b/src/js/main.js
index 176ae7f..71b939b 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -103,9 +103,22 @@ const findColor = (rgb) => {
   return resColor;
 };
 
+const drawDots = () => {
+  for (let x = 0; x < 29 * nbX; x++)
+    for (let y = 0; y < 29 * nbY; y++) {
+      let div = nbX;
+      if (nbY > nbX) div = nbY;
+      context.beginPath();
+      context.fillStyle = '#999999';
+      context.fillRect((10 + x * 20) / div, (10 + y * 20) / div, 1, 1);
+      context.stroke();
+    }
+};
+
 const clearCanvas = () => {
   context.clearRect(0, 0, $canvas.width, $canvas.height);
   tempContext.clearRect(0, 0, $tempCanvas.width, $tempCanvas.height);
+  drawDots();
 };
 
 const redrawCanvas = () => {
@@ -116,7 +129,12 @@ const redrawCanvas = () => {
     $canvas.width = (580 * nbX) / nbY;
     $canvas.height = 580;
   }
+  drawDots();
   $instructions.innerHTML = '';
+  if ('' != img.src) {
+    $spinner.style.display = 'block';
+    imgTreatment();
+  }
 };
 
 const redim = () => {
@@ -201,14 +219,18 @@ const generateInstructions = () => {
   } else $instructions.innerHTML = '';
 };
 
+const imgTreatment = () => {
+  clearCanvas();
+  redim();
+  draw();
+  generateInstructions();
+  $spinner.style.display = 'none';
+};
+
 img.addEventListener(
   'load',
   () => {
-    clearCanvas();
-    redim();
-    draw();
-    generateInstructions();
-    $spinner.style.display = 'none';
+    imgTreatment();
   },
   false
 );
@@ -262,3 +284,7 @@ $vertical.addEventListener(
   },
   false
 );
+
+window.addEventListener('load', () => {
+  redrawCanvas();
+});