Prompt Detalhado para Desenvolvimento de Aplicativo de Dieta e Monitoramento Nutricional (Emergent)

Visão Geral do Projeto

Desenvolvimento de um aplicativo móvel completo e intuitivo para auxiliar usuários na adesão e monitoramento da Dieta Cetogênica Cíclica (DCC), conforme detalhado no ebook "DIETA CETOGÊNICA CÍCLICA: MÉTODO KETO". O aplicativo deve oferecer funcionalidades robustas para rastreamento de dieta, monitoramento de progresso, personalização de planos alimentares e educação sobre a DCC, visando otimizar a queima de gordura, manter a performance física e mental, e promover a sustentabilidade a longo prazo.

Estrutura do Aplicativo

1. Tela Inicial (Dashboard)

•
Resumo Diário: Exibição clara do status atual da dieta (Fase Cetogênica, Recarga, Transição), macros restantes para o dia (Proteína, Carboidratos Líquidos, Gordura) e calorias restantes.

•
Progresso Rápido: Gráficos ou indicadores visuais de peso atual, peso perdido na semana/mês, e status de cetose (se houver integração com medidores).

•
Próxima Refeição: Sugestão ou lembrete da próxima refeição planejada.

•
Metas: Exibição de metas diárias e semanais (ex: ingestão de água, passos, calorias).

•
Notificações/Alertas: Lembretes para registrar refeições, beber água, realizar exercícios, ou iniciar/encerrar fases da dieta.

2. Sidebar (Menu de Navegação)

•
Início: Retorna à tela principal (Dashboard).

•
Meu Plano de Dieta: Acesso às configurações e detalhes do plano de dieta atual.

•
Registro de Alimentos: Ferramenta para registrar refeições e lanches.

•
Progresso: Seção detalhada de monitoramento de peso, medidas e outros indicadores.

•
Receitas: Biblioteca de receitas cetogênicas e de recarga.

•
Lista de Compras: Geração de lista de compras baseada no plano alimentar.

•
Educação: Acesso a artigos e informações sobre a DCC (baseado no ebook).

•
Configurações: Ajustes de perfil, notificações, unidades de medida, etc.

•
Suporte/Ajuda: Canais de contato ou FAQ.

3. Rastreamento da Dieta (Registro de Alimentos)

•
Busca de Alimentos: Banco de dados de alimentos com informações nutricionais (macros, calorias).

•
Criação de Alimentos Personalizados: Capacidade de adicionar alimentos não encontrados no banco de dados.

•
Registro por Refeição: Café da manhã, almoço, jantar, lanches.

•
Escaneamento de Código de Barras: (Opcional, mas desejável) Para adicionar alimentos rapidamente.

•
Macros e Calorias em Tempo Real: Atualização automática dos macros e calorias consumidos vs. meta diária.

•
Histórico de Refeições: Visualização das refeições registradas em dias anteriores.

4. Tipos de Dieta e Personalização (Foco na DCC)

•
Dieta Cetogênica Cíclica (DCC): Implementação dos ciclos de Fase Cetogênica (5-6 dias), Recarga (1-2 dias) e Transição (1 dia).

•
Configuração Inicial: Questionário para avaliação de compatibilidade (Experiência Prévia, Nível de Atividade, Composição Corporal, Objetivos Específicos) para determinar o ponto de partida (Keto Padrão ou DCC imediata).

•
Cálculo de Macros e Calorias: Baseado na Equação de Mifflin-St Jeor para TMB, Fator de Atividade para GET, e Déficit Calórico Otimizado (20-30%).

•
Fase Cetogênica: Proteína (1.6-2.2g/kg massa magra), Carboidratos (<20-30g líquidos), Gordura (restante das calorias).

•
Fase de Recarga: Proteína (1.6-2.2g/kg massa magra), Carboidratos (4-6g/kg peso corporal), Gordura (0.5-0.8g/kg peso corporal).





•
Guia de Alimentos: Listas de alimentos prioritários para cada fase (cetogênicos, recarga) e alimentos a evitar.

•
Protocolo de Recarga Otimizada: Orientações sobre timing e estratégia (exercícios de depleção, jejum pré-recarga, distribuição de carboidratos ao longo do dia).

•
Suplementação: Recomendações de eletrólitos, Ômega-3, MCT Oil, Vitamina D, Creatina, com base nas evidências do ebook.

•
Modelos de Ciclagem: Opções de 5/2, 6/1, 10/1 para adaptação a longo prazo.

5. Monitoramento do Cardápio do Dia

•
Visualização Diária: Exibição do plano alimentar sugerido para o dia, com horários de refeição.

•
Flexibilidade: Capacidade de ajustar ou trocar refeições dentro do plano, com recalculo automático de macros.

•
Sugestões de Refeições: Baseadas nas preferências do usuário e nos alimentos permitidos para a fase atual da dieta.

