Skip to content

Commit d6c8d96

Browse files
DessimADessimA
committed
feat: comprehensive UI/UX overhaul and dashboard bug fixes
- Implemented mobile-first redesign for the dashboard using glassmorphism - Added skeleton loading states and dynamic status messages for AI analysis - Fixed theme switching logic (Light/Dark mode) and CSS variable inheritance - Resolved JS syntax errors in upload manager and fixed landing page asset paths - Updated frontend configuration for LocalStack API compatibility
1 parent 4f218e4 commit d6c8d96

8 files changed

Lines changed: 350 additions & 146 deletions

File tree

‎frontend/public/assets/background.jpg‎

831 KB
Loading

‎frontend/public/css/components/dashboard-ui.css‎

Lines changed: 156 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,69 +1,174 @@
1-
/* --- Dashboard Professional Components --- */
2-
.status-badge {
3-
padding: 4px 12px;
4-
border-radius: 20px;
5-
font-size: 0.7rem;
6-
font-weight: 800;
7-
letter-spacing: 1px;
8-
text-transform: uppercase;
1+
/* Dashboard Layout & Components */
2+
.app-layout {
3+
display: grid;
4+
grid-template-areas: "main";
5+
min-height: 100vh;
96
}
10-
.status--pro { background: var(--color-primary); color: white; }
117

12-
.tech-score-gauge {
13-
position: relative;
14-
width: 160px;
15-
height: 160px;
16-
border-radius: 50%;
17-
background: conic-gradient(var(--color-primary) calc(var(--score) * 1%), var(--gauge-bg) 0);
8+
/* Mobile Bottom Nav (Thumb-Friendly) */
9+
.mobile-nav {
10+
position: fixed;
11+
bottom: 0;
12+
left: 0;
13+
right: 0;
14+
height: 64px;
15+
background: var(--color-surface);
16+
backdrop-filter: blur(20px);
17+
border-top: 1px solid var(--color-border);
1818
display: flex;
19+
justify-content: space-around;
1920
align-items: center;
20-
justify-content: center;
21-
margin: 0 auto 20px;
22-
transition: var(--transition);
21+
z-index: 1000;
22+
padding: 0 12px;
2323
}
2424

25-
.tech-score-gauge::after {
26-
content: attr(data-value);
27-
position: absolute;
28-
width: 130px;
29-
height: 130px;
30-
background: var(--color-surface-elevated); /* Cor de fundo que se adapta ao tema */
31-
border-radius: 50%;
25+
.mobile-nav .nav-link {
3226
display: flex;
27+
flex-direction: column;
3328
align-items: center;
34-
justify-content: center;
35-
font-size: 2.5rem;
36-
font-weight: 900;
37-
color: var(--color-text-primary);
29+
gap: 4px;
30+
text-decoration: none;
31+
color: var(--color-text-secondary);
32+
font-size: 0.7rem;
33+
font-weight: 600;
3834
transition: var(--transition);
3935
}
4036

41-
.narrative-card {
42-
background: var(--color-surface-elevated);
43-
padding: 32px;
44-
margin-bottom: 24px;
45-
border-left: 8px solid var(--color-primary);
46-
border-radius: var(--radius-panel);
47-
box-shadow: var(--shadow-main);
48-
transition: var(--transition);
49-
}
37+
.mobile-nav .nav-link i { font-size: 1.2rem; }
38+
.mobile-nav .nav-link--active { color: var(--color-primary); }
5039

51-
.skill-tag {
52-
background: var(--color-primary-light);
53-
color: var(--color-primary);
54-
padding: 6px 14px;
55-
border-radius: 6px;
56-
font-size: 0.8rem;
57-
font-weight: 700;
58-
border: 1px solid var(--color-border);
59-
transition: var(--transition);
40+
.desktop-sidebar { display: none; }
41+
42+
/* Responsive Grid for Results */
43+
.dashboard-grid {
44+
display: grid;
45+
grid-template-columns: 1fr;
46+
gap: 24px;
47+
padding-bottom: 100px; /* Space for mobile nav */
6048
}
6149

62-
.history-card {
50+
/* Glass Card Refinement */
51+
.dashboard-card {
52+
padding: 24px;
6353
background: var(--color-surface);
64-
padding: 20px;
6554
border-radius: var(--radius-panel);
6655
border: 1px solid var(--color-border);
67-
color: var(--color-text-secondary);
6856
transition: var(--transition);
69-
}
57+
}
58+
59+
/* Input Area Mobile-First */
60+
.search-container {
61+
display: flex;
62+
flex-direction: column;
63+
gap: 12px;
64+
width: 100%;
65+
}
66+
67+
@media (min-width: 640px) {
68+
.search-container {
69+
flex-direction: row;
70+
}
71+
}
72+
73+
/* Gauge Responsive */
74+
.gauge-container {
75+
width: 100%;
76+
max-width: 200px;
77+
margin: 0 auto;
78+
}
79+
80+
/* Desktop Styles */
81+
@media (min-width: 1024px) {
82+
.app-layout {
83+
grid-template-columns: 260px 1fr;
84+
grid-template-areas: "sidebar main";
85+
}
86+
87+
.mobile-nav { display: none; }
88+
89+
.desktop-sidebar {
90+
grid-area: sidebar;
91+
display: flex;
92+
flex-direction: column;
93+
padding: 32px 24px;
94+
background: var(--color-surface);
95+
border-right: 1px solid var(--color-border);
96+
position: sticky;
97+
top: 0;
98+
height: 100vh;
99+
}
100+
101+
.desktop-sidebar .nav-link {
102+
display: flex;
103+
align-items: center;
104+
gap: 12px;
105+
padding: 12px 16px;
106+
border-radius: 12px;
107+
text-decoration: none;
108+
color: var(--color-text-secondary);
109+
margin-bottom: 8px;
110+
font-weight: 600;
111+
transition: var(--transition);
112+
}
113+
114+
.desktop-sidebar .nav-link:hover {
115+
background: var(--color-primary-light);
116+
color: var(--color-primary);
117+
}
118+
119+
.desktop-sidebar .nav-link--active {
120+
background: var(--color-primary);
121+
color: white;
122+
}
123+
124+
.dashboard-grid {
125+
grid-template-columns: 320px 1fr;
126+
padding-bottom: 32px;
127+
}
128+
}
129+
130+
/* Skeleton Loading Animations */
131+
.skeleton-container {
132+
overflow: hidden;
133+
position: relative;
134+
}
135+
136+
.skeleton-line, .skeleton-circle {
137+
background: var(--color-border);
138+
position: relative;
139+
overflow: hidden;
140+
}
141+
142+
.skeleton-line {
143+
height: 12px;
144+
border-radius: 6px;
145+
}
146+
147+
.skeleton-circle {
148+
border-radius: 50%;
149+
}
150+
151+
.skeleton-line::after, .skeleton-circle::after {
152+
content: "";
153+
position: absolute;
154+
top: 0;
155+
left: 0;
156+
width: 100%;
157+
height: 100%;
158+
background: linear-gradient(90deg, transparent, var(--color-surface-glass), transparent);
159+
animation: skeleton-shimmer 1.5s infinite;
160+
}
161+
162+
@keyframes skeleton-shimmer {
163+
0% { transform: translateX(-100%); }
164+
100% { transform: translateX(100%); }
165+
}
166+
167+
@keyframes pulse-soft {
168+
0%, 100% { opacity: 1; }
169+
50% { opacity: 0.7; }
170+
}
171+
172+
#loading-msg {
173+
animation: pulse-soft 2s infinite ease-in-out;
174+
}

‎frontend/public/css/variables.css‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,43 @@
1-
:root[data-theme="light"] {
1+
/* --- Variables & Themes --- */
2+
:root {
3+
/* Light Theme (Default) */
24
--color-primary: #0052CC;
35
--color-primary-hover: #0747A6;
46
--color-primary-light: rgba(0, 82, 204, 0.1);
57
--color-secondary: #FF8C42;
68
--color-background: #F4F5F7;
79
--color-surface: rgba(255, 255, 255, 0.95);
810
--color-surface-elevated: #FFFFFF;
11+
--color-surface-glass: rgba(255, 255, 255, 0.7);
912
--color-text-primary: #172B4D;
1013
--color-text-secondary: #44546F;
1114
--color-border: rgba(9, 30, 66, 0.13);
1215
--bg-filter: invert(0.9) hue-rotate(180deg) brightness(1.1);
1316
--shadow-main: 0 12px 24px -6px rgba(9, 30, 66, 0.15), 0 0 1px 0 rgba(9, 30, 66, 0.31);
1417
--gauge-bg: #EBECF0;
18+
19+
/* Global Settings */
20+
--bg-image: url('../assets/background.jpg');
21+
--font-main: 'Inter', system-ui, -apple-system, sans-serif;
22+
--radius-btn: 8px;
23+
--radius-panel: 16px;
24+
--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
25+
--container-max: 1200px;
1526
}
1627

17-
:root[data-theme="dark"] {
28+
[data-theme="dark"] {
1829
--color-primary: #4C9AFF;
1930
--color-primary-hover: #2684FF;
2031
--color-primary-light: rgba(76, 154, 255, 0.2);
2132
--color-secondary: #FFA05A;
2233
--color-background: #091E42;
2334
--color-surface: rgba(22, 38, 70, 0.85);
2435
--color-surface-elevated: #162546;
36+
--color-surface-glass: rgba(22, 38, 70, 0.7);
2537
--color-text-primary: #FFFFFF;
2638
--color-text-secondary: #B3D4FF;
2739
--color-border: rgba(255, 255, 255, 0.15);
2840
--bg-filter: brightness(0.4) contrast(1.2);
2941
--shadow-main: 0 12px 24px -6px rgba(0, 0, 0, 0.6);
3042
--gauge-bg: #071432;
31-
}
32-
33-
:root {
34-
--bg-image: url('../assets/background.jpg');
35-
--font-main: 'Inter', system-ui, -apple-system, sans-serif;
36-
--radius-btn: 8px;
37-
--radius-panel: 16px;
38-
--transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
39-
--container-max: 1200px;
40-
}
43+
}

0 commit comments

Comments
 (0)