first commit
This commit is contained in:
1
color-thief.js
Normal file
1
color-thief.js
Normal file
File diff suppressed because one or more lines are too long
BIN
favicon.png
Normal file
BIN
favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
43
main.html
Normal file
43
main.html
Normal 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
BIN
placeholder.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 770 KiB |
9
reflection.svg
Normal file
9
reflection.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 470 KiB |
79
script.js
Normal file
79
script.js
Normal 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
117
style.css
Normal 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
9
style.css.map
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "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",
|
||||||
|
"sources": [
|
||||||
|
"style.scss"
|
||||||
|
],
|
||||||
|
"names": [],
|
||||||
|
"file": "style.css"
|
||||||
|
}
|
||||||
116
style.scss
Normal file
116
style.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user