diff --git a/submissions/examples/developer-stats-dashboard/README.md b/submissions/examples/developer-stats-dashboard/README.md new file mode 100644 index 00000000..381acd20 --- /dev/null +++ b/submissions/examples/developer-stats-dashboard/README.md @@ -0,0 +1,43 @@ +# Developer Stats Dashboard Widget + +A compact dashboard widget for displaying developer and project metrics such as commits, pull requests, issues resolved, repositories, stars earned, and deployment statistics. The widget presents metrics in a clean card-based grid layout with animated entrance and hover effects. + +## Classes + +| Class | Description | +|---|---| +| `ease-dev-stats` | Grid container for stat cards | +| `ease-stat-card` | Individual stat card with entrance animation and hover lift | +| `ease-stat-value` | Numeric value with subtle glow pulse | +| `ease-stat-label` | Descriptive label for the metric | +| `ease-stat-card-primary` | Primary (purple) color variant | +| `ease-stat-card-success` | Success (green) color variant | +| `ease-stat-card-info` | Info (blue) color variant | +| `ease-stat-card-warning` | Warning (amber) color variant | + +## Usage + +```html +
+
+ 128 + Commits +
+
+ 42 + Pull Requests +
+
+ 18 + Repositories +
+
+ 356 + Stars +
+
+``` + +## Why it fits EaseMotion CSS + +Pure CSS dashboard pattern with staggered entrance animations, hover lift effects, and a subtle glow pulse on values. Uses design tokens for colors and spacing. Respects `prefers-reduced-motion`. Zero JavaScript required. diff --git a/submissions/examples/developer-stats-dashboard/demo.html b/submissions/examples/developer-stats-dashboard/demo.html new file mode 100644 index 00000000..bb255cf7 --- /dev/null +++ b/submissions/examples/developer-stats-dashboard/demo.html @@ -0,0 +1,72 @@ + + + + + + Developer Stats Dashboard — EaseMotion CSS + + + + +

Developer Stats Dashboard

+

Project and contribution metrics widget — Issue #1163

+ +
+ +
+ 128 + Commits +
+ +
+ 42 + Pull Requests +
+ +
+ 18 + Repositories +
+ +
+ 356 + Stars +
+ +
+ 7 + Open Issues +
+ +
+ 94 + Issues Resolved +
+ +
+ 12 + Releases +
+ +
+ 3 + Deployments +
+ +
+ + diff --git a/submissions/examples/developer-stats-dashboard/style.css b/submissions/examples/developer-stats-dashboard/style.css new file mode 100644 index 00000000..b4063e4e --- /dev/null +++ b/submissions/examples/developer-stats-dashboard/style.css @@ -0,0 +1,136 @@ +/* ============================================================ + EaseMotion CSS — Developer Stats Dashboard Widget + Issue #1163 + ============================================================ */ + +/* ── Grid container ──────────────────────────────────────── */ + +.ease-dev-stats { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); + gap: var(--ease-space-4, 1rem); + max-width: 720px; + width: 100%; +} + +/* ── Stat card base ──────────────────────────────────────── */ + +.ease-stat-card { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: var(--ease-space-1, 0.25rem); + padding: var(--ease-space-5, 1.25rem) var(--ease-space-4, 1rem); + border-radius: var(--ease-radius-lg, 0.75rem); + border: 1.5px solid transparent; + background: rgba(255, 255, 255, 0.04); + text-align: center; + animation: ease-kf-stat-entrance var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)) both; + transition: + transform var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)), + box-shadow var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)); +} + +.ease-stat-card:hover { + transform: translateY(-4px); + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); +} + +/* ── Staggered entrance delays ───────────────────────────── */ + +.ease-stat-card:nth-child(2) { animation-delay: 80ms; } +.ease-stat-card:nth-child(3) { animation-delay: 160ms; } +.ease-stat-card:nth-child(4) { animation-delay: 240ms; } +.ease-stat-card:nth-child(5) { animation-delay: 320ms; } +.ease-stat-card:nth-child(6) { animation-delay: 400ms; } +.ease-stat-card:nth-child(7) { animation-delay: 480ms; } +.ease-stat-card:nth-child(8) { animation-delay: 560ms; } + +/* ── Stat value ──────────────────────────────────────────── */ + +.ease-stat-value { + font-size: 2rem; + font-weight: 700; + line-height: 1.1; + letter-spacing: -0.02em; + animation: ease-kf-stat-glow 2s var(--ease-ease, cubic-bezier(0.4,0,0.2,1)) infinite; +} + +.ease-stat-label { + font-size: var(--ease-text-xs, 0.75rem); + text-transform: uppercase; + letter-spacing: 0.06em; + opacity: 0.7; + line-height: 1.4; +} + +/* ── Entrance keyframe ───────────────────────────────────── */ + +@keyframes ease-kf-stat-entrance { + from { + opacity: 0; + transform: translateY(12px) scale(0.96); + } + to { + opacity: 1; + transform: translateY(0) scale(1); + } +} + +/* ── Glow pulse on value ─────────────────────────────────── */ + +@keyframes ease-kf-stat-glow { + 0%, 100% { opacity: 1; } + 50% { opacity: 0.75; } +} + +/* ── Color variants ──────────────────────────────────────── */ + +.ease-stat-card-primary { + border-color: rgba(108, 99, 255, 0.35); + background: rgba(108, 99, 255, 0.08); +} +.ease-stat-card-primary .ease-stat-value { + color: var(--ease-color-primary, #6c63ff); +} + +.ease-stat-card-success { + border-color: rgba(34, 197, 94, 0.35); + background: rgba(34, 197, 94, 0.08); +} +.ease-stat-card-success .ease-stat-value { + color: var(--ease-color-success, #22c55e); +} + +.ease-stat-card-info { + border-color: rgba(59, 130, 246, 0.35); + background: rgba(59, 130, 246, 0.08); +} +.ease-stat-card-info .ease-stat-value { + color: var(--ease-color-info, #3b82f6); +} + +.ease-stat-card-warning { + border-color: rgba(245, 158, 11, 0.35); + background: rgba(245, 158, 11, 0.08); +} +.ease-stat-card-warning .ease-stat-value { + color: var(--ease-color-warning, #f59e0b); +} + +/* ── Reduced motion ──────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + .ease-stat-card { + animation: none; + transition: none; + } + .ease-stat-card:hover { + transform: none; + box-shadow: none; + } + .ease-stat-value { + animation: none; + } +}