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

init

Browse Source
This commit is contained in:
metacryst
2025-06-22 18:09:19 -05:00
parent a695368462
commit 760563167c
24 changed files with 1110 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ui/index.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hyperia</title>
<link rel="icon" href="_/lightlogo.svg">
<link rel="stylesheet" href="">
<script src="quill.js"></script>
<script type="module" src="_/build/imports.js"></script>
<script type="module" src="index.js"></script>
<script>
window.Colors = {
base: darkMode ? "#6e150b" : "#f8e5ca",
accent: darkMode ? "#f2dac8" : "#000000",
ash: darkMode ? "rgb(179 162 150)" : "rgb(119 109 103)",
oak: "rgb(73 18 18)",
searchBorder: darkMode ? "rgb(154 36 22)" : "#a18d8d",
yellowAccent: "rgb(202 97 18)",
searchBackground: darkMode ? "rgb(73 18 18)" : "rgb(185 191 152)",
}
</script>
<style>
body {
margin: 0;
overflow-x: hidden;
}
</style>
</head>
<body>
</body>
</html>

0
ui/index.js Normal file
View File

148
ui/nav/header.js Normal file
View File

@@ -0,0 +1,148 @@
class Header extends Shadow {
render() {
HStack(() => {
HStack(() => {
img(darkMode ? "_/lightLogo.svg" : "_/logo.svg", 100, 100)
.marginLeft(2, "vw")
// p("Hyperia")
// .marginLeft(10, "px")
// .fontWeight(800)
// .fontSize("2xl")
})
.alignItems("center")
.flex(1)
VStack(() => {
input("", {width: "60vw", height: "35px"})
.background(Colors.searchBackground)
.borderRadius(6, px)
.border(`1px solid ${Colors.searchBorder}`)
.paddingLeft(1, "em")
.color(darkMode ? Colors.accent : Colors.oak)
.fontSize("l")
.marginTop(47, px)
.outline("none")
.transition("border .2s")
.onFocus(function () {
this.style.border = `1px solid ${darkMode ? "rgb(225 19 0)" : "white"}`
})
.onBlur(function () {
this.style.border = `1px solid ${Colors.searchBorder}`
})
.onKeyDown(function (e) {
console.log(e.key)
if(e.key === "Enter") {
navigateTo("/search/" + this.value)
}
})
HStack(() => {
a("/", () => {
img("_/all.svg", 20, 20)
.backgroundColor(window.location.pathname === "/" ? Colors.base : Colors.oak)
.padding("horizontal", 10)
.paddingTop(1)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/" ? Colors.oak : "none")
.marginRight("20", "px")
a("Images", () => {
img("_/picture.svg", 20, 20)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(1)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/Images" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
a("Videos", () => {
img("_/video.svg", 20, 20)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(1)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/Videos" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
a("Products", () => {
img("_/shopping.svg", 17, 17)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(3)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/Producrs" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
a("Jobs", () => {
img("_/jobs.svg", 24, 24)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/Jobs" ? Colors.oak : "none")
.marginRight("20", "px")
.color(Colors.ash)
a("Files", () => {
img("_/doc.svg", 18, 18)
.backgroundColor(Colors.oak)
.padding("horizontal", 10)
.paddingTop(3)
})
.borderRadius(12, px)
.backgroundColor(window.location.pathname === "/Files" ? Colors.oak : "none")
.marginRight("30", "px")
.color(Colors.ash)
})
.marginTop(20, px)
.justifyContent("center")
})
.flex(1)
HStack(() => {
button(() => {
img("_/silo2.svg", 48, 32)
.backgroundColor(Colors.base)
})
.addStyle(buttonStyle)
.height(40, "px")
.padding("horizontal", 18)
.paddingTop(2)
})
.flex(1)
.justifyContent("center")
})
.alignItems("center")
.gap("10px")
.width(100, 'vw')
.height(1.4, "in")
}
}
function buttonStyle(el) {
el.borderRadius(7, px)
.border(`1px solid ${Colors.searchBorder}`)
.backgroundColor(Colors.oak)
.color(darkMode ? Colors.ash : Colors.base)
.fontSize("15", "px")
.transition("scale .3s")
.onHover((hovering) => {
el.style.transition
if(hovering) {
el
.scale("1.05")
.backgroundColor(Colors.darkerBlue)
} else {
el
.scale("")
.backgroundColor(Colors.blue)
}
})
return el
}

18
ui/pages/[].js Normal file
View File

@@ -0,0 +1,18 @@
css(`
home- {
margin: 0px;
position: absolute;
left: 0px;
top: 0px;
width: 100vw;
height: 100vh;
background-color: ${Colors.base};
font-family: system-ui;
}
`)
class Home extends Page {
render() {
Header()
}
}