All Prompts
All Prompts

healthprogresscircularheart-ratemetriccard
Heart Rate Progress Card
Карта прогресса пульса: круговой индикатор ЧСС с градиентным кольцом для отслеживания здоровья. Отображает текущий пульс в BPM.
Prompt
<div class="ring-1 ring-stone-200 h-44 bg-white rounded-3xl p-5 shadow-sm">
<div class="flex items-center justify-between">
<p class="text-sm font-medium text-stone-500">Heart Rate</p>
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" class="h-4 w-4 text-rose-500">
<path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"></path>
</svg>
</div>
<div class="mt-4 flex items-center justify-center">
<div class="relative h-24 w-24">
<div class="absolute inset-0 rounded-full bg-[conic-gradient(var(--tw-gradient-stops))] from-rose-400 via-orange-300 to-amber-400"></div>
<div class="absolute inset-1 rounded-full bg-white"></div>
<div class="absolute inset-0 flex items-center justify-center">
<div class="text-center">
<p class="text-xl font-semibold tracking-tight">120</p>
<p class="text-xs text-stone-500">BPM</p>
</div>
</div>
</div>
</div>
</div>