signins
This commit is contained in:
metacryst
@@ -34,6 +34,14 @@
|
||||
import NavBar from "./components/NavBar.js"
|
||||
import SideBar from "./components/SideBar.js"
|
||||
</script>
|
||||
<script>
|
||||
window.addEventListener('load', () => {
|
||||
if (window.location.search) {
|
||||
// Replace the URL with the clean path (e.g., '/')
|
||||
window.history.replaceState(null, '', '/');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<span id="title" class="link" onclick='window.location.href="/"'>hyperia
|
||||
@@ -45,12 +53,61 @@
|
||||
<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: 3.5rem; margin-left: auto">A Classical Christian Community</h1>
|
||||
<p>Hyperia is a social network for people who are a part of the Christian church and the European tradition.</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>
|
||||
<div style="position: absolute; top: 110vh; left: 50vw; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;">
|
||||
|
||||
<!-- INTRO SECTION -->
|
||||
<div style="display: flex; flex-direction: column; align-items: flex-start; max-width: 50vw;">
|
||||
<h1 style="font-family: Canterbury; font-size: 3.5rem; margin-left: auto;">A Classical Christian Community</h1>
|
||||
|
||||
<p>Hyperia is a private society for people who are a part of the Christian church and the European tradition.</p>
|
||||
<p>Inspired by the Classical Christian schooling movement that began in the 1990s, Hyperia aims to create a similar space for adults.</p>
|
||||
<p>These are five of our main goals:</p>
|
||||
|
||||
<div style="height: 5vh;"></div>
|
||||
</div>
|
||||
|
||||
<!-- GOALS SECTION -->
|
||||
<div style="display: flex; flex-direction: column; align-items: flex-start; width: 65vw; margin-top: 2vh;">
|
||||
<ol style="font-size: 1.1rem; line-height: 1.7;">
|
||||
<li style="margin-bottom: 1.5rem;">
|
||||
<strong>Reintroduce Heroism and Romance into Western Life</strong><br>
|
||||
When men are disconnected from ancestry, God, and land, we no longer have anything to fight for. Therefore, we will not fight.<br><br>
|
||||
When men do not fight, women are unprotected. They hate the men for being weak, and the men hate them too.<br><br>
|
||||
This is the cycle we are in, and this is the cycle we must break.<br><br>
|
||||
Hyperia Security allows men to be protectors of God and tradition. It allows them to fight for a society which is directly linked to our past and our future. We believe that, given this opportunity, men will rise to the occasion.<br><br>
|
||||
<em>Single women may join Hyperia for free.</em>
|
||||
</li>
|
||||
|
||||
<li style="margin-bottom: 1.5rem;">
|
||||
<strong>Reunite the Mind and Body of the West</strong><br>
|
||||
Since 1945, Western intellectuals and their people have been polarized against each other. This became obvious in 2016, with the divide between urban and rural voters in the election of Trump.<br><br>
|
||||
This polarization has terrible consequences, such as the classism of the opioid epidemic and the outsourcing of American jobs overseas. Now, finally, there is a chance to reunite.<br><br>
|
||||
We seek a society in which both groups can live in the communities they desire, and in which both groups work together for the common good.
|
||||
</li>
|
||||
|
||||
<li style="margin-bottom: 1.5rem;">
|
||||
<strong>Create a Market of Our Own Goods</strong><br>
|
||||
Outsourcing has been a disaster for the West. America's economy is almost all service-based, and foreign schemes like H1-B and Chinese factories have taken vast amounts of jobs.<br><br>
|
||||
Hyperia will have a job board and marketplace that is exclusive to members. The marketplace will highlight goods which are made by other members, and also which are American-made.
|
||||
</li>
|
||||
|
||||
<li style="margin-bottom: 1.5rem;">
|
||||
<strong>Revitalize Classical Christian Culture</strong><br>
|
||||
Currently, America is laden with exposure to secular and anti-Western influences. Hyperia will provide spaces, which are digital and eventually physical, that abide by Christian rules and are in favor of Western culture.
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<strong>Resettle America</strong><br>
|
||||
There are many towns and cities in America which have fallen prey to negligence and disrepair. Hyperia will focus on restoring these places, and not allow them to be overrun or abandoned.
|
||||
</li>
|
||||
</ol>
|
||||
|
||||
<div style="height: 10vh;"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
|
||||
@@ -6,10 +6,9 @@
|
||||
<link rel="icon" href="_/icons/logo.svg">
|
||||
<link rel="stylesheet" href="index.css">
|
||||
<style>
|
||||
|
||||
#items {
|
||||
position: absolute;
|
||||
top: 45vh;
|
||||
top: 50vh;
|
||||
left: 50vw;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
@@ -19,28 +18,43 @@
|
||||
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;
|
||||
input {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
display: inline-block; /* makes background and padding behave */
|
||||
padding: 0.2em 0.5em; /* adds breathing room */
|
||||
border-top: 2px solid var(--accent);
|
||||
border-bottom: 2px solid var(--accent);
|
||||
height: 2em;
|
||||
width: 15vw;
|
||||
padding: 0.2em;
|
||||
transition: border .2s, padding .2s;
|
||||
color: var(--accent)
|
||||
}
|
||||
input::placeholder {
|
||||
color: var(--accent);
|
||||
}
|
||||
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:-webkit-autofill,
|
||||
input:-webkit-autofill:focus {
|
||||
transition: background-color 600000s 0s, color 600000s 0s;
|
||||
}
|
||||
input[data-autocompleted] {
|
||||
background-color: #c7a67b !important;
|
||||
}
|
||||
|
||||
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 */
|
||||
}
|
||||
@media (max-width: 600px) {
|
||||
input {
|
||||
width: 50vw
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script src="_/code/util.js"></script>
|
||||
<script type="module">
|
||||
@@ -50,17 +64,55 @@
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<span id="title" onclick='window.location.href="/"'>hyperia
|
||||
</span>
|
||||
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
|
||||
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
|
||||
<a href="join">join</a>
|
||||
<span>|</span>
|
||||
<a href="signin">sign in</a>
|
||||
</div>
|
||||
|
||||
<p style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
|
||||
Hyperia is invite-only. You'll need a friend to invite you.
|
||||
</p>
|
||||
<div id="items">
|
||||
|
||||
<script>
|
||||
Array.from($("a*")).forEach((link) => {
|
||||
link.addEventListener("click", () => window.history.pushState("", "", link.innerHTML.toLowerCase()))
|
||||
})
|
||||
</script>
|
||||
<form id="signup-form">
|
||||
<input name="email" id="email" placeholder="email" required style="margin-bottom: 15px;">
|
||||
<br>
|
||||
<p id="applicant-message" style="color: green; font-size: 1em; margin: 0.5em 0;"></p>
|
||||
<button type="submit" style="background-color: rgb(193, 135, 29)">Sign Up</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
document.getElementById('signup-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault(); // prevent page reload
|
||||
|
||||
const email = document.getElementById('email').value;
|
||||
const messageEl = document.getElementById('applicant-message');
|
||||
|
||||
try {
|
||||
const res = await fetch('/api/signup', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams({ email }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
messageEl.style.color = 'green';
|
||||
messageEl.textContent = data.message;
|
||||
} else {
|
||||
const error = await res.text();
|
||||
messageEl.style.color = 'red';
|
||||
messageEl.textContent = 'Error: ' + error;
|
||||
}
|
||||
} catch (err) {
|
||||
messageEl.style.color = 'red';
|
||||
messageEl.textContent = 'Error submitting form.';
|
||||
console.error(err);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -65,44 +65,22 @@
|
||||
</head>
|
||||
<body>
|
||||
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
|
||||
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
|
||||
<a href="join">join</a>
|
||||
<span>|</span>
|
||||
<a href="signin">sign in</a>
|
||||
</div>
|
||||
|
||||
<div id="items">
|
||||
<input id="email" placeholder="email"></input>
|
||||
<form id="login-form" action="/api/login" method="POST">
|
||||
<input name="email" placeholder="email" style="margin-bottom: 15px;" required>
|
||||
<br>
|
||||
<input id="password" placeholder="password"></input>
|
||||
<input name="password" type="password" placeholder="password" required>
|
||||
<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>
|
||||
<button type="submit" style="background-color: rgb(193, 135, 29)">Sign In</button>
|
||||
</form>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
26
ui/site/index.html
Normal file
26
ui/site/index.html
Normal file
@@ -0,0 +1,26 @@
|
||||
<!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="index.css">
|
||||
</head>
|
||||
<body>
|
||||
<span id="title" class="link" onclick='window.location.href="/"'>hyperia
|
||||
</span>
|
||||
<img class="main-image">
|
||||
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
|
||||
<a href="#" onclick="logout(); return false;">sign out</a>
|
||||
<script>
|
||||
function logout() {
|
||||
fetch('/signout', { method: 'GET', credentials: 'include' })
|
||||
.then(() => {
|
||||
// Force a clean full-page reload of "/"
|
||||
window.location.replace('/?loggedout');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user