mirror of
https://github.com/SirBlobby/Hoya26.git
synced 2026-02-04 03:34:34 -05:00
296 lines
6.6 KiB
Svelte
296 lines
6.6 KiB
Svelte
<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>
|