@codexsploitx/schemaapi 1.1.12 → 1.1.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cli/templates/sdk.d.ts +1 -0
- package/dist/cli/templates/tests.d.ts +1 -0
- package/dist/cli.js +246 -118
- package/dist/cli.js.map +1 -1
- package/package.json +1 -1
- package/readme.md +105 -217
- package/website/docs.html +183 -0
- package/website/index.html +144 -0
- package/website/styles.css +417 -0
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>SchemaApi | The Future of Backend Development</title>
|
|
7
|
+
<link rel="stylesheet" href="styles.css">
|
|
8
|
+
<meta name="description" content="SchemaApi: The Universal Interface for Modern Backends. Write contracts once, deploy everywhere.">
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
|
|
12
|
+
<!-- Navigation -->
|
|
13
|
+
<nav class="container">
|
|
14
|
+
<a href="#" class="logo">
|
|
15
|
+
<span>⚡</span> SchemaApi
|
|
16
|
+
</a>
|
|
17
|
+
<div class="nav-links">
|
|
18
|
+
<a href="#features">Features</a>
|
|
19
|
+
<a href="#adapters">Adapters</a>
|
|
20
|
+
<a href="docs.html">Documentation</a>
|
|
21
|
+
</div>
|
|
22
|
+
<a href="docs.html" class="btn-cta">Get Started</a>
|
|
23
|
+
</nav>
|
|
24
|
+
|
|
25
|
+
<!-- Hero Section -->
|
|
26
|
+
<header class="hero container">
|
|
27
|
+
<span class="badge">v1.0 Now Available</span>
|
|
28
|
+
<h1>
|
|
29
|
+
Write Contracts Once.<br>
|
|
30
|
+
<span class="gradient-text-accent">Deploy Everywhere.</span>
|
|
31
|
+
</h1>
|
|
32
|
+
<p>
|
|
33
|
+
The universal interface for modern backends. Generate type-safe APIs, SDKs, and Tests automatically.
|
|
34
|
+
Stop writing boilerplate. Start shipping.
|
|
35
|
+
</p>
|
|
36
|
+
|
|
37
|
+
<div class="hero-buttons">
|
|
38
|
+
<a href="docs.html" class="btn-primary">Start Building →</a>
|
|
39
|
+
<a href="https://github.com/codexsploitx/schemaapi" class="btn-secondary">
|
|
40
|
+
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
|
|
41
|
+
GitHub
|
|
42
|
+
</a>
|
|
43
|
+
</div>
|
|
44
|
+
|
|
45
|
+
<!-- Terminal Preview -->
|
|
46
|
+
<div class="terminal-window">
|
|
47
|
+
<div class="terminal-header">
|
|
48
|
+
<div class="dot red"></div>
|
|
49
|
+
<div class="dot yellow"></div>
|
|
50
|
+
<div class="dot green"></div>
|
|
51
|
+
</div>
|
|
52
|
+
<div class="terminal-body">
|
|
53
|
+
<div class="output"><span class="cmd">➜</span> <span class="arg">npx</span> @codexsploitx/schemaapi init next</div>
|
|
54
|
+
<div class="output success">✔ SchemaApi initialized for Next.js</div>
|
|
55
|
+
<br>
|
|
56
|
+
<div class="output"><span class="cmd">➜</span> <span class="arg">npx</span> @codexsploitx/schemaapi generate resource users</div>
|
|
57
|
+
<div class="output success">✔ Created Contract: contracts/usersContract.ts</div>
|
|
58
|
+
<div class="output success">✔ Created Route: app/api/users/route.ts</div>
|
|
59
|
+
<br>
|
|
60
|
+
<div class="output"><span class="cmd">➜</span> <span class="arg">npx</span> @codexsploitx/schemaapi generate sdk users</div>
|
|
61
|
+
<div class="output success">✔ Created SDK Client: src/sdk/usersClient.ts</div>
|
|
62
|
+
<br>
|
|
63
|
+
<div class="output"><span class="comment"># Ready to use! Import UsersClient in your frontend.</span></div>
|
|
64
|
+
<div class="output"><span class="cmd">➜</span> <span class="blink">_</span></div>
|
|
65
|
+
</div>
|
|
66
|
+
</div>
|
|
67
|
+
</header>
|
|
68
|
+
|
|
69
|
+
<!-- Adapters Marquee -->
|
|
70
|
+
<section class="adapters-section" id="adapters">
|
|
71
|
+
<div class="container">
|
|
72
|
+
<div class="marquee-content">
|
|
73
|
+
<span class="adapter-item">Express</span>
|
|
74
|
+
<span class="adapter-item">Next.js</span>
|
|
75
|
+
<span class="adapter-item">NestJS</span>
|
|
76
|
+
<span class="adapter-item">Fastify</span>
|
|
77
|
+
<span class="adapter-item">Remix</span>
|
|
78
|
+
<span class="adapter-item">Koa</span>
|
|
79
|
+
<span class="adapter-item">Hapi</span>
|
|
80
|
+
<span class="adapter-item">Deno</span>
|
|
81
|
+
<span class="adapter-item">Express</span> <!-- Repeat for smooth loop -->
|
|
82
|
+
<span class="adapter-item">Next.js</span>
|
|
83
|
+
<span class="adapter-item">NestJS</span>
|
|
84
|
+
<span class="adapter-item">Fastify</span>
|
|
85
|
+
<span class="adapter-item">Remix</span>
|
|
86
|
+
<span class="adapter-item">Koa</span>
|
|
87
|
+
<span class="adapter-item">Hapi</span>
|
|
88
|
+
<span class="adapter-item">Deno</span>
|
|
89
|
+
</div>
|
|
90
|
+
</div>
|
|
91
|
+
</section>
|
|
92
|
+
|
|
93
|
+
<!-- Features Grid -->
|
|
94
|
+
<section class="features container" id="features">
|
|
95
|
+
<h2 style="text-align: center; font-size: 2.5rem; margin-bottom: 1rem;">Why SchemaApi?</h2>
|
|
96
|
+
<p style="text-align: center; color: var(--text-secondary); margin-bottom: 4rem;">Built for speed, consistency, and scalability.</p>
|
|
97
|
+
|
|
98
|
+
<div class="features-grid">
|
|
99
|
+
<div class="card">
|
|
100
|
+
<div class="card-icon">📄</div>
|
|
101
|
+
<h3>Contract First</h3>
|
|
102
|
+
<p>Define your data model once. SchemaApi ensures your Backend implementation and Frontend consumption are perfectly synced. No more "what was the field name again?".</p>
|
|
103
|
+
</div>
|
|
104
|
+
|
|
105
|
+
<div class="card">
|
|
106
|
+
<div class="card-icon">🚀</div>
|
|
107
|
+
<h3>Multi-Adapter</h3>
|
|
108
|
+
<p>Switch frameworks instantly. Started with Express but want to move to Fastify or Next.js? Just change the config and regenerate. Your logic stays, the boilerplate changes.</p>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<div class="card">
|
|
112
|
+
<div class="card-icon">⚡</div>
|
|
113
|
+
<h3>Auto SDK</h3>
|
|
114
|
+
<p>Frontend developers love this. Generate a fully typed TypeScript client automatically. Autocomplete for your API endpoints right inside VS Code.</p>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<div class="card">
|
|
118
|
+
<div class="card-icon">🛡️</div>
|
|
119
|
+
<h3>Type Safety</h3>
|
|
120
|
+
<p>End-to-end type safety from your database to your UI components. Catch errors at compile time, not in production.</p>
|
|
121
|
+
</div>
|
|
122
|
+
|
|
123
|
+
<div class="card">
|
|
124
|
+
<div class="card-icon">🧪</div>
|
|
125
|
+
<h3>Auto Tests</h3>
|
|
126
|
+
<p>Sleep better at night. Automatically generate integration tests for your resources to ensure your API behaves exactly as expected.</p>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="card">
|
|
130
|
+
<div class="card-icon">📦</div>
|
|
131
|
+
<h3>Zero Lock-in</h3>
|
|
132
|
+
<p>The generated code is yours. It's standard, readable TypeScript code. No hidden runtimes, no proprietary binaries.</p>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
</section>
|
|
136
|
+
|
|
137
|
+
<footer>
|
|
138
|
+
<div class="container">
|
|
139
|
+
<p>© 2026 SchemaApi. Open Source & Future Ready.</p>
|
|
140
|
+
</div>
|
|
141
|
+
</footer>
|
|
142
|
+
|
|
143
|
+
</body>
|
|
144
|
+
</html>
|
|
@@ -0,0 +1,417 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;700&display=swap');
|
|
2
|
+
|
|
3
|
+
html {
|
|
4
|
+
scroll-behavior: smooth;
|
|
5
|
+
scroll-padding-top: 2rem;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
:root {
|
|
9
|
+
--bg-color: #030305;
|
|
10
|
+
--text-primary: #ffffff;
|
|
11
|
+
--text-secondary: #a1a1aa;
|
|
12
|
+
--accent-primary: #7b2cbf; /* Deep Purple */
|
|
13
|
+
--accent-secondary: #00f5d4; /* Cyan */
|
|
14
|
+
--accent-tertiary: #f72585; /* Hot Pink */
|
|
15
|
+
--card-bg: rgba(255, 255, 255, 0.03);
|
|
16
|
+
--card-border: rgba(255, 255, 255, 0.1);
|
|
17
|
+
--glow-color: rgba(123, 44, 191, 0.5);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
* {
|
|
21
|
+
margin: 0;
|
|
22
|
+
padding: 0;
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
body {
|
|
27
|
+
font-family: 'Space Grotesk', sans-serif;
|
|
28
|
+
background-color: var(--bg-color);
|
|
29
|
+
color: var(--text-primary);
|
|
30
|
+
line-height: 1.6;
|
|
31
|
+
overflow-x: hidden;
|
|
32
|
+
background-image:
|
|
33
|
+
linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
|
|
34
|
+
linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
|
|
35
|
+
background-size: 50px 50px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
/* --- Utils --- */
|
|
39
|
+
.container {
|
|
40
|
+
max-width: 1200px;
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
padding: 0 2rem;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.gradient-text {
|
|
46
|
+
background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
|
|
47
|
+
-webkit-background-clip: text;
|
|
48
|
+
-webkit-text-fill-color: transparent;
|
|
49
|
+
background-clip: text;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.gradient-text-accent {
|
|
53
|
+
background: linear-gradient(135deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
|
|
54
|
+
-webkit-background-clip: text;
|
|
55
|
+
-webkit-text-fill-color: transparent;
|
|
56
|
+
background-clip: text;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* --- Navigation --- */
|
|
60
|
+
nav {
|
|
61
|
+
display: flex;
|
|
62
|
+
justify-content: space-between;
|
|
63
|
+
align-items: center;
|
|
64
|
+
padding: 2rem 0;
|
|
65
|
+
position: relative;
|
|
66
|
+
z-index: 10;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.logo {
|
|
70
|
+
font-size: 1.5rem;
|
|
71
|
+
font-weight: 700;
|
|
72
|
+
letter-spacing: -0.05em;
|
|
73
|
+
color: var(--text-primary);
|
|
74
|
+
text-decoration: none;
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
gap: 0.5rem;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.logo span {
|
|
81
|
+
color: var(--accent-secondary);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.nav-links {
|
|
85
|
+
display: flex;
|
|
86
|
+
gap: 2rem;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.nav-links a {
|
|
90
|
+
color: var(--text-secondary);
|
|
91
|
+
text-decoration: none;
|
|
92
|
+
font-weight: 500;
|
|
93
|
+
transition: color 0.3s ease;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.nav-links a:hover, .nav-links a.active {
|
|
97
|
+
color: var(--text-primary);
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.btn-cta {
|
|
101
|
+
background: var(--text-primary);
|
|
102
|
+
color: var(--bg-color);
|
|
103
|
+
padding: 0.75rem 1.5rem;
|
|
104
|
+
border-radius: 999px;
|
|
105
|
+
text-decoration: none;
|
|
106
|
+
font-weight: 600;
|
|
107
|
+
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
.btn-cta:hover {
|
|
111
|
+
transform: translateY(-2px);
|
|
112
|
+
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* --- Hero Section --- */
|
|
116
|
+
.hero {
|
|
117
|
+
min-height: 80vh;
|
|
118
|
+
display: flex;
|
|
119
|
+
flex-direction: column;
|
|
120
|
+
justify-content: center;
|
|
121
|
+
align-items: center;
|
|
122
|
+
text-align: center;
|
|
123
|
+
position: relative;
|
|
124
|
+
padding-top: 4rem;
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.hero::before {
|
|
128
|
+
content: '';
|
|
129
|
+
position: absolute;
|
|
130
|
+
top: 50%;
|
|
131
|
+
left: 50%;
|
|
132
|
+
transform: translate(-50%, -50%);
|
|
133
|
+
width: 600px;
|
|
134
|
+
height: 600px;
|
|
135
|
+
background: radial-gradient(circle, var(--glow-color) 0%, transparent 70%);
|
|
136
|
+
opacity: 0.2;
|
|
137
|
+
filter: blur(80px);
|
|
138
|
+
z-index: -1;
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.badge {
|
|
142
|
+
background: rgba(123, 44, 191, 0.2);
|
|
143
|
+
border: 1px solid rgba(123, 44, 191, 0.5);
|
|
144
|
+
color: #d0a3ff;
|
|
145
|
+
padding: 0.5rem 1rem;
|
|
146
|
+
border-radius: 999px;
|
|
147
|
+
font-size: 0.875rem;
|
|
148
|
+
margin-bottom: 2rem;
|
|
149
|
+
display: inline-block;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
.hero h1 {
|
|
153
|
+
font-size: clamp(3rem, 8vw, 6rem);
|
|
154
|
+
line-height: 1;
|
|
155
|
+
font-weight: 700;
|
|
156
|
+
letter-spacing: -0.03em;
|
|
157
|
+
margin-bottom: 1.5rem;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.hero p {
|
|
161
|
+
font-size: 1.25rem;
|
|
162
|
+
color: var(--text-secondary);
|
|
163
|
+
max-width: 600px;
|
|
164
|
+
margin-bottom: 3rem;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.hero-buttons {
|
|
168
|
+
display: flex;
|
|
169
|
+
gap: 1rem;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.btn-primary {
|
|
173
|
+
background: linear-gradient(135deg, var(--accent-primary) 0%, #5a189a 100%);
|
|
174
|
+
color: white;
|
|
175
|
+
padding: 1rem 2rem;
|
|
176
|
+
border-radius: 12px;
|
|
177
|
+
text-decoration: none;
|
|
178
|
+
font-weight: 600;
|
|
179
|
+
transition: all 0.3s ease;
|
|
180
|
+
border: 1px solid rgba(255,255,255,0.1);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.btn-primary:hover {
|
|
184
|
+
box-shadow: 0 0 30px var(--glow-color);
|
|
185
|
+
transform: translateY(-2px);
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
.btn-secondary {
|
|
189
|
+
background: rgba(255, 255, 255, 0.05);
|
|
190
|
+
color: var(--text-primary);
|
|
191
|
+
padding: 1rem 2rem;
|
|
192
|
+
border-radius: 12px;
|
|
193
|
+
text-decoration: none;
|
|
194
|
+
font-weight: 600;
|
|
195
|
+
border: 1px solid var(--card-border);
|
|
196
|
+
transition: all 0.3s ease;
|
|
197
|
+
display: flex;
|
|
198
|
+
align-items: center;
|
|
199
|
+
gap: 0.5rem;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.btn-secondary:hover {
|
|
203
|
+
background: rgba(255, 255, 255, 0.1);
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* --- Terminal Preview --- */
|
|
207
|
+
.terminal-window {
|
|
208
|
+
margin-top: 4rem;
|
|
209
|
+
background: #1e1e1e;
|
|
210
|
+
border-radius: 12px;
|
|
211
|
+
border: 1px solid var(--card-border);
|
|
212
|
+
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
|
|
213
|
+
width: 100%;
|
|
214
|
+
max-width: 800px;
|
|
215
|
+
overflow: hidden;
|
|
216
|
+
font-family: 'JetBrains Mono', monospace;
|
|
217
|
+
text-align: left;
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
.terminal-header {
|
|
221
|
+
background: #2d2d2d;
|
|
222
|
+
padding: 0.75rem 1rem;
|
|
223
|
+
display: flex;
|
|
224
|
+
gap: 0.5rem;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.dot {
|
|
228
|
+
width: 12px;
|
|
229
|
+
height: 12px;
|
|
230
|
+
border-radius: 50%;
|
|
231
|
+
}
|
|
232
|
+
.dot.red { background: #ff5f56; }
|
|
233
|
+
.dot.yellow { background: #ffbd2e; }
|
|
234
|
+
.dot.green { background: #27c93f; }
|
|
235
|
+
|
|
236
|
+
.terminal-body {
|
|
237
|
+
padding: 1.5rem;
|
|
238
|
+
color: #d4d4d4;
|
|
239
|
+
font-size: 0.9rem;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.cmd { color: var(--accent-secondary); }
|
|
243
|
+
.arg { color: var(--text-primary); }
|
|
244
|
+
.comment { color: #6a9955; }
|
|
245
|
+
.output { color: var(--text-secondary); margin-bottom: 0.5rem; display: block; }
|
|
246
|
+
.success { color: #27c93f; }
|
|
247
|
+
|
|
248
|
+
/* --- Features Grid --- */
|
|
249
|
+
.features {
|
|
250
|
+
padding: 8rem 0;
|
|
251
|
+
}
|
|
252
|
+
|
|
253
|
+
.features-grid {
|
|
254
|
+
display: grid;
|
|
255
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
256
|
+
gap: 2rem;
|
|
257
|
+
margin-top: 4rem;
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
.card {
|
|
261
|
+
background: var(--card-bg);
|
|
262
|
+
border: 1px solid var(--card-border);
|
|
263
|
+
padding: 2rem;
|
|
264
|
+
border-radius: 20px;
|
|
265
|
+
backdrop-filter: blur(10px);
|
|
266
|
+
transition: transform 0.3s ease, border-color 0.3s ease;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
.card:hover {
|
|
270
|
+
transform: translateY(-5px);
|
|
271
|
+
border-color: var(--accent-primary);
|
|
272
|
+
}
|
|
273
|
+
|
|
274
|
+
.card-icon {
|
|
275
|
+
font-size: 2rem;
|
|
276
|
+
margin-bottom: 1.5rem;
|
|
277
|
+
background: rgba(255,255,255,0.05);
|
|
278
|
+
width: 60px;
|
|
279
|
+
height: 60px;
|
|
280
|
+
display: flex;
|
|
281
|
+
align-items: center;
|
|
282
|
+
justify-content: center;
|
|
283
|
+
border-radius: 12px;
|
|
284
|
+
color: var(--accent-secondary);
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.card h3 {
|
|
288
|
+
font-size: 1.5rem;
|
|
289
|
+
margin-bottom: 1rem;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.card p {
|
|
293
|
+
color: var(--text-secondary);
|
|
294
|
+
font-size: 1rem;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
/* --- Adapters Marquee --- */
|
|
298
|
+
.adapters-section {
|
|
299
|
+
padding: 4rem 0;
|
|
300
|
+
overflow: hidden;
|
|
301
|
+
border-top: 1px solid var(--card-border);
|
|
302
|
+
border-bottom: 1px solid var(--card-border);
|
|
303
|
+
background: rgba(0,0,0,0.3);
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
.marquee-content {
|
|
307
|
+
display: flex;
|
|
308
|
+
gap: 4rem;
|
|
309
|
+
animation: scroll 20s linear infinite;
|
|
310
|
+
white-space: nowrap;
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.adapter-item {
|
|
314
|
+
font-size: 1.5rem;
|
|
315
|
+
font-weight: 700;
|
|
316
|
+
color: var(--text-secondary);
|
|
317
|
+
opacity: 0.5;
|
|
318
|
+
transition: opacity 0.3s;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
.adapter-item:hover {
|
|
322
|
+
opacity: 1;
|
|
323
|
+
color: var(--accent-secondary);
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
@keyframes scroll {
|
|
327
|
+
0% { transform: translateX(0); }
|
|
328
|
+
100% { transform: translateX(-50%); }
|
|
329
|
+
}
|
|
330
|
+
|
|
331
|
+
/* --- Documentation Styles --- */
|
|
332
|
+
.docs-layout {
|
|
333
|
+
display: grid;
|
|
334
|
+
grid-template-columns: 250px 1fr;
|
|
335
|
+
gap: 4rem;
|
|
336
|
+
padding-top: 4rem;
|
|
337
|
+
padding-bottom: 4rem;
|
|
338
|
+
}
|
|
339
|
+
|
|
340
|
+
.sidebar {
|
|
341
|
+
position: sticky;
|
|
342
|
+
top: 2rem;
|
|
343
|
+
height: fit-content;
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
.sidebar ul {
|
|
347
|
+
list-style: none;
|
|
348
|
+
}
|
|
349
|
+
|
|
350
|
+
.sidebar li {
|
|
351
|
+
margin-bottom: 0.5rem;
|
|
352
|
+
}
|
|
353
|
+
|
|
354
|
+
.sidebar a {
|
|
355
|
+
color: var(--text-secondary);
|
|
356
|
+
text-decoration: none;
|
|
357
|
+
font-size: 1rem;
|
|
358
|
+
display: block;
|
|
359
|
+
padding: 0.5rem 1rem;
|
|
360
|
+
border-radius: 8px;
|
|
361
|
+
transition: all 0.2s;
|
|
362
|
+
}
|
|
363
|
+
|
|
364
|
+
.sidebar a:hover, .sidebar a.active {
|
|
365
|
+
background: rgba(255,255,255,0.05);
|
|
366
|
+
color: var(--accent-secondary);
|
|
367
|
+
padding-left: 1.5rem;
|
|
368
|
+
}
|
|
369
|
+
|
|
370
|
+
.docs-content h1 {
|
|
371
|
+
font-size: 3rem;
|
|
372
|
+
margin-bottom: 2rem;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.docs-content h2 {
|
|
376
|
+
font-size: 2rem;
|
|
377
|
+
margin-top: 3rem;
|
|
378
|
+
margin-bottom: 1.5rem;
|
|
379
|
+
color: var(--text-primary);
|
|
380
|
+
border-bottom: 1px solid var(--card-border);
|
|
381
|
+
padding-bottom: 0.5rem;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.docs-content p {
|
|
385
|
+
color: var(--text-secondary);
|
|
386
|
+
margin-bottom: 1.5rem;
|
|
387
|
+
font-size: 1.1rem;
|
|
388
|
+
}
|
|
389
|
+
|
|
390
|
+
.code-block {
|
|
391
|
+
background: #111;
|
|
392
|
+
padding: 1.5rem;
|
|
393
|
+
border-radius: 12px;
|
|
394
|
+
font-family: 'JetBrains Mono', monospace;
|
|
395
|
+
color: #e0e0e0;
|
|
396
|
+
overflow-x: auto;
|
|
397
|
+
margin-bottom: 1.5rem;
|
|
398
|
+
border: 1px solid var(--card-border);
|
|
399
|
+
}
|
|
400
|
+
|
|
401
|
+
.highlight { color: var(--accent-tertiary); }
|
|
402
|
+
.cmd-text { color: var(--accent-secondary); }
|
|
403
|
+
|
|
404
|
+
/* --- Footer --- */
|
|
405
|
+
footer {
|
|
406
|
+
padding: 4rem 0;
|
|
407
|
+
text-align: center;
|
|
408
|
+
color: var(--text-secondary);
|
|
409
|
+
border-top: 1px solid var(--card-border);
|
|
410
|
+
margin-top: 4rem;
|
|
411
|
+
}
|
|
412
|
+
|
|
413
|
+
@media (max-width: 768px) {
|
|
414
|
+
.hero h1 { font-size: 3rem; }
|
|
415
|
+
.docs-layout { grid-template-columns: 1fr; }
|
|
416
|
+
.sidebar { display: none; } /* Mobile menu simplified for now */
|
|
417
|
+
}
|