sam/Hyperia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

shtuff

Browse Source
This commit is contained in:
metacryst
2025-09-12 21:09:41 -05:00
parent eff0c160a5
commit ffb4d1ef52
11 changed files with 214 additions and 735 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
ui/public/index.html
View File

@@ -16,7 +16,7 @@
#items {
position: absolute;
top: 45vh;
top: 47vh;
left: 50vw;
transform: translate(-50%, -50%);
@@ -36,6 +36,7 @@
text-underline-offset: 5px;
transition: background .02s, color .2s;
user-select: none;
color: black;
display: inline-block; /* makes background and padding behave */
padding: 0.2em 0.5em; /* adds breathing room */
@@ -51,6 +52,12 @@
background: var(--red); /* background color works now */
color: white; /* optional: change text color for contrast */
}
@media (max-width: 600px) {
#title {
font-size: 30vw
}
}
</style>
<script src="_/code/util.js"></script>
<script type="module">
@@ -66,11 +73,12 @@
<img src="_/icons/left_plant.svg" style="position: absolute; left: 25%; top: 23vh; width: 70%; transform: translateX(-50%)">
<img src="_/icons/right_plant.svg" style="position: absolute; left: 75%; top: 23vh; width: 70%; transform: translateX(-50%)">
<div style="height: 2vh"></div>
<span style="font-family: Canterbury; color: black; font-size: 5vh;">A <br>Society</span>
<span style="font-family: Canterbury; color: black; font-size: 4.5vh;">A <br>Classical <br> Christian <br> Society</span>
<div style="height: 2vh"></div>
<div style="color: black; font-size: 2.2vh; z-index: 1; cursor: default;">
<a>ABOUT</a> | <a>SERVICES</a> | <a>JOIN</a>
<div style="color: black; font-size: 2vh; z-index: 1; cursor: default;">
<a href="signin">SIGN IN</a>
<a href="join">JOIN</a>
</div>
</div>
</body>
</html>
</html>

77
ui/public/pages/join.html Normal file
View File

@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<link rel="stylesheet" href="index.css">
<style>
:root {
--green: #0B5538;
--tan: #FFDFB4;
--red: #BC1C02;
--brown: #c6a476
}
#items {
position: absolute;
top: 45vh;
left: 50vw;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center; /* centers children horizontally */
text-align: center; /* ensures text inside spans is centered */
}
#title {
font-size: 10vh;
position: absolute;
left: 2vw;
top: 2vh;
}
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 */
}
</style>
<script src="_/code/util.js"></script>
<script type="module">
import PageFooter from "./components/Footer.js"
import NavBar from "./components/NavBar.js"
import SideBar from "./components/SideBar.js"
</script>
</head>
<body>
<span id="title" style="font-family: Canterbury; color: var(--red); margin-bottom: 10vh">hyperia</span>
<div id="items">
</div>
<script>
Array.from($("a*")).forEach((link) => {
link.addEventListener("click", () => window.history.pushState("", "", link.innerHTML.toLowerCase()))
})
</script>
</body>
</html>

122
ui/public/pages/signin.html Normal file
View File

@@ -0,0 +1,122 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<link rel="stylesheet" href="index.css">
<style>
:root {
--green: #0B5538;
--tan: #FFDFB4;
--red: #BC1C02;
--brown: #c6a476
}
#items {
position: absolute;
top: 45vh;
left: 50vw;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center; /* centers children horizontally */
text-align: center; /* ensures text inside spans is centered */
}
#title {
font-size: 10vh;
position: absolute;
left: 2vw;
top: 2vh;
}
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;
border-radius: 5px;
border-top: 2px solid var(--green);
border-bottom: 2px solid var(--green);
height: 2em;
width: 15vw;
padding: 0.2em;
transition: border .2s, padding .2s;
}
input:focus {
outline: none;
padding: 0.4em;
border-top: 2px solid var(--red);
border-bottom: 2px solid var(--red);
}
input:focus::placeholder {
color: var(--red)
}
input::placeholder {
color: var(--green);
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: #c7a67b !important;
}
@media (max-width: 600px) {
input {
width: 50vw
}
}
</style>
<script src="_/code/util.js"></script>
<script type="module">
import PageFooter from "./components/Footer.js"
import NavBar from "./components/NavBar.js"
import SideBar from "./components/SideBar.js"
</script>
</head>
<body>
<span onclick="window.location = '/'"id="title" style="cursor: default; font-family: Canterbury; color: var(--red); margin-bottom: 10vh">hyperia</span>
<div id="items">
<input placeholder="email"></input>
<br>
<input placeholder="password"></input>
</div>
<script>
Array.from($("a*")).forEach((link) => {
link.addEventListener("click", () => window.history.pushState("", "", link.innerHTML.toLowerCase()))
})
</script>
</body>
</html>