mirror of
https://github.com/SirBlobby/Hoya26.git
synced 2026-02-04 03:34:34 -05:00
UI Rework
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user