gamezonline/Radius
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat: header buttons (mostly functional)

Browse Source
This commit is contained in:
MotorTruck1221
2025-03-25 23:28:01 -06:00
parent c55e31e115
commit 40ee155dc0
6 changed files with 66 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package.json
+1 -1
View File
@@ -36,8 +36,8 @@
]
},
"devDependencies": {
"@fontsource/inter": "^5.2.5",
"@iconify-json/lucide": "^1.2.30",
"@iconify-json/material-symbols": "^1.2.17",
"@mercuryworkshop/bare-mux": "^2.1.7",
"@mercuryworkshop/epoxy-transport": "^2.1.27",
"@mercuryworkshop/libcurl-transport": "^1.4.0",
pnpm-lock.yaml
Generated
+10 -8
View File
@@ -45,12 +45,12 @@ importers:
specifier: ^1.1.7
version: 1.1.7
devDependencies:
'@fontsource/inter':
specifier: ^5.2.5
version: 5.2.5
'@iconify-json/lucide':
specifier: ^1.2.30
version: 1.2.30
'@iconify-json/material-symbols':
specifier: ^1.2.17
version: 1.2.17
'@mercuryworkshop/bare-mux':
specifier: ^2.1.7
version: 2.1.7
@@ -351,12 +351,12 @@ packages:
'@fastify/static@8.1.1':
resolution: {integrity: sha512-TW9eyVHJLytZNpBlSIqd0bl1giJkEaRaPZG+5AT3L/OBKq9U8D7g/OYmc2NPQZnzPURGhMt3IAWuyVkvd2nOkQ==}
'@fontsource/inter@5.2.5':
resolution: {integrity: sha512-kbsPKj0S4p44JdYRFiW78Td8Ge2sBVxi/PIBwmih+RpSXUdvS9nbs1HIiuUSPtRMi14CqLEZ/fbk7dj7vni1Sg==}
'@iconify-json/lucide@1.2.30':
resolution: {integrity: sha512-0EaiofYbUwnp15sNC3cOJi0oD5DbbfDKbnIEA6jJ+WGHigyePgBVmx/5/S97XQmvl+Ix/Md3oGLKxkI5szL0rg==}
'@iconify-json/material-symbols@1.2.17':
resolution: {integrity: sha512-hKb+Ii5cqLXXefYMxUB2jIc8BNqxixQogud4KU/fn0F4puM1iCdCF2lFV+0U8wnJ6dZIx6E+w8Ree4bIT7To+A==}
'@iconify/tools@4.1.2':
resolution: {integrity: sha512-q6NzLQYEN9zkDfcyBqD3vItHcZw97w/s++3H3TBxUORr57EfHxj6tOW6fyufDjMq+Vl56WXWaPx1csBPYlI5CA==}
@@ -3153,12 +3153,14 @@ snapshots:
fastq: 1.19.1
glob: 11.0.1
'@fontsource/inter@5.2.5': {}
'@iconify-json/lucide@1.2.30':
dependencies:
'@iconify/types': 2.0.0
'@iconify-json/material-symbols@1.2.17':
dependencies:
'@iconify/types': 2.0.0
'@iconify/tools@4.1.2':
dependencies:
'@iconify/types': 2.0.0
src/components/Header.astro
+25 -8
View File
@@ -2,24 +2,41 @@
import { Icon } from "astro-icon/components";
const path = Astro.url.pathname;
---
<div class="h-14 fixed bg-(--background) border-b border-b-(--border) px-4 w-full z-10 flex items-center">
<div class="flex items-center gap-3">
<button id="menu" class="cursor-pointer inline-flex items-center justify-center whitespcae-nowrap rounded-lg text-sm font-medium ring-(--offset-background) h-10 w-10 hover:bg-(--accent)">
<div class="h-14 fixed bg-(--background) border-b border-b-(--border) px-4 w-full z-10 flex items-center font-inter">
<div class="flex items-center gap-3 w-full">
<button id="menu" class="cursor-pointer inline-flex items-center justify-center whitespace-nowrap rounded-lg text-sm font-medium ring-(--offset-background) h-10 w-10 hover:bg-(--accent)">
<Icon name="lucide:menu" class="text-(--foreground) h-7 w-7" />
</button>
<a id="bhl" class="flex items-center gap-2" href="/">
<a id="bhl" class="flex items-center gap-2 w-full" href="/">
<Icon name="lucide:radius" class="w-8 h-8 rotate-180 text-(--foreground)" />
<h1 class="text-xl font-bold text-(--foreground)"> Radius </h1>
</a>
<div id="phl" class="flex items-center gap-2 hidden">
<img id="phlImage" src="https://google.com/favicon.ico" class="w-8 h-8 text-(--foreground) rounded-2xl" />
<h1 id="phlTitle" class="hidden md:block text-xl font-bold text-(--foreground) whitespace-nowrap"> Radius </h1>
<div id="phl" class="flex items-center w-full justify-between hidden">
<div class="flex items-center gap-2 w-1/2">
<img id="phlImage" src="" class="w-8 h-8 text-(--foreground) rounded-2xl" />
<h1 id="phlTitle" class="hidden md:block text-xl font-bold text-(--foreground) whitespace-nowrap overflow-hidden text-ellipsis w-full"> Radius </h1>
</div>
<div class="flex items-center gap-2 flex-grow justify-end text-(--foreground) md:mr-4">
<button id="pal" class="font-medium rounded-lg h-10 w-10 hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer">
<Icon name="lucide:arrow-left" class="h-6 w-6" />
</button>
<button id="par" class="font-medium h-10 w-10 rounded-lg hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer">
<Icon name="lucide:arrow-right" class="h-6 w-6" />
</button>
<button id="prl" class="font-medium h-10 w-10 rounded-lg hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer">
<Icon name="lucide:rotate-cw" class="h-6 w-6" />
</button>
<button id="psc" class="font-medium h-10 w-10 rounded-lg hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer">
<Icon name="material-symbols:star-outline-rounded" class="h-8 w-8" id="noShortcut" />
<Icon name="material-symbols:star-rounded" class="h-8 w-8 hidden" id="shortcut" />
</button>
</div>
</div>
</div>
<div>
</div>
</div>
<div class="fixed w-full h-full z-10 flex flex-row pointer-events-auto invisible transition duration-500" id="navigation">
<div class="fixed w-full h-full z-10 flex flex-row pointer-events-auto invisible transition duration-500 font-inter" id="navigation">
<div id="innerNav" class="flex flex-col gap-6 w-72 h-full bg-(--background) border-r border-r-(--border) p-6 transition duration-250 shadow-lg">
<div class="w-full flex flex-row justify-between transition duration-250">
<Icon name="lucide:radius" class="w-10 h-10 rotate-180 text-(--foreground)" />
src/layouts/Layout.astro
+1 -2
View File
@@ -1,7 +1,6 @@
---
import "@styles/themes/default.css";
import "@styles/global.css";
import "@fontsource/inter";
import { ClientRouter } from "astro:transitions";
import Loader from "@components/Loader.astro";
import Header from "@components/Header.astro";
@@ -17,7 +16,7 @@ import Header from "@components/Header.astro";
<title>Radius</title>
<ClientRouter fallback="animate" />
</head>
<body class="h-full w-full bg-(--background) font-override">
<body class="h-full w-full bg-(--background) font-inter">
<Header />
<div class="h-full w-full fixed bg-(--background) text-(--foreground)">
<slot />
src/pages/index.astro
+26 -4
View File
@@ -13,7 +13,7 @@ const randomSplash = genSplash();
---
<Layout>
<div class="h-full flex items-center justify-center">
<div class="h-full flex items-center justify-center font-inter">
<div class="flex flex-col items-center gap-6">
<div class="flex items-center gap-2">
<Icon name="lucide:radius" class="h-16 w-16 rotate-180 text-(--foreground)" />
@@ -25,7 +25,7 @@ const randomSplash = genSplash();
</div>
<p class="text-sm text-center sm:text-base whitespace-nowrap"> { randomSplash } </p>
</div>
<iframe id="iframe" class="fixed h-[calc(100%-3.5rem)] mt-14 w-full hidden" />
<iframe id="iframe" class="fixed h-[calc(100%-3.5rem)] mt-14 w-full hidden bg-(--background)" />
</div>
</Layout>
<script>
@@ -41,6 +41,14 @@ const randomSplash = genSplash();
const phl = document.getElementById("phl") as HTMLDivElement;
const phlImage = document.getElementById("phlImage") as HTMLImageElement;
const phlTitle = document.getElementById("phlTitle") as HTMLDivElement;
const proxyLeft = document.getElementById("pal") as HTMLButtonElement;
const proxyRight = document.getElementById("par") as HTMLButtonElement;
const proxyReload = document.getElementById("prl") as HTMLButtonElement;
const proxyShortcut = {
button: document.getElementById("psc") as HTMLButtonElement,
noShortcut: document.getElementById("noShortcut") as HTMLElement,
shortcut: document.getElementById("shortcut") as HTMLElement
}
const client = new BareClient();
input.addEventListener("keypress", async (event: any) => {
if (event.key === "Enter") {
@@ -63,8 +71,22 @@ const randomSplash = genSplash();
}
}
const buttons = () => {
proxyLeft.addEventListener("click", () => {
iframeWin!.history.back();
});
proxyRight.addEventListener("click", () => {
iframeWin!.history.forward();
});
proxyReload.addEventListener("click", () => {
iframeWin!.location.reload();
});
proxyShortcut.button.addEventListener("click", () => {
console.log("yet to be implemented");
});
}
iframe.addEventListener("load", async () => {
//const url = new URL();
phlTitle.innerHTML = iframeWin!.document.title;
const pageURL = await getURL();
const data = await client.fetch(`https://www.google.com/s2/favicons?domain=${pageURL}&sz=64`);
@@ -73,7 +95,7 @@ const randomSplash = genSplash();
phlImage.src = object;
bhl.classList.add("hidden");
phl.classList.remove("hidden");
//URL.revokeObjectURL(object);
buttons();
});
}
src/styles/global.css
+3 -3
View File
@@ -1,6 +1,6 @@
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import "tailwindcss";
.font-override {
font-family: var(--font-family), Inter, sans-serif;
@theme {
--font-inter: "Inter", sans-serif
}