mirror of
https://github.com/SirBlobby/Hoya26.git
synced 2026-02-04 11:44:34 -05:00
UI Rework
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import Icon from "@iconify/svelte";
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
@@ -8,15 +9,15 @@
|
||||
|
||||
let { onClose, onScanComplete }: Props = $props();
|
||||
|
||||
let videoElement: HTMLVideoElement;
|
||||
let videoElement = $state<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;
|
||||
let useCamera = $state(true);
|
||||
let fileInputElement = $state<HTMLInputElement>();
|
||||
|
||||
onMount(() => {
|
||||
const initCamera = async () => {
|
||||
@@ -53,7 +54,6 @@
|
||||
capturedImage = imageData;
|
||||
analyzing = true;
|
||||
|
||||
// Simulate analysis
|
||||
setTimeout(() => {
|
||||
const newItem = {
|
||||
id: Date.now(),
|
||||
@@ -74,6 +74,7 @@
|
||||
}
|
||||
|
||||
async function takePicture() {
|
||||
if (!videoElement) return;
|
||||
analyzing = true;
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
@@ -85,7 +86,6 @@
|
||||
capturedImage = canvas.toDataURL("image/png");
|
||||
}
|
||||
|
||||
// Simulate analysis
|
||||
setTimeout(() => {
|
||||
const newItem = {
|
||||
id: Date.now(),
|
||||
@@ -132,62 +132,45 @@
|
||||
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"
|
||||
<div class="upload-icon">
|
||||
<Icon
|
||||
icon="ri:image-add-line"
|
||||
width="80"
|
||||
style="color: #4ade80;"
|
||||
/>
|
||||
</svg>
|
||||
<p class="upload-text">Click the button below to upload an image</p>
|
||||
</div>
|
||||
<p class="upload-text">Select an image to scan</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
|
||||
class="close-btn"
|
||||
onclick={handleClose}
|
||||
aria-label="Close camera"
|
||||
>
|
||||
<Icon icon="ri:close-fill" width="32" style="color: white;" />
|
||||
</button>
|
||||
|
||||
<!-- Toggle button between camera and upload -->
|
||||
<button
|
||||
class="mode-toggle-btn"
|
||||
on:click={() => (useCamera = !useCamera)}
|
||||
onclick={() => (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>
|
||||
<Icon
|
||||
icon="ri:image-line"
|
||||
width="20"
|
||||
style="color: white;"
|
||||
/>
|
||||
<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>
|
||||
<Icon
|
||||
icon="ri:camera-line"
|
||||
width="20"
|
||||
style="color: white;"
|
||||
/>
|
||||
<span>Use Camera</span>
|
||||
{/if}
|
||||
</button>
|
||||
@@ -196,35 +179,36 @@
|
||||
{#if analyzing}
|
||||
<div class="loading-container">
|
||||
<div class="spinner"></div>
|
||||
<p class="analyzing-text">Analyzing...</p>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if !analyzing && !showResult}
|
||||
<div class="shutter-container">
|
||||
{#if useCamera}
|
||||
<button class="shutter-button" on:click={takePicture}
|
||||
<button
|
||||
class="shutter-button"
|
||||
onclick={takePicture}
|
||||
aria-label="Take picture"
|
||||
></button>
|
||||
{:else}
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
bind:this={fileInputElement}
|
||||
on:change={handleFileUpload}
|
||||
onchange={handleFileUpload}
|
||||
style="display: none;"
|
||||
/>
|
||||
<button
|
||||
class="shutter-button upload-button"
|
||||
on:click={() => fileInputElement.click()}
|
||||
onclick={() => fileInputElement?.click()}
|
||||
aria-label="Upload image"
|
||||
>
|
||||
<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>
|
||||
<Icon
|
||||
icon="ri:upload-cloud-line"
|
||||
width="32"
|
||||
style="color: #0f172a;"
|
||||
/>
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -235,16 +219,16 @@
|
||||
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
|
||||
class="sheet-close-btn"
|
||||
onclick={handleClose}
|
||||
aria-label="Close result"
|
||||
>
|
||||
<Icon
|
||||
icon="ri:close-circle-fill"
|
||||
width="28"
|
||||
style="color: #94a3b8;"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<h2 class="sheet-title">{displayTitle}</h2>
|
||||
@@ -252,68 +236,48 @@
|
||||
<p class="alternatives-label">Top Sustainable Alternatives</p>
|
||||
|
||||
<div class="alternatives-scroll">
|
||||
<div class="alternative-card glass-bottle">
|
||||
<button 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>
|
||||
<Icon
|
||||
icon="ri:cup-fill"
|
||||
width="24"
|
||||
style="color: #60a5fa;"
|
||||
/>
|
||||
<span class="rating">★ 4.9</span>
|
||||
</div>
|
||||
<h3 class="alt-name">Glass Bottle</h3>
|
||||
<p class="alt-price">$2.49</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="alternative-card boxed-water">
|
||||
<button 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>
|
||||
<Icon
|
||||
icon="ri:box-3-fill"
|
||||
width="24"
|
||||
style="color: #a78bfa;"
|
||||
/>
|
||||
<span class="rating">★ 4.7</span>
|
||||
</div>
|
||||
<h3 class="alt-name">Boxed Water</h3>
|
||||
<p class="alt-price">$1.89</p>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<div class="alternative-card aluminum">
|
||||
<button 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>
|
||||
<Icon
|
||||
icon="ri:beer-fill"
|
||||
width="24"
|
||||
style="color: #9ca3af;"
|
||||
/>
|
||||
<span class="rating">★ 4.5</span>
|
||||
</div>
|
||||
<h3 class="alt-name">Aluminum</h3>
|
||||
<p class="alt-price">$1.29</p>
|
||||
</div>
|
||||
</button>
|
||||
</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>
|
||||
<button class="report-btn" onclick={handleClose}>
|
||||
<Icon icon="ri:alarm-warning-fill" width="20" />
|
||||
<span>Report Greenwashing</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -349,18 +313,20 @@
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
top: 50px;
|
||||
left: 20px;
|
||||
background: none;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(4px);
|
||||
border-radius: 50%;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.close-btn svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.loading-container {
|
||||
@@ -368,12 +334,22 @@
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.analyzing-text {
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.spinner {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border: 4px solid rgba(74, 222, 128, 0.2);
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.2);
|
||||
border-top-color: #4ade80;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
@@ -387,7 +363,7 @@
|
||||
|
||||
.shutter-container {
|
||||
position: absolute;
|
||||
bottom: 50px;
|
||||
bottom: 60px;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@@ -396,58 +372,59 @@
|
||||
.shutter-button {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 40px;
|
||||
border-radius: 50%;
|
||||
background-color: white;
|
||||
border: 6px solid #e2e8f0;
|
||||
border: 6px solid rgba(255, 255, 255, 0.3);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.shutter-button:active {
|
||||
transform: scale(0.9);
|
||||
background-color: #e2e8f0;
|
||||
}
|
||||
|
||||
.result-sheet {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
background-color: white;
|
||||
height: 60vh;
|
||||
background-color: #0d2e25;
|
||||
border-top-left-radius: 32px;
|
||||
border-top-right-radius: 32px;
|
||||
padding: 32px;
|
||||
transition: transform 0.5s ease-out;
|
||||
padding: 24px;
|
||||
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
|
||||
border-top: 1px solid #1f473b;
|
||||
}
|
||||
|
||||
.sheet-close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
padding: 4px;
|
||||
align-self: flex-end;
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.sheet-close-btn svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.sheet-title {
|
||||
font-size: 28px;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
margin-top: 12px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 24px;
|
||||
color: #0f172a;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.alternatives-label {
|
||||
color: #64748b;
|
||||
margin-bottom: 12px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
color: #6ee7b7;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.alternatives-scroll {
|
||||
@@ -458,57 +435,46 @@
|
||||
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;
|
||||
min-width: 160px;
|
||||
background-color: #051f18;
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 20px;
|
||||
border: 1px solid #1f473b;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.alternative-card:active {
|
||||
background-color: #0d2e25;
|
||||
}
|
||||
|
||||
.alt-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.alt-header svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.rating {
|
||||
font-weight: bold;
|
||||
color: #f59e0b;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.alt-name {
|
||||
font-weight: bold;
|
||||
color: #0f172a;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
font-size: 15px;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.alt-price {
|
||||
color: #64748b;
|
||||
color: #9ca3af;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.report-btn {
|
||||
@@ -516,23 +482,20 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
margin: 20px auto 0;
|
||||
padding: 12px 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
margin: 32px auto 0;
|
||||
padding: 14px 24px;
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border: 1px solid rgba(239, 68, 68, 0.2);
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
color: #ef4444;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
color: #f87171;
|
||||
font-weight: 700;
|
||||
font-size: 15px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.report-btn svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.report-btn:hover {
|
||||
opacity: 0.8;
|
||||
.report-btn:active {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
}
|
||||
|
||||
.upload-placeholder {
|
||||
@@ -541,57 +504,50 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
background-color: #0f172a;
|
||||
background-color: #051f18;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
margin-bottom: 24px;
|
||||
opacity: 1;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
margin-bottom: 24px;
|
||||
opacity: 0.8;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #34d399;
|
||||
}
|
||||
|
||||
.upload-text {
|
||||
color: #94a3b8;
|
||||
font-size: 18px;
|
||||
color: #9ca3af;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
padding: 0 32px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.mode-toggle-btn {
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
top: 50px;
|
||||
right: 20px;
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 12px;
|
||||
padding: 10px 16px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border-radius: 20px;
|
||||
padding: 8px 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-size: 13px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.upload-button {
|
||||
@@ -600,9 +556,4 @@
|
||||
justify-content: center;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.upload-button svg {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,24 +3,20 @@
|
||||
</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"
|
||||
@@ -31,24 +27,20 @@
|
||||
<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"
|
||||
@@ -66,7 +58,7 @@
|
||||
}
|
||||
|
||||
.cloud-content-wrapper {
|
||||
background: #ffffff; /* White */
|
||||
background: #ffffff;
|
||||
padding: 20px 60px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -92,7 +84,6 @@
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Mobile adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.cloud-content-wrapper {
|
||||
padding: 20px 20px;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import Icon from "@iconify/svelte";
|
||||
|
||||
interface Props {
|
||||
currentRoute: string;
|
||||
@@ -9,139 +10,88 @@
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
name: "Mission",
|
||||
name: "Goals",
|
||||
route: "/community",
|
||||
icon: "people",
|
||||
activeColor: "#f472b6",
|
||||
icon: "ri:flag-fill",
|
||||
activeColor: "#34d399",
|
||||
},
|
||||
{
|
||||
name: "History",
|
||||
route: "/",
|
||||
icon: "time",
|
||||
activeColor: "#1ed760",
|
||||
route: "/",
|
||||
icon: "ri:time-fill",
|
||||
activeColor: "#34d399",
|
||||
},
|
||||
{
|
||||
name: "Home",
|
||||
route: "/", // Hidden - for center button only
|
||||
icon: "home",
|
||||
activeColor: "#4ade80",
|
||||
name: "Scan",
|
||||
route: "/",
|
||||
icon: "ri:camera-lens-fill",
|
||||
isCenter: true,
|
||||
},
|
||||
{
|
||||
name: "Report",
|
||||
route: "/report",
|
||||
icon: "megaphone",
|
||||
icon: "ri:alarm-warning-fill",
|
||||
activeColor: "#ef4444",
|
||||
},
|
||||
{
|
||||
name: "Ask AI",
|
||||
name: "Chat",
|
||||
route: "/chat",
|
||||
icon: "chatbubble-ellipses",
|
||||
activeColor: "#4ade80",
|
||||
icon: "ri:chat-3-fill",
|
||||
activeColor: "#60a5fa",
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
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"
|
||||
{#each tabs as tab, index}
|
||||
{#if !tab.isCenter}
|
||||
<button
|
||||
class="tab-item"
|
||||
class:active={currentRoute === tab.route}
|
||||
onclick={() => navigateToTab(tab.route)}
|
||||
aria-label={tab.name}
|
||||
>
|
||||
<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"
|
||||
<Icon
|
||||
icon={tab.icon}
|
||||
width="24"
|
||||
style="color: {currentRoute === tab.route
|
||||
? tab.activeColor
|
||||
: '#6b7280'};"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<span
|
||||
class="tab-name"
|
||||
style="color: {currentRoute === tab.route
|
||||
? tab.activeColor
|
||||
: '#6b7280'};"
|
||||
>
|
||||
{tab.name}
|
||||
</span>
|
||||
</button>
|
||||
{/if}
|
||||
{#if index === 1}
|
||||
<button
|
||||
class="scan-button"
|
||||
onclick={handleScan}
|
||||
aria-label="Scan product"
|
||||
>
|
||||
<Icon
|
||||
icon="ri:camera-lens-fill"
|
||||
width="28"
|
||||
style="color: white;"
|
||||
/>
|
||||
</button>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -151,130 +101,55 @@
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-bottom: 20px;
|
||||
padding-left: 12px;
|
||||
padding-right: 12px;
|
||||
padding: 0;
|
||||
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;
|
||||
justify-content: space-around;
|
||||
height: 80px;
|
||||
background: #0d2e25;
|
||||
border-top: 1px solid #1f473b;
|
||||
padding: 0 16px 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);
|
||||
gap: 4px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.scan-button {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #10b981;
|
||||
border-radius: 50%;
|
||||
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);
|
||||
cursor: pointer;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.15s;
|
||||
border: 4px solid #051f18;
|
||||
}
|
||||
|
||||
.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;
|
||||
.scan-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { goto } from "$app/navigation";
|
||||
import Icon from "@iconify/svelte";
|
||||
|
||||
interface RecentItem {
|
||||
id: number;
|
||||
@@ -17,71 +18,129 @@
|
||||
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");
|
||||
}
|
||||
|
||||
function getImpactColor(impact: string): string {
|
||||
switch (impact.toLowerCase()) {
|
||||
case "low":
|
||||
return "#22c55e";
|
||||
case "medium":
|
||||
return "#f59e0b";
|
||||
case "high":
|
||||
return "#ef4444";
|
||||
default:
|
||||
return "#6b7280";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="home-container">
|
||||
<div class="bg-gradient"></div>
|
||||
|
||||
<div class="safe-area">
|
||||
<div class="header">
|
||||
<div>
|
||||
<h1 class="app-name">Ethix</h1>
|
||||
<p class="tagline">Truth in every scan.</p>
|
||||
<div class="header-left">
|
||||
<div class="logo-icon">
|
||||
<Icon icon="ri:leaf-fill" width="24" />
|
||||
</div>
|
||||
<div>
|
||||
<h1 class="app-name">Ethix</h1>
|
||||
<p class="tagline">Truth in every scan</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="profile-avatar">
|
||||
<button class="profile-avatar">
|
||||
<span>YO</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="scroll-content">
|
||||
<button class="card scan-card" on:click={onToggleCamera}>
|
||||
<button class="card scan-card" onclick={onToggleCamera}>
|
||||
<div class="scan-card-glow"></div>
|
||||
<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="scan-icon-wrapper">
|
||||
<Icon icon="ri:camera-lens-fill" width="36" />
|
||||
</div>
|
||||
<div class="card-text-container">
|
||||
<h2 class="card-title">Start Scanning</h2>
|
||||
<p class="card-text">Identify harmful products</p>
|
||||
<p class="card-text">
|
||||
Identify harmful products instantly
|
||||
</p>
|
||||
</div>
|
||||
<div class="arrow-icon">
|
||||
<Icon icon="ri:arrow-right-s-line" width="28" />
|
||||
</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="stats-row">
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon green">
|
||||
<Icon icon="ri:scan-2-line" width="20" />
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<span class="stat-number">47</span>
|
||||
<span class="stat-label">Scans</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon blue">
|
||||
<Icon icon="ri:leaf-line" width="20" />
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<span class="stat-number">32</span>
|
||||
<span class="stat-label">Eco Picks</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-divider"></div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-icon orange">
|
||||
<Icon icon="ri:fire-line" width="20" />
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<span class="stat-number">78%</span>
|
||||
<span class="stat-label">Score</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="recent-section">
|
||||
<h2 class="section-title">Recent Activity</h2>
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Recent Activity</h2>
|
||||
<button class="see-all-btn">See all</button>
|
||||
</div>
|
||||
|
||||
{#if recentItems.length === 0}
|
||||
<p class="no-items">No recent scans.</p>
|
||||
<div class="empty-state">
|
||||
<Icon
|
||||
icon="ri:scan-line"
|
||||
width="48"
|
||||
style="color: rgba(255,255,255,0.3);"
|
||||
/>
|
||||
<p>No recent scans yet</p>
|
||||
<span>Start scanning to see your history</span>
|
||||
</div>
|
||||
{: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>
|
||||
<button
|
||||
class="recent-card"
|
||||
onclick={() => navigateToDetails(item)}
|
||||
>
|
||||
<div
|
||||
class="recent-icon-container"
|
||||
style="background: {getImpactColor(
|
||||
item.impact,
|
||||
)}20;"
|
||||
>
|
||||
<Icon
|
||||
icon="ri:box-3-line"
|
||||
width="22"
|
||||
style="color: {getImpactColor(
|
||||
item.impact,
|
||||
)};"
|
||||
/>
|
||||
</div>
|
||||
<div class="recent-info">
|
||||
<h3 class="recent-title">{item.title}</h3>
|
||||
@@ -89,8 +148,13 @@
|
||||
</div>
|
||||
<div
|
||||
class="impact-badge"
|
||||
class:high-impact={item.impact === "High"}
|
||||
class:low-impact={item.impact === "Low"}
|
||||
style="background: {getImpactColor(
|
||||
item.impact,
|
||||
)}15; color: {getImpactColor(
|
||||
item.impact,
|
||||
)}; border: 1px solid {getImpactColor(
|
||||
item.impact,
|
||||
)}25;"
|
||||
>
|
||||
{item.impact}
|
||||
</div>
|
||||
@@ -104,12 +168,30 @@
|
||||
|
||||
<style>
|
||||
.home-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #0f172a;
|
||||
min-height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.bg-gradient {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
165deg,
|
||||
#064e3b 0%,
|
||||
#065f46 15%,
|
||||
#047857 30%,
|
||||
#0f766e 50%,
|
||||
#134e4a 70%,
|
||||
#1e3a3a 100%
|
||||
);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.safe-area {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 140px;
|
||||
@@ -118,71 +200,114 @@
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 24px;
|
||||
padding: 20px 24px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: linear-gradient(135deg, #4ade80, #22c55e);
|
||||
border-radius: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #052e16;
|
||||
box-shadow: 0 4px 16px rgba(74, 222, 128, 0.4);
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 28px;
|
||||
font-size: 26px;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tagline {
|
||||
color: #94a3b8;
|
||||
margin: 0;
|
||||
margin-top: 4px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
margin: 2px 0 0 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.profile-avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #334155;
|
||||
border-radius: 20px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.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);
|
||||
padding: 0 20px 140px;
|
||||
}
|
||||
|
||||
.scan-card {
|
||||
margin-bottom: 24px;
|
||||
position: relative;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgba(74, 222, 128, 0.2),
|
||||
rgba(34, 197, 94, 0.1)
|
||||
);
|
||||
padding: 24px;
|
||||
border-radius: 24px;
|
||||
border: 1px solid rgba(74, 222, 128, 0.3);
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
margin-bottom: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scan-card-glow {
|
||||
position: absolute;
|
||||
top: -20px;
|
||||
right: -20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(74, 222, 128, 0.3) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.scan-card:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.card-inner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.scan-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
.scan-icon-wrapper {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: linear-gradient(135deg, #4ade80, #22c55e);
|
||||
border-radius: 18px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #052e16;
|
||||
flex-shrink: 0;
|
||||
box-shadow: 0 6px 20px rgba(74, 222, 128, 0.4);
|
||||
}
|
||||
|
||||
.card-text-container {
|
||||
@@ -191,105 +316,193 @@
|
||||
|
||||
.card-title {
|
||||
color: white;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-text {
|
||||
color: #94a3b8;
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 13px;
|
||||
margin: 4px 0 0 0;
|
||||
}
|
||||
|
||||
.arrow-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
flex-shrink: 0;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 20px;
|
||||
padding: 16px 20px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex: 1;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 38px;
|
||||
height: 38px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stat-icon.green {
|
||||
background: rgba(74, 222, 128, 0.2);
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.stat-icon.blue {
|
||||
background: rgba(96, 165, 250, 0.2);
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.stat-icon.orange {
|
||||
background: rgba(251, 146, 60, 0.2);
|
||||
color: #fb923c;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 11px;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.stat-divider {
|
||||
width: 1px;
|
||||
height: 36px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.recent-section {
|
||||
margin-top: 24px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 20px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 700;
|
||||
font-size: 18px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.no-items {
|
||||
color: #64748b;
|
||||
.see-all-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #4ade80;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
border-radius: 20px;
|
||||
border: 1px dashed rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-weight: 600;
|
||||
margin: 12px 0 4px;
|
||||
}
|
||||
|
||||
.empty-state span {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.recent-card {
|
||||
background-color: rgba(30, 41, 59, 0.9);
|
||||
padding: 16px;
|
||||
border-radius: 24px;
|
||||
border: 1px solid #334155;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
backdrop-filter: blur(8px);
|
||||
padding: 14px 16px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
gap: 14px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.recent-card:hover {
|
||||
transform: translateX(4px);
|
||||
background-color: rgba(30, 41, 59, 1);
|
||||
.recent-card:active {
|
||||
transform: scale(0.98);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.recent-icon-container {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background-color: #334155;
|
||||
border-radius: 12px;
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.recent-icon-container svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
.recent-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.recent-title {
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.recent-date {
|
||||
color: #94a3b8;
|
||||
font-size: 13px;
|
||||
margin: 4px 0 0 0;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
font-size: 12px;
|
||||
margin: 3px 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;
|
||||
padding: 6px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
</style>
|
||||
|
||||
533
frontend/src/lib/components/MobileHomePage.svelte
Normal file
533
frontend/src/lib/components/MobileHomePage.svelte
Normal file
@@ -0,0 +1,533 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import Icon from "@iconify/svelte";
|
||||
|
||||
const scanHistory = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Plastic Water Bottle",
|
||||
date: "Today, 10:45 AM",
|
||||
severity: "High",
|
||||
icon: "ri:drop-fill",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Organic Banana",
|
||||
date: "Yesterday, 3:20 PM",
|
||||
severity: "Low",
|
||||
icon: "ri:plant-fill",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Aluminum Soda Can",
|
||||
date: "Mon, 12:15 PM",
|
||||
severity: "Low",
|
||||
icon: "ri:cup-fill",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Takeout Container",
|
||||
date: "Sun, 8:30 PM",
|
||||
severity: "Medium",
|
||||
icon: "ri:box-3-fill",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Shampoo Bottle",
|
||||
date: "Sat, 11:00 AM",
|
||||
severity: "High",
|
||||
icon: "ri:flask-fill",
|
||||
},
|
||||
];
|
||||
|
||||
let greeting = $state("Hello");
|
||||
|
||||
onMount(() => {
|
||||
const hour = new Date().getHours();
|
||||
if (hour < 12) greeting = "Good morning";
|
||||
else if (hour < 17) greeting = "Good afternoon";
|
||||
else greeting = "Good evening";
|
||||
});
|
||||
|
||||
function getSeverityClass(severity: string): string {
|
||||
return severity.toLowerCase();
|
||||
}
|
||||
|
||||
function getSeverityColor(severity: string): string {
|
||||
switch (severity.toLowerCase()) {
|
||||
case "low":
|
||||
return "#34d399";
|
||||
case "medium":
|
||||
return "#fb923c";
|
||||
case "high":
|
||||
return "#f87171";
|
||||
default:
|
||||
return "#9ca3af";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="mobile-home">
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<div class="avatar">
|
||||
<Icon
|
||||
icon="ri:seedling-fill"
|
||||
width="24"
|
||||
style="color: #34d399;"
|
||||
/>
|
||||
</div>
|
||||
<div class="header-text">
|
||||
<span class="greeting">{greeting}</span>
|
||||
<h1 class="username">Eco Warrior</h1>
|
||||
</div>
|
||||
</div>
|
||||
<button class="notification-btn" aria-label="Notifications">
|
||||
<Icon
|
||||
icon="ri:notification-3-line"
|
||||
width="24"
|
||||
style="color: #9ca3af;"
|
||||
/>
|
||||
<span class="notif-badge">2</span>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<section class="impact-hero">
|
||||
<div class="impact-main">
|
||||
<span class="impact-label">Your Carbon Savings</span>
|
||||
<div class="impact-value">
|
||||
<span class="impact-number">23</span>
|
||||
<span class="impact-unit">kg CO₂</span>
|
||||
</div>
|
||||
<div class="impact-comparison">
|
||||
<Icon icon="ri:car-fill" width="16" style="color: #6ee7b7;" />
|
||||
<span>≈ driving 92 km less</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="impact-visual">
|
||||
<div class="tree-ring">
|
||||
<Icon icon="ri:tree-fill" width="32" style="color: #10b981;" />
|
||||
</div>
|
||||
<span class="tree-count">2 trees planted</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="stats-row">
|
||||
<div class="stat-pill">
|
||||
<div class="stat-icon">
|
||||
<Icon
|
||||
icon="ri:qr-scan-2-line"
|
||||
width="20"
|
||||
style="color: #34d399;"
|
||||
/>
|
||||
</div>
|
||||
<span class="stat-value">47</span>
|
||||
<span class="stat-label">scans</span>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<div class="stat-icon eco">
|
||||
<Icon
|
||||
icon="ri:checkbox-circle-fill"
|
||||
width="20"
|
||||
style="color: #34d399;"
|
||||
/>
|
||||
</div>
|
||||
<span class="stat-value">32</span>
|
||||
<span class="stat-label">eco picks</span>
|
||||
</div>
|
||||
<div class="stat-pill">
|
||||
<div class="stat-icon score">
|
||||
<Icon icon="ri:star-fill" width="20" style="color: #fbbf24;" />
|
||||
</div>
|
||||
<span class="stat-value">78%</span>
|
||||
<span class="stat-label">score</span>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="recent-section">
|
||||
<div class="section-header">
|
||||
<h2>Recent Scans</h2>
|
||||
<a href="/history" class="see-all">
|
||||
See all
|
||||
<Icon icon="ri:arrow-right-s-line" width="16" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="scan-list">
|
||||
{#each scanHistory as item (item.id)}
|
||||
<button class="scan-item" aria-label="View {item.name}">
|
||||
<div
|
||||
class="item-icon"
|
||||
style="color: {getSeverityColor(item.severity)};"
|
||||
>
|
||||
<Icon icon={item.icon} width="24" />
|
||||
</div>
|
||||
<div class="item-info">
|
||||
<span class="item-name">{item.name}</span>
|
||||
<span class="item-date">{item.date}</span>
|
||||
</div>
|
||||
<span
|
||||
class="severity-tag {getSeverityClass(item.severity)}"
|
||||
>
|
||||
{item.severity}
|
||||
</span>
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="tip-card">
|
||||
<div class="tip-icon">
|
||||
<Icon
|
||||
icon="ri:lightbulb-flash-fill"
|
||||
width="22"
|
||||
style="color: #fbbf24;"
|
||||
/>
|
||||
</div>
|
||||
<div class="tip-text">
|
||||
<strong>Daily Tip:</strong> Bring reusable bags shopping to cut 500 plastic
|
||||
bags per year!
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.mobile-home {
|
||||
padding: 16px 20px 120px;
|
||||
min-height: 100vh;
|
||||
background: #051f18;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: #0d2e25;
|
||||
border: 1px solid #1f473b;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.greeting {
|
||||
font-size: 13px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 20px;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.notification-btn {
|
||||
position: relative;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: #0d2e25;
|
||||
border: 1px solid #1f473b;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.notif-badge {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2px solid #051f18;
|
||||
}
|
||||
|
||||
.impact-hero {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
background: #0d2e25;
|
||||
border: 1px solid #1f473b;
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
margin-bottom: 24px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.impact-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.impact-label {
|
||||
font-size: 11px;
|
||||
color: #6ee7b7;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.impact-value {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.impact-number {
|
||||
font-size: 36px;
|
||||
font-weight: 900;
|
||||
color: white;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.impact-unit {
|
||||
font-size: 16px;
|
||||
color: #9ca3af;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.impact-comparison {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: #d1fae5;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.impact-visual {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tree-ring {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border: 1px solid rgba(16, 185, 129, 0.3);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.tree-count {
|
||||
font-size: 11px;
|
||||
color: #34d399;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
.stat-pill {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 16px 8px;
|
||||
background: #0d2e25;
|
||||
border: 1px solid #1f473b;
|
||||
border-radius: 16px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 10px;
|
||||
color: #9ca3af;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section-header h2 {
|
||||
font-size: 16px;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.see-all {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
font-size: 13px;
|
||||
color: #34d399;
|
||||
text-decoration: none;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.scan-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.scan-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
padding: 12px;
|
||||
background: #0d2e25;
|
||||
border: 1px solid #1f473b;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.scan-item:active {
|
||||
transform: scale(0.98);
|
||||
background: #1f473b;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #051f18;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.item-name {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-date {
|
||||
font-size: 12px;
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.severity-tag {
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
}
|
||||
|
||||
.severity-tag.low {
|
||||
background: rgba(52, 211, 153, 0.1);
|
||||
color: #34d399;
|
||||
border: 1px solid rgba(52, 211, 153, 0.2);
|
||||
}
|
||||
|
||||
.severity-tag.medium {
|
||||
background: rgba(251, 146, 60, 0.1);
|
||||
color: #fb923c;
|
||||
border: 1px solid rgba(251, 146, 60, 0.2);
|
||||
}
|
||||
|
||||
.severity-tag.high {
|
||||
background: rgba(248, 113, 113, 0.1);
|
||||
color: #f87171;
|
||||
border: 1px solid rgba(248, 113, 113, 0.2);
|
||||
}
|
||||
|
||||
.tip-card {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
padding: 20px;
|
||||
background: #0d2e25;
|
||||
border: 1px solid #1f473b;
|
||||
border-radius: 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.tip-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: rgba(251, 191, 36, 0.1);
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tip-text {
|
||||
font-size: 13px;
|
||||
color: #d1d5db;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tip-text strong {
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
}
|
||||
</style>
|
||||
@@ -1,24 +0,0 @@
|
||||
<nav class="mobile-tab-bar">
|
||||
<a href="/">Home</a>
|
||||
<a href="/profile">Profile</a>
|
||||
<a href="/settings">Settings</a>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.mobile-tab-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 1rem;
|
||||
background-color: #222;
|
||||
color: white;
|
||||
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
</style>
|
||||
@@ -1,17 +0,0 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { isTauri } from "@tauri-apps/api/core";
|
||||
|
||||
let { children } = $props();
|
||||
let isNative = $state(false);
|
||||
let mounted = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
isNative = isTauri();
|
||||
mounted = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if mounted && isNative}
|
||||
{@render children()}
|
||||
{/if}
|
||||
@@ -1,17 +0,0 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import { isTauri } from "@tauri-apps/api/core";
|
||||
|
||||
let { children } = $props();
|
||||
let isNative = $state(false);
|
||||
let mounted = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
isNative = isTauri();
|
||||
mounted = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if mounted && !isNative}
|
||||
{@render children()}
|
||||
{/if}
|
||||
@@ -1,188 +1,267 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { page } from "$app/stores";
|
||||
import {
|
||||
drawLandscape,
|
||||
type ParallaxState,
|
||||
type SceneType,
|
||||
} from "$lib/ts/parallax";
|
||||
|
||||
interface SceneConfig {
|
||||
sceneType: SceneType;
|
||||
staticScene: boolean;
|
||||
progress?: number;
|
||||
scenes?: SceneType[];
|
||||
}
|
||||
|
||||
const PATH_CONFIG: Record<string, SceneConfig> = {
|
||||
"/": { sceneType: "transition", staticScene: false },
|
||||
"/chat": { sceneType: "oilRig", staticScene: true },
|
||||
"/community": { sceneType: "forest", staticScene: true },
|
||||
"/report": { sceneType: "industrial", staticScene: true },
|
||||
"/catalogue": {
|
||||
sceneType: "transition",
|
||||
staticScene: false,
|
||||
scenes: ["eco", "ocean"],
|
||||
},
|
||||
"/news": { sceneType: "ocean", staticScene: true },
|
||||
};
|
||||
|
||||
const DEFAULT_CONFIG: SceneConfig = {
|
||||
sceneType: "transition",
|
||||
staticScene: false,
|
||||
};
|
||||
|
||||
interface Props {
|
||||
onProgressChange?: (progress: number) => void;
|
||||
staticScene?: boolean;
|
||||
sceneType?: SceneType;
|
||||
sceneProgress?: number;
|
||||
scenes?: SceneType[];
|
||||
}
|
||||
let {
|
||||
onProgressChange,
|
||||
staticScene,
|
||||
sceneType,
|
||||
sceneProgress,
|
||||
scenes,
|
||||
}: Props = $props();
|
||||
|
||||
let scrollY = 0;
|
||||
let innerHeight = 0;
|
||||
let innerHeight = 1;
|
||||
let scrollHeight = 1;
|
||||
let mouseX = 0;
|
||||
let mouseY = 0;
|
||||
let canvas: HTMLCanvasElement;
|
||||
let ctx: CanvasRenderingContext2D | null = null;
|
||||
let animationId: number = 0;
|
||||
let scrollContainer: HTMLElement | null = null;
|
||||
let currentPath = $state("/");
|
||||
let currentProgress = $state(0);
|
||||
|
||||
let activeConfig = $derived(() => {
|
||||
const pathConfig = PATH_CONFIG[currentPath] || DEFAULT_CONFIG;
|
||||
return {
|
||||
sceneType: sceneType ?? pathConfig.sceneType,
|
||||
staticScene: staticScene ?? pathConfig.staticScene,
|
||||
progress: sceneProgress ?? pathConfig.progress ?? 0,
|
||||
scenes: scenes ?? pathConfig.scenes,
|
||||
};
|
||||
});
|
||||
|
||||
interface SceneBlend {
|
||||
fromScene: SceneType;
|
||||
toScene: SceneType;
|
||||
blendProgress: number;
|
||||
}
|
||||
|
||||
function getSceneBlend(
|
||||
scrollProgress: number,
|
||||
scenesList: SceneType[],
|
||||
): SceneBlend {
|
||||
if (scenesList.length === 0) {
|
||||
return { fromScene: "eco", toScene: "eco", blendProgress: 0 };
|
||||
}
|
||||
if (scenesList.length === 1) {
|
||||
return {
|
||||
fromScene: scenesList[0],
|
||||
toScene: scenesList[0],
|
||||
blendProgress: 0,
|
||||
};
|
||||
}
|
||||
|
||||
const numTransitions = scenesList.length - 1;
|
||||
const segmentSize = 1 / numTransitions;
|
||||
const segmentIndex = Math.min(
|
||||
Math.floor(scrollProgress / segmentSize),
|
||||
numTransitions - 1,
|
||||
);
|
||||
|
||||
const segmentProgress =
|
||||
(scrollProgress - segmentIndex * segmentSize) / segmentSize;
|
||||
|
||||
return {
|
||||
fromScene: scenesList[segmentIndex],
|
||||
toScene:
|
||||
scenesList[Math.min(segmentIndex + 1, scenesList.length - 1)],
|
||||
blendProgress: Math.min(Math.max(segmentProgress, 0), 1),
|
||||
};
|
||||
}
|
||||
|
||||
function calculateProgress(): number {
|
||||
const config = activeConfig();
|
||||
|
||||
if (config.staticScene && !config.scenes) {
|
||||
return Math.min(Math.max(config.progress, 0), 1);
|
||||
}
|
||||
|
||||
const scrollableHeight = scrollHeight - innerHeight;
|
||||
if (scrollableHeight <= 0) return config.progress;
|
||||
return Math.min(Math.max(scrollY / scrollableHeight, 0), 1);
|
||||
}
|
||||
|
||||
function updateMeasurements() {
|
||||
const config = activeConfig();
|
||||
if (config.staticScene && !config.scenes) return;
|
||||
|
||||
if (scrollContainer) {
|
||||
scrollY = scrollContainer.scrollTop;
|
||||
innerHeight = scrollContainer.clientHeight;
|
||||
scrollHeight = scrollContainer.scrollHeight;
|
||||
} else {
|
||||
scrollY = window.scrollY;
|
||||
innerHeight = window.innerHeight;
|
||||
scrollHeight = Math.max(
|
||||
document.body.scrollHeight,
|
||||
document.documentElement.scrollHeight,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function animate() {
|
||||
if (!ctx || !canvas) return;
|
||||
|
||||
updateMeasurements();
|
||||
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const dpr = window.devicePixelRatio || 1;
|
||||
|
||||
const canvasWidth = Math.floor(rect.width * dpr);
|
||||
const canvasHeight = Math.floor(rect.height * dpr);
|
||||
|
||||
if (canvas.width !== canvasWidth || canvas.height !== canvasHeight) {
|
||||
canvas.width = canvasWidth;
|
||||
canvas.height = canvasHeight;
|
||||
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
|
||||
}
|
||||
|
||||
const progress = calculateProgress();
|
||||
const config = activeConfig();
|
||||
|
||||
if (currentProgress !== progress) {
|
||||
currentProgress = progress;
|
||||
onProgressChange?.(progress);
|
||||
}
|
||||
|
||||
let sceneBlend: SceneBlend | undefined;
|
||||
if (config.scenes && config.scenes.length > 1) {
|
||||
sceneBlend = getSceneBlend(progress, config.scenes);
|
||||
}
|
||||
|
||||
const state: ParallaxState = {
|
||||
scrollY: config.staticScene && !config.scenes ? 0 : scrollY,
|
||||
innerHeight,
|
||||
mouseX,
|
||||
mouseY,
|
||||
progress: sceneBlend ? sceneBlend.blendProgress : progress,
|
||||
sceneType: sceneBlend ? sceneBlend.fromScene : config.sceneType,
|
||||
blendToScene: sceneBlend?.toScene,
|
||||
blendProgress: sceneBlend?.blendProgress,
|
||||
};
|
||||
|
||||
drawLandscape(ctx, rect.width, rect.height, state);
|
||||
animationId = requestAnimationFrame(animate);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const handleScroll = () => {
|
||||
scrollY = window.scrollY;
|
||||
};
|
||||
const unsubscribe = page.subscribe((p) => {
|
||||
currentPath = p.url.pathname;
|
||||
});
|
||||
|
||||
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;
|
||||
|
||||
window.addEventListener("mousemove", handleMouseMove, {
|
||||
passive: true,
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
const config = activeConfig();
|
||||
|
||||
if (!config.staticScene || config.scenes) {
|
||||
scrollContainer = document.querySelector(
|
||||
".app-container",
|
||||
) as HTMLElement;
|
||||
if (!scrollContainer) {
|
||||
scrollContainer = document.querySelector(
|
||||
".content-wrapper",
|
||||
) as HTMLElement;
|
||||
}
|
||||
if (!scrollContainer) {
|
||||
scrollContainer = document.querySelector(
|
||||
"main",
|
||||
) as HTMLElement;
|
||||
}
|
||||
updateMeasurements();
|
||||
}
|
||||
|
||||
if (canvas) {
|
||||
ctx = canvas.getContext("2d");
|
||||
if (ctx) {
|
||||
animate();
|
||||
}
|
||||
}
|
||||
}, 100);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener("scroll", handleScroll);
|
||||
unsubscribe();
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
if (animationId) {
|
||||
cancelAnimationFrame(animationId);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
// Calculate opacity for transition effects
|
||||
$: progress = Math.min(Math.max(scrollY / innerHeight, 0), 1);
|
||||
onDestroy(() => {
|
||||
if (animationId) {
|
||||
cancelAnimationFrame(animationId);
|
||||
}
|
||||
});
|
||||
</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 class="parallax-landscape">
|
||||
<canvas bind:this={canvas} class="parallax-canvas"></canvas>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.parallax-container {
|
||||
.parallax-landscape {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.layer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
.parallax-canvas {
|
||||
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 */
|
||||
}
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,234 +0,0 @@
|
||||
<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>
|
||||
@@ -1,174 +0,0 @@
|
||||
<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>
|
||||
@@ -1,12 +0,0 @@
|
||||
<footer class="web-footer">
|
||||
<p>© 2026 My Website. All rights reserved.</p>
|
||||
</footer>
|
||||
|
||||
<style>
|
||||
.web-footer {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
background-color: #f4f4f4;
|
||||
margin-top: auto;
|
||||
}
|
||||
</style>
|
||||
650
frontend/src/lib/components/WebHomePage.svelte
Normal file
650
frontend/src/lib/components/WebHomePage.svelte
Normal file
@@ -0,0 +1,650 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import { fly, fade } from "svelte/transition";
|
||||
import ParallaxLandscape from "$lib/components/ParallaxLandscape.svelte";
|
||||
|
||||
interface Props {
|
||||
onProgressChange?: (progress: number) => void;
|
||||
}
|
||||
let { onProgressChange }: Props = $props();
|
||||
|
||||
const news = [
|
||||
{
|
||||
id: 1,
|
||||
title: "Ocean Cleanup Hits 500 Tons",
|
||||
desc: "Major milestone reached in the Pacific cleanup initiative.",
|
||||
date: "2h ago",
|
||||
icon: "ri:ship-line",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Plastic Ban Starts Today",
|
||||
desc: "Big cities are saying no to single-use plastics.",
|
||||
date: "5h ago",
|
||||
icon: "ri:prohibited-line",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Ethix Launches Globally",
|
||||
desc: "Our platform is now available worldwide.",
|
||||
date: "1d ago",
|
||||
icon: "ri:global-line",
|
||||
},
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "Scan It",
|
||||
desc: "Point your camera at any product.",
|
||||
icon: "ri:scan-2-line",
|
||||
},
|
||||
{
|
||||
title: "Get Real Info",
|
||||
desc: "AI breaks down the real impact.",
|
||||
icon: "ri:information-line",
|
||||
},
|
||||
{
|
||||
title: "Find Better",
|
||||
desc: "See eco-friendly swaps instantly.",
|
||||
icon: "ri:leaf-line",
|
||||
},
|
||||
{
|
||||
title: "Call It Out",
|
||||
desc: "Report misleading green claims.",
|
||||
icon: "ri:megaphone-line",
|
||||
},
|
||||
];
|
||||
|
||||
const stats = [
|
||||
{ value: "50K+", label: "Scans" },
|
||||
{ value: "12K", label: "Users" },
|
||||
{ value: "98%", label: "Accuracy" },
|
||||
{ value: "24/7", label: "Support" },
|
||||
];
|
||||
|
||||
let sceneProgress = $state(0);
|
||||
let isEcoTheme = $derived(sceneProgress < 0.5);
|
||||
|
||||
function handleProgressChange(progress: number) {
|
||||
sceneProgress = progress;
|
||||
onProgressChange?.(progress);
|
||||
}
|
||||
|
||||
let scoreIndex = $state(0);
|
||||
const scores = [
|
||||
{
|
||||
label: "Fiji Water",
|
||||
score: "94/100",
|
||||
color: "#1ed760",
|
||||
image: "/water-bottle.png",
|
||||
scale: 0.7,
|
||||
},
|
||||
{
|
||||
label: "Plastic Bag",
|
||||
score: "12/100",
|
||||
color: "#e91429",
|
||||
image: "/plastic-bag.png",
|
||||
scale: 0.75,
|
||||
},
|
||||
{
|
||||
label: "Starbucks",
|
||||
score: "65/100",
|
||||
color: "#f59b23",
|
||||
image: "/coffee-cup.png",
|
||||
scale: 1,
|
||||
},
|
||||
];
|
||||
|
||||
onMount(() => {
|
||||
const interval = setInterval(() => {
|
||||
scoreIndex = (scoreIndex + 1) % scores.length;
|
||||
}, 4000);
|
||||
return () => clearInterval(interval);
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="web-home" class:industrial-theme={!isEcoTheme}>
|
||||
<ParallaxLandscape onProgressChange={handleProgressChange} />
|
||||
|
||||
<section class="hero">
|
||||
<div class="glass-card hero-content">
|
||||
<div class="hero-badge">
|
||||
<iconify-icon icon="ri:eye-line" width="16"></iconify-icon>
|
||||
<span>See the real impact</span>
|
||||
</div>
|
||||
<h1 class="hero-title">
|
||||
Know What <br /> You Buy.
|
||||
</h1>
|
||||
<p class="hero-desc">
|
||||
Scan a product. See if it's actually good for the planet. Find
|
||||
better alternatives if it's not. Simple as that.
|
||||
</p>
|
||||
<div class="hero-actions">
|
||||
<a href="/catalogue" class="cta-primary">
|
||||
<iconify-icon icon="ri:store-2-fill" width="20"
|
||||
></iconify-icon>
|
||||
<span>Browse Database</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-visual">
|
||||
<div class="visual-container">
|
||||
<div class="hero-image">
|
||||
{#key scoreIndex}
|
||||
<div
|
||||
class="product-wrapper"
|
||||
in:fly={{ x: 100, duration: 500, opacity: 0 }}
|
||||
out:fly={{ x: -100, duration: 500, opacity: 0 }}
|
||||
>
|
||||
<img
|
||||
src={scores[scoreIndex].image}
|
||||
alt={scores[scoreIndex].label}
|
||||
class="product-image"
|
||||
style="transform: scale({scores[scoreIndex]
|
||||
.scale});"
|
||||
/>
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
<div class="orbit orbit-1"></div>
|
||||
<div class="orbit orbit-2"></div>
|
||||
|
||||
<div class="floating-card glass-card">
|
||||
{#key scoreIndex}
|
||||
<div class="score-content" in:fade={{ duration: 300 }}>
|
||||
<iconify-icon
|
||||
icon="ri:checkbox-circle-fill"
|
||||
width="24"
|
||||
style="color: {scores[scoreIndex].color};"
|
||||
></iconify-icon>
|
||||
<div>
|
||||
<div class="card-label">
|
||||
{scores[scoreIndex].label}
|
||||
</div>
|
||||
<div class="card-value">
|
||||
{scores[scoreIndex].score}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/key}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="spacer"></div>
|
||||
|
||||
<section class="content-section">
|
||||
<div class="glass-card stats-grid">
|
||||
{#each stats as stat}
|
||||
<div class="stat-item">
|
||||
<div class="stat-value">{stat.value}</div>
|
||||
<div class="stat-label">{stat.label}</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">How It Works</h2>
|
||||
<p class="section-desc">Tools to help you shop smarter.</p>
|
||||
</div>
|
||||
<div class="features-grid">
|
||||
{#each features as feature}
|
||||
<div class="glass-card feature-card">
|
||||
<div class="feature-icon">
|
||||
<iconify-icon icon={feature.icon} width="24"
|
||||
></iconify-icon>
|
||||
</div>
|
||||
<h3 class="feature-title">{feature.title}</h3>
|
||||
<p class="feature-desc">{feature.desc}</p>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="content-section">
|
||||
<div class="section-header">
|
||||
<h2 class="section-title">Latest News</h2>
|
||||
<p class="section-desc">
|
||||
Updates from the world of sustainability.
|
||||
</p>
|
||||
</div>
|
||||
<div class="news-grid">
|
||||
{#each news as item (item.id)}
|
||||
<article class="glass-card news-card">
|
||||
<div class="news-icon">
|
||||
<iconify-icon icon={item.icon} width="24"
|
||||
></iconify-icon>
|
||||
</div>
|
||||
<div class="news-meta">{item.date}</div>
|
||||
<h3 class="news-title">{item.title}</h3>
|
||||
<p class="news-desc">{item.desc}</p>
|
||||
<a href="/news/{item.id}" class="news-link">
|
||||
Read more
|
||||
<iconify-icon icon="ri:arrow-right-line" width="16"
|
||||
></iconify-icon>
|
||||
</a>
|
||||
</article>
|
||||
{/each}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="footer-spacer"></div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.web-home {
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(0, 0, 0, 0.35);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 24px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
background: rgba(0, 0, 0, 0.45);
|
||||
border-color: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 60px;
|
||||
align-items: center;
|
||||
padding: 120px 60px;
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding: 48px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
color: #34d399;
|
||||
padding: 10px 20px;
|
||||
border-radius: 50px;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
margin-bottom: 24px;
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 72px;
|
||||
font-weight: 900;
|
||||
line-height: 1.05;
|
||||
color: white;
|
||||
margin: 0 0 28px 0;
|
||||
letter-spacing: -2px;
|
||||
}
|
||||
|
||||
.hero-desc {
|
||||
font-size: 18px;
|
||||
line-height: 1.7;
|
||||
color: #d1d5db;
|
||||
margin: 0 0 36px 0;
|
||||
}
|
||||
|
||||
.hero-actions {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.cta-primary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 18px 36px;
|
||||
border-radius: 50px;
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: #10b981;
|
||||
color: white;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.cta-primary:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 16px 40px rgba(16, 185, 129, 0.35);
|
||||
background: #059669;
|
||||
}
|
||||
|
||||
.hero-visual {
|
||||
position: relative;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.visual-container {
|
||||
position: relative;
|
||||
width: 420px;
|
||||
height: 420px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.hero-image {
|
||||
width: 360px;
|
||||
height: 360px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.product-wrapper {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
object-fit: contain;
|
||||
filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
|
||||
}
|
||||
|
||||
.orbit {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 50%;
|
||||
z-index: 1;
|
||||
animation: spin 25s linear infinite;
|
||||
}
|
||||
|
||||
.orbit-1 {
|
||||
width: 340px;
|
||||
height: 340px;
|
||||
}
|
||||
.orbit-2 {
|
||||
width: 480px;
|
||||
height: 480px;
|
||||
opacity: 0.4;
|
||||
animation-duration: 45s;
|
||||
animation-direction: reverse;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: translate(-50%, -50%) rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.floating-card {
|
||||
position: absolute;
|
||||
right: -20px;
|
||||
bottom: 80px;
|
||||
padding: 16px 24px;
|
||||
min-width: 200px;
|
||||
z-index: 10;
|
||||
animation: float 4s ease-in-out infinite;
|
||||
background: rgba(5, 31, 24, 0.8);
|
||||
border: 1px solid rgba(52, 211, 153, 0.2);
|
||||
}
|
||||
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-12px);
|
||||
}
|
||||
}
|
||||
|
||||
.score-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.card-label {
|
||||
font-size: 11px;
|
||||
color: #9ca3af;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.card-value {
|
||||
font-size: 22px;
|
||||
color: white;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 25vh;
|
||||
}
|
||||
.footer-spacer {
|
||||
height: 15vh;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 60px 40px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
text-align: center;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
color: white;
|
||||
margin: 0 0 12px 0;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.section-desc {
|
||||
font-size: 18px;
|
||||
color: #d1d5db;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 32px;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 48px;
|
||||
font-weight: 900;
|
||||
color: #34d399;
|
||||
margin-bottom: 4px;
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.features-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.feature-card {
|
||||
padding: 32px 24px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.feature-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border-radius: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #34d399;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.feature-title {
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin: 0 0 10px 0;
|
||||
}
|
||||
|
||||
.feature-desc {
|
||||
font-size: 14px;
|
||||
color: #9ca3af;
|
||||
line-height: 1.6;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.news-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 28px;
|
||||
}
|
||||
|
||||
.news-card {
|
||||
padding: 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.news-icon {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
border-radius: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #34d399;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.news-meta {
|
||||
font-size: 12px;
|
||||
color: #34d399;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.news-title {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
margin: 0 0 10px 0;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.news-desc {
|
||||
font-size: 14px;
|
||||
color: #d1d5db;
|
||||
line-height: 1.6;
|
||||
flex-grow: 1;
|
||||
margin: 0 0 20px 0;
|
||||
}
|
||||
|
||||
.news-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #34d399;
|
||||
text-decoration: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.news-link:hover {
|
||||
gap: 12px;
|
||||
color: #6ee7b7;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 40px;
|
||||
padding: 100px 30px;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 52px;
|
||||
}
|
||||
.hero-actions {
|
||||
justify-content: center;
|
||||
}
|
||||
.hero-visual {
|
||||
height: 400px;
|
||||
}
|
||||
.features-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
.news-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,23 +0,0 @@
|
||||
<nav class="web-navbar">
|
||||
<h1>My Website</h1>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/about">About</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<style>
|
||||
.web-navbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 1rem;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
}
|
||||
ul {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
list-style: none;
|
||||
}
|
||||
a { color: white; text-decoration: none; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user