mirror of
https://github.com/SirBlobby/Hoya26.git
synced 2026-02-04 03:34:34 -05:00
new camera thingies
This commit is contained in:
YousifA2
@@ -86,7 +86,7 @@
|
||||
>
|
||||
<Icon
|
||||
icon="ri:camera-lens-fill"
|
||||
width="28"
|
||||
width="36"
|
||||
style="color: white;"
|
||||
/>
|
||||
</button>
|
||||
@@ -109,10 +109,10 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
height: 80px;
|
||||
height: 90px;
|
||||
background: #0d2e25;
|
||||
border-top: 1px solid #1f473b;
|
||||
padding: 0 16px 16px;
|
||||
padding: 0 16px 20px;
|
||||
}
|
||||
|
||||
.tab-item {
|
||||
@@ -121,7 +121,7 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
gap: 6px;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
@@ -129,21 +129,21 @@
|
||||
}
|
||||
|
||||
.tab-name {
|
||||
font-size: 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.scan-button {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background: #10b981;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
margin-bottom: 24px;
|
||||
margin-bottom: 32px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
||||
transition: transform 0.15s;
|
||||
border: 4px solid #051f18;
|
||||
|
||||
172
frontend/src/lib/components/InstallPrompt.svelte
Normal file
172
frontend/src/lib/components/InstallPrompt.svelte
Normal file
@@ -0,0 +1,172 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import Icon from "@iconify/svelte";
|
||||
|
||||
let shouldShow = $state(false);
|
||||
|
||||
onMount(() => {
|
||||
// Check if iOS
|
||||
const isIOS =
|
||||
/iPad|iPhone|iPod/.test(navigator.userAgent) &&
|
||||
!(window as any).MSStream;
|
||||
|
||||
// Check if standalone
|
||||
const isStandalone =
|
||||
(window.navigator as any).standalone ||
|
||||
window.matchMedia("(display-mode: standalone)").matches;
|
||||
|
||||
// Check if mobile size
|
||||
const isMobileSize = window.innerWidth <= 768;
|
||||
|
||||
if (isIOS && isMobileSize && !isStandalone) {
|
||||
shouldShow = true;
|
||||
}
|
||||
|
||||
// For debugging/demo purposes (uncomment to test on desktop)
|
||||
// if (window.innerWidth <= 768 && !isStandalone) shouldShow = true;
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if shouldShow}
|
||||
<div class="install-overlay">
|
||||
<div class="install-card">
|
||||
<div class="icon-wrapper">
|
||||
<img src="/ethix-logo.png" alt="Ethix Logo" />
|
||||
</div>
|
||||
|
||||
<h1>Install Ethix</h1>
|
||||
<p>To use Ethix, please add this website to your home screen.</p>
|
||||
|
||||
<div class="instructions">
|
||||
<div class="step">
|
||||
<span class="step-num">1</span>
|
||||
<span
|
||||
>Tap the Share button <Icon
|
||||
icon="ios-share"
|
||||
width="20"
|
||||
style="vertical-align: middle; color: #3b82f6;"
|
||||
/> below</span
|
||||
>
|
||||
</div>
|
||||
<div class="step">
|
||||
<span class="step-num">2</span>
|
||||
<span>Select <strong>"Add to Home Screen"</strong></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="arrow-indicator">
|
||||
<Icon icon="ri:arrow-down-line" width="32" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.install-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.install-card {
|
||||
text-align: center;
|
||||
max-width: 320px;
|
||||
}
|
||||
|
||||
.icon-wrapper {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #000;
|
||||
border-radius: 20px;
|
||||
margin: 0 auto 24px;
|
||||
padding: 12px;
|
||||
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.icon-wrapper img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #1a1a1a;
|
||||
font-size: 28px;
|
||||
font-weight: 800;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #4b5563;
|
||||
font-size: 16px;
|
||||
line-height: 1.5;
|
||||
margin: 0 0 32px 0;
|
||||
}
|
||||
|
||||
.instructions {
|
||||
text-align: left;
|
||||
background: #f3f4f6;
|
||||
padding: 20px;
|
||||
border-radius: 16px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.step {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 16px;
|
||||
color: #374151;
|
||||
font-weight: 500;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.step:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.step-num {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: #1a1a1a;
|
||||
color: white;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 13px;
|
||||
font-weight: 700;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.arrow-indicator {
|
||||
color: #3b82f6;
|
||||
animation: bounce 2s infinite;
|
||||
}
|
||||
|
||||
@keyframes bounce {
|
||||
0%,
|
||||
20%,
|
||||
50%,
|
||||
80%,
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -11,38 +11,6 @@
|
||||
image: "/water-bottle.png",
|
||||
impact: "Negative Impact",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Organic Banana",
|
||||
date: "Yesterday, 3:20 PM",
|
||||
severity: "Low",
|
||||
image: "/banana.png",
|
||||
impact: "Positive Choice",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Aluminum Soda Can",
|
||||
date: "Mon, 12:15 PM",
|
||||
severity: "Low",
|
||||
image: "/soda-can.png",
|
||||
impact: "Recyclable",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Takeout Container",
|
||||
date: "Sun, 8:30 PM",
|
||||
severity: "Medium",
|
||||
image: "/container.png",
|
||||
impact: "Mixed Materials",
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: "Shampoo Bottle",
|
||||
date: "Sat, 11:00 AM",
|
||||
severity: "High",
|
||||
image: "/shampoo.png",
|
||||
impact: "High Plastic",
|
||||
},
|
||||
];
|
||||
|
||||
interface ScanItem {
|
||||
@@ -79,7 +47,6 @@
|
||||
</script>
|
||||
|
||||
<div class="min-h-screen bg-[#051f18] text-white px-5 pt-4 pb-32">
|
||||
|
||||
<section class="flex gap-3 mb-7">
|
||||
<div
|
||||
class="flex-1 flex flex-col items-center gap-2 py-4 px-2 bg-[#0d2e25] border border-[#1f473b] rounded-2xl"
|
||||
@@ -123,7 +90,7 @@
|
||||
<div class="flex flex-col gap-2.5">
|
||||
{#each scanHistory as item (item.id)}
|
||||
<button
|
||||
class="flex items-center gap-3.5 p-3 bg-[#0d2e25] border border-[#1f473b] rounded-2xl cursor-pointer w-full text-left transition-transform active:scale-98 active:bg-[#1f473b]"
|
||||
class="flex items-center gap-3.5 p-5 bg-[#0d2e25] border border-[#1f473b] rounded-2xl cursor-pointer w-full text-left transition-transform active:scale-98 active:bg-[#1f473b]"
|
||||
onclick={() => openScan(item)}
|
||||
aria-label="View {item.name}"
|
||||
>
|
||||
|
||||
@@ -7,6 +7,7 @@
|
||||
import { page } from "$app/stores";
|
||||
import { goto } from "$app/navigation";
|
||||
import Icon from "@iconify/svelte";
|
||||
import InstallPrompt from "$lib/components/InstallPrompt.svelte";
|
||||
|
||||
let { children } = $props();
|
||||
let isApp = $state(false);
|
||||
@@ -80,6 +81,8 @@
|
||||
<link rel="icon" href="/ethix-logo.png" />
|
||||
</svelte:head>
|
||||
|
||||
<InstallPrompt />
|
||||
|
||||
{#if isMobile}
|
||||
<div class="mobile-container">
|
||||
<main class="app-container">
|
||||
|
||||
Reference in New Issue
Block a user