Skip to content

Commit a2a579a

Browse files
medeirosdevmedeirosdev
authored
Merge pull request #1 from medeirosdev/feature/optimization-attempts
Feature/optimization attempts - add new image filters and UI improvements
2 parents b6de25e + 4479c37 commit a2a579a

17 files changed

Lines changed: 1289 additions & 190 deletions

File tree

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,3 +22,6 @@ dist-ssr
2222
*.njsproj
2323
*.sln
2424
*.sw?
25+
26+
# Personal notes
27+
FEATURES.md

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>imagevislab</title>
7+
<title>ImageVisLab - PDI Simulator</title>
88
</head>
99
<body>
1010
<div id="root"></div>

‎public/favicon.svg‎

Lines changed: 17 additions & 0 deletions
Loading

‎src/App.css‎

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -147,4 +147,152 @@
147147
font-size: 1rem;
148148
color: var(--color-text-secondary);
149149
animation: pulse 1.5s ease-in-out infinite;
150+
}
151+
152+
/* =============================================================================
153+
Resize Modal
154+
============================================================================= */
155+
156+
.resize-modal-overlay {
157+
position: fixed;
158+
top: 0;
159+
left: 0;
160+
right: 0;
161+
bottom: 0;
162+
background: rgba(0, 0, 0, 0.7);
163+
backdrop-filter: blur(8px);
164+
display: flex;
165+
align-items: center;
166+
justify-content: center;
167+
z-index: 10000;
168+
animation: fadeIn 0.2s ease;
169+
}
170+
171+
.resize-modal {
172+
background: linear-gradient(145deg,
173+
rgba(30, 30, 40, 0.95),
174+
rgba(20, 20, 28, 0.98));
175+
border: 1px solid rgba(255, 255, 255, 0.1);
176+
border-radius: 16px;
177+
padding: 2rem 2.5rem;
178+
max-width: 420px;
179+
width: 90%;
180+
text-align: center;
181+
box-shadow:
182+
0 20px 60px rgba(0, 0, 0, 0.5),
183+
0 0 40px rgba(138, 99, 210, 0.15),
184+
inset 0 1px 0 rgba(255, 255, 255, 0.1);
185+
animation: modalSlideIn 0.3s ease;
186+
}
187+
188+
@keyframes modalSlideIn {
189+
from {
190+
opacity: 0;
191+
transform: scale(0.95) translateY(-10px);
192+
}
193+
194+
to {
195+
opacity: 1;
196+
transform: scale(1) translateY(0);
197+
}
198+
}
199+
200+
.resize-modal-icon {
201+
font-size: 3rem;
202+
margin-bottom: 0.5rem;
203+
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
204+
}
205+
206+
.resize-modal-title {
207+
font-size: 1.5rem;
208+
font-weight: 600;
209+
color: var(--color-text-primary);
210+
margin: 0 0 0.75rem 0;
211+
}
212+
213+
.resize-modal-size {
214+
margin: 0 0 0.75rem 0;
215+
}
216+
217+
.size-original {
218+
font-family: var(--font-mono);
219+
font-size: 1.25rem;
220+
font-weight: 600;
221+
color: #f59e0b;
222+
background: rgba(245, 158, 11, 0.1);
223+
padding: 0.25rem 0.75rem;
224+
border-radius: 6px;
225+
}
226+
227+
.resize-modal-warning {
228+
font-size: 0.9rem;
229+
color: var(--color-text-secondary);
230+
margin: 0 0 1.25rem 0;
231+
line-height: 1.5;
232+
}
233+
234+
.resize-modal-recommend {
235+
display: flex;
236+
flex-direction: column;
237+
gap: 0.25rem;
238+
margin-bottom: 1.5rem;
239+
padding: 0.75rem;
240+
background: rgba(34, 197, 94, 0.1);
241+
border-radius: 8px;
242+
border: 1px solid rgba(34, 197, 94, 0.2);
243+
}
244+
245+
.recommend-label {
246+
font-size: 0.8rem;
247+
color: var(--color-text-muted);
248+
text-transform: uppercase;
249+
letter-spacing: 0.5px;
250+
}
251+
252+
.recommend-size {
253+
font-family: var(--font-mono);
254+
font-size: 1.1rem;
255+
font-weight: 600;
256+
color: #22c55e;
257+
}
258+
259+
.resize-modal-buttons {
260+
display: flex;
261+
gap: 0.75rem;
262+
justify-content: center;
263+
}
264+
265+
.resize-btn {
266+
padding: 0.75rem 1.5rem;
267+
font-size: 0.95rem;
268+
font-weight: 500;
269+
border-radius: 8px;
270+
border: none;
271+
cursor: pointer;
272+
transition: all 0.2s ease;
273+
min-width: 140px;
274+
}
275+
276+
.resize-btn-primary {
277+
background: linear-gradient(135deg, #8a63d2, #6b4db3);
278+
color: white;
279+
box-shadow: 0 4px 12px rgba(138, 99, 210, 0.3);
280+
}
281+
282+
.resize-btn-primary:hover {
283+
background: linear-gradient(135deg, #9b74e3, #7c5ec4);
284+
transform: translateY(-2px);
285+
box-shadow: 0 6px 16px rgba(138, 99, 210, 0.4);
286+
}
287+
288+
.resize-btn-secondary {
289+
background: rgba(255, 255, 255, 0.08);
290+
color: var(--color-text-secondary);
291+
border: 1px solid rgba(255, 255, 255, 0.15);
292+
}
293+
294+
.resize-btn-secondary:hover {
295+
background: rgba(255, 255, 255, 0.12);
296+
color: var(--color-text-primary);
297+
border-color: rgba(255, 255, 255, 0.25);
150298
}

0 commit comments

Comments
 (0)