6. Monitoramento de Peso e Progresso

•
Registro de Peso: Entrada manual diária ou semanal do peso.

•
Gráficos de Progresso: Visualização da perda de peso ao longo do tempo (semanal, mensal, anual).

•
Medidas Corporais: Registro de medidas (cintura, quadril, braço, etc.) e gráficos de evolução.

•
Fotos de Progresso: Upload e comparação de fotos para acompanhamento visual.

•
Cálculo de Peso Perdido: Exibição clara do total de peso perdido desde o início e em períodos específicos.

•
Metas de Peso: Definição de peso alvo e acompanhamento da distância até a meta.

7. Ferramentas Adicionais e Educação

•
Receitas: Seção com receitas detalhadas, incluindo informações nutricionais e adequação à fase da dieta.

•
Lista de Compras: Geração automática de lista de compras com base nas receitas selecionadas ou no plano alimentar da semana.

•
Jejum Intermitente: Integração com protocolos de jejum (16/8, 18/6, 20/4), com timer e rastreamento.

•
Artigos e FAQ: Conteúdo educacional extraído do ebook, explicando os fundamentos científicos, benefícios, erros comuns e soluções da DCC.

•
Calculadoras: TMB, GET, Macros, etc.

Requisitos Técnicos e de Design

•
Interface do Usuário (UI): Design limpo, moderno, intuitivo e fácil de usar, com foco na experiência do usuário (UX).

•
Responsividade: Compatível com diferentes tamanhos de tela de dispositivos móveis.

•
Armazenamento de Dados: Seguro e privado, com opção de backup.

•
Notificações Push: Para lembretes e alertas importantes.

•
Personalização: Capacidade de o usuário personalizar seu perfil, preferências alimentares e metas.

•
Performance: Aplicativo rápido e responsivo, sem lentidão.

Conteúdo do Ebook a Ser Integrado (Exemplos)

•
Fundamentos Científicos: Mecanismos Metabólicos da Cetose Cíclica, Análise Comparativa (Keto Contínua vs Cíclica), Base Fisiológica em Evidências, Benefícios Mensuráveis (Composição Corporal, Saúde Metabólica, Performance Cognitiva, Controle do Apetite, Inflamação e Oxidação).

•
Preparação e Planejamento: Cálculo Preciso de Macros e Calorias, Guia de Alimentos Baseado em Evidências, Protocolo de Recarga Otimizada, Suplementação Baseada em Ciência, Preparação Estratégica de Refeições.

•
Protocolo de 21 Dias: Adaptação Metabólica (Semana 1), Otimização da Recarga (Semana 2), Consolidação dos Resultados (Semana 3).

•
Gastronomia e Nutrição: Preparações Cetogênicas Rápidas, Refeições Principais, Lanches Estratégicos, Alternativas Doces Cetogênicas.

•
Otimizações Avançadas: Sinergia com Jejum Intermitente, Periodização Nutricional e Exercício, Erros Comuns e Soluções, Estratégias para Superar Estagnação.

•
Aplicação Prática: Métricas e Acompanhamento, Transição para Manutenção, Modelos Flexíveis do Método.

•
Ferramentas Práticas: Lista de Compras Estratégica, Preparo Antecipado de Refeições, Registro e Ajustes.

•
Solução de Problemas: Perguntas Frequentes Baseadas em Evidências.

Este prompt serve como um guia abrangente para o desenvolvimento do aplicativo, garantindo que todas as funcionalidades essenciais e o conhecimento do ebook sejam incorporados para criar uma ferramenta completa e eficaz para o usuário.

README.md

@@ -1,10 +1,13 @@
 ---
-title: Ketocycle Tracker
-emoji: 🦀
-colorFrom: purple
+title: KetoCycle Tracker 🥑
+colorFrom: yellow
 colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

food-tracking.html

