Spaces:

amirabbox
/

undefined

Running

App Files Files Community

amirabbox commited on Oct 1, 2025

Commit

4ddf986

verified ·

1 Parent(s): 21cc8f7

make the rescan animations smoother. when you click rescan the camera feed box is a bit buggy. i want the buttons to become fade when you click re scan. then the camera feed area becomes full size of the screen, when the scan is done the buttons re fade and become visible again all in very very smooth animation. also the dark mode colors are orange and black, i want the light mode colors to be white and mint green. when you click the dark mode light mode button the colors change to white and mint green and when you click dark mode the colors become what it is now.

Browse files

Files changed (2) hide show

README.md +9 -5
index.html +930 -19

README.md CHANGED Viewed

@@ -1,10 +1,14 @@
 ---
-title: Undefined
-emoji: 🌍
-colorFrom: pink
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: undefined
+colorFrom: blue
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,930 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SnapCal AI - Real-time Food Analysis</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@400;700&family=Noto+Sans+Devanagari:wght@400;700&family=Noto+Sans+Hebrew:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Noto+Sans+KR:wght@400;700&family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+Thai:wght@400;700&family=Noto+Serif:wght@400;700&display=swap');
+        body {
+            font-family: 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans Devanagari', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans SC', 'Noto Sans Thai', sans-serif;
+            background: #1A1A1A;
+            color: #D0D0D0;
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+            transition: background 0.5s ease, color 0.5s ease;
+            text-align: center;
+        }
+        body.light {
+            background: #FFFFFF;
+            color: #333;
+            --accent-color: #37C2B0; /* Mint green */
+            --light-accent: #E0F7F4;
+        }
+.neu {
+            background: #1A1A1A;
+            border-radius: 20px;
+            box-shadow: 10px 10px 20px #101010, -10px -10px 20px #242424;
+            transition: all 0.5s ease;
+        }
+        body.light .neu {
+            background: #FFFFFF;
+            box-shadow: 10px 10px 20px rgba(0,0,0,0.05), -10px -10px 20px #FFFFFF;
+        }
+.neu-inset {
+            background: #1A1A1A;
+            border-radius: 20px;
+            box-shadow: inset 10px 10px 20px #101010, inset -10px -10px 20px #242424;
+        }
+        body.light .neu-inset {
+            box-shadow: inset 3px 3px 6px rgba(0,0,0,0.05), inset -3px -3px 6px #FFFFFF;
+            background: #FAFAFA;
+        }
+.neu-button {
+            background: #1A1A1A;
+            border: none;
+            border-radius: 50px;
+            padding: 12px 24px;
+            color: #D0D0D0;
+            font-weight: bold;
+            box-shadow: 5px 5px 10px #101010, -5px -5px 10px #242424;
+            transition: all 0.5s ease;
+        }
+        .neu-button:hover {
+            box-shadow: inset 5px 5px 10px #101010, inset -5px -5px 10px #242424;
+            transform: translateY(-2px);
+        }
+        body.light .neu-button {
+            background: #FFFFFF;
+            color: #333;
+            box-shadow: 5px 5px 10px rgba(0,0,0,0.05), -5px -5px 10px #FFFFFF;
+        }
+        body.light .neu-button:hover {
+            box-shadow: inset 3px 3px 6px rgba(0,0,0,0.05), inset -3px -3px 6px #FFFFFF;
+            transform: translateY(-2px);
+            background: var(--light-accent);
+        }
+        .accent {
+            background: var(--accent-color, linear-gradient(45deg, #FF6B6B, #FFE66D));
+            color: #1A1A1A;
+        }
+.camera-feed {
+            background: #000;
+            border: none;
+            position: relative;
+            overflow: hidden;
+            border-radius: 20px;
+            transition: height 0.5s ease-in-out;
+        }
+        .scan-line {
+            position: absolute;
+            width: 100%;
+            height: 3px;
+            background: linear-gradient(90deg, transparent, #FFE66D, transparent);
+            box-shadow: 0 0 10px #FFE66D;
+            animation: scan 2s linear infinite;
+            z-index: 10;
+        }
+        @keyframes scan {
+            0% { top: 0; }
+            100% { top: 100%; }
+        }
+        .detection-item {
+            background: #1A1A1A;
+            border-radius: 12px;
+            padding: 8px;
+            z-index: 20;
+            text-align: center;
+            box-shadow: 5px 5px 10px #101010, -5px -5px 10px #242424;
+            transition: transform 0.3s ease, opacity 0.3s ease;
+        }
+        body.light .detection-item {
+            background: #ECECEC;
+            box-shadow: 5px 5px 10px #D4D4D4, -5px -5px 10px #FFFFFF;
+        }
+        .calorie-badge {
+            background: linear-gradient(45deg, #FF6B6B, #FFE66D);
+            color: #1A1A1A;
+            padding: 2px 8px;
+            border-radius: 12px;
+            font-size: 12px;
+        }
+        .progress-bar {
+            height: 4px;
+            background: #242424;
+            border-radius: 2px;
+            overflow: hidden;
+        }
+        body.light .progress-bar {
+            background: #D4D4D4;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #FF6B6B, #FFE66D);
+            width: 0%;
+            transition: width 0.5s ease-in-out;
+        }
+        .component-highlight {
+            animation: pulse 1.5s infinite ease-in-out;
+            border: 2px solid #FFE66D;
+        }
+        @keyframes pulse {
+            0% { opacity: 0.6; transform: scale(1); }
+            50% { opacity: 1; transform: scale(1.05); }
+            100% { opacity: 0.6; transform: scale(1); }
+        }
+        .processing-overlay {
+            background: rgba(26, 26, 26, 0.9);
+            z-index: 30;
+            transition: opacity 0.5s ease;
+        }
+        body.light .processing-overlay {
+            background: rgba(236, 236, 236, 0.9);
+        }
+        .nav-button {
+            transition: all 0.6s ease;
+            position: relative;
+        }
+        .fade-in {
+            opacity: 0;
+            transform: translateY(20px);
+            transition: opacity 0.8s ease-in-out, transform 0.8s ease-in-out;
+        }
+        .fade-in.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        #cameraContainer {
+            transition: height 0.5s ease-in-out;
+        }
+        #analysisResults, #navButtons, #footer {
+            transition: opacity 0.5s ease-in-out;
+        }
+        .nav-menu {
+            display: none;
+            position: absolute;
+            bottom: 100%;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #1A1A1A;
+            border-radius: 12px;
+            padding: 8px;
+            min-width: 150px;
+            z-index: 40;
+            text-align: center;
+            box-shadow: 5px 5px 10px #101010, -5px -5px 10px #242424;
+            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
+        }
+        body.light .nav-menu {
+            background: #ECECEC;
+            box-shadow: 5px 5px 10px #D4D4D4, -5px -5px 10px #FFFFFF;
+        }
+        .nav-button:hover .nav-menu {
+            display: block;
+            opacity: 1;
+            transform: translateX(-50%) translateY(-10px);
+        }
+        .nav-menu li {
+            padding: 4px 8px;
+            cursor: pointer;
+            transition: background 0.3s ease-in-out;
+            text-align: center;
+            border-radius: 8px;
+        }
+        .nav-menu li:hover {
+            box-shadow: inset 2px 2px 5px #101010, inset -2px -2px 5px #242424;
+        }
+        body.light .nav-menu li:hover {
+            box-shadow: inset 2px 2px 5px #D4D4D4, inset -2px -2px 5px #FFFFFF;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 50;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            overflow: auto;
+            background-color: rgba(0,0,0,0.4);
+            animation: fadeIn 0.3s ease-in-out;
+            transition: opacity 0.3s ease-in-out;
+        }
+        .modal.closing {
+            opacity: 0;
+        }
+        @keyframes fadeIn {
+            from {opacity: 0;}
+            to {opacity: 1;}
+        }
+        .modal-content {
+            background: #1A1A1A;
+            margin: 15% auto;
+            padding: 20px;
+            width: 80%;
+            max-width: 600px;
+            border-radius: 20px;
+            text-align: center;
+            animation: slideDown 0.3s ease-in-out;
+            transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
+            box-shadow: 10px 10px 20px #101010, -10px -10px 20px #242424;
+        }
+        .modal-content.closing {
+            transform: translateY(20px);
+            opacity: 0;
+        }
+        @keyframes slideDown {
+            from {transform: translateY(-20px); opacity: 0;}
+            to {transform: translateY(0); opacity: 1;}
+        }
+        body.light .modal-content {
+            background: #ECECEC;
+            box-shadow: 10px 10px 20px #D4D4D4, -10px -10px 20px #FFFFFF;
+        }
+        .close {
+            color: #aaa;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            transition: color 0.3s ease-in-out;
+        }
+        .close:hover,
+        .close:focus {
+            color: #FF6B6B;
+            text-decoration: none;
+            cursor: pointer;
+        }
+        .theme-toggle {
+            cursor: pointer;
+            transition: transform 0.3s ease-in-out;
+        }
+        .theme-toggle:hover {
+            transform: scale(1.1);
+        }
+        .border-black {
+            border-color: #000;
+        }
+        body.light .border-black {
+            border-color: #333;
+        }
+        .bg-white {
+            background: #1A1A1A;
+        }
+        body.light .bg-white {
+            background: #ECECEC;
+        }
+        .text-gray-600 {
+            color: #A0A0A0;
+        }
+        body.light .text-gray-600 {
+            color: #666;
+        }
+        .text-gray-500 {
+            color: #808080;
+        }
+        body.light .text-gray-500 {
+            color: #999;
+        }
+        .hover\:bg-gray-100:hover {
+            background: #242424;
+        }
+        body.light .hover\:bg-gray-100:hover {
+            background: #D4D4D4;
+        }
+        .bg-black {
+            background: #242424;
+        }
+        body.light .bg-black {
+            background: #D4D4D4;
+        }
+        .text-white {
+            color: #D0D0D0;
+        }
+        body.light .text-white {
+            color: #333;
+        }
+        .text-black {
+            color: #D0D0D0;
+        }
+        body.light .text-black {
+            color: #333;
+        }
+        .upgrade-progress {
+            height: 10px;
+            background: #242424;
+            border-radius: 5px;
+            overflow: hidden;
+            margin-top: 10px;
+        }
+        .upgrade-progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #FF6B6B, #FFE66D);
+            width: 0%;
+            transition: width 1s ease-in-out;
+        }
+        .btn-primary {
+            background: #1A1A1A;
+            color: #D0D0D0;
+            padding: 10px 20px;
+            border-radius: 50px;
+            cursor: pointer;
+            transition: all 0.3s ease-in-out;
+            box-shadow: 5px 5px 10px #101010, -5px -5px 10px #242424;
+        }
+        .btn-primary:hover {
+            box-shadow: inset 5px 5px 10px #101010, inset -5px -5px 10px #242424;
+        }
+        body.light .btn-primary {
+            background: #ECECEC;
+            color: #333;
+            box-shadow: 5px 5px 10px #D4D4D4, -5px -5px 10px #FFFFFF;
+        }
+        body.light .btn-primary:hover {
+            box-shadow: inset 5px 5px 10px #D4D4D4, inset -5px -5px 10px #FFFFFF;
+        }
+        .success-message {
+            color: #FFE66D;
+            margin-top: 10px;
+            animation: fadeInMessage 0.5s ease-in-out;
+        }
+        @keyframes fadeInMessage {
+            from {opacity: 0; transform: translateY(10px);}
+            to {opacity: 1; transform: translateY(0);}
+        }
+    </style>
+</head>
+<body class="min-h-screen">
+    <!-- Header -->
+    <header id="header" class="p-4 flex justify-between items-center neu hidden">
+        <div class="flex items-center space-x-2">
+            <i data-feather="camera" class="text-white"></i>
+            <h1 class="text-xl font-bold text-white">SnapCal AI</h1>
+        </div>
+        <div class="flex space-x-4 items-center">
+            <select id="languageSelect" class="p-2 rounded neu-inset bg-transparent text-white">
+                <option value="en">English</option>
+                <option value="fa">فارسی</option>
+                <option value="fr">Français</option>
+                <option value="it">Italiano</option>
+                <option value="de">Deutsch</option>
+            </select>
+            <div id="themeToggle" class="p-2 rounded-full neu flex items-center justify-center theme-toggle">
+                <i data-feather="sun" class="text-white" id="themeIcon"></i>
+            </div>
+            <button class="p-2 rounded-full neu">
+                <i data-feather="user" class="text-white"></i>
+            </button>
+        </div>
+    </header>
+    <main class="container mx-auto px-4 py-8">
+        <div class="neu rounded-2xl overflow-hidden">
+            <!-- Camera Feed Container -->
+            <div id="cameraContainer" class="relative w-full h-screen camera-feed flex items-center justify-center">
+                <!-- Live Camera Feed -->
+                <div class="absolute inset-0 flex items-center justify-center">
+                    <div class="text-center z-10">
+                        <i data-feather="camera" class="w-16 h-16 mx-auto mb-4 text-white"></i>
+                        <p class="text-lg text-white" data-lang-en="Live Camera Feed" data-lang-fa="فید دوربین زنده" data-lang-fr="Flux de caméra en direct" data-lang-it="Feed della telecamera dal vivo" data-lang-de="Live-Kamera-Feed">Live Camera Feed</p>
+                        <p class="text-sm text-gray-300" data-lang-en="Point at your food to begin analysis" data-lang-fa="دوربین را به سمت غذای خود بگیرید تا تحلیل آغاز شود" data-lang-fr="Pointez la caméra vers votre nourriture pour commencer l'analyse" data-lang-it="Punta la fotocamera verso il cibo per iniziare l'analisi" data-lang-de="Richten Sie die Kamera auf Ihr Essen, um die Analyse zu starten">Point at your food to begin analysis</p>
+                    </div>
+                </div>
+                <!-- Scan Line Effect -->
+                <div class="scan-line"></div>
+                <!-- Processing Overlay -->
+                <div id="processingOverlay" class="processing-overlay absolute inset-0 hidden flex-col items-center justify-center">
+                    <div class="text-center mb-6 z-20">
+                        <div class="w-16 h-16 border-4 border-white border-t-transparent rounded-full animate-spin mx-auto mb-4"></div>
+                        <h3 class="text-xl font-bold" data-lang-en="Analyzing Food..." data-lang-fa="در حال تحلیل غذا..." data-lang-fr="Analyse de la nourriture..." data-lang-it="Analisi del cibo in corso..." data-lang-de="Lebensmittel werden analysiert...">Analyzing Food...</h3>
+                        <p class="text-gray-600" data-lang-en="Processing image to detect components" data-lang-fa="پردازش تصویر برای تشخیص اجزا" data-lang-fr="Traitement de l'image pour détecter les composants" data-lang-it="Elaborazione dell'immagine per rilevare i componenti" data-lang-de="Verarbeitung des Bildes zur Erkennung der Bestandteile">Processing image to detect components</p>
+                    </div>
+                    <div class="w-64 progress-bar">
+                        <div id="progressFill" class="progress-fill"></div>
+                    </div>
+                </div>
+                <!-- Detection Results -->
+                <div id="detectionResults" class="absolute inset-0 hidden flex items-center justify-center">
+                    <div class="text-center z-20">
+                        <div class="absolute top-1/3 left-1/4 w-24 h-24 border-2 border-white rounded-lg component-highlight"></div>
+                        <div class="absolute bottom-1/3 right-1/3 w-20 h-20 border-2 border-white rounded-lg component-highlight"></div>
+                        <div class="absolute top-1/3 left-1/4 transform -translate-x-1/2 -translate-y-1/2">
+                            <div class="detection-item flex items-center space-x-2 neu-inset">
+                                <span class="font-semibold" data-lang-en="Pancake" data-lang-fa="پنکیک" data-lang-fr="Crêpe" data-lang-it="Pancake" data-lang-de="Pfannkuchen">Pancake</span>
+                                <span class="calorie-badge">220 cal</span>
+                            </div>
+                        </div>
+                        <div class="absolute bottom-1/3 right-1/3 transform translate-x-1/2 translate-y-1/2">
+                            <div class="detection-item flex items-center space-x-2 neu-inset">
+                                <span class="font-semibold" data-lang-en="Maple Syrup" data-lang-fa="شربت افرا" data-lang-fr="Sirop d'érable" data-lang-it="Sciroppo d'acero" data-lang-de="Ahornsirup">Maple Syrup</span>
+                                <span class="calorie-badge">52 cal</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Analysis Results -->
+            <div id="analysisResults" class="p-6 hidden">
+                <div class="flex justify-between items-center mb-6">
+                    <h2 class="text-2xl font-bold" data-lang-en="Food Analysis" data-lang-fa="تحلیل غذا" data-lang-fr="Analyse alimentaire" data-lang-it="Analisi del cibo" data-lang-de="Lebensmittelanalyse">Food Analysis</h2>
+                    <div class="flex items-center space-x-2">
+                        <span class="px-3 py-1 rounded-full text-sm font-medium neu-inset">Live</span>
+                        <span class="text-sm text-gray-500" data-lang-en="Updated just now" data-lang-fa="به‌روزرسانی شده همین حالا" data-lang-fr="Mis à jour à l'instant" data-lang-it="Aggiornato proprio ora" data-lang-de="Gerade jetzt aktualisiert">Updated just now</span>
+                    </div>
+                </div>
+                <!-- Total Calories -->
+                <div class="neu rounded-2xl p-6 mb-6">
+                    <div class="flex justify-between items-center">
+                        <div>
+                            <p class="text-lg text-gray-600" data-lang-en="Total Calories" data-lang-fa="کالری کل" data-lang-fr="Calories totales" data-lang-it="Calorie totali" data-lang-de="Gesamtkalorien">Total Calories</p>
+                            <p class="text-4xl font-bold">272 kcal</p>
+                        </div>
+                        <div class="text-right">
+                            <p class="text-lg text-gray-600" data-lang-en="Components" data-lang-fa="اجزا" data-lang-fr="Composants" data-lang-it="Componenti" data-lang-de="Komponenten">Components</p>
+                            <p class="text-4xl font-bold">2</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Detected Components -->
+                <div class="space-y-4">
+                    <h3 class="text-lg font-semibold" data-lang-en="Detected Components" data-lang-fa="اجزای تشخیص داده شده" data-lang-fr="Composants détectés" data-lang-it="Componenti rilevati" data-lang-de="Erkannte Komponenten">Detected Components</h3>
+                    <div class="flex items-center justify-between p-4 rounded-xl neu">
+                        <div class="flex items-center space-x-4">
+                            <div class="w-12 h-12 rounded-lg flex items-center justify-center neu-inset">
+                                <i data-feather="circle" class="text-white"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-medium" data-lang-en="Pancake" data-lang-fa="پنکیک" data-lang-fr="Crêpe" data-lang-it="Pancake" data-lang-de="Pfannkuchen">Pancake</h4>
+                                <p class="text-sm text-gray-600" data-lang-en="Flour, egg, milk, butter" data-lang-fa="آرد، تخم‌مرغ، شیر، کره" data-lang-fr="Farine, œuf, lait, beurre" data-lang-it="Farina, uovo, latte, burro" data-lang-de="Mehl, Ei, Milch, Butter">Flour, egg, milk, butter</p>
+                            </div>
+                        </div>
+                        <div class="text-right">
+                            <p class="font-semibold">220 kcal</p>
+                            <p class="text-sm text-gray-600" data-lang-en="1 serving" data-lang-fa="1 وعده" data-lang-fr="1 portion" data-lang-it="1 porzione" data-lang-de="1 Portion">1 serving</p>
+                        </div>
+                    </div>
+                    <div class="flex items-center justify-between p-4 rounded-xl neu">
+                        <div class="flex items-center space-x-4">
+                            <div class="w-12 h-12 rounded-lg flex items-center justify-center neu-inset">
+                                <i data-feather="droplet" class="text-white"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-medium" data-lang-en="Maple Syrup" data-lang-fa="شربت افرا" data-lang-fr="Sirop d'érable" data-lang-it="Sciroppo d'acero" data-lang-de="Ahornsirup">Maple Syrup</h4>
+                                <p class="text-sm text-gray-600" data-lang-en="Natural sweetener" data-lang-fa="شیرین‌کننده طبیعی" data-lang-fr="Édulcorant naturel" data-lang-it="Edulcorante naturale" data-lang-de="Natürlicher Süßstoff">Natural sweetener</p>
+                            </div>
+                        </div>
+                        <div class="text-right">
+                            <p class="font-semibold">52 kcal</p>
+                            <p class="text-sm text-gray-600" data-lang-en="1 tbsp" data-lang-fa="1 قاشق غذاخوری" data-lang-fr="1 cuillère à soupe" data-lang-it="1 cucchiaio" data-lang-de="1 Esslöffel">1 tbsp</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Action Buttons -->
+                <div class="mt-8 flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
+                    <button id="saveMeal" class="flex-1 neu-button accent flex items-center justify-center space-x-2">
+                        <i data-feather="save"></i>
+                        <span data-lang-en="Save Meal" data-lang-fa="ذخیره وعده غذایی" data-lang-fr="Enregistrer le repas" data-lang-it="Salva pasto" data-lang-de="Mahlzeit speichern">Save Meal</span>
+                    </button>
+                    <button id="rescan" class="flex-1 neu-button flex items-center justify-center space-x-2">
+                        <i data-feather="refresh-ccw"></i>
+                        <span data-lang-en="Rescan" data-lang-fa="اسکن مجدد" data-lang-fr="Rescanner" data-lang-it="Riscansiona" data-lang-de="Erneut scannen">Rescan</span>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </main>
+    <!-- Navigation Buttons -->
+    <div id="navButtons" class="fixed bottom-0 left-0 right-0 p-4 hidden neu">
+        <div class="flex justify-around">
+            <button class="nav-button flex flex-col items-center space-y-1 fade-in neu-button">
+                <i data-feather="home" class="w-6 h-6"></i>
+                <span class="text-xs" data-lang-en="Home" data-lang-fa="خانه" data-lang-fr="Accueil" data-lang-it="Home" data-lang-de="Startseite">Home</span>
+            </button>
+            <div class="nav-button flex flex-col items-center space-y-1 fade-in relative neu-button">
+                <i data-feather="book" class="w-6 h-6"></i>
+                <span class="text-xs" data-lang-en="Dishes" data-lang-fa="غذاها" data-lang-fr="Plats" data-lang-it="Piatti" data-lang-de="Gerichte">Dishes</span>
+                <ul class="nav-menu">
+                    <li data-lang-en="Soup" data-lang-fa="سوپ" data-lang-fr="Soupe" data-lang-it="Zuppa" data-lang-de="Suppe">Soup</li>
+                    <li data-lang-en="Sandwich" data-lang-fa="ساندویچ" data-lang-fr="Sandwich" data-lang-it="Panino" data-lang-de="Sandwich">Sandwich</li>
+                    <li data-lang-en="Khoresht" data-lang-fa="خورش" data-lang-fr="Khoresht" data-lang-it="Khoresht" data-lang-de="Khoresht">Khoresht</li>
+                    <li data-lang-en="Polo" data-lang-fa="پلو" data-lang-fr="Polo" data-lang-it="Polo" data-lang-de="Polo">Polo</li>
+                    <li data-lang-en="Salad" data-lang-fa="سالاد" data-lang-fr="Salade" data-lang-it="Insalata" data-lang-de="Salat">Salad</li>
+                    <li data-lang-en="Dessert" data-lang-fa="دسر" data-lang-fr="Dessert" data-lang-it="Dessert" data-lang-de="Dessert">Dessert</li>
+                </ul>
+            </div>
+            <div class="nav-button flex flex-col items-center space-y-1 fade-in relative neu-button">
+                <i data-feather="user" class="w-6 h-6"></i>
+                <span class="text-xs" data-lang-en="Account" data-lang-fa="حساب کاربری" data-lang-fr="Compte" data-lang-it="Account" data-lang-de="Konto">Account</span>
+                <ul class="nav-menu">
+                    <li onclick="openModal('profileModal')" data-lang-en="Profile" data-lang-fa="پروفایل" data-lang-fr="Profil" data-lang-it="Profilo" data-lang-de="Profil">Profile</li>
+                    <li onclick="openModal('premiumModal')" data-lang-en="Upgrade to Premium" data-lang-fa="ارتقا به پرمیوم" data-lang-fr="Passer à Premium" data-lang-it="Passa a Premium" data-lang-de="Auf Premium upgraden">Upgrade to Premium</li>
+                    <li onclick="openModal('historyModal')" data-lang-en="Meal History" data-lang-fa="تاریخچه وعده‌ها" data-lang-fr="Historique des repas" data-lang-it="Cronologia pasti" data-lang-de="Mahlzeitenverlauf">Meal History</li>
+                    <li onclick="openModal('accountSettingsModal')" data-lang-en="Settings" data-lang-fa="تنظیمات" data-lang-fr="Paramètres" data-lang-it="Impostazioni" data-lang-de="Einstellungen">Settings</li>
+                    <li onclick="confirmLogout()" data-lang-en="Logout" data-lang-fa="خروج" data-lang-fr="Déconnexion" data-lang-it="Disconnessione" data-lang-de="Abmelden">Logout</li>
+                </ul>
+            </div>
+            <div class="nav-button flex flex-col items-center space-y-1 fade-in relative neu-button">
+                <i data-feather="settings" class="w-6 h-6"></i>
+                <span class="text-xs" data-lang-en="Settings" data-lang-fa="تنظیمات" data-lang-fr="Paramètres" data-lang-it="Impostazioni" data-lang-de="Einstellungen">Settings</span>
+                <ul class="nav-menu">
+                    <li onclick="openModal('languageModal')" data-lang-en="Language" data-lang-fa="زبان" data-lang-fr="Langue" data-lang-it="Lingua" data-lang-de="Sprache">Language</li>
+                    <li onclick="openModal('notificationsModal')" data-lang-en="Notifications" data-lang-fa="اعلان‌ها" data-lang-fr="Notifications" data-lang-it="Notifiche" data-lang-de="Benachrichtigungen">Notifications</li>
+                    <li onclick="openModal('privacyModal')" data-lang-en="Privacy" data-lang-fa="حریم خصوصی" data-lang-fr="Confidentialité" data-lang-it="Privacy" data-lang-de="Datenschutz">Privacy</li>
+                    <li onclick="openModal('supportModal')" data-lang-en="Help & Support" data-lang-fa="کمک و پشتیبانی" data-lang-fr="Aide & Support" data-lang-it="Aiuto & Supporto" data-lang-de="Hilfe & Support">Help & Support</li>
+                    <li onclick="openModal('aboutModal')" data-lang-en="About" data-lang-fa="درباره ما" data-lang-fr="À propos" data-lang-it="Informazioni" data-lang-de="Über">About</li>
+                </ul>
+            </div>
+        </div>
+    </div>
+    <!-- Footer -->
+    <footer id="footer" class="py-8 text-center text-gray-600 hidden neu">
+        <p data-lang-en="© 2023 SnapCal AI by Team Nora. All rights reserved." data-lang-fa="© ۲۰۲۳ SnapCal AI توسط تیم نورا. همه حقوق محفوظ است." data-lang-fr="© 2023 SnapCal AI par Team Nora. Tous droits réservés." data-lang-it="© 2023 SnapCal AI da Team Nora. Tutti i diritti riservati." data-lang-de="© 2023 SnapCal AI von Team Nora. Alle Rechte vorbehalten.">© 2023 SnapCal AI by Team Nora. All rights reserved.</p>
+        <p data-lang-en="Trademark of Team Nora. Rights reserved." data-lang-fa="علامت تجاری تیم نورا. حقوق محفوظ." data-lang-fr="Marque de Team Nora. Droits réservés." data-lang-it="Marchio di Team Nora. Diritti riservati." data-lang-de="Marke von Team Nora. Rechte vorbehalten.">Trademark of Team Nora. Rights reserved.</p>
+    </footer>
+    <!-- Modals -->
+    <div id="aboutModal" class="modal">
+        <div class="modal-content neu">
+            <span class="close" onclick="closeModal('aboutModal')">&times;</span>
+            <h2 data-lang-en="About Us" data-lang-fa="درباره ما" data-lang-fr="À propos de nous" data-lang-it="Chi siamo" data-lang-de="Über uns">About Us</h2>
+            <p data-lang-en="SnapCal AI is developed by Team Nora, a group of passionate developers focused on making healthy eating easier through AI technology." data-lang-fa="SnapCal AI توسط تیم نورا توسعه یافته است، گروهی از توسعه‌دهندگان مشتاق که بر روی آسان کردن خوردن سالم از طریق فناوری هوش مصنوعی تمرکز دارند." data-lang-fr="SnapCal AI est développé par Team Nora, un groupe de développeurs passionnés axés sur la simplification de l'alimentation saine grâce à la technologie IA." data-lang-it="SnapCal AI è sviluppato da Team Nora, un gruppo di sviluppatori appassionati focalizzati sul rendere più facile una dieta sana tramite la tecnologia AI." data-lang-de="SnapCal AI wird von Team Nora entwickelt, einer Gruppe leidenschaftlicher Entwickler, die sich darauf konzentrieren, gesundes Essen durch KI-Technologie zu erleichtern.">SnapCal AI is developed by Team Nora, a group of passionate developers focused on making healthy eating easier through AI technology.</p>
+        </div>
+    </div>
+    <div id="supportModal" class="modal">
+        <div class="modal-content neu">
+            <span class="close" onclick="closeModal('supportModal')">&times;</span>
+            <h2 data-lang-en="Help & Support" data-lang-fa="کمک و پشتیبانی" data-lang-fr="Aide & Support" data-lang-it="Aiuto & Supporto" data-lang-de="Hilfe & Support">Help & Support</h2>
+            <p data-lang-en="Contact us at support@teamnora.com or call +1-123-456-7890 for assistance." data-lang-fa="با ما تماس بگیرید در support@teamnora.com یا شماره +۱-۱۲۳-۴۵۶-۷۸۹۰ برای کمک." data-lang-fr="Contactez-nous à support@teamnora.com ou appelez le +1-123-456-7890 pour de l'aide." data-lang-it="Contattaci a support@teamnora.com o chiama il +1-123-456-7890 per assistenza." data-lang-de="Kontaktiere uns unter support@teamnora.com oder ruf +1-123-456-7890 an für Hilfe.">Contact us at support@teamnora.com or call +1-123-456-7890 for assistance.</p>
+            <button class="neu-button mt-4" onclick="sendSupportEmail()">Send Email</button>
+            <p id="supportStatus" class="success-message hidden">Email sent successfully!</p>
+        </div>
+    </div>
+    <div id="privacyModal" class="modal">
+        <div class="modal-content neu">
+            <span class="close" onclick="closeModal('privacyModal')">&times;</span>
+            <h2 data-lang-en="Privacy Policy" data-lang-fa="سیاست حریم خصوصی" data-lang-fr="Politique de confidentialité" data-lang-it="Politica sulla privacy" data-lang-de="Datenschutzrichtlinie">Privacy Policy</h2>
+            <p data-lang-en="We value your privacy. Your data is secure and not shared without consent. For more details, read our full policy." data-lang-fa="ما به حریم خصوصی شما اهمیت می‌دهیم. داده‌های شما امن است و بدون رضایت به اشتراک گذاشته نمی‌شود. برای جزئیات بیشتر، سیاست کامل ما را بخوانید." data-lang-fr="Nous valorisons votre vie privée. Vos données sont sécurisées et ne sont pas partagées sans consentement. Pour plus de détails, lisez notre politique complète." data-lang-it="Valorizziamo la tua privacy. I tuoi dati sono sicuri e non vengono condivisi senza consenso. Per maggiori dettagli, leggi la nostra politica completa." data-lang-de="Wir schätzen Ihre Privatsphäre. Ihre Daten sind sicher und werden ohne Zustimmung nicht geteilt. Lesen Sie unsere vollständige Richtlinie für weitere Details.">We value your privacy. Your data is secure and not shared without consent. For more details, read our full policy.</p>
+        </div>
+    </div>
+    <div id="notificationsModal" class="modal">
+        <div class="modal-content neu">
+            <span class="close" onclick="closeModal('notificationsModal')">&times;</span>
+            <h2 data-lang-en="Notifications Settings" data-lang-fa="تنظیمات اعلان‌ها" data-lang-fr="Paramètres des notifications" data-lang-it="Impostazioni notifiche" data-lang-de="Benachrichtigungseinstellungen">Notifications Settings</h2>
+            <label>
+                <input type="checkbox" id="silentMode" onchange="updateNotificationSettings()">
+                <span data-lang-en="Silent Mode" data-lang-fa="حالت سایلنت" data-lang-fr="Mode silencieux" data-lang-it="Modalità silenziosa" data-lang-de="Stiller Modus">Silent Mode</span>
+            </label>
+            <br>
+            <label>
+                <input type="checkbox" id="dailyReminders" onchange="updateNotificationSettings()">
+                <span data-lang-en="Daily Reminders" data-lang-fa="یادآوری روزانه" data-lang-fr="Rappels quotidiens" data-lang-it="Promemoria giornalieri" data-lang-de="Tägliche Erinnerungen">Daily Reminders</span>
+            </label>
+            <p id="notificationStatus" class="text-gray-600 mt-2 success-message"></p>
+        </div>
+    </div>
+    <div id="profileModal" class="modal">
+        <div class="modal-content neu">
+            <span class="close" onclick="closeModal('profileModal')">&times;</span>
+            <h2 data-lang-en="Profile" data-lang-fa="پروفایل" data-lang-fr="Profil" data-lang-it="Profilo" data-lang-de="Profil">Profile</h2>
+            <form id="profileForm" onsubmit="saveProfile(event)">
+                <label data-lang-en="Name:" data-lang-fa="نام:" data-lang-fr="Nom:" data-lang-it="Nome:" data-lang-de="Name:">Name:</label>
+                <input type="text" id="profileName" class="p-2 mt-2 rounded neu-inset bg-transparent text-white w-full" placeholder="Enter your name">
+                <br><br>
+                <label data-lang-en="Email:" data-lang-fa="ایمیل:" data-lang-fr="Email:" data-lang-it="Email:" data-lang-de="E-Mail:">Email:</label>
+                <input type="email" id="profileEmail" class="p-2 mt-2 rounded neu-inset bg-transparent text-white w-full" placeholder="Enter your email">
+                <br><br>
+                <button type="submit" class="neu-button mt-4">Save</button>
+            </form>
+            <p id="profileStatus" class="success-message hidden">Profile saved successfully!</p>
+        </div>
+    </div>
+    <div id="premiumModal" class="modal">
+        <div class="modal-content neu">
+            <span class="close" onclick="closeModal('premiumModal')">&times;</span>
+            <h2 data-lang-en="Upgrade to Premium" data-lang-fa="ارتقا به پرمیوم" data-lang-fr="Passer à Premium" data-lang-it="Passa a Premium" data-lang-de="Auf Premium upgraden">Upgrade to Premium</h2>
+            <p data-lang-en="Get unlimited scans and more features." data-lang-fa="اسکن‌های نامحدود و ویژگی‌های بیشتر دریافت کنید." data-lang-fr="Obtenez des scans illimités et plus de fonctionnalités." data-lang-it="Ottieni scansioni illimitate e più funzionalità." data-lang-de="Erhalte unbegrenzte Scans und mehr Funktionen.">Get unlimited scans and more features.</p>
+            <button onclick="upgradeToPremium()" class="neu-button accent mt-4">Upgrade</button>
+            <div id="upgradeProgress" class="upgrade-progress mt-2 hidden">
+                <div id="upgradeProgressFill" class="upgrade-progress-fill"></div>
+            </div>
+            <p id="upgradeStatus" class="success-message mt-2"></p>
+        </div>
+    </div>
+    <div id="historyModal" class="modal">
+        <div class="modal-content neu">
+            <span class="close" onclick="closeModal('historyModal')">&times;</span>
+            <h2 data-lang-en="Meal History" data-lang-fa="تاریخچه وعده‌ها" data-lang-fr="Historique des repas" data-lang-it="Cronologia pasti" data-lang-de="Mahlzeitenverlauf">Meal History</h2>
+            <ul id="mealHistoryList" class="text-left mt-4 space-y-2">
+                <li class="p-2 neu-inset">2023-10-01: Salad (150 kcal)</li>
+                <li class="p-2 neu-inset">2023-10-02: Sandwich (300 kcal)</li>
+            </ul>
+            <button onclick="clearHistory()" class="neu-button mt-4">Clear History</button>
+            <p id="historyStatus" class="success-message hidden">History cleared!</p>
+        </div>
+    </div>
+    <div id="accountSettingsModal" class="modal">
+        <div class="modal-content neu">
+            <span class="close" onclick="closeModal('accountSettingsModal')">&times;</span>
+            <h2 data-lang-en="Account Settings" data-lang-fa="تنظیمات حساب" data-lang-fr="Paramètres du compte" data-lang-it="Impostazioni account" data-lang-de="Kontoeinstellungen">Account Settings</h2>
+            <p data-lang-en="Manage your account settings." data-lang-fa="مدیریت تنظیمات حساب شما." data-lang-fr="Gérez les paramètres de votre compte." data-lang-it="Gestisci le impostazioni del tuo account." data-lang-de="Verwalten Sie Ihre Kontoeinstellungen.">Manage your account settings.</p>
+            <button onclick="deleteAccount()" class="neu-button mt-4 accent bg-red-500">Delete Account</button>
+            <p id="accountStatus" class="success-message hidden">Account deleted!</p>
+        </div>
+    </div>
+    <div id="languageModal" class="modal">
+        <div class="modal-content neu">
+            <span class="close" onclick="closeModal('languageModal')">&times;</span>
+            <h2 data-lang-en="Language Settings" data-lang-fa="تنظیمات زبان" data-lang-fr="Paramètres de langue" data-lang-it="Impostazioni lingua" data-lang-de="Spracheinstellungen">Language Settings</h2>
+            <select id="modalLanguageSelect" class="p-2 rounded neu-inset bg-transparent text-white">
+                <option value="en">English</option>
+                <option value="fa">فارسی</option>
+                <option value="fr">Français</option>
+                <option value="it">Italiano</option>
+                <option value="de">Deutsch</option>
+            </select>
+            <button onclick="changeLanguage(document.getElementById('modalLanguageSelect').value)" class="neu-button mt-4">Apply</button>
+            <p id="languageStatus" class="success-message hidden">Language changed!</p>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+        // Theme Toggle
+        const themeToggle = document.getElementById('themeToggle');
+        const themeIcon = document.getElementById('themeIcon');
+        themeToggle.addEventListener('click', () => {
+            // Smooth transition for theme change
+            document.body.style.transition = 'background 0.5s ease, color 0.5s ease';
+            document.body.classList.toggle('light');
+            if (document.body.classList.contains('light')) {
+                themeIcon.setAttribute('data-feather', 'moon');
+                document.documentElement.style.setProperty('--accent-color', '#37C2B0');
+            } else {
+                themeIcon.setAttribute('data-feather', 'sun');
+                document.documentElement.style.setProperty('--accent-color', 'linear-gradient(45deg, #FF6B6B, #FFE66D)');
+            }
+            setTimeout(() => {
+                feather.replace();
+                document.body.style.transition = '';
+            }, 50);
+        });
+// Language Change
+        function changeLanguage(lang) {
+            document.querySelectorAll('[data-lang-en]').forEach(el => {
+                el.textContent = el.getAttribute(`data-lang-${lang}`);
+            });
+        }
+        const languageSelect = document.getElementById('languageSelect');
+        languageSelect.addEventListener('change', () => {
+            changeLanguage(languageSelect.value);
+        });
+        // Modals
+        function openModal(modalId) {
+            const modal = document.getElementById(modalId);
+            modal.style.display = 'block';
+            modal.focus(); // For accessibility
+        }
+        function closeModal(modalId) {
+            const modal = document.getElementById(modalId);
+            const modalContent = modal.querySelector('.modal-content');
+            modal.classList.add('closing');
+            modalContent.classList.add('closing');
+            setTimeout(() => {
+                modal.style.display = 'none';
+                modal.classList.remove('closing');
+                modalContent.classList.remove('closing');
+            }, 300);
+        }
+        // Close modals when clicking outside
+        window.onclick = function(event) {
+            if (event.target.classList.contains('modal')) {
+                closeModal(event.target.id);
+            }
+        }
+        // Close with Escape key
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                document.querySelectorAll('.modal').forEach(modal => {
+                    if (modal.style.display === 'block') {
+                        closeModal(modal.id);
+                    }
+                });
+            }
+        });
+        // Interactive functions
+        function confirmLogout() {
+            if (confirm("Are you sure you want to logout?")) {
+                alert("Logged out successfully!");
+                // Actual logout logic here
+            }
+        }
+        function updateNotificationSettings() {
+            const status = document.getElementById('notificationStatus');
+            status.textContent = "Settings updated!";
+            status.classList.remove('hidden');
+            setTimeout(() => {
+                status.classList.add('hidden');
+            }, 2000);
+        }
+        function saveProfile(event) {
+            event.preventDefault();
+            const status = document.getElementById('profileStatus');
+            status.classList.remove('hidden');
+            setTimeout(() => {
+                status.classList.add('hidden');
+            }, 2000);
+            // Save logic here
+        }
+        function upgradeToPremium() {
+            const progress = document.getElementById('upgradeProgress');
+            const fill = document.getElementById('upgradeProgressFill');
+            const status = document.getElementById('upgradeStatus');
+            progress.classList.remove('hidden');
+            fill.style.width = '100%';
+            setTimeout(() => {
+                status.textContent = "Upgrade complete!";
+                progress.classList.add('hidden');
+                fill.style.width = '0%';
+            }, 1000);
+        }
+        function clearHistory() {
+            const list = document.getElementById('mealHistoryList');
+            const status = document.getElementById('historyStatus');
+            list.innerHTML = '';
+            status.classList.remove('hidden');
+            setTimeout(() => {
+                status.classList.add('hidden');
+            }, 2000);
+        }
+        function deleteAccount() {
+            if (confirm("Are you sure you want to delete your account? This action cannot be undone.")) {
+                const status = document.getElementById('accountStatus');
+                status.classList.remove('hidden');
+                setTimeout(() => {
+                    closeModal('accountSettingsModal');
+                }, 2000);
+                // Delete logic here
+            }
+        }
+        function sendSupportEmail() {
+            const status = document.getElementById('supportStatus');
+            status.classList.remove('hidden');
+            setTimeout(() => {
+                status.classList.add('hidden');
+            }, 2000);
+            // Email logic here
+        }
+        // Save Meal and Rescan functions
+        let savedMeals = localStorage.getItem('savedMeals') ? JSON.parse(localStorage.getItem('savedMeals')) : [];
+        document.getElementById('saveMeal').addEventListener('click', () => {
+            const meal = {
+                name: 'Pancake with Maple Syrup',
+                calories: 272,
+                components: 2,
+                date: new Date().toLocaleString()
+            };
+            savedMeals.push(meal);
+            localStorage.setItem('savedMeals', JSON.stringify(savedMeals));
+            alert('Meal saved!');
+        });
+        document.getElementById('rescan').addEventListener('click', () => {
+            // Smooth fade out all elements
+            const elementsToFade = [
+                document.getElementById('header'),
+                document.getElementById('navButtons'),
+                document.getElementById('footer'),
+                document.getElementById('analysisResults'),
+                document.getElementById('detectionResults')
+            ];
+            elementsToFade.forEach(el => {
+                el.style.transition = 'opacity 0.4s ease-out';
+                el.style.opacity = '0';
+            });
+            // Expand camera container smoothly
+            document.getElementById('cameraContainer').style.transition = 'height 0.6s cubic-bezier(0.4, 0, 0.2, 1)';
+            document.getElementById('cameraContainer').style.height = '100vh';
+            setTimeout(() => {
+                // Hide elements after fade out
+                elementsToFade.forEach(el => {
+                    el.style.display = 'none';
+                });
+                // Show processing overlay with smooth fade in
+                const processingOverlay = document.getElementById('processingOverlay');
+                processingOverlay.style.display = 'flex';
+                processingOverlay.style.opacity = '0';
+                setTimeout(() => {
+                    processingOverlay.style.transition = 'opacity 0.3s ease-in';
+                    processingOverlay.style.opacity = '1';
+                }, 50);
+                // Simulate scan progress
+                setTimeout(() => {
+                    // Hide processing overlay with fade out
+                    processingOverlay.style.opacity = '0';
+                    setTimeout(() => {
+                        processingOverlay.style.display = 'none';
+                        // Show detection results and adjust camera height
+                        document.getElementById('detectionResults').style.display = 'flex';
+                        document.getElementById('cameraContainer').style.height = '50vh';
+                        // Show all elements with smooth fade in
+                        elementsToFade.forEach(el => {
+                            el.style.display = '';
+                            el.style.opacity = '0';
+                            setTimeout(() => {
+                                el.style.transition = 'opacity 0.5s ease-out';
+                                el.style.opacity = '1';
+                            }, 50);
+                        });
+                    }, 300);
+                }, 2000);
+            }, 400);
+        });
+// Simulate detection process
+        document.addEventListener('DOMContentLoaded', function() {
+            const cameraContainer = document.getElementById('cameraContainer');
+            const processingOverlay = document.getElementById('processingOverlay');
+            const detectionResults = document.getElementById('detectionResults');
+            const progressFill = document.getElementById('progressFill');
+            const header = document.getElementById('header');
+            const analysisResults = document.getElementById('analysisResults');
+            const navButtons = document.getElementById('navButtons');
+            const footer = document.getElementById('footer');
+            const navItems = document.querySelectorAll('.fade-in');
+            setTimeout(() => {
+                processingOverlay.classList.remove('hidden');
+                processingOverlay.classList.add('flex');
+                let progress = 0;
+                const progressInterval = setInterval(() => {
+                    progress += Math.random() * 15;
+                    if (progress >= 100) {
+                        progress = 100;
+                        clearInterval(progressInterval);
+                        setTimeout(() => {
+                            processingOverlay.classList.add('hidden');
+                            processingOverlay.classList.remove('flex');
+                            detectionResults.classList.remove('hidden');
+                            cameraContainer.style.height = '50vh';
+                            header.classList.remove('hidden');
+                            analysisResults.classList.remove('hidden');
+                            navButtons.classList.remove('hidden');
+                            footer.classList.remove('hidden');
+                            setTimeout(() => {
+                                navItems.forEach((item, index) => {
+                                    setTimeout(() => {
+                                        item.classList.add('visible');
+                                    }, index * 200);
+                                });
+                            }, 500);
+                        }, 500);
+                    }
+                    progressFill.style.width = progress + '%';
+                }, 100);
+            }, 3000);
+        });
+    </script>
+</body>
+</html>