Skip to content

Commit 896852c

Browse files
nhktmdzhgnhktmdzhg
committed
fix some bug in UI/UX
1 parent 6c0ceca commit 896852c

5 files changed

Lines changed: 213 additions & 136 deletions

File tree

‎index.html‎

Lines changed: 45 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,47 @@
11
<!doctype html>
22
<html lang="vi">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/fcitx-lotus.svg" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta
8-
name="google-site-verification"
9-
content="uX42eG_ahgGB4-T_cD-piddp8xyyNg6ldpMopZcwCOI"
10-
/>
11-
<meta
12-
name="description"
13-
content="Fcitx5 Lotus: Bộ gõ tiếng Việt hiện đại và hiệu năng cao cho Linux. Hỗ trợ đầy đủ các kiểu gõ Telex, VNI với trải nghiệm mượt mà."
14-
/>
15-
<title>Fcitx5 Lotus | Bộ gõ tiếng Việt cho Linux</title>
16-
</head>
17-
<body>
18-
<div id="app"></div>
19-
<script type="module" src="/src/main.ts"></script>
20-
</body>
21-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<link rel="icon" type="image/svg+xml" href="/fcitx-lotus.svg" />
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
8+
<meta name="google-site-verification" content="uX42eG_ahgGB4-T_cD-piddp8xyyNg6ldpMopZcwCOI" />
9+
<meta name="description"
10+
content="Fcitx5 Lotus: Bộ gõ tiếng Việt hiện đại và hiệu năng cao cho Linux. Hỗ trợ đầy đủ các kiểu gõ Telex, VNI với trải nghiệm mượt mà." />
11+
<meta name="theme-color" content="#1e1e2e" />
12+
<meta property="og:type" content="website" />
13+
<meta property="og:title" content="Fcitx5 Lotus | Bộ gõ tiếng Việt cho Linux" />
14+
<meta property="og:description"
15+
content="Bộ gõ tiếng Việt hiện đại và hiệu năng cao cho Linux. Hỗ trợ đầy đủ các kiểu gõ Telex, VNI với trải nghiệm mượt mà." />
16+
<meta property="og:image" content="/fcitx-lotus.svg" />
17+
<meta name="twitter:card" content="summary" />
18+
<meta name="twitter:title" content="Fcitx5 Lotus | Bộ gõ tiếng Việt cho Linux" />
19+
<meta name="twitter:description" content="Bộ gõ tiếng Việt hiện đại và hiệu năng cao cho Linux." />
20+
<script>
21+
(function () {
22+
try {
23+
var themes = ['latte', 'frappe', 'macchiato', 'mocha'];
24+
var t = localStorage.getItem('catppuccin-theme');
25+
if (themes.indexOf(t) === -1) {
26+
t =
27+
window.matchMedia &&
28+
window.matchMedia('(prefers-color-scheme: light)').matches
29+
? 'latte'
30+
: 'mocha';
31+
}
32+
document.documentElement.setAttribute('data-theme', t);
33+
} catch (e) { }
34+
})();
35+
</script>
36+
<link rel="preconnect" href="https://fonts.googleapis.com" />
37+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
38+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet" />
39+
<title>Fcitx5 Lotus | Bộ gõ tiếng Việt cho Linux</title>
40+
</head>
41+
42+
<body>
43+
<div id="app"></div>
44+
<script type="module" src="/src/main.ts"></script>
45+
</body>
46+
47+
</html>

‎src/App.vue‎

Lines changed: 0 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,3 @@
11
<template>
22
<router-view />
33
</template>
4-
5-
<style>
6-
/* Reset cơ bản cho toàn app */
7-
html,
8-
body {
9-
margin: 0;
10-
padding: 0;
11-
box-sizing: border-box;
12-
scroll-behavior: smooth;
13-
font-family:
14-
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
15-
sans-serif;
16-
background-color: #f8fafc;
17-
color: #1e293b;
18-
}
19-
20-
*,
21-
*::before,
22-
*::after {
23-
box-sizing: inherit;
24-
}
25-
</style>

‎src/assets/style.css‎

Lines changed: 3 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,7 @@
11
:root {
2-
--c-primary: #10b981;
3-
--c-primary-hover: #059669;
4-
--c-bg-light: #f8fafc;
5-
--c-white: #ffffff;
6-
--c-text-main: #0f172a;
7-
--c-text-muted: #64748b;
8-
--c-border: #e2e8f0;
92
--max-width: 1200px;
103
}
114

