| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>{{ title }}</title> |
| <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@300;400;600;700;800&display=swap" rel="stylesheet"> |
| <style> |
| :root { |
| --bg-root: #eef2f6; |
| --glass-bg: rgba(255, 255, 255, 0.75); |
| |
| --primary: #4f46e5; |
| --primary-dark: #4338ca; |
| --accent: #ec4899; |
| --success: #10b981; |
| --warning: #f59e0b; |
| --danger: #ef4444; |
| |
| --text-main: #0f172a; |
| --text-muted: #64748b; |
| |
| --font-main: 'Plus Jakarta Sans', sans-serif; |
| --font-code: 'JetBrains Mono', monospace; |
| } |
| |
| * { box-sizing: border-box; margin: 0; padding: 0; } |
| |
| body { |
| font-family: var(--font-main); |
| background: var(--bg-root); |
| background-image: |
| radial-gradient(at 20% 30%, rgba(99, 102, 241, 0.15) 0px, transparent 50%), |
| radial-gradient(at 80% 70%, rgba(236, 72, 153, 0.15) 0px, transparent 50%); |
| width: 100vw; |
| height: 100vh; |
| overflow: hidden; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| .slide-wrap { |
| width: 1920px; |
| height: 1080px; |
| background: var(--glass-bg); |
| backdrop-filter: blur(20px); |
| box-shadow: |
| 0 25px 50px -12px rgba(0, 0, 0, 0.1), |
| 0 0 0 1px rgba(255, 255, 255, 0.5) inset; |
| border-radius: 24px; |
| overflow: hidden; |
| position: relative; |
| display: flex; |
| flex-direction: column; |
| } |
| |
| |
| .header { |
| padding: 50px 80px 30px; |
| border-bottom: 1px solid rgba(99, 102, 241, 0.2); |
| position: relative; |
| z-index: 10; |
| } |
| |
| .header::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 4px; |
| background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%); |
| } |
| |
| .title { |
| font-size: 56px; |
| font-weight: 800; |
| color: var(--text-main); |
| letter-spacing: -0.03em; |
| line-height: 1.1; |
| margin-bottom: 12px; |
| } |
| |
| .subtitle { |
| font-size: 22px; |
| color: var(--text-muted); |
| font-weight: 500; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
| |
| .api-badge { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| background: rgba(99, 102, 241, 0.15); |
| border: 1px solid rgba(99, 102, 241, 0.3); |
| padding: 4px 12px; |
| border-radius: 20px; |
| font-family: var(--font-code); |
| font-size: 14px; |
| font-weight: 700; |
| color: var(--primary); |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
| |
| |
| .content { |
| flex: 1; |
| padding: 40px 80px 60px; |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| overflow-y: auto; |
| } |
| |
| |
| .endpoint { |
| background: rgba(255, 255, 255, 0.6); |
| border: 1px solid rgba(79, 70, 229, 0.2); |
| border-radius: 16px; |
| padding: 20px 28px; |
| display: flex; |
| align-items: center; |
| gap: 20px; |
| transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); |
| opacity: 0; |
| transform: translateY(20px); |
| animation: slideIn 0.5s ease-out forwards; |
| position: relative; |
| overflow: hidden; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); |
| } |
| |
| .endpoint::before { |
| content: ''; |
| position: absolute; |
| left: 0; |
| top: 0; |
| height: 100%; |
| width: 4px; |
| background: var(--primary); |
| transition: width 0.3s ease; |
| } |
| |
| .endpoint:hover { |
| background: rgba(255, 255, 255, 0.9); |
| border-color: var(--primary); |
| transform: translateX(8px); |
| box-shadow: 0 10px 30px rgba(79, 70, 229, 0.15); |
| } |
| |
| .endpoint:hover::before { |
| width: 8px; |
| } |
| |
| |
| .endpoint:nth-child(1) { animation-delay: 0.1s; } |
| .endpoint:nth-child(2) { animation-delay: 0.2s; } |
| .endpoint:nth-child(3) { animation-delay: 0.3s; } |
| .endpoint:nth-child(4) { animation-delay: 0.4s; } |
| .endpoint:nth-child(5) { animation-delay: 0.5s; } |
| .endpoint:nth-child(6) { animation-delay: 0.6s; } |
| |
| @keyframes slideIn { |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| |
| |
| .method { |
| font-family: var(--font-code); |
| font-size: 16px; |
| font-weight: 700; |
| padding: 8px 16px; |
| border-radius: 8px; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| min-width: 85px; |
| text-align: center; |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); |
| } |
| |
| .method.get { |
| background: linear-gradient(135deg, #10b981 0%, #059669 100%); |
| color: #fff; |
| } |
| |
| .method.post { |
| background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); |
| color: #fff; |
| } |
| |
| .method.put, .method.patch { |
| background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); |
| color: #fff; |
| } |
| |
| .method.delete { |
| background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); |
| color: #fff; |
| } |
| |
| |
| .path { |
| flex: 1; |
| font-family: var(--font-code); |
| font-size: 20px; |
| font-weight: 600; |
| color: var(--text-main); |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| } |
| |
| .path-text { |
| color: var(--primary); |
| } |
| |
| .path-param { |
| color: var(--accent); |
| font-style: italic; |
| } |
| |
| |
| .description { |
| font-size: 16px; |
| color: var(--text-muted); |
| font-weight: 500; |
| min-width: 300px; |
| text-align: right; |
| } |
| |
| |
| .status-dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 50%; |
| background: var(--success); |
| box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2); |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0%, 100% { |
| box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); |
| } |
| 50% { |
| box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); |
| } |
| } |
| |
| |
| .footer-tag { |
| position: absolute; |
| bottom: 30px; |
| right: 80px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| background: rgba(255, 255, 255, 0.9); |
| border: 1px solid rgba(79, 70, 229, 0.2); |
| padding: 12px 20px; |
| border-radius: 50px; |
| backdrop-filter: blur(10px); |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); |
| } |
| |
| .footer-tag-text { |
| font-family: var(--font-code); |
| font-size: 14px; |
| font-weight: 600; |
| color: var(--text-main); |
| } |
| |
| |
| .blob { |
| position: absolute; |
| filter: blur(100px); |
| opacity: 0.3; |
| z-index: 0; |
| pointer-events: none; |
| } |
| |
| .blob-1 { |
| top: -10%; |
| right: -5%; |
| width: 600px; |
| height: 600px; |
| background: var(--primary); |
| } |
| |
| .blob-2 { |
| bottom: -10%; |
| left: -5%; |
| width: 500px; |
| height: 500px; |
| background: var(--accent); |
| } |
| |
| |
| .grid-overlay { |
| position: absolute; |
| inset: 0; |
| background-image: |
| linear-gradient(rgba(79, 70, 229, 0.03) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(79, 70, 229, 0.03) 1px, transparent 1px); |
| background-size: 50px 50px; |
| z-index: 0; |
| pointer-events: none; |
| } |
| </style> |
| </head> |
| <body> |
| <div class="slide-wrap"> |
| <div class="blob blob-1"></div> |
| <div class="blob blob-2"></div> |
| <div class="grid-overlay"></div> |
|
|
| <div class="header"> |
| <h1 class="title">{{ title }}</h1> |
| <div class="subtitle"> |
| <span class="api-badge"> |
| <span class="status-dot"></span> |
| REST API |
| </span> |
| {% if subtitle %} |
| {{ subtitle }} |
| {% endif %} |
| </div> |
| </div> |
|
|
| <div class="content"> |
| {% for endpoint in api_endpoints %} |
| <div class="endpoint"> |
| <div class="method {{ endpoint.method.lower() }}"> |
| {{ endpoint.method }} |
| </div> |
| <div class="path"> |
| <span class="path-text">{{ endpoint.path }}</span> |
| </div> |
| <div class="description"> |
| {{ endpoint.description }} |
| </div> |
| </div> |
| {% endfor %} |
| </div> |
|
|
| <div class="footer-tag"> |
| <div class="status-dot"></div> |
| <span class="footer-tag-text">RESTful Design</span> |
| </div> |
| </div> |
| </body> |
| </html> |
