48 lines
2.0 KiB
HTML
48 lines
2.0 KiB
HTML
<!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 onresize="renew();">
|
|
<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]); renew();">
|
|
<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">
|
|
<h1>Cover</h1>
|
|
<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 id="customcol">
|
|
<label for="custom">Custom Hex Value</label>
|
|
<input type="text" name="custom" id="custom" placeholder="#000000" pattern="#[0-9A-Fa-f]{6}">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="footer">
|
|
<a href="https://marvinscham.com/" rel="noreferrer noopener">Marvin Scham</a> • 2021
|
|
</div>
|
|
<script src="color-thief.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
</html> |