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 +1 @@ | ||
1 | -github: swadhinbiswas | |
1 | +github: rampxty | |
2 | 2 | |
βΌREADME.md
+0-6
| @@ -50,12 +50,6 @@ make install # Installs to /usr/local/bin | ||
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,7 +3,29 @@ | ||
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,6 +49,7 @@ | ||
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,775 +57,519 @@ | ||
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 π README.md π src/ π 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 | + β βββ π main.rs <br> | |
495 | + β βββ π 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>© 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 | |