133 lines
3.9 KiB
Plaintext
133 lines
3.9 KiB
Plaintext
<!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="icon" sizes="192x192" href="/wolf.png">
|
|
<title><%= basecount %> Wolfs</title>
|
|
|
|
<style>
|
|
body {
|
|
background-color: #c2c2c2 !important;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
}
|
|
|
|
.wolf {
|
|
width: 2em;
|
|
height: 2em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
h1 {
|
|
background-image: linear-gradient(to right, #c2c2c2, #6b6a6a);
|
|
animation: wiggle 4s linear infinite;
|
|
}
|
|
|
|
/* Keyframes */
|
|
@keyframes wiggle {
|
|
0%, 7% {
|
|
transform: rotateZ(0);
|
|
}
|
|
15% {
|
|
transform: rotateZ(-25deg);
|
|
}
|
|
20% {
|
|
transform: rotateZ(20deg);
|
|
}
|
|
25% {
|
|
transform: rotateZ(-20deg);
|
|
}
|
|
30% {
|
|
transform: rotateZ(10deg);
|
|
}
|
|
35% {
|
|
transform: rotateZ(-10deg);
|
|
}
|
|
40% {
|
|
transform: rotateZ(6deg);
|
|
}
|
|
45% {
|
|
transform: rotateZ(-4deg);
|
|
}
|
|
50%,100% {
|
|
transform: rotateZ(0deg);
|
|
}
|
|
}
|
|
|
|
.wolfcounting {
|
|
padding: 20% 0;
|
|
}
|
|
|
|
@media screen and (max-width: 1024px) {
|
|
.wolfcounting {
|
|
padding: 30% 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 768px) {
|
|
.wolfcounting {
|
|
padding: 38% 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 717px) {
|
|
.wolfcounting {
|
|
padding: 25% 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 425px) {
|
|
.wolfcounting {
|
|
padding: 72% 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
|
|
</head>
|
|
<body>
|
|
<!-- <h1><span>${basecount} wolfs</span><img class="wolf" src="images/wolf.png"></h1> -->
|
|
<div class="wolfcounting"><h1 style="box-shadow: 4px 6px; border: 3px solid grey; padding: 0.2vh 5px;"><span style="text-shadow: 2px 1px grey;"><%= basecount %> wolfs</span><img class="wolf" src="/wolf.png"></h1></div>
|
|
|
|
<!-- Bootstrap JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
|
|
</body>
|
|
</html>
|
|
|
|
|
|
<!-- <head>
|
|
<title>${basecount} Wolfs</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta name="theme-color" content="#c16a4f">
|
|
<link rel="icon" sizes="192x192" href="../site/assets/wolf.png">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: 'Courier New', Courier, monospace;
|
|
}
|
|
|
|
.wolf {
|
|
width: 2em;
|
|
height: 2em;
|
|
vertical-align: middle;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<h1><span>${basecount} wolfs</span><img class="wolf" src="../site/assets/wolf.png"></h1>
|
|
</body> --> |