Basic Navigation
This commit is contained in:
metacryst
@@ -1,6 +1,7 @@
|
|||||||
/*
|
/*
|
||||||
Sam Russell
|
Sam Russell
|
||||||
Captured Sun
|
Captured Sun
|
||||||
|
11.17.25.2 - Fixing onNavigate() and onAppear()
|
||||||
11.17.25 - Added dynamic function to have units in style func parameters.
|
11.17.25 - Added dynamic function to have units in style func parameters.
|
||||||
11.14.25 - Added onTouch, onTap. Changed style setters to work with Safari. Added center() funcs.
|
11.14.25 - Added onTouch, onTap. Changed style setters to work with Safari. Added center() funcs.
|
||||||
11.13.25 - changed onFocus() to be a boolean event, added onInput()
|
11.13.25 - changed onFocus() to be a boolean event, added onInput()
|
||||||
@@ -273,7 +274,6 @@ function extendHTMLElementWithStyleSetters() {
|
|||||||
|
|
||||||
allStyleProps.forEach(prop => {
|
allStyleProps.forEach(prop => {
|
||||||
if (prop === "translate") return;
|
if (prop === "translate") return;
|
||||||
if(prop === "position") console.log("position")
|
|
||||||
|
|
||||||
const type = cssValueType(prop);
|
const type = cssValueType(prop);
|
||||||
|
|
||||||
@@ -792,7 +792,7 @@ window.Triangle = function (width = "40px", height = "40px") {
|
|||||||
/* EVENTS */
|
/* EVENTS */
|
||||||
|
|
||||||
HTMLElement.prototype.onAppear = function(func) {
|
HTMLElement.prototype.onAppear = function(func) {
|
||||||
func(this);
|
func.call(this);
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -867,15 +867,33 @@ HTMLElement.prototype.onTap = function(cb) {
|
|||||||
|
|
||||||
/* WHY THIS LISTENER IS THE WAY IT IS:
|
/* WHY THIS LISTENER IS THE WAY IT IS:
|
||||||
- If we dispatch the "navigate" event on the window (as one would expect for a "navigate" event), a listener placed on the element will not pick it up.
|
- If we dispatch the "navigate" event on the window (as one would expect for a "navigate" event), a listener placed on the element will not pick it up.
|
||||||
- However, if we add the listener here on the window, it won't have the "this" scope that a callback normally would. Which makes it much less useful.
|
- However, if we add the listener on the window, it won't have the "this" scope that a callback normally would. Which makes it much less useful.
|
||||||
- Then, if we try to add that scope using bind(), it makes the function.toString() unreadable, which means we cannot detect duplicate listeners.
|
- Then, if we try to add that scope using bind(), it makes the function.toString() unreadable, which means we cannot detect duplicate listeners.
|
||||||
- Therefore, we just have to attach the navigate event to the element, and manually trigger that when the window listener fires.
|
- Therefore, we just have to attach the navigate event to the element, and manually trigger that when the window listener fires.
|
||||||
*/
|
*/
|
||||||
|
navigateListeners = []
|
||||||
HTMLElement.prototype.onNavigate = function(cb) {
|
HTMLElement.prototype.onNavigate = function(cb) {
|
||||||
this._storeListener("navigate", cb);
|
this._storeListener("navigate", cb);
|
||||||
window.addEventListener("navigate", () => this.dispatchEvent(new CustomEvent("navigate")))
|
|
||||||
|
let found = false
|
||||||
|
for(entry of navigateListeners) {
|
||||||
|
if(entry.cb.toString() === cb.toString() &&
|
||||||
|
this.nodeName === entry.el.nodeName) {
|
||||||
|
found = true
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(found === false) {
|
||||||
|
navigateListeners.push({el: this, cb: cb})
|
||||||
|
}
|
||||||
|
|
||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
window.addEventListener("navigate", () => {
|
||||||
|
for(entry of navigateListeners) {
|
||||||
|
entry.el.dispatchEvent(new CustomEvent("navigate"))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
HTMLElement.prototype.onEvent = function(name, cb) {
|
HTMLElement.prototype.onEvent = function(name, cb) {
|
||||||
window._storeListener(window, name, cb);
|
window._storeListener(window, name, cb);
|
||||||
|
|||||||
@@ -1,25 +0,0 @@
|
|||||||
import "./NavBar.js"
|
|
||||||
|
|
||||||
class Home extends Shadow {
|
|
||||||
render() {
|
|
||||||
img("_/images/knight.png", "29vw")
|
|
||||||
.position("absolute")
|
|
||||||
.left(50, vw).top(50, vh)
|
|
||||||
.center()
|
|
||||||
|
|
||||||
p("H Y P E R I A")
|
|
||||||
.x(50, vw).y(50, vh)
|
|
||||||
.center()
|
|
||||||
.color("var(--gold)")
|
|
||||||
.fontSize(5, vw)
|
|
||||||
|
|
||||||
NavBar()
|
|
||||||
|
|
||||||
p("A CLASSICAL CHRISTIAN ASSOCIATION")
|
|
||||||
.x(50, vw).y(94, vh)
|
|
||||||
.center()
|
|
||||||
.letterSpacing(0.3, em)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
register(Home)
|
|
||||||
@@ -1,10 +1,41 @@
|
|||||||
class NavBar extends Shadow {
|
class NavBar extends Shadow {
|
||||||
|
NavButton(text) {
|
||||||
|
|
||||||
|
function normalizeText(text) {
|
||||||
|
return text.toLowerCase().replace(/[\s?]+/g, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
function isSelected(el) {
|
||||||
|
return ("/" + normalizeText(el.innerText)) === window.location.pathname
|
||||||
|
}
|
||||||
|
|
||||||
|
return p(text)
|
||||||
|
.cursor("default")
|
||||||
|
.textUnderlineOffset(0.5, em)
|
||||||
|
.onAppear(function() {
|
||||||
|
this.style.textDecoration = isSelected(this) ? "underline" : ""
|
||||||
|
})
|
||||||
|
.onHover(function (hovering) {
|
||||||
|
if(hovering) {
|
||||||
|
this.style.textDecoration = "underline"
|
||||||
|
} else if(!isSelected(this)) {
|
||||||
|
this.style.textDecoration = ""
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.onClick(function (done) {
|
||||||
|
if(done) {
|
||||||
|
window.navigateTo(normalizeText(this.innerText))
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
HStack(() => {
|
HStack(() => {
|
||||||
p("WHY?")
|
this.NavButton("WHY?")
|
||||||
p("EVENTS")
|
this.NavButton("EVENTS")
|
||||||
p("JOIN")
|
this.NavButton("JOIN")
|
||||||
p("SIGN IN")
|
this.NavButton("SIGN IN")
|
||||||
})
|
})
|
||||||
.x(50, vw).y(4, em)
|
.x(50, vw).y(4, em)
|
||||||
.center()
|
.center()
|
||||||
@@ -13,30 +44,6 @@ class NavBar extends Shadow {
|
|||||||
.gap(3, em)
|
.gap(3, em)
|
||||||
.paddingRight(2, em)
|
.paddingRight(2, em)
|
||||||
.onNavigate(() => {
|
.onNavigate(() => {
|
||||||
console.log("hi")
|
|
||||||
})
|
|
||||||
.onAppear(() => {
|
|
||||||
Array.from(this.$("p")).forEach((el) => {
|
|
||||||
el.addEventListener("mousedown", (e) => {
|
|
||||||
el.classList.add("touched")
|
|
||||||
})
|
|
||||||
})
|
|
||||||
window.addEventListener("mouseup", (e) => {
|
|
||||||
let target = e.target
|
|
||||||
if(!target.matches("app-menu p")) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
target.classList.remove("touched")
|
|
||||||
|
|
||||||
if(target.classList.contains("selected")) {
|
|
||||||
this.selected = ""
|
|
||||||
window.navigateTo("/")
|
|
||||||
} else {
|
|
||||||
this.selected = target.innerText
|
|
||||||
window.navigateTo("/app/" + target.innerText.toLowerCase())
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
import "./components/Home.js"
|
import "./pages/Home.js"
|
||||||
Home()
|
Home()
|
||||||
7
ui/public/pages/Events.js
Normal file
7
ui/public/pages/Events.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
class Events extends Shadow {
|
||||||
|
render() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(Events)
|
||||||
55
ui/public/pages/Home.js
Normal file
55
ui/public/pages/Home.js
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
import "../components/NavBar.js"
|
||||||
|
import "./Why.js"
|
||||||
|
import "./Events.js"
|
||||||
|
import "./Join.js"
|
||||||
|
import "./SignIn.js"
|
||||||
|
|
||||||
|
class Home extends Shadow {
|
||||||
|
render() {
|
||||||
|
|
||||||
|
ZStack(() => {
|
||||||
|
|
||||||
|
NavBar()
|
||||||
|
|
||||||
|
switch(window.location.pathname) {
|
||||||
|
case "/":
|
||||||
|
img("_/images/knight.png", "29vw")
|
||||||
|
.position("absolute")
|
||||||
|
.left(50, vw).top(50, vh)
|
||||||
|
.center()
|
||||||
|
|
||||||
|
p("H Y P E R I A")
|
||||||
|
.x(50, vw).y(50, vh)
|
||||||
|
.center()
|
||||||
|
.color("var(--gold)")
|
||||||
|
.fontSize(5, vw)
|
||||||
|
|
||||||
|
|
||||||
|
p("A CLASSICAL CHRISTIAN ASSOCIATION")
|
||||||
|
.x(50, vw).y(94, vh)
|
||||||
|
.center()
|
||||||
|
.letterSpacing(0.3, em)
|
||||||
|
break;
|
||||||
|
case "/why":
|
||||||
|
Why()
|
||||||
|
break;
|
||||||
|
case "/events":
|
||||||
|
Events()
|
||||||
|
break;
|
||||||
|
case "/join":
|
||||||
|
Join()
|
||||||
|
break;
|
||||||
|
case "/signin":
|
||||||
|
SignIn()
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
.onNavigate(() => {
|
||||||
|
this.rerender()
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(Home)
|
||||||
9
ui/public/pages/Join.js
Normal file
9
ui/public/pages/Join.js
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
class Join extends Shadow {
|
||||||
|
render() {
|
||||||
|
p("Membership is invitation-only. Look out for us in person, or come to an event!")
|
||||||
|
.x(50, vw).y(50, vh)
|
||||||
|
.center()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(Join)
|
||||||
7
ui/public/pages/SIgnIn.js
Normal file
7
ui/public/pages/SIgnIn.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
class SignIn extends Shadow {
|
||||||
|
render() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(SignIn)
|
||||||
7
ui/public/pages/Why.js
Normal file
7
ui/public/pages/Why.js
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
class Why extends Shadow {
|
||||||
|
render() {
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
register(Why)
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
<!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">
|
|
||||||
<style>
|
|
||||||
#items {
|
|
||||||
position: absolute;
|
|
||||||
top: 50vh;
|
|
||||||
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 */
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
input {
|
|
||||||
width: 50vw
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script src="_/code/quill.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" 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">
|
|
||||||
|
|
||||||
<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; margin-bottom: 1em"></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>
|
|
||||||
@@ -1,118 +0,0 @@
|
|||||||
<!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">
|
|
||||||
<style>
|
|
||||||
#items {
|
|
||||||
position: absolute;
|
|
||||||
top: 50vh;
|
|
||||||
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 */
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
input {
|
|
||||||
width: 50vw
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script src="_/code/quill.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" 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">
|
|
||||||
|
|
||||||
<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; margin-bottom: 1em"></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>
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
<!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">
|
|
||||||
<style>
|
|
||||||
#items {
|
|
||||||
position: absolute;
|
|
||||||
top: 50vh;
|
|
||||||
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 */
|
|
||||||
}
|
|
||||||
|
|
||||||
input {
|
|
||||||
background-color: transparent;
|
|
||||||
border: none;
|
|
||||||
border-radius: 5px;
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 600px) {
|
|
||||||
input {
|
|
||||||
width: 50vw
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<script src="_/code/quill.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" 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">
|
|
||||||
<form id="login-form" action="/login" method="POST">
|
|
||||||
<input name="email" placeholder="email" style="margin-bottom: 15px;" required>
|
|
||||||
<br>
|
|
||||||
<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>
|
|
||||||
<button type="submit" style="background-color: rgb(193, 135, 29)">Sign In</button>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue
Block a user