Hugging Face's logo

Spaces:
GenAILearniverse
/
TextSummarizer
Running

App Files Community
1
GenAILearniverse commited on
Commit
2109cdd
·
verified ·
1 Parent(s): 2068c20

Upload steps.html

Browse files
Files changed (1) hide show
  1. steps.html +394 -0
steps.html ADDED
@@ -0,0 +1,394 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Bolt.DIY Installation Guide</title>
7
+ <style>
8
+ :root {
9
+ --primary: #2563eb;
10
+ --primary-light: #3b82f6;
11
+ --primary-dark: #1d4ed8;
12
+ --gray-50: #f8fafc;
13
+ --gray-100: #f1f5f9;
14
+ --gray-200: #e2e8f0;
15
+ --gray-700: #334155;
16
+ --gray-800: #1e293b;
17
+ --gray-900: #0f172a;
18
+ --success: #22c55e;
19
+ }
20
+
21
+ * {
22
+ margin: 0;
23
+ padding: 0;
24
+ box-sizing: border-box;
25
+ }
26
+
27
+ body {
28
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
29
+ line-height: 1.6;
30
+ color: var(--gray-800);
31
+ background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
32
+ min-height: 100vh;
33
+ padding: 2rem;
34
+ }
35
+
36
+ .container {
37
+ max-width: 1000px;
38
+ margin: 0 auto;
39
+ }
40
+
41
+ .hero {
42
+ text-align: center;
43
+ margin-bottom: 3rem;
44
+ padding: 2rem;
45
+ background: white;
46
+ border-radius: 1rem;
47
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
48
+ transform: translateY(0);
49
+ transition: transform 0.2s ease;
50
+ }
51
+
52
+ .hero:hover {
53
+ transform: translateY(-2px);
54
+ }
55
+
56
+ .title {
57
+ font-size: 2.5rem;
58
+ color: var(--gray-900);
59
+ margin-bottom: 1rem;
60
+ background: linear-gradient(120deg, var(--primary) 0%, var(--primary-light) 100%);
61
+ -webkit-background-clip: text;
62
+ -webkit-text-fill-color: transparent;
63
+ }
64
+
65
+ .subtitle {
66
+ color: var(--gray-700);
67
+ font-size: 1.1rem;
68
+ }
69
+
70
+ .section {
71
+ background: white;
72
+ border-radius: 1rem;
73
+ padding: 2rem;
74
+ margin-bottom: 2rem;
75
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
76
+ }
77
+
78
+ .section-title {
79
+ font-size: 1.5rem;
80
+ color: var(--gray-900);
81
+ margin-bottom: 1.5rem;
82
+ padding-bottom: 0.75rem;
83
+ border-bottom: 2px solid var(--gray-200);
84
+ display: flex;
85
+ align-items: center;
86
+ }
87
+
88
+ .section-title::before {
89
+ content: '';
90
+ display: inline-block;
91
+ width: 4px;
92
+ height: 1.5rem;
93
+ background: var(--primary);
94
+ margin-right: 1rem;
95
+ border-radius: 2px;
96
+ }
97
+
98
+ .step {
99
+ position: relative;
100
+ padding: 1.5rem;
101
+ margin-bottom: 1rem;
102
+ border-radius: 0.75rem;
103
+ background: var(--gray-50);
104
+ border: 1px solid var(--gray-200);
105
+ transition: all 0.2s ease;
106
+ }
107
+
108
+ .step:hover {
109
+ background: white;
110
+ border-color: var(--primary-light);
111
+ transform: translateX(4px);
112
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
113
+ }
114
+
115
+ .step-header {
116
+ display: flex;
117
+ align-items: center;
118
+ margin-bottom: 1rem;
119
+ }
120
+
121
+ .step-number {
122
+ background: var(--primary);
123
+ color: white;
124
+ width: 2rem;
125
+ height: 2rem;
126
+ border-radius: 50%;
127
+ display: flex;
128
+ align-items: center;
129
+ justify-content: center;
130
+ font-weight: bold;
131
+ margin-right: 1rem;
132
+ flex-shrink: 0;
133
+ }
134
+
135
+ .step-title {
136
+ font-weight: 600;
137
+ color: var(--gray-900);
138
+ }
139
+
140
+ .code-block {
141
+ background: var(--gray-900);
142
+ color: #e2e8f0;
143
+ padding: 1rem;
144
+ border-radius: 0.5rem;
145
+ font-family: 'Monaco', 'Consolas', monospace;
146
+ margin: 1rem 0;
147
+ position: relative;
148
+ overflow-x: auto;
149
+ cursor: pointer;
150
+ transition: all 0.2s ease;
151
+ }
152
+
153
+ .code-block:hover {
154
+ transform: translateY(-2px);
155
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
156
+ }
157
+
158
+ .code-block::after {
159
+ content: 'Click to copy';
160
+ position: absolute;
161
+ top: 0.5rem;
162
+ right: 0.5rem;
163
+ padding: 0.25rem 0.5rem;
164
+ background: rgba(255, 255, 255, 0.1);
165
+ border-radius: 0.25rem;
166
+ font-size: 0.75rem;
167
+ opacity: 0;
168
+ transition: opacity 0.2s ease;
169
+ }
170
+
171
+ .code-block:hover::after {
172
+ opacity: 1;
173
+ }
174
+
175
+ .code-block.copied {
176
+ background: var(--success);
177
+ }
178
+
179
+ .link {
180
+ color: var(--primary);
181
+ text-decoration: none;
182
+ position: relative;
183
+ transition: color 0.2s ease;
184
+ }
185
+
186
+ .link::after {
187
+ content: '';
188
+ position: absolute;
189
+ width: 100%;
190
+ height: 2px;
191
+ bottom: -2px;
192
+ left: 0;
193
+ background: var(--primary);
194
+ transform: scaleX(0);
195
+ transform-origin: right;
196
+ transition: transform 0.2s ease;
197
+ }
198
+
199
+ .link:hover {
200
+ color: var(--primary-dark);
201
+ }
202
+
203
+ .link:hover::after {
204
+ transform: scaleX(1);
205
+ transform-origin: left;
206
+ }
207
+
208
+ .or-divider {
209
+ text-align: center;
210
+ margin: 1rem 0;
211
+ font-weight: 500;
212
+ color: var(--gray-700);
213
+ }
214
+
215
+ @media (max-width: 768px) {
216
+ body {
217
+ padding: 1rem;
218
+ }
219
+
220
+ .title {
221
+ font-size: 2rem;
222
+ }
223
+
224
+ .section {
225
+ padding: 1.5rem;
226
+ }
227
+
228
+ .step {
229
+ padding: 1rem;
230
+ }
231
+ }
232
+ </style>
233
+ </head>
234
+ <body>
235
+ <div class="container">
236
+ <div class="hero">
237
+ <h1 class="title">Bolt.DIY Installation Guide</h1>
238
+ <p class="subtitle">Complete setup guide for your development environment</p>
239
+ </div>
240
+
241
+ <div class="section">
242
+ <h2 class="section-title">Initial Setup Requirements</h2>
243
+ <div class="step">
244
+ <div class="step-header">
245
+ <div class="step-number">1</div>
246
+ <div class="step-title">Install Git</div>
247
+ </div>
248
+ <p>Get started by downloading and installing Git from:</p>
249
+ <a href="https://git-scm.com" class="link" target="_blank">https://git-scm.com</a>
250
+
251
+ <div class="or-divider">OR</div>
252
+
253
+ <p>Download the project directly:</p>
254
+ <a href="https://github.com/stackblitz-labs/bolt.diy/releases/tag/v0.0.6" class="link" target="_blank">Download v0.0.6 from GitHub Releases</a>
255
+ </div>
256
+
257
+ <div class="step">
258
+ <div class="step-header">
259
+ <div class="step-number">2</div>
260
+ <div class="step-title">Set Up Node.js</div>
261
+ </div>
262
+ <p>Install the LTS version of Node.js from:</p>
263
+ <a href="https://nodejs.org" class="link" target="_blank">https://nodejs.org</a>
264
+ <p>Verify your installation:</p>
265
+ <div class="code-block">node --version
266
+ npm --version</div>
267
+ </div>
268
+
269
+ <div class="step">
270
+ <div class="step-header">
271
+ <div class="step-number">3</div>
272
+ <div class="step-title">Install PNPM Package Manager</div>
273
+ </div>
274
+ <p>Install PNPM globally using npm:</p>
275
+ <div class="code-block">npm install -g pnpm</div>
276
+ <p>Verify the installation:</p>
277
+ <div class="code-block">pnpm --version</div>
278
+ </div>
279
+
280
+ <div class="step">
281
+ <div class="step-header">
282
+ <div class="step-number">4</div>
283
+ <div class="step-title">Install Visual C++ Redistributable</div>
284
+ </div>
285
+ <p>Install Visual C++ Redistributable for Windows:</p>
286
+ <a href="https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist" class="link" target="_blank">Download from Microsoft</a>
287
+ </div>
288
+ </div>
289
+
290
+ <div class="section">
291
+ <h2 class="section-title">Project Setup</h2>
292
+ <div class="step">
293
+ <div class="step-header">
294
+ <div class="step-number">1</div>
295
+ <div class="step-title">Clone Repository</div>
296
+ </div>
297
+ <p>Clone the project repository:</p>
298
+ <div class="code-block">git clone https://github.com/stackblitz-labs/bolt.diy.git</div>
299
+ </div>
300
+
301
+ <div class="step">
302
+ <div class="step-header">
303
+ <div class="step-number">2</div>
304
+ <div class="step-title">Project Navigation</div>
305
+ </div>
306
+ <p>Navigate to the project directory:</p>
307
+ <div class="code-block">cd bolt.diy</div>
308
+ </div>
309
+
310
+ <div class="step">
311
+ <div class="step-header">
312
+ <div class="step-number">3</div>
313
+ <div class="step-title">Environment Setup</div>
314
+ </div>
315
+ <p>Set up your environment configuration:</p>
316
+ <div class="code-block">copy .env.example .env.local</div>
317
+ <p>Configure your environment variables in the .env.local file</p>
318
+ </div>
319
+
320
+ <div class="step">
321
+ <div class="step-header">
322
+ <div class="step-number">4</div>
323
+ <div class="step-title">Install Dependencies</div>
324
+ </div>
325
+ <p>Install all required project dependencies:</p>
326
+ <div class="code-block">pnpm install</div>
327
+ </div>
328
+
329
+ <div class="step">
330
+ <div class="step-header">
331
+ <div class="step-number">5</div>
332
+ <div class="step-title">Start Development Server</div>
333
+ </div>
334
+ <p>Launch the development server:</p>
335
+ <div class="code-block">pnpm run dev</div>
336
+ </div>
337
+
338
+ <div class="step">
339
+ <div class="step-header">
340
+ <div class="step-number">6</div>
341
+ <div class="step-title">Access Application</div>
342
+ </div>
343
+ <p>Open your browser and navigate to:</p>
344
+ <div class="code-block">http://localhost:5173</div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ <script>
350
+ // Add hover effects to steps
351
+ document.querySelectorAll('.step').forEach(step => {
352
+ step.addEventListener('mouseenter', () => {
353
+ step.style.transform = 'translateX(8px)';
354
+ });
355
+
356
+ step.addEventListener('mouseleave', () => {
357
+ step.style.transform = 'translateX(0)';
358
+ });
359
+ });
360
+
361
+ // Copy code blocks functionality with visual feedback
362
+ document.querySelectorAll('.code-block').forEach(block => {
363
+ block.addEventListener('click', async () => {
364
+ try {
365
+ await navigator.clipboard.writeText(block.innerText);
366
+ block.classList.add('copied');
367
+
368
+ // Show success message
369
+ const message = document.createElement('div');
370
+ message.textContent = 'Copied!';
371
+ message.style.position = 'absolute';
372
+ message.style.right = '8px';
373
+ message.style.top = '8px';
374
+ message.style.background = 'var(--success)';
375
+ message.style.color = 'white';
376
+ message.style.padding = '4px 8px';
377
+ message.style.borderRadius = '4px';
378
+ message.style.fontSize = '12px';
379
+
380
+ block.style.position = 'relative';
381
+ block.appendChild(message);
382
+
383
+ setTimeout(() => {
384
+ block.classList.remove('copied');
385
+ message.remove();
386
+ }, 1000);
387
+ } catch (err) {
388
+ console.error('Failed to copy:', err);
389
+ }
390
+ });
391
+ });
392
+ </script>
393
+ </body>
394
+ </html>