44 lines
2.5 KiB
HTML
44 lines
2.5 KiB
HTML
{% if muscle_distribution %}
|
|
<div class="px-4 py-3 bg-white" id="muscle-breakdown"
|
|
hx-get="{{ url_for('workout.get_workout_muscle_distribution', person_id=person_id, workout_id=workout_id) }}"
|
|
hx-trigger="topsetAdded from:body" hx-swap="outerHTML">
|
|
|
|
<div class="flex items-center justify-between mb-2">
|
|
<h4 class="text-[9px] font-black text-gray-400 uppercase tracking-[0.25em]">Muscle Distribution</h4>
|
|
</div>
|
|
|
|
<!-- Sleek Performance Bar -->
|
|
<div class="w-full h-8 flex overflow-hidden rounded-lg bg-gray-100 shadow-inner p-0.5">
|
|
{% for item in muscle_distribution %}
|
|
<div class="h-full transition-all duration-700 ease-in-out flex items-center justify-center relative group first:rounded-l-md last:rounded-r-md"
|
|
style="width: {{ item.percentage }}%; background-color: {{ item.color }};">
|
|
|
|
<!-- Labels with optimized typography -->
|
|
<div
|
|
class="flex items-center justify-center gap-1 leading-none text-white pointer-events-none px-1 overflow-hidden">
|
|
{% if item.percentage > 15 %}
|
|
<span class="text-[9px] font-black uppercase tracking-tighter truncate drop-shadow-sm">{{
|
|
item.muscle_group }}</span>
|
|
<span class="text-[9px] font-bold opacity-90 whitespace-nowrap">{{ item.percentage }}%</span>
|
|
{% elif item.percentage > 8 %}
|
|
<span class="text-[9px] font-black drop-shadow-sm">{{ item.percentage }}%</span>
|
|
{% endif %}
|
|
</div>
|
|
|
|
<!-- Enhanced Hover State -->
|
|
<div class="absolute inset-0 bg-white/15 opacity-0 group-hover:opacity-100 transition-opacity cursor-help">
|
|
</div>
|
|
|
|
<!-- Precision Tooltip -->
|
|
<div
|
|
class="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 bg-gray-900/95 backdrop-blur-sm text-white text-[9px] font-black rounded opacity-0 group-hover:opacity-100 transition-all transform translate-y-1 group-hover:translate-y-0 whitespace-nowrap z-20 pointer-events-none shadow-lg border border-white/5 uppercase tracking-wider">
|
|
{{ item.muscle_group }} <span class="mx-1 opacity-40">•</span> {{ item.percentage }}%
|
|
<div
|
|
class="absolute top-full left-1/2 -translate-x-1/2 -mt-1 border-4 border-transparent border-t-gray-900/95">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %} |