177 lines
No EOL
7.2 KiB
HTML
177 lines
No EOL
7.2 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">
|
|
<title>Evangelion Episode Generator</title>
|
|
<link rel="stylesheet" href="index.css">
|
|
</head>
|
|
|
|
<body class="flow-0">
|
|
<main>
|
|
<article class="flow-0">
|
|
<h1>Evangelion Episode Generator</h1>
|
|
<p><strong>Create your own Evangelion title!</strong></p>
|
|
<p><em>Please note this is a complete beta that probably breaks and lacks options.</em></p>
|
|
<h2>Please fill this</h2>
|
|
<form action="" class="flow-0">
|
|
<div class="label-input-flow">
|
|
<label for="title">Title of your show</label>
|
|
<input type="text" name="title" id="title" value="Neon Genesis Evangelion">
|
|
</div>
|
|
<div class="label-input-flow">
|
|
<label for="episode">Episode number</label>
|
|
<input type="text" name="episode" id="episode" value="Episode: 1">
|
|
</div>
|
|
<div class="label-input-flow">
|
|
<label for="episodeName">Name of the episode</label>
|
|
<input type="text" name="episodeName" id="episodeName" value="Get in the robot Shinji">
|
|
</div>
|
|
<button id="generate">Generate</button>
|
|
<br>
|
|
<small>Click on the image to open it on a new page and save it.</small>
|
|
</form>
|
|
</article>
|
|
|
|
<section aria-label="Generated episode card" id="area">
|
|
|
|
</section>
|
|
|
|
</main>
|
|
<footer>
|
|
<svg width="0" height="0">
|
|
<filter id="chromatic">
|
|
<feColorMatrix type="matrix" result="red_" values="4 0 0 0 0
|
|
0 0 0 0 0
|
|
0 0 0 0 0
|
|
0 0 0 1 0" />
|
|
<feOffset in="red_" dx="1" dy="0" result="red" />
|
|
<feColorMatrix type="matrix" in="SourceGraphic" result="blue_" values="0 0 0 0 0
|
|
0 3 0 0 0
|
|
0 0 10 0 0
|
|
0 0 0 1 0" />
|
|
<feOffset in="blue_" dx="-1" dy="0" result="blue" />
|
|
<feBlend mode="screen" in="red" in2="blue" />
|
|
</filter>
|
|
</svg>
|
|
</footer>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function (event) {
|
|
|
|
document.querySelector('#generate').addEventListener('click', function (e) {
|
|
e.preventDefault();
|
|
const oldImage = document.querySelector('img');
|
|
if (oldImage) {
|
|
oldImage.remove();
|
|
}
|
|
ctx = document.createElement('canvas');
|
|
ctx.setAttribute("width", 640);
|
|
ctx.setAttribute("height", 480);
|
|
ctx.setAttribute('id', "canvas");
|
|
|
|
|
|
drawTitle(ctx.getContext('2d'));
|
|
drawEpisode(ctx.getContext('2d'));
|
|
drawEpisodeName(ctx.getContext('2d'));
|
|
|
|
const image = convertCanvasToImage(ctx);
|
|
|
|
const area = document.querySelector("#area");
|
|
area.appendChild(image);
|
|
|
|
});
|
|
|
|
function drawTitle(ctx) {
|
|
const title = document.querySelector("#title").value;
|
|
|
|
const x = 20;
|
|
const y = 80;
|
|
const lineheight = 60;
|
|
const fontSize = 60;
|
|
const split = title.split(' ');
|
|
for (let i = 0; i < split.length; i++) {
|
|
console.log(i, split.length)
|
|
if (i + 1 === split.length) {
|
|
ctx.font = `80px "Century-Schoolbook"`;
|
|
ctx.fillStyle = 'cyan';
|
|
ctx.fillText(split[i].toUpperCase(), x + 0.7, y + (i * lineheight) + 15);
|
|
ctx.fillStyle = 'magenta';
|
|
ctx.fillText(split[i].toUpperCase(), x - 0.7, y + (i * lineheight) + 15);
|
|
ctx.fillStyle = 'white';
|
|
ctx.fillText(split[i].toUpperCase(), x, y + (i * lineheight) + 15);
|
|
|
|
ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
|
|
ctx.rotate(1 / 360);
|
|
ctx.fillText(split[i].toUpperCase(), x + 1, y + (i * lineheight) + 15 -1);
|
|
ctx.rotate(-1 / 360);
|
|
ctx.fillText(split[i].toUpperCase(), x - 1, y + (i * lineheight) + 15 - 1);
|
|
} else {
|
|
ctx.font = `60px "Century-Schoolbook"`;
|
|
ctx.fillStyle = 'cyan';
|
|
ctx.fillText(split[i].toUpperCase(), x + 0.7, y + (i * lineheight));
|
|
ctx.fillStyle = 'magenta';
|
|
ctx.fillText(split[i].toUpperCase(), x - 0.7, y + (i * lineheight));
|
|
ctx.fillStyle = 'white';
|
|
ctx.fillText(split[i].toUpperCase(), x, y + (i * lineheight));
|
|
|
|
ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
|
|
ctx.rotate(1 / 360);
|
|
ctx.fillText(split[i].toUpperCase(), x + 2, y + (i * lineheight) +1);
|
|
ctx.rotate(-1 / 360);
|
|
ctx.fillText(split[i].toUpperCase(), x - 2, y + (i * lineheight) -1);
|
|
}
|
|
}
|
|
return ctx
|
|
}
|
|
|
|
function drawEpisode(ctx) {
|
|
const title = document.querySelector("#episode").value;
|
|
ctx.font = '50px "Helvetica-Condensed-Bold"';
|
|
ctx.fillStyle = 'cyan';
|
|
ctx.fillText(title.toUpperCase(), 21, 360);
|
|
ctx.fillStyle = 'magenta';
|
|
ctx.fillText(title.toUpperCase(), 19, 360);
|
|
ctx.fillStyle = 'white';
|
|
ctx.fillText(title.toUpperCase(), 20, 360);
|
|
|
|
ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
|
|
ctx.rotate(1 / 360);
|
|
ctx.fillText(title.toUpperCase(), 21, 361);
|
|
ctx.rotate(-1 / 360);
|
|
ctx.fillText(title.toUpperCase(), 19, 359);
|
|
|
|
return ctx
|
|
}
|
|
|
|
function drawEpisodeName(ctx) {
|
|
const title = document.querySelector("#episodeName").value;
|
|
ctx.font = '40px "TimesNRCondensedBold"';
|
|
ctx.textAlign = "right";
|
|
ctx.fillStyle = 'cyan';
|
|
ctx.fillText(title, 620.7, 450);
|
|
ctx.fillStyle = 'magenta';
|
|
ctx.fillText(title, 619.3, 450);
|
|
ctx.fillStyle = 'white';
|
|
ctx.fillText(title, 620, 450);
|
|
|
|
ctx.fillStyle = "rgba(255, 255, 255, 0.3)";
|
|
ctx.rotate(0.3 / 360);
|
|
ctx.fillText(title, 621, 451);
|
|
ctx.rotate(-0.6 / 360);
|
|
ctx.fillText(title, 619, 449);
|
|
return ctx
|
|
}
|
|
|
|
function convertCanvasToImage(ctx) {
|
|
let image = new Image();
|
|
image.src = ctx.toDataURL('image/jpeg', 1.0);
|
|
image.setAttribute('onClick', "window.open(this.src)")
|
|
return image;
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |