All Prompts
All Prompts
uisectiondashboardtailwindanalyticsfitnessresponsiveinteractive
Fitness Dashboard Hero UI with Stats Cards
Hero UI фитнес-дашборда с картами статистики. Аналитика, пульс, сессии, дистанция, вес. Tailwind CSS, WebGL фон.
Prompt
<div
class="bg-[#121212] text-[#E0E0E0] font-sans antialiased min-h-screen flex items-center justify-center p-4 md:p-8 relative overflow-x-hidden"
style="font-family: 'Inter', sans-serif;">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://code.iconify.design/iconify-icon/1.0.7/iconify-icon.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<!-- Animated Noise Overlay -->
<canvas id="noiseCanvas"
class="pointer-events-none fixed inset-0 z-50 opacity-[0.08] mix-blend-screen w-full h-full"></canvas>
<!-- Main Dashboard Grid -->
<main class="grid grid-cols-1 md:grid-cols-4 gap-4 md:gap-5 max-w-[1024px] w-full relative z-10">
<!-- Hero Card -->
<section
class="col-span-1 md:col-span-2 md:row-span-2 rounded-[2rem] relative overflow-hidden flex flex-col justify-end min-h-[300px] md:min-h-0"
style="box-shadow: 0 20px 40px -10px rgba(0,0,0,0.9), inset 0 1px 1px rgba(255,255,255,0.15), 0 0 0 1px rgba(0,0,0,0.8); background-image: url('https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/eca707cc-a5b7-439a-b4fd-247f6106c2e1_800w.jpg'); background-size: cover; background-position: center;">
<div class="absolute inset-0 bg-gradient-to-t from-[#0A0A0A]/95 via-[#0A0A0A]/40 to-transparent"></div>
<div class="relative z-10 p-8 flex justify-between items-end w-full">
<h1 class="text-[#F5F5F5] text-3xl md:text-4xl font-light tracking-tight leading-[1.1]"
style="text-shadow: 0 2px 4px rgba(0,0,0,0.8);">OPTIMIZE<br>YOUR ROUTINE</h1>
<div
class="bg-gradient-to-b from-[#3A3A3A] to-[#1A1A1A] text-[#E88D5D] rounded-full w-12 h-12 flex items-center justify-center transition-transform hover:scale-105 cursor-pointer active:scale-95"
style="box-shadow: 0 8px 16px rgba(0,0,0,0.8), inset 0 2px 2px rgba(255,255,255,0.2), inset 0 -2px 4px rgba(0,0,0,0.6), 0 0 0 1px rgba(0,0,0,0.9);">
<iconify-icon icon="solar:bolt-linear" width="1.5rem"></iconify-icon>
</div>
</div>
</section>
<!-- Metrics Overview -->
<section class="col-span-1 md:col-span-2 rounded-[2rem] p-7 flex flex-col gap-6"
style="background: linear-gradient(145deg, #2A2A2A, #1C1C1C); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.8), inset 0 1px 1px rgba(255,255,255,0.08), 0 0 0 1px rgba(0,0,0,0.8);">
<header class="flex justify-between items-center">
<h2 class="text-lg font-light tracking-tight uppercase text-[#F5F5F5]">Today's Metrics</h2>
<iconify-icon icon="solar:menu-dots-linear" class="text-[#888888]" width="1.25rem"></iconify-icon>
</header>
<div class="flex justify-between items-center text-xs font-light text-[#888888]">
<div class="flex flex-col items-center gap-2 text-[#F5F5F5]">
<div class="w-8 h-8 rounded-full flex items-center justify-center font-normal"
style="background: linear-gradient(145deg, #E88D5D, #B95A2A); box-shadow: 0 4px 8px rgba(0,0,0,0.6), inset 0 2px 2px rgba(255,255,255,0.3);">
17</div>
<span>Mon</span>
</div>
<div class="flex flex-col items-center gap-2"><span>18</span><span>Tue</span></div>
<div class="flex flex-col items-center gap-2"><span>19</span><span>Wed</span></div>
<div class="flex flex-col items-center gap-2"><span>20</span><span>Thu</span></div>
<div class="flex flex-col items-center gap-2"><span>21</span><span>Fri</span></div>
<div class="flex flex-col items-center gap-2"><span>22</span><span>Sat</span></div>
<div class="flex flex-col items-center gap-2"><span>23</span><span>Sun</span></div>
</div>
<div class="flex flex-col gap-3">
<div class="rounded-2xl p-3 flex items-center gap-4 relative overflow-hidden"
style="background: #111111; box-shadow: inset 0 3px 6px rgba(0,0,0,0.8);">
<div class="absolute left-0 top-0 bottom-0 w-[85%] bg-gradient-to-r from-[#E88D5D]/20 to-[#E88D5D]/5"></div>
<div class="text-[#F5F5F5] rounded-full w-8 h-8 flex items-center justify-center relative z-10"
style="background: linear-gradient(145deg, #E88D5D, #B95A2A);"><iconify-icon icon="solar:routing-2-linear"
width="1.1rem"></iconify-icon></div>
<div class="flex-1 flex justify-between items-center relative z-10">
<div>
<p class="text-[10px] text-[#888888]">Steps</p>
<p class="text-sm font-light text-[#F5F5F5]">11,200 <span class="text-[#666666]">/ 12k</span></p>
</div>
<div class="text-right text-sm text-[#F5F5F5]">93%</div>
</div>
</div>
</div>
</section>
<!-- Heart Rate -->
<section class="col-span-1 rounded-[2rem] p-6 flex flex-col items-center justify-center"
style="background: linear-gradient(145deg, #2A2A2A, #1C1C1C); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.8);">
<div class="relative w-32 h-32 flex items-center justify-center rounded-full"
style="box-shadow: inset 0 10px 20px rgba(0,0,0,0.5);">
<svg viewBox="0 0 100 100" class="absolute inset-0 w-full h-full transform -rotate-90">
<circle cx="50" cy="50" r="42" fill="none" stroke="#111111" stroke-width="4" stroke-dasharray="2 4" />
<circle cx="50" cy="50" r="42" fill="none" stroke="#E88D5D" stroke-width="4" stroke-dasharray="2 4"
stroke-dashoffset="60" style="filter: drop-shadow(0 0 6px rgba(232,141,93,0.6));" />
</svg>
<div class="flex flex-col items-center z-10 w-24 h-24 rounded-full justify-center"
style="background: linear-gradient(145deg, #222222, #151515); box-shadow: 0 10px 20px rgba(0,0,0,0.6);">
<iconify-icon icon="solar:heart-linear" class="text-[#E88D5D] animate-pulse" width="1.2rem"></iconify-icon>
<span class="text-3xl font-light text-[#F5F5F5]">142</span>
<span class="text-[10px] text-[#888888] tracking-widest uppercase">Bpm</span>
</div>
</div>
</section>
<!-- Active Session -->
<section class="col-span-1 md:row-span-2 rounded-[2rem] p-7 flex flex-col justify-between"
style="background: linear-gradient(145deg, #2A2A2A, #1C1C1C); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.8);">
<div class="text-center">
<p class="text-[10px] text-[#888888] uppercase tracking-widest mb-2">Active Session</p>
<div class="bg-[#111111] rounded-xl py-4" style="box-shadow: inset 0 4px 8px rgba(0,0,0,0.8);">
<h3 class="text-3xl font-light text-[#E88D5D]">00:38:22</h3>
</div>
</div>
<div class="flex flex-col gap-3 py-6">
<div class="flex justify-between text-sm">
<span class="text-[#888888]">Yesterday</span><span class="text-[#F5F5F5]">7.50km</span></div>
<div class="flex justify-between text-sm">
<span class="text-[#888888]">Tuesday</span><span class="text-[#F5F5F5]">10.00km</span></div>
</div>
<div class="flex gap-3 mt-auto">
<button class="flex-1 text-[#D4D4D4] rounded-full py-3 flex justify-center bg-[#1A1A1A] active:scale-95 transition-transform" style="box-shadow: 0 6px 12px rgba(0,0,0,0.6), inset 0 2px 2px rgba(255,255,255,0.05);"><iconify-icon icon="solar:stop-linear" width="1.2rem"></iconify-icon></button>
<button class="flex-1 text-[#F5F5F5] rounded-full py-3 flex justify-center transition-transform active:scale-95" style="background: linear-gradient(145deg, #E88D5D, #B95A2A); box-shadow: 0 6px 16px rgba(232,141,93,0.3);"><iconify-icon icon="solar:pause-linear" width="1.2rem"></iconify-icon></button>
</div>
</section>
<!-- Distance Tracker -->
<section class="col-span-1 rounded-[2rem] p-6 flex flex-col justify-between"
style="background: linear-gradient(145deg, #2A2A2A, #1C1C1C); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.8);">
<div class="flex justify-between items-start">
<div>
<p class="text-[10px] text-[#888888] uppercase tracking-widest">Distance</p>
<p class="text-2xl font-light text-[#F5F5F5]">6.40 <span class="text-xs text-[#888888]">km</span></p>
</div>
<div class="flex -space-x-2">
<img src="https://i.pravatar.cc/100?u=1" class="w-8 h-8 rounded-full border-2 border-[#1C1C1C]">
<img src="https://i.pravatar.cc/100?u=2" class="w-8 h-8 rounded-full border-2 border-[#1C1C1C]">
</div>
</div>
<button class="mt-4 bg-[#111111] rounded-full p-1.5 pr-4 flex items-center justify-between text-[#F5F5F5]" style="box-shadow: inset 0 1px 1px rgba(255,255,255,0.05);">
<div class="flex items-center gap-3"><div class="w-8 h-8 rounded-full bg-[#2A2A2A] flex items-center justify-center"><iconify-icon icon="solar:bicycling-linear"></iconify-icon></div><span class="text-sm">Cycling</span></div>
<iconify-icon icon="solar:arrow-right-up-linear" class="text-[#888888]"></iconify-icon>
</button>
</section>
<!-- Weight Chart -->
<section class="col-span-1 md:col-span-2 md:row-span-2 rounded-[2rem] p-7 flex flex-col relative"
style="background: linear-gradient(145deg, #222222, #151515); box-shadow: 0 15px 35px -10px rgba(0,0,0,0.9);">
<header class="flex justify-between items-start mb-6">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-[#1A1A1A] flex items-center justify-center text-[#E88D5D]"
style="box-shadow: inset 0 2px 2px rgba(255,255,255,0.05);"><iconify-icon icon="solar:scale-linear"
width="1.2rem"></iconify-icon></div>
<div>
<p class="text-[10px] text-[#888888] uppercase tracking-widest">Target</p>
<h2 class="text-xl font-light text-[#F5F5F5]">72 KG</h2>
</div>
</div>
</header>
<div class="flex-1 relative min-h-[160px]">
<svg viewBox="0 0 400 200" preserveAspectRatio="none" class="absolute inset-0 w-full h-full overflow-visible">
<path d="M 0 160 C 80 160, 120 80, 200 120 C 280 160, 320 60, 400 100 L 400 200 L 0 200 Z" fill="url(#g)"
opacity="0.2" />
<path d="M 0 160 C 80 160, 120 80, 200 120 C 280 160, 320 60, 400 100" fill="none" stroke="#E88D5D"
stroke-width="3" />
<defs>
<linearGradient id="g" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#E88D5D" />
<stop offset="100%" stop-color="transparent" />
</linearGradient>
</defs>
</svg>
<div
class="absolute bottom-0 w-full flex justify-between text-[10px] text-[#666666] pt-4 border-t border-white/5">
<span>Jan</span><span>Mar</span><span>May</span><span>Jul</span></div>
</div>
</section>
</main>
<script>
(function() {
const canvas = document.getElementById('noiseCanvas');
const gl = canvas.getContext('webgl');
if (!gl) return;
const vs = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vs, 'attribute vec2 p; void main() { gl_Position = vec4(p, 0.0, 1.0); }');
gl.compileShader(vs);
const fs = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fs, 'precision lowp float; uniform float t; uniform vec2 r; float rd(vec2 c) { return fract(sin(dot(c, vec2(12.9, 78.2))) * 43758.5); } void main() { vec2 u = gl_FragCoord.xy / r; gl_FragColor = vec4(vec3(rd(u + t * 0.0001)), 1.0); }');
gl.compileShader(fs);
const pg = gl.createProgram();
gl.attachShader(pg, vs); gl.attachShader(pg, fs); gl.linkProgram(pg); gl.useProgram(pg);
const b = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, b);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1,-1, 1,-1, -1,1, -1,1, 1,-1, 1,1]), gl.STATIC_DRAW);
const pL = gl.getAttribLocation(pg, 'p'); gl.enableVertexAttribArray(pL); gl.vertexAttribPointer(pL, 2, gl.FLOAT, false, 0, 0);
const tL = gl.getUniformLocation(pg, 't'), rL = gl.getUniformLocation(pg, 'r');
function render(time) {
canvas.width = window.innerWidth; canvas.height = window.innerHeight;
gl.viewport(0, 0, canvas.width, canvas.height);
gl.uniform1f(tL, time); gl.uniform2f(rL, canvas.width, canvas.height);
gl.drawArrays(gl.TRIANGLES, 0, 6); requestAnimationFrame(render);
}
requestAnimationFrame(render);
})();
</script>
</div>