Hugging Face's logo

Spaces:
b08x
/
blueprintscli
Running

App Files Community
b08x commited on
Commit
5c8196e
·
verified ·
1 Parent(s): 38068dc

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +528 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Blueprintscli
3
- emoji: 👀
4
- colorFrom: yellow
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: blueprintscli
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,528 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>BlueprintsCLI: Semantic Code Snippet Management</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ fontFamily: {
15
+ sans: ['Inter', 'sans-serif'],
16
+ mono: ['Fira Code', 'monospace'],
17
+ },
18
+ colors: {
19
+ primary: {
20
+ light: '#6366f1',
21
+ dark: '#818cf8',
22
+ },
23
+ dark: {
24
+ 900: '#0f172a',
25
+ 800: '#1e293b',
26
+ 700: '#334155',
27
+ 600: '#475569',
28
+ }
29
+ }
30
+ }
31
+ }
32
+ }
33
+ </script>
34
+ <style>
35
+ body {
36
+ font-family: 'Inter', sans-serif;
37
+ }
38
+ .code-block {
39
+ font-family: 'Fira Code', monospace;
40
+ }
41
+ .workflow-step {
42
+ transition: all 0.3s ease;
43
+ }
44
+ .workflow-step:hover {
45
+ transform: translateY(-5px);
46
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
47
+ }
48
+ .gradient-text {
49
+ background-clip: text;
50
+ -webkit-background-clip: text;
51
+ color: transparent;
52
+ background-image: linear-gradient(90deg, #6366f1, #818cf8);
53
+ }
54
+ </style>
55
+ </head>
56
+ <body class="bg-gray-50 dark:bg-dark-900 text-gray-800 dark:text-gray-200 min-h-screen">
57
+ <header class="sticky top-0 z-50 bg-white/80 dark:bg-dark-900/80 backdrop-blur-md border-b border-gray-200 dark:border-gray-800">
58
+ <div class="container mx-auto px-4 py-4 flex justify-between items-center">
59
+ <div class="flex items-center space-x-2">
60
+ <div class="w-8 h-8 rounded-md bg-primary-light dark:bg-primary-dark flex items-center justify-center">
61
+ <i class="fas fa-code text-white"></i>
62
+ </div>
63
+ <span class="text-xl font-bold">Blueprints<span class="gradient-text">CLI</span></span>
64
+ </div>
65
+ <nav class="hidden md:flex space-x-8">
66
+ <a href="#features" class="hover:text-primary-light dark:hover:text-primary-dark transition">Features</a>
67
+ <a href="#workflow" class="hover:text-primary-light dark:hover:text-primary-dark transition">Workflow</a>
68
+ <a href="#technology" class="hover:text-primary-light dark:hover:text-primary-dark transition">Technology</a>
69
+ <a href="#commands" class="hover:text-primary-light dark:hover:text-primary-dark transition">Commands</a>
70
+ </nav>
71
+ <div>
72
+ <a href="#installation" class="bg-primary-light dark:bg-primary-dark text-white px-4 py-2 rounded-md hover:opacity-90 transition font-medium">Get Started</a>
73
+ </div>
74
+ </div>
75
+ </header>
76
+
77
+ <main class="container mx-auto px-4 py-12">
78
+ <!-- Hero Section -->
79
+ <section class="text-center py-16">
80
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">
81
+ <span class="gradient-text">BlueprintsCLI</span>
82
+ </h1>
83
+ <p class="text-xl md:text-2xl max-w-3xl mx-auto mb-8">
84
+ A command-line tool for storing and finding code snippets using semantic search
85
+ </p>
86
+ <div class="flex justify-center space-x-4 mb-12">
87
+ <a href="#installation" class="bg-primary-light dark:bg-primary-dark text-white px-6 py-3 rounded-md hover:opacity-90 transition font-medium text-lg">
88
+ Installation Guide
89
+ </a>
90
+ <button onclick="toggleDemo()" class="border border-primary-light dark:border-primary-dark text-primary-light dark:text-primary-dark px-6 py-3 rounded-md hover:bg-primary-light/10 transition font-medium text-lg">
91
+ Live Demo
92
+ </button>
93
+ </div>
94
+ <div class="max-w-4xl mx-auto bg-dark-800 rounded-xl overflow-hidden shadow-xl">
95
+ <div class="flex items-center px-4 py-2 bg-dark-700 border-b border-dark-600">
96
+ <div class="flex space-x-2 mr-4">
97
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
98
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
99
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
100
+ </div>
101
+ <div class="text-sm text-gray-400">terminal</div>
102
+ </div>
103
+ <div class="p-4 code-block">
104
+ <div class="text-green-400 mb-2">$ blueprintsCLI submit ./snippet.js --lang=javascript</div>
105
+ <div class="text-gray-400 mb-2">Analyzing code snippet...</div>
106
+ <div class="text-gray-400 mb-2">Generated metadata:</div>
107
+ <div class="ml-4 mb-2">
108
+ <div class="text-gray-300">Name: <span class="text-white">"React useState Hook Example"</span></div>
109
+ <div class="text-gray-300">Description: <span class="text-white">"Demonstrates basic usage of React's useState hook for state management"</span></div>
110
+ <div class="text-gray-300">Categories: <span class="text-white">["react", "hooks", "state-management"]</span></div>
111
+ </div>
112
+ <div class="text-green-400">Snippet stored successfully with ID: 5f8d3a7b</div>
113
+ </div>
114
+ </div>
115
+ </section>
116
+
117
+ <!-- Features Section -->
118
+ <section id="features" class="py-16">
119
+ <h2 class="text-3xl font-bold mb-12 text-center">Core Features</h2>
120
+ <div class="grid md:grid-cols-3 gap-8">
121
+ <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700">
122
+ <div class="w-12 h-12 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 flex items-center justify-center mb-4">
123
+ <i class="fas fa-upload text-primary-light dark:text-primary-dark text-xl"></i>
124
+ </div>
125
+ <h3 class="text-xl font-bold mb-2">Submit Code</h3>
126
+ <p class="text-gray-600 dark:text-gray-400">Store code snippets with automatically generated metadata including name, description, and categories.</p>
127
+ </div>
128
+ <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700">
129
+ <div class="w-12 h-12 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 flex items-center justify-center mb-4">
130
+ <i class="fas fa-search text-primary-light dark:text-primary-dark text-xl"></i>
131
+ </div>
132
+ <h3 class="text-xl font-bold mb-2">Semantic Search</h3>
133
+ <p class="text-gray-600 dark:text-gray-400">Find snippets using natural language queries that understand the meaning behind your code.</p>
134
+ </div>
135
+ <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700">
136
+ <div class="w-12 h-12 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 flex items-center justify-center mb-4">
137
+ <i class="fas fa-list text-primary-light dark:text-primary-dark text-xl"></i>
138
+ </div>
139
+ <h3 class="text-xl font-bold mb-2">Organized Listings</h3>
140
+ <p class="text-gray-600 dark:text-gray-400">Browse all your stored snippets with their metadata in a structured, easily navigable format.</p>
141
+ </div>
142
+ </div>
143
+ </section>
144
+
145
+ <!-- Workflow Section -->
146
+ <section id="workflow" class="py-16">
147
+ <h2 class="text-3xl font-bold mb-12 text-center">Visual Workflow</h2>
148
+ <div class="grid md:grid-cols-3 gap-8">
149
+ <div class="workflow-step bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700">
150
+ <div class="text-center mb-4">
151
+ <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 text-primary-light dark:text-primary-dark text-2xl">
152
+ 1
153
+ </div>
154
+ </div>
155
+ <h3 class="text-xl font-bold mb-4 text-center">Input Code</h3>
156
+ <div class="code-block bg-dark-800 rounded-lg p-4 mb-4">
157
+ <div class="text-green-400">$ blueprintsCLI submit ./auth-middleware.js</div>
158
+ </div>
159
+ <p class="text-gray-600 dark:text-gray-400">Submit your code snippet or file through the command line interface.</p>
160
+ </div>
161
+ <div class="workflow-step bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700">
162
+ <div class="text-center mb-4">
163
+ <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 text-primary-light dark:text-primary-dark text-2xl">
164
+ 2
165
+ </div>
166
+ </div>
167
+ <h3 class="text-xl font-bold mb-4 text-center">Process Metadata</h3>
168
+ <div class="code-block bg-dark-800 rounded-lg p-4 mb-4">
169
+ <div class="text-gray-400">Generating metadata...</div>
170
+ <div class="text-white">Name: "JWT Authentication Middleware"</div>
171
+ <div class="text-white">Description: "Express middleware for JWT authentication"</div>
172
+ <div class="text-white">Tags: ["nodejs", "authentication", "express"]</div>
173
+ </div>
174
+ <p class="text-gray-600 dark:text-gray-400">The tool analyzes your code and generates descriptive metadata automatically.</p>
175
+ </div>
176
+ <div class="workflow-step bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700">
177
+ <div class="text-center mb-4">
178
+ <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-primary-light/10 dark:bg-primary-dark/10 text-primary-light dark:text-primary-dark text-2xl">
179
+ 3
180
+ </div>
181
+ </div>
182
+ <h3 class="text-xl font-bold mb-4 text-center">Search & Retrieve</h3>
183
+ <div class="code-block bg-dark-800 rounded-lg p-4 mb-4">
184
+ <div class="text-green-400">$ blueprintsCLI search "how to verify JWT token"</div>
185
+ <div class="text-white">Found 3 matching blueprints:</div>
186
+ <div class="text-yellow-400 ml-4">1. JWT Authentication Middleware (nodejs)</div>
187
+ <div class="text-yellow-400 ml-4">2. JWT Verification Utility (javascript)</div>
188
+ </div>
189
+ <p class="text-gray-600 dark:text-gray-400">Find your code later using natural language queries that understand the context.</p>
190
+ </div>
191
+ </div>
192
+ </section>
193
+
194
+ <!-- Technology Section -->
195
+ <section id="technology" class="py-16">
196
+ <h2 class="text-3xl font-bold mb-12 text-center">Powered By</h2>
197
+ <div class="grid md:grid-cols-4 gap-6">
198
+ <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 flex flex-col items-center">
199
+ <div class="w-16 h-16 mb-4">
200
+ <img src="https://www.postgresql.org/media/img/about/press/elephant.png" alt="PostgreSQL" class="w-full h-full object-contain">
201
+ </div>
202
+ <h3 class="text-lg font-bold">PostgreSQL</h3>
203
+ <p class="text-sm text-gray-600 dark:text-gray-400 text-center">With pgvector extension for efficient similarity search</p>
204
+ </div>
205
+ <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 flex flex-col items-center">
206
+ <div class="w-16 h-16 mb-4">
207
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a0/Google_G_Logo.svg/2048px-Google_G_Logo.svg.png" alt="Google" class="w-full h-full object-contain">
208
+ </div>
209
+ <h3 class="text-lg font-bold">Google Embeddings</h3>
210
+ <p class="text-sm text-gray-600 dark:text-gray-400 text-center">text-embedding-004 model for semantic understanding</p>
211
+ </div>
212
+ <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 flex flex-col items-center">
213
+ <div class="w-16 h-16 mb-4">
214
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/OpenAI_Logo.svg/2560px-OpenAI_Logo.svg.png" alt="OpenAI" class="w-full h-full object-contain opacity-90">
215
+ </div>
216
+ <h3 class="text-lg font-bold">OpenAI/Gemini</h3>
217
+ <p class="text-sm text-gray-600 dark:text-gray-400 text-center">For metadata generation and AI-powered features</p>
218
+ </div>
219
+ <div class="bg-white dark:bg-dark-800 p-6 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 flex flex-col items-center">
220
+ <div class="w-16 h-16 mb-4">
221
+ <i class="fas fa-terminal text-4xl text-primary-light dark:text-primary-dark"></i>
222
+ </div>
223
+ <h3 class="text-lg font-bold">CLI First</h3>
224
+ <p class="text-sm text-gray-600 dark:text-gray-400 text-center">Designed for developer workflows with minimal friction</p>
225
+ </div>
226
+ </div>
227
+ </section>
228
+
229
+ <!-- Commands Section -->
230
+ <section id="commands" class="py-16">
231
+ <h2 class="text-3xl font-bold mb-12 text-center">Command Reference</h2>
232
+ <div class="bg-white dark:bg-dark-800 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 overflow-hidden">
233
+ <div class="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-200 dark:divide-dark-700">
234
+ <div class="p-6">
235
+ <h3 class="text-xl font-bold mb-4 flex items-center">
236
+ <i class="fas fa-upload mr-2 text-primary-light dark:text-primary-dark"></i>
237
+ Submit a Snippet
238
+ </h3>
239
+ <div class="code-block bg-dark-800 rounded-lg p-4 mb-4">
240
+ <div class="text-green-400">$ blueprintsCLI submit [file_path]</div>
241
+ <div class="text-gray-400">Options:</div>
242
+ <div class="text-gray-400 ml-4">--lang, -l: Specify language</div>
243
+ <div class="text-gray-400 ml-4">--name, -n: Custom name</div>
244
+ <div class="text-gray-400 ml-4">--desc, -d: Custom description</div>
245
+ </div>
246
+ <p class="text-gray-600 dark:text-gray-400">Submit a code file or snippet to be stored with automatically generated metadata.</p>
247
+ </div>
248
+ <div class="p-6">
249
+ <h3 class="text-xl font-bold mb-4 flex items-center">
250
+ <i class="fas fa-search mr-2 text-primary-light dark:text-primary-dark"></i>
251
+ Search Snippets
252
+ </h3>
253
+ <div class="code-block bg-dark-800 rounded-lg p-4 mb-4">
254
+ <div class="text-green-400">$ blueprintsCLI search "query"</div>
255
+ <div class="text-gray-400">Options:</div>
256
+ <div class="text-gray-400 ml-4">--limit, -l: Result limit</div>
257
+ <div class="text-gray-400 ml-4">--lang, -l: Filter by language</div>
258
+ </div>
259
+ <p class="text-gray-600 dark:text-gray-400">Find code snippets using natural language queries that understand the context of your code.</p>
260
+ </div>
261
+ </div>
262
+ <div class="grid md:grid-cols-2 divide-y md:divide-y-0 md:divide-x divide-gray-200 dark:divide-dark-700">
263
+ <div class="p-6">
264
+ <h3 class="text-xl font-bold mb-4 flex items-center">
265
+ <i class="fas fa-list mr-2 text-primary-light dark:text-primary-dark"></i>
266
+ List Snippets
267
+ </h3>
268
+ <div class="code-block bg-dark-800 rounded-lg p-4 mb-4">
269
+ <div class="text-green-400">$ blueprintsCLI list</div>
270
+ <div class="text-gray-400">Options:</div>
271
+ <div class="text-gray-400 ml-4">--limit, -l: Result limit</div>
272
+ <div class="text-gray-400 ml-4">--offset, -o: Pagination offset</div>
273
+ </div>
274
+ <p class="text-gray-600 dark:text-gray-400">View all stored snippets with their metadata in a structured format.</p>
275
+ </div>
276
+ <div class="p-6">
277
+ <h3 class="text-xl font-bold mb-4 flex items-center">
278
+ <i class="fas fa-eye mr-2 text-primary-light dark:text-primary-dark"></i>
279
+ View Snippet
280
+ </h3>
281
+ <div class="code-block bg-dark-800 rounded-lg p-4 mb-4">
282
+ <div class="text-green-400">$ blueprintsCLI view [id]</div>
283
+ <div class="text-gray-400">Options:</div>
284
+ <div class="text-gray-400 ml-4">--raw: Output raw code</div>
285
+ <div class="text-gray-400 ml-4">--meta: Only metadata</div>
286
+ </div>
287
+ <p class="text-gray-600 dark:text-gray-400">Display the full details of a specific snippet including code and metadata.</p>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </section>
292
+
293
+ <!-- Installation Section -->
294
+ <section id="installation" class="py-16">
295
+ <div class="bg-white dark:bg-dark-800 rounded-xl shadow-md border border-gray-200 dark:border-dark-700 p-8">
296
+ <h2 class="text-3xl font-bold mb-6 text-center">Get Started with BlueprintsCLI</h2>
297
+ <div class="max-w-3xl mx-auto">
298
+ <h3 class="text-xl font-bold mb-4 flex items-center">
299
+ <i class="fas fa-download mr-2 text-primary-light dark:text-primary-dark"></i>
300
+ Installation
301
+ </h3>
302
+ <div class="code-block bg-dark-800 rounded-lg p-4 mb-6">
303
+ <div class="text-green-400"># Using npm</div>
304
+ <div class="text-white">npm install -g blueprints-cli</div>
305
+ <div class="text-green-400 mt-2"># Or with yarn</div>
306
+ <div class="text-white">yarn global add blueprints-cli</div>
307
+ </div>
308
+
309
+ <h3 class="text-xl font-bold mb-4 flex items-center">
310
+ <i class="fas fa-cog mr-2 text-primary-light dark:text-primary-dark"></i>
311
+ Configuration
312
+ </h3>
313
+ <div class="code-block bg-dark-800 rounded-lg p-4 mb-6">
314
+ <div class="text-green-400"># Set up your API keys</div>
315
+ <div class="text-white">export BLUEPRINTS_OPENAI_KEY=your_key_here</div>
316
+ <div class="text-white">export BLUEPRINTS_GEMINI_KEY=your_key_here</div>
317
+ <div class="text-white">export DATABASE_URL=postgres://user:pass@host:port/db</div>
318
+ </div>
319
+
320
+ <h3 class="text-xl font-bold mb-4 flex items-center">
321
+ <i class="fas fa-rocket mr-2 text-primary-light dark:text-primary-dark"></i>
322
+ First Command
323
+ </h3>
324
+ <div class="code-block bg-dark-800 rounded-lg p-4 mb-6">
325
+ <div class="text-green-400"># Submit your first snippet</div>
326
+ <div class="text-white">blueprintsCLI submit ./example.js</div>
327
+ </div>
328
+
329
+ <div class="text-center mt-8">
330
+ <a href="#" class="bg-primary-light dark:bg-primary-dark text-white px-8 py-3 rounded-md hover:opacity-90 transition font-medium text-lg inline-block">
331
+ View Full Documentation
332
+ </a>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- Demo Modal -->
339
+ <div id="demoModal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4 hidden">
340
+ <div class="bg-white dark:bg-dark-800 rounded-xl shadow-2xl w-full max-w-4xl max-h-[90vh] overflow-hidden">
341
+ <div class="flex justify-between items-center px-6 py-4 border-b border-gray-200 dark:border-dark-700">
342
+ <h3 class="text-xl font-bold">Interactive Demo</h3>
343
+ <button onclick="toggleDemo()" class="text-gray-500 hover:text-gray-700 dark:hover:text-gray-300">
344
+ <i class="fas fa-times"></i>
345
+ </button>
346
+ </div>
347
+ <div class="p-6 overflow-auto" style="max-height: calc(90vh - 120px)">
348
+ <div class="mb-8">
349
+ <h4 class="text-lg font-bold mb-3">Submit a Code Snippet</h4>
350
+ <div class="flex flex-col md:flex-row gap-4">
351
+ <div class="flex-1">
352
+ <label class="block text-sm font-medium mb-1">Code Input</label>
353
+ <textarea id="demoCode" class="w-full code-block bg-dark-800 rounded-lg p-4 h-40" spellcheck="false">function greet(name) {
354
+ return `Hello, ${name}!`;
355
+ }</textarea>
356
+ </div>
357
+ <div class="flex-1">
358
+ <label class="block text-sm font-medium mb-1">Options</label>
359
+ <div class="bg-dark-800 rounded-lg p-4 h-40">
360
+ <div class="mb-2">
361
+ <label class="inline-flex items-center">
362
+ <input type="checkbox" class="rounded border-gray-300 text-primary-light dark:text-primary-dark" checked>
363
+ <span class="ml-2 text-sm">Auto-generate metadata</span>
364
+ </label>
365
+ </div>
366
+ <div class="mb-2">
367
+ <label class="block text-sm mb-1">Language</label>
368
+ <select class="w-full bg-dark-700 border border-dark-600 rounded px-3 py-1 text-sm">
369
+ <option>JavaScript</option>
370
+ <option>Python</option>
371
+ <option>TypeScript</option>
372
+ <option>Go</option>
373
+ <option>Rust</option>
374
+ </select>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+ <button onclick="submitDemo()" class="mt-4 bg-primary-light dark:bg-primary-dark text-white px-4 py-2 rounded hover:opacity-90 transition">
380
+ Submit Snippet
381
+ </button>
382
+ </div>
383
+
384
+ <div id="demoResults" class="hidden">
385
+ <h4 class="text-lg font-bold mb-3">Generated Metadata</h4>
386
+ <div class="bg-dark-800 rounded-lg p-4 mb-6">
387
+ <div class="grid grid-cols-3 gap-4">
388
+ <div>
389
+ <div class="text-sm text-gray-400">Name</div>
390
+ <div class="text-white" id="demoName">Simple Greeting Function</div>
391
+ </div>
392
+ <div>
393
+ <div class="text-sm text-gray-400">Language</div>
394
+ <div class="text-white">JavaScript</div>
395
+ </div>
396
+ <div>
397
+ <div class="text-sm text-gray-400">ID</div>
398
+ <div class="text-white">a1b2c3d4</div>
399
+ </div>
400
+ <div class="col-span-3">
401
+ <div class="text-sm text-gray-400">Description</div>
402
+ <div class="text-white" id="demoDesc">A simple function that takes a name parameter and returns a greeting string</div>
403
+ </div>
404
+ <div class="col-span-3">
405
+ <div class="text-sm text-gray-400">Categories</div>
406
+ <div class="text-white">["utility", "functions", "strings"]</div>
407
+ </div>
408
+ </div>
409
+ </div>
410
+
411
+ <h4 class="text-lg font-bold mb-3">Try Searching</h4>
412
+ <div class="flex mb-4">
413
+ <input type="text" id="demoSearch" placeholder="Search with natural language..." class="flex-1 code-block bg-dark-800 rounded-l-lg px-4 py-2 border-r-0">
414
+ <button onclick="searchDemo()" class="bg-primary-light dark:bg-primary-dark text-white px-4 py-2 rounded-r hover:opacity-90 transition">
415
+ Search
416
+ </button>
417
+ </div>
418
+ <div id="demoSearchResults" class="bg-dark-800 rounded-lg p-4 hidden">
419
+ <div class="text-white mb-2">Found 1 matching blueprint:</div>
420
+ <div class="pl-4 border-l-2 border-primary-light dark:border-primary-dark">
421
+ <div class="text-yellow-400 font-medium">Simple Greeting Function</div>
422
+ <div class="text-sm text-gray-400">JavaScript utility function for creating greetings</div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </div>
428
+ </div>
429
+ </main>
430
+
431
+ <footer class="bg-white dark:bg-dark-800 border-t border-gray-200 dark:border-dark-700 py-8">
432
+ <div class="container mx-auto px-4">
433
+ <div class="flex flex-col md:flex-row justify-between items-center">
434
+ <div class="flex items-center space-x-2 mb-4 md:mb-0">
435
+ <div class="w-8 h-8 rounded-md bg-primary-light dark:bg-primary-dark flex items-center justify-center">
436
+ <i class="fas fa-code text-white"></i>
437
+ </div>
438
+ <span class="text-lg font-bold">Blueprints<span class="gradient-text">CLI</span></span>
439
+ </div>
440
+ <div class="flex space-x-6">
441
+ <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition">
442
+ <i class="fab fa-github text-xl"></i>
443
+ </a>
444
+ <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition">
445
+ <i class="fab fa-twitter text-xl"></i>
446
+ </a>
447
+ <a href="#" class="text-gray-600 dark:text-gray-400 hover:text-primary-light dark:hover:text-primary-dark transition">
448
+ <i class="fab fa-discord text-xl"></i>
449
+ </a>
450
+ </div>
451
+ </div>
452
+ <div class="mt-8 pt-8 border-t border-gray-200 dark:border-dark-700 text-center text-sm text-gray-600 dark:text-gray-400">
453
+ <p>BlueprintsCLI is open-source and available under the MIT License.</p>
454
+ <p class="mt-2">© 2023 BlueprintsCLI Project. All rights reserved.</p>
455
+ </div>
456
+ </div>
457
+ </footer>
458
+
459
+ <script>
460
+ // Toggle dark mode
461
+ function toggleDarkMode() {
462
+ document.documentElement.classList.toggle('dark');
463
+ localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
464
+ }
465
+
466
+ // Check for saved dark mode preference
467
+ if (localStorage.getItem('darkMode') === 'true') {
468
+ document.documentElement.classList.add('dark');
469
+ } else if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
470
+ document.documentElement.classList.add('dark');
471
+ localStorage.setItem('darkMode', true);
472
+ }
473
+
474
+ // Demo modal functions
475
+ function toggleDemo() {
476
+ document.getElementById('demoModal').classList.toggle('hidden');
477
+ document.body.classList.toggle('overflow-hidden');
478
+ }
479
+
480
+ function submitDemo() {
481
+ const code = document.getElementById('demoCode').value;
482
+ if (code.trim() === '') {
483
+ alert('Please enter some code to submit');
484
+ return;
485
+ }
486
+
487
+ // Simple analysis for demo purposes
488
+ let name = "Code Snippet";
489
+ let desc = "A useful code snippet";
490
+
491
+ if (code.includes('function')) {
492
+ name = "Function: " + (code.match(/function\s+(\w+)/)?.[1] || 'Anonymous');
493
+ desc = "A function that " + (
494
+ code.includes('return') ? "returns a value" :
495
+ code.includes('console.log') ? "logs output" :
496
+ "performs an operation"
497
+ );
498
+ } else if (code.includes('class')) {
499
+ name = "Class: " + (code.match(/class\s+(\w+)/)?.[1] || 'Anonymous');
500
+ desc = "A class definition";
501
+ }
502
+
503
+ document.getElementById('demoName').textContent = name;
504
+ document.getElementById('demoDesc').textContent = desc;
505
+ document.getElementById('demoResults').classList.remove('hidden');
506
+ }
507
+
508
+ function searchDemo() {
509
+ const query = document.getElementById('demoSearch').value;
510
+ if (query.trim() === '') {
511
+ alert('Please enter a search query');
512
+ return;
513
+ }
514
+ document.getElementById('demoSearchResults').classList.remove('hidden');
515
+ }
516
+
517
+ // Smooth scrolling for anchor links
518
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
519
+ anchor.addEventListener('click', function (e) {
520
+ e.preventDefault();
521
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
522
+ behavior: 'smooth'
523
+ });
524
+ });
525
+ });
526
+ </script>
527
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=b08x/blueprintscli" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
528
+ </html>