Skip to content

Commit acd2dcc

Browse files
ForLoopCodesForLoopCodes
committed
ui update
1 parent e4bdca1 commit acd2dcc

File tree

4 files changed

+418
-151
lines changed

4 files changed

+418
-151
lines changed

‎README.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,7 @@
1-
# Coming soon...
1+
# Ketchup
2+
3+
A web-based multifunctional application to manage your daily stress.
4+
5+
# Features:
6+
7+
## Timer

‎public/css/theme.css‎

Lines changed: 187 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,12 @@
66
:root {
77
--backcolor: #effdff;
88
}
9+
.hide-me {
10+
display: none;
11+
}
12+
.show-me {
13+
display: block;
14+
}
915
html,
1016
body,
1117
.viewport {
@@ -18,21 +24,23 @@ body,
1824
user-select: none;
1925
}
2026
button {
21-
background: #dce2e8;
22-
border-radius: 5px;
23-
color: #848b96;
27+
background: var(--backcolor);
28+
border: 2.5px solid #05001b;
29+
box-shadow: 5px 5px 0px 0px #05001b;
30+
border-radius: 10px;
2431
padding: 5px 10px;
2532
text-align: center;
2633
text-decoration: none;
2734
display: inline-block;
2835
font-size: 12px;
2936
margin: 4px 2px;
3037
cursor: pointer;
31-
border: none;
3238
}
3339
button:hover {
34-
background: #3b80f3;
35-
color: #fff;
40+
background: #05001b;
41+
box-shadow: 0 0 0 0 #05001b;
42+
color: var(--backcolor);
43+
transform: translate(2.5px, 2.5px);
3644
}
3745
table {
3846
border-collapse: collapse;
@@ -44,20 +52,21 @@ td {
4452
padding: 8px;
4553
}
4654
input {
47-
background: #dce2e8;
48-
border: 1px solid #dce2e8;
49-
border-radius: 5px;
55+
background: var(--backcolor);
56+
border-radius: 10px;
57+
border: 2.5px solid #05001b;
58+
box-shadow: 5px 5px 0px 0px #05001b;
5059
padding: 5px 10px;
5160
margin: 5px;
5261
}
5362
input:focus {
54-
background: #fff;
63+
box-shadow: 0 0 0 0 #05001b;
64+
transform: translate(2.5px, 2.5px);
5565
outline: none;
56-
border: 1px solid #3b80f3;
5766
}
5867
input:hover {
59-
background: #fff;
60-
border: 1px solid #3b80f3;
68+
box-shadow: 0 0 0 0 #05001b;
69+
transform: translate(2.5px, 2.5px);
6170
}
6271
select {
6372
background: #dce2e8;
@@ -256,13 +265,18 @@ select:hover {
256265
}
257266
.main-look-timer {
258267
font-size: 200px;
268+
text-shadow: -2.5px 2.5px 0 #000, 2.5px 2.5px 0 #000, 2.5px -2.5px 0 #000,
269+
-2.5px -2.5px 0 #000, 2.5px 0 0 #000, -2.5px 0 0 #000, 0 2.5px 0 #000,
270+
0 -2.5px 0 #000;
271+
color: white;
259272
position: absolute;
260273
width: max-content;
261274
top: 50%;
262275
left: 50%;
263276
transform: translate(-50%, -50%);
264277
z-index: 1;
265278
margin: 0;
279+
font-weight: 300;
266280
}
267281
.alt-look-timer {
268282
font-size: 120px;
@@ -284,14 +298,28 @@ select:hover {
284298
}
285299
.timer-input-invisible,
286300
.timer-button-invisible {
287-
padding-left: 0;
288-
padding-right: 0;
289-
font-size: 0;
301+
position: absolute;
302+
bottom: 50px;
303+
left: 50px;
290304
opacity: 0;
291-
visibility: hidden;
305+
pointer-events: none;
306+
}
307+
.timer-input-visible {
308+
position: absolute;
309+
bottom: 50px;
310+
left: 50px;
311+
font-size: 30px;
312+
text-align: center;
313+
font-weight: 600;
292314
}
293315
.timer-input-visible input {
294316
width: 30px;
317+
height: 30px;
318+
width: 40px;
319+
font-size: 20px;
320+
text-align: center;
321+
font-weight: 600;
322+
margin: 10px;
295323
}
296324
.timer-input-visible input::-webkit-outer-spin-button,
297325
.timer-input-visible input::-webkit-inner-spin-button {
@@ -303,6 +331,7 @@ select:hover {
303331
width: 310px;
304332
padding: 20px;
305333
margin-left: 20px;
334+
margin-bottom: 20px;
306335
border-radius: 20px;
307336
display: flex;
308337
background: white;
@@ -311,7 +340,6 @@ select:hover {
311340
align-items: center;
312341
border: 2.5px solid #05001b;
313342
box-shadow: 5px 5px 0px 0px #05001b;
314-
margin-bottom: 10px;
315343
font-weight: 700;
316344
}
317345
.sidebar-card:hover {
@@ -337,3 +365,144 @@ select:hover {
337365
.visible-sidebar-card-info {
338366
display: block;
339367
}
368+
.sidebar-card-long {
369+
height: fit-content;
370+
width: 310px;
371+
padding: 20px;
372+
margin-left: 20px;
373+
margin-bottom: 20px;
374+
border-radius: 20px;
375+
display: flex;
376+
background: white;
377+
flex-direction: column;
378+
justify-content: center;
379+
align-items: center;
380+
border: 2.5px solid #05001b;
381+
box-shadow: 5px 5px 0px 0px #05001b;
382+
font-weight: 700;
383+
}
384+
.sidebar-card-long:hover {
385+
box-shadow: 0px 0px 0px 0px #05001b;
386+
transform: translate(2.5px, 2.5px);
387+
}
388+
.sidebar-card-long div {
389+
text-align: center;
390+
width: 100%;
391+
}
392+
.sidebar-card-long ul {
393+
width: 100%;
394+
margin: 0;
395+
margin-top: 10px;
396+
}
397+
.sidebar-card-long:hover .visible-sidebar-card-info {
398+
display: none;
399+
}
400+
.sidebar-card-long:hover .invisible-sidebar-card-info {
401+
display: block;
402+
}
403+
.invisible-sidebar-long-card-info {
404+
display: none;
405+
}
406+
.visible-sidebar-long-card-info {
407+
display: block;
408+
}
409+
.timer-controls-container {
410+
position: absolute;
411+
top: 30px;
412+
left: 30px;
413+
}
414+
.timer-controls-container div {
415+
width: max-content;
416+
}
417+
.timer-controls-container div button {
418+
height: 50px;
419+
width: 50px;
420+
border-radius: 10px;
421+
background-color: var(--backcolor);
422+
border: 2.5px solid #05001b;
423+
box-shadow: 5px 5px 0px 0px #05001b;
424+
display: flex;
425+
justify-content: center;
426+
transition: 0.3s ease;
427+
align-items: center;
428+
margin: 10px;
429+
margin-bottom: 20px;
430+
}
431+
.timer-controls-container div button:hover {
432+
background-color: #05001b;
433+
box-shadow: 0px 0px 0px 0px #05001b;
434+
transform: translate(2.5px, 2.5px);
435+
}
436+
.timer-controls-container div button:hover * {
437+
fill: var(--backcolor);
438+
}
439+
.timer-controls-container div button svg {
440+
width: 20px !important;
441+
height: 20px !important;
442+
}
443+
.timer-reco-visible {
444+
width: 100px;
445+
opacity: 1;
446+
position: absolute;
447+
top: 30px;
448+
right: 30px;
449+
text-align: center;
450+
}
451+
.timer-reco-visible * {
452+
margin: 10px;
453+
width: 75px;
454+
font-weight: 600;
455+
}
456+
.timer-reco-invisible {
457+
width: 100px;
458+
opacity: 0;
459+
position: absolute;
460+
top: 30px;
461+
right: 30px;
462+
text-align: center;
463+
pointer-events: none;
464+
}
465+
.timer-history-item {
466+
position: relative;
467+
}
468+
.timer-history-item::after {
469+
content: "";
470+
position: absolute;
471+
top: 0;
472+
left: -15.5px;
473+
width: 0px;
474+
height: 100%;
475+
border-left: 3px solid #05001b;
476+
}
477+
@keyframes appear-in {
478+
0% {
479+
transform: translateY(-10px);
480+
opacity: 0;
481+
}
482+
100% {
483+
transform: translateY(0px);
484+
opacity: 1;
485+
}
486+
}
487+
.timer-history-timeline li:first-child::after {
488+
content: "";
489+
position: absolute;
490+
top: 0;
491+
left: -15.5px;
492+
width: 0px;
493+
height: 100%;
494+
border-left: 3px dashed #05001b;
495+
}
496+
.timer-history-timeline li:last-child::after {
497+
content: "";
498+
position: absolute;
499+
top: 0;
500+
left: -15.5px;
501+
width: 0px;
502+
height: 25%;
503+
border-left: 3px dashed #05001b;
504+
}
505+
.timer-history-timeline {
506+
max-height: 250px;
507+
overflow-y: scroll;
508+
}

‎src/components/Main.jsx‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -22,13 +22,27 @@ export default function Main() {
2222
/>
2323
<hr />
2424
<div className="main-body">
25-
{ActiveTab === "Dashboard" && <Dashboard />}
26-
{ActiveTab === "Timer" && <Timer />}
27-
{ActiveTab === "Tasks" && <Tasks />}
28-
{ActiveTab === "Tally" && <Tally />}
29-
{ActiveTab === "Expenses" && <Expenses />}
30-
{ActiveTab === "Mood" && <Mood />}
31-
{ActiveTab === "LeaveScreen" && <LeaveScreen />}
25+
<div className={ActiveTab === "Dashboard" ? "hide-me" : "show-me"}>
26+
<Dashboard />
27+
</div>
28+
<div className={ActiveTab === "Timer" ? "show-me" : "hide-me"}>
29+
<Timer />
30+
</div>
31+
<div className={ActiveTab === "Tasks" ? "show-me" : "hide-me"}>
32+
<Tasks />
33+
</div>
34+
<div className={ActiveTab === "Tally" ? "show-me" : "hide-me"}>
35+
<Tally />
36+
</div>
37+
<div className={ActiveTab === "Expenses" ? "show-me" : "hide-me"}>
38+
<Expenses />
39+
</div>
40+
<div className={ActiveTab === "Mood" ? "show-me" : "hide-me"}>
41+
<Mood />
42+
</div>
43+
<div className={ActiveTab === "LeaveScreen" ? "show-me" : "hide-me"}>
44+
<LeaveScreen />
45+
</div>
3246
</div>
3347
</div>
3448
);

0 commit comments

Comments
 (0)