commit 50ccc0e3b1ffb0d015224c6013e1f57d47b7116d Author: Marvin Scham Date: Sun May 2 02:29:34 2021 +0200 first commit diff --git a/color-thief.js b/color-thief.js new file mode 100644 index 0000000..c32f693 --- /dev/null +++ b/color-thief.js @@ -0,0 +1 @@ +!function(t,r){"object"==typeof exports&&"undefined"!=typeof module?module.exports=r():"function"==typeof define&&define.amd?define(r):t.ColorThief=r()}(this,function(){if(!t)var t={map:function(t,r){var n={};return r?t.map(function(t,o){return n.index=o,r.call(n,t)}):t.slice()},naturalOrder:function(t,r){return tr?1:0},sum:function(t,r){var n={};return t.reduce(r?function(t,o,e){return n.index=e,t+r.call(n,o)}:function(t,r){return t+r},0)},max:function(r,n){return Math.max.apply(null,n?t.map(r,n):r)}};var r=function(){var r=5,n=8-r,o=1e3;function e(t,n,o){return(t<<2*r)+(n<f/2){for(e=n.copy(),i=n.copy(),u=(r=a-n[s])<=(o=n[h]-a)?Math.min(n[h]-1,~~(a+o/2)):Math.max(n[s],~~(a-1-r/2));!v[u];)u++;for(c=l[u];!c&&v[u-1];)c=l[--u];return e[h]=u,i[s]=e[h]+1,[e,i]}}(u==o?"r":u==i?"g":"b")}}return u.prototype={volume:function(t){return this._volume&&!t||(this._volume=(this.r2-this.r1+1)*(this.g2-this.g1+1)*(this.b2-this.b1+1)),this._volume},count:function(t){var r=this.histo;if(!this._count_set||t){var n,o,i,u=0;for(n=this.r1;n<=this.r2;n++)for(o=this.g1;o<=this.g2;o++)for(i=this.b1;i<=this.b2;i++)u+=r[e(n,o,i)]||0;this._count=u,this._count_set=!0}return this._count},copy:function(){return new u(this.r1,this.r2,this.g1,this.g2,this.b1,this.b2,this.histo)},avg:function(t){var n=this.histo;if(!this._avg||t){var o,i,u,a,s=0,h=1<<8-r,c=0,f=0,v=0;for(i=this.r1;i<=this.r2;i++)for(u=this.g1;u<=this.g2;u++)for(a=this.b1;a<=this.b2;a++)s+=o=n[e(i,u,a)]||0,c+=o*(i+.5)*h,f+=o*(u+.5)*h,v+=o*(a+.5)*h;this._avg=s?[~~(c/s),~~(f/s),~~(v/s)]:[~~(h*(this.r1+this.r2+1)/2),~~(h*(this.g1+this.g2+1)/2),~~(h*(this.b1+this.b2+1)/2)]}return this._avg},contains:function(t){var r=t[0]>>n;return gval=t[1]>>n,bval=t[2]>>n,r>=this.r1&&r<=this.r2&&gval>=this.g1&&gval<=this.g2&&bval>=this.b1&&bval<=this.b2}},a.prototype={push:function(t){this.vboxes.push({vbox:t,color:t.avg()})},palette:function(){return this.vboxes.map(function(t){return t.color})},size:function(){return this.vboxes.size()},map:function(t){for(var r=this.vboxes,n=0;n251&&e[1]>251&&e[2]>251&&(r[o].color=[255,255,255])}},{quantize:function(h,c){if(!h.length||c<2||c>256)return!1;var f=function(t){var o,i=new Array(1<<3*r);return t.forEach(function(t){o=e(t[0]>>n,t[1]>>n,t[2]>>n),i[o]=(i[o]||0)+1}),i}(h);f.forEach(function(){});var v=function(t,r){var o,e,i,a=1e6,s=0,h=1e6,c=0,f=1e6,v=0;return t.forEach(function(t){(o=t[0]>>n)s&&(s=o),(e=t[1]>>n)c&&(c=e),(i=t[2]>>n)v&&(v=i)}),new u(a,s,h,c,f,v,r)}(h,f),l=new i(function(r,n){return t.naturalOrder(r.count(),n.count())});function g(t,r){for(var n,e=t.size(),i=0;i=r)return;if(i++>o)return;if((n=t.pop()).count()){var u=s(f,n),a=u[0],h=u[1];if(!a)return;t.push(a),h&&(t.push(h),e++)}else t.push(n),i++}}l.push(v),g(l,.75*c);for(var p=new i(function(r,n){return t.naturalOrder(r.count()*r.volume(),n.count()*n.volume())});l.size();)p.push(l.pop());g(p,c);for(var d=new a;p.size();)d.push(p.pop());return d}}}().quantize,n=function(t){this.canvas=document.createElement("canvas"),this.context=this.canvas.getContext("2d"),this.width=this.canvas.width=t.width,this.height=this.canvas.height=t.height,this.context.drawImage(t,0,0,this.width,this.height)};n.prototype.getImageData=function(){return this.context.getImageData(0,0,this.width,this.height)};var o=function(){};return o.prototype.getColor=function(t,r){return void 0===r&&(r=10),this.getPalette(t,5,r)[0]},o.prototype.getPalette=function(t,o,e){var i=function(t){var r=t.colorCount,n=t.quality;if(void 0!==r&&Number.isInteger(r)){if(1===r)throw new Error("colorCount should be between 2 and 20. To get one color, call getColor() instead of getPalette()");r=Math.max(r,2),r=Math.min(r,20)}else r=10;return void 0===n||Number.isInteger(n)?n=10:n<1&&(n=10),{colorCount:r,quality:n}}({colorCount:o,quality:e}),u=new n(t),a=function(t,r,n){for(var o=t,e=[],i=0,u=void 0,a=void 0,s=void 0,h=void 0,c=void 0;i=125)&&(a>250&&s>250&&h>250||e.push([a,s,h]));return e}(u.getImageData().data,u.width*u.height,i.quality),s=r(a,i.colorCount);return s?s.palette():null},o.prototype.getColorFromUrl=function(t,r,n){var o=document.createElement("img"),e=this;o.addEventListener("load",function(){var i=e.getPalette(o,5,n);r(i[0],t)}),o.src=t},o.prototype.getImageData=function(t,r){var n=new XMLHttpRequest;n.open("GET",t,!0),n.responseType="arraybuffer",n.onload=function(){if(200==this.status){var t=new Uint8Array(this.response);o=t.length;for(var n=new Array(o),o=0;o + + + + + + + + Cover Builder + + + +
+
+ + +
+
+
+ Cover +
+
+
+
+

Spine Color

+
+
+
+
+ + + + + \ No newline at end of file diff --git a/placeholder.png b/placeholder.png new file mode 100644 index 0000000..eef33e0 Binary files /dev/null and b/placeholder.png differ diff --git a/reflection.svg b/reflection.svg new file mode 100644 index 0000000..c72986c --- /dev/null +++ b/reflection.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..7539fbb --- /dev/null +++ b/script.js @@ -0,0 +1,79 @@ +const colorThief = new ColorThief(); + +function renewReflection() { + setTimeout(function () { + var ref = document.getElementById("reflection"); + var img = document.getElementById("img"); + var container = document.getElementById("container"); + + ref.style.width = img.offsetWidth + "px"; + ref.style.marginLeft = container.offsetWidth / 2 - img.offsetWidth / 2 + "px"; + img.style.marginLeft = container.offsetWidth / 2 - img.offsetWidth / 2 + "px"; + reload_palette(); + }, 100); +} + +function copyToClipboard(string) { + var el = document.createElement('textarea'); + el.value = string; + el.setAttribute('readonly', ''); + el.style = { position: 'absolute', left: '-9999px' }; + document.body.appendChild(el); + el.select(); + el.setSelectionRange(0, 99999); + document.execCommand('copy'); + document.body.removeChild(el); +} + +function reload_palette() { + const img = document.getElementById("img"); + var dc = [0, 0, 0]; + var palette = [[0, 0, 0]]; + + if (img.complete) { + dc = colorThief.getColor(img); + palette = colorThief.getPalette(img); + } else { + img.addEventListener('load', function () { + dc = colorThief.getColor(img); + palette = colorThief.getPalette(img); + }) + } + + document.getElementById("dc").style.backgroundColor = rgbToHex(dc[0], dc[1], dc[2]); + document.getElementById("dc").title = rgbToHex(dc[0], dc[1], dc[2]); + img.style.borderColor = rgbToHex(dc[0], dc[1], dc[2]); + + var tag; + var el = document.getElementById("palette"); + el.innerHTML = ""; + + palette.forEach(function (a) { + tag = document.createElement("div"); + tag.classList.add("col"); + tag.style.backgroundColor = rgbToHex(a[0], a[1], a[2]); + tag.title = rgbToHex(a[0], a[1], a[2]); + el.appendChild(tag); + }); + + var cols = document.getElementsByClassName("col"); + [...cols].forEach(function (c) { + c.addEventListener('click', function () { + copyToClipboard(c.title); + img.style.borderColor = c.title; + }); + }); +} + +function componentToHex(c) { + var hex = c.toString(16); + return hex.length == 1 ? "0" + hex : hex; +} + +function rgbToHex(r, g, b) { + return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b); +} + +//########################################################################################################################## + +renewReflection(); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..0f26816 --- /dev/null +++ b/style.css @@ -0,0 +1,117 @@ +body { + background: #f2f2f2; + padding: 0; + margin: 0; + font-family: Roboto, sans-serif; +} + +#header { + height: 100px; + width: 100%; + background-color: rebeccapurple; + position: fixed; + top: 0; + right: 0; + line-height: 100px; + text-align: center; +} + +#header span { + color: white; + font-size: 2em; +} + +#content { + margin-top: 100px; + height: calc(100vh - 100px); + padding-top: 1rem; +} + +#content div.block { + width: 800px; + max-width: calc(100vw - 8rem); + background: white; + padding: 2rem; + text-align: center; + margin-left: auto; + margin-right: auto; + margin-top: 1rem; +} + +#content div#container { + position: relative; + height: 225px; + left: 50%; + -webkit-transform: translateX(-50%); + transform: translateX(-50%); +} + +#content div#container #img { + display: block; + height: 100%; + width: auto; + border-left: 9px solid #fff; +} + +#content div#container div#reflection { + background: url(reflection.svg); + background-size: cover; + position: absolute; + bottom: 0; + width: 100%; + height: 100%; +} + +#content .col { + display: inline-block; + height: 70px; + width: 70px; + cursor: pointer; +} + +#content .col:nth-child(n + 1) { + margin-left: 4px; +} + +#content input#file { + position: absolute; + height: 47px; + max-width: 198px; + top: 152px; + opacity: 0; +} + +#content input#file:hover { + cursor: pointer; +} + +#content input#file:hover + label { + background: #905ac7; +} + +#content input#file + label { + color: white; + background-color: rebeccapurple; + padding: 0.9rem 1rem; + -webkit-transition: background-color 0.2s ease; + transition: background-color 0.2s ease; +} + +#content input#file + label svg { + fill: white; + padding-right: 5px; +} + +#footer { + height: 100px; + width: 100%; + background-color: #361e4e; + color: white; + text-align: center; + line-height: 100px; +} + +#footer a { + color: white; +} +/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/style.css.map b/style.css.map new file mode 100644 index 0000000..7c9e603 --- /dev/null +++ b/style.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AAAA,AAAA,IAAI,CAAC;EACH,UAAU,EAAE,OAAO;EACnB,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,CAAC;EACT,WAAW,EAAE,kBAAkB;CAChC;;AAED,AAAA,OAAO,CAAC;EACN,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,aAAa;EAC/B,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,KAAK,EAAE,CAAC;EACR,WAAW,EAAE,KAAK;EAClB,UAAU,EAAE,MAAM;CAMnB;;AAdD,AAUE,OAVK,CAUL,IAAI,CAAC;EACH,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,GAAG;CACf;;AAGH,AAAA,QAAQ,CAAC;EACP,UAAU,EAAE,KAAK;EACjB,MAAM,EAAE,mBAAmB;EAC3B,WAAW,EAAE,IAAI;CA4ElB;;AA/ED,AAKE,QALM,CAKN,GAAG,AAAA,MAAM,CAAC;EACR,KAAK,EAAE,KAAK;EACZ,SAAS,EAAE,kBAAkB;EAC7B,UAAU,EAAE,KAAK;EACjB,OAAO,EAAE,IAAI;EACb,UAAU,EAAE,MAAM;EAEhB,WAAI,EAAE,IAAI;EACV,YAAK,EAAE,IAAI;EACX,UAAG,EAAE,IAAI;CAEZ;;AAhBH,AAkBE,QAlBM,CAkBN,GAAG,AAAA,UAAU,CAAC;EACZ,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,KAAK;EACb,IAAI,EAAE,GAAG;EACT,SAAS,EAAE,gBAAgB;CAiB5B;;AAvCH,AAwBI,QAxBI,CAkBN,GAAG,AAAA,UAAU,CAMX,IAAI,CAAC;EACH,OAAO,EAAE,KAAK;EACd,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,WAAW,EAAE,cAAc;CAC5B;;AA7BL,AA+BI,QA/BI,CAkBN,GAAG,AAAA,UAAU,CAaX,GAAG,AAAA,WAAW,CAAC;EACb,UAAU,EAAE,mBAAmB;EAC/B,eAAe,EAAE,KAAK;EACtB,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;CACb;;AAtCL,AAyCE,QAzCM,CAyCN,IAAI,CAAC;EACH,OAAO,EAAE,YAAY;EACrB,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,OAAO;CAKhB;;AAlDH,AA+CI,QA/CI,CAyCN,IAAI,AAMD,UAAW,CAAA,KAAK,EAAE;EACjB,WAAW,EAAE,GAAG;CACjB;;AAjDL,AAoDE,QApDM,CAoDN,KAAK,AAAA,KAAK,CAAC;EACT,QAAQ,EAAE,QAAQ;EAClB,MAAM,EAAE,IAAI;EACZ,SAAS,EAAE,KAAK;EAChB,GAAG,EAAE,KAAK;EACV,OAAO,EAAE,CAAC;CAqBX;;AA9EH,AA2DI,QA3DI,CAoDN,KAAK,AAAA,KAAK,AAOP,MAAM,CAAC;EACN,MAAM,EAAE,OAAO;CAKhB;;AAjEL,AA8DM,QA9DE,CAoDN,KAAK,AAAA,KAAK,AAOP,MAAM,GAGD,KAAK,CAAC;EACR,UAAU,EAAE,OAAiB;CAC9B;;AAhEP,AAmEI,QAnEI,CAoDN,KAAK,AAAA,KAAK,GAeJ,KAAK,CAAC;EACR,KAAK,EAAE,KAAK;EACZ,gBAAgB,EAAE,aAAa;EAC/B,OAAO,EAAE,WAAW;EACpB,UAAU,EAAE,0BAA0B;CAMvC;;AA7EL,AAyEM,QAzEE,CAoDN,KAAK,AAAA,KAAK,GAeJ,KAAK,CAMP,GAAG,CAAC;EACF,IAAI,EAAE,KAAK;EACX,aAAa,EAAE,GAAG;CACnB;;AAKP,AAAA,OAAO,CAAC;EACN,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,IAAI;EACX,gBAAgB,EAAE,OAAe;EACjC,KAAK,EAAE,KAAK;EACZ,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,KAAK;CAKnB;;AAXD,AAQE,OARK,CAQL,CAAC,CAAC;EACA,KAAK,EAAE,KAAK;CACb", + "sources": [ + "style.scss" + ], + "names": [], + "file": "style.css" +} \ No newline at end of file diff --git a/style.scss b/style.scss new file mode 100644 index 0000000..879e605 --- /dev/null +++ b/style.scss @@ -0,0 +1,116 @@ +body { + background: #f2f2f2; + padding: 0; + margin: 0; + font-family: Roboto, sans-serif; +} + +#header { + height: 100px; + width: 100%; + background-color: rebeccapurple; + position: fixed; + top: 0; + right: 0; + line-height: 100px; + text-align: center; + + span { + color: white; + font-size: 2em; + } +} + +#content { + margin-top: 100px; + height: calc(100vh - 100px); + padding-top: 1rem; + + div.block { + width: 800px; + max-width: calc(100vw - 8rem); + background: white; + padding: 2rem; + text-align: center; + margin: { + left: auto; + right: auto; + top: 1rem; + } + } + + div#container { + position: relative; + height: 225px; + left: 50%; + transform: translateX(-50%); + + #img { + display: block; + height: 100%; + width: auto; + border-left: 9px solid #fff; + } + + div#reflection { + background: url(reflection.svg); + background-size: cover; + position: absolute; + bottom: 0; + width: 100%; + height: 100%; + } + } + + .col { + display: inline-block; + height: 70px; + width: 70px; + cursor: pointer; + + &:nth-child(n + 1) { + margin-left: 4px; + } + } + + input#file { + position: absolute; + height: 47px; + max-width: 198px; + top: 152px; + opacity: 0; + + &:hover { + cursor: pointer; + + & + label { + background: rgb(144, 90, 199); + } + } + + & + label { + color: white; + background-color: rebeccapurple; + padding: 0.9rem 1rem; + transition: background-color 0.2s ease; + + svg { + fill: white; + padding-right: 5px; + } + } + } +} + +#footer { + height: 100px; + width: 100%; + background-color: rgb(54, 30, 78); + color: white; + text-align: center; + line-height: 100px; + + a { + color: white; + } +}