Skip to content

Commit 4d42587

Browse files
Majkey25Majkey25
committed
feat: enhance UI styling and branding
- Update favicon version to v=3 for cache busting - Change text separators from "·" to "-" in branding and footer - Replace sample repositories with updated examples - Add new CSS variables and styles for glow effects, improved shadows, hover animations, and responsive design to modernize the interface and enhance user experience
1 parent b11d8a1 commit 4d42587

4 files changed

Lines changed: 166 additions & 42 deletions

File tree

‎assets/app.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -39,12 +39,12 @@ function setBranding() {
3939
brandLogoEl.src = LOGO_SRC;
4040
brandLogoEl.alt = `${APP_NAME} logo`;
4141
if (faviconEl) {
42-
faviconEl.href = `${LOGO_SRC}?v=2`;
42+
faviconEl.href = `${LOGO_SRC}?v=3`;
4343
}
4444
document.title = APP_NAME;
4545
heroTitleEl.textContent = 'Download any GitHub folder';
4646
heroTaglineEl.textContent = TAGLINE;
47-
eyebrowEl.textContent = `${APP_NAME} · Client-side`;
47+
eyebrowEl.textContent = `${APP_NAME} - Client-side`;
4848
footerLinkEl.href = FOOTER_LINK;
4949
footerTextEl.textContent = FOOTER_TEXT;
5050
}

‎assets/config.js‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@ export const API_BASE = 'https://api.github.com';
44
export const DEFAULT_CONCURRENCY = 6;
55
export const MAX_FILES = 4000;
66
export const LOGO_SRC = 'assets/logo.svg';
7-
export const FOOTER_TEXT = 'Built by Majkey25 · GitHub Pages';
7+
export const FOOTER_TEXT = 'Built by Majkey25 - GitHub Pages';
88
export const FOOTER_LINK = 'https://majkey25.github.io/My-website-for-fun/';
99
export const SAMPLES = [
10-
'vercel/next.js/examples/with-tailwindcss',
11-
'pallets/flask/examples/tutorial'
10+
'vercel/next.js/tree/canary/examples/blog-starter',
11+
'microsoft/TypeScript/tree/main/src/compiler'
1212
];
13-

‎assets/style.css‎

Lines changed: 155 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
--muted: #9ca3af;
88
--accent: #2563eb;
99
--accent-2: #14b8a6;
10+
--glow: rgba(37, 99, 235, 0.25);
1011
--shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
1112
}
1213

@@ -20,7 +21,7 @@ body {
2021
color: var(--text);
2122
font-family: 'Inter', system-ui, -apple-system, sans-serif;
2223
min-height: 100vh;
23-
padding-bottom: 120px;
24+
padding-bottom: 160px;
2425
}
2526

