wolfcountBot/views/donate.ejs

116 lines
5.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>Wolfcount donate</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;
}
/* Keyframes */
@keyframes colorchange {
from {color: aqua;}
to {color: blue}
}
h3, .translate-box {background-image: linear-gradient(to right, #c2c2c2, #6b6a6a);}
.wolfnav {margin-right:6px;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
.wolfnav a {color:black; animation-name: colorchange; animation-duration: 3s; animation-iteration-count: 3;}
.wolfnav a:nth-child(1) {color:green}
.wolfnav a:nth-child(3) {color:blue}
.wolf-img img{height:760px;max-width: 100%;}
.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;}
/* Extra Large devices */
/* @media (min-width: 1200px) { .wolf-img img{height:633px;max-width: 90%;margin: auto 40px;} } */
/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) { .wolf-img img{height:570px;max-width: 90%;margin: auto 40px;} }
/* Galaxy A13 (and all devices sharing the same width)*/
@media (min-width: 718px) and (max-width: 720px) { .wolf-footer {padding: 10px;margin-top: 28.3vh;} }
/* 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) { .wolf-img img{height:400px;max-width: 90%;margin: auto 25px;} }
/* Small devices (landscape phones, 321px and up) */
@media (min-width: 321px) and (max-width: 375px) { .wolf-img img{height:380px;max-width: 90%;margin: auto 25px;} }
/* Small devices (landscape phones, 320px and under) */
@media (max-width: 320px) { .translate-box{ max-width: 84%;margin-left: 27px;margin-bottom: 10px; } .wolf-img img{height:330px;max-width: 90%;margin: auto 20px;} }
/* Custom devices/others */
/* Custom for up to 1400px */
/* @media (min-width: 1201px) and (max-width:1400px) { .wolfcounting {margin: 26% auto !important;} } */
@media (min-width:992px) and (max-width: 1024px) { .wolf-img img{height:633px;max-width: 90%;margin: auto 40px;} }
/* Surface Duo and Galaxy Fold (Extended)*/
@media (min-width:717px) and (max-width:720px) { .wolf-img img{height:530px;max-width: 90%;margin: auto 40px;} }
</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>
<div class="container" style="padding: 10px">
<nav class="wolfnav">
<h3 style="box-shadow: 4px 6px; border: 3px solid grey; padding: 0.2vh 5px;">
<a href="/">Back to count</a>
<a href="/info">Some info</a>
<a href="/privacy">Privacy Policy</a>
<a href="/tos">TOS</a>
</h3>
</nav>
<div class="img-fluid wolf-img"><a href="https://imgur.com/zltFwjV"><img src="https://i.imgur.com/zltFwjV.jpg" title="source: imgur.com" /></a></div>
</div>
<div class="border container">
<h1>Want to donate??</h1>
<p>Please use <a href="https://ssh.surf/view/donate/">this link</a> to directly donate to the hoster of the server where this bot is hosted on</p>
<p>If you don't have a creditcard, you can use <a href="https://ko-fi.com/sshsurf">this link</a> to donate with PayPal.</p>
<p>Payments on both links will get used to uphold the service :)</p>
</div><br>
<footer class="container-fluid wolf-footer">
<div class="row">
<div style="box-shadow: 4px 6px; border: 3px solid grey; padding: 0.2vh 5px;" class="translate-box col-sm-auto">
<h3>Translate this page:</h3>
<div id="google_translate_element"></div>
</div>
<div style="padding: 0 28px" class="col-sm-auto wolf-copy">
<h3 style="box-shadow: 4px 6px; border: 3px solid grey; padding: 0.2vh 5px;">©<script>document.write(new Date().getFullYear())</script> Ultimateplayer1999 (ultimateplayer#0369)</h3>
</div>
</div>
</footer>
<!-- GTRANSLATE -->
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<!-- 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>