mirror of
https://github.com/G2-Games/website.git
synced 2025-04-19 18:02:54 -05:00
153 lines
4.1 KiB
HTML
153 lines
4.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<script src="color-thief.umd.js"></script>
|
|
<title>Moth of the Month</title>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Arsenal+SC:ital,wght@0,400;0,700;1,400;1,700&family=Radio+Canada:ital,wght@0,300..700;1,300..700&display=swap');
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
max-width: 800px;
|
|
margin: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #2c2d41;
|
|
color: #cdd6f4;
|
|
padding: 10px;
|
|
animation-name: fadein;
|
|
animation-iteration-count: 1;
|
|
animation-duration: 1s;
|
|
}
|
|
|
|
h1 {
|
|
font-family: "Arsenal SC", sans-serif;
|
|
font-size: 36pt;
|
|
margin: 10px;
|
|
}
|
|
|
|
h2 {
|
|
font-family: "Arsenal SC", sans-serif;
|
|
font-size: 24pt;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
hr {
|
|
margin: 10px;
|
|
color: #6c7086;
|
|
}
|
|
|
|
main {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
img {
|
|
width: 90%;
|
|
margin: auto;
|
|
/*border-radius: 10px*/;
|
|
border: 4px solid #7f849c;
|
|
box-shadow: 10px 9px #7f849c;
|
|
}
|
|
|
|
footer {
|
|
padding: 10px;
|
|
}
|
|
|
|
p {
|
|
font-family: "Radio Canada", serif;
|
|
font-size: 14pt;
|
|
color: #bac2de;
|
|
}
|
|
|
|
a:link {
|
|
color: #f38ba8;
|
|
}
|
|
|
|
a:visited {
|
|
color: #f2cdcd;
|
|
}
|
|
|
|
a:hover {
|
|
color: #f9e2af;
|
|
}
|
|
|
|
.learnmore {
|
|
font-size: 1.2em;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
#loading {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #2c2d41;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
#loading h1 {
|
|
position: fixed;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
font-family: sans-serif;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="loading">
|
|
<h1>Loading...</h1>
|
|
</div>
|
|
<header style="opacity:0;">
|
|
<h1>Moth of the Month</h1>
|
|
</header>
|
|
<main style="opacity:0;">
|
|
<img src="moth1.jpg" />
|
|
<h2>Japanese Silkmoth</h2>
|
|
</main>
|
|
<footer style="opacity:0;">
|
|
<p>
|
|
<i>Antheraea yamamai</i>, the Japanese silk moth or Japanese oak silkmoth is a moth of the family Saturniidae. It is endemic to east Asia, but has been imported to Europe for tussar silk production and is now found in southeastern Europe, mainly in Austria, northeastern Italy, and the Balkans. It seems to be spreading north and a population has been reported near Deggendorf and Passau in Germany. The species was first described by Félix Édouard Guérin-Méneville in 1861. It has been hybridized artificially with Antheraea polyphemus of North America.
|
|
</p>
|
|
<p class="learnmore"> — <a href="https://en.wikipedia.org/wiki/Antheraea_yamamai">Learn More</a></p>
|
|
</footer>
|
|
</body>
|
|
<script>
|
|
const colorThief = new ColorThief();
|
|
const img = document.querySelector('img');
|
|
const load = document.getElementById('loading');
|
|
|
|
const header = document.querySelector('header');
|
|
const main = document.querySelector('main');
|
|
const footer = document.querySelector('footer');
|
|
|
|
img.addEventListener('load', function() {
|
|
color = colorThief.getColor(img);
|
|
console.log(color);
|
|
|
|
img.style.boxShadow = "0px 0px 10px 5px rgb(" + color + ")";
|
|
|
|
load.style.display = "none";
|
|
header.style.animation = "fadein 1s 1 alternate forwards";
|
|
main.style.animation = "fadein 1s 1 alternate forwards";
|
|
footer.style.animation = "fadein 1s 1 alternate forwards";
|
|
});
|
|
</script>
|
|
</html>
|