SAPTARSHI-coder · SAPTARSHI-coder · Jun 4, 2026 · Jun 4, 2026
@@ -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
+<div class="ease-api-card">
+  <div class="ease-api-header">
+    <span class="ease-api-method ease-api-method-get">GET</span>
+    <code class="ease-api-url">/api/v1/users</code>
+  </div>
+  <p class="ease-api-desc">Returns a paginated list of all registered users.</p>
+  <div class="ease-api-meta">
+    <span class="ease-api-auth ease-api-auth-required">Auth Required</span>
+    <span class="ease-api-status ease-api-status-success">200 OK</span>
+  </div>
+  <pre class="ease-api-response">{
+  "success": true,
+  "users": [...]
+}</pre>
+</div>
+```
+
+## 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`.
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>API Endpoint Card — EaseMotion CSS</title>
+  <link rel="stylesheet" href="style.css" />
+  <style>
+    *, *::before, *::after { box-sizing: border-box; }
+    body {
+      background: #0f0e17;
+      color: #fff;
+      font-family: 'Inter', system-ui, sans-serif;
+      padding: 3rem 2rem;
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    h1 { font-size: 2rem; margin-bottom: 0.25rem; text-align: center; }
+    .subtitle { color: rgba(255,255,255,0.5); margin-bottom: 3rem; text-align: center; }
+    .demo-grid {
+      display: flex;
+      flex-direction: column;
+      gap: 1.25rem;
+      width: 100%;
+      max-width: 580px;
+    }
+  </style>
+</head>
+<body>
+  <h1>API Endpoint Card</h1>
+  <p class="subtitle">Developer-friendly API documentation component — Issue #1178</p>
+
+  <div class="demo-grid">
+
+    <!-- GET -->
+    <div class="ease-api-card">
+      <div class="ease-api-header">
+        <span class="ease-api-method ease-api-method-get">GET</span>
+        <code class="ease-api-url">/api/v1/users</code>
+      </div>
+      <p class="ease-api-desc">Returns a paginated list of all registered users.</p>
+      <div class="ease-api-meta">
+        <span class="ease-api-auth ease-api-auth-required">Auth Required</span>
+        <span class="ease-api-status ease-api-status-success">200 OK</span>
+      </div>
+      <pre class="ease-api-response"><span class="ease-api-ln">{</span>
+<span class="ease-api-ln">  "success": true,</span>
+<span class="ease-api-ln">  "users": [...]</span>
+<span class="ease-api-ln">}</span></pre>
+    </div>
+
+    <!-- POST -->
+    <div class="ease-api-card">
+      <div class="ease-api-header">
+        <span class="ease-api-method ease-api-method-post">POST</span>
+        <code class="ease-api-url">/api/v1/users</code>
+      </div>
+      <p class="ease-api-desc">Create a new user account.</p>
+      <div class="ease-api-meta">
+        <span class="ease-api-auth ease-api-auth-required">Auth Required</span>
+        <span class="ease-api-status ease-api-status-success">201 Created</span>
+      </div>
+      <pre class="ease-api-response"><span class="ease-api-ln">{</span>
+<span class="ease-api-ln">  "success": true,</span>
+<span class="ease-api-ln">  "id": "usr_abc123"</span>
+<span class="ease-api-ln">}</span></pre>
+    </div>
+
+    <!-- PUT -->
+    <div class="ease-api-card">
+      <div class="ease-api-header">
+        <span class="ease-api-method ease-api-method-put">PUT</span>
+        <code class="ease-api-url">/api/v1/users/:id</code>
+      </div>
+      <p class="ease-api-desc">Update an existing user's profile information.</p>
+      <div class="ease-api-meta">
+        <span class="ease-api-auth ease-api-auth-required">Auth Required</span>
+        <span class="ease-api-status ease-api-status-success">200 OK</span>
+      </div>
+      <pre class="ease-api-response"><span class="ease-api-ln">{</span>
+<span class="ease-api-ln">  "success": true,</span>
+<span class="ease-api-ln">  "updated": "profile"</span>
+<span class="ease-api-ln">}</span></pre>
+    </div>
+
+    <!-- DELETE -->
+    <div class="ease-api-card">
+      <div class="ease-api-header">
+        <span class="ease-api-method ease-api-method-delete">DELETE</span>
+        <code class="ease-api-url">/api/v1/users/:id</code>
+      </div>
+      <p class="ease-api-desc">Permanently delete a user account.</p>
+      <div class="ease-api-meta">
+        <span class="ease-api-auth ease-api-auth-required">Auth Required</span>
+        <span class="ease-api-status ease-api-status-error">401 Unauthorized</span>
+      </div>
+      <pre class="ease-api-response"><span class="ease-api-ln">{</span>
+<span class="ease-api-ln">  "success": false,</span>
+<span class="ease-api-ln">  "error": "Invalid token"</span>
+<span class="ease-api-ln">}</span></pre>
+    </div>
+
+  </div>
+</body>
+</html>
@@ -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;
+  }
+}