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

Terra Cotta Home Page, Quill Updates

Browse Source
This commit is contained in:
metacryst
2025-11-18 03:25:45 -06:00
parent 6d2da88f23
commit ff28d68988
9 changed files with 267 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
ui/_/code/quill.js
View File

File diff suppressed because one or more lines are too long

3
ui/_/code/shared.css
View File

@@ -3,6 +3,7 @@
--accent: var(--darkbrown);
--tan: #FFDFB4;
--gold: #F2B36F;
--purple: #251D44;
--green: #0B5538;
--red: #BC1C02;
@@ -17,7 +18,7 @@
@media (prefers-color-scheme: dark) {
:root {
--main: #251D44;
--accent: #AF7323;
--accent: var(--gold);
--accent2: var(--periwinkle);
}
}

BIN
ui/_/images/fabric.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 MiB

BIN
ui/_/images/knight.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 449 KiB

25
ui/public/components/Home.js Normal file
View File

@@ -0,0 +1,25 @@
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)

178
ui/public/components/NavBar.js
View File

@@ -1,150 +1,44 @@
css(`
nav-bar {
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
z-index: 1;
height: 100px;
class NavBar extends Shadow {
render() {
HStack(() => {
p("WHY?")
p("EVENTS")
p("JOIN")
p("SIGN IN")
})
.x(50, vw).y(4, em)
.center()
.fontSize(0.85, em)
.justifyContent("center")
.gap(3, em)
.paddingRight(2, em)
.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
}
.title-div {
position: absolute;
left: 2em;
top: 2em;
display: flex;
align-items: center;
}
target.classList.remove("touched")
.links-div {
position: absolute;
right: 3em;
top: 2.75em;
display: flex;
}
.logo-p {
font-size: 2em;
margin: 0 0 0 15px;
letter-spacing: 1px;
text-align: center;
}
.nav-hamburger {
margin-right: 8vw;
display: none;
max-height:40px;
}
.nav-link {
font-size: 1em;
margin: 0 0 0 15px;
letter-spacing: 1px;
}
@media only screen and (max-width: 820px) {
nav-bar a {
text-decoration: none;
color: var(--green);
}
.title-div {
position: static
}
.logo {
width: 10vw;
}
.logo-p {
font-size: 8vw;
margin: 0 0 0 1vw;
}
.nav-hamburger {
display: block;
}
.links-div {
display:none;
}
.outer-nav {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 20vw;
background: var(--tan);
display: flex;
z-index: 1;
justify-content: space-between;
align-items: center;
padding: 0 3vw;
max-height:80px;
}
}
`)
export default class NavBar extends HTMLElement {
connectedCallback() {
this.innerHTML += /* html */ `
<div class="outer-nav">
<div style="display: flex; align-items: center;">
<a draggable="false" href="/" id="homeLink" style="display: flex; align-items: center; text-decoration: none; color: var(--green);">
<div class="title-div">
<img class="logo" width="40" height="40" src="_/icons/logo.svg"/>
<p class="logo-p">Hyperia</p>
</div>
</a>
</div>
<div class="links-div">
<a draggable="false" href="/about" class="nav-link">About</a>
<a draggable="false" href="/join" class="nav-link">Join</a>
<a draggable="false" href="/login" class="nav-link">Login</a>
</div>
<!-- Right side: hamburger -->
<img class="nav-hamburger" src="_/icons/hamburger.svg">
</div>
</div>
`;
// Track which anchor was pressed down
let activeLink = null;
// Get all anchor tags inside this element
const anchors = this.querySelectorAll('a');
anchors.forEach(anchor => {
anchor.addEventListener('mousedown', (e) => {
activeLink = anchor;
});
});
// Listen globally for mouseup, to detect release anywhere
document.addEventListener('mouseup', (e) => {
if (activeLink) {
// Navigate to the href of the activeLink
window.location.href = activeLink.href;
activeLink = null;
}
});
const hamburger = this.querySelectorAll("img")[1]
const sidebar = document.querySelector("side-bar");
hamburger.addEventListener("click", () => {
if (sidebar.style.right === "0vw") {
sidebar.style.right = "-100vw";
if(target.classList.contains("selected")) {
this.selected = ""
window.navigateTo("/")
} else {
sidebar.style.right = "0vw";
this.selected = target.innerText
window.navigateTo("/app/" + target.innerText.toLowerCase())
}
});
})
})
}
}
customElements.define("nav-bar", NavBar)
register(NavBar)

0
ui/public/index.css
View File

96
ui/public/index.html
View File

@@ -9,32 +9,12 @@
body {
font-size: 16px;
background-image: url("_/images/fabric.png");
background-size: 33vw auto; /* width height of each tile */
}
.main-image {
content:url("_/images/castle.svg"); position: absolute; height: 70vh; bottom: 2vh; left: 55vw; transform: translateX(-50%);
user-select: none;
}
@media (max-width: 600px) {
.main-image {
max-width: 90vw; bottom: -7vh;
}}
@media (prefers-color-scheme: dark) {
.main-image {
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; left: 0vw;
}}
</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>
<script type="module" src="index.js"></script>
<script>
window.addEventListener('load', () => {
if (window.location.search) {
@@ -45,75 +25,5 @@
</script>
</head>
<body>
<span id="title" class="link" onclick='window.location.href="/"' style="user-select: none;">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="about">about</a>
<span>|</span>
<a href="services">services</a>
<span>|</span>
<a href="events">events</a>
<span>|</span> -->
<a href="join">join</a>
<span>|</span>
<a href="signin">sign in</a>
</div>
<div style="position: absolute; top: 110vh; left: 52vw; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center;">
<!-- INTRO SECTION -->
<div style="display: flex; flex-direction: column; max-width: 50vw; align-items: center">
<h1 style="font-family: Canterbury; font-size: 3.5rem; ">A Classical Christian Society</h1>
<div style="font-size: 1.3em; margin-top: 1em; max-width: 42vw; text-align: justify">
<p>Hyperia is a private club, focused on promoting the Classical Christian movement in America.</p>
<p>Inspired by Classical Christian schools, Hyperia is a similar space for adults.</p>
</div>
<div style="height: 3vh;"></div>
</div>
<!-- GOALS SECTION -->
<div style="display: flex; flex-direction: column; align-items: flex-start; width: 55vw; margin-top: 2vh;">
<div style="height: 10vh;"></div>
</div>
</div>
<style>
.link, a {
transition: background-color 0.3s ease, scale 0.3s;
padding: 5px 10px; /* optional padding for visual clarity */
border-radius: 4px; /* optional */
}
.link.touched, a.touched {
background-color: orange;
color: black;
scale: 1.3;
}
</style>
<script>
document.querySelectorAll('.link, a').forEach(link => {
link.addEventListener('touchstart', () => {
link.classList.add('touched');
});
link.addEventListener('touchend', () => {
link.classList.remove('touched');
});
// Optional: also handle touchcancel in case the user moves their finger away
link.addEventListener('touchcancel', () => {
link.classList.remove('touched');
});
});
</script>
</body>
</html>

2
ui/public/index.js Normal file
View File

@@ -0,0 +1,2 @@
import "./components/Home.js"
Home()