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

608
frontend/src/lib/components/CameraScreen.svelte Normal file
View File

@@ -0,0 +1,608 @@
<script lang="ts">
import { onMount } from "svelte";
interface Props {
onClose: () => void;
onScanComplete: (item: any) => void;
}
let { onClose, onScanComplete }: Props = $props();
let videoElement: HTMLVideoElement;
let stream: MediaStream | null = null;
let analyzing = $state(false);
let showResult = $state(false);
let capturedImage = $state<string | null>(null);
let displayTitle = $state("");
let resultTranslateY = $state(100);
let useCamera = $state(true); // Toggle between camera and file upload
let fileInputElement: HTMLInputElement;
onMount(() => {
const initCamera = async () => {
if (useCamera) {
try {
stream = await navigator.mediaDevices.getUserMedia({
video: { facingMode: "environment" },
});
if (videoElement) {
videoElement.srcObject = stream;
}
} catch (err) {
console.error("Camera access denied:", err);
}
}
};
initCamera();
return () => {
if (stream) {
stream.getTracks().forEach((track) => track.stop());
}
};
});
function handleFileUpload(event: Event) {
const input = event.target as HTMLInputElement;
const file = input.files?.[0];
if (!file) return;
const reader = new FileReader();
reader.onload = (e) => {
const imageData = e.target?.result as string;
capturedImage = imageData;
analyzing = true;
// Simulate analysis
setTimeout(() => {
const newItem = {
id: Date.now(),
title: "Plastic Bottle",
date: new Date().toLocaleString(),
impact: "High",
imageUri: capturedImage,
};
onScanComplete(newItem);
analyzing = false;
showResult = true;
resultTranslateY = 0;
typeText();
}, 1200);
};
reader.readAsDataURL(file);
}
async function takePicture() {
analyzing = true;
const canvas = document.createElement("canvas");
canvas.width = videoElement.videoWidth;
canvas.height = videoElement.videoHeight;
const ctx = canvas.getContext("2d");
if (ctx) {
ctx.drawImage(videoElement, 0, 0);
capturedImage = canvas.toDataURL("image/png");
}
// Simulate analysis
setTimeout(() => {
const newItem = {
id: Date.now(),
title: "Plastic Bottle",
date: new Date().toLocaleString(),
impact: "High",
imageUri: capturedImage,
};
onScanComplete(newItem);
analyzing = false;
showResult = true;
resultTranslateY = 0;
typeText();
}, 1200);
}
function typeText() {
let i = 0;
const txt = "Detected: Plastic Bottle";
const interval = setInterval(() => {
displayTitle = txt.substring(0, i);
i++;
if (i > txt.length) clearInterval(interval);
}, 50);
}
function handleClose() {
if (stream) {
stream.getTracks().forEach((track) => track.stop());
}
onClose();
}
</script>
<div class="camera-container">
{#if capturedImage}
<img src={capturedImage} alt="Captured" class="captured-image" />
{:else if useCamera}
<video
bind:this={videoElement}
autoplay
playsinline
class="video-element"
></video>
{:else}
<!-- File upload placeholder -->
<div class="upload-placeholder">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="#4ade80"
class="upload-icon"
>
<path
d="M194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H194.6zM256 384C309 384 352 341 352 288C352 234.1 309 192 256 192C202.1 192 160 234.1 160 288C160 341 202.1 384 256 384z"
/>
</svg>
<p class="upload-text">Click the button below to upload an image</p>
</div>
{/if}
<div class="camera-overlay">
{#if !showResult}
<button class="close-btn" on:click={handleClose}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="white"
>
<path
d="M256 48C141.1 48 48 141.1 48 256s93.1 208 208 208 208-93.1 208-208S370.9 48 256 48zm52.7 283.3L256 278.6l-52.7 52.7c-6.2 6.2-16.4 6.2-22.6 0-3.1-3.1-4.7-7.2-4.7-11.3 0-4.1 1.6-8.2 4.7-11.3l52.7-52.7-52.7-52.7c-3.1-3.1-4.7-7.2-4.7-11.3 0-4.1 1.6-8.2 4.7-11.3 6.2-6.2 16.4-6.2 22.6 0l52.7 52.7 52.7-52.7c6.2-6.2 16.4-6.2 22.6 0 6.2 6.2 6.2 16.4 0 22.6L278.6 256l52.7 52.7c6.2 6.2 6.2 16.4 0 22.6-6.2 6.3-16.4 6.3-22.6 0z"
/>
</svg>
</button>
<!-- Toggle button between camera and upload -->
<button
class="mode-toggle-btn"
on:click={() => (useCamera = !useCamera)}
>
{#if useCamera}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="white"
>
<path
d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"
/>
</svg>
<span>Upload File</span>
{:else}
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="white"
>
<path
d="M194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H194.6zM256 384C309 384 352 341 352 288C352 234.1 309 192 256 192C202.1 192 160 234.1 160 288C160 341 202.1 384 256 384z"
/>
</svg>
<span>Use Camera</span>
{/if}
</button>
{/if}
{#if analyzing}
<div class="loading-container">
<div class="spinner"></div>
</div>
{/if}
{#if !analyzing && !showResult}
<div class="shutter-container">
{#if useCamera}
<button class="shutter-button" on:click={takePicture}
></button>
{:else}
<input
type="file"
accept="image/*"
bind:this={fileInputElement}
on:change={handleFileUpload}
style="display: none;"
/>
<button
class="shutter-button upload-button"
on:click={() => fileInputElement.click()}
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="#0f172a"
>
<path
d="M288 109.3V352c0 17.7-14.3 32-32 32s-32-14.3-32-32V109.3l-73.4 73.4c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l128-128c12.5-12.5 32.8-12.5 45.3 0l128 128c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L288 109.3zM64 352H192c0 35.3 28.7 64 64 64s64-28.7 64-64H448c35.3 0 64 28.7 64 64v32c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V416c0-35.3 28.7-64 64-64zM432 456a24 24 0 1 0 0-48 24 24 0 1 0 0 48z"
/>
</svg>
</button>
{/if}
</div>
{/if}
{#if showResult}
<div
class="result-sheet"
style="transform: translateY({resultTranslateY}%);"
>
<button class="sheet-close-btn" on:click={handleClose}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
fill="#0f172a"
>
<path
d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"
/>
</svg>
</button>
<h2 class="sheet-title">{displayTitle}</h2>
<p class="alternatives-label">Top Sustainable Alternatives</p>
<div class="alternatives-scroll">
<div class="alternative-card glass-bottle">
<div class="alt-header">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 384 512"
fill="#60a5fa"
>
<path
d="M192 512C86 512 0 426 0 320C0 228.8 130.2 57.7 166.6 11.7C172.6 4.2 181.5 0 191.1 0h1.8c9.6 0 18.5 4.2 24.5 11.7C253.8 57.7 384 228.8 384 320c0 106-86 192-192 192zM96 336c0-8.8-7.2-16-16-16s-16 7.2-16 16c0 61.9 50.1 112 112 112 8.8 0 16-7.2 16-16s-7.2-16-16-16c-44.2 0-80-35.8-80-80z"
/>
</svg>
<span class="rating">★ 4.9</span>
</div>
<h3 class="alt-name">Glass Bottle</h3>
<p class="alt-price">$2.49</p>
</div>
<div class="alternative-card boxed-water">
<div class="alt-header">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
fill="#a78bfa"
>
<path
d="M384 480H64c-35.3 0-64-28.7-64-64V96C0 60.7 28.7 32 64 32h320c35.3 0 64 28.7 64 64v320c0 35.3-28.7 64-64 64z"
/>
</svg>
<span class="rating">★ 4.7</span>
</div>
<h3 class="alt-name">Boxed Water</h3>
<p class="alt-price">$1.89</p>
</div>
<div class="alternative-card aluminum">
<div class="alt-header">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="#9ca3af"
>
<path
d="M0 192c0-35.3 28.7-64 64-64c.5 0 1.1 0 1.6 0C73 91.5 105.3 64 144 64c15 0 29 4.1 40.9 11.2C198.2 49.6 225.1 32 256 32s57.8 17.6 71.1 43.2C339 68.1 353 64 368 64c38.7 0 71 27.5 78.4 64c.5 0 1.1 0 1.6 0c35.3 0 64 28.7 64 64c0 11.7-3.1 22.6-8.6 32H8.6C3.1 214.6 0 203.7 0 192zm0 91.4C0 268.3 12.3 256 27.4 256H484.6c15.1 0 27.4 12.3 27.4 27.4c0 70.5-44.4 130.7-106.7 154.1L403.5 452c-2 16-15.6 28-31.8 28H140.2c-16.1 0-29.8-12-31.8-28l-1.8-14.4C44.4 414.1 0 353.9 0 283.4z"
/>
</svg>
<span class="rating">★ 4.5</span>
</div>
<h3 class="alt-name">Aluminum</h3>
<p class="alt-price">$1.29</p>
</div>
</div>
<button class="report-btn" on:click={handleClose}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
fill="#ef4444"
>
<path
d="M64 32C64 14.3 49.7 0 32 0S0 14.3 0 32V64 368 480c0 17.7 14.3 32 32 32s32-14.3 32-32V352l64.3-16.1c41.1-10.3 84.6-5.5 122.5 13.4c44.2 22.1 95.5 24.8 141.7 7.4l34.7-13c12.5-4.7 20.8-16.6 20.8-30V66.1c0-23-24.2-38-44.8-27.7l-9.6 4.8c-46.3 23.2-100.8 23.2-147.1 0c-35.1-17.6-75.4-22-113.5-12.5L64 48V32z"
/>
</svg>
<span>Report Greenwashing</span>
</button>
</div>
{/if}
</div>
</div>
<style>
.camera-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #000;
z-index: 1000;
}
.video-element,
.captured-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.camera-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.close-btn {
position: absolute;
top: 60px;
left: 20px;
background: none;
border: none;
cursor: pointer;
padding: 0;
z-index: 10;
}
.close-btn svg {
width: 40px;
height: 40px;
}
.loading-container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.spinner {
width: 50px;
height: 50px;
border: 4px solid rgba(74, 222, 128, 0.2);
border-top-color: #4ade80;
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.shutter-container {
position: absolute;
bottom: 50px;
width: 100%;
display: flex;
justify-content: center;
}
.shutter-button {
width: 80px;
height: 80px;
border-radius: 40px;
background-color: white;
border: 6px solid #e2e8f0;
cursor: pointer;
transition: transform 0.2s;
}
.shutter-button:active {
transform: scale(0.9);
}
.result-sheet {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
background-color: white;
border-top-left-radius: 32px;
border-top-right-radius: 32px;
padding: 32px;
transition: transform 0.5s ease-out;
overflow-y: auto;
}
.sheet-close-btn {
background: none;
border: none;
cursor: pointer;
padding: 0;
align-self: flex-end;
display: block;
margin-left: auto;
}
.sheet-close-btn svg {
width: 24px;
height: 24px;
}
.sheet-title {
font-size: 28px;
font-weight: 800;
margin-top: 12px;
margin-bottom: 24px;
color: #0f172a;
}
.alternatives-label {
color: #64748b;
margin-bottom: 12px;
font-weight: bold;
font-size: 14px;
}
.alternatives-scroll {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 16px;
margin-bottom: 20px;
}
.alternatives-scroll::-webkit-scrollbar {
height: 6px;
}
.alternatives-scroll::-webkit-scrollbar-track {
background: #f1f5f9;
border-radius: 3px;
}
.alternatives-scroll::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 3px;
}
.alternative-card {
min-width: 140px;
background-color: #f8fafc;
padding: 16px;
border-radius: 16px;
border: 1px solid #e2e8f0;
}
.alt-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.alt-header svg {
width: 24px;
height: 24px;
}
.rating {
font-weight: bold;
color: #f59e0b;
font-size: 14px;
}
.alt-name {
font-weight: bold;
color: #0f172a;
font-size: 16px;
margin: 4px 0;
}
.alt-price {
color: #64748b;
margin: 0;
font-size: 14px;
}
.report-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 20px auto 0;
padding: 12px 24px;
background: none;
border: none;
cursor: pointer;
color: #ef4444;
font-weight: bold;
font-size: 16px;
}
.report-btn svg {
width: 20px;
height: 20px;
}
.report-btn:hover {
opacity: 0.8;
}
.upload-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
background-color: #0f172a;
}
.upload-icon {
width: 120px;
height: 120px;
margin-bottom: 24px;
opacity: 0.8;
}
.upload-text {
color: #94a3b8;
font-size: 18px;
text-align: center;
padding: 0 32px;
}
.mode-toggle-btn {
position: absolute;
top: 60px;
right: 20px;
background: rgba(15, 23, 42, 0.8);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.mode-toggle-btn:hover {
background: rgba(15, 23, 42, 0.9);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.mode-toggle-btn svg {
width: 20px;
height: 20px;
}
.mode-toggle-btn span {
color: white;
font-size: 14px;
font-weight: 600;
white-space: nowrap;
}
.upload-button {
display: flex;
align-items: center;
justify-content: center;
background-color: white;
}
.upload-button svg {
width: 40px;
height: 40px;
}
</style>

104
frontend/src/lib/components/CloudSection.svelte Normal file
View File

@@ -0,0 +1,104 @@
<script>
export let className = "";
</script>
<div class="cloud-section-container {className}">
<!-- Top Layers -->
<svg
class="cloud-wave top-wave"
viewBox="0 0 1440 120"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<!-- Layer 1 (Back/Most Transparent) -->
<path
fill="rgba(255,255,255,0.3)"
d="M0,60 Q360,120 720,60 Q1080,0 1440,60 L1440,120 L0,120 Z"
/>
<!-- Layer 2 -->
<path
fill="rgba(255,255,255,0.6)"
d="M0,80 Q360,20 720,80 Q1080,140 1440,80 L1440,120 L0,120 Z"
/>
<!-- Layer 3 (Solid White - connects to content) -->
<path
fill="#ffffff"
d="M0,100 Q360,60 720,100 Q1080,140 1440,100 L1440,120 L0,120 Z"
/>
</svg>
<div class="cloud-content-wrapper">
<slot />
</div>
<!-- Bottom Layers -->
<svg
class="cloud-wave bottom-wave"
viewBox="0 0 1440 120"
preserveAspectRatio="none"
xmlns="http://www.w3.org/2000/svg"
>
<!-- Layer 1 (Solid White - connects from content) -->
<path
fill="#ffffff"
d="M0,0 L1440,0 L1440,20 Q1080,60 720,20 Q360,-20 0,20 Z"
/>
<!-- Layer 2 -->
<path
fill="rgba(255,255,255,0.6)"
d="M0,0 L1440,0 L1440,40 Q1080,0 720,40 Q360,80 0,40 Z"
/>
<!-- Layer 3 (Front/Most Transparent) -->
<path
fill="rgba(255,255,255,0.3)"
d="M0,0 L1440,0 L1440,60 Q1080,20 720,60 Q360,100 0,60 Z"
/>
</svg>
</div>
<style>
.cloud-section-container {
position: relative;
margin: 40px auto;
max-width: 1200px;
z-index: 10;
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
}
.cloud-content-wrapper {
background: #ffffff; /* White */
padding: 20px 60px;
position: relative;
z-index: 2;
min-height: 100px;
margin-top: -2px;
margin-bottom: -2px;
}
.cloud-wave {
display: block;
width: 100%;
height: 80px;
pointer-events: none;
}
.top-wave {
z-index: 3;
position: relative;
}
.bottom-wave {
z-index: 1;
position: relative;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cloud-content-wrapper {
padding: 20px 20px;
}
.cloud-wave {
height: 50px;
}
}
</style>

280
frontend/src/lib/components/CustomTabBar.svelte Normal file
View File

@@ -0,0 +1,280 @@
<script lang="ts">
import { goto } from "$app/navigation";
interface Props {
currentRoute: string;
}
let { currentRoute }: Props = $props();
const tabs = [
{
name: "Mission",
route: "/community",
icon: "people",
activeColor: "#f472b6",
},
{
name: "History",
route: "/",
icon: "time",
activeColor: "#1ed760",
},
{
name: "Home",
route: "/", // Hidden - for center button only
icon: "home",
activeColor: "#4ade80",
isCenter: true,
},
{
name: "Report",
route: "/report",
icon: "megaphone",
activeColor: "#ef4444",
},
{
name: "Ask AI",
route: "/chat",
icon: "chatbubble-ellipses",
activeColor: "#4ade80",
},
];
function navigateToTab(route: string) {
goto(route);
}
function getIconPath(icon: string, isFocused: boolean): string {
switch (icon) {
case "people":
return isFocused
? "M166.5 83.5C148.6 98.07 128 111.1 104.1 123.5C119.9 145.9 131.8 171.9 138.5 200h98.7C226.5 138.5 192 88.96 146.5 63.36C154.2 71.48 161.6 77.25 166.5 83.5zM196.7 368H159.3c6.672 28.11 18.53 54.08 34.39 76.52C209.5 422.1 226.1 393.3 237.3 368zM104.1 388.5C128 400.9 148.6 413.9 166.5 428.5C161.6 434.8 154.2 440.5 146.5 448.6C155.2 456.8 166.5 462.5 179.2 464.1C184.1 456.2 192.5 447.7 203.5 437.5C221.4 422.9 242 409.9 265.9 397.5C250.1 375.1 238.2 349.1 231.5 320H116.5C109.8 348.1 97.94 374.1 82.14 396.5zM365.9 248C359.2 219.9 347.3 193.9 331.5 171.5C307.6 183.9 287 196.9 269.1 211.5C274 217.8 281.4 223.5 289.1 231.6C280.4 239.8 269.1 245.5 256.4 247.1C251.5 239.2 243.1 230.7 232.1 220.5C214.2 205.9 193.6 192.9 169.7 180.5C185.5 158.1 197.4 132.1 204.1 104h114.1c6.672 28.11 18.53 54.08 34.39 76.52C368.5 158.1 389.1 145.1 407 130.5C402.1 124.2 394.6 118.5 386.9 110.4C395.6 102.2 406.9 96.54 419.6 94.93C424.5 102.8 432.9 111.3 443.9 121.5C461.8 136.1 482.4 149.1 506.3 161.5C490.5 183.9 478.6 209.9 471.9 238h-98.66C380.1 269.5 391.9 295.5 407.7 317.9C383.8 330.3 363.2 343.3 345.3 357.9C350.2 364.2 357.6 369.9 365.3 378C356.6 386.2 345.3 391.9 332.6 393.5C327.7 385.6 319.3 377.1 308.3 366.9C290.4 352.3 269.8 339.3 245.9 326.9C226.1 304.5 213.8 278.5 207.1 248h158.8z M288 0C422.4 0 512 89.6 512 224S422.4 448 288 448S64 358.4 64 224S153.6 0 288 0z"
: "M166.5 83.5C148.6 98.07 128 111.1 104.1 123.5C119.9 145.9 131.8 171.9 138.5 200h98.7C226.5 138.5 192 88.96 146.5 63.36C154.2 71.48 161.6 77.25 166.5 83.5zM196.7 368H159.3c6.672 28.11 18.53 54.08 34.39 76.52C209.5 422.1 226.1 393.3 237.3 368zM104.1 388.5C128 400.9 148.6 413.9 166.5 428.5C161.6 434.8 154.2 440.5 146.5 448.6C155.2 456.8 166.5 462.5 179.2 464.1C184.1 456.2 192.5 447.7 203.5 437.5C221.4 422.9 242 409.9 265.9 397.5C250.1 375.1 238.2 349.1 231.5 320H116.5C109.8 348.1 97.94 374.1 82.14 396.5zM365.9 248C359.2 219.9 347.3 193.9 331.5 171.5C307.6 183.9 287 196.9 269.1 211.5C274 217.8 281.4 223.5 289.1 231.6C280.4 239.8 269.1 245.5 256.4 247.1C251.5 239.2 243.1 230.7 232.1 220.5C214.2 205.9 193.6 192.9 169.7 180.5C185.5 158.1 197.4 132.1 204.1 104h114.1c6.672 28.11 18.53 54.08 34.39 76.52C368.5 158.1 389.1 145.1 407 130.5C402.1 124.2 394.6 118.5 386.9 110.4C395.6 102.2 406.9 96.54 419.6 94.93C424.5 102.8 432.9 111.3 443.9 121.5C461.8 136.1 482.4 149.1 506.3 161.5C490.5 183.9 478.6 209.9 471.9 238h-98.66C380.1 269.5 391.9 295.5 407.7 317.9C383.8 330.3 363.2 343.3 345.3 357.9C350.2 364.2 357.6 369.9 365.3 378C356.6 386.2 345.3 391.9 332.6 393.5C327.7 385.6 319.3 377.1 308.3 366.9C290.4 352.3 269.8 339.3 245.9 326.9C226.1 304.5 213.8 278.5 207.1 248h158.8z M288 0C422.4 0 512 89.6 512 224S422.4 448 288 448S64 358.4 64 224S153.6 0 288 0z";
case "time":
return isFocused
? "M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z"
: "M256 0a256 256 0 1 1 0 512A256 256 0 1 1 256 0zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z";
case "newspaper":
return isFocused
? "M96 0C43 0 0 43 0 96V416c0 53 43 96 96 96H384h32c17.7 0 32-14.3 32-32s-14.3-32-32-32V384c17.7 0 32-14.3 32-32V32c0-17.7-14.3-32-32-32H384 96zm0 384H352v64H96c-17.7 0-32-14.3-32-32s14.3-32 32-32zm32-240c0-8.8 7.2-16 16-16H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16zm16 48H336c8.8 0 16 7.2 16 16s-7.2 16-16 16H144c-8.8 0-16-7.2-16-16s7.2-16 16-16z"
: "M96 96c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H80c-44.2 0-80-35.8-80-80V128c0-17.7 14.3-32 32-32s32 14.3 32 32V400c0 8.8 7.2 16 16 16s16-7.2 16-16V96zm64 24v80c0 13.3 10.7 24 24 24H296c13.3 0 24-10.7 24-24V120c0-13.3-10.7-24-24-24H184c-13.3 0-24 10.7-24 24zm128 0v80H192V120H288zM160 280c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24zm0 80c0-13.3 10.7-24 24-24H424c13.3 0 24 10.7 24 24s-10.7 24-24 24H184c-13.3 0-24-10.7-24-24z";
case "megaphone":
return isFocused
? "M480 32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9L381.7 53c-48 48-113.1 75-181 75H192 160 64c-35.3 0-64 28.7-64 64v96c0 35.3 28.7 64 64 64l0 128c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V352l8.7 0c67.9 0 133 27 181 75l43.6 43.6c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V300.4c18.6-8.8 32-32.5 32-60.4s-13.4-51.6-32-60.4V32zm-64 76.7V240 371.3C357.2 317.8 280.5 288 200.7 288H192V192h8.7c79.8 0 156.5-29.8 215.3-83.3z"
: "M480 32c0-12.9-7.8-24.6-19.8-29.6s-25.7-2.2-34.9 6.9L381.7 53c-48 48-113.1 75-181 75H192 160 64c-35.3 0-64 28.7-64 64v96c0 35.3 28.7 64 64 64l0 128c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32V352l8.7 0c67.9 0 133 27 181 75l43.6 43.6c9.2 9.2 22.9 11.9 34.9 6.9s19.8-16.6 19.8-29.6V300.4c18.6-8.8 32-32.5 32-60.4s-13.4-51.6-32-60.4V32zM288 240c0 8.8-7.2 16-16 16H192V192h80c8.8 0 16 7.2 16 16z";
case "chatbubble-ellipses":
return isFocused
? "M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3 0 0 0 0 0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zM128 208a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm128 0a32 32 0 1 1 0 64 32 32 0 1 1 0-64zm96 32a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
: "M256 448c141.4 0 256-93.1 256-208S397.4 32 256 32S0 125.1 0 240c0 45.1 17.7 86.8 47.7 120.9c-1.9 24.5-11.4 46.3-21.4 62.9c-5.5 9.2-11.1 16.6-15.2 21.6c-2.1 2.5-3.7 4.4-4.9 5.7c-.6 .6-1 1.1-1.3 1.4l-.3 .3 0 0 0 0 0 0 0 0c-4.6 4.6-5.9 11.4-3.4 17.4c2.5 6 8.3 9.9 14.8 9.9c28.7 0 57.6-8.9 81.6-19.3c22.9-10 42.4-21.9 54.3-30.6c31.8 11.5 67 17.9 104.1 17.9zm24-240a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm-72 0a24 24 0 1 1 48 0 24 24 0 1 1 -48 0zm-72 0a24 24 0 1 1 48 0 24 24 0 1 1 -48 0z";
default:
return "";
}
}
function handleScan() {
// This will be handled by parent
const event = new CustomEvent("scan");
window.dispatchEvent(event);
}
</script>
<div class="tab-bar-wrapper">
<!-- Main Tab Bar -->
<div class="tab-bar">
<div class="tab-bar-inner">
{#each tabs as tab, index}
{#if !tab.isCenter}
<button
class="tab-item"
class:active={currentRoute === tab.route}
on:click={() => navigateToTab(tab.route)}
>
<div
class="tab-content"
class:active={currentRoute === tab.route}
style="background-color: {currentRoute === tab.route
? `${tab.activeColor}15`
: 'transparent'};"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill={currentRoute === tab.route ? tab.activeColor : "#94a3b8"}
>
<path
d={getIconPath(
tab.icon,
currentRoute === tab.route
)}
/>
</svg>
<span
style="color: {currentRoute === tab.route
? tab.activeColor
: '#94a3b8'};"
>
{tab.name}
</span>
</div>
</button>
{/if}
{#if index === 1}
<div class="tab-spacer"></div>
{/if}
{/each}
</div>
</div>
<!-- Center Scan Button -->
<div class="center-button-wrapper">
<div class="center-button-ring">
<button class="center-button" on:click={handleScan}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="#052e16"
>
<path
d="M194.6 32H317.4C338.1 32 356.4 45.22 362.9 64.82L373.3 96H448C483.3 96 512 124.7 512 160V416C512 451.3 483.3 480 448 480H64C28.65 480 0 451.3 0 416V160C0 124.7 28.65 96 64 96H138.7L149.1 64.82C155.6 45.22 173.9 32 194.6 32H194.6zM256 384C309 384 352 341 352 288C352 234.1 309 192 256 192C202.1 192 160 234.1 160 288C160 341 202.1 384 256 384z"
/>
</svg>
</button>
</div>
</div>
</div>
<style>
.tab-bar-wrapper {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding-bottom: 20px;
padding-left: 12px;
padding-right: 12px;
z-index: 100;
pointer-events: none;
}
.tab-bar {
height: 85px;
border-radius: 32px;
background: rgba(30, 41, 59, 0.8);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow:
0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06),
0 20px 25px -5px rgba(0, 0, 0, 0.4);
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 1.5px solid rgba(255, 255, 255, 0.15);
pointer-events: all;
}
.tab-bar-inner {
display: flex;
height: 100%;
align-items: center;
padding: 0 16px;
}
.tab-item {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 12px 0;
background: none;
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.tab-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 18px;
transition: all 0.3s ease;
}
.tab-content svg {
width: 26px;
height: 26px;
transition: all 0.3s ease;
}
.tab-content span {
font-size: 10px;
font-weight: 500;
margin-top: 4px;
letter-spacing: 0.2px;
transition: all 0.3s ease;
}
.tab-content.active span {
font-weight: 600;
}
.tab-spacer {
width: 80px;
}
.center-button-wrapper {
position: absolute;
bottom: 48px;
left: 50%;
transform: translateX(-50%);
pointer-events: all;
}
.center-button-ring {
position: relative;
width: 90px;
height: 90px;
border-radius: 45px;
background: rgba(74, 222, 128, 0.1);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border: 1.5px solid rgba(74, 222, 128, 0.3);
display: flex;
align-items: center;
justify-content: center;
}
.center-button {
width: 65px;
height: 65px;
border-radius: 33px;
background: linear-gradient(135deg, #4ade80 0%, #22c55e 50%, #16a34a 100%);
border: 2.5px solid rgba(15, 23, 42, 0.5);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 12px 20px rgba(74, 222, 128, 0.6),
0 4px 8px rgba(0, 0, 0, 0.2);
}
.center-button:hover {
transform: scale(1.05);
box-shadow:
0 16px 24px rgba(74, 222, 128, 0.7),
0 6px 10px rgba(0, 0, 0, 0.3);
}
.center-button:active {
transform: scale(0.98);
}
.center-button svg {
width: 30px;
height: 30px;
}
</style>

295
frontend/src/lib/components/HomeScreen.svelte Normal file
View File

@@ -0,0 +1,295 @@
<script lang="ts">
import { goto } from "$app/navigation";
interface RecentItem {
id: number;
title: string;
date: string;
impact: string;
imageUri: string | null;
}
interface Props {
recentItems: RecentItem[];
onToggleCamera: () => void;
}
let { recentItems, onToggleCamera }: Props = $props();
function navigateToDetails(item: RecentItem) {
// Store item in sessionStorage for the details page
sessionStorage.setItem("selectedItem", JSON.stringify(item));
goto("/report-details");
}
</script>
<div class="home-container">
<div class="safe-area">
<div class="header">
<div>
<h1 class="app-name">Ethix</h1>
<p class="tagline">Truth in every scan.</p>
</div>
<div class="profile-avatar">
<span>YO</span>
</div>
</div>
<div class="scroll-content">
<button class="card scan-card" on:click={onToggleCamera}>
<div class="card-inner">
<svg
class="scan-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="#4ade80"
>
<path
d="M156.6 384.9L125.7 353.1C117.2 345.5 114.2 333.1 117.1 321.8C120.1 312.9 124.1 301.3 129.8 288H24C15.38 288 7.414 283.4 3.146 275.9C-1.123 268.4-1.042 259.2 3.357 251.8L55.83 163.3C68.79 141.4 92.33 127.1 117.8 127.1H200C202.4 124 204.8 120.3 207.2 116.7C289.1-4.07 411.1-8.142 483.9 5.275C495.6 7.414 504.6 16.43 506.7 28.06C520.1 100.9 516.1 222.9 395.3 304.8C391.8 307.2 387.1 309.6 384 311.1V394.2C384 419.7 370.6 443.2 348.7 456.2L260.2 508.6C252.8 513 243.6 513.1 236.1 508.9C228.6 504.6 224 496.6 224 488V380.8C209.9 385.6 197.6 389.7 188.3 392.7C177.1 396.3 164.9 393.2 156.6 384.9V384.9zM384 167.1C406.1 167.1 424 150.1 424 127.1C424 105.9 406.1 87.1 384 87.1C361.9 87.1 344 105.9 344 127.1C344 150.1 361.9 167.1 384 167.1z"
/>
</svg>
<div class="card-text-container">
<h2 class="card-title">Start Scanning</h2>
<p class="card-text">Identify harmful products</p>
</div>
<svg
class="arrow-icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 320 512"
fill="#64748b"
>
<path
d="M96 480c-8.188 0-16.38-3.125-22.62-9.375c-12.5-12.5-12.5-32.75 0-45.25L242.8 256L73.38 86.63c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l192 192c12.5 12.5 12.5 32.75 0 45.25l-192 192C112.4 476.9 104.2 480 96 480z"
/>
</svg>
</div>
</button>
<div class="recent-section">
<h2 class="section-title">Recent Activity</h2>
{#if recentItems.length === 0}
<p class="no-items">No recent scans.</p>
{:else}
{#each recentItems as item (item.id)}
<button class="recent-card" on:click={() => navigateToDetails(item)}>
<div class="recent-icon-container">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512"
fill="#94a3b8"
>
<path
d="M256 0C397.4 0 512 114.6 512 256C512 397.4 397.4 512 256 512C201.7 512 151.2 495 109.7 466.1C95.2 455.1 91.64 436 101.8 421.5C111.9 407 131.8 403.5 146.3 413.6C177.4 435.3 215.2 448 256 448C362 448 448 362 448 256C448 149.1 362 64 256 64C202.1 64 155 85.46 120.2 120.2L151 151C166.1 166.1 155.4 192 134.1 192H24C10.75 192 0 181.3 0 168V57.94C0 36.56 25.85 25.85 40.97 40.97L74.98 74.98C121.3 28.69 185.3 0 256 0L256 0zM256 128C269.3 128 280 138.7 280 152V246.1L344.1 311C354.3 320.4 354.3 335.6 344.1 344.1C335.6 354.3 320.4 354.3 311 344.1L239 272.1C234.5 268.5 232 262.4 232 256V152C232 138.7 242.7 128 256 128V128z"
/>
</svg>
</div>
<div class="recent-info">
<h3 class="recent-title">{item.title}</h3>
<p class="recent-date">{item.date}</p>
</div>
<div
class="impact-badge"
class:high-impact={item.impact === "High"}
class:low-impact={item.impact === "Low"}
>
{item.impact}
</div>
</button>
{/each}
{/if}
</div>
</div>
</div>
</div>
<style>
.home-container {
width: 100%;
height: 100vh;
background-color: #0f172a;
overflow-y: auto;
}
.safe-area {
padding-top: 50px;
padding-bottom: 140px;
}
.header {
display: flex;
justify-content: space-between;
padding: 24px;
align-items: center;
}
.app-name {
font-size: 28px;
font-weight: 800;
color: white;
margin: 0;
}
.tagline {
color: #94a3b8;
margin: 0;
margin-top: 4px;
}
.profile-avatar {
width: 40px;
height: 40px;
background-color: #334155;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
color: white;
}
.scroll-content {
padding: 24px;
padding-bottom: 140px;
}
.card {
background-color: rgba(30, 41, 59, 0.9);
padding: 20px;
border-radius: 24px;
border: 1px solid #334155;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
border: none;
text-align: left;
}
.card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}
.scan-card {
margin-bottom: 24px;
}
.card-inner {
display: flex;
align-items: center;
gap: 16px;
}
.scan-icon {
width: 56px;
height: 56px;
flex-shrink: 0;
}
.card-text-container {
flex: 1;
}
.card-title {
color: white;
font-size: 20px;
font-weight: bold;
margin: 0;
}
.card-text {
color: #94a3b8;
font-size: 14px;
margin: 4px 0 0 0;
}
.arrow-icon {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.recent-section {
margin-top: 24px;
}
.section-title {
color: white;
font-weight: bold;
font-size: 20px;
margin-bottom: 16px;
}
.no-items {
color: #64748b;
}
.recent-card {
background-color: rgba(30, 41, 59, 0.9);
padding: 16px;
border-radius: 24px;
border: 1px solid #334155;
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 12px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
text-align: left;
}
.recent-card:hover {
transform: translateX(4px);
background-color: rgba(30, 41, 59, 1);
}
.recent-icon-container {
width: 48px;
height: 48px;
background-color: #334155;
border-radius: 12px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
}
.recent-icon-container svg {
width: 24px;
height: 24px;
}
.recent-info {
flex: 1;
}
.recent-title {
color: white;
font-weight: bold;
font-size: 16px;
margin: 0;
}
.recent-date {
color: #94a3b8;
font-size: 13px;
margin: 4px 0 0 0;
}
.impact-badge {
padding: 4px 10px;
border-radius: 8px;
font-size: 12px;
font-weight: bold;
}
.high-impact {
background-color: rgba(239, 68, 68, 0.2);
color: #ef4444;
}
.low-impact {
background-color: rgba(34, 197, 94, 0.2);
color: #22c55e;
}
</style>

188
frontend/src/lib/components/ParallaxLandscape.svelte Normal file
View File

@@ -0,0 +1,188 @@
<script lang="ts">
import { onMount } from "svelte";
let scrollY = 0;
let innerHeight = 0;
let mouseX = 0;
let mouseY = 0;
onMount(() => {
const handleScroll = () => {
scrollY = window.scrollY;
};
const handleMouseMove = (e: MouseEvent) => {
mouseX = (e.clientX - window.innerWidth / 2) * 0.05;
mouseY = (e.clientY - window.innerHeight / 2) * 0.05;
};
window.addEventListener("scroll", handleScroll);
window.addEventListener("mousemove", handleMouseMove);
innerHeight = window.innerHeight;
return () => {
window.removeEventListener("scroll", handleScroll);
window.removeEventListener("mousemove", handleMouseMove);
};
});
// Calculate opacity for transition effects
$: progress = Math.min(Math.max(scrollY / innerHeight, 0), 1);
</script>
<svelte:window bind:innerHeight />
<div class="parallax-container">
<!-- 1. Sky Gradient -->
<div
class="layer sky"
style="background: linear-gradient(to bottom,
rgb({100 + 100 * progress}, {110 + 100 * progress}, {120 + 135 * progress}),
rgb({180 + 20 * progress}, {190 + 30 * progress}, {200 + 55 * progress}));"
>
</div>
<!-- 2. Sun/Moon -->
<div
class="layer sun-layer"
style="transform: translate3d({scrollY * 0.05 + mouseX * 0.2}px, {scrollY * 0.1 + mouseY * 0.2}px, 0);"
>
<div class="sun"></div>
</div>
<!-- 3. Clouds (Back) -->
<div
class="layer clouds-back"
style="transform: translate3d({-scrollY * 0.05 + mouseX * 0.5}px, {scrollY * 0.15 + mouseY * 0.1}px, 0);"
>
<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path fill="rgba(255,255,255,0.4)" d="M0,128L48,138.7C96,149,192,171,288,165.3C384,160,480,128,576,128C672,128,768,160,864,181.3C960,203,1056,213,1152,202.7C1248,192,1344,160,1392,144L1440,128L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
</div>
<!-- 4. City Skyline (Polluted) -->
<div
class="layer city-layer"
style="
transform: translate3d({mouseX * 0.8}px, {scrollY * 0.2}px, 0);
opacity: {1 - progress * 1.5};
"
>
<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path fill="#475569" d="M160,224L160,320L288,320L288,160L416,160L416,320L544,320L544,192L672,192L672,320L800,320L800,128L928,128L928,320L1056,320L1056,224L1184,224L1184,320L1312,320L1312,160L1440,160L1440,320L0,320L0,224Z"></path>
<!-- Factory Smoke -->
<circle cx="350" cy="140" r="20" fill="rgba(80,80,80,0.5)" />
<circle cx="370" cy="120" r="25" fill="rgba(80,80,80,0.4)" />
</svg>
</div>
<!-- 5. Mountains -->
<div
class="layer mountains"
style="transform: translate3d({mouseX * 0.3}px, {scrollY * 0.35}px, 0);"
>
<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path fill="#3b82f6" fill-opacity="0.6" d="M0,192L60,197.3C120,203,240,213,360,202.7C480,192,600,160,720,138.7C840,117,960,107,1080,117.3C1200,128,1320,160,1380,176L1440,192L1440,320L1380,320C1320,320,1200,320,1080,320C960,320,840,320,720,320C600,320,480,320,360,320C240,320,120,320,60,320L0,320Z"></path>
</svg>
</div>
<!-- 6. Rolling Hills -->
<div
class="layer hills-mid"
style="transform: translate3d({mouseX * 0.5}px, {scrollY * 0.5}px, 0);"
>
<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path fill="#22c55e" d="M0,256L48,229.3C96,203,192,149,288,154.7C384,160,480,224,576,234.7C672,245,768,203,864,186.7C960,171,1056,181,1152,197.3C1248,213,1344,235,1392,245.3L1440,256L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
</svg>
</div>
<!-- 7. Close Trees (Foreground) -->
<div
class="layer trees-front"
style="transform: translate3d({mouseX * 1.2}px, {scrollY * 0.75}px, 0);"
>
<svg viewBox="0 0 1440 320" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
<path fill="#166534" d="M0,288L48,272C96,256,192,224,288,213.3C384,203,480,213,576,229.3C672,245,768,267,864,250.7C960,235,1056,181,1152,165.3C1248,149,1344,171,1392,181.3L1440,192L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
<!-- Simple Trees -->
<path fill="#14532d" d="M100,280 L140,150 L180,280 Z" />
<path fill="#14532d" d="M1100,300 L1150,120 L1200,300 Z" />
<circle cx="140" cy="160" r="35" fill="#16a34a" />
<circle cx="1150" cy="130" r="45" fill="#16a34a" />
</svg>
</div>
</div>
<style>
.parallax-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.layer {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
will-change: transform;
}
.sun {
width: 120px;
height: 120px;
background: radial-gradient(circle, #fef3c7 0%, #fde047 30%, #fbbf24 60%, #f59e0b 100%);
border-radius: 50%;
position: absolute;
top: 20%;
right: 12%;
box-shadow:
0 0 40px rgba(254, 243, 199, 1),
0 0 80px rgba(251, 191, 36, 0.8),
0 0 120px rgba(251, 191, 36, 0.6),
0 0 180px rgba(245, 158, 11, 0.4);
animation: sun-glow 4s ease-in-out infinite;
}
@keyframes sun-glow {
0%, 100% {
box-shadow:
0 0 40px rgba(254, 243, 199, 1),
0 0 80px rgba(251, 191, 36, 0.8),
0 0 120px rgba(251, 191, 36, 0.6),
0 0 180px rgba(245, 158, 11, 0.4);
}
50% {
box-shadow:
0 0 50px rgba(254, 243, 199, 1),
0 0 100px rgba(251, 191, 36, 0.9),
0 0 150px rgba(251, 191, 36, 0.7),
0 0 220px rgba(245, 158, 11, 0.5);
}
}
/* SVG containers aligned to bottom */
.clouds-back, .city-layer, .mountains, .hills-mid, .trees-front {
display: flex;
align-items: flex-end;
}
/* Scale SVGs to cover width, keep height proportional-ish */
svg {
width: 100%;
height: auto;
min-height: 40vh; /* Ensure they take up space */
}
/* Mobile adjustment */
@media (max-width: 768px) {
svg {
min-height: 30vh;
transform: scale(1.2); /* Zoom in for mobile */
}
}
</style>

234
frontend/src/lib/components/ProductCarousel3D.svelte Normal file
View File

@@ -0,0 +1,234 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import * as THREE from 'three';
interface Props {
productIndex: number;
color: string;
}
let { productIndex, color }: Props = $props();
let container: HTMLDivElement;
let scene: THREE.Scene;
let camera: THREE.PerspectiveCamera;
let renderer: THREE.WebGLRenderer;
let currentMesh: THREE.Group;
let animationId: number;
// Product colors
const productColors = {
0: 0x1ed760, // Water bottle - green
1: 0xe91429, // Plastic bag - red
2: 0xf59b23 // Coffee cup - orange
};
function createWaterBottle(): THREE.Group {
const group = new THREE.Group();
const material = new THREE.MeshPhongMaterial({
color: 0x4488ff,
transparent: true,
opacity: 0.7,
shininess: 100,
});
// Main body - tall cylinder
const bodyGeometry = new THREE.CylinderGeometry(0.4, 0.45, 1.8, 32);
const body = new THREE.Mesh(bodyGeometry, material);
body.position.y = 0;
group.add(body);
// Neck - smaller cylinder
const neckGeometry = new THREE.CylinderGeometry(0.15, 0.25, 0.4, 32);
const neck = new THREE.Mesh(neckGeometry, material);
neck.position.y = 1.1;
group.add(neck);
// Cap - blue solid
const capMaterial = new THREE.MeshPhongMaterial({ color: 0x2255aa, shininess: 80 });
const capGeometry = new THREE.CylinderGeometry(0.18, 0.18, 0.15, 32);
const cap = new THREE.Mesh(capGeometry, capMaterial);
cap.position.y = 1.35;
group.add(cap);
// Label - wrap around middle
const labelMaterial = new THREE.MeshPhongMaterial({ color: 0x88ccff });
const labelGeometry = new THREE.CylinderGeometry(0.42, 0.47, 0.6, 32, 1, true);
const label = new THREE.Mesh(labelGeometry, labelMaterial);
label.position.y = 0;
group.add(label);
return group;
}
function createPlasticBag(): THREE.Group {
const group = new THREE.Group();
const material = new THREE.MeshPhongMaterial({
color: 0xffffff,
transparent: true,
opacity: 0.85,
side: THREE.DoubleSide,
});
// Main bag body - box shape
const bagGeometry = new THREE.BoxGeometry(1.2, 1.5, 0.4);
const bag = new THREE.Mesh(bagGeometry, material);
bag.position.y = -0.2;
group.add(bag);
// Left handle
const handleShape = new THREE.Shape();
handleShape.moveTo(-0.1, 0);
handleShape.lineTo(0.1, 0);
handleShape.lineTo(0.1, 0.5);
handleShape.quadraticCurveTo(0.0, 0.7, -0.1, 0.5);
handleShape.lineTo(-0.1, 0);
const extrudeSettings = { depth: 0.05, bevelEnabled: false };
const handleGeometry = new THREE.ExtrudeGeometry(handleShape, extrudeSettings);
const leftHandle = new THREE.Mesh(handleGeometry, material);
leftHandle.position.set(-0.35, 0.55, 0);
group.add(leftHandle);
const rightHandle = new THREE.Mesh(handleGeometry, material);
rightHandle.position.set(0.35, 0.55, 0);
group.add(rightHandle);
return group;
}
function createCoffeeCup(): THREE.Group {
const group = new THREE.Group();
// Cup body - tapered cylinder (brown cardboard)
const cupMaterial = new THREE.MeshPhongMaterial({ color: 0x8B4513 });
const cupGeometry = new THREE.CylinderGeometry(0.45, 0.35, 1.4, 32);
const cup = new THREE.Mesh(cupGeometry, cupMaterial);
cup.position.y = 0;
group.add(cup);
// Green sleeve
const sleeveMaterial = new THREE.MeshPhongMaterial({ color: 0x1ed760 });
const sleeveGeometry = new THREE.CylinderGeometry(0.47, 0.42, 0.5, 32, 1, true);
const sleeve = new THREE.Mesh(sleeveGeometry, sleeveMaterial);
sleeve.position.y = -0.1;
group.add(sleeve);
// White lid
const lidMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
const lidGeometry = new THREE.CylinderGeometry(0.48, 0.45, 0.15, 32);
const lid = new THREE.Mesh(lidGeometry, lidMaterial);
lid.position.y = 0.75;
group.add(lid);
// Lid dome
const domeGeometry = new THREE.SphereGeometry(0.35, 32, 16, 0, Math.PI * 2, 0, Math.PI / 2);
const dome = new THREE.Mesh(domeGeometry, lidMaterial);
dome.position.y = 0.82;
dome.scale.y = 0.3;
group.add(dome);
return group;
}
function createProduct(index: number): THREE.Group {
switch (index) {
case 0: return createWaterBottle();
case 1: return createPlasticBag();
case 2: return createCoffeeCup();
default: return createWaterBottle();
}
}
function init() {
// Scene
scene = new THREE.Scene();
// No background - transparent
// Camera
camera = new THREE.PerspectiveCamera(45, 1, 0.1, 1000);
camera.position.z = 5;
// Renderer with transparent background
renderer = new THREE.WebGLRenderer({
antialias: true,
alpha: true // Transparent background!
});
renderer.setSize(400, 400);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setClearColor(0x000000, 0); // Fully transparent
container.appendChild(renderer.domElement);
// Lighting
const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(5, 5, 5);
scene.add(directionalLight);
const backLight = new THREE.DirectionalLight(0xffffff, 0.5);
backLight.position.set(-5, -5, -5);
scene.add(backLight);
// Initial product
currentMesh = createProduct(productIndex);
scene.add(currentMesh);
animate();
}
function animate() {
animationId = requestAnimationFrame(animate);
if (currentMesh) {
currentMesh.rotation.y += 0.01;
}
renderer.render(scene, camera);
}
function updateProduct(index: number) {
if (scene && currentMesh) {
scene.remove(currentMesh);
currentMesh = createProduct(index);
scene.add(currentMesh);
}
}
$effect(() => {
if (scene) {
updateProduct(productIndex);
}
});
onMount(() => {
init();
});
onDestroy(() => {
if (animationId) {
cancelAnimationFrame(animationId);
}
if (renderer) {
renderer.dispose();
}
});
</script>
<div class="canvas-container" bind:this={container}></div>
<style>
.canvas-container {
width: 400px;
height: 400px;
display: flex;
align-items: center;
justify-content: center;
}
.canvas-container :global(canvas) {
border-radius: 50%;
}
</style>

174
frontend/src/lib/components/ThreeBackground.svelte Normal file
View File

@@ -0,0 +1,174 @@
<script lang="ts">
import { onMount, onDestroy } from 'svelte';
import * as THREE from 'three';
let container: HTMLDivElement;
let canvas: HTMLCanvasElement;
// Scene variables
let scene: THREE.Scene;
let camera: THREE.PerspectiveCamera;
let renderer: THREE.WebGLRenderer;
let particles: THREE.Points;
let geometry: THREE.BufferGeometry;
let material: THREE.PointsMaterial;
// Interaction variables
let mouseX = 0;
let mouseY = 0;
let scrollY = 0;
let targetX = 0;
let targetY = 0;
const windowHalfX = typeof window !== 'undefined' ? window.innerWidth / 2 : 0;
const windowHalfY = typeof window !== 'undefined' ? window.innerHeight / 2 : 0;
onMount(() => {
init();
animate();
window.addEventListener('resize', onWindowResize);
document.addEventListener('mousemove', onDocumentMouseMove);
window.addEventListener('scroll', onDocumentScroll);
return () => {
window.removeEventListener('resize', onWindowResize);
document.removeEventListener('mousemove', onDocumentMouseMove);
window.removeEventListener('scroll', onDocumentScroll);
// Cleanup Three.js resources
if (renderer) renderer.dispose();
if (geometry) geometry.dispose();
if (material) material.dispose();
};
});
function init() {
// 1. Scene Setup
scene = new THREE.Scene();
// Transparent background to blend with CSS gradient
scene.background = null;
// 2. Camera Setup
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 10000);
camera.position.z = 1000;
// 3. Particles Setup
const particleCount = 2000; // Lots of particles
geometry = new THREE.BufferGeometry();
const positions = new Float32Array(particleCount * 3);
const colors = new Float32Array(particleCount * 3);
const color1 = new THREE.Color(0x4ade80); // Bright Green
const color2 = new THREE.Color(0x22c55e); // Darker Green
const color3 = new THREE.Color(0x0f172a); // Deep Blue/Slate
for (let i = 0; i < particleCount; i++) {
// Random positions spread out
positions[i * 3] = (Math.random() * 2 - 1) * 3000;
positions[i * 3 + 1] = (Math.random() * 2 - 1) * 3000;
positions[i * 3 + 2] = (Math.random() * 2 - 1) * 3000;
// Mixed colors for depth
const mixedColor = Math.random() > 0.5 ? color1 : (Math.random() > 0.5 ? color2 : color3);
colors[i * 3] = mixedColor.r;
colors[i * 3 + 1] = mixedColor.g;
colors[i * 3 + 2] = mixedColor.b;
}
geometry.setAttribute('position', new THREE.BufferAttribute(positions, 3));
geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
// 4. Material Setup
// Creating a circular texture for particles using canvas
const sprite = new THREE.TextureLoader().load('https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/sprites/disc.png');
material = new THREE.PointsMaterial({
size: 15,
vertexColors: true,
map: sprite,
alphaTest: 0.5,
transparent: true,
opacity: 0.8,
blending: THREE.AdditiveBlending
});
particles = new THREE.Points(geometry, material);
scene.add(particles);
// 5. Renderer Setup
renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
}
function onWindowResize() {
const width = window.innerWidth;
const height = window.innerHeight;
camera.aspect = width / height;
camera.updateProjectionMatrix();
renderer.setSize(width, height);
}
function onDocumentMouseMove(event: MouseEvent) {
mouseX = (event.clientX - windowHalfX) * 0.5; // Scale down movement
mouseY = (event.clientY - windowHalfY) * 0.5;
}
function onDocumentScroll() {
scrollY = window.scrollY;
}
function animate() {
requestAnimationFrame(animate);
render();
}
function render() {
// Smooth mouse movement
targetX = mouseX * 0.05;
targetY = mouseY * 0.05;
// Gentle rotation based on time + mouse
particles.rotation.x += 0.0005;
particles.rotation.y += 0.0005;
// Interactive movement (Parallax)
// Move camera based on scroll (fly through effect) and mouse
camera.position.x += (mouseX - camera.position.x) * 0.02;
camera.position.y += (-mouseY - camera.position.y) * 0.02;
// Scroll effect: Move deeper into the field or rotate
camera.position.z = 1000 - (scrollY * 0.5);
camera.lookAt(scene.position);
// Wave effect on particles
const positions = particles.geometry.attributes.position.array as Float32Array;
const time = Date.now() * 0.0001;
renderer.render(scene, camera);
}
</script>
<div bind:this={container} class="three-container">
<canvas bind:this={canvas}></canvas>
</div>
<style>
.three-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 0; /* Behind everything */
pointer-events: none; /* Let clicks pass through */
opacity: 0.6; /* Subtle blend */
}
canvas {
display: block;
}
</style>