new camera thingies

frontend/src/lib/components/CustomTabBar.svelte

@@ -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;
+		width: 72px;
-		height: 56px;
+		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;

frontend/src/lib/components/InstallPrompt.svelte

@@ -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>

frontend/src/lib/components/MobileHomePage.svelte

@@ -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}"
                 >

frontend/src/routes/+layout.svelte

@@ -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">