diff --git a/submissions/examples/api-endpoint-card/README.md b/submissions/examples/api-endpoint-card/README.md new file mode 100644 index 00000000..cb4ca64a --- /dev/null +++ b/submissions/examples/api-endpoint-card/README.md @@ -0,0 +1,48 @@ +# API Endpoint Documentation Card + +A developer-friendly API documentation card for displaying endpoint information including HTTP method badges (GET, POST, PUT, DELETE), endpoint URLs, descriptions, authentication requirements, response status badges, and example response blocks. + +## Classes + +| Class | Description | +|---|---| +| `ease-api-card` | Card container with entrance animation and hover border glow | +| `ease-api-header` | Header row with method badge and URL | +| `ease-api-method` | HTTP method badge | +| `ease-api-method-get` | Green badge for GET | +| `ease-api-method-post` | Blue badge for POST | +| `ease-api-method-put` | Amber badge for PUT | +| `ease-api-method-delete` | Red badge for DELETE | +| `ease-api-url` | Monospace endpoint URL | +| `ease-api-desc` | Endpoint description | +| `ease-api-meta` | Row for auth and status badges | +| `ease-api-auth` | Authentication badge | +| `ease-api-auth-required` | Red auth-required badge | +| `ease-api-status` | Response status badge | +| `ease-api-status-success` | Green status (2xx) badge | +| `ease-api-status-error` | Red status (4xx/5xx) badge | +| `ease-api-response` | Monospace example response block | + +## Usage + +```html +
+
+ GET + /api/v1/users +
+

Returns a paginated list of all registered users.

