Feat: header buttons (mostly functional)
This commit is contained in:
MotorTruck1221
@@ -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)" />
|
||||
|
||||
@@ -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 />
|
||||
|
||||
+26
-4
@@ -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();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user