@@ -0,0 +1,245 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Food Tracking | KetoCycle Tracker</title>
+    <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>
+        .food-card {
+            transition: all 0.2s ease;
+        }
+        .food-card:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+        }
+        .macro-dot {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            display: inline-block;
+            margin-right: 4px;
+        }
+        .search-bar {
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            backdrop-filter: blur(10px);
+        }
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen font-sans pb-16">
+    <div class="container mx-auto px-4 py-4">
+        <!-- Header -->
+        <header class="flex items-center justify-between mb-6">
+            <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
+                <i data-feather="arrow-left" class="w-5 h-5"></i>
+            </button>
+            <h1 class="text-xl font-bold">Food Tracking</h1>
+            <div class="w-8"></div> <!-- Spacer for balance -->
+        </header>
+
+        <!-- Search Bar -->
+        <div class="search-bar bg-white/80 dark:bg-gray-800/80 rounded-xl p-3 mb-4 shadow-sm">
+            <div class="relative">
+                <input type="text" placeholder="Search foods..." 
+                    class="w-full pl-10 pr-4 py-2 bg-gray-100 dark:bg-gray-700 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500">
+                <i data-feather="search" class="absolute left-3 top-2.5 text-gray-500 dark:text-gray-400"></i>
+            </div>
+        </div>
+
+        <!-- Meal Tabs -->
+        <div class="flex overflow-x-auto pb-2 mb-4 scrollbar-hide">
+            <div class="flex space-x-2">
+                <button class="whitespace-nowrap px-4 py-2 bg-primary-500 text-white rounded-full font-medium text-sm">
+                    Breakfast
+                </button>
+                <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full font-medium text-sm">
+                    Lunch
+                </button>
+                <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full font-medium text-sm">
+                    Dinner
+                </button>
+                <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full font-medium text-sm">
+                    Snacks
+                </button>
+            </div>
+        </div>
+
+        <!-- Current Foods -->
+        <div class="mb-6">
+            <div class="flex justify-between items-center mb-3">
+                <h2 class="font-bold">Today's Foods</h2>
+                <p class="text-sm text-gray-500 dark:text-gray-400">1,490 kcal</p>
+            </div>
+
+            <div class="space-y-3">
+                <!-- Food Item 1 -->
+                <div class="food-card bg-white dark:bg-gray-800 rounded-xl p-3 shadow-sm">
+                    <div class="flex items-start">
+                        <img src="http://static.photos/food/200x200/101" alt="Keto Breakfast" class="w-16 h-16 rounded-lg object-cover mr-3">
+                        <div class="flex-1">
+                            <div class="flex justify-between">
+                                <h3 class="font-medium">Keto Pancakes</h3>
+                                <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
+                                    <i data-feather="more-vertical" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                            <p class="text-sm text-gray-600 dark:text-gray-300">Almond flour, eggs, cream cheese</p>
+                            <div class="mt-2 flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="text-xs flex items-center"><span class="macro-dot bg-red-500"></span> 24g</span>
+                                    <span class="text-xs flex items-center"><span class="macro-dot bg-yellow-500"></span> 5g</span>
+                                    <span class="text-xs flex items-center"><span class="macro-dot bg-green-500"></span> 32g</span>
+                                </div>
+                                <p class="text-sm font-medium">420 kcal</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Food Item 2 -->
+                <div class="food-card bg-white dark:bg-gray-800 rounded-xl p-3 shadow-sm">
+                    <div class="flex items-start">
+                        <img src="http://static.photos/food/200x200/102" alt="Salad" class="w-16 h-16 rounded-lg object-cover mr-3">
+                        <div class="flex-1">
+                            <div class="flex justify-between">
+                                <h3 class="font-medium">Avocado Salad</h3>
+                                <button class="text-gray-400 hover:text-gray-600 dark:hover:text-gray-200">
+                                    <i data-feather="more-vertical" class="w-4 h-4"></i>
+                                </button>
+                            </div>
+                            <p class="text-sm text-gray-600 dark:text-gray-300">Avocado, spinach, olive oil</p>
+                            <div class="mt-2 flex justify-between items-center">
+                                <div class="flex space-x-2">
+                                    <span class="text-xs flex items-center"><span class="macro-dot bg-red-500"></span> 18g</span>
+                                    <span class="text-xs flex items-center"><span class="macro-dot bg-yellow-500"></span> 8g</span>
+                                    <span class="text-xs flex items-center"><span class="macro-dot bg-green-500"></span> 25g</span>
+                                </div>
+                                <p class="text-sm font-medium">320 kcal</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Recent Foods -->
+        <div class="mb-6">
+            <h2 class="font-bold mb-3">Recent Foods</h2>
+            <div class="grid grid-cols-2 gap-3">
+                <!-- Recent Food 1 -->
+                <div class="food-card bg-white dark:bg-gray-800 rounded-xl p-3 shadow-sm flex flex-col items-center">
+                    <img src="http://static.photos/food/120x120/201" alt="Keto Meal" class="w-12 h-12 rounded-lg object-cover mb-2">
+                    <h3 class="text-sm font-medium text-center">Keto Bread</h3>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 text-center">4g net carbs</p>
+                </div>
+
+                <!-- Recent Food 2 -->
+                <div class="food-card bg-white dark:bg-gray-800 rounded-xl p-3 shadow-sm flex flex-col items-center">
+                    <img src="http://static.photos/food/120x120/202" alt="Keto Meal" class="w-12 h-12 rounded-lg object-cover mb-2">
+                    <h3 class="text-sm font-medium text-center">Bulletproof Coffee</h3>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 text-center">2g net carbs</p>
+                </div>
+
+                <!-- Recent Food 3 -->
+                <div class="food-card bg-white dark:bg-gray-800 rounded-xl p-3 shadow-sm flex flex-col items-center">
+                    <img src="http://static.photos/food/120x120/203" alt="Keto Meal" class="w-12 h-12 rounded-lg object-cover mb-2">
+                    <h3 class="text-sm font-medium text-center">Salmon</h3>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 text-center">0g net carbs</p>
+                </div>
+
+                <!-- Recent Food 4 -->
+                <div class="food-card bg-white dark:bg-gray-800 rounded-xl p-3 shadow-sm flex flex-col items-center">
+                    <img src="http://static.photos/food/120x120/204" alt="Keto Meal" class="w-12 h-12 rounded-lg object-cover mb-2">
+                    <h3 class="text-sm font-medium text-center">Cauliflower Rice</h3>
+                    <p class="text-xs text-gray-500 dark:text-gray-400 text-center">3g net carbs</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Food Categories -->
+        <div>
+            <h2 class="font-bold mb-3">Categories</h2>
+            <div class="grid grid-cols-3 gap-3">
+                <button class="food-card bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex flex-col items-center">
+                    <div class="w-10 h-10 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mb-2">
+                        <i data-feather="meat" class="text-red-500 dark:text-red-300"></i>
+                    </div>
+                    <span class="text-sm">Protein</span>
+                </button>
+                <button class="food-card bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex flex-col items-center">
+                    <div class="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mb-2">
+                        <i data-feather="carrot" class="text-yellow-500 dark:text-yellow-300"></i>
+                    </div>
+                    <span class="text-sm">Vegetables</span>
+                </button>
+                <button class="food-card bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex flex-col items-center">
+                    <div class="w-10 h-10 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mb-2">
+                        <i data-feather="coffee" class="text-green-500 dark:text-green-300"></i>
+                    </div>
+                    <span class="text-sm">Fats</span>
+                </button>
+                <button class="food-card bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex flex-col items-center">
+                    <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-2">
+                        <i data-feather="cup" class="text-blue-500 dark:text-blue-300"></i>
+                    </div>
+                    <span class="text-sm">Dairy</span>
+                </button>
+                <button class="food-card bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex flex-col items-center">
+                    <div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mb-2">
+                        <i data-feather="nut" class="text-purple-500 dark:text-purple-300"></i>
+                    </div>
+                    <span class="text-sm">Nuts</span>
+                </button>
+                <button class="food-card bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm flex flex-col items-center">
+                    <div class="w-10 h-10 rounded-full bg-pink-100 dark:bg-pink-900 flex items-center justify-center mb-2">
+                        <i data-feather="plus" class="text-pink-500 dark:text-pink-300"></i>
+                    </div>
+                    <span class="text-sm">Custom</span>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Add Food Button -->
+    <div class="fixed bottom-20 right-4">
+        <button class="w-14 h-14 rounded-full bg-primary-500 text-white shadow-lg flex items-center justify-center">
+            <i data-feather="plus" class="w-6 h-6"></i>
+        </button>
+    </div>
+
+    <!-- Bottom Navigation -->
+    <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg rounded-t-2xl">
+        <div class="flex justify-around py-3">
+            <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                <i data-feather="home" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Home</span>
+            </a>
+            <a href="#" class="flex flex-col items-center text-primary-500 dark:text-primary-400">
+                <i data-feather="bookmark" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Plan</span>
+            </a>
+            <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center -mt-6 shadow-lg">
+                    <i data-feather="plus" class="text-white w-6 h-6"></i>
+                </div>
+            </a>
+            <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                <i data-feather="trending-up" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Progress</span>
+            </a>
+            <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                <i data-feather="settings" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Settings</span>
+            </a>
+        </div>
+    </nav>
+
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

