From 1cb0064488811bd61fdd6fc1ed5a9aae1e378a45 Mon Sep 17 00:00:00 2001 From: Flatlogic Bot Date: Sat, 21 Feb 2026 16:48:44 +0000 Subject: [PATCH] mb v1 --- assets/css/custom.css | 206 +++++++++++++--------- assets/js/main.js | 42 ++++- index.php | 394 ++++++++++++++++++------------------------ manifest.json | 17 ++ sw.js | 26 +++ 5 files changed, 368 insertions(+), 317 deletions(-) create mode 100644 manifest.json create mode 100644 sw.js diff --git a/assets/css/custom.css b/assets/css/custom.css index eb5aaf0..2857167 100644 --- a/assets/css/custom.css +++ b/assets/css/custom.css @@ -9,10 +9,15 @@ --success: #10b981; --info: #06b6d4; --warning: #f59e0b; - --radius: 12px; + --radius: 16px; --card-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); } +* { + -webkit-tap-highlight-color: transparent; + box-sizing: border-box; +} + body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--bg); @@ -20,19 +25,87 @@ body { margin: 0; padding: 0; -webkit-font-smoothing: antialiased; + overflow-x: hidden; + /* Prevent rubber-banding on iOS if needed, but usually better to let it be */ } -.container-mobile { +/* App Shell Structure */ +.app-shell { + display: flex; + flex-direction: column; + min-height: 100vh; max-width: 480px; margin: 0 auto; - padding: 24px 16px; - padding-bottom: 80px; /* footer space */ + background: var(--bg); + position: relative; } -header { - margin-bottom: 24px; +.app-bar { + position: sticky; + top: 0; + z-index: 1000; + background: rgba(15, 23, 42, 0.8); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-bottom: 1px solid var(--border); + padding-top: calc(8px + env(safe-area-inset-top)); } +.app-content { + flex: 1; + padding-bottom: calc(90px + env(safe-area-inset-bottom)) !important; +} + +/* Bottom Navigation */ +.bottom-nav { + position: fixed; + bottom: 0; + left: 50%; + transform: translateX(-50%); + width: 100%; + max-width: 480px; + height: calc(70px + env(safe-area-inset-bottom)); + background: rgba(30, 41, 59, 0.95); + backdrop-filter: blur(12px); + -webkit-backdrop-filter: blur(12px); + border-top: 1px solid var(--border); + display: flex; + justify-content: space-around; + align-items: center; + padding-bottom: env(safe-area-inset-bottom); + z-index: 1050; +} + +.bottom-nav .nav-item { + display: flex; + flex-direction: column; + align-items: center; + text-decoration: none; + color: var(--text-muted); + font-size: 0.65rem; + font-weight: 500; + transition: all 0.2s; + flex: 1; + padding: 8px 0; +} + +.bottom-nav .nav-item svg { + margin-bottom: 4px; + width: 24px; + height: 24px; + transition: transform 0.2s ease; +} + +.bottom-nav .nav-item.active { + color: var(--primary); +} + +.bottom-nav .nav-item.active svg { + transform: translateY(-2px); + stroke: var(--primary); +} + +/* Cards & Stats */ .card-stat { background: var(--surface); border: 1px solid var(--border); @@ -40,7 +113,6 @@ header { padding: 20px; margin-bottom: 16px; box-shadow: var(--card-shadow); - transition: transform 0.2s ease; } .stat-label { @@ -59,9 +131,9 @@ header { } .progress-thin { - height: 6px; + height: 8px; background-color: var(--border); - border-radius: 4px; + border-radius: 10px; overflow: hidden; margin-top: 8px; } @@ -69,7 +141,7 @@ header { .progress-bar-inner { height: 100%; background-color: var(--primary); - transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease; + transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); } .btn-primary-custom { @@ -77,114 +149,76 @@ header { color: white; border: none; border-radius: var(--radius); - padding: 14px 24px; - font-weight: 600; + padding: 16px 24px; + font-weight: 700; width: 100%; - transition: all 0.2s ease; + box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } -.btn-primary-custom:hover { - background-color: var(--primary-hover); +.btn-primary-custom:active { + transform: scale(0.98); } .log-item { display: flex; justify-content: space-between; align-items: center; - padding: 14px; + padding: 16px; background: var(--surface); border-radius: var(--radius); - margin-bottom: 8px; + margin-bottom: 10px; border: 1px solid var(--border); } -.log-details { - font-size: 0.75rem; - color: var(--text-muted); -} - .modal-content { background-color: var(--surface); - color: var(--text); - border-radius: 20px; + border-radius: 24px; border: 1px solid var(--border); } .form-control { background-color: var(--bg); - border-radius: var(--radius); + border-radius: 12px; border: 1px solid var(--border); - padding: 12px 16px; + padding: 14px 16px; color: var(--text); + font-size: 1rem; /* Prevent zoom on iOS */ } -.form-control:focus { - background-color: var(--bg); - border-color: var(--primary); - color: var(--text); - box-shadow: none; -} - -/* Tabs styling */ -.nav-pills { - background: var(--surface); - padding: 4px; - border-radius: var(--radius); - border: 1px solid var(--border); -} - -.nav-pills .nav-link { - color: var(--text-muted); - border-radius: calc(var(--radius) - 4px); - font-weight: 600; - transition: all 0.2s; - font-size: 0.85rem; -} - -.nav-pills .nav-link.active { - background-color: var(--bg); - color: var(--primary); - box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3); -} - -.btn-outline-secondary { border-color: var(--border); color: var(--text-muted); } -.btn-outline-secondary:hover { background-color: var(--border); color: var(--text); } - -.bg-success-subtle { background-color: rgba(16, 185, 129, 0.1) !important; } -.bg-secondary-subtle { background-color: rgba(51, 65, 85, 0.3) !important; } - -#reminders-row::-webkit-scrollbar { display: none; } - -.btn-xs { padding: 0.25rem 0.5rem; font-size: 0.7rem; } - -/* Custom colors for stats */ +/* Custom Utilities */ +.x-small { font-size: 0.75rem; } .text-info { color: var(--info) !important; } .text-warning { color: var(--warning) !important; } .bg-info { background-color: var(--info) !important; } .bg-warning { background-color: var(--warning) !important; } -canvas { - max-width: 100% !important; -} - -.x-small { font-size: 0.65rem; } - -#gallery-container .card { - transition: transform 0.3s ease; -} - -#gallery-container .card:hover { - transform: scale(1.02); -} +#reminders-row::-webkit-scrollbar { display: none; } +/* Supplement buttons */ .supplement-toggle-btn { - transition: all 0.2s; - font-size: 0.8rem !important; - text-align: center; + border-radius: 12px !important; + font-weight: 600 !important; + padding: 8px 16px !important; } -.supplement-toggle-btn.btn-success { - background-color: var(--success); - border-color: var(--success) !important; - color: white; +/* Gallery adjustments */ +#gallery-container .card { + border-radius: var(--radius); + overflow: hidden; + border: 1px solid var(--border); + background: var(--surface); +} + +/* Hide Bootstrap Tab Nav as we use Bottom Nav now */ +#mainTab { + display: none !important; +} + +@media (min-width: 481px) { + body { + background-color: #000; + } + .app-shell { + box-shadow: 0 0 40px rgba(0,0,0,0.5); + } } \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index 62ae921..4178654 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -14,14 +14,43 @@ document.addEventListener('DOMContentLoaded', function() { const aiBtnSpinner = document.getElementById('aiBtnSpinner'); // Tab Elements - const analysisTab = document.getElementById('analysis-tab'); - const galleryTab = document.getElementById('gallery-tab'); const periodWeekly = document.getElementById('periodWeekly'); const periodMonthly = document.getElementById('periodMonthly'); let weightChart = null; let caloriesChart = null; + // --- PWA SERVICE WORKER --- + if ('serviceWorker' in navigator) { + navigator.serviceWorker.register('sw.js').then(() => { + console.log('Service Worker Registered'); + }); + } + + // --- BOTTOM NAV & TAB HANDLING --- + const bottomNavItems = document.querySelectorAll('.bottom-nav .nav-item'); + bottomNavItems.forEach(item => { + item.addEventListener('click', function(e) { + e.preventDefault(); + const tabId = this.dataset.tab; + + // Update UI + bottomNavItems.forEach(i => i.classList.remove('active')); + this.classList.add('active'); + + // Show Tab + const tabTrigger = new bootstrap.Tab(document.querySelector(`#${tabId}-tab`)); + tabTrigger.show(); + + // Special handling for specific tabs + if (tabId === 'gallery') fetchPhotos(); + if (tabId === 'analysis') renderAnalysis(); + + // Scroll to top + window.scrollTo({ top: 0, behavior: 'smooth' }); + }); + }); + // Initial fetch refreshAll(); @@ -243,9 +272,9 @@ document.addEventListener('DOMContentLoaded', function() { } container.innerHTML = data.map(photo => ` -
+
- Progress + Progress
${photo.logged_at} @@ -306,10 +335,7 @@ document.addEventListener('DOMContentLoaded', function() { }); } - // --- TABS SWITCHING --- - analysisTab.addEventListener('shown.bs.tab', renderAnalysis); - galleryTab.addEventListener('shown.bs.tab', fetchPhotos); - + // --- ANALYSIS --- periodWeekly.addEventListener('change', renderAnalysis); periodMonthly.addEventListener('change', renderAnalysis); diff --git a/index.php b/index.php index f5bc4a1..3081453 100644 --- a/index.php +++ b/index.php @@ -13,15 +13,25 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ''; - + Nutrition Pulse + + + + + + + + + + @@ -31,193 +41,170 @@ $projectImageUrl = $_SERVER['PROJECT_IMAGE_URL'] ?? ''; -
-
-
-

Nutrition Pulse

-

-
-
- - +
+
+
+
+

Nutrition Pulse

+

+
+
+ + +
-