Spaces:
Running
Running
Prompt Detalhado para Desenvolvimento de Aplicativo de Dieta e Monitoramento Nutricional (Emergent)
b5fdc7e
verified
| <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> | |