schmoekerei/coverbuilder
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Marvin Scham
2021-05-02 02:29:34 +02:00
commit 50ccc0e3b1
9 changed files with 374 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
color-thief.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.5 KiB

43
main.html Normal file
View File

@@ -0,0 +1,43 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="favicon.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<title>Cover Builder</title>
</head>
<body>
<div id="header">
<span>Cover Builder</span>
</div>
<div id="content">
<div class="block">
<input type="file" name="file" id="file" onchange="document.getElementById('img').src = window.URL.createObjectURL(this.files[0]); renewReflection();">
<label for="file" id="filelabel">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17">
<path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"></path>
</svg>
<span>Choose an image...</span>
</label>
</div>
<div class="block">
<div id="container">
<img src="placeholder.png" id="img" alt="Cover" />
<div id="reflection"></div>
</div>
</div>
<div class="block">
<h1>Spine Color</h1>
<div id="dc" class="col"></div>
<div id="palette"></div>
</div>
</div>
<div id="footer">
<a href="https://marvinscham.com/">Marvin Scham</a> • 2021
</div>
<script src="color-thief.js"></script>
<script src="script.js"></script>
</body>
</html>

BIN
placeholder.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 770 KiB

9
reflection.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 470 KiB

79
script.js Normal file
View File

@@ -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();

117
style.css Normal file
View File

@@ -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 */

9
style.css.map Normal file
View File

@@ -0,0 +1,9 @@
{
"version": 3,
"mappings": "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",
"sources": [
"style.scss"
],
"names": [],
"file": "style.css"
}

116
style.scss Normal file
View File

@@ -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;
}
}