Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Macro Tracker Pro</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="bg-gradient"></div> | |
| <div class="bg-orbs"> | |
| <div class="orb orb-1"></div> | |
| <div class="orb orb-2"></div> | |
| <div class="orb orb-3"></div> | |
| </div> | |
| <div class="container"> | |
| <!-- AUTH VIEW --> | |
| <div id="auth-view" class="auth-container"> | |
| <div class="auth-card"> | |
| <div class="auth-logo"> | |
| <div class="logo-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/> | |
| </svg> | |
| </div> | |
| </div> | |
| <div class="auth-header"> | |
| <h1>MacroPro</h1> | |
| <p>Smart Nutrition Tracking</p> | |
| </div> | |
| <div class="input-group"> | |
| <div class="input-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/> | |
| <polyline points="22,6 12,13 2,6"/> | |
| </svg> | |
| </div> | |
| <input type="email" id="email" class="modern-input" placeholder="Email Address" autocomplete="off"> | |
| </div> | |
| <div class="input-group"> | |
| <div class="input-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/> | |
| <path d="M7 11V7a5 5 0 0 1 10 0v4"/> | |
| </svg> | |
| </div> | |
| <input type="password" id="password" class="modern-input" placeholder="Password" autocomplete="off"> | |
| </div> | |
| <div class="error-msg" id="auth-error"></div> | |
| <button class="auth-btn primary" id="login-btn"> | |
| <span>Sign In</span> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="5" y1="12" x2="19" y2="12"/> | |
| <polyline points="12 5 19 12 12 19"/> | |
| </svg> | |
| </button> | |
| <button class="auth-btn secondary" id="signup-btn">Create Account</button> | |
| <div class="auth-footer"> | |
| <span>Your personal nutrition companion</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- APP VIEW --> | |
| <div id="app-view" class="hidden"> | |
| <header> | |
| <div class="header-left"> | |
| <span class="greeting" id="greeting">Good morning</span> | |
| <h1>Dashboard</h1> | |
| </div> | |
| <div class="header-actions"> | |
| <button class="icon-btn-header" id="settings-btn" title="Settings"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="3"/> | |
| <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/> | |
| </svg> | |
| </button> | |
| <button class="icon-btn-header logout" id="logout-btn" title="Logout"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/> | |
| <polyline points="16 17 21 12 16 7"/> | |
| <line x1="21" y1="12" x2="9" y2="12"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Stats Dashboard --> | |
| <div class="dashboard"> | |
| <!-- Main Calorie Card --> | |
| <div class="main-stats"> | |
| <div class="main-stats-content"> | |
| <div class="cal-info"> | |
| <span class="cal-label">Calories</span> | |
| <h2 id="total-cals">0</h2> | |
| <span id="goal-label" class="goal-label">Loading...</span> | |
| </div> | |
| <div class="ring-container large"> | |
| <svg class="progress-ring" viewBox="0 0 100 100"> | |
| <circle class="ring-bg" cx="50" cy="50" r="42"/> | |
| <circle class="ring-fill" id="ring-cals" cx="50" cy="50" r="42"/> | |
| </svg> | |
| <div class="ring-center"> | |
| <span id="cal-percent">0%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="calorie-bar"> | |
| <div class="bar-track"> | |
| <div class="bar-fill" id="cal-bar-fill"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Weight Prediction Card --> | |
| <div class="prediction-card"> | |
| <div class="pred-header"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/> | |
| </svg> | |
| <span>4-Week Forecast</span> | |
| </div> | |
| <div class="pred-body"> | |
| <div class="pred-value" id="pred-weight">-- lbs</div> | |
| <div class="pred-change" id="pred-diff"> | |
| <span class="change-indicator"></span> | |
| <span class="change-text">Calculating...</span> | |
| </div> | |
| </div> | |
| <div class="pred-footer"> | |
| <span>Based on today's intake</span> | |
| </div> | |
| </div> | |
| <!-- Macro Cards --> | |
| <div class="macro-grid"> | |
| <div class="macro-card protein"> | |
| <div class="macro-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z"/> | |
| </svg> | |
| </div> | |
| <div class="macro-content"> | |
| <div class="macro-val" id="total-prot">0g</div> | |
| <div class="macro-label">Protein</div> | |
| <div class="macro-bar"> | |
| <div class="bar-fill" id="prot-bar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="macro-card carbs"> | |
| <div class="macro-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 3v18M5.5 8.5l13-1M5.5 15.5l13 1"/> | |
| </svg> | |
| </div> | |
| <div class="macro-content"> | |
| <div class="macro-val" id="total-carb">0g</div> | |
| <div class="macro-label">Carbs</div> | |
| <div class="macro-bar"> | |
| <div class="bar-fill" id="carb-bar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="macro-card fats"> | |
| <div class="macro-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="10"/> | |
| <path d="M8 12h8M12 8v8"/> | |
| </svg> | |
| </div> | |
| <div class="macro-content"> | |
| <div class="macro-val" id="total-fat">0g</div> | |
| <div class="macro-label">Fat</div> | |
| <div class="macro-bar"> | |
| <div class="bar-fill" id="fat-bar"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Form --> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <div class="section-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="12" y1="5" x2="12" y2="19"/> | |
| <line x1="5" y1="12" x2="19" y2="12"/> | |
| </svg> | |
| </div> | |
| <h3>Log Meal</h3> | |
| </div> | |
| <form id="tracker-form" class="meal-form"> | |
| <div class="form-row full"> | |
| <input type="text" id="in-name" class="form-input" placeholder="What did you eat?" required autocomplete="off"> | |
| </div> | |
| <div class="form-grid"> | |
| <div class="form-field"> | |
| <label>Calories</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="in-cals" class="form-input" placeholder="0" required> | |
| <span class="unit">kcal</span> | |
| </div> | |
| </div> | |
| <div class="form-field"> | |
| <label class="protein-label">Protein</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="in-prot" class="form-input" placeholder="0"> | |
| <span class="unit">g</span> | |
| </div> | |
| </div> | |
| <div class="form-field"> | |
| <label class="carbs-label">Carbs</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="in-carb" class="form-input" placeholder="0"> | |
| <span class="unit">g</span> | |
| </div> | |
| </div> | |
| <div class="form-field"> | |
| <label class="fats-label">Fat</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="in-fat" class="form-input" placeholder="0"> | |
| <span class="unit">g</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button type="submit" id="submit-btn" class="submit-btn"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <line x1="12" y1="5" x2="12" y2="19"/> | |
| <line x1="5" y1="12" x2="19" y2="12"/> | |
| </svg> | |
| <span>Add Entry</span> | |
| </button> | |
| </form> | |
| </div> | |
| <!-- History Section --> | |
| <div class="section"> | |
| <div class="section-header"> | |
| <div class="section-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="10"/> | |
| <polyline points="12 6 12 12 16 14"/> | |
| </svg> | |
| </div> | |
| <h3>History</h3> | |
| </div> | |
| <ul id="log-list" class="log-list"></ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- SETTINGS MODAL --> | |
| <div id="settings-modal" class="modal-overlay"> | |
| <div class="modal-card"> | |
| <div class="modal-header"> | |
| <div class="modal-icon"> | |
| <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <circle cx="12" cy="12" r="3"/> | |
| <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/> | |
| </svg> | |
| </div> | |
| <h2>Profile & Goals</h2> | |
| <p>Customize your nutrition targets</p> | |
| </div> | |
| <form id="settings-form"> | |
| <div class="settings-section"> | |
| <h4>Body Stats</h4> | |
| <div class="settings-grid"> | |
| <div class="setting-field"> | |
| <label>Current Weight</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="set-weight" class="form-input" placeholder="180" step="0.1"> | |
| <span class="unit">lbs</span> | |
| </div> | |
| </div> | |
| <div class="setting-field"> | |
| <label>Maintenance (TDEE)</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="set-tdee" class="form-input" placeholder="2500"> | |
| <span class="unit">kcal</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="settings-section"> | |
| <h4>Daily Goals</h4> | |
| <div class="settings-grid"> | |
| <div class="setting-field"> | |
| <label>Calorie Goal</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="set-cals" class="form-input" placeholder="2000"> | |
| <span class="unit">kcal</span> | |
| </div> | |
| </div> | |
| <div class="setting-field"> | |
| <label class="protein-label">Protein</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="set-prot" class="form-input" placeholder="180"> | |
| <span class="unit">g</span> | |
| </div> | |
| </div> | |
| <div class="setting-field"> | |
| <label class="carbs-label">Carbs</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="set-carb" class="form-input" placeholder="250"> | |
| <span class="unit">g</span> | |
| </div> | |
| </div> | |
| <div class="setting-field"> | |
| <label class="fats-label">Fat</label> | |
| <div class="input-with-unit"> | |
| <input type="number" id="set-fat" class="form-input" placeholder="80"> | |
| <span class="unit">g</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal-actions"> | |
| <button type="button" class="modal-btn secondary" id="close-settings">Cancel</button> | |
| <button type="submit" class="modal-btn primary">Save Changes</button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| <script type="module" src="script.js"></script> | |
| </body> | |
| </html> |