Hackathons/Hoya26
1
0
Fork 0
mirror of https://github.com/SirBlobby/Hoya26.git synced 2026-02-04 03:34:34 -05:00
Code Issues Packages Projects Releases Wiki Activity

Frontend Update

Browse Source
This commit is contained in:
Yousif Ali
2026-01-24 06:16:34 -05:00
parent 20070301ca
commit d6471afab2
20 changed files with 5036 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
frontend/src/routes/+layout.svelte
View File

@@ -1,49 +1,159 @@
<script>
<script lang="ts">
import { onMount } from "svelte";
import { isTauri } from "@tauri-apps/api/core";
import WebNavbar from "$lib/components/WebNavbar.svelte";
import WebFooter from "$lib/components/WebFooter.svelte";
import MobileTabBar from "$lib/components/MobileTabBar.svelte";
import CustomTabBar from "$lib/components/CustomTabBar.svelte";
import CameraScreen from "$lib/components/CameraScreen.svelte";
import { page } from "$app/stores";
import { goto } from "$app/navigation";
let { children } = $props();
let isApp = $state(false);
let isCameraActive = $state(false);
let recentItems = $state([
{
id: 101,
title: "Plastic Bottle",
date: new Date().toLocaleString(),
impact: "High",
imageUri: null,
},
{
id: 102,
title: "Aluminum Can",
date: new Date(Date.now() - 86400000).toLocaleString(),
impact: "Low",
imageUri: null,
},
]);
onMount(() => {
isApp = isTauri();
if (isApp) {
document.body.classList.add("platform-native");
} else {
document.body.classList.add("platform-web");
}
const handleScan = () => {
isCameraActive = true;
};
window.addEventListener("scan", handleScan);
return () => {
window.removeEventListener("scan", handleScan);
};
});
function addRecentItem(item: any) {
recentItems = [item, ...recentItems];
}
const navLinks = [
{ name: "Home", route: "/", icon: "ri:home-4-line" },
{ name: "Goal", route: "/community", icon: "ri:flag-2-line" },
{ name: "Chat", route: "/chat", icon: "ri:chat-3-line" },
{ name: "Report", route: "/report", icon: "ri:alarm-warning-line" },
];
</script>
{#if isApp}
<main class="app-container">
{@render children()}
</main>
<MobileTabBar />
<CustomTabBar currentRoute={$page.route.id || "/"} />
{:else}
<WebNavbar />
<main class="web-container">
{@render children()}
<nav class="desktop-nav">
<div class="nav-container">
<a href="/" class="nav-brand">
<div class="brand-icon">
<img
src="/ethix-logo.png"
alt="Ethix Logo"
class="brand-logo-img"
/>
</div>
<div class="brand-content">
<h1 class="brand-title">Ethix</h1>
<p class="brand-tagline">Truth in every scan</p>
</div>
</a>
<div class="nav-links">
{#each navLinks as link}
<a
href={link.route}
class="nav-link"
class:active={$page.route.id === link.route}
>
<iconify-icon icon={link.icon} width="20"
></iconify-icon>
<span>{link.name}</span>
</a>
{/each}
<a href="/catalogue" class="catalogue-button">
<iconify-icon icon="ri:search-line" width="20"
></iconify-icon>
<span>Browse Catalogue</span>
</a>
</div>
</div>
<svg
class="cloud-bg cloud-far"
viewBox="0 0 2880 200"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="rgba(255,255,255,0.4)"
d="M0,0 L2880,0 L2880,150 Q2760,180 2640,155 Q2520,130 2400,160 Q2280,190 2160,165 Q2040,140 1920,170 Q1800,200 1680,170 Q1560,140 1440,165 Q1320,190 1200,160 Q1080,130 960,155 Q840,180 720,150 Q600,120 480,150 Q360,180 240,155 Q120,130 0,150 L0,0 Z"
/>
</svg>
<svg
class="cloud-bg cloud-back"
viewBox="0 0 2880 200"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="rgba(255,255,255,0.65)"
d="M0,0 L2880,0 L2880,130 Q2800,160 2720,140 Q2640,120 2560,145 Q2480,170 2400,150 Q2320,130 2240,155 Q2160,180 2080,160 Q2000,140 1920,165 Q1840,190 1760,165 Q1680,140 1600,160 Q1520,180 1440,155 Q1360,130 1280,150 Q1200,170 1120,145 Q1040,120 960,145 Q880,170 800,150 Q720,130 640,155 Q560,180 480,160 Q400,140 320,165 Q240,190 160,170 Q80,150 0,130 L0,0 Z"
/>
</svg>
<svg
class="cloud-bg cloud-front"
viewBox="0 0 2880 200"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill="rgba(255,255,255,0.95)"
d="M0,0 L2880,0 L2880,100 Q2820,75 2760,95 Q2700,115 2640,90 Q2580,65 2520,90 Q2460,115 2400,95 Q2340,75 2280,100 Q2220,125 2160,105 Q2100,85 2040,110 Q1980,135 1920,110 Q1860,85 1800,105 Q1740,125 1680,100 Q1620,75 1560,95 Q1500,115 1440,90 Q1380,65 1320,90 Q1260,115 1200,95 Q1140,75 1080,100 Q1020,125 960,105 Q900,85 840,110 Q780,135 720,110 Q660,85 600,105 Q540,125 480,100 Q420,75 360,95 Q300,115 240,90 Q180,65 120,90 Q60,115 0,100 L0,0 Z"
/>
</svg>
</nav>
<main class="app-container">
<div class="content-wrapper">
{@render children()}
</div>
</main>
<WebFooter />
{/if}
<style>
:global(body) {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
font-family:
"Circular",
"Inter",
-apple-system,
BlinkMacSystemFont,
sans-serif;
background-color: #000000;
color: white;
overflow: hidden;
}
.web-container {
min-height: 80vh;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
@@ -65,4 +175,171 @@
padding: 12px 24px;
font-size: 1.1rem;
}
:global(*) {
box-sizing: border-box;
}
.desktop-nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
overflow: visible;
background: transparent;
display: flex;
flex-direction: column;
justify-content: flex-start;
box-shadow: none;
z-index: 100;
pointer-events: none;
}
.nav-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 40px;
max-width: 1400px;
margin: 0 auto;
width: 100%;
position: relative;
z-index: 10;
pointer-events: auto;
}
.nav-brand {
display: flex;
align-items: center;
gap: 16px;
text-decoration: none;
}
.brand-icon {
background: white;
border-radius: 50%;
padding: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
}
.brand-logo-img {
width: 32px;
height: 32px;
object-fit: contain;
}
.brand-content {
display: flex;
flex-direction: column;
}
.brand-title {
font-size: 24px;
font-weight: 900;
color: #1a1a1a;
margin: 0;
line-height: 1;
}
.brand-tagline {
font-size: 12px;
color: #555;
margin: 4px 0 0 0;
font-weight: 600;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
}
.nav-link {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #1a1a1a;
font-weight: 700;
font-size: 16px;
padding: 8px 16px;
border-radius: 20px;
transition: all 0.2s;
}
.nav-link:hover {
background: rgba(255, 255, 255, 0.5);
color: #166534;
}
.nav-link.active {
background: white;
color: #166534;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.catalogue-button {
background: #22c55e;
color: #000000;
display: flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
border-radius: 30px;
text-decoration: none;
font-weight: 700;
transition: transform 0.2s;
box-shadow: 0 4px 15px rgba(34, 197, 94, 0.3);
}
.catalogue-button:hover {
transform: translateY(-2px);
background: #16a34a;
color: white;
}
.cloud-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 150px;
z-index: 1;
pointer-events: none;
overflow: hidden;
}
.cloud-far {
z-index: 1;
opacity: 0.8;
transform-origin: center;
animation: drift 60s ease-in-out infinite alternate;
}
.cloud-back {
z-index: 2;
opacity: 0.9;
transform-origin: center;
animation: drift 45s ease-in-out infinite alternate-reverse;
}
.cloud-front {
z-index: 3;
transform-origin: center;
animation: drift 30s ease-in-out infinite alternate;
}
@keyframes drift {
0% {
transform: scaleY(1) translateX(-20px);
}
100% {
transform: scaleY(1.05) translateX(20px);
}
}
</style>