12-
::-webkit-scrollbar {
13-
width: 8px;
14-
height: 8px;
15-
}
16-
::-webkit-scrollbar-track {
17-
background: var(--c-bg-light);
18-
}
19-
::-webkit-scrollbar-thumb {
20-
background: var(--c-primary);
21-
border-radius: 4px;
22-
}
23-
::-webkit-scrollbar-thumb:hover {
24-
background: var(--c-primary-hover);
25-
}
26-
275
html,
286
body {
297
margin: 0;
@@ -33,8 +11,8 @@ body {
3311
font-family:
3412
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
3513
sans-serif;
36-
background-color: #f8fafc;
37-
color: #1e293b;
14+
background-color: #1e1e2e;
15+
color: #cdd6f4;
3816
}
3917

4018
*,
@@ -47,22 +25,4 @@ body {
4725
max-width: var(--max-width);
4826
margin: 0 auto;
4927
padding: 0 20px;
50-
}
51-
52-
.section-title {
53-
text-align: center;
54-
margin-bottom: 40px;
55-
}
56-
57-
.section-title h2 {
58-
font-size: 2.2rem;
59-
color: var(--c-text-main);
60-
margin-bottom: 10px;
61-
}
62-
63-
.section-title p {
64-
font-size: 1.1rem;
65-
color: var(--c-text-muted);
66-
max-width: 600px;
67-
margin: 0 auto;
68-
}
28+
}

‎src/components/InteractiveInstaller.vue‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,7 +240,11 @@ const chromiumWaylandFlags = computed(() =>
240240
:key="d.name"
241241
class="distro-card"
242242
:class="{ active: selectedDistro === d.name }"
243+
role="button"
244+
tabindex="0"
245+
:aria-pressed="selectedDistro === d.name"
243246
@click="selectedDistro = d.name"
247+
@keydown.enter="selectedDistro = d.name"
244248
>
245249
<v-icon :name="d.icon" scale="1.5" />
246250
<span>{{ d.name }}</span>
@@ -256,7 +260,11 @@ const chromiumWaylandFlags = computed(() =>
256260
:key="de"
257261
class="de-card"
258262
:class="{ active: selectedDe === de }"
263+
role="button"
264+
tabindex="0"
265+
:aria-pressed="selectedDe === de"
259266
@click="selectedDe = de"
267+
@keydown.enter="selectedDe = de"
260268
>
261269
<span>{{ de }}</span>
262270
</div>
@@ -271,7 +279,11 @@ const chromiumWaylandFlags = computed(() =>
271279
:key="e"
272280
class="option-card"
273281
:class="{ active: selectedEnv === e }"
282+
role="button"
283+
tabindex="0"
284+
:aria-pressed="selectedEnv === e"
274285
@click="selectedEnv = e"
286+
@keydown.enter="selectedEnv = e"
275287
>
276288
<span>{{ e }}</span>
277289
</div>
@@ -286,7 +298,11 @@ const chromiumWaylandFlags = computed(() =>
286298
:key="i"
287299
class="option-card"
288300
:class="{ active: selectedInit === i }"
301+
role="button"
302+
tabindex="0"
303+
:aria-pressed="selectedInit === i"
289304
@click="selectedInit = i"
305+
@keydown.enter="selectedInit = i"
290306
>
291307
<span>{{ i }}</span>
292308
</div>
@@ -301,7 +317,11 @@ const chromiumWaylandFlags = computed(() =>
301317
:key="m"
302318
class="option-card"
303319
:class="{ active: selectedMethod === m }"
320+
role="button"
321+
tabindex="0"
322+
:aria-pressed="selectedMethod === m"
304323
@click="selectedMethod = m"
324+
@keydown.enter="selectedMethod = m"
305325
>
306326
<span>{{ m }}</span>
307327
</div>
@@ -316,7 +336,11 @@ const chromiumWaylandFlags = computed(() =>
316336
:key="s"
317337
class="option-card"
318338
:class="{ active: selectedShell === s }"
339+
role="button"
340+
tabindex="0"
341+
:aria-pressed="selectedShell === s"
319342
@click="selectedShell = s"
343+
@keydown.enter="selectedShell = s"
320344
>
321345
<span>{{ s }}</span>
322346
</div>
@@ -774,6 +798,13 @@ const chromiumWaylandFlags = computed(() =>
774798
color: var(--ctp-text);
775799
}
776800
801+
.distro-card:focus-visible,
802+
.de-card:focus-visible,
803+
.option-card:focus-visible {
804+
outline: 2px solid var(--ctp-green);
805+
outline-offset: 2px;
806+
}
807+
777808
/* Trạng thái Active - Chỉ đổi viền và chữ để không bị lóa mảng màu lớn */
778809
.distro-card.active,
779810
.de-card.active,

0 commit comments

Comments
 (0)