better castle
This commit is contained in:
3094
ui/_/images/castle-dark3.svg
Normal file
3094
ui/_/images/castle-dark3.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 1.6 MiB |
@@ -20,12 +20,12 @@
|
||||
}}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.main-image {
|
||||
content:url("_/images/castle-dark2.svg");
|
||||
height: 120vmin; bottom: -17vmin; left: 31vw;
|
||||
content:url("_/images/castle-dark3.svg");
|
||||
height: 1000px; bottom: -34vmin; left: 26vw;
|
||||
}}
|
||||
@media (prefers-color-scheme: dark) and (max-width: 600px) {
|
||||
.main-image {
|
||||
max-width: 195vw; height: 80vh; bottom: -17vmin; left: 0vw;
|
||||
max-width: 195vw; height: 80vh; left: 0vw;
|
||||
}}
|
||||
</style>
|
||||
<script src="_/code/util.js"></script>
|
||||
@@ -44,6 +44,15 @@
|
||||
<span>|</span>
|
||||
<a href="signin">sign in</a>
|
||||
</div>
|
||||
|
||||
<div style="display: flex; flex-direction: column; top: 110vh; left: 50vw; transform: translateX(-50%); align-items: left; position: absolute;">
|
||||
<h1 style="font-family: Canterbury; font-size: 4rem; margin-left: auto">A Classical Christian Society</h1>
|
||||
<p>Hyperia is a society for people who want to uphold European tradition and Christian values.</p>
|
||||
<p>Inspired by the Classical Christian schooling movement that began in the 1990s, Hyperia aims to create a similar space for adults.</p>
|
||||
<div style="height: 20vh"></div>
|
||||
</div>
|
||||
|
||||
|
||||
<style>
|
||||
.link, a {
|
||||
transition: background-color 0.3s ease, scale 0.3s;
|
||||
|
||||
@@ -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>
|
||||
@@ -1,4 +1,8 @@
|
||||
See https://github.com/return-to-the-land/go-backend for instructions.
|
||||
|
||||
# Style Guidelines
|
||||
- Font size is defined in the index.html. Only use rem as a unit.
|
||||
- Font size is defined in the index.html. Only use rem as a unit.
|
||||
|
||||
# Documentation
|
||||
```go install golang.org/x/tools/cmd/godoc@latest```
|
||||
```$HOME/go/bin/godoc -http=:6060``` (to run on Mac)
|
||||
Reference in New Issue
Block a user