better castle

This commit is contained in:
metacryst
2025-09-22 13:05:06 -05:00
parent 04f4155a19
commit a58632d983
10 changed files with 3293 additions and 114 deletions

View File

@@ -8,7 +8,7 @@
<style>
#items {
position: absolute;
top: 45vh;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
@@ -18,29 +18,6 @@
text-align: center; /* ensures text inside spans is centered */
}
a {
cursor: default;
text-decoration: underline;
text-underline-offset: 5px;
transition: background .02s, color .2s;
user-select: none;
padding: 4px;
border-radius: 5px;
display: inline-block; /* makes background and padding behave */
padding: 0.2em 0.5em; /* adds breathing room */
}
a:hover {
text-decoration: none;
background: var(--green);
color: var(--tan);
}
a:active {
background: var(--red); /* background color works now */
color: white; /* optional: change text color for contrast */
}
input {
background-color: transparent;
border: none;
@@ -78,8 +55,6 @@
width: 50vw
}
}
</style>
<script src="_/code/util.js"></script>
<script type="module">
@@ -91,9 +66,43 @@
<body>
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
<div id="items">
<input placeholder="email"></input>
<input id="email" placeholder="email"></input>
<br>
<input placeholder="password"></input>
<input id="password" placeholder="password"></input>
<br>
<p id="applicant-message" style="color: green; margin-left: 10px; display: inline-block; margin: 0px; margin-left: 20px; font-size: 1em"></p>
<br>
<div>
</div>
<button onclick="login()" style="background-color: rgb(193, 135, 29)">Sign In
<script>
async function login() {
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const messageEl = document.getElementById('applicant-message');
const res = await fetch('/api/login', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password }),
});
if (res.ok) {
const data = await res.text();
messageEl.style.color = "green"
messageEl.textContent = "Check your email for a login link.";
} else {
const error = await res.text();
console.log(error)
messageEl.style.color = "red"
messageEl.textContent = "Error: " + error;
}
}
</script>
</button>
</div>
</body>
</html>