173 lines
3.4 KiB
HTML
173 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="description" content="What is the secret third rule today?">
|
|
<title>third rule</title>
|
|
<style>
|
|
/* General Styles */
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
|
background-color: #36393f;
|
|
color: #dcddde;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
|
|
a {
|
|
color: #7289da;
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Main Content */
|
|
main {
|
|
width: 80%;
|
|
max-width: 800px;
|
|
background-color: #2f3136;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
main header {
|
|
font-size: 32px;
|
|
font-weight: bold;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
header h1 {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
main .content {
|
|
flex: 1;
|
|
padding: 20px;
|
|
background-color: #202225;
|
|
border-radius: 8px;
|
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.content p {
|
|
font-size: 120%;
|
|
}
|
|
|
|
/* Footer */
|
|
footer {
|
|
background-color: #2f3136;
|
|
color: #dcddde;
|
|
text-align: center;
|
|
padding: 10px 0;
|
|
border-top: 1px solid #202225;
|
|
}
|
|
/* From https://loading.io/css/ */
|
|
.lds-ellipsis,
|
|
.lds-ellipsis div {
|
|
box-sizing: border-box;
|
|
}
|
|
.lds-ellipsis {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
}
|
|
.lds-ellipsis div {
|
|
position: absolute;
|
|
top: 33.33333px;
|
|
width: 13.33333px;
|
|
height: 13.33333px;
|
|
border-radius: 50%;
|
|
background: currentColor;
|
|
animation-timing-function: cubic-bezier(0, 1, 1, 0);
|
|
}
|
|
.lds-ellipsis div:nth-child(1) {
|
|
left: 8px;
|
|
animation: lds-ellipsis1 0.6s infinite;
|
|
}
|
|
.lds-ellipsis div:nth-child(2) {
|
|
left: 8px;
|
|
animation: lds-ellipsis2 0.6s infinite;
|
|
}
|
|
.lds-ellipsis div:nth-child(3) {
|
|
left: 32px;
|
|
animation: lds-ellipsis2 0.6s infinite;
|
|
}
|
|
.lds-ellipsis div:nth-child(4) {
|
|
left: 56px;
|
|
animation: lds-ellipsis3 0.6s infinite;
|
|
}
|
|
@keyframes lds-ellipsis1 {
|
|
0% {
|
|
transform: scale(0);
|
|
}
|
|
100% {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
@keyframes lds-ellipsis3 {
|
|
0% {
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
transform: scale(0);
|
|
}
|
|
}
|
|
@keyframes lds-ellipsis2 {
|
|
0% {
|
|
transform: translate(0, 0);
|
|
}
|
|
100% {
|
|
transform: translate(24px, 0);
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<main><div id="error"></div>
|
|
<header>
|
|
<h1>The Secret Third Rule</h1>
|
|
</header>
|
|
<div class="content" id="rule">
|
|
<p>Generating</p><div class="lds-ellipsis"><div></div><div></div><div></div><div></div></div>
|
|
</div>
|
|
|
|
<footer>
|
|
made by <a href="https://arch.dog" target="_blank">arch</a> |
|
|
<a href="https://bird.gmem.ca/@thirdrule" rel="me">activitypub</a>
|
|
</footer>
|
|
</main>
|
|
|
|
<script>
|
|
|
|
const getrule = () => {
|
|
// Fetch the content of the dynamic page
|
|
fetch("/rule.json")
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data) {
|
|
// Inject the dynamic content into the static page
|
|
document.getElementById("rule").innerHTML = `<p>${data.response}</p>`;
|
|
}
|
|
})
|
|
.catch(error => console.error('Error fetching rule!:', error));
|
|
}
|
|
getrule();
|
|
</script>
|
|
</body>
|
|
</html>
|