made ui chnages
This commit is contained in:
bolade
+69
-280
@@ -1,7 +1,5 @@
|
||||
<div class="w-full page bg-white">
|
||||
<!-- Header Section -->
|
||||
<!-- main content -->
|
||||
<div class="px-2 py-6">
|
||||
<div class="px-1 py-6">
|
||||
<!-- Page Title -->
|
||||
<h1 class="text-2xl font-bold text-black mb-6 text-center">
|
||||
Weekly Meal Plan Breakdown
|
||||
@@ -15,131 +13,38 @@
|
||||
|
||||
<!-- Weekly Grid -->
|
||||
<div class="grid grid-cols-7 gap-0 mb-6">
|
||||
<!-- Monday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Monday
|
||||
{% set days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'] %}
|
||||
{% for i in range(7) %}
|
||||
<div
|
||||
class="border border-gray-300 text-center
|
||||
{% if i == 0 %} rounded-tl-lg rounded-bl-lg {% endif %}
|
||||
{% if i == 6 %} rounded-tr-lg rounded-br-lg {% endif %}
|
||||
{% if i < 5 %} bg-cyan-300 {% else %} bg-white {% endif %}"
|
||||
style="padding: 0"
|
||||
>
|
||||
<!-- Day Row (Always blue) -->
|
||||
<div class="bg-blue-300
|
||||
{% if i == 0 %} rounded-tl-lg {% endif %}
|
||||
{% if i == 6 %} rounded-tr-lg {% endif %}
|
||||
text-black text-sm font-bold px-2 py-1"
|
||||
style="border-top-left-radius: {% if i == 0 %}0.5rem{% else %}0{% endif %}; border-top-right-radius: {% if i == 6 %}0.5rem{% else %}0{% endif %};"
|
||||
>
|
||||
{{ days[i] }}
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ deficit_calories | default('1725KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>
|
||||
{{ deficit_protein | default('120g Protein') }}
|
||||
<!-- Macro Body (fills to the bottom, cyan or white) -->
|
||||
<div class="flex flex-col items-center py-1 px-2">
|
||||
<div class="font-bold text-sm text-black mb-1">
|
||||
{{ deficit_calories | default('1725KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>{{ deficit_protein | default('120g Protein') }}</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tuesday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Tuesday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ deficit_calories | default('1725KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>
|
||||
{{ deficit_protein | default('120g Protein') }}
|
||||
</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wednesday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Wednesday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ deficit_calories | default('1725KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>
|
||||
{{ deficit_protein | default('120g Protein') }}
|
||||
</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thursday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Thursday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ deficit_calories | default('1725KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>
|
||||
{{ deficit_protein | default('120g Protein') }}
|
||||
</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Friday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Friday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ deficit_calories | default('1725KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>
|
||||
{{ deficit_protein | default('120g Protein') }}
|
||||
</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Saturday -->
|
||||
<div class="bg-white p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Saturday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ deficit_calories | default('1725KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>
|
||||
{{ deficit_protein | default('120g Protein') }}
|
||||
</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sunday -->
|
||||
<div class="bg-white p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Sunday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ deficit_calories | default('1725KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>
|
||||
{{ deficit_protein | default('120g Protein') }}
|
||||
</div>
|
||||
<div>{{ deficit_carbs | default('155g Carbs') }}</div>
|
||||
<div>{{ deficit_fat | default('69g Fat') }}</div>
|
||||
<div>{{ deficit_fiber | default('25g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -151,166 +56,50 @@
|
||||
|
||||
<!-- Weekly Grid -->
|
||||
<div class="grid grid-cols-7 gap-0 mb-6">
|
||||
<!-- Monday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Monday
|
||||
{% for i in range(7) %}
|
||||
<div class="border border-gray-300 text-center
|
||||
{% if i == 0 %} rounded-tl-lg rounded-bl-lg {% endif %}
|
||||
{% if i == 6 %} rounded-tr-lg rounded-br-lg {% endif %}
|
||||
{% if i < 5 %} bg-cyan-300 {% else %} bg-white {% endif %}"
|
||||
style="padding: 0"
|
||||
>
|
||||
<!-- Day Row (Always blue) -->
|
||||
<div class="bg-blue-300
|
||||
{% if i == 0 %} rounded-tl-lg {% endif %}
|
||||
{% if i == 6 %} rounded-tr-lg {% endif %}
|
||||
text-black text-sm font-bold px-2 py-1"
|
||||
style="border-top-left-radius: {% if i == 0 %}0.5rem{% else %}0{% endif %}; border-top-right-radius: {% if i == 6 %}0.5rem{% else %}0{% endif %};"
|
||||
>
|
||||
{{ days[i] }}
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ refeed_weekday_calories | default('1615KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>
|
||||
{{ refeed_weekday_protein | default('120g Protein')
|
||||
}}
|
||||
<!-- Macro Body (fills to the bottom, cyan or white) -->
|
||||
{% if i < 5 %}
|
||||
<div class="flex flex-col items-center py-1 px-2">
|
||||
<div class="font-bold text-sm text-black mb-1">
|
||||
{{ refeed_weekday_calories | default('1615KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>{{ refeed_weekday_protein | default('120g Protein') }}</div>
|
||||
<div>{{ refeed_weekday_carbs | default('142g Carbs') }}</div>
|
||||
<div>{{ refeed_weekday_fat | default('63g Fat') }}</div>
|
||||
<div>{{ refeed_weekday_fiber | default('24g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
{{ refeed_weekday_carbs | default('142g Carbs') }}
|
||||
{% else %}
|
||||
<div class="flex flex-col items-center py-1 px-2">
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ refeed_weekend_calories | default('2000KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>{{ refeed_weekend_protein | default('120g Protein') }}</div>
|
||||
<div>{{ refeed_weekend_carbs | default('190g Carbs') }}</div>
|
||||
<div>{{ refeed_weekend_fat | default('84g Fat') }}</div>
|
||||
<div>{{ refeed_weekend_fiber | default('30g Fibre') }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>{{ refeed_weekday_fat | default('63g Fat') }}</div>
|
||||
<div>
|
||||
{{ refeed_weekday_fiber | default('24g Fibre') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tuesday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Tuesday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ refeed_weekday_calories | default('1615KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight text-left">
|
||||
<div>
|
||||
{{ refeed_weekday_protein | default('120g Protein')
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
{{ refeed_weekday_carbs | default('142g Carbs') }}
|
||||
</div>
|
||||
<div>{{ refeed_weekday_fat | default('63g Fat') }}</div>
|
||||
<div>
|
||||
{{ refeed_weekday_fiber | default('24g Fibre') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Wednesday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Wednesday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ refeed_weekday_calories | default('1615KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight">
|
||||
<div>
|
||||
{{ refeed_weekday_protein | default('120g Protein')
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
{{ refeed_weekday_carbs | default('142g Carbs') }}
|
||||
</div>
|
||||
<div>{{ refeed_weekday_fat | default('63g Fat') }}</div>
|
||||
<div>
|
||||
{{ refeed_weekday_fiber | default('24g Fibre') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Thursday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Thursday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ refeed_weekday_calories | default('1615KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight">
|
||||
<div>
|
||||
{{ refeed_weekday_protein | default('120g Protein')
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
{{ refeed_weekday_carbs | default('142g Carbs') }}
|
||||
</div>
|
||||
<div>{{ refeed_weekday_fat | default('63g Fat') }}</div>
|
||||
<div>
|
||||
{{ refeed_weekday_fiber | default('24g Fibre') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Friday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Friday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ refeed_weekday_calories | default('1615KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight">
|
||||
<div>
|
||||
{{ refeed_weekday_protein | default('120g Protein')
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
{{ refeed_weekday_carbs | default('142g Carbs') }}
|
||||
</div>
|
||||
<div>{{ refeed_weekday_fat | default('63g Fat') }}</div>
|
||||
<div>
|
||||
{{ refeed_weekday_fiber | default('24g Fibre') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Saturday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Saturday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ refeed_weekend_calories | default('2000KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight">
|
||||
<div>
|
||||
{{ refeed_weekend_protein | default('120g Protein')
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
{{ refeed_weekend_carbs | default('190g Carbs') }}
|
||||
</div>
|
||||
<div>{{ refeed_weekend_fat | default('84g Fat') }}</div>
|
||||
<div>
|
||||
{{ refeed_weekend_fiber | default('30g Fibre') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Sunday -->
|
||||
<div class="bg-cyan-300 p-2 text-center border border-gray-300">
|
||||
<div class="text-[10px] font-bold text-black mb-1 bg-blue-300">
|
||||
Sunday
|
||||
</div>
|
||||
<div class="font-bold text-black mb-1">
|
||||
{{ refeed_weekend_calories | default('2000KCals') }}
|
||||
</div>
|
||||
<div class="text-xs text-black leading-tight">
|
||||
<div>
|
||||
{{ refeed_weekend_protein | default('120g Protein')
|
||||
}}
|
||||
</div>
|
||||
<div>
|
||||
{{ refeed_weekend_carbs | default('190g Carbs') }}
|
||||
</div>
|
||||
<div>{{ refeed_weekend_fat | default('84g Fat') }}</div>
|
||||
<div>
|
||||
{{ refeed_weekend_fiber | default('30g Fibre') }}
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user