All Prompts
All Prompts
carddashboardanalyticsmetricstailwindanimatedinteractive
Neumorphic Weekly Metrics Dashboard Widget
Виджет дашборда с неоморфными карточками метрик и SVG графиками. Отслеживает еженедельные показатели производительности. Интерактивный UI на Tailwind.
Prompt
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neumorphic Dashboard Widget</title>
<!-- Google Fonts: Inter for Apple-like minimal typography -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Tailwind CSS for layout and utility classes -->
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
fontFamily: {
sans: ['Inter', 'sans-serif'],
},
colors: {
neu: {
bg: '#e6e7ee',
light: '#ffffff',
dark: '#c4c6cf',
textBase: '#4d515f',
textDark: '#2d3039',
textMuted: '#7a7e8f',
accent: '#3b82f6' // Soft Blue
}
}
}
}
}
</script>
<style>
/* Base configuration */
body {
background-color: #e6e7ee;
color: #4d515f;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
padding: 1.5rem;
}
/* Neumorphic Utilities */
/* Raised flat surface */
.neu-flat {
background: #e6e7ee;
box-shadow:
10px 10px 20px #c4c6cf,
-10px -10px 20px #ffffff;
transition: box-shadow 0.3s ease, transform 0.2s ease;
}
/* Depressed/Inset surface */
.neu-pressed {
background: #e6e7ee;
box-shadow:
inset 8px 8px 16px #c4c6cf,
inset -8px -8px 16px #ffffff;
}
/* Card Hover Effect */
.neu-card:hover {
box-shadow:
inset 6px 6px 12px #c4c6cf,
inset -6px -6px 12px #ffffff;
transform: scale(0.99);
}
/* Button Styling */
.neu-button {
background: #e6e7ee;
box-shadow:
6px 6px 12px #c4c6cf,
-6px -6px 12px #ffffff;
transition: all 0.2s ease;
}
.neu-button:active {
box-shadow:
inset 4px 4px 8px #c4c6cf,
inset -4px -4px 8px #ffffff;
transform: translateY(2px);
}
/* SVG Chart Path Base */
.chart-path {
fill: none;
stroke-width: 4;
stroke-linecap: round;
stroke-linejoin: round;
/* Will be animated via JS */
}
/* Active Glow Animations */
.glow-pulse {
animation: soft-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes soft-pulse {
0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.5); }
70% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0); }
100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}
.svg-glow {
filter: drop-shadow(0px 4px 6px rgba(59, 130, 246, 0.4));
}
</style>
</head>
<body class="antialiased">
<!-- Main Widget Container -->
<main class="neu-flat w-full max-w-4xl rounded-[32px] p-8 md:p-10 flex flex-col gap-8">
<!-- Header -->
<header class="flex justify-between items-center px-2">
<div>
<h1 class="text-2xl font-bold text-neu-textDark tracking-tight">Weekly Performance</h1>
<p class="text-sm font-medium text-neu-textMuted mt-1">Overview of your key metrics</p>
</div>
<!-- Decorative Neumorphic Options Dot -->
<button class="neu-button w-10 h-10 rounded-full flex items-center justify-center text-neu-textMuted hover:text-neu-accent focus:outline-none" aria-label="Options">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="1"></circle>
<circle cx="19" cy="12" r="1"></circle>
<circle cx="5" cy="12" r="1"></circle>
</svg>
</button>
</header>
<!-- Metrics Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
<!-- Card 1: Active Metric (Revenue) -->
<div class="neu-card neu-flat rounded-[24px] p-6 cursor-pointer flex flex-col justify-between h-48 relative">
<div class="flex justify-between items-start">
<div class="flex items-center gap-2">
<!-- Active Glow Indicator -->
<div class="w-2.5 h-2.5 rounded-full bg-neu-accent glow-pulse"></div>
<h3 class="text-sm font-semibold text-neu-textMuted uppercase tracking-wider">Revenue</h3>
</div>
<!-- Icon -->
<div class="text-neu-accent bg-blue-50/50 p-2 rounded-xl">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<line x1="12" y1="1" x2="12" y2="23"></line>
<path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
</div>
</div>
<div>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-bold text-neu-accent tracking-tighter">+84</span>
<span class="text-lg font-bold text-neu-textMuted">%</span>
</div>
</div>
<!-- Minimal SVG Line Chart -->
<div class="absolute bottom-4 left-0 w-full px-6 pointer-events-none">
<svg viewBox="0 0 200 40" class="w-full h-10 overflow-visible svg-glow">
<path class="chart-path" stroke="#3b82f6" d="M 0 35 C 30 35, 40 10, 80 15 C 120 20, 160 5, 200 10" />
</svg>
</div>
</div>
<!-- Card 2: Users Metric -->
<div class="neu-card neu-flat rounded-[24px] p-6 cursor-pointer flex flex-col justify-between h-48 relative">
<div class="flex justify-between items-start">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-neu-dark opacity-50"></div>
<h3 class="text-sm font-semibold text-neu-textMuted uppercase tracking-wider">Users</h3>
</div>
<!-- Icon -->
<div class="text-neu-textMuted p-2">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M23 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
</div>
</div>
<div>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-bold text-neu-textDark tracking-tighter">+12</span>
<span class="text-lg font-bold text-neu-textMuted">%</span>
</div>
</div>
<!-- Minimal SVG Line Chart -->
<div class="absolute bottom-4 left-0 w-full px-6 pointer-events-none">
<svg viewBox="0 0 200 40" class="w-full h-10 overflow-visible">
<path class="chart-path" stroke="#a3a6b5" d="M 0 25 C 40 25, 60 35, 100 20 C 140 5, 160 15, 200 5" />
</svg>
</div>
</div>
<!-- Card 3: Engagement Metric -->
<div class="neu-card neu-flat rounded-[24px] p-6 cursor-pointer flex flex-col justify-between h-48 relative">
<div class="flex justify-between items-start">
<div class="flex items-center gap-2">
<div class="w-2.5 h-2.5 rounded-full bg-neu-dark opacity-50"></div>
<h3 class="text-sm font-semibold text-neu-textMuted uppercase tracking-wider">Engagement</h3>
</div>
<!-- Icon -->
<div class="text-neu-textMuted p-2">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline>
</svg>
</div>
</div>
<div>
<div class="flex items-baseline gap-1">
<span class="text-4xl font-bold text-neu-textDark tracking-tighter">+42</span>
<span class="text-lg font-bold text-neu-textMuted">%</span>
</div>
</div>
<!-- Minimal SVG Line Chart -->
<div class="absolute bottom-4 left-0 w-full px-6 pointer-events-none">
<svg viewBox="0 0 200 40" class="w-full h-10 overflow-visible">
<path class="chart-path" stroke="#a3a6b5" d="M 0 15 C 50 15, 70 5, 110 25 C 150 45, 170 15, 200 20" />
</svg>
</div>
</div>
</div>
<!-- Center Floating Neumorphic Button -->
<div class="flex justify-center mt-2 mb-2">
<button class="neu-button px-8 py-3.5 rounded-full flex items-center gap-3 text-neu-textDark font-semibold tracking-wide hover:text-neu-accent focus:outline-none select-none">
<span>View Full Report</span>
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
<line x1="5" y1="12" x2="19" y2="12"></line>
<polyline points="12 5 19 12 12 19"></polyline>
</svg>
</button>
</div>
</main>
<!-- Vanilla JS for Chart Animations -->
<script>
document.addEventListener("DOMContentLoaded", () => {
// Select all chart SVG paths
const paths = document.querySelectorAll('.chart-path');
paths.forEach((path, index) => {
// Get the exact length of the SVG path
const length = path.getTotalLength();
// Set initial states to hide the path
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;
// Staggered animation: draw from left to right
setTimeout(() => {
// Apply smooth CSS transition
path.style.transition = 'stroke-dashoffset 1.4s cubic-bezier(0.4, 0, 0.2, 1)';
// Animate to 0 (fully drawn)
path.style.strokeDashoffset = '0';
}, 200 + (index * 150)); // Slight delay per card for organic feel
});
});
</script>
</body>
</html>