95 lines
5.1 KiB
Plaintext
95 lines
5.1 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;font-family: 'Courier New', Courier, monospace;}
|
|
|
|
.wolf {width: 2em;height: 2em;vertical-align: middle;}
|
|
|
|
h1, h3 {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);}
|
|
}
|
|
|
|
@keyframes colorchange {
|
|
from {color: aqua;}
|
|
to {color: blue}
|
|
}
|
|
|
|
/* .wolfcounting {margin: 25% auto;background-color: #c2c2c2 !important;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;animation-name: wiggle; animation-duration: 3s;animation-iteration-count: 3;animation-delay: 3s;} */
|
|
.wolfcounting {margin: 25% auto;background-color: #c2c2c2 !important;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;animation-name: colorchange; animation-duration: 3s;animation-iteration-count: 4;}
|
|
.wolfcounter-other {margin-right:6px;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
|
|
.wolfcounter-other a {color:black; animation-name: colorchange; animation-duration: 3s; animation-iteration-count: 3;animation-delay: 3s;}
|
|
.wolfcounter-other a:nth-child(1) {color:green}
|
|
.wolfcounter-other a:nth-child(3) {color:blue}
|
|
.wolfpadding{padding: 0.2vh 5px;}
|
|
|
|
.wolf-footer {margin-right:6px;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background-image: linear-gradient(to right, aquamarine, blue);padding: 20px;margin-top:-29px;}
|
|
|
|
/* Custom for up to 1400px */
|
|
@media (min-width: 1201px) and (max-width:1400px) { .wolfcounting {margin: 26% auto !important;} }
|
|
|
|
/* Extra Large devices */
|
|
@media (min-width: 1200px) { .wolfcounting {margin: 20% auto;} }
|
|
|
|
/* Medium devices (tablets, 768px and up) */
|
|
@media (min-width: 768px) and (max-width: 991.98px) { .wolfcounting {margin: 35% auto;} }
|
|
|
|
/* Galaxy A13 (and all devices sharing the same width)*/
|
|
@media (min-width: 718px) and (max-width: 720px) { .wolfcounting {margin: 90% auto;}.h1, h1 {font-size: .51rem !important;} .wolfpadding{padding: 6.1vh 5px;} .wolf-copy h3 {font-size: .75rem;} }
|
|
|
|
/* Galaxy Fold (extended) */
|
|
@media (max-width: 717px) { .wolfcounting {margin: 25% auto;} }
|
|
|
|
/* Small devices (landscape phones, 376px and up) */
|
|
@media (min-width: 376px) and (max-width: 425px) { .wolfcounting {margin: 70% auto;} }
|
|
|
|
/* Small devices (landscape phones, 321px and up) */
|
|
@media (min-width: 321px) and (max-width: 375px) { .wolfcounting {margin: 78% auto;} }
|
|
|
|
/* Small devices (landscape phones, 320px and under) */
|
|
@media (max-width: 320px) { .wolfcounting {margin: 90% auto;} }
|
|
|
|
</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>
|
|
<nav>
|
|
<div class="wolfcounter-other">
|
|
<h3 style="box-shadow: 4px 6px; border: 3px solid grey; padding: 0.vh 5px;">
|
|
<a href="/info">Some info</a>
|
|
<a href="/privacy">Privacy Policy</a>
|
|
<a href="/tos">TOS</a>
|
|
</h3>
|
|
</div>
|
|
|
|
</nav>
|
|
<div class="wolfcounting"><h1 class="wolfpadding" style="box-shadow: 4px 6px; border: 3px solid grey;"><span style="text-shadow: 2px 1px grey;"><%= basecount %> wolfs</span><img class="wolf" src="/wolf.png"></h1></div>
|
|
|
|
<footer class="wolf-footer container-fluid">
|
|
<div style="padding: 0 28px"><h3 style="box-shadow: 4px 6px; border: 3px solid grey; padding: 1.2vh 5px;" class="wolf-copy">©<script>document.write(new Date().getFullYear())</script> Ultimateplayer1999 (ultimateplayer#0369)</h3></div>
|
|
</footer>
|
|
|
|
<!-- 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> |