{"id":97691,"date":"2025-05-14T08:31:28","date_gmt":"2025-05-14T08:31:28","guid":{"rendered":"https:\/\/www.getstoryshots.com\/?p=97691"},"modified":"2026-02-11T11:52:36","modified_gmt":"2026-02-11T11:52:36","slug":"outlive-longevity-tracker-app","status":"publish","type":"post","link":"https:\/\/www.getstoryshots.com\/sv\/books\/outlive-longevity-tracker-app\/","title":{"rendered":"App f\u00f6r livsl\u00e4ngdssp\u00e5rning av Outlive"},"content":{"rendered":"\n<p>Optimize your healthspan with our\u00a0longevity tracker, based on Peter Attia&#8217;s Outlive principles, covering exercise, nutrition, sleep, and mental health. This app is unofficial and not affiliated with the author or publisher.<\/p>\n\n\n\n<p><br><strong>Get the detailed summary <a href=\"https:\/\/www.getstoryshots.com\/books\/outlive-summary\/\" data-type=\"post\" data-id=\"90124\">here.<\/a><\/strong><\/p>\n\n\n\n<link href=\"https:\/\/cdn.jsdelivr.net\/npm\/tailwindcss@2.2.19\/dist\/tailwind.min.css\" rel=\"stylesheet\"> <link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/@fortawesome\/fontawesome-free@6.4.0\/css\/all.min.css\"> <style> :root { --primary-color: #4F46E5; --secondary-color: #10B981; --tertiary-color: #F59E0B; --quaternary-color: #EC4899; --background-color: #F9FAFB; --text-color: #1F2937; --card-bg: #FFFFFF; --border-color: #E5E7EB; } .body { font-family: 'Inter', sans-serif; background-color: var(--background-color); color: var(--text-color); } .pillar-card { border-radius: 12px; transition: transform 0.3s, box-shadow 0.3s; } .pillar-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .pillar-1 { border-top: 4px solid var(--primary-color); } .pillar-2 { border-top: 4px solid var(--secondary-color); } .pillar-3 { border-top: 4px solid var(--tertiary-color); } .pillar-4 { border-top: 4px solid var(--quaternary-color); } .progress-bar { height: 8px; border-radius: 4px; background-color: var(--border-color); overflow: hidden; } .progress { height: 100%; border-radius: 4px; } .btn-primary { background-color: var(--primary-color); color: white; border-radius: 8px; padding: 0.75rem 1.5rem; font-weight: 600; transition: background-color 0.3s; } .btn-primary:hover { background-color: #4338CA; } .btn-secondary { background-color: white; color: var(--primary-color); border: 1px solid var(--primary-color); border-radius: 8px; padding: 0.75rem 1.5rem; font-weight: 600; transition: background-color 0.3s; } .btn-secondary:hover { background-color: #F3F4F6; } .tab { padding: 0.75rem 1.25rem; font-weight: 600; cursor: pointer; border-bottom: 2px solid transparent; transition: all 0.3s; } .tab.active { border-bottom: 2px solid var(--primary-color); color: var(--primary-color); } .content-section { display: none; } .content-section.active { display: block; } input[type=\"range\"] { width: 100%; -webkit-appearance: none; height: 8px; border-radius: 4px; background: var(--border-color); outline: none; } input[type=\"range\"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--primary-color); cursor: pointer; } .checkbox-container { display: flex; align-items: center; margin-bottom: 0.5rem; } .checkbox-container input[type=\"checkbox\"] { margin-right: 0.5rem; } .chart-container { position: relative; height: 200px; width: 100%; } .recommendation-card { border-left: 4px solid var(--primary-color); background-color: var(--card-bg); border-radius: 8px; padding: 1rem; margin-bottom: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } .hide { display: none; } @media (max-width: 768px) { .pillar-card { margin-bottom: 1rem; } } <\/style> <div class=\"body antialiased\"> <div class=\"min-h-screen\"> <!-- Header --> <header class=\"bg-white shadow\"> <div class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\"> <div class=\"flex justify-between items-center py-4\"> <!-- <h1 class=\"text-2xl font-bold text-gray-900\">Outlive Longevity Tracker<\/h1> --> <div> <button id=\"settings-btn\" class=\"p-2 rounded-full hover:bg-gray-100\"> <i class=\"fas fa-cog text-gray-600\"><\/i> <\/button> <\/div> <\/div> <\/div> <\/header> <!-- Main Content --> <main class=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8\"> <!-- Dashboard Overview --> <section class=\"mb-8\"> <div class=\"flex justify-between items-center mb-6\"> <h2 class=\"text-xl font-semibold\">Your Longevity Dashboard<\/h2> <p class=\"text-sm text-gray-500\">Last updated: <span id=\"last-updated\">Today<\/span><\/p> <\/div> <!-- Longevity Score --> <div class=\"bg-white rounded-lg shadow p-6 mb-8\"> <div class=\"flex flex-col md:flex-row justify-between items-center\"> <div class=\"mb-4 md:mb-0\"> <h3 class=\"text-lg font-medium text-gray-700\">Your Longevity Score<\/h3> <p class=\"text-sm text-gray-500\">Based on your assessment of the four pillars<\/p> <\/div> <div class=\"flex items-center\"> <div class=\"relative h-32 w-32\"> <svg class=\"h-full w-full\" viewBox=\"0 0 36 36\"> <path d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" fill=\"none\" stroke=\"#E5E7EB\" stroke-width=\"3\" stroke-dasharray=\"100, 100\" \/> <path id=\"score-circle\" d=\"M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831\" fill=\"none\" stroke=\"var(--primary-color)\" stroke-width=\"3\" stroke-dasharray=\"75, 100\" \/> <\/svg> <div class=\"absolute top-1\/2 left-1\/2 transform -translate-x-1\/2 -translate-y-1\/2 text-center\"> <span id=\"longevity-score\" class=\"text-3xl font-bold\">75<\/span> <span class=\"text-sm block text-gray-500\">\/ 100<\/span> <\/div> <\/div> <div class=\"ml-6\"> <div class=\"text-sm font-medium text-gray-700\">Biological Age: <span id=\"biological-age\" class=\"font-bold\">35<\/span><\/div> <div class=\"text-sm font-medium text-gray-700\">Chronological Age: <span id=\"chronological-age\" class=\"font-bold\">42<\/span><\/div> <div class=\"text-sm font-medium text-green-600 mt-1\"> <i class=\"fas fa-arrow-up\"><\/i> +5 points since last month <\/div> <\/div> <\/div> <\/div> <\/div> <!-- Four Pillars Overview --> <div class=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6\"> <!-- Pillar 1: Exercise & Physical Health --> <div class=\"pillar-card pillar-1 bg-white shadow p-6\"> <div class=\"flex items-center mb-4\"> <div class=\"rounded-full bg-indigo-100 p-3\"> <i class=\"fas fa-dumbbell text-indigo-600\"><\/i> <\/div> <h3 class=\"ml-3 text-lg font-medium\">Exercise &#038; Physical Health<\/h3> <\/div> <div class=\"mb-2 flex justify-between\"> <span class=\"text-sm text-gray-500\">Progress<\/span> <span id=\"pillar1-score\" class=\"text-sm font-medium\">80%<\/span> <\/div> <div class=\"progress-bar\"> <div id=\"pillar1-progress\" class=\"progress\" style=\"width: 80%; background-color: var(--primary-color);\"><\/div> <\/div> <div class=\"mt-4\"> <button class=\"text-sm text-indigo-600 hover:text-indigo-800 font-medium update-pillar\" data-pillar=\"1\"> Update <i class=\"fas fa-arrow-right ml-1\"><\/i> <\/button> <\/div> <\/div> <!-- Pillar 2: Nutritional Biochemistry --> <div class=\"pillar-card pillar-2 bg-white shadow p-6\"> <div class=\"flex items-center mb-4\"> <div class=\"rounded-full bg-green-100 p-3\"> <i class=\"fas fa-apple-alt text-green-600\"><\/i> <\/div> <h3 class=\"ml-3 text-lg font-medium\">Nutritional Biochemistry<\/h3> <\/div> <div class=\"mb-2 flex justify-between\"> <span class=\"text-sm text-gray-500\">Progress<\/span> <span id=\"pillar2-score\" class=\"text-sm font-medium\">65%<\/span> <\/div> <div class=\"progress-bar\"> <div id=\"pillar2-progress\" class=\"progress\" style=\"width: 65%; background-color: var(--secondary-color);\"><\/div> <\/div> <div class=\"mt-4\"> <button class=\"text-sm text-green-600 hover:text-green-800 font-medium update-pillar\" data-pillar=\"2\"> Update <i class=\"fas fa-arrow-right ml-1\"><\/i> <\/button> <\/div> <\/div> <!-- Pillar 3: Sleep --> <div class=\"pillar-card pillar-3 bg-white shadow p-6\"> <div class=\"flex items-center mb-4\"> <div class=\"rounded-full bg-yellow-100 p-3\"> <i class=\"fas fa-moon text-yellow-600\"><\/i> <\/div> <h3 class=\"ml-3 text-lg font-medium\">Sleep<\/h3> <\/div> <div class=\"mb-2 flex justify-between\"> <span class=\"text-sm text-gray-500\">Progress<\/span> <span id=\"pillar3-score\" class=\"text-sm font-medium\">75%<\/span> <\/div> <div class=\"progress-bar\"> <div id=\"pillar3-progress\" class=\"progress\" style=\"width: 75%; background-color: var(--tertiary-color);\"><\/div> <\/div> <div class=\"mt-4\"> <button class=\"text-sm text-yellow-600 hover:text-yellow-800 font-medium update-pillar\" data-pillar=\"3\"> Update <i class=\"fas fa-arrow-right ml-1\"><\/i> <\/button> <\/div> <\/div> <!-- Pillar 4: Mental & Emotional Health --> <div class=\"pillar-card pillar-4 bg-white shadow p-6\"> <div class=\"flex items-center mb-4\"> <div class=\"rounded-full bg-pink-100 p-3\"> <i class=\"fas fa-brain text-pink-600\"><\/i> <\/div> <h3 class=\"ml-3 text-lg font-medium\">Mental &#038; Emotional Health<\/h3> <\/div> <div class=\"mb-2 flex justify-between\"> <span class=\"text-sm text-gray-500\">Progress<\/span> <span id=\"pillar4-score\" class=\"text-sm font-medium\">70%<\/span> <\/div> <div class=\"progress-bar\"> <div id=\"pillar4-progress\" class=\"progress\" style=\"width: 70%; background-color: var(--quaternary-color);\"><\/div> <\/div> <div class=\"mt-4\"> <button class=\"text-sm text-pink-600 hover:text-pink-800 font-medium update-pillar\" data-pillar=\"4\"> Update <i class=\"fas fa-arrow-right ml-1\"><\/i> <\/button> <\/div> <\/div> <\/div> <\/section> <!-- Tabs Navigation --> <div class=\"border-b border-gray-200 mb-8\"> <div class=\"flex overflow-x-auto\"> <div class=\"tab active\" data-tab=\"assessment\">Assessment<\/div> <div class=\"tab\" data-tab=\"recommendations\">Recommendations<\/div> <div class=\"tab\" data-tab=\"education\">Education<\/div> <div class=\"tab\" data-tab=\"trends\">Trends &#038; Insights<\/div> <\/div> <\/div> <!-- Tab Content --> <div class=\"tab-content\"> <!-- Assessment Tab --> <section id=\"assessment-tab\" class=\"content-section active\"> <div class=\"bg-white rounded-lg shadow p-6\"> <h3 class=\"text-xl font-semibold mb-6\">Longevity Assessment<\/h3> <p class=\"text-gray-600 mb-6\">Complete this assessment to receive personalized recommendations based on Peter Attia&#8217;s Outlive principles. Your responses help calculate your Longevity Score.<\/p> <!-- Assessment Form --> <form id=\"assessment-form\"> <!-- Pillar 1: Exercise & Physical Health --> <div class=\"mb-8\"> <h4 class=\"text-lg font-medium text-indigo-700 mb-4\">Exercise &#038; Physical Health<\/h4> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">How many days per week do you engage in strength training?<\/label> <div class=\"flex items-center\"> <input type=\"range\" min=\"0\" max=\"7\" value=\"3\" class=\"slider\" id=\"strength-days\"> <span class=\"ml-3 text-gray-700 font-medium\" id=\"strength-days-value\">3 days<\/span> <\/div> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">How many minutes per week do you spend in Zone 2 cardio training?<\/label> <div class=\"flex items-center\"> <input type=\"range\" min=\"0\" max=\"300\" step=\"10\" value=\"120\" class=\"slider\" id=\"cardio-minutes\"> <span class=\"ml-3 text-gray-700 font-medium\" id=\"cardio-minutes-value\">120 minutes<\/span> <\/div> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Which stability exercises do you regularly perform?<\/label> <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2 mt-2\"> <div class=\"checkbox-container\"> <input type=\"checkbox\" id=\"stability-1\"> <label for=\"stability-1\">Planks<\/label> <\/div> <div class=\"checkbox-container\"> <input type=\"checkbox\" id=\"stability-2\"> <label for=\"stability-2\">Single-leg balances<\/label> <\/div> <div class=\"checkbox-container\"> <input type=\"checkbox\" id=\"stability-3\"> <label for=\"stability-3\">Core rotational exercises<\/label> <\/div> <div class=\"checkbox-container\"> <input type=\"checkbox\" id=\"stability-4\"> <label for=\"stability-4\">Yoga\/Pilates<\/label> <\/div> <\/div> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Do you perform high-intensity interval training (HIIT)?<\/label> <div class=\"mt-2\"> <div class=\"flex items-center\"> <input type=\"radio\" id=\"hiit-yes\" name=\"hiit\" value=\"yes\"> <label for=\"hiit-yes\" class=\"ml-2\">Yes<\/label> <\/div> <div class=\"flex items-center mt-2\"> <input type=\"radio\" id=\"hiit-no\" name=\"hiit\" value=\"no\" checked> <label for=\"hiit-no\" class=\"ml-2\">No<\/label> <\/div> <\/div> <\/div> <\/div> <!-- Pillar 2: Nutritional Biochemistry --> <div class=\"mb-8\"> <h4 class=\"text-lg font-medium text-green-700 mb-4\">Nutritional Biochemistry<\/h4> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">How many servings of vegetables do you consume daily?<\/label> <div class=\"flex items-center\"> <input type=\"range\" min=\"0\" max=\"10\" value=\"3\" class=\"slider\" id=\"vegetable-servings\"> <span class=\"ml-3 text-gray-700 font-medium\" id=\"vegetable-servings-value\">3 servings<\/span> <\/div> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Do you practice time-restricted eating?<\/label> <div class=\"mt-2\"> <div class=\"flex items-center\"> <input type=\"radio\" id=\"trf-yes\" name=\"time-restricted-feeding\" value=\"yes\"> <label for=\"trf-yes\" class=\"ml-2\">Yes<\/label> <\/div> <div class=\"flex items-center mt-2\"> <input type=\"radio\" id=\"trf-no\" name=\"time-restricted-feeding\" value=\"no\" checked> <label for=\"trf-no\" class=\"ml-2\">No<\/label> <\/div> <\/div> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">How often do you consume processed foods or added sugars?<\/label> <select class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border\" id=\"processed-foods\"> <option value=\"1\">Multiple times per day<\/option> <option value=\"2\">Once per day<\/option> <option value=\"3\" selected>A few times per week<\/option> <option value=\"4\">Rarely<\/option> <option value=\"5\">Never<\/option> <\/select> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Have you had comprehensive blood work in the past year?<\/label> <div class=\"mt-2\"> <div class=\"flex items-center\"> <input type=\"radio\" id=\"bloodwork-yes\" name=\"bloodwork\" value=\"yes\"> <label for=\"bloodwork-yes\" class=\"ml-2\">Yes<\/label> <\/div> <div class=\"flex items-center mt-2\"> <input type=\"radio\" id=\"bloodwork-no\" name=\"bloodwork\" value=\"no\" checked> <label for=\"bloodwork-no\" class=\"ml-2\">No<\/label> <\/div> <\/div> <\/div> <\/div> <!-- Pillar 3: Sleep --> <div class=\"mb-8\"> <h4 class=\"text-lg font-medium text-yellow-700 mb-4\">Sleep<\/h4> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">How many hours of sleep do you typically get per night?<\/label> <div class=\"flex items-center\"> <input type=\"range\" min=\"4\" max=\"10\" step=\"0.5\" value=\"7\" class=\"slider\" id=\"sleep-hours\"> <span class=\"ml-3 text-gray-700 font-medium\" id=\"sleep-hours-value\">7 hours<\/span> <\/div> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Do you have a consistent sleep schedule?<\/label> <div class=\"mt-2\"> <div class=\"flex items-center\"> <input type=\"radio\" id=\"sleep-schedule-yes\" name=\"sleep-schedule\" value=\"yes\"> <label for=\"sleep-schedule-yes\" class=\"ml-2\">Yes<\/label> <\/div> <div class=\"flex items-center mt-2\"> <input type=\"radio\" id=\"sleep-schedule-no\" name=\"sleep-schedule\" value=\"no\" checked> <label for=\"sleep-schedule-no\" class=\"ml-2\">No<\/label> <\/div> <\/div> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Which sleep optimization practices do you follow?<\/label> <div class=\"grid grid-cols-1 md:grid-cols-2 gap-2 mt-2\"> <div class=\"checkbox-container\"> <input type=\"checkbox\" id=\"sleep-1\"> <label for=\"sleep-1\">Dark room<\/label> <\/div> <div class=\"checkbox-container\"> <input type=\"checkbox\" id=\"sleep-2\"> <label for=\"sleep-2\">Cool temperature (65-68\u00b0F)<\/label> <\/div> <div class=\"checkbox-container\"> <input type=\"checkbox\" id=\"sleep-3\"> <label for=\"sleep-3\">No screens 1 hour before bed<\/label> <\/div> <div class=\"checkbox-container\"> <input type=\"checkbox\" id=\"sleep-4\"> <label for=\"sleep-4\">No caffeine after noon<\/label> <\/div> <\/div> <\/div> <\/div> <!-- Pillar 4: Mental & Emotional Health --> <div class=\"mb-8\"> <h4 class=\"text-lg font-medium text-pink-700 mb-4\">Mental &#038; Emotional Health<\/h4> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">How often do you practice mindfulness, meditation, or stress-reduction techniques?<\/label> <select class=\"mt-1 block w-full rounded-md border-gray-300 shadow-sm p-2 border\" id=\"mindfulness\"> <option value=\"1\">Never<\/option> <option value=\"2\">Rarely<\/option> <option value=\"3\" selected>A few times per week<\/option> <option value=\"4\">Daily<\/option> <option value=\"5\">Multiple times per day<\/option> <\/select> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Do you have strong social connections and support systems?<\/label> <div class=\"mt-2\"> <div class=\"flex items-center\"> <input type=\"radio\" id=\"social-yes\" name=\"social\" value=\"yes\" checked> <label for=\"social-yes\" class=\"ml-2\">Yes<\/label> <\/div> <div class=\"flex items-center mt-2\"> <input type=\"radio\" id=\"social-no\" name=\"social\" value=\"no\"> <label for=\"social-no\" class=\"ml-2\">No<\/label> <\/div> <\/div> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">How would you rate your overall stress levels?<\/label> <div class=\"flex items-center\"> <input type=\"range\" min=\"1\" max=\"10\" value=\"6\" class=\"slider\" id=\"stress-level\"> <span class=\"ml-3 text-gray-700 font-medium\" id=\"stress-level-value\">Moderate (6\/10)<\/span> <\/div> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Do you engage in activities that bring you purpose and meaning?<\/label> <div class=\"mt-2\"> <div class=\"flex items-center\"> <input type=\"radio\" id=\"purpose-yes\" name=\"purpose\" value=\"yes\" checked> <label for=\"purpose-yes\" class=\"ml-2\">Yes<\/label> <\/div> <div class=\"flex items-center mt-2\"> <input type=\"radio\" id=\"purpose-no\" name=\"purpose\" value=\"no\"> <label for=\"purpose-no\" class=\"ml-2\">No<\/label> <\/div> <\/div> <\/div> <\/div> <div class=\"flex justify-end\"> <button type=\"submit\" class=\"btn-primary\">Calculate My Longevity Score<\/button> <\/div> <\/form> <\/div> <\/section> <!-- Recommendations Tab --> <section id=\"recommendations-tab\" class=\"content-section hide\"> <div class=\"bg-white rounded-lg shadow p-6\"> <h3 class=\"text-xl font-semibold mb-6\">Your Personalized Recommendations<\/h3> <p class=\"text-gray-600 mb-6\">Based on your assessment, here are personalized recommendations to improve your longevity across all four pillars.<\/p> <!-- Exercise Recommendations --> <div class=\"mb-8\"> <h4 class=\"text-lg font-medium text-indigo-700 mb-4\">Exercise &#038; Physical Health<\/h4> <div class=\"recommendation-card\"> <h5 class=\"font-medium mb-2\">Increase Zone 2 Training<\/h5> <p class=\"text-gray-600 text-sm\">Aim for 150-180 minutes per week of Zone 2 cardio (60-70% of max heart rate) to improve mitochondrial health and cardiovascular efficiency.<\/p> <\/div> <div class=\"recommendation-card\"> <h5 class=\"font-medium mb-2\">Add Stability Training<\/h5> <p class=\"text-gray-600 text-sm\">Include 2-3 stability sessions per week focusing on core, balance, and proper movement patterns as the foundation for strength training.<\/p> <\/div> <div class=\"recommendation-card\"> <h5 class=\"font-medium mb-2\">Incorporate High-Intensity Intervals<\/h5> <p class=\"text-gray-600 text-sm\">Add 1-2 weekly sessions of anaerobic Zone 5 intervals (30-second max efforts with full recovery) to improve metabolic flexibility.<\/p> <\/div> <\/div> <!-- Nutrition Recommendations --> <div class=\"mb-8\"> <h4 class=\"text-lg font-medium text-green-700 mb-4\">Nutritional Biochemistry<\/h4> <div class=\"recommendation-card\" style=\"border-left-color: var(--secondary-color);\"> <h5 class=\"font-medium mb-2\">Implement Time-Restricted Feeding<\/h5> <p class=\"text-gray-600 text-sm\">Consider a 16:8 or 14:10 eating window to support metabolic health, autophagy, and cellular repair processes.<\/p> <\/div> <div class=\"recommendation-card\" style=\"border-left-color: var(--secondary-color);\"> <h5 class=\"font-medium mb-2\">Increase Vegetable Intake<\/h5> <p class=\"text-gray-600 text-sm\">Aim for 7-10 servings of diverse, colorful vegetables daily to provide essential micronutrients and support gut health.<\/p> <\/div> <div class=\"recommendation-card\" style=\"border-left-color: var(--secondary-color);\"> <h5 class=\"font-medium mb-2\">Get Comprehensive Blood Work<\/h5> <p class=\"text-gray-600 text-sm\">Schedule annual comprehensive blood panels including lipids, inflammatory markers, hormones, and metabolic indicators to guide personalized interventions.<\/p> <\/div> <\/div> <!-- Sleep Recommendations --> <div class=\"mb-8\"> <h4 class=\"text-lg font-medium text-yellow-700 mb-4\">Sleep<\/h4> <div class=\"recommendation-card\" style=\"border-left-color: var(--tertiary-color);\"> <h5 class=\"font-medium mb-2\">Establish Sleep Consistency<\/h5> <p class=\"text-gray-600 text-sm\">Maintain consistent sleep and wake times (even on weekends) to optimize circadian rhythm and deep sleep quality.<\/p> <\/div> <div class=\"recommendation-card\" style=\"border-left-color: var(--tertiary-color);\"> <h5 class=\"font-medium mb-2\">Optimize Sleep Environment<\/h5> <p class=\"text-gray-600 text-sm\">Create ideal sleep conditions: completely dark room, 65-68\u00b0F temperature, minimal noise, and no electronics 60 minutes before bedtime.<\/p> <\/div> <div class=\"recommendation-card\" style=\"border-left-color: var(--tertiary-color);\"> <h5 class=\"font-medium mb-2\">Monitor Sleep Quality<\/h5> <p class=\"text-gray-600 text-sm\">Consider using sleep tracking technology to measure deep sleep, REM sleep, and sleep efficiency to identify improvement opportunities.<\/p> <\/div> <\/div> <!-- Mental Health Recommendations --> <div> <h4 class=\"text-lg font-medium text-pink-700 mb-4\">Mental &#038; Emotional Health<\/h4> <div class=\"recommendation-card\" style=\"border-left-color: var(--quaternary-color);\"> <h5 class=\"font-medium mb-2\">Daily Meditation Practice<\/h5> <p class=\"text-gray-600 text-sm\">Implement 10-20 minutes of daily meditation or mindfulness practice to reduce stress, improve focus, and enhance emotional regulation.<\/p> <\/div> <div class=\"recommendation-card\" style=\"border-left-color: var(--quaternary-color);\"> <h5 class=\"font-medium mb-2\">Strengthen Social Connections<\/h5> <p class=\"text-gray-600 text-sm\">Prioritize meaningful social connections and community involvement, which are strongly correlated with longevity and reduced cognitive decline.<\/p> <\/div> <div class=\"recommendation-card\" style=\"border-left-color: var(--quaternary-color);\"> <h5 class=\"font-medium mb-2\">Purposeful Activities<\/h5> <p class=\"text-gray-600 text-sm\">Engage regularly in activities that provide meaning, purpose, and flow states to support cognitive health and psychological well-being.<\/p> <\/div> <\/div> <\/div> <\/section> <!-- Education Tab --> <section id=\"education-tab\" class=\"content-section hide\"> <div class=\"bg-white rounded-lg shadow p-6\"> <h3 class=\"text-xl font-semibold mb-6\">Longevity Education Center<\/h3> <p class=\"text-gray-600 mb-6\">Learn about the science behind Peter Attia&#8217;s Outlive principles and how they can help extend your healthspan.<\/p> <!-- Educational Content Accordions --> <div class=\"mb-8\"> <div class=\"border rounded-lg overflow-hidden mb-4\"> <div class=\"flex justify-between items-center p-4 bg-gray-50 cursor-pointer accordion-header\" data-target=\"exercise-content\"> <h4 class=\"text-lg font-medium\">Exercise Framework: The Four Pillars<\/h4> <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-300\"><\/i> <\/div> <div id=\"exercise-content\" class=\"p-4 accordion-content hide\"> <p class=\"text-gray-600 mb-4\">Peter Attia&#8217;s exercise framework is built on four essential pillars designed to optimize longevity and functional healthspan:<\/p> <h5 class=\"font-medium text-indigo-700 mb-2\">1. Stability<\/h5> <p class=\"text-gray-600 mb-4\">The foundation of all movement, stability ensures proper joint function, balance, and movement patterns. This pillar focuses on core strength, proprioception, and movement quality to prevent injuries and establish a base for all other physical activities.<\/p> <h5 class=\"font-medium text-indigo-700 mb-2\">2. Strength<\/h5> <p class=\"text-gray-600 mb-4\">Building and maintaining muscle mass is critical for longevity, as it supports metabolic health, functional independence, and injury prevention. Strength training should include compound movements, progressive overload, and exercises that mimic real-life movements.<\/p> <h5 class=\"font-medium text-indigo-700 mb-2\">3. Aerobic Efficiency (Zone 2)<\/h5> <p class=\"text-gray-600 mb-4\">Zone 2 training (60-70% of max heart rate) improves cardiovascular health, mitochondrial function, and metabolic flexibility. This type of training enhances the body&#8217;s ability to use fat as fuel and improves overall endurance and cellular health.<\/p> <h5 class=\"font-medium text-indigo-700 mb-2\">4. Anaerobic Performance (Zone 5)<\/h5> <p class=\"text-gray-600 mb-4\">High-intensity interval training improves VO2 max, growth hormone production, and overall metabolic function. These short, intense efforts complement Zone 2 training by targeting different energy systems and providing unique physiological benefits.<\/p> <div class=\"mt-4\"> <a href=\"#\" class=\"text-indigo-600 hover:text-indigo-800 font-medium\">Learn more about exercise for longevity \u2192<\/a> <\/div> <\/div> <\/div> <div class=\"border rounded-lg overflow-hidden mb-4\"> <div class=\"flex justify-between items-center p-4 bg-gray-50 cursor-pointer accordion-header\" data-target=\"nutrition-content\"> <h4 class=\"text-lg font-medium\">Nutritional Biochemistry<\/h4> <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-300\"><\/i> <\/div> <div id=\"nutrition-content\" class=\"p-4 accordion-content hide\"> <p class=\"text-gray-600 mb-4\">Attia&#8217;s approach to nutrition focuses on personalization based on biochemical individuality rather than prescribing a one-size-fits-all diet:<\/p> <h5 class=\"font-medium text-green-700 mb-2\">Metabolic Health<\/h5> <p class=\"text-gray-600 mb-4\">Maintaining optimal glucose control, insulin sensitivity, and metabolic flexibility is central to longevity. This may involve strategies like time-restricted feeding, carbohydrate management, and monitoring of glucose responses.<\/p> <h5 class=\"font-medium text-green-700 mb-2\">Nutrient Density<\/h5> <p class=\"text-gray-600 mb-4\">Prioritizing foods rich in micronutrients, phytonutrients, and essential fatty acids supports cellular health and reduces disease risk. Diverse vegetable intake is especially important for providing a wide spectrum of beneficial compounds.<\/p> <h5 class=\"font-medium text-green-700 mb-2\">Personalized Approach<\/h5> <p class=\"text-gray-600 mb-4\">Using blood biomarkers, genetic information, and individual responses to guide nutritional choices rather than following generic dietary guidelines. Regular testing helps refine and adjust the nutritional approach.<\/p> <h5 class=\"font-medium text-green-700 mb-2\">Fasting &#038; Time-Restricted Feeding<\/h5> <p class=\"text-gray-600 mb-4\">Strategic use of eating windows and fasting periods to promote autophagy, cellular repair, and metabolic health. This includes approaches like 16:8 fasting, periodic longer fasts, or personalized eating schedules.<\/p> <div class=\"mt-4\"> <a href=\"#\" class=\"text-green-600 hover:text-green-800 font-medium\">Learn more about nutrition for longevity \u2192<\/a> <\/div> <\/div> <\/div> <div class=\"border rounded-lg overflow-hidden mb-4\"> <div class=\"flex justify-between items-center p-4 bg-gray-50 cursor-pointer accordion-header\" data-target=\"sleep-content\"> <h4 class=\"text-lg font-medium\">Sleep Optimization<\/h4> <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-300\"><\/i> <\/div> <div id=\"sleep-content\" class=\"p-4 accordion-content hide\"> <p class=\"text-gray-600 mb-4\">Sleep quality and quantity are fundamental to nearly every aspect of health and longevity:<\/p> <h5 class=\"font-medium text-yellow-700 mb-2\">Sleep Architecture<\/h5> <p class=\"text-gray-600 mb-4\">Understanding and optimizing the different stages of sleep (deep sleep, REM sleep, light sleep) is crucial for cognitive function, emotional regulation, and physical recovery. Each stage provides unique benefits for brain and body health.<\/p> <h5 class=\"font-medium text-yellow-700 mb-2\">Circadian Rhythm Alignment<\/h5> <p class=\"text-gray-600 mb-4\">Maintaining consistent sleep-wake cycles aligned with natural light patterns optimizes hormonal function, metabolism, and cellular repair processes. This includes strategies for light exposure, meal timing, and activity scheduling.<\/p> <h5 class=\"font-medium text-yellow-700 mb-2\">Sleep Environment<\/h5> <p class=\"text-gray-600 mb-4\">Creating optimal conditions for sleep: complete darkness, cool temperature (65-68\u00b0F), minimal noise, comfortable bedding, and limited EMF exposure. These environmental factors significantly impact sleep quality and duration.<\/p> <h5 class=\"font-medium text-yellow-700 mb-2\">Sleep Hygiene Practices<\/h5> <p class=\"text-gray-600 mb-4\">Implementing behavioral and lifestyle practices that support quality sleep: avoiding screens before bed, limiting caffeine and alcohol, establishing pre-sleep routines, and managing stress through relaxation techniques.<\/p> <div class=\"mt-4\"> <a href=\"#\" class=\"text-yellow-600 hover:text-yellow-800 font-medium\">Learn more about sleep for longevity \u2192<\/a> <\/div> <\/div> <\/div> <div class=\"border rounded-lg overflow-hidden\"> <div class=\"flex justify-between items-center p-4 bg-gray-50 cursor-pointer accordion-header\" data-target=\"mental-content\"> <h4 class=\"text-lg font-medium\">Mental &#038; Emotional Wellbeing<\/h4> <i class=\"fas fa-chevron-down text-gray-500 transition-transform duration-300\"><\/i> <\/div> <div id=\"mental-content\" class=\"p-4 accordion-content hide\"> <p class=\"text-gray-600 mb-4\">Psychological and emotional health are powerful determinants of longevity and healthspan:<\/p> <h5 class=\"font-medium text-pink-700 mb-2\">Stress Management<\/h5> <p class=\"text-gray-600 mb-4\">Developing effective strategies to manage acute and chronic stress, which can otherwise accelerate aging and contribute to disease. This includes mindfulness practices, breathing techniques, and cognitive reframing.<\/p> <h5 class=\"font-medium text-pink-700 mb-2\">Social Connections<\/h5> <p class=\"text-gray-600 mb-4\">Building and maintaining meaningful relationships and social networks, which research consistently shows is one of the strongest predictors of longevity. Quality social connections provide emotional support, purpose, and cognitive stimulation.<\/p> <h5 class=\"font-medium text-pink-700 mb-2\">Purpose &#038; Meaning<\/h5> <p class=\"text-gray-600 mb-4\">Engaging in activities that provide a sense of purpose, meaning, and flow, which correlate strongly with both psychological wellbeing and physiological health markers. Having purpose is associated with reduced mortality risk across all age groups.<\/p> <h5 class=\"font-medium text-pink-700 mb-2\">Cognitive Health<\/h5> <p class=\"text-gray-600 mb-4\">Maintaining cognitive function through continuous learning, novel challenges, and neuroplasticity-promoting activities. Mental stimulation and cognitive training help preserve brain function and protect against neurodegenerative conditions.<\/p> <div class=\"mt-4\"> <a href=\"#\" class=\"text-pink-600 hover:text-pink-800 font-medium\">Learn more about mental wellbeing for longevity \u2192<\/a> <\/div> <\/div> <\/div> <\/div> <!-- Medicine 3.0 Section --> <div class=\"mb-8\"> <h4 class=\"text-lg font-medium mb-4\">Medicine 3.0: A New Paradigm<\/h4> <p class=\"text-gray-600 mb-4\">Peter Attia&#8217;s concept of Medicine 3.0 represents a shift from reactive treatment to proactive prevention and optimization:<\/p> <div class=\"grid grid-cols-1 md:grid-cols-3 gap-4 mt-6\"> <div class=\"bg-gray-50 p-4 rounded-lg\"> <h5 class=\"font-medium mb-2\">Medicine 1.0<\/h5> <p class=\"text-gray-600 text-sm\">Traditional approach focused on treating acute illness and infectious diseases after they occur.<\/p> <\/div> <div class=\"bg-gray-50 p-4 rounded-lg\"> <h5 class=\"font-medium mb-2\">Medicine 2.0<\/h5> <p class=\"text-gray-600 text-sm\">Current standard approach that manages chronic diseases but often fails to address root causes or prevention.<\/p> <\/div> <div class=\"bg-indigo-50 p-4 rounded-lg\"> <h5 class=\"font-medium mb-2\">Medicine 3.0<\/h5> <p class=\"text-gray-600 text-sm\">Proactive approach focused on extending healthspan through personalized prevention, early intervention, and optimization.<\/p> <\/div> <\/div> <div class=\"mt-6\"> <a href=\"#\" class=\"text-indigo-600 hover:text-indigo-800 font-medium\">Learn more about Medicine 3.0 \u2192<\/a> <\/div> <\/div> <\/div> <\/section> <!-- Trends & Insights Tab --> <section id=\"trends-tab\" class=\"content-section hide\"> <div class=\"bg-white rounded-lg shadow p-6\"> <h3 class=\"text-xl font-semibold mb-6\">Your Health Trends &#038; Insights<\/h3> <p class=\"text-gray-600 mb-6\">Track your progress over time and gain insights into your longevity journey.<\/p> <!-- Progress Chart --> <div class=\"mb-8\"> <h4 class=\"text-lg font-medium mb-4\">Longevity Score Trend<\/h4> <div class=\"chart-container\"> <canvas id=\"longevity-chart\"><\/canvas> <\/div> <div class=\"mt-4 text-sm text-gray-500 text-center\"> Last 6 months <\/div> <\/div> <!-- Pillar Progress --> <div class=\"mb-8\"> <h4 class=\"text-lg font-medium mb-4\">Pillar Progress<\/h4> <div class=\"grid grid-cols-1 md:grid-cols-2 gap-6\"> <!-- Exercise Progress --> <div class=\"bg-gray-50 p-4 rounded-lg\"> <h5 class=\"font-medium text-indigo-700 mb-3\">Exercise &#038; Physical Health<\/h5> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Strength Training<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 85%; background-color: var(--primary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">85%<\/span> <\/div> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Zone 2 Training<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 70%; background-color: var(--primary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">70%<\/span> <\/div> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Stability<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 65%; background-color: var(--primary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">65%<\/span> <\/div> <div class=\"flex items-center\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Zone 5\/HIIT<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 50%; background-color: var(--primary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">50%<\/span> <\/div> <\/div> <!-- Nutrition Progress --> <div class=\"bg-gray-50 p-4 rounded-lg\"> <h5 class=\"font-medium text-green-700 mb-3\">Nutritional Biochemistry<\/h5> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Nutrient Density<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 75%; background-color: var(--secondary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">75%<\/span> <\/div> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Time-Restricted Feeding<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 60%; background-color: var(--secondary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">60%<\/span> <\/div> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Processed Food Avoidance<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 55%; background-color: var(--secondary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">55%<\/span> <\/div> <div class=\"flex items-center\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Biomarker Tracking<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 40%; background-color: var(--secondary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">40%<\/span> <\/div> <\/div> <!-- Sleep Progress --> <div class=\"bg-gray-50 p-4 rounded-lg\"> <h5 class=\"font-medium text-yellow-700 mb-3\">Sleep<\/h5> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Sleep Duration<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 80%; background-color: var(--tertiary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">80%<\/span> <\/div> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Sleep Environment<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 70%; background-color: var(--tertiary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">70%<\/span> <\/div> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Sleep Consistency<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 60%; background-color: var(--tertiary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">60%<\/span> <\/div> <div class=\"flex items-center\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Sleep Quality<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 75%; background-color: var(--tertiary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">75%<\/span> <\/div> <\/div> <!-- Mental Health Progress --> <div class=\"bg-gray-50 p-4 rounded-lg\"> <h5 class=\"font-medium text-pink-700 mb-3\">Mental &#038; Emotional Health<\/h5> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Mindfulness Practice<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 65%; background-color: var(--quaternary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">65%<\/span> <\/div> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Social Connections<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 85%; background-color: var(--quaternary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">85%<\/span> <\/div> <div class=\"flex items-center mb-2\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Stress Management<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 60%; background-color: var(--quaternary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">60%<\/span> <\/div> <div class=\"flex items-center\"> <div class=\"w-full mr-4\"> <div class=\"text-xs font-medium text-gray-500 mb-1\">Purpose &#038; Meaning<\/div> <div class=\"progress-bar\"> <div class=\"progress\" style=\"width: 80%; background-color: var(--quaternary-color);\"><\/div> <\/div> <\/div> <span class=\"text-sm font-medium\">80%<\/span> <\/div> <\/div> <\/div> <\/div> <!-- Key Insights --> <div> <h4 class=\"text-lg font-medium mb-4\">Key Insights<\/h4> <div class=\"grid grid-cols-1 md:grid-cols-2 gap-4\"> <div class=\"bg-indigo-50 p-4 rounded-lg\"> <h5 class=\"font-medium mb-2\">Strongest Areas<\/h5> <ul class=\"text-gray-600 text-sm list-disc list-inside\"> <li>Social connections are a significant strength<\/li> <li>Sleep duration is consistently optimal<\/li> <li>Strength training frequency is excellent<\/li> <li>Purpose &#038; meaning score is high<\/li> <\/ul> <\/div> <div class=\"bg-amber-50 p-4 rounded-lg\"> <h5 class=\"font-medium mb-2\">Areas for Improvement<\/h5> <ul class=\"text-gray-600 text-sm list-disc list-inside\"> <li>Zone 5\/HIIT training frequency is low<\/li> <li>Biomarker tracking needs attention<\/li> <li>Time-restricted feeding implementation<\/li> <li>Sleep consistency could be improved<\/li> <\/ul> <\/div> <\/div> <\/div> <\/div> <\/section> <\/div> <\/main> <!-- Settings Modal --> <div id=\"settings-modal\" class=\"fixed inset-0 flex items-center justify-center z-50 hide\"> <div class=\"absolute inset-0 bg-black opacity-50\"><\/div> <div class=\"bg-white rounded-lg shadow-lg z-10 w-full max-w-md p-6\"> <div class=\"flex justify-between items-center mb-6\"> <h3 class=\"text-xl font-semibold\">App Settings<\/h3> <button id=\"close-settings\" class=\"text-gray-500 hover:text-gray-700\"> <i class=\"fas fa-times\"><\/i> <\/button> <\/div> <div class=\"mb-6\"> <h4 class=\"text-lg font-medium mb-4\">Appearance<\/h4> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Primary Color<\/label> <input type=\"color\" id=\"primary-color\" value=\"#4F46E5\" class=\"w-full h-10 rounded border\"> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Secondary Color<\/label> <input type=\"color\" id=\"secondary-color\" value=\"#10B981\" class=\"w-full h-10 rounded border\"> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Tertiary Color<\/label> <input type=\"color\" id=\"tertiary-color\" value=\"#F59E0B\" class=\"w-full h-10 rounded border\"> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Quaternary Color<\/label> <input type=\"color\" id=\"quaternary-color\" value=\"#EC4899\" class=\"w-full h-10 rounded border\"> <\/div> <\/div> <div class=\"mb-6\"> <h4 class=\"text-lg font-medium mb-4\">User Information<\/h4> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Chronological Age<\/label> <input type=\"number\" id=\"user-age\" value=\"42\" min=\"18\" max=\"100\" class=\"w-full p-2 border rounded\"> <\/div> <div class=\"mb-4\"> <label class=\"block text-gray-700 mb-2\">Biological Age (if known)<\/label> <input type=\"number\" id=\"biological-age-input\" value=\"35\" min=\"18\" max=\"100\" class=\"w-full p-2 border rounded\"> <\/div> <\/div> <div class=\"mb-6\"> <h4 class=\"text-lg font-medium mb-4\">Data Management<\/h4> <div class=\"mb-4\"> <button id=\"export-data\" class=\"w-full py-2 px-4 bg-gray-200 text-gray-800 rounded hover:bg-gray-300\"> Export Your Data <\/button> <\/div> <div> <button id=\"reset-data\" class=\"w-full py-2 px-4 bg-red-100 text-red-800 rounded hover:bg-red-200\"> Reset All Data <\/button> <\/div> <\/div> <div class=\"flex justify-end\"> <button id=\"save-settings\" class=\"btn-primary\">Save Settings<\/button> <\/div> <\/div> <\/div> <\/div> <!-- Include Chart.js from CDN --> <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/chart.js@3.7.1\/dist\/chart.min.js\"><\/script> <script> document.addEventListener('DOMContentLoaded', function() { \/\/ Initialize variables let longevityScore = 75; let pillarScores = { 1: 80, 2: 65, 3: 75, 4: 70 }; \/\/ Tab switching functionality const tabs = document.querySelectorAll('.tab'); const contentSections = document.querySelectorAll('.content-section'); tabs.forEach(tab => { tab.addEventListener('click', () => { const tabId = tab.getAttribute('data-tab'); \/\/ Remove active class from all tabs and sections tabs.forEach(t => t.classList.remove('active')); contentSections.forEach(section => { section.classList.remove('active'); section.classList.add('hide'); }); \/\/ Add active class to clicked tab and corresponding section tab.classList.add('active'); document.getElementById(`${tabId}-tab`).classList.add('active'); document.getElementById(`${tabId}-tab`).classList.remove('hide'); \/\/ Initialize chart if trends tab is selected if (tabId === 'trends') { initChart(); } }); }); \/\/ Slider value display const sliders = document.querySelectorAll('.slider'); sliders.forEach(slider => { const valueSpan = document.getElementById(`${slider.id}-value`); \/\/ Initialize with current value updateSliderValue(slider, valueSpan); \/\/ Update on input slider.addEventListener('input', () => { updateSliderValue(slider, valueSpan); }); }); function updateSliderValue(slider, valueSpan) { if (slider.id === 'strength-days') { valueSpan.textContent = `${slider.value} days`; } else if (slider.id === 'cardio-minutes') { valueSpan.textContent = `${slider.value} minutes`; } else if (slider.id === 'vegetable-servings') { valueSpan.textContent = `${slider.value} servings`; } else if (slider.id === 'sleep-hours') { valueSpan.textContent = `${slider.value} hours`; } else if (slider.id === 'stress-level') { const stressLevels = ['Very Low', 'Low', 'Low-Moderate', 'Moderate', 'Moderate', 'Moderate', 'Moderate-High', 'High', 'Very High', 'Extreme']; valueSpan.textContent = `${stressLevels[slider.value-1]} (${slider.value}\/10)`; } } \/\/ Assessment form submission const assessmentForm = document.getElementById('assessment-form'); assessmentForm.addEventListener('submit', function(e) { e.preventDefault(); \/\/ Calculate scores based on form inputs calculateScores(); \/\/ Update dashboard updateDashboard(); \/\/ Switch to recommendations tab document.querySelector('[data-tab=\"recommendations\"]').click(); \/\/ Show success message alert('Your Longevity Score has been updated!'); }); \/\/ Pillar updates const updateButtons = document.querySelectorAll('.update-pillar'); updateButtons.forEach(button => { button.addEventListener('click', () => { const pillarId = button.getAttribute('data-pillar'); document.querySelector('[data-tab=\"assessment\"]').click(); \/\/ Scroll to the corresponding section const pillarHeadings = document.querySelectorAll('#assessment-form h4'); pillarHeadings[pillarId-1].scrollIntoView({ behavior: 'smooth', block: 'start' }); }); }); \/\/ Accordion functionality const accordionHeaders = document.querySelectorAll('.accordion-header'); accordionHeaders.forEach(header => { header.addEventListener('click', () => { const targetId = header.getAttribute('data-target'); const content = document.getElementById(targetId); const icon = header.querySelector('i'); \/\/ Toggle content content.classList.toggle('hide'); \/\/ Toggle icon if (content.classList.contains('hide')) { icon.style.transform = 'rotate(0deg)'; } else { icon.style.transform = 'rotate(180deg)'; } }); }); \/\/ Settings modal const settingsBtn = document.getElementById('settings-btn'); const settingsModal = document.getElementById('settings-modal'); const closeSettings = document.getElementById('close-settings'); const saveSettings = document.getElementById('save-settings'); settingsBtn.addEventListener('click', () => { settingsModal.classList.remove('hide'); }); closeSettings.addEventListener('click', () => { settingsModal.classList.add('hide'); }); saveSettings.addEventListener('click', () => { \/\/ Save color settings const primaryColor = document.getElementById('primary-color').value; const secondaryColor = document.getElementById('secondary-color').value; const tertiaryColor = document.getElementById('tertiary-color').value; const quaternaryColor = document.getElementById('quaternary-color').value; \/\/ Update CSS variables document.documentElement.style.setProperty('--primary-color', primaryColor); document.documentElement.style.setProperty('--secondary-color', secondaryColor); document.documentElement.style.setProperty('--tertiary-color', tertiaryColor); document.documentElement.style.setProperty('--quaternary-color', quaternaryColor); \/\/ Update user info const userAge = document.getElementById('user-age').value; const bioAge = document.getElementById('biological-age-input').value; document.getElementById('chronological-age').textContent = userAge; document.getElementById('biological-age').textContent = bioAge; \/\/ Close modal settingsModal.classList.add('hide'); \/\/ Update dashboard with new colors updateDashboard(); }); \/\/ Export Data functionality document.getElementById('export-data').addEventListener('click', () => { const data = { longevityScore: longevityScore, pillarScores: pillarScores, chronologicalAge: document.getElementById('chronological-age').textContent, biologicalAge: document.getElementById('biological-age').textContent, lastUpdated: document.getElementById('last-updated').textContent }; const dataStr = \"data:text\/json;charset=utf-8,\" + encodeURIComponent(JSON.stringify(data, null, 2)); const downloadAnchorNode = document.createElement('a'); downloadAnchorNode.setAttribute(\"href\", dataStr); downloadAnchorNode.setAttribute(\"download\", \"outlive_longevity_data.json\"); document.body.appendChild(downloadAnchorNode); downloadAnchorNode.click(); downloadAnchorNode.remove(); }); \/\/ Reset Data functionality document.getElementById('reset-data').addEventListener('click', () => { if (confirm('Are you sure you want to reset all your data? This action cannot be undone.')) { \/\/ Reset scores longevityScore = 50; pillarScores = { 1: 50, 2: 50, 3: 50, 4: 50 }; \/\/ Reset form inputs assessmentForm.reset(); \/\/ Update dashboard updateDashboard(); \/\/ Reset sliders sliders.forEach(slider => { const valueSpan = document.getElementById(`${slider.id}-value`); updateSliderValue(slider, valueSpan); }); alert('Your data has been reset.'); } }); \/\/ Initialize chart for trends tab function initChart() { const ctx = document.getElementById('longevity-chart').getContext('2d'); if (window.longevityChart) { window.longevityChart.destroy(); } window.longevityChart = new Chart(ctx, { type: 'line', data: { labels: ['6 months ago', '5 months ago', '4 months ago', '3 months ago', '2 months ago', '1 month ago', 'Today'], datasets: [{ label: 'Longevity Score', data: [62, 65, 68, 70, 72, 74, longevityScore], backgroundColor: 'rgba(79, 70, 229, 0.2)', borderColor: 'rgba(79, 70, 229, 1)', borderWidth: 2, tension: 0.3, pointBackgroundColor: 'rgba(79, 70, 229, 1)' }] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: false, min: 50, max: 100 } }, plugins: { legend: { display: false } } } }); } \/\/ Function to calculate scores based on assessment function calculateScores() { \/\/ Exercise score calculation const strengthDays = parseInt(document.getElementById('strength-days').value); const cardioMinutes = parseInt(document.getElementById('cardio-minutes').value); const stabilityChecks = document.querySelectorAll('[id^=\"stability-\"]:checked').length; const hiitValue = document.querySelector('input[name=\"hiit\"]:checked').value === 'yes' ? 1 : 0; const exerciseScore = Math.min(100, (((strengthDays \/ 5) * 25) + ((cardioMinutes \/ 150) * 25) + ((stabilityChecks \/ 4) * 25) + (hiitValue * 25))); \/\/ Nutrition score calculation const vegetableServings = parseInt(document.getElementById('vegetable-servings').value); const trfValue = document.querySelector('input[name=\"time-restricted-feeding\"]:checked').value === 'yes' ? 1 : 0; const processedFoodsValue = parseInt(document.getElementById('processed-foods').value); const bloodworkValue = document.querySelector('input[name=\"bloodwork\"]:checked').value === 'yes' ? 1 : 0; const nutritionScore = Math.min(100, (((vegetableServings \/ 8) * 25) + (trfValue * 25) + ((processedFoodsValue \/ 5) * 25) + (bloodworkValue * 25))); \/\/ Sleep score calculation const sleepHours = parseFloat(document.getElementById('sleep-hours').value); const sleepScheduleValue = document.querySelector('input[name=\"sleep-schedule\"]:checked').value === 'yes' ? 1 : 0; const sleepPracticesChecks = document.querySelectorAll('[id^=\"sleep-\"]:checked').length; const sleepQualityFactor = sleepHours >= 7 && sleepHours <= 9 ? 1 : (sleepHours >= 6 && sleepHours < 7) || (sleepHours > 9 && sleepHours <= 10) ? 0.75 : 0.5; const sleepScore = Math.min(100, ((sleepQualityFactor * 40) + (sleepScheduleValue * 30) + ((sleepPracticesChecks \/ 4) * 30))); \/\/ Mental health score calculation const mindfulnessValue = parseInt(document.getElementById('mindfulness').value); const socialValue = document.querySelector('input[name=\"social\"]:checked').value === 'yes' ? 1 : 0; const stressLevel = 10 - parseInt(document.getElementById('stress-level').value); \/\/ Invert so lower stress = higher score const purposeValue = document.querySelector('input[name=\"purpose\"]:checked').value === 'yes' ? 1 : 0; const mentalScore = Math.min(100, (((mindfulnessValue \/ 5) * 25) + (socialValue * 25) + ((stressLevel \/ 10) * 25) + (purposeValue * 25))); \/\/ Update pillar scores pillarScores = { 1: Math.round(exerciseScore), 2: Math.round(nutritionScore), 3: Math.round(sleepScore), 4: Math.round(mentalScore) }; \/\/ Calculate overall longevity score (weighted average) longevityScore = Math.round((pillarScores[1] + pillarScores[2] + pillarScores[3] + pillarScores[4]) \/ 4); \/\/ Update biological age calculation (rough estimate) const chronologicalAge = parseInt(document.getElementById('chronological-age').textContent); const ageDifference = Math.round((100 - longevityScore) \/ 7); const calculatedBioAge = Math.max(20, chronologicalAge - (8 - ageDifference)); document.getElementById('biological-age').textContent = calculatedBioAge; } \/\/ Function to update dashboard function updateDashboard() { \/\/ Update longevity score document.getElementById('longevity-score').textContent = longevityScore; document.getElementById('score-circle').setAttribute('stroke-dasharray', `${longevityScore}, 100`); \/\/ Update pillar scores and progress bars for (let i = 1; i <= 4; i++) { document.getElementById(`pillar${i}-score`).textContent = `${pillarScores[i]}%`; document.getElementById(`pillar${i}-progress`).style.width = `${pillarScores[i]}%`; } \/\/ Update last updated date const now = new Date(); const options = { year: 'numeric', month: 'long', day: 'numeric' }; document.getElementById('last-updated').textContent = now.toLocaleDateString('en-US', options); } \/\/ Initialize the dashboard updateDashboard(); }); <\/script> \n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Optimera din h\u00e4lsa med v\u00e5r livsl\u00e4ngdstracker, baserad p\u00e5 Peter Attias Outlive-principer, som omfattar tr\u00e4ning, kost, s\u00f6mn och mental h\u00e4lsa. Den h\u00e4r appen \u00e4r inofficiell och inte ansluten till f\u00f6rfattaren eller utgivaren. F\u00e5 en detaljerad sammanfattning h\u00e4r. Din instrumentpanel f\u00f6r livsl\u00e4ngd Senast uppdaterad: Idag Din livsl\u00e4ngdspo\u00e4ng Baserat p\u00e5 din bed\u00f6mning av de fyra pelarna 75 \/...<\/p>","protected":false},"author":13,"featured_media":93573,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kadence_starter_templates_imported_post":false,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"fullwidth","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"yasr_overall_rating":0,"yasr_post_is_review":"","yasr_auto_insert_disabled":"","yasr_review_type":"","footnotes":""},"categories":[4480],"tags":[],"class_list":["post-97691","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-health-fitness"],"acf":[],"yasr_visitor_votes":{"stars_attributes":{"read_only":false,"span_bottom":false},"number_of_votes":0,"sum_votes":0},"taxonomy_info":{"category":[{"value":4480,"label":"Health &amp; Fitness"}]},"featured_image_src_large":["https:\/\/www.getstoryshots.com\/wp-content\/uploads\/Outlive-book-summary-1024x536.png",1024,536,true],"author_info":{"display_name":"Team StoryShots","author_link":"https:\/\/www.getstoryshots.com\/sv\/books\/author\/fuzr6koxtahlfjcigcjjuadpexy2\/"},"comment_info":0,"category_info":[{"term_id":4480,"name":"Health &amp; Fitness","slug":"health-fitness","term_group":0,"term_taxonomy_id":4480,"taxonomy":"category","description":"","parent":0,"count":45,"filter":"raw","cat_ID":4480,"category_count":45,"category_description":"","cat_name":"Health &amp; Fitness","category_nicename":"health-fitness","category_parent":0}],"tag_info":false,"_links":{"self":[{"href":"https:\/\/www.getstoryshots.com\/sv\/wp-json\/wp\/v2\/posts\/97691","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.getstoryshots.com\/sv\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.getstoryshots.com\/sv\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.getstoryshots.com\/sv\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.getstoryshots.com\/sv\/wp-json\/wp\/v2\/comments?post=97691"}],"version-history":[{"count":9,"href":"https:\/\/www.getstoryshots.com\/sv\/wp-json\/wp\/v2\/posts\/97691\/revisions"}],"predecessor-version":[{"id":97825,"href":"https:\/\/www.getstoryshots.com\/sv\/wp-json\/wp\/v2\/posts\/97691\/revisions\/97825"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.getstoryshots.com\/sv\/wp-json\/wp\/v2\/media\/93573"}],"wp:attachment":[{"href":"https:\/\/www.getstoryshots.com\/sv\/wp-json\/wp\/v2\/media?parent=97691"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.getstoryshots.com\/sv\/wp-json\/wp\/v2\/categories?post=97691"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.getstoryshots.com\/sv\/wp-json\/wp\/v2\/tags?post=97691"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}