+
+ Auth Required + 200 OK +
+ 
{
+  "success": true,
+  "users": [...]
+}
+
+``` + +## Why it fits EaseMotion CSS + +Pure CSS API documentation card with staggered fade-in animations, subtle border glow on hover, and monospace formatting for code elements. Uses design tokens for colors and spacing. Respects `prefers-reduced-motion`. diff --git a/submissions/examples/api-endpoint-card/demo.html b/submissions/examples/api-endpoint-card/demo.html new file mode 100644 index 00000000..b103903b --- /dev/null +++ b/submissions/examples/api-endpoint-card/demo.html @@ -0,0 +1,107 @@ + + + + + + API Endpoint Card — EaseMotion CSS + + + + +

API Endpoint Card

+

Developer-friendly API documentation component — Issue #1178

+ +
+ + +
+
+ GET + /api/v1/users +
+

Returns a paginated list of all registered users.

+
+ Auth Required + 200 OK +
+ 
{
+  "success": true,
+  "users": [...]
+}
+
+ + +
+
+ POST + /api/v1/users +
+

Create a new user account.

+
+ Auth Required + 201 Created +
+ 
{
+  "success": true,
+  "id": "usr_abc123"
+}
+
+ + +
+
+ PUT + /api/v1/users/:id +
+

Update an existing user's profile information.

+
+ Auth Required + 200 OK +
+ 
{
+  "success": true,
+  "updated": "profile"
+}
+
+ + +
+
+ DELETE + /api/v1/users/:id +
+

Permanently delete a user account.

+
+ Auth Required + 401 Unauthorized +
+ 
{
+  "success": false,
+  "error": "Invalid token"
+}
+
+ +
+ + diff --git a/submissions/examples/api-endpoint-card/style.css b/submissions/examples/api-endpoint-card/style.css new file mode 100644 index 00000000..e7d587d2 --- /dev/null +++ b/submissions/examples/api-endpoint-card/style.css @@ -0,0 +1,181 @@ +/* ============================================================ + EaseMotion CSS — API Endpoint Documentation Card + Issue #1178 + ============================================================ */ + +/* ── Card container ──────────────────────────────────────── */ + +.ease-api-card { + background: rgba(255, 255, 255, 0.04); + border: 1.5px solid rgba(255, 255, 255, 0.08); + border-radius: var(--ease-radius-lg, 0.75rem); + padding: var(--ease-space-5, 1.25rem); + animation: ease-kf-api-fade-in var(--ease-speed-medium, 300ms) var(--ease-ease, cubic-bezier(0.4,0,0.2,1)) both; + transition: + border-color 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-api-card:nth-child(2) { animation-delay: 80ms; } +.ease-api-card:nth-child(3) { animation-delay: 160ms; } +.ease-api-card:nth-child(4) { animation-delay: 240ms; } + +.ease-api-card:hover { + border-color: rgba(255, 255, 255, 0.18); + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); +} + +/* ── Header row (method + URL) ───────────────────────────── */ + +.ease-api-header { + display: flex; + align-items: center; + gap: var(--ease-space-3, 0.75rem); + margin-bottom: var(--ease-space-3, 0.75rem); +} + +/* ── HTTP method badge ───────────────────────────────────── */ + +.ease-api-method { + display: inline-flex; + align-items: center; + justify-content: center; + min-width: 56px; + padding: 0.25rem 0.625rem; + border-radius: var(--ease-radius-full, 999px); + font-size: 0.6875rem; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.04em; + line-height: 1.4; +} + +.ease-api-method-get { + background: rgba(34, 197, 94, 0.15); + color: var(--ease-color-success, #22c55e); +} + +.ease-api-method-post { + background: rgba(59, 130, 246, 0.15); + color: var(--ease-color-info, #3b82f6); +} + +.ease-api-method-put { + background: rgba(245, 158, 11, 0.15); + color: var(--ease-color-warning, #f59e0b); +} + +.ease-api-method-delete { + background: rgba(239, 68, 68, 0.15); + color: var(--ease-color-danger, #ef4444); +} + +/* ── Endpoint URL ────────────────────────────────────────── */ + +.ease-api-url { + font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; + font-size: var(--ease-text-sm, 0.875rem); + color: rgba(255, 255, 255, 0.8); + background: rgba(255, 255, 255, 0.05); + padding: 0.25rem 0.625rem; + border-radius: var(--ease-radius-sm, 0.375rem); + overflow-x: auto; + white-space: nowrap; +} + +/* ── Description ─────────────────────────────────────────── */ + +.ease-api-desc { + margin: 0 0 var(--ease-space-3, 0.75rem); + font-size: var(--ease-text-sm, 0.875rem); + line-height: 1.6; + color: rgba(255, 255, 255, 0.6); +} + +/* ── Meta row (auth + status) ────────────────────────────── */ + +.ease-api-meta { + display: flex; + align-items: center; + gap: var(--ease-space-2, 0.5rem); + margin-bottom: var(--ease-space-3, 0.75rem); + flex-wrap: wrap; +} + +/* ── Auth badge ──────────────────────────────────────────── */ + +.ease-api-auth { + font-size: 0.6875rem; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.05em; + padding: 0.125rem 0.5rem; + border-radius: var(--ease-radius-sm, 0.375rem); +} + +.ease-api-auth-required { + background: rgba(239, 68, 68, 0.1); + color: var(--ease-color-danger, #ef4444); +} + +/* ── Status badge ────────────────────────────────────────── */ + +.ease-api-status { + font-size: 0.6875rem; + font-weight: 600; + font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; + padding: 0.125rem 0.5rem; + border-radius: var(--ease-radius-sm, 0.375rem); +} + +.ease-api-status-success { + background: rgba(34, 197, 94, 0.1); + color: var(--ease-color-success, #22c55e); +} + +.ease-api-status-error { + background: rgba(239, 68, 68, 0.1); + color: var(--ease-color-danger, #ef4444); +} + +/* ── Example response block ──────────────────────────────── */ + +.ease-api-response { + margin: 0; + padding: var(--ease-space-3, 0.75rem) var(--ease-space-4, 1rem); + border-radius: var(--ease-radius-md, 0.5rem); + background: rgba(0, 0, 0, 0.3); + border: 1px solid rgba(255, 255, 255, 0.06); + overflow-x: auto; + font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; + font-size: 0.8125rem; + line-height: 1.7; + color: rgba(255, 255, 255, 0.65); + white-space: pre; +} + +/* ── Keyframes ───────────────────────────────────────────── */ + +@keyframes ease-kf-api-fade-in { + from { + opacity: 0; + transform: translateY(8px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +/* ── Reduced motion ──────────────────────────────────────── */ + +@media (prefers-reduced-motion: reduce) { + .ease-api-card { + animation: none; + transition: none; + } + .ease-api-card:hover { + border-color: rgba(255, 255, 255, 0.08); + box-shadow: none; + } +}