d1512a1f79
* Ensure content flows and stays centered on small screens Fixes #18 * Do not overflow image, instead resize with page * update CHANGELOG Signed-off-by: Xe Iaso <me@xeiaso.net> --------- Signed-off-by: Xe Iaso <me@xeiaso.net> Co-authored-by: Xe Iaso <me@xeiaso.net>
210 lines
4.3 KiB
Text
210 lines
4.3 KiB
Text
package main
|
|
|
|
import (
|
|
"github.com/TecharoHQ/anubis"
|
|
"github.com/TecharoHQ/anubis/xess"
|
|
)
|
|
|
|
templ base(title string, body templ.Component) {
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>{ title }</title>
|
|
<link rel="stylesheet" href={ xess.URL }/>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
|
<style>
|
|
body,
|
|
html {
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.centered-div {
|
|
text-align: center;
|
|
}
|
|
|
|
.lds-roller,
|
|
.lds-roller div,
|
|
.lds-roller div:after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.lds-roller {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
|
|
.lds-roller div {
|
|
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
|
|
transform-origin: 40px 40px;
|
|
}
|
|
|
|
.lds-roller div:after {
|
|
content: " ";
|
|
display: block;
|
|
position: absolute;
|
|
width: 7.2px;
|
|
height: 7.2px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
margin: -3.6px 0 0 -3.6px;
|
|
}
|
|
|
|
.lds-roller div:nth-child(1) {
|
|
animation-delay: -0.036s;
|
|
}
|
|
|
|
.lds-roller div:nth-child(1):after {
|
|
top: 62.62742px;
|
|
left: 62.62742px;
|
|
}
|
|
|
|
.lds-roller div:nth-child(2) {
|
|
animation-delay: -0.072s;
|
|
}
|
|
|
|
.lds-roller div:nth-child(2):after {
|
|
top: 67.71281px;
|
|
left: 56px;
|
|
}
|
|
|
|
.lds-roller div:nth-child(3) {
|
|
animation-delay: -0.108s;
|
|
}
|
|
|
|
.lds-roller div:nth-child(3):after {
|
|
top: 70.90963px;
|
|
left: 48.28221px;
|
|
}
|
|
|
|
.lds-roller div:nth-child(4) {
|
|
animation-delay: -0.144s;
|
|
}
|
|
|
|
.lds-roller div:nth-child(4):after {
|
|
top: 72px;
|
|
left: 40px;
|
|
}
|
|
|
|
.lds-roller div:nth-child(5) {
|
|
animation-delay: -0.18s;
|
|
}
|
|
|
|
.lds-roller div:nth-child(5):after {
|
|
top: 70.90963px;
|
|
left: 31.71779px;
|
|
}
|
|
|
|
.lds-roller div:nth-child(6) {
|
|
animation-delay: -0.216s;
|
|
}
|
|
|
|
.lds-roller div:nth-child(6):after {
|
|
top: 67.71281px;
|
|
left: 24px;
|
|
}
|
|
|
|
.lds-roller div:nth-child(7) {
|
|
animation-delay: -0.252s;
|
|
}
|
|
|
|
.lds-roller div:nth-child(7):after {
|
|
top: 62.62742px;
|
|
left: 17.37258px;
|
|
}
|
|
|
|
.lds-roller div:nth-child(8) {
|
|
animation-delay: -0.288s;
|
|
}
|
|
|
|
.lds-roller div:nth-child(8):after {
|
|
top: 56px;
|
|
left: 12.28719px;
|
|
}
|
|
|
|
@keyframes lds-roller {
|
|
0% {
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|
|
@templ.JSONScript("anubis_version", anubis.Version)
|
|
</head>
|
|
<body id="top">
|
|
<main>
|
|
<center>
|
|
<h1 id="title" class=".centered-div">{ title }</h1>
|
|
</center>
|
|
@body
|
|
<footer>
|
|
<center>
|
|
<p>
|
|
Protected by <a href="https://github.com/TecharoHQ/anubis">Anubis</a> from <a
|
|
href="https://techaro.lol"
|
|
>Techaro</a>.
|
|
</p>
|
|
</center>
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|
|
}
|
|
|
|
templ index() {
|
|
<div class="centered-div">
|
|
<img
|
|
id="image"
|
|
style="width:100%;max-width:256px;"
|
|
src={ "/.within.website/x/cmd/anubis/static/img/pensive.webp?cacheBuster=" +
|
|
anubis.Version }
|
|
/>
|
|
<img
|
|
style="display:none;"
|
|
style="width:100%;max-width:256px;"
|
|
src={ "/.within.website/x/cmd/anubis/static/img/happy.webp?cacheBuster=" +
|
|
anubis.Version }
|
|
/>
|
|
<p id="status">Loading...</p>
|
|
<script async type="module" src={ "/.within.website/x/cmd/anubis/static/js/main.mjs?cacheBuster=" + anubis.Version }></script>
|
|
<div id="spinner" class="lds-roller">
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
<div></div>
|
|
</div>
|
|
<noscript>
|
|
<p>
|
|
Sadly, you must enable JavaScript to get past this challenge. This is required because AI companies have changed
|
|
the social contract around how website hosting works. A no-JS solution is a work-in-progress.
|
|
</p>
|
|
</noscript>
|
|
<div id="testarea"></div>
|
|
</div>
|
|
}
|
|
|
|
templ errorPage(message string) {
|
|
<div class="centered-div">
|
|
<img
|
|
id="image"
|
|
style="width:100%;max-width:256px;"
|
|
src={ "/.within.website/x/cmd/anubis/static/img/sad.webp?cacheBuster=" + anubis.Version }
|
|
/>
|
|
<p>{ message }.</p>
|
|
<button onClick="window.location.reload();">Try again</button>
|
|
<p><a href="/">Go home</a></p>
|
|
</div>
|
|
}
|