fix : - Removed Legecy system direct install - Fix the website little - Removed Legacy Bash

swadhinbiswas committed 8 months ago
bfe3afd
1 parent dd1ac2f
commit bfe3afd
3 files changed
+370 -609
Showing 3 changed files+370-609
β–Ό.github/FUNDING.yml
+1-1
1
-github: swadhinbiswas
1
+github: rampxty
2
2
β–ΌREADME.md
+0-6
50
50
```
51
51
*Or via cargo:* `cargo install --path .`
52
52
53
-### 2. Quick Install (Legacy Bash)
54
-If you don't have Rust installed, you can use the legacy bash wrapper (v1.x).
55
-```bash
56
-curl -fsSL https://raw.githubusercontent.com/swadhinbiswas/ls-f/main/install-standalone.sh | bash
57
-```
58
-
59
53
---
60
54
61
55
## πŸ“– Usage
62
56
β–Όindex.html
+369-602
3
3
<head>
4
4
<meta charset="UTF-8">
5
5
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ls-f - Beautiful ls with Icons</title>
6
+ <title>ls-f - Modern ls replacement with Icons & Colors</title>
7
+
8
+ <!-- Optimized Meta Tags -->
9
+ <meta name="description" content="ls-f: A modern, blazing-fast ls replacement with icons and colors, written in Rust. Transform your terminal with file-type-specific icons.">
10
+ <meta name="keywords" content="ls, terminal, shell, rust, command-line, icons, nerd-fonts, lsf, rust-cli">
11
+ <meta name="author" content="Swadhin Biswas">
12
+
13
+ <!-- Open Graph / Facebook -->
14
+ <meta property="og:type" content="website">
15
+ <meta property="og:url" content="https://swadhinbiswas.github.io/ls-f/">
16
+ <meta property="og:title" content="ls-f - Modern ls replacement with Icons & Colors">
17
+ <meta property="og:description" content="Transform your terminal with file-type-specific icons and colors. Modern, fast, and written in Rust.">
18
+ <meta property="og:image" content="https://raw.githubusercontent.com/swadhinbiswas/ls-f/main/docs/example.png">
19
+
20
+ <!-- Twitter -->
21
+ <meta property="twitter:card" content="summary_large_image">
22
+ <meta property="twitter:url" content="https://swadhinbiswas.github.io/ls-f/">
23
+ <meta property="twitter:title" content="ls-f - Modern ls replacement with Icons & Colors">
24
+ <meta property="twitter:description" content="Transform your terminal with file-type-specific icons and colors. Modern, fast, and written in Rust.">
25
+ <meta property="twitter:image" content="https://raw.githubusercontent.com/swadhinbiswas/ls-f/main/docs/example.png">
26
+
27
+ <link rel="canonical" href="https://swadhinbiswas.github.io/ls-f/" />
28
+
7
29
<style>
8
30
* {
9
31
margin: 0;
27
49
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
28
50
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
29
51
--shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
52
+ --nav-height: 70px;
30
53
}
31
54
32
55
html {
34
57
}
35
58
36
59
body {
37
- font-family: 'Segoe UI', Roboto, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
60
+ font-family: 'Inter', system-ui, -apple-system, sans-serif;
38
61
line-height: 1.6;
39
62
color: var(--text);
40
63
background: var(--light);
41
64
overflow-x: hidden;
42
65
}
43
66
67
+ .container {
68
+ max-width: 1100px;
69
+ margin: 0 auto;
70
+ padding: 0 1.5rem;
71
+ }
72
+
73
+ /* Navigation */
74
+ nav {
75
+ height: var(--nav-height);
76
+ background: rgba(255, 255, 255, 0.8);
77
+ backdrop-filter: blur(10px);
78
+ position: fixed;
79
+ top: 0;
80
+ width: 100%;
81
+ z-index: 1000;
82
+ border-bottom: 1px solid var(--border);
83
+ display: flex;
84
+ align-items: center;
85
+ }
86
+
87
+ nav .container {
88
+ display: flex;
89
+ justify-content: space-between;
90
+ align-items: center;
91
+ width: 100%;
92
+ }
93
+
94
+ .logo {
95
+ font-weight: 800;
96
+ font-size: 1.5rem;
97
+ color: var(--primary);
98
+ text-decoration: none;
99
+ display: flex;
100
+ align-items: center;
101
+ gap: 0.5rem;
102
+ }
103
+
104
+ .nav-links {
105
+ display: flex;
106
+ gap: 2rem;
107
+ }
108
+
109
+ .nav-links a {
110
+ text-decoration: none;
111
+ color: var(--text);
112
+ font-weight: 500;
113
+ transition: color 0.2s;
114
+ }
115
+
116
+ .nav-links a:hover {
117
+ color: var(--primary);
118
+ }
119
+
44
120
/* Hero Section */
45
121
header {
46
122
background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 50%, var(--secondary) 100%);
47
123
color: white;
48
- padding: 120px 20px 80px;
124
+ padding: calc(var(--nav-height) + 100px) 0 100px;
49
125
text-align: center;
50
126
position: relative;
51
127
overflow: hidden;
52
- box-shadow: var(--shadow-lg);
53
128
}
54
129
55
- header::before {
130
+ header::after {
56
131
content: '';
57
132
position: absolute;
58
- top: 0;
133
+ bottom: -50px;
59
134
left: 0;
60
135
right: 0;
61
- bottom: 0;
62
- background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
63
- opacity: 0.1;
136
+ height: 100px;
137
+ background: var(--light);
138
+ transform: skewY(-2deg);
64
139
}
65
140
66
141
header h1 {
67
- font-size: 3.5em;
68
- margin-bottom: 15px;
69
- font-weight: 800;
70
- letter-spacing: -1px;
71
- position: relative;
72
- z-index: 1;
73
- animation: slideInDown 0.8s ease-out;
74
- }
75
-
76
- header > .container > p:first-of-type {
77
- font-size: 1.4em;
78
- opacity: 0.95;
79
- margin-bottom: 15px;
80
- position: relative;
81
- z-index: 1;
82
- animation: slideInUp 0.8s ease-out 0.1s both;
142
+ font-size: clamp(2.5rem, 8vw, 4.5rem);
143
+ margin-bottom: 1rem;
144
+ font-weight: 900;
145
+ letter-spacing: -2px;
146
+ animation: fadeInDown 0.8s ease-out;
83
147
}
84
148
85
- header > .container > p:nth-of-type(2) {
86
- font-size: 1.1em;
87
- opacity: 0.85;
88
- margin-bottom: 30px;
89
- position: relative;
90
- z-index: 1;
91
- animation: slideInUp 0.8s ease-out 0.2s both;
149
+ header .tagline {
150
+ font-size: clamp(1.1rem, 3vw, 1.5rem);
151
+ opacity: 0.9;
152
+ margin-bottom: 2.5rem;
153
+ max-width: 700px;
154
+ margin-left: auto;
155
+ margin-right: auto;
156
+ animation: fadeInUp 0.8s ease-out 0.2s both;
92
157
}
93
158
94
159
.hero-buttons {
95
160
display: flex;
96
- gap: 15px;
161
+ gap: 1rem;
97
162
justify-content: center;
98
163
flex-wrap: wrap;
99
- margin-top: 40px;
100
- position: relative;
101
- z-index: 1;
102
- animation: slideInUp 0.8s ease-out 0.3s both;
164
+ animation: fadeInUp 0.8s ease-out 0.4s both;
103
165
}
104
166
167
+ /* Buttons */
105
168
.btn {
106
- padding: 14px 32px;
107
- border: 2px solid transparent;
108
- border-radius: 8px;
109
- cursor: pointer;
110
- font-size: 1em;
169
+ padding: 0.8rem 2rem;
170
+ border-radius: 10px;
111
171
font-weight: 600;
112
172
text-decoration: none;
113
173
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
114
- display: inline-block;
115
- text-transform: uppercase;
116
- letter-spacing: 0.5px;
174
+ display: inline-flex;
175
+ align-items: center;
176
+ gap: 0.5rem;
177
+ font-size: 1rem;
117
178
}
118
179
119
- .btn-primary {
180
+ .btn-white {
120
181
background: white;
121
182
color: var(--primary);
122
183
box-shadow: var(--shadow-md);
123
184
}
124
185
125
- .btn-primary:hover {
186
+ .btn-white:hover {
126
187
transform: translateY(-3px);
127
- box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
128
- background: #f0f9ff;
188
+ box-shadow: var(--shadow-lg);
189
+ background: #fdfdfd;
129
190
}
130
191
131
- .btn-secondary {
132
- background: var(--secondary);
192
+ .btn-outline {
193
+ border: 2px solid rgba(255, 255, 255, 0.3);
133
194
color: white;
134
- box-shadow: var(--shadow-md);
135
195
}
136
196
137
- .btn-secondary:hover {
138
- transform: translateY(-3px);
139
- box-shadow: 0 12px 24px rgba(236, 72, 153, 0.3);
140
- background: #d946a6;
141
- }
142
-
143
- .container {
144
- max-width: 1200px;
145
- margin: 0 auto;
146
- padding: 0 20px;
197
+ .btn-outline:hover {
198
+ background: rgba(255, 255, 255, 0.1);
199
+ border-color: white;
147
200
}
148
201
202
+ /* Sections */
149
203
section {
150
- padding: 80px 0;
151
- position: relative;
204
+ padding: 100px 0;
152
205
}
153
206
154
- section:nth-child(even) {
155
- background: white;
156
- }
157
-
158
- section h2 {
159
- font-size: 2.5em;
160
- margin-bottom: 50px;
207
+ .section-title {
161
208
text-align: center;
162
- color: var(--text);
163
- font-weight: 800;
164
- letter-spacing: -0.5px;
209
+ margin-bottom: 4rem;
165
210
}
166
211
167
- section h2 span {
168
- background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
212
+ .section-title h2 {
213
+ font-size: 2.5rem;
214
+ font-weight: 800;
215
+ margin-bottom: 1rem;
216
+ background: linear-gradient(135deg, var(--primary), var(--secondary));
169
217
-webkit-background-clip: text;
170
218
-webkit-text-fill-color: transparent;
171
- background-clip: text;
172
219
}
173
220
174
- /* Features Grid */
221
+ /* Features */
175
222
.features-grid {
176
223
display: grid;
177
224
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
178
- gap: 30px;
179
- margin: 40px 0;
225
+ gap: 2rem;
180
226
}
181
227
182
228
.feature-card {
183
229
background: white;
184
- padding: 40px;
185
- border-radius: 12px;
186
- box-shadow: var(--shadow-sm);
187
- transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
230
+ padding: 3rem 2rem;
231
+ border-radius: 20px;
188
232
border: 1px solid var(--border);
189
- position: relative;
190
- overflow: hidden;
191
- }
192
-
193
- .feature-card::before {
194
- content: '';
195
- position: absolute;
196
- top: 0;
197
- left: 0;
198
- right: 0;
199
- height: 4px;
200
- background: linear-gradient(90deg, var(--primary), var(--secondary));
201
- transform: scaleX(0);
202
- transform-origin: left;
203
- transition: transform 0.3s ease-out;
233
+ transition: all 0.3s ease;
204
234
}
205
235
206
236
.feature-card:hover {
207
- transform: translateY(-8px);
237
+ transform: translateY(-10px);
208
238
box-shadow: var(--shadow-lg);
209
- border-color: var(--primary);
210
- }
211
-
212
- .feature-card:hover::before {
213
- transform: scaleX(1);
239
+ border-color: var(--primary-light);
214
240
}
215
241
216
242
.feature-icon {
217
- font-size: 3em;
218
- margin-bottom: 20px;
243
+ font-size: 2.5rem;
244
+ margin-bottom: 1.5rem;
219
245
display: block;
220
246
}
221
247
222
248
.feature-card h3 {
223
- color: var(--primary);
224
- margin-bottom: 15px;
225
- font-size: 1.4em;
226
- font-weight: 700;
249
+ font-size: 1.5rem;
250
+ margin-bottom: 1rem;
251
+ color: var(--dark);
227
252
}
228
253
229
254
.feature-card p {
230
255
color: var(--text-light);
231
- line-height: 1.8;
232
256
}
233
257
234
- /* Installation Methods */
235
- .installation-methods {
236
- display: grid;
237
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
238
- gap: 25px;
239
- margin: 40px 0;
240
- }
241
-
242
- .method-card {
243
- background: linear-gradient(135deg, #f5f7ff 0%, #fff5f7 100%);
244
- padding: 35px;
258
+ /* Demo Section */
259
+ .demo-box {
260
+ background: #0f172a;
245
261
border-radius: 12px;
246
- border-left: 5px solid var(--primary);
247
- box-shadow: var(--shadow-sm);
248
- transition: all 0.3s ease;
249
- border: 1px solid var(--border);
250
- border-left: 5px solid var(--primary);
251
- }
252
-
253
- .method-card:hover {
254
- transform: translateX(5px);
255
- box-shadow: var(--shadow-md);
262
+ overflow: hidden;
263
+ box-shadow: var(--shadow-lg);
264
+ border: 1px solid #1e293b;
256
265
}
257
266
258
- .method-card h3 {
259
- color: var(--primary);
260
- margin-bottom: 15px;
261
- font-size: 1.3em;
262
- font-weight: 700;
267
+ .demo-header {
268
+ background: #1e293b;
269
+ padding: 12px 20px;
270
+ display: flex;
271
+ gap: 8px;
263
272
}
264
273
265
- .method-card p {
266
- color: var(--text-light);
267
- margin-bottom: 15px;
268
- }
274
+ .dot { height: 12px; width: 12px; border-radius: 50%; }
275
+ .dot.red { background: #ff5f56; }
276
+ .dot.yellow { background: #ffbd2e; }
277
+ .dot.green { background: #27c93f; }
269
278
270
- code {
271
- background: #1e293b;
279
+ .demo-content {
280
+ padding: 2rem;
281
+ font-family: 'Fira Code', 'Cascadia Code', monospace;
272
282
color: #e2e8f0;
273
- padding: 3px 8px;
274
- border-radius: 4px;
275
- font-family: 'Courier New', monospace;
276
- font-size: 0.9em;
277
- display: inline-block;
278
- }
279
-
280
- pre {
281
- background: #1e293b;
282
- color: #10b981;
283
- padding: 25px;
284
- border-radius: 8px;
285
283
overflow-x: auto;
286
- margin: 25px 0;
287
- font-family: 'Courier New', monospace;
288
- font-size: 0.95em;
289
- line-height: 1.5;
290
- box-shadow: var(--shadow-md);
291
- border: 1px solid var(--border);
292
284
}
293
285
294
- .demo-section {
295
- background: white;
296
- padding: 50px;
297
- border-radius: 12px;
298
- margin: 40px 0;
299
- box-shadow: var(--shadow-md);
300
- border: 1px solid var(--border);
286
+ .cmd { color: #10b981; margin-right: 0.5rem; }
287
+
288
+ /* Installation */
289
+ .install-grid {
290
+ display: grid;
291
+ grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
292
+ gap: 2rem;
301
293
}
302
294
303
- .demo-output {
304
- background: #0f172a;
305
- color: #10b981;
306
- padding: 25px;
307
- border-radius: 8px;
308
- font-family: 'Courier New', monospace;
309
- margin: 25px 0;
310
- overflow-x: auto;
311
- box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
312
- border: 1px solid var(--border);
295
+ @media (max-width: 500px) {
296
+ .install-grid { grid-template-columns: 1fr; }
313
297
}
314
298
315
- .faq-item {
299
+ .install-card {
316
300
background: white;
317
- padding: 30px;
318
- margin: 20px 0;
319
- border-radius: 12px;
320
- border-left: 5px solid var(--primary);
321
- box-shadow: var(--shadow-sm);
301
+ padding: 2.5rem;
302
+ border-radius: 15px;
322
303
border: 1px solid var(--border);
323
- border-left: 5px solid var(--primary);
324
- transition: all 0.3s ease;
325
304
}
326
305
327
- .faq-item:hover {
328
- box-shadow: var(--shadow-md);
329
- transform: translateX(3px);
306
+ .install-card h3 {
307
+ margin-bottom: 1rem;
308
+ display: flex;
309
+ align-items: center;
310
+ gap: 0.5rem;
330
311
}
331
312
332
- .faq-item h4 {
333
- color: var(--primary);
334
- margin-bottom: 12px;
335
- font-size: 1.1em;
336
- font-weight: 700;
337
- cursor: pointer;
313
+ .code-block {
314
+ background: #1e293b;
315
+ color: #e2e8f0;
316
+ padding: 1.5rem;
317
+ border-radius: 10px;
318
+ margin: 1.5rem 0;
319
+ position: relative;
320
+ font-family: monospace;
321
+ font-size: 0.9rem;
338
322
}
339
323
340
- .faq-item p {
341
- color: var(--text-light);
342
- line-height: 1.8;
324
+ /* Footer */
325
+ footer {
326
+ background: var(--dark);
327
+ color: white;
328
+ padding: 80px 0 40px;
343
329
}
344
330
345
- .stats {
331
+ .footer-grid {
346
332
display: grid;
347
- grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
348
- gap: 30px;
349
- text-align: center;
350
- margin: 40px 0;
351
- }
352
-
353
- .stat-box {
354
- background: white;
355
- padding: 40px;
356
- border-radius: 12px;
357
- box-shadow: var(--shadow-sm);
358
- border: 1px solid var(--border);
359
- transition: all 0.3s ease;
333
+ grid-template-columns: 2fr 1fr 1fr;
334
+ gap: 4rem;
335
+ margin-bottom: 4rem;
360
336
}
361
337
362
- .stat-box:hover {
363
- transform: translateY(-5px);
364
- box-shadow: var(--shadow-lg);
338
+ @media (max-width: 768px) {
339
+ .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
340
+ .nav-links { display: none; }
365
341
}
366
342
367
- .stat-box .number {
368
- font-size: 3em;
369
- background: linear-gradient(135deg, var(--primary), var(--secondary));
370
- -webkit-background-clip: text;
371
- -webkit-text-fill-color: transparent;
372
- background-clip: text;
343
+ .footer-logo {
344
+ font-size: 1.8rem;
373
345
font-weight: 800;
374
- margin-bottom: 12px;
346
+ margin-bottom: 1.5rem;
347
+ display: block;
375
348
}
376
349
377
- .stat-box .label {
350
+ .footer-links h4 {
351
+ margin-bottom: 1.5rem;
352
+ text-transform: uppercase;
353
+ font-size: 0.9rem;
354
+ letter-spacing: 1px;
378
355
color: var(--text-light);
379
- font-weight: 600;
380
- }
381
-
382
- /* Footer */
383
- footer {
384
- background: linear-gradient(135deg, var(--dark) 0%, #1a2a4a 100%);
385
- color: white;
386
- padding: 60px 20px 30px;
387
- text-align: center;
388
356
}
389
357
390
- footer p {
391
- margin: 12px 0;
392
- color: #cbd5e1;
358
+ .footer-links ul {
359
+ list-style: none;
393
360
}
394
361
395
- .links {
396
- margin: 30px 0;
397
- display: flex;
398
- gap: 25px;
399
- justify-content: center;
400
- flex-wrap: wrap;
362
+ .footer-links li {
363
+ margin-bottom: 0.8rem;
401
364
}
402
365
403
- .links a {
404
- color: #93c5fd;
366
+ .footer-links a {
367
+ color: #94a3b8;
405
368
text-decoration: none;
406
- font-weight: 600;
407
- transition: all 0.3s ease;
408
- display: inline-block;
369
+ transition: color 0.2s;
409
370
}
410
371
411
- .links a:hover {
372
+ .footer-links a:hover {
412
373
color: white;
413
- transform: translateY(-2px);
414
374
}
415
375
416
- /* Animations */
417
- @keyframes slideInDown {
418
- from {
419
- opacity: 0;
420
- transform: translateY(-30px);
421
- }
422
- to {
423
- opacity: 1;
424
- transform: translateY(0);
425
- }
426
- }
427
-
428
- @keyframes slideInUp {
429
- from {
430
- opacity: 0;
431
- transform: translateY(30px);
432
- }
433
- to {
434
- opacity: 1;
435
- transform: translateY(0);
436
- }
437
- }
438
-
439
- @keyframes fadeIn {
440
- from { opacity: 0; }
441
- to { opacity: 1; }
442
- }
443
-
444
- /* Responsive */
445
- @media (max-width: 768px) {
446
- header {
447
- padding: 60px 20px 50px;
448
- }
449
-
450
- header h1 {
451
- font-size: 2.2em;
452
- }
453
-
454
- header p {
455
- font-size: 1em;
456
- }
457
-
458
- section h2 {
459
- font-size: 1.8em;
460
- }
461
-
462
- .hero-buttons {
463
- flex-direction: column;
464
- }
465
-
466
- .btn {
467
- width: 100%;
468
- }
469
-
470
- pre {
471
- font-size: 0.85em;
472
- padding: 15px;
473
- }
474
-
475
- .demo-section {
476
- padding: 20px;
477
- }
478
-
479
- .feature-card {
480
- padding: 25px;
481
- }
376
+ .copyright {
377
+ padding-top: 2rem;
378
+ border-top: 1px solid #1e293b;
379
+ text-align: center;
380
+ color: var(--text-light);
381
+ font-size: 0.9rem;
482
382
}
483
383
484
- /* Section Backgrounds */
485
- section:nth-child(2),
486
- section:nth-child(4),
487
- section:nth-child(6),
488
- section:nth-child(8) {
489
- background: #f8fafc;
384
+ /* Animations */
385
+ @keyframes fadeInDown {
386
+ from { opacity: 0; transform: translateY(-20px); }
387
+ to { opacity: 1; transform: translateY(0); }
490
388
}
491
389
492
- /* Highlight */
493
- .highlight {
494
- background: linear-gradient(120deg, #fef3c7 0%, #fcd34d 100%);
495
- padding: 2px 6px;
496
- border-radius: 3px;
497
- font-weight: 600;
390
+ @keyframes fadeInUp {
391
+ from { opacity: 0; transform: translateY(20px); }
392
+ to { opacity: 1; transform: translateY(0); }
498
393
}
499
394
</style>
500
395
</head>
501
396
<body>
502
- <!-- Header / Hero Section -->
503
- <header>
504
- <div class="container">
505
- <h1>✨ ls-f</h1>
506
- <p>A Beautiful <code style="background: rgba(0,0,0,0.2); padding: 5px 10px; border-radius: 4px;">ls</code> with Icons 🎨</p>
507
- <p style="font-size: 1em; opacity: 0.85;">Transform your terminal with file-type-specific icons and colors</p>
508
- <div class="hero-buttons">
509
- <a href="#installation" class="btn btn-primary">Get Started</a>
510
- <a href="#features" class="btn btn-secondary">Learn More</a>
511
- <a href="https://github.com/swadhinbiswas/ls-f" class="btn btn-primary">GitHub Repo</a>
512
- </div>
513
- </div>
514
- </header>
515
397
516
- <!-- Features Section -->
517
- <section id="features">
398
+ <nav>
518
399
<div class="container">
519
- <h2>🌟 <span>Key Features</span></h2>
520
- <div class="features-grid">
521
- <div class="feature-card">
522
- <div class="feature-icon">🎨</div>
523
- <h3>Visual Clarity</h3>
524
- <p>Instantly recognize files with type-specific icons using Nerd Fonts. Never get confused again!</p>
525
- </div>
526
- <div class="feature-card">
527
- <div class="feature-icon">βš™οΈ</div>
528
- <h3>Full Compatibility</h3>
529
- <p>Supports all standard <code>ls</code> flags: <code>-a</code>, <code>-l</code>, <code>-R</code>, and more.</p>
530
- </div>
531
- <div class="feature-card">
532
- <div class="feature-icon">πŸš€</div>
533
- <h3>Lightning Fast</h3>
534
- <p>Minimal overheadβ€”runs as fast as the standard <code>ls</code> command.</p>
535
- </div>
536
- <div class="feature-card">
537
- <div class="feature-icon">🎯</div>
538
- <h3>Customizable</h3>
539
- <p>Override icons and colors via configuration file to match your style.</p>
540
- </div>
541
- <div class="feature-card">
542
- <div class="feature-icon">πŸ”„</div>
543
- <h3>Cross-Platform</h3>
544
- <p>Works on Linux, macOS, WSL, and other Unix-like systems.</p>
545
- </div>
546
- <div class="feature-card">
547
- <div class="feature-icon">πŸ›‘οΈ</div>
548
- <h3>Safe Fallbacks</h3>
549
- <p>Automatically disables icons on incompatible systems. Works without Nerd Fonts.</p>
550
- </div>
400
+ <a href="#" class="logo">✨ ls-f</a>
401
+ <div class="nav-links">
402
+ <a href="#features">Features</a>
403
+ <a href="#demo">Demo</a>
404
+ <a href="#installation">Install</a>
405
+ <a href="https://github.com/swadhinbiswas/ls-f">GitHub</a>
551
406
</div>
552
407
</div>
553
- </section>
408
+ </nav>
554
409
555
- <!-- Demo Section -->
556
- <section>
410
+ <header>
557
411
<div class="container">
558
- <h2>πŸ“Ί <span>Live Demo</span></h2>
559
- <div class="demo-section">
560
- <img src="docs/example.png" alt="ls-f example output"
561
- style="width:100%; max-width:860px; display:block; margin:0 auto 20px; border-radius:12px; box-shadow: var(--shadow-md); border: 1px solid var(--border);" />
562
- <h3 style="margin-bottom: 20px;">Grid View (Default)</h3>
563
- <div class="demo-output">
564
-$ lsf<br>
565
- LICENSE README.md column.py config/<br>
566
- install.sh lsf INSTALL.md docs/
567
- </div>
568
-
569
- <h3 style="margin-top: 30px; margin-bottom: 20px;">Long Format</h3>
570
- <div class="demo-output">
571
-$ lsf -l<br>
572
- drwx------ 4 swadhin swadhin 4096 Oct 16 10:32 config/<br>
573
- -rwxr-xr-x 1 swadhin swadhin 10K Oct 16 10:31 lsf<br>
574
- -rw-r--r-- 1 swadhin swadhin 2.5K Oct 16 10:30 README.md<br>
575
- -rw-r--r-- 1 swadhin swadhin 948 Oct 16 10:29 column.py
576
- </div>
412
+ <h1>ls-f</h1>
413
+ <p class="tagline">A modern, blazing-fast <code>ls</code> replacement with beautiful icons and colors, rewritten in Rust for maximum performance.</p>
414
+ <div class="hero-buttons">
415
+ <a href="#installation" class="btn btn-white">Get Started</a>
416
+ <a href="https://github.com/swadhinbiswas/ls-f" class="btn btn-outline">View on GitHub</a>
577
417
</div>
578
418
</div>
579
- </section>
419
+ </header>
580
420
581
- <!-- Installation Section -->
582
- <section id="installation">
583
- <div class="container">
584
- <h2>πŸš€ <span>Quick Installation</span></h2>
585
- <div class="installation-methods">
586
- <div class="method-card">
587
- <h3>Method 1: One-Liner</h3>
588
- <p>Fastest - downloads both files automatically</p>
589
- <pre>curl -fsSL https://raw.githubusercontent.com/
590
-swadhinbiswas/ls-f/main/install-standalone.sh | bash
591
-
592
-# Verify
593
-lsf --version
594
-lsf -x</pre>
421
+ <main>
422
+ <!-- Features Section -->
423
+ <section id="features">
424
+ <div class="container">
425
+ <div class="section-title">
426
+ <h2>Everything you need from ls</h2>
427
+ <p>And a lot more that you didn't know you needed.</p>
595
428
</div>
596
- <div class="method-card">
597
- <h3>Method 2: Git Clone</h3>
598
- <p>For development and customization</p>
599
- <pre>git clone https://github.com/swadhinbiswas/
600
-ls-f.git && cd ls-f && ./install.sh --user</pre>
601
- </div>
602
- <div class="method-card">
603
- <h3>Method 3: Direct Download</h3>
604
- <p>Download both files manually</p>
605
- <pre>sudo curl -fL https://raw.githubusercontent.com/\
606
-swadhinbiswas/ls-f/main/lsf -o /usr/local/bin/lsf
607
-sudo curl -fL https://raw.githubusercontent.com/\
608
-swadhinbiswas/ls-f/main/column.py -o /usr/local/bin/column.py
609
-sudo chmod +x /usr/local/bin/lsf /usr/local/bin/column.py</pre>
429
+
430
+ <div class="features-grid">
431
+ <article class="feature-card">
432
+ <span class="feature-icon">πŸš€</span>
433
+ <h3>Native Speed</h3>
434
+ <p>Written in Rust (v5.0.0), matching GNU ls speed even with complex icon rendering and colorization.</p>
435
+ </article>
436
+
437
+ <article class="feature-card">
438
+ <span class="feature-icon">🎨</span>
439
+ <h3>Nerd Font Icons</h3>
440
+ <p>Rich support for hundreds of file types and extensions using Nerd Fonts for instant visual recognition.</p>
441
+ </article>
442
+
443
+ <article class="feature-card">
444
+ <span class="feature-icon">🌳</span>
445
+ <h3>Built-in Tree View</h3>
446
+ <p>Visualize your directory structure recursively with the <code>--tree</code> flag, no extra tools required.</p>
447
+ </article>
448
+
449
+ <article class="feature-card">
450
+ <span class="feature-icon">🌿</span>
451
+ <h3>Git Integration</h3>
452
+ <p>See the status of your files (staged, modified, new) directly in your file listings with <code>--git</code>.</p>
453
+ </article>
454
+
455
+ <article class="feature-card">
456
+ <span class="feature-icon">βš™οΈ</span>
457
+ <h3>GNU Compatible</h3>
458
+ <p>Supports all standard flags like <code>-l</code>, <code>-a</code>, <code>-R</code>, <code>-h</code>, <code>-t</code>, <code>-S</code>, and more.</p>
459
+ </article>
460
+
461
+ <article class="feature-card">
462
+ <span class="feature-icon">πŸ“¦</span>
463
+ <h3>Zero Dependencies</h3>
464
+ <p>Distributed as a single static binary. No runtime dependencies, no Python or Bash required.</p>
465
+ </article>
610
466
</div>
611
467
</div>
468
+ </section>
612
469
613
- <div class="demo-section" style="margin-top: 40px;">
614
- <h3 style="margin-bottom: 15px; color: var(--primary); font-weight: 700;">Setup Alias (Optional)</h3>
615
- <p style="margin-bottom: 15px; color: var(--text-light);">Replace your default <code>ls</code> with <code>lsf</code>:</p>
616
- <pre>echo "alias ls='lsf'" >> ~/.bashrc
617
-source ~/.bashrc</pre>
618
- <p style="color: var(--text-light); margin-top: 15px;">For Zsh, use <code>~/.zshrc</code> instead.</p>
619
- </div>
620
- </div>
621
- </section>
622
-
623
- <!-- Usage Section -->
624
- <section>
625
- <div class="container">
626
- <h2>πŸ“– <span>Usage Examples</span></h2>
627
- <div class="demo-section">
628
- <pre>lsf # List files with icons
629
-lsf -a # List all files (including hidden)
630
-lsf -A # Almost all (skip . and ..)
631
-lsf -l # Long format
632
-lsf -la # Long format + all files
633
-lsf -x # Horizontal layout
634
-lsf -X # Sort by extension
635
-lsf -Z # Show security context
636
-lsf -R # Recursive listing
637
-lsf --zero # NUL-terminated output
638
-lsf --help # Show help message
639
-lsf --version # Show version</pre>
640
- </div>
641
- </div>
642
- </section>
643
-
644
- <!-- Prerequisites Section -->
645
- <section>
646
- <div class="container">
647
- <h2>πŸ“‹ <span>Prerequisites</span></h2>
648
- <div class="features-grid">
649
- <div class="feature-card">
650
- <h3>Bash 4+</h3>
651
- <p>For full icon support. Works on any POSIX shell without icons.</p>
652
- <p style="margin-top: 10px; color: var(--text-light);"><code>echo $BASH_VERSION</code></p>
470
+ <!-- Demo Section -->
471
+ <section id="demo" style="background: white;">
472
+ <div class="container">
473
+ <div class="section-title">
474
+ <h2>See it in Action</h2>
653
475
</div>
654
- <div class="feature-card">
655
- <h3>Python 3.x</h3>
656
- <p>For column formatting helper.</p>
657
- <p style="margin-top: 10px; color: var(--text-light);"><code>python3 --version</code></p>
476
+
477
+ <div class="demo-box">
478
+ <div class="demo-header">
479
+ <div class="dot red"></div>
480
+ <div class="dot yellow"></div>
481
+ <div class="dot green"></div>
482
+ </div>
483
+ <div class="demo-content">
484
+ <div><span class="cmd">$</span> lsf</div>
485
+ <div style="margin-top: 10px; color: #94a3b8;">
486
+ πŸ“„ Cargo.toml &nbsp;&nbsp; πŸ“„ README.md &nbsp;&nbsp; πŸ“ src/ &nbsp;&nbsp; πŸ“ target/
487
+ </div>
488
+ <div style="margin-top: 20px;"><span class="cmd">$</span> lsf --tree --depth 2</div>
489
+ <div style="margin-top: 10px; color: #94a3b8;">
490
+ . <br>
491
+ β”œβ”€β”€ πŸ“„ Cargo.toml <br>
492
+ β”œβ”€β”€ πŸ“„ README.md <br>
493
+ β”œβ”€β”€ πŸ“ src/ <br>
494
+ β”‚&nbsp;&nbsp; β”œβ”€β”€ πŸ“„ main.rs <br>
495
+ β”‚&nbsp;&nbsp; └── πŸ“„ cli.rs <br>
496
+ └── πŸ“ target/
497
+ </div>
498
+ </div>
658
499
</div>
659
- <div class="feature-card">
660
- <h3>Nerd Fonts (Optional)</h3>
661
- <p>Recommended for beautiful icons.</p>
662
- <p style="margin-top: 10px; color: var(--text-light);"><code>fc-list | grep "Nerd Font"</code></p>
500
+
501
+ <div style="margin-top: 4rem; text-align: center;">
502
+ <img src="docs/example.png" alt="ls-f screenshot" style="max-width: 100%; border-radius: 12px; box-shadow: var(--shadow-md);">
663
503
</div>
664
504
</div>
665
- </div>
666
- </section>
667
-
668
- <!-- Customization Section -->
669
- <section>
670
- <div class="container">
671
- <h2>🎨 <span>Customization</span></h2>
672
- <div class="demo-section">
673
- <p style="margin-bottom: 20px; color: var(--text-light);">Edit <code>~/.config/lsf/lsf.conf</code> to customize icons and colors:</p>
674
- <pre># Change directory icon
675
-ICONS["dir"]=""
676
-COLORS["dir"]="94" # Bright blue
677
-
678
-# Change Python file icon
679
-ICONS[".py"]=""
680
-COLORS[".py"]="92" # Bright green
681
-
682
-# Change JSON file icon
683
-ICONS[".json"]=""
684
-COLORS[".json"]="36" # Cyan</pre>
685
- <p style="margin-top: 20px; color: var(--text-light);">See <a href="docs/CONFIGURATION.md" style="color: var(--primary); font-weight: 600;">Configuration Guide</a> for more options and examples.</p>
686
- </div>
687
- </div>
688
- </section>
689
-
690
- <!-- FAQ Section -->
691
- <section>
692
- <div class="container">
693
- <h2>❓ <span>Frequently Asked Questions</span></h2>
694
-
695
- <div class="faq-item">
696
- <h4>Q: Icons appear as boxes or question marks. What's wrong?</h4>
697
- <p>A: Your terminal font is not set to a Nerd Font. Download from <a href="https://www.nerdfonts.com/" style="color: var(--primary); font-weight: 600;">nerdfonts.com</a> and set it as your terminal font.</p>
698
- </div>
699
-
700
- <div class="faq-item">
701
- <h4>Q: Do I need root/sudo access?</h4>
702
- <p>A: No! Use <code>./install.sh --user</code> to install to <code>~/.local/bin</code> without sudo. Use <code>sudo ./install.sh --system</code> for system-wide installation.</p>
703
- </div>
704
-
705
- <div class="faq-item">
706
- <h4>Q: What if I don't want to replace my ls command?</h4>
707
- <p>A: No problem! Just use <code>lsf</code> directly. Or set an alias, but don't alias it to <code>ls</code>. Example: <code>alias ll='lsf -l'</code></p>
708
- </div>
709
-
710
- <div class="faq-item">
711
- <h4>Q: Is it safe to use as my default ls?</h4>
712
- <p>A: Yes! <code>ls-f</code> is fully compatible with all standard <code>ls</code> commands and flags. It falls back gracefully when icons aren't supported.</p>
713
- </div>
714
-
715
- <div class="faq-item">
716
- <h4>Q: How do I uninstall?</h4>
717
- <p>A: <code>rm ~/.local/bin/lsf ~/.local/bin/column.py</code> (user install) or use sudo for system install. Remove the alias from your shell config.</p>
718
- </div>
719
-
720
- <div class="faq-item">
721
- <h4>Q: Does it work on macOS?</h4>
722
- <p>A: Yes! Install via <code>brew install bash</code> to get Bash 4+, then install <code>ls-f</code> normally.</p>
723
- </div>
724
- </div>
725
- </section>
726
-
727
- <!-- Documentation Section -->
728
- <section>
729
- <div class="container">
730
- <h2>πŸ“š <span>Documentation</span></h2>
731
- <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px;">
732
- <div class="feature-card">
733
- <h3>πŸ“– Installation Guide</h3>
734
- <p>Detailed step-by-step instructions for all platforms and methods.</p>
735
- <p style="margin-top: 15px;"><a href="docs/INSTALLATION.md" style="color: var(--primary); font-weight: bold;">Read Guide β†’</a></p>
505
+ </section>
506
+
507
+ <!-- Installation Section -->
508
+ <section id="installation">
509
+ <div class="container">
510
+ <div class="section-title">
511
+ <h2>Quick Installation</h2>
512
+ <p>Choose the method that works best for your environment.</p>
736
513
</div>
737
- <div class="feature-card">
738
- <h3>βš™οΈ Configuration Guide</h3>
739
- <p>Learn how to customize icons, colors, and behavior.</p>
740
- <p style="margin-top: 15px;"><a href="docs/CONFIGURATION.md" style="color: var(--primary); font-weight: bold;">Read Guide β†’</a></p>
514
+
515
+ <div class="install-grid">
516
+ <div class="install-card">
517
+ <h3>πŸ“¦ Via Cargo (Recommended)</h3>
518
+ <p>The easiest way to install and stay updated.</p>
519
+ <div class="code-block">
520
+ cargo install --path .
521
+ </div>
522
+ <p style="font-size: 0.9rem; color: var(--text-light);">*Run this command inside the cloned repository.</p>
523
+ </div>
524
+
525
+ <div class="install-card">
526
+ <h3>πŸ”¨ From Source</h3>
527
+ <p>Build and install to your system bin directory.</p>
528
+ <div class="code-block">
529
+ git clone https://github.com/swadhinbiswas/ls-f.git<br>
530
+ cd ls-f<br>
531
+ make install
532
+ </div>
533
+ </div>
741
534
</div>
742
- <div class="feature-card">
743
- <h3>πŸ”§ Troubleshooting</h3>
744
- <p>Solutions to common issues and problems.</p>
745
- <p style="margin-top: 15px;"><a href="docs/TROUBLESHOOTING.md" style="color: var(--primary); font-weight: bold;">Read Guide β†’</a></p>
535
+
536
+ <div style="margin-top: 3rem; text-align: center;">
537
+ <p>Need more help? Check the <a href="docs/INSTALLATION.md" style="color: var(--primary); font-weight: 600;">Full Installation Guide</a>.</p>
746
538
</div>
747
539
</div>
748
- </div>
749
- </section>
540
+ </section>
541
+ </main>
750
542
751
- <!-- Stats Section -->
752
- <section>
543
+ <footer>
753
544
<div class="container">
754
- <h2>πŸ“Š <span>Project Stats</span></h2>
755
- <div class="stats">
756
- <div class="stat-box">
757
- <div class="number">100+</div>
758
- <div class="label">File Type Icons</div>
759
- </div>
760
- <div class="stat-box">
761
- <div class="number">3</div>
762
- <div class="label">Install Methods</div>
545
+ <div class="footer-grid">
546
+ <div>
547
+ <span class="footer-logo">ls-f</span>
548
+ <p style="color: #94a3b8; margin-bottom: 2rem;">A beautiful, modern replacement for ls, written with ❀️ in Rust.</p>
763
549
</div>
764
- <div class="stat-box">
765
- <div class="number">0ms</div>
766
- <div class="label">Overhead</div>
550
+ <div class="footer-links">
551
+ <h4>Documentation</h4>
552
+ <ul>
553
+ <li><a href="docs/INSTALLATION.md">Installation</a></li>
554
+ <li><a href="docs/CONFIGURATION.md">Configuration</a></li>
555
+ <li><a href="docs/TROUBLESHOOTING.md">Troubleshooting</a></li>
556
+ </ul>
767
557
</div>
768
- <div class="stat-box">
769
- <div class="number">MIT</div>
770
- <div class="label">License</div>
558
+ <div class="footer-links">
559
+ <h4>Community</h4>
560
+ <ul>
561
+ <li><a href="https://github.com/swadhinbiswas/ls-f">GitHub</a></li>
562
+ <li><a href="https://github.com/swadhinbiswas/ls-f/issues">Issues</a></li>
563
+ <li><a href="https://github.com/swadhinbiswas/ls-f/pulls">Pull Requests</a></li>
564
+ </ul>
771
565
</div>
772
566
</div>
773
- </div>
774
- </section>
775
-
776
- <!-- CTA Section -->
777
- <section style="background: linear-gradient(135deg, #6366f1 0%, #4f46e5 50%, #ec4899 100%); color: white; padding: 100px 20px;">
778
- <div class="container" style="text-align: center;">
779
- <h2 style="color: white; margin-bottom: 20px; font-size: 2.5em;">Ready to Transform Your Terminal?</h2>
780
- <p style="font-size: 1.1em; margin-bottom: 30px; color: rgba(255,255,255,0.95);">Install ls-f now and enjoy a beautiful, efficient file listing experience.</p>
781
- <a href="#installation" class="btn btn-primary" style="padding: 15px 40px; font-size: 1.1em;">Get Started Now</a>
782
- </div>
783
- </section>
784
-
785
- <!-- Footer -->
786
- <footer>
787
- <div class="container">
788
- <h3 style="margin-bottom: 20px; font-size: 1.8em;">ls-f</h3>
789
- <p>A beautiful alternative to the standard <code style="background: rgba(255,255,255,0.1); padding: 3px 6px; border-radius: 3px;">ls</code> command with file-type icons.</p>
790
-
791
- <div class="links">
792
- <a href="https://github.com/swadhinbiswas/ls-f">GitHub</a>
793
- <a href="https://github.com/swadhinbiswas/ls-f/issues">Issues</a>
794
- <a href="docs/INSTALLATION.md">Installation</a>
795
- <a href="docs/CONFIGURATION.md">Configuration</a>
796
- <a href="docs/TROUBLESHOOTING.md">Help</a>
567
+
568
+ <div class="copyright">
569
+ <p>&copy; 2026 Swadhin Biswas. Released under the MIT License.</p>
797
570
</div>
798
-
799
- <p style="margin-top: 30px; opacity: 0.8;">
800
- Β© 2025 <strong>ls-f</strong> Project. Licensed under MIT.
801
- </p>
802
- <p style="margin-top: 10px; opacity: 0.7; font-size: 0.9em;">
803
- Built with ❀️ by <a href="https://github.com/swadhinbiswas" style="color: #93c5fd; text-decoration: none;">Swadhin Biswas</a>
804
- </p>
805
571
</div>
806
572
</footer>
573
+
807
574
</body>
808
575
</html>
809
576