2627
.bg-overlay {
@@ -37,14 +38,17 @@ body {
3738
.topbar {
3839
position: sticky;
3940
top: 0;
41+
left: 0;
42+
right: 0;
4043
display: flex;
4144
align-items: center;
4245
justify-content: space-between;
4346
padding: 16px 28px;
44-
background: rgba(11, 16, 32, 0.65);
45-
backdrop-filter: blur(10px);
47+
background: rgba(11, 16, 32, 0.78);
48+
backdrop-filter: blur(14px);
4649
border: 1px solid var(--border);
4750
border-radius: 0 0 18px 18px;
51+
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
4852
z-index: 2;
4953
gap: 12px;
5054
}
@@ -55,6 +59,17 @@ body {
5559
gap: 10px;
5660
font-weight: 700;
5761
letter-spacing: 0.4px;
62+
padding: 8px 12px;
63+
border-radius: 14px;
64+
background: rgba(255, 255, 255, 0.04);
65+
border: 1px solid var(--border);
66+
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
67+
}
68+
69+
.brand:hover {
70+
transform: translateY(-2px);
71+
box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
72+
border-color: rgba(37, 99, 235, 0.4);
5873
}
5974

6075
.brand-logo {
@@ -63,17 +78,38 @@ body {
6378
border-radius: 8px;
6479
background: linear-gradient(135deg, var(--accent), var(--accent-2));
6580
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
81+
object-fit: contain;
82+
padding: 2px;
83+
display: block;
84+
}
85+
86+
.nav {
87+
display: inline-flex;
88+
align-items: center;
89+
gap: 12px;
90+
padding: 8px 12px;
91+
border-radius: 14px;
92+
background: rgba(255, 255, 255, 0.04);
93+
border: 1px solid var(--border);
94+
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
6695
}
6796

6897
.nav a {
6998
color: var(--muted);
7099
text-decoration: none;
71-
margin-left: 16px;
100+
margin-left: 0;
72101
font-size: 14px;
73-
transition: color 0.15s ease, transform 0.2s ease;
102+
padding: 8px 10px;
103+
border-radius: 10px;
104+
transition: color 0.15s ease, transform 0.2s ease,
105+
background 0.2s ease;
74106
}
75107

76-
.nav a:hover { color: var(--text); transform: translateY(-1px); }
108+
.nav a:hover {
109+
color: var(--text);
110+
transform: translateY(-1px);
111+
background: rgba(255, 255, 255, 0.06);
112+
}
77113

78114
.layout {
79115
position: relative;
@@ -85,17 +121,37 @@ body {
85121
}
86122

87123
.panel {
124+
position: relative;
88125
background: linear-gradient(145deg, var(--panel), var(--panel-2));
89126
border: 1px solid var(--border);
90127
border-radius: 18px;
91128
box-shadow: var(--shadow);
92129
padding: 26px;
93130
opacity: 0;
94131
transform: translateY(18px);
95-
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.4s ease;
132+
overflow: hidden;
133+
transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.4s ease,
134+
border-color 0.3s ease;
96135
}
97136

98-
.panel:hover { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4); }
137+
.panel::after {
138+
content: '';
139+
position: absolute;
140+
inset: -30%;
141+
background: radial-gradient(circle at 30% 20%, var(--glow), transparent 40%),
142+
radial-gradient(circle at 80% 0%, rgba(20, 184, 166, 0.2), transparent 36%);
143+
opacity: 0;
144+
transition: opacity 0.4s ease;
145+
pointer-events: none;
146+
}
147+
148+
.panel:hover {
149+
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.42);
150+
transform: translateY(-4px) scale(1.005);
151+
border-color: rgba(37, 99, 235, 0.4);
152+
}
153+
154+
.panel:hover::after { opacity: 1; }
99155

100156
.hero { display: grid; gap: 18px; }
101157

@@ -125,15 +181,23 @@ body {
125181
color: var(--text);
126182
cursor: pointer;
127183
font-size: 13px;
128-
transition: border 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease;
184+
transition: border 0.2s ease, transform 0.12s ease, box-shadow 0.2s ease,
185+
background 0.2s ease;
129186
transform: translateZ(0);
130187
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
188+
backdrop-filter: blur(6px);
131189
}
132190

133191
.chip:hover {
134192
border-color: rgba(37, 99, 235, 0.7);
135-
transform: translateY(-2px);
136-
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
193+
background: rgba(37, 99, 235, 0.12);
194+
transform: translateY(-2px) scale(1.01);
195+
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
196+
}
197+
198+
.chip:focus-visible {
199+
outline: 2px solid var(--accent);
200+
outline-offset: 2px;
137201
}
138202

139203
.form { display: grid; gap: 14px; }
@@ -234,18 +298,32 @@ button:disabled {
234298
transform: translateY(12px);
235299
transition: opacity 0.45s ease, transform 0.45s ease, box-shadow 0.25s ease,
236300
border-color 0.25s ease;
301+
position: relative;
302+
overflow: hidden;
237303
}
238304

239305
.note h3 { margin: 0 0 8px; font-size: 16px; }
240306

241307
.note p { margin: 0; color: var(--muted); line-height: 1.5; }
242308

243309
.note:hover {
244-
transform: translateY(-4px) scale(1.005);
310+
transform: translateY(-8px) scale(1.02) rotateX(0.8deg) rotateY(-0.6deg);
245311
border-color: rgba(37, 99, 235, 0.4);
246312
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
247313
}
248314

315+
.note::after {
316+
content: '';
317+
position: absolute;
318+
inset: -40%;
319+
background: radial-gradient(circle at 20% 20%, var(--glow), transparent 40%);
320+
opacity: 0;
321+
transition: opacity 0.3s ease;
322+
pointer-events: none;
323+
}
324+
325+
.note:hover::after { opacity: 1; }
326+
249327
.footer {
250328
position: fixed;
251329
left: 50%;
@@ -255,50 +333,84 @@ button:disabled {
255333
justify-content: center;
256334
align-items: center;
257335
text-align: center;
258-
padding: 8px 12px;
336+
padding: 0;
259337
z-index: 3;
260-
pointer-events: none;
261338
}
262339

263340
.footer-link {
341+
display: inline-flex;
342+
align-items: center;
343+
gap: 10px;
344+
padding: 12px 18px;
345+
background: rgba(11, 16, 32, 0.85);
346+
border: 1px solid var(--border);
347+
border-radius: 16px;
264348
text-decoration: none;
265349
color: inherit;
266-
pointer-events: auto;
350+
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
351+
backdrop-filter: blur(12px);
352+
transition: transform 0.25s ease, border-color 0.2s ease,
353+
box-shadow 0.25s ease;
267354
}
268355

269356
.footer-chip {
270357
display: inline-flex;
271358
align-items: center;
272359
gap: 8px;
273-
padding: 12px 20px;
274-
border-radius: 999px;
275-
background: rgba(15, 23, 42, 0.8);
276-
border: 1px solid var(--border);
360+
padding: 0;
361+
border-radius: 12px;
277362
color: var(--text);
278-
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
279-
backdrop-filter: blur(10px);
280363
animation: float 6s ease-in-out infinite;
281364
}
282365

283-
.footer-chip:hover { border-color: rgba(37, 99, 235, 0.7); }
366+
.footer-link:hover {
367+
transform: translateY(-4px);
368+
border-color: rgba(37, 99, 235, 0.7);
369+
box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38);
370+
}
284371

285372
@media (max-width: 768px) {
286-
body { padding-bottom: 140px; }
373+
body { padding-bottom: 180px; }
287374
.topbar {
288375
padding: 12px 16px;
289376
border-radius: 0 0 14px 14px;
377+
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
290378
}
291379
.nav { display: none; }
292-
.layout { width: 94vw; margin-top: 12px; }
293-
.hero h1 { font-size: 28px; }
380+
.layout { width: 96vw; margin-top: 14px; }
381+
.hero h1 { font-size: 28px; line-height: 1.2; }
294382
.panel { padding: 18px; }
295383
.grid { grid-template-columns: 1fr; }
296-
.chips { gap: 8px; }
297-
.footer { bottom: 12px; }
298-
.footer-chip { padding: 10px 16px; }
384+
.chips {
385+
gap: 8px;
386+
flex-wrap: nowrap;
387+
overflow-x: auto;
388+
padding-bottom: 6px;
389+
}
390+
.chips::-webkit-scrollbar { height: 6px; }
391+
.chips::-webkit-scrollbar-thumb {
392+
background: rgba(255, 255, 255, 0.12);
393+
border-radius: 8px;
394+
}
395+
.footer {
396+
left: 50%;
397+
width: calc(100% - 24px);
398+
transform: translateX(-50%);
399+
bottom: 12px;
400+
}
401+
.footer-link { width: 100%; justify-content: center; }
299402
button { width: 100%; }
300403
}
301404

405+
@media (max-width: 520px) {
406+
.brand { padding: 6px 10px; gap: 8px; }
407+
.brand-logo { width: 26px; height: 26px; }
408+
.brand span { font-size: 14px; }
409+
.layout { width: 98vw; }
410+
input { font-size: 14px; }
411+
.footer-link { padding: 12px 14px; }
412+
}
413+
302414
@keyframes drift {
303415
0% { transform: translate3d(-6px, 0, 0) scale(1); }
304416
100% { transform: translate3d(10px, -6px, 0) scale(1.04); }
@@ -318,7 +430,19 @@ button:disabled {
318430
body.ready .panel { opacity: 1; transform: translateY(0); }
319431
body.ready .hero { transition-delay: 0.05s; }
320432
body.ready .form { transition-delay: 0.1s; }
321-
body.ready .info .note:nth-child(1) { transition-delay: 0.12s; opacity: 1; transform: translateY(0); }
322-
body.ready .info .note:nth-child(2) { transition-delay: 0.16s; opacity: 1; transform: translateY(0); }
323-
body.ready .info .note:nth-child(3) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
433+
body.ready .info .note:nth-child(1) {
434+
transition-delay: 0.12s;
435+
opacity: 1;
436+
transform: translateY(0);
437+
}
438+
body.ready .info .note:nth-child(2) {
439+
transition-delay: 0.16s;
440+
opacity: 1;
441+
transform: translateY(0);
442+
}
443+
body.ready .info .note:nth-child(3) {
444+
transition-delay: 0.2s;
445+
opacity: 1;
446+
transform: translateY(0);
447+
}
324448

‎index.html‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,10 @@
44
<meta charset="utf-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1">
66
<title>DownloadGithubDir</title>
7-
<link rel="icon" type="image/svg+xml" href="assets/logo.svg?v=2">
8-
<link rel="apple-touch-icon" href="assets/logo.svg?v=2">
9-
<link id="favicon" rel="icon" type="image/svg+xml" href="assets/logo.svg?v=2">
7+
<link rel="icon" type="image/svg+xml" href="assets/logo.svg?v=3">
8+
<link rel="shortcut icon" type="image/svg+xml" href="assets/logo.svg?v=3">
9+
<link rel="apple-touch-icon" href="assets/logo.svg?v=3">
10+
<link id="favicon" rel="icon" type="image/svg+xml" href="assets/logo.svg?v=3">
1011
<link rel="preconnect" href="https://fonts.googleapis.com">
1112
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
1213
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
@@ -28,7 +29,7 @@
2829
<main class="layout">
2930
<section class="panel hero">
3031
<div>
31-
<p class="eyebrow" id="eyebrow">Client-side · Free</p>
32+
<p class="eyebrow" id="eyebrow">DownloadGithubDir - Client-side</p>
3233
<h1 id="hero-title">Download any GitHub folder</h1>
3334
<p class="lede" id="hero-tagline">Download any GitHub folder as a ZIP, entirely in your browser.</p>
3435
<div class="chips" id="sample-links"></div>
@@ -80,7 +81,7 @@ <h3>Tips</h3>
8081

8182
<footer class="footer" id="footer">
8283
<a class="footer-link" id="footer-link" href="https://majkey25.github.io/My-website-for-fun/" target="_blank" rel="noreferrer">
83-
<span class="footer-chip" id="footer-text">Built by Majkey25 · GitHub Pages</span>
84+
<span class="footer-chip" id="footer-text">Built by Majkey25 - GitHub Pages</span>
8485
</a>
8586
</footer>
8687

0 commit comments

Comments
 (0)