static/index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>eath | AI Nutrition Tracker</title>

    <script src="https://cdn.tailwindcss.com"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="css/styles.css">
</head>

<body class="bg-gray-50 min-h-screen flex flex-col font-inter">

    <header class="bg-[#111116] text-white py-4 shadow-md">
        <div class="max-w-7xl mx-auto px-6 flex justify-between items-center">
            <div class="flex items-center gap-3">
                <img src="eathstartup.png" alt="eath Logo" class="h-10 w-auto object-contain">
                <span class="text-3xl font-bold tracking-tight">eath</span>
            </div>

            <nav class="hidden md:flex gap-6 text-sm font-medium text-gray-300">
                <a href="#" class="hover:text-white transition">About eath</a>
                <a href="#" class="hover:text-white transition">Features</a>
                <a href="#" class="hover:text-white transition">Team</a>
                <a href="#" class="hover:text-white transition">Contact us</a>
                <a href="#" class="hover:text-white transition">Privacy</a>
            </nav>

            <div class="flex items-center gap-4">
                <button class="text-gray-400 hover:text-white"><i class="fa-solid fa-moon"></i></button>
                <div

                    class="bg-gray-800 px-3 py-1 rounded text-sm flex items-center gap-2 cursor-pointer border border-gray-700">
                    <span>🇺🇸</span> <i class="fa-solid fa-chevron-down text-xs"></i>
                </div>
            </div>
        </div>
    </header>

    <main class="flex-grow max-w-7xl mx-auto px-6 py-10 w-full grid grid-cols-1 lg:grid-cols-12 gap-8">

        <section class="lg:col-span-5 bg-white p-8 rounded-2xl shadow-sm border border-gray-100 flex flex-col gap-8">

            <h2 class="text-xl font-bold text-gray-800 border-b pb-3"><i

                    class="fa-solid fa-sliders text-brand mr-2"></i> Analysis Engine</h2>

            <div>
                <label class="block text-sm font-bold text-gray-700 mb-2">Select Architecture</label>
                <select id="modelSelector"

                    class="w-full bg-gray-50 border border-gray-200 text-gray-700 rounded-lg p-3 outline-none focus:border-brand transition">
                    <option value="yolo_x">YOLO-X Large (>90% Top-1 Accuracy)</option>
                    <option value="yolo_s">YOLO-S Small (Edge Optimized)</option>
                </select>
            </div>

            <div>
                <div class="flex justify-between items-center mb-2">
                    <label class="block text-sm font-bold text-gray-700">Portion Size</label>
                    <span id="portionLabel"

                        class="text-sm font-bold text-brand bg-brand-light px-3 py-1 rounded-full">100 g</span>
                </div>
                <input type="range" id="portionSlider" min="50" max="500" step="50" value="100"

                    class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer">
            </div>

            <div id="dropZone"

                class="border-2 border-dashed border-gray-300 rounded-xl p-8 text-center cursor-pointer hover:bg-gray-50 transition relative overflow-hidden group">
                <input type="file" id="fileInput" accept="image/*"

                    class="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" />

                <div id="uploadUI" class="flex flex-col items-center pointer-events-none">
                    <div

                        class="w-16 h-16 bg-brand-light text-brand rounded-full flex items-center justify-center text-2xl mb-4 group-hover:scale-110 transition-transform">
                        <i class="fa-solid fa-camera"></i>
                    </div>
                    <p class="text-gray-800 font-bold">Drop food image here</p>
                    <p class="text-gray-400 text-sm mt-1">PNG, JPG up to 5MB</p>
                </div>

                <img id="imagePreview" src="" alt="Preview"

                    class="hidden absolute inset-0 w-full h-full object-cover z-0" />
            </div>

            <button id="analyzeBtn"

                class="w-full bg-brand hover:bg-brand-dark text-white font-bold py-4 rounded-xl shadow-md transition flex justify-center items-center gap-2">
                <i class="fa-solid fa-microchip"></i> Analyze Dish
            </button>
        </section>

        <section class="lg:col-span-7 flex flex-col gap-6">

            <div id="welcomeState"

                class="h-full bg-white rounded-2xl shadow-sm border border-gray-100 flex flex-col items-center justify-center p-12 text-center">
                <div class="w-24 h-24 bg-gray-50 rounded-full flex items-center justify-center mb-6">
                    <i class="fa-solid fa-utensils text-4xl text-gray-300"></i>
                </div>
                <h3 class="text-2xl font-bold text-gray-800 mb-2">Ready for Inference</h3>
                <p class="text-gray-500 max-w-sm">Upload an image to trigger the YOLO architecture. The system will
                    cross-reference the USDA databases to extract macros and ingredients.</p>
            </div>

            <div id="loadingState"

                class="hidden h-full bg-white rounded-2xl shadow-sm border border-gray-100 flex flex-col items-center justify-center p-12">
                <div class="custom-loader mb-6"></div>
                <h3 class="text-xl font-bold text-gray-800">Processing Image...</h3>
                <p class="text-gray-500 text-sm">Running tensor operations & fetching database.</p>
            </div>

            <div id="resultsState" class="hidden flex flex-col gap-6">

                <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 relative overflow-hidden">
                    <div

                        class="absolute top-0 right-0 bg-brand text-white text-xs font-bold px-4 py-1 rounded-bl-xl shadow-sm">
                        <span id="badgeModel">YOLO</span>
                    </div>
                    <p class="text-xs text-gray-500 font-bold uppercase tracking-widest mb-1">Detected Object</p>
                    <h2 id="resDishName" class="text-4xl font-black text-gray-800 mb-4 tracking-tight">--</h2>

                    <div class="flex justify-between text-sm mb-2">
                        <span class="font-bold text-gray-600">Model Confidence</span>
                        <span id="resConfText" class="font-bold text-brand">0%</span>
                    </div>
                    <div class="w-full bg-gray-100 rounded-full h-3">
                        <div id="resConfBar" class="bg-brand h-3 rounded-full progress-anim" style="width: 0%"></div>
                    </div>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">

                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6">
                        <div class="flex justify-between items-center mb-6">
                            <h3 class="text-lg font-bold text-gray-800"><i

                                    class="fa-solid fa-chart-pie text-brand mr-2"></i> Macros</h3>
                            <span class="text-xs font-bold bg-gray-100 text-gray-600 px-2 py-1 rounded"><span

                                    id="resPortion">100</span>g</span>
                        </div>
                        <div class="grid grid-cols-2 gap-4">
                            <div class="border border-gray-100 rounded-xl p-4 text-center bg-gray-50">
                                <div id="resKcal" class="text-2xl font-black text-gray-800">--</div>
                                <div class="text-xs font-bold text-gray-500">KCAL</div>
                            </div>
                            <div class="border border-gray-100 rounded-xl p-4 text-center bg-gray-50">
                                <div id="resProt" class="text-2xl font-black text-gray-800">--</div>
                                <div class="text-xs font-bold text-gray-500">PROT (g)</div>
                            </div>
                            <div class="border border-gray-100 rounded-xl p-4 text-center bg-gray-50">
                                <div id="resFat" class="text-2xl font-black text-gray-800">--</div>
                                <div class="text-xs font-bold text-gray-500">FAT (g)</div>
                            </div>
                            <div class="border border-gray-100 rounded-xl p-4 text-center bg-gray-50">
                                <div id="resCarb" class="text-2xl font-black text-gray-800">--</div>
                                <div class="text-xs font-bold text-gray-500">CARBS (g)</div>
                            </div>
                        </div>
                    </div>

                    <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 flex flex-col">
                        <h3 class="text-lg font-bold text-gray-800 mb-4"><i

                                class="fa-solid fa-clipboard-list text-brand mr-2"></i> Likely Ingredients</h3>
                        <div

                            class="bg-gray-50 rounded-xl border border-gray-100 p-4 flex-grow overflow-y-auto max-h-48">
                            <ul id="ingredientsList" class="text-sm text-gray-600 space-y-2 list-disc pl-4">
                            </ul>
                            <div id="noIngredientsMsg" class="hidden text-sm text-gray-400 italic text-center mt-4">
                                No specific ingredient data found for this dish.
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </section>
    </main>

    <script src="js/script.js"></script>
</body>

</html>