Skip to content

Commit 68994e5

Browse files
clhuang224clhuang224
committed
refactor: split frontend code into modular JS and CSS files
1 parent 6b1b029 commit 68994e5

13 files changed

Lines changed: 619 additions & 541 deletions

File tree

‎assets/css/base.css‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
:root {
2+
color-scheme: light;
3+
--page-bg: #f5f7fb;
4+
--card-bg: #ffffff;
5+
--surface-muted: #f8fafc;
6+
--surface-border: #dce5f0;
7+
--text-main: #1f2937;
8+
--text-muted: #6b7280;
9+
--primary: #1976d2;
10+
--primary-dark: #145ea8;
11+
--danger-soft: #fdeceb;
12+
--danger-text: #b3261e;
13+
--shadow-card: 0 14px 36px rgba(15, 23, 42, 0.08);
14+
--shadow-soft: 0 8px 20px rgba(25, 118, 210, 0.12);
15+
--radius-lg: 20px;
16+
--radius-md: 14px;
17+
--radius-sm: 10px;
18+
}
19+
20+
* {
21+
box-sizing: border-box;
22+
}
23+
24+
body {
25+
overflow: hidden;
26+
margin: 0;
27+
min-height: 100dvh;
28+
overflow-x: hidden;
29+
overflow-y: auto;
30+
font-family: "Segoe UI", "Noto Sans TC", sans-serif;
31+
color: var(--text-main);
32+
background:
33+
radial-gradient(circle at top left, rgba(25, 118, 210, 0.12), transparent 28%),
34+
linear-gradient(180deg, #f9fbff 0%, var(--page-bg) 100%);
35+
}
36+
37+
h1,
38+
h2 {
39+
margin: 0;
40+
letter-spacing: -0.02em;
41+
}
42+
43+
h1 {
44+
font-size: clamp(2rem, 4vw, 2.8rem);
45+
line-height: 1.08;
46+
}
47+
48+
h2 {
49+
font-size: 1.35rem;
50+
}
51+
52+
label {
53+
display: block;
54+
margin-bottom: 0.55rem;
55+
font-size: 0.92rem;
56+
font-weight: 600;
57+
color: var(--text-main);
58+
}
59+
60+
textarea {
61+
width: 100%;
62+
min-height: 280px;
63+
padding: 1rem 1rem 1.1rem;
64+
margin: 0;
65+
border: 1px solid var(--surface-border);
66+
border-radius: var(--radius-md);
67+
background: var(--surface-muted);
68+
color: var(--text-main);
69+
font: inherit;
70+
line-height: 1.6;
71+
resize: vertical;
72+
outline: none;
73+
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
74+
}
75+
76+
button {
77+
border: 0;
78+
border-radius: 999px;
79+
font: inherit;
80+
font-weight: 700;
81+
cursor: pointer;
82+
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
83+
}
84+
85+
button:hover {
86+
transform: translateY(-1px);
87+
}
88+
89+
button:active {
90+
transform: translateY(0);
91+
}

assets/style.css renamed to assets/css/components.css

Lines changed: 0 additions & 203 deletions
Original file line numberDiff line numberDiff line change
@@ -1,139 +1,3 @@
1-
:root {
2-
color-scheme: light;
3-
--page-bg: #f5f7fb;
4-
--card-bg: #ffffff;
5-
--surface-muted: #f8fafc;
6-
--surface-border: #dce5f0;
7-
--text-main: #1f2937;
8-
--text-muted: #6b7280;
9-
--primary: #1976d2;
10-
--primary-dark: #145ea8;
11-
--danger-soft: #fdeceb;
12-
--danger-text: #b3261e;
13-
--shadow-card: 0 14px 36px rgba(15, 23, 42, 0.08);
14-
--shadow-soft: 0 8px 20px rgba(25, 118, 210, 0.12);
15-
--radius-lg: 20px;
16-
--radius-md: 14px;
17-
--radius-sm: 10px;
18-
}
19-
20-
* {
21-
box-sizing: border-box;
22-
}
23-
24-
body {
25-
overflow: hidden;
26-
margin: 0;
27-
min-height: 100dvh;
28-
overflow-x: hidden;
29-
overflow-y: auto;
30-
font-family: "Segoe UI", "Noto Sans TC", sans-serif;
31-
color: var(--text-main);
32-
background:
33-
radial-gradient(circle at top left, rgba(25, 118, 210, 0.12), transparent 28%),
34-
linear-gradient(180deg, #f9fbff 0%, var(--page-bg) 100%);
35-
}
36-
37-
.app-shell {
38-
overflow: auto;
39-
width: min(1120px, calc(100% - 2rem));
40-
margin: 0 auto;
41-
padding: 3.25rem 0 3rem;
42-
}
43-
44-
.hero {
45-
margin-bottom: 1.5rem;
46-
padding: 1.25rem 0 0.75rem;
47-
}
48-
49-
.eyebrow,
50-
.section-kicker {
51-
margin: 0 0 0.4rem;
52-
font-size: 0.78rem;
53-
font-weight: 700;
54-
letter-spacing: 0.08em;
55-
text-transform: uppercase;
56-
color: var(--primary);
57-
}
58-
59-
h1,
60-
h2 {
61-
margin: 0;
62-
letter-spacing: -0.02em;
63-
}
64-
65-
h1 {
66-
font-size: clamp(2rem, 4vw, 2.8rem);
67-
line-height: 1.08;
68-
}
69-
70-
h2 {
71-
font-size: 1.35rem;
72-
}
73-
74-
.hero-copy {
75-
max-width: 40rem;
76-
margin: 0.65rem 0 0;
77-
color: var(--text-muted);
78-
font-size: 1rem;
79-
line-height: 1.65;
80-
}
81-
82-
.card {
83-
background: var(--card-bg);
84-
border: 1px solid rgba(220, 229, 240, 0.9);
85-
border-radius: var(--radius-lg);
86-
box-shadow: var(--shadow-card);
87-
}
88-
89-
.editor-grid {
90-
display: grid;
91-
grid-template-columns: repeat(2, minmax(0, 1fr));
92-
gap: 1rem;
93-
padding: 1.25rem;
94-
margin-bottom: 1rem;
95-
}
96-
97-
.mapping-card {
98-
padding: 1.25rem;
99-
}
100-
101-
.section-heading {
102-
display: flex;
103-
align-items: flex-end;
104-
justify-content: space-between;
105-
gap: 1rem;
106-
margin-bottom: 1rem;
107-
}
108-
109-
label {
110-
display: block;
111-
margin-bottom: 0.55rem;
112-
font-size: 0.92rem;
113-
font-weight: 600;
114-
color: var(--text-main);
115-
}
116-
117-
.field {
118-
min-width: 0;
119-
}
120-
121-
textarea {
122-
width: 100%;
123-
min-height: 280px;
124-
padding: 1rem 1rem 1.1rem;
125-
margin: 0;
126-
border: 1px solid var(--surface-border);
127-
border-radius: var(--radius-md);
128-
background: var(--surface-muted);
129-
color: var(--text-main);
130-
font: inherit;
131-
line-height: 1.6;
132-
resize: vertical;
133-
outline: none;
134-
transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
135-
}
136-
1371
textarea:focus,
1382
.mapping-row input[type="text"]:focus {
1393
border-color: rgba(25, 118, 210, 0.62);
@@ -272,23 +136,6 @@ textarea[readonly]:hover {
272136
box-shadow: 0 0 0 4px rgba(25, 118, 210, 0.12);
273137
}
274138

275-
button {
276-
border: 0;
277-
border-radius: 999px;
278-
font: inherit;
279-
font-weight: 700;
280-
cursor: pointer;
281-
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
282-
}
283-
284-
button:hover {
285-
transform: translateY(-1px);
286-
}
287-
288-
button:active {
289-
transform: translateY(0);
290-
}
291-
292139
.button {
293140
min-height: 2.75rem;
294141
padding: 0 1rem;
@@ -337,25 +184,6 @@ button:active {
337184
color: var(--text-muted);
338185
}
339186

340-
.actions {
341-
display: flex;
342-
flex-wrap: wrap;
343-
gap: 0.75rem;
344-
}
345-
346-
.actions-toolbar {
347-
justify-content: flex-end;
348-
}
349-
350-
.actions-footer {
351-
margin-top: 1.4rem;
352-
}
353-
354-
.actions-footer .button-primary {
355-
width: 100%;
356-
justify-content: center;
357-
}
358-
359187
.status-message {
360188
position: fixed;
361189
right: 1.25rem;
@@ -407,37 +235,6 @@ body.is-sorting-active .drag-handle {
407235
}
408236

409237
@media (max-width: 800px) {
410-
.app-shell {
411-
width: min(100% - 1rem, 1120px);
412-
padding-top: 2rem;
413-
padding-bottom: 2rem;
414-
}
415-
416-
.editor-grid {
417-
grid-template-columns: 1fr;
418-
padding: 1rem;
419-
}
420-
421-
.mapping-card {
422-
padding: 1rem;
423-
}
424-
425-
.section-heading {
426-
align-items: stretch;
427-
flex-direction: column;
428-
}
429-
430-
.actions-toolbar,
431-
.actions-footer {
432-
justify-content: stretch;
433-
}
434-
435-
.actions-toolbar .button,
436-
.actions-footer .button,
437-
.section-heading .button {
438-
width: 100%;
439-
}
440-
441238
.mapping-row {
442239
flex-wrap: wrap;
443240
}

0 commit comments

Comments
 (0)