<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>ð Happy New Year ~ ð</title>
<style>
html,
body {
margin: 0;
height: 100%;
}
body {
background-color: #111;
}
.fireworks-canvas,
.word-container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.word-container {
display: flex;
justify-content: center;
align-items: center;
pointer-events: none;
}
.word-canvas {
will-change: transform;
}
</style>
</head>
<body>
<canvas id="fireworks" class="fireworks-canvas"></canvas>
<div class="word-container">
<canvas id="word" class="word-canvas"></canvas>
</div>
<script src="./constants.js"></script>
<script src="./utils.js"></script>
<script src="./imageSrc.js"></script>
<script src="./tinycolor.js"></script>
<script src="./fireworks.js"></script>
<script src="./word.js"></script>
<script>
{
const dom = document.querySelector("#fireworks");
const options = {};
const fireworks = new Fireworks(dom, options);
fireworks.start();
dom.addEventListener("click", (event) => {
fireworks.createFirework(event.offsetX, event.offsetY);
});
}
{
const dom = document.querySelector("#word");
const image = imageSrc;
const word = new Word(dom, image);
word.start();
}
</script>
</body>
</html>