index.html

@@ -1,19 +1,329 @@
-<!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>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KetoCycle Tracker | Your Cyclic Keto Companion</title>
+    <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>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0fdf4',
+                            100: '#dcfce7',
+                            200: '#bbf7d0',
+                            300: '#86efac',
+                            400: '#4ade80',
+                            500: '#22c55e',
+                            600: '#16a34a',
+                            700: '#15803d',
+                            800: '#166534',
+                            900: '#14532d',
+                        },
+                        secondary: {
+                            50: '#f8fafc',
+                            100: '#f1f5f9',
+                            200: '#e2e8f0',
+                            300: '#cbd5e1',
+                            400: '#94a3b8',
+                            500: '#64748b',
+                            600: '#475569',
+                            700: '#334155',
+                            800: '#1e293b',
+                            900: '#0f172a',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        .vanta-bg {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: -1;
+            opacity: 0.4;
+        }
+        .gradient-text {
+            background-clip: text;
+            -webkit-background-clip: text;
+            color: transparent;
+            background-image: linear-gradient(45deg, #22c55e, #86efac);
+        }
+        .dashboard-card {
+            backdrop-filter: blur(10px);
+            background-color: rgba(255, 255, 255, 0.85);
+        }
+        @media (prefers-color-scheme: dark) {
+            .dashboard-card {
+                background-color: rgba(15, 23, 42, 0.85);
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen font-sans">
+    <div id="vanta-bg" class="vanta-bg"></div>
+    
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-8">
+            <div class="flex items-center">
+                <div class="w-10 h-10 rounded-full bg-primary-500 flex items-center justify-center mr-3">
+                    <span class="text-white font-bold">KC</span>
+                </div>
+                <h1 class="text-2xl font-bold gradient-text">KetoCycle</h1>
+            </div>
+            <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
+                <i data-feather="user"></i>
+            </button>
+        </header>
+
+        <!-- Dashboard -->
+        <main>
+            <!-- Current Phase Indicator -->
+            <div class="bg-primary-100 dark:bg-primary-900 rounded-xl p-4 mb-6 flex items-center">
+                <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center mr-4">
+                    <i data-feather="zap" class="text-white"></i>
+                </div>
+                <div>
+                    <p class="text-sm text-primary-600 dark:text-primary-300">Current Phase</p>
+                    <h2 class="text-xl font-bold text-primary-800 dark:text-white">Ketogenic Phase</h2>
+                    <p class="text-sm text-primary-700 dark:text-primary-200">Day 3 of 5</p>
+                </div>
+            </div>
+
+            <!-- Macros Summary -->
+            <div class="grid grid-cols-2 gap-4 mb-6">
+                <div class="dashboard-card rounded-xl p-4 shadow-sm">
+                    <div class="flex items-center mb-2">
+                        <div class="w-8 h-8 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mr-2">
+                            <i data-feather="activity" class="text-red-500 dark:text-red-300"></i>
+                        </div>
+                        <h3 class="text-sm font-medium">Protein</h3>
+                    </div>
+                    <div class="flex justify-between items-end">
+                        <div>
+                            <p class="text-2xl font-bold">120g</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400">of 150g</p>
+                        </div>
+                        <div class="w-12 h-1 bg-gray-200 rounded-full">
+                            <div class="h-1 bg-red-500 rounded-full" style="width: 80%"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="dashboard-card rounded-xl p-4 shadow-sm">
+                    <div class="flex items-center mb-2">
+                        <div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mr-2">
+                            <i data-feather="droplet" class="text-yellow-500 dark:text-yellow-300"></i>
+                        </div>
+                        <h3 class="text-sm font-medium">Carbs</h3>
+                    </div>
+                    <div class="flex justify-between items-end">
+                        <div>
+                            <p class="text-2xl font-bold">15g</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400">of 20g</p>
+                        </div>
+                        <div class="w-12 h-1 bg-gray-200 rounded-full">
+                            <div class="h-1 bg-yellow-500 rounded-full" style="width: 75%"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="dashboard-card rounded-xl p-4 shadow-sm">
+                    <div class="flex items-center mb-2">
+                        <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mr-2">
+                            <i data-feather="bar-chart-2" class="text-green-500 dark:text-green-300"></i>
+                        </div>
+                        <h3 class="text-sm font-medium">Fat</h3>
+                    </div>
+                    <div class="flex justify-between items-end">
+                        <div>
+                            <p class="text-2xl font-bold">90g</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400">of 120g</p>
+                        </div>
+                        <div class="w-12 h-1 bg-gray-200 rounded-full">
+                            <div class="h-1 bg-green-500 rounded-full" style="width: 75%"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="dashboard-card rounded-xl p-4 shadow-sm">
+                    <div class="flex items-center mb-2">
+                        <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mr-2">
+                            <i data-feather="target" class="text-blue-500 dark:text-blue-300"></i>
+                        </div>
+                        <h3 class="text-sm font-medium">Calories</h3>
+                    </div>
+                    <div class="flex justify-between items-end">
+                        <div>
+                            <p class="text-2xl font-bold">1490</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400">of 1850</p>
+                        </div>
+                        <div class="w-12 h-1 bg-gray-200 rounded-full">
+                            <div class="h-1 bg-blue-500 rounded-full" style="width: 80%"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Progress Section -->
+            <div class="dashboard-card rounded-xl p-6 shadow-sm mb-6">
+                <div class="flex justify-between items-center mb-4">
+                    <h2 class="text-lg font-bold">Weight Progress</h2>
+                    <button class="text-sm text-primary-500 dark:text-primary-300 flex items-center">
+                        View All <i data-feather="chevron-right" class="ml-1 w-4 h-4"></i>
+                    </button>
+                </div>
+                <div class="h-40">
+                    <!-- Chart placeholder -->
+                    <div class="h-full flex items-end justify-between">
+                        <div class="flex flex-col items-center">
+                            <div class="w-6 bg-primary-400 rounded-t-sm" style="height: 30%"></div>
+                            <p class="text-xs mt-1">Mon</p>
+                        </div>
+                        <div class="flex flex-col items-center">
+                            <div class="w-6 bg-primary-400 rounded-t-sm" style="height: 40%"></div>
+                            <p class="text-xs mt-1">Tue</p>
+                        </div>
+                        <div class="flex flex-col items-center">
+                            <div class="w-6 bg-primary-400 rounded-t-sm" style="height: 35%"></div>
+                            <p class="text-xs mt-1">Wed</p>
+                        </div>
+                        <div class="flex flex-col items-center">
+                            <div class="w-6 bg-primary-400 rounded-t-sm" style="height: 50%"></div>
+                            <p class="text-xs mt-1">Thu</p>
+                        </div>
+                        <div class="flex flex-col items-center">
+                            <div class="w-6 bg-primary-400 rounded-t-sm" style="height: 45%"></div>
+                            <p class="text-xs mt-1">Fri</p>
+                        </div>
+                        <div class="flex flex-col items-center">
+                            <div class="w-6 bg-primary-500 rounded-t-sm" style="height: 60%"></div>
+                            <p class="text-xs mt-1">Today</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-4 flex justify-between">
+                    <div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Start Weight</p>
+                        <p class="font-bold">75.4 kg</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Current</p>
+                        <p class="font-bold">72.1 kg</p>
+                    </div>
+                    <div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Lost</p>
+                        <p class="font-bold text-primary-600 dark:text-primary-400">3.3 kg</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Next Meal -->
+            <div class="dashboard-card rounded-xl p-4 shadow-sm mb-6">
+                <div class="flex justify-between items-center mb-3">
+                    <h2 class="text-lg font-bold">Next Meal</h2>
+                    <button class="text-sm text-primary-500 dark:text-primary-300">View Plan</button>
+                </div>
+                <div class="flex items-center">
+                    <img src="http://static.photos/food/320x240/42" alt="Keto Meal" class="w-16 h-16 rounded-lg object-cover mr-3">
+                    <div class="flex-1">
+                        <h3 class="font-medium">Keto Chicken Alfredo</h3>
+                        <p class="text-sm text-gray-600 dark:text-gray-300">Zucchini noodles with creamy sauce</p>
+                    </div>
+                    <div class="text-right">
+                        <p class="text-sm">12:30 PM</p>
+                        <button class="mt-1 text-xs px-2 py-1 bg-primary-100 dark:bg-primary-800 text-primary-600 dark:text-primary-200 rounded-full">
+                            Remind me
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Quick Actions -->
+            <div class="grid grid-cols-4 gap-2 mb-6">
+                <button class="flex flex-col items-center justify-center p-3 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
+                    <div class="w-10 h-10 rounded-full bg-primary-100 dark:bg-primary-900 flex items-center justify-center mb-1">
+                        <i data-feather="plus" class="text-primary-500 dark:text-primary-300"></i>
+                    </div>
+                    <p class="text-xs text-center">Add Food</p>
+                </button>
+                <button class="flex flex-col items-center justify-center p-3 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
+                    <div class="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-1">
+                        <i data-feather="droplet" class="text-blue-500 dark:text-blue-300"></i>
+                    </div>
+                    <p class="text-xs text-center">Water</p>
+                </button>
+                <button class="flex flex-col items-center justify-center p-3 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
+                    <div class="w-10 h-10 rounded-full bg-purple-100 dark:bg-purple-900 flex items-center justify-center mb-1">
+                        <i data-feather="activity" class="text-purple-500 dark:text-purple-300"></i>
+                    </div>
+                    <p class="text-xs text-center">Workout</p>
+                </button>
+                <button class="flex flex-col items-center justify-center p-3 bg-white dark:bg-gray-800 rounded-lg shadow-sm">
+                    <div class="w-10 h-10 rounded-full bg-yellow-100 dark:bg-yellow-900 flex items-center justify-center mb-1">
+                        <i data-feather="book" class="text-yellow-500 dark:text-yellow-300"></i>
+                    </div>
+                    <p class="text-xs text-center">Recipes</p>
+                </button>
+            </div>
+        </main>
+
+        <!-- Bottom Navigation -->
+        <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg rounded-t-2xl">
+            <div class="flex justify-around py-3">
+                <a href="#" class="flex flex-col items-center text-primary-500 dark:text-primary-400">
+                    <i data-feather="home" class="w-6 h-6"></i>
+                    <span class="text-xs mt-1">Home</span>
+                </a>
+                <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                    <i data-feather="bookmark" class="w-6 h-6"></i>
+                    <span class="text-xs mt-1">Plan</span>
+                </a>
+                <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                    <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center -mt-6 shadow-lg">
+                        <i data-feather="plus" class="text-white w-6 h-6"></i>
+                    </div>
+                </a>
+                <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                    <i data-feather="trending-up" class="w-6 h-6"></i>
+                    <span class="text-xs mt-1">Progress</span>
+                </a>
+                <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                    <i data-feather="settings" class="w-6 h-6"></i>
+                    <span class="text-xs mt-1">Settings</span>
+                </a>
+            </div>
+        </nav>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
+    <script>
+        // Initialize Vanta.js background
+        VANTA.GLOBE({
+            el: "#vanta-bg",
+            mouseControls: true,
+            touchControls: true,
+            gyroControls: false,
+            minHeight: 200.00,
+            minWidth: 200.00,
+            scale: 1.00,
+            scaleMobile: 1.00,
+            color: "#22c55e",
+            backgroundColor: "transparent",
+            size: 0.8
+        });
+
+        // Initialize feather icons
+        feather.replace();
+    </script>
+</body>
 </html>

progress.html

@@ -0,0 +1,297 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Progress | KetoCycle Tracker</title>
+    <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>
+        .progress-card {
+            backdrop-filter: blur(10px);
+            background-color: rgba(255, 255, 255, 0.85);
+        }
+        @media (prefers-color-scheme: dark) {
+            .progress-card {
+                background-color: rgba(15, 23, 42, 0.85);
+            }
+        }
+        .photo-grid {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 1rem;
+        }
+        .photo-item {
+            position: relative;
+            padding-bottom: 100%;
+            overflow: hidden;
+            border-radius: 0.75rem;
+        }
+        .photo-item img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+        .stats-item {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+            border-radius: 0.75rem;
+            background-color: rgba(255, 255, 255, 0.9);
+        }
+        @media (prefers-color-scheme: dark) {
+            .stats-item {
+                background-color: rgba(15, 23, 42, 0.9);
+            }
+        }
+    </style>
+</head>
+<body class="bg-gray-50 dark:bg-gray-900 min-h-screen font-sans pb-16">
+    <div class="container mx-auto px-4 py-4">
+        <!-- Header -->
+        <header class="flex items-center justify-between mb-6">
+            <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
+                <i data-feather="arrow-left" class="w-5 h-5"></i>
+            </button>
+            <h1 class="text-xl font-bold">Your Progress</h1>
+            <button class="p-2 rounded-full bg-gray-200 dark:bg-gray-700">
+                <i data-feather="calendar" class="w-5 h-5"></i>
+            </button>
+        </header>
+
+        <!-- Time Period Selector -->
+        <div class="flex justify-between items-center mb-6">
+            <div class="flex space-x-2 overflow-x-auto pb-2 scrollbar-hide">
+                <button class="whitespace-nowrap px-4 py-2 bg-primary-500 text-white rounded-full font-medium text-sm">
+                    Week
+                </button>
+                <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full font-medium text-sm">
+                    Month
+                </button>
+                <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full font-medium text-sm">
+                    Year
+                </button>
+                <button class="whitespace-nowrap px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded-full font-medium text-sm">
+                    All Time
+                </button>
+            </div>
+        </div>
+
+        <!-- Weight Progress Card -->
+        <div class="progress-card rounded-xl p-6 shadow-sm mb-6">
+            <div class="flex justify-between items-center mb-4">
+                <div>
+                    <h2 class="text-lg font-bold">Weight Progress</h2>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Current: 72.1 kg</p>
+                </div>
+                <button class="text-primary-500 dark:text-primary-300 flex items-center text-sm">
+                    <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add
+                </button>
+            </div>
+            <div class="h-40 mb-4">
+                <!-- Chart placeholder -->
+                <div class="h-full flex items-end justify-between">
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-primary-300 rounded-t-sm" style="height: 20%"></div>
+                        <p class="text-xs mt-1">S</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-primary-300 rounded-t-sm" style="height: 40%"></div>
+                        <p class="text-xs mt-1">M</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-primary-300 rounded-t-sm" style="height: 30%"></div>
+                        <p class="text-xs mt-1">T</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-primary-300 rounded-t-sm" style="height: 50%"></div>
+                        <p class="text-xs mt-1">W</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-primary-300 rounded-t-sm" style="height: 45%"></div>
+                        <p class="text-xs mt-1">T</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-primary-400 rounded-t-sm" style="height: 60%"></div>
+                        <p class="text-xs mt-1">F</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-primary-500 rounded-t-sm" style="height: 70%"></div>
+                        <p class="text-xs mt-1">S</p>
+                    </div>
+                </div>
+            </div>
+            <div class="grid grid-cols-3 gap-4 text-center">
+                <div>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Start</p>
+                    <p class="font-bold">75.4 kg</p>
+                </div>
+                <div>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Lost</p>
+                    <p class="font-bold text-primary-500">3.3 kg</p>
+                </div>
+                <div>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Goal</p>
+                    <p class="font-bold">68.0 kg</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Measurements -->
+        <div class="progress-card rounded-xl p-6 shadow-sm mb-6">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-lg font-bold">Measurements</h2>
+                <button class="text-primary-500 dark:text-primary-300 flex items-center text-sm">
+                    <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add
+                </button>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+                <div class="stats-item">
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Waist</p>
+                    <p class="text-xl font-bold">82 cm</p>
+                    <p class="text-xs text-primary-500">-4 cm</p>
+                </div>
+                <div class="stats-item">
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Hips</p>
+                    <p class="text-xl font-bold">94 cm</p>
+                    <p class="text-xs text-primary-500">-3 cm</p>
+                </div>
+                <div class="stats-item">
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Chest</p>
+                    <p class="text-xl font-bold">98 cm</p>
+                    <p class="text-xs text-primary-500">-2 cm</p>
+                </div>
+                <div class="stats-item">
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Arm</p>
+                    <p class="text-xl font-bold">32 cm</p>
+                    <p class="text-xs text-gray-500 dark:text-gray-400">+0 cm</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- Photos -->
+        <div class="progress-card rounded-xl p-6 shadow-sm mb-6">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-lg font-bold">Progress Photos</h2>
+                <button class="text-primary-500 dark:text-primary-300 flex items-center text-sm">
+                    <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add
+                </button>
+            </div>
+            <div class="photo-grid">
+                <div class="photo-item">
+                    <img src="http://static.photos/people/640x360/1" alt="Progress Photo">
+                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2">
+                        <p class="text-white text-xs">Day 1</p>
+                    </div>
+                </div>
+                <div class="photo-item">
+                    <img src="http://static.photos/people/640x360/2" alt="Progress Photo">
+                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2">
+                        <p class="text-white text-xs">Day 15</p>
+                    </div>
+                </div>
+                <div class="photo-item">
+                    <img src="http://static.photos/people/640x360/3" alt="Progress Photo">
+                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2">
+                        <p class="text-white text-xs">Day 30</p>
+                    </div>
+                </div>
+                <div class="photo-item">
+                    <img src="http://static.photos/people/640x360/4" alt="Progress Photo">
+                    <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-2">
+                        <p class="text-white text-xs">Day 45</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Ketone Levels -->
+        <div class="progress-card rounded-xl p-6 shadow-sm mb-6">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-lg font-bold">Ketone Levels</h2>
+                <button class="text-primary-500 dark:text-primary-300 flex items-center text-sm">
+                    <i data-feather="plus" class="w-4 h-4 mr-1"></i> Add
+                </button>
+            </div>
+            <div class="h-40">
+                <!-- Chart placeholder -->
+                <div class="h-full flex items-end justify-between">
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-green-300 rounded-t-sm" style="height: 30%"></div>
+                        <p class="text-xs mt-1">Mon</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-green-400 rounded-t-sm" style="height: 50%"></div>
+                        <p class="text-xs mt-1">Tue</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-green-500 rounded-t-sm" style="height: 70%"></div>
+                        <p class="text-xs mt-1">Wed</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-green-400 rounded-t-sm" style="height: 60%"></div>
+                        <p class="text-xs mt-1">Thu</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-green-300 rounded-t-sm" style="height: 40%"></div>
+                        <p class="text-xs mt-1">Fri</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-yellow-300 rounded-t-sm" style="height: 20%"></div>
+                        <p class="text-xs mt-1">Sat</p>
+                    </div>
+                    <div class="flex flex-col items-center">
+                        <div class="w-4 bg-yellow-200 rounded-t-sm" style="height: 10%"></div>
+                        <p class="text-xs mt-1">Sun</p>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-4 flex justify-between items-center">
+                <div>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Last Reading</p>
+                    <p class="font-bold">1.8 mmol/L</p>
+                </div>
+                <div>
+                    <p class="text-sm text-gray-500 dark:text-gray-400">Status</p>
+                    <p class="font-bold text-green-500">Ketosis</p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <!-- Bottom Navigation -->
+    <nav class="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 shadow-lg rounded-t-2xl">
+        <div class="flex justify-around py-3">
+            <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                <i data-feather="home" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Home</span>
+            </a>
+            <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                <i data-feather="bookmark" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Plan</span>
+            </a>
+            <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                <div class="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center -mt-6 shadow-lg">
+                    <i data-feather="plus" class="text-white w-6 h-6"></i>
+                </div>
+            </a>
+            <a href="#" class="flex flex-col items-center text-primary-500 dark:text-primary-400">
+                <i data-feather="trending-up" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Progress</span>
+            </a>
+            <a href="#" class="flex flex-col items-center text-gray-500 dark:text-gray-400">
+                <i data-feather="settings" class="w-6 h-6"></i>
+                <span class="text-xs mt-1">Settings</span>
+            </a>
+        </div>
+    </nav>
+
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>