Spaces:
Runtime error
Runtime error
| <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; /* Indigo 600 */ | |
| --primary-dark: #4338ca; | |
| --accent: #ec4899; /* Pink 500 */ | |
| --success: #10b981; /* Green 500 */ | |
| --warning: #f59e0b; /* Amber 500 */ | |
| --danger: #ef4444; /* Red 500 */ | |
| --text-main: #0f172a; /* Slate 900 */ | |
| --text-muted: #64748b; /* Slate 500 */ | |
| --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 */ | |
| .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; | |
| } | |
| /* Main Content */ | |
| .content { | |
| flex: 1; | |
| padding: 40px 80px 60px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| overflow-y: auto; | |
| } | |
| /* Endpoint Card */ | |
| .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; | |
| } | |
| /* Stagger animation delays */ | |
| .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); | |
| } | |
| } | |
| /* HTTP Method Badge */ | |
| .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 */ | |
| .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 */ | |
| .description { | |
| font-size: 16px; | |
| color: var(--text-muted); | |
| font-weight: 500; | |
| min-width: 300px; | |
| text-align: right; | |
| } | |
| /* Status Indicator */ | |
| .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 */ | |
| .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); | |
| } | |
| /* Background Decorations */ | |
| .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 Pattern Overlay */ | |
| .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> |