From 5c553c2378e76b2f55bde660900e2143850d3778 Mon Sep 17 00:00:00 2001 From: 7000pctAUTO Date: Sat, 31 Jan 2026 17:13:42 +0000 Subject: [PATCH] Add static files (CSS, JS) --- src/docgen/static/style.css | 497 ++++++++++++++++++++++++++++++++++++ 1 file changed, 497 insertions(+) create mode 100644 src/docgen/static/style.css diff --git a/src/docgen/static/style.css b/src/docgen/static/style.css new file mode 100644 index 0000000..b87af0d --- /dev/null +++ b/src/docgen/static/style.css @@ -0,0 +1,497 @@ +:root { + --primary-color: #635bff; + --primary-hover: #7a73ff; + --text-primary: #1a1a2e; + --text-secondary: #6b7280; + --text-muted: #9ca3af; + --bg-primary: #ffffff; + --bg-secondary: #f8fafc; + --bg-tertiary: #f1f5f9; + --border-color: #e2e8f0; + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1); + --radius-sm: 6px; + --radius-md: 8px; + --radius-lg: 12px; + --sidebar-width: 320px; + --transition-fast: 150ms ease; + --transition-normal: 250ms ease; +} + +.theme-dark { + --text-primary: #f1f5f9; + --text-secondary: #94a3b8; + --text-muted: #64748b; + --bg-primary: #0f172a; + --bg-secondary: #1e293b; + --bg-tertiary: #334155; + --border-color: #334155; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; + background: var(--bg-primary); + color: var(--text-primary); + line-height: 1.6; + display: flex; + min-height: 100vh; +} + +.sidebar { + width: var(--sidebar-width); + background: var(--bg-secondary); + border-right: 1px solid var(--border-color); + position: fixed; + top: 0; + left: 0; + height: 100vh; + display: flex; + flex-direction: column; + z-index: 100; +} + +.sidebar-header { + padding: 24px; + border-bottom: 1px solid var(--border-color); +} + +.sidebar-header h1 { + font-size: 18px; + font-weight: 700; + margin-bottom: 8px; + color: var(--text-primary); +} + +.version-badge { + display: inline-block; + padding: 2px 8px; + background: var(--primary-color); + color: white; + font-size: 11px; + font-weight: 600; + border-radius: var(--radius-sm); +} + +.sidebar-content { + flex: 1; + overflow-y: auto; + padding: 16px; +} + +.sidebar-footer { + padding: 16px 24px; + border-top: 1px solid var(--border-color); + font-size: 12px; + color: var(--text-muted); +} + +.nav-search { + margin-bottom: 16px; +} + +.nav-search input { + width: 100%; + padding: 10px 12px; + border: 1px solid var(--border-color); + border-radius: var(--radius-md); + background: var(--bg-primary); + color: var(--text-primary); + font-size: 14px; + transition: border-color var(--transition-fast); +} + +.nav-search input:focus { + outline: none; + border-color: var(--primary-color); +} + +.nav-group { + margin-bottom: 8px; +} + +.nav-group-toggle { + width: 100%; + display: flex; + align-items: center; + gap: 8px; + padding: 10px 12px; + background: none; + border: none; + color: var(--text-primary); + font-size: 13px; + font-weight: 600; + cursor: pointer; + border-radius: var(--radius-sm); + transition: background var(--transition-fast); +} + +.nav-group-toggle:hover { + background: var(--bg-tertiary); +} + +.nav-group-icon { + font-size: 10px; + color: var(--text-muted); + transition: transform var(--transition-fast); +} + +.nav-group.collapsed .nav-group-icon { + transform: rotate(0deg); +} + +.nav-group:not(.collapsed) .nav-group-icon { + transform: rotate(90deg); +} + +.nav-group-name { + flex: 1; + text-align: left; +} + +.nav-group-count { + background: var(--bg-tertiary); + padding: 2px 8px; + border-radius: var(--radius-sm); + font-size: 11px; + color: var(--text-muted); +} + +.nav-group-items { + list-style: none; + margin-left: 20px; + padding: 4px 0; + display: none; +} + +.nav-group:not(.collapsed) .nav-group-items { + display: block; +} + +.nav-item { + margin-bottom: 2px; +} + +.nav-link { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + text-decoration: none; + color: var(--text-secondary); + font-size: 13px; + border-radius: var(--radius-sm); + transition: all var(--transition-fast); +} + +.nav-link:hover { + background: var(--bg-tertiary); + color: var(--text-primary); +} + +.nav-method { + font-size: 10px; + font-weight: 600; + padding: 2px 6px; + border-radius: 4px; + min-width: 48px; + text-align: center; +} + +.nav-method-get { background: #e0e7ff; color: #4338ca; } +.nav-method-post { background: #dcfce7; color: #15803d; } +.nav-method-put { background: #fef3c7; color: #b45309; } +.nav-method-patch { background: #ccfbf1; color: #0d9488; } +.nav-method-delete { background: #fee2e2; color: #dc2626; } + +.nav-path { + font-family: 'JetBrains Mono', monospace; + font-size: 12px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.main-content { + flex: 1; + margin-left: var(--sidebar-width); + padding: 32px 48px; + max-width: calc(100% - var(--sidebar-width)); +} + +.content-wrapper { + max-width: 900px; + margin: 0 auto; +} + +.endpoint-group { + margin-bottom: 40px; +} + +.group-title { + font-size: 20px; + font-weight: 700; + margin-bottom: 16px; + padding-bottom: 12px; + border-bottom: 1px solid var(--border-color); +} + +.endpoint-card { + background: var(--bg-primary); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + margin-bottom: 16px; + overflow: hidden; + transition: box-shadow var(--transition-normal); +} + +.endpoint-card:hover { + box-shadow: var(--shadow-md); +} + +.endpoint-card.expanded { + box-shadow: var(--shadow-lg); +} + +.endpoint-header { + display: flex; + align-items: center; + gap: 12px; + padding: 16px 20px; + cursor: pointer; + transition: background var(--transition-fast); +} + +.endpoint-header:hover { + background: var(--bg-secondary); +} + +.endpoint-method-badge { + padding: 6px 12px; + border-radius: var(--radius-sm); + color: white; + font-size: 12px; + font-weight: 700; + min-width: 64px; + text-align: center; +} + +.endpoint-path { + font-family: 'JetBrains Mono', monospace; + font-size: 14px; + color: var(--text-primary); +} + +.endpoint-summary { + flex: 1; + font-size: 14px; + color: var(--text-secondary); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.expand-icon { + color: var(--text-muted); + font-size: 12px; + transition: transform var(--transition-fast); +} + +.endpoint-card.expanded .expand-icon { + transform: rotate(180deg); +} + +.endpoint-details { + display: none; + padding: 20px; + border-top: 1px solid var(--border-color); + background: var(--bg-secondary); +} + +.endpoint-card.expanded .endpoint-details { + display: block; +} + +.endpoint-description { + margin-bottom: 20px; +} + +.endpoint-description h4, +.parameters-section h4, +.responses-section h4, +.try-it-section h4 { + font-size: 13px; + font-weight: 600; + color: var(--text-primary); + margin-bottom: 12px; + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.endpoint-description p { + color: var(--text-secondary); + font-size: 14px; +} + +.parameters-table { + width: 100%; + border-collapse: collapse; + font-size: 14px; +} + +.parameters-table th, +.parameters-table td { + padding: 12px 16px; + text-align: left; + border-bottom: 1px solid var(--border-color); +} + +.parameters-table th { + font-weight: 600; + color: var(--text-secondary); + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.5px; + background: var(--bg-tertiary); +} + +.parameters-table code { + font-family: 'JetBrains Mono', monospace; + font-size: 12px; + background: var(--bg-tertiary); + padding: 2px 6px; + border-radius: 4px; +} + +.param-location { + font-size: 11px; + padding: 2px 8px; + background: var(--bg-tertiary); + border-radius: var(--radius-sm); + color: var(--text-muted); +} + +.param-type { + color: var(--primary-color); +} + +.responses-list { + display: flex; + flex-wrap: wrap; + gap: 12px; +} + +.response-item { + display: flex; + align-items: center; + gap: 8px; +} + +.response-status { + padding: 4px 10px; + border-radius: var(--radius-sm); + font-size: 12px; + font-weight: 600; +} + +.response-status-2xx { background: #dcfce7; color: #15803d; } +.response-status-3xx { background: #dbeafe; color: #1d4ed8; } +.response-status-4xx { background: #fee2e2; color: #dc2626; } +.response-status-5xx { background: #fef3c7; color: #b45309; } + +.try-it-section { + margin-top: 24px; + padding-top: 24px; + border-top: 1px solid var(--border-color); +} + +.generate-curl-btn { + padding: 10px 20px; + background: var(--primary-color); + color: white; + border: none; + border-radius: var(--radius-md); + font-size: 14px; + font-weight: 500; + cursor: pointer; + transition: background var(--transition-fast); +} + +.generate-curl-btn:hover { + background: var(--primary-hover); +} + +.curl-output { + margin-top: 16px; + padding: 16px; + background: #1e293b; + border-radius: var(--radius-md); + overflow-x: auto; + display: none; +} + +.curl-output.visible { + display: block; +} + +.curl-output code { + font-family: 'JetBrains Mono', monospace; + font-size: 13px; + color: #e2e8f0; + white-space: pre; +} + +.copy-curl-btn { + margin-top: 8px; + padding: 6px 12px; + background: var(--bg-tertiary); + color: var(--text-primary); + border: 1px solid var(--border-color); + border-radius: var(--radius-sm); + font-size: 12px; + cursor: pointer; + transition: all var(--transition-fast); +} + +.copy-curl-btn:hover { + background: var(--border-color); +} + +.source-location { + margin-top: 16px; + padding-top: 16px; + border-top: 1px solid var(--border-color); + color: var(--text-muted); + font-size: 12px; +} + +.api-description { + background: var(--bg-secondary); + border: 1px solid var(--border-color); + border-radius: var(--radius-lg); + padding: 24px; + margin-bottom: 32px; +} + +.api-description p { + color: var(--text-secondary); + font-size: 15px; +} + +@media (max-width: 1024px) { + .sidebar { + transform: translateX(-100%); + } + + .main-content { + margin-left: 0; + max-width: 100%; + padding: 24px; + } +}