diff --git a/calenderApp/calender.html b/calenderApp/calender.html
index 74e984e..13a8cda 100644
--- a/calenderApp/calender.html
+++ b/calenderApp/calender.html
@@ -1,6 +1,5 @@
-
@@ -20,20 +19,24 @@
--ikea-gray: #F5F5F5;
--ikea-dark: #111111;
--ikea-text: #484848;
+ --bg-gradient: linear-gradient(to right, #0058AB, #4B9CD3);
+ --btn-gradient: linear-gradient(135deg, #FBD914, #0058AB);
}
body {
- background-color: var(--ikea-gray);
+ background: var(--bg-gradient);
color: var(--ikea-text);
line-height: 1.5;
}
.top-banner {
background-color: var(--ikea-yellow);
- padding: 8px;
+ padding: 10px;
text-align: center;
- font-size: 14px;
+ font-size: 16px;
font-weight: 700;
+ color: #111;
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15);
}
.navbar {
@@ -42,15 +45,38 @@
display: flex;
align-items: center;
justify-content: space-between;
- box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+ position: sticky;
+ top: 0;
+ z-index: 1000;
}
.logo {
color: var(--ikea-blue);
- font-size: 24px;
+ font-size: 26px;
font-weight: 800;
text-transform: uppercase;
- letter-spacing: 2px;
+ letter-spacing: 1px;
+ }
+
+ .btn {
+ padding: 10px 24px;
+ border-radius: 30px;
+ font-weight: 600;
+ font-size: 14px;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ transition: all 0.2s ease;
+ background: var(--btn-gradient);
+ color: #fff;
+ border: none;
+ }
+
+ .btn:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.dashboard-container {
@@ -61,19 +87,16 @@
.dashboard-grid {
display: grid;
- grid-template-columns: 300px 1fr;
+ grid-template-columns: 1fr 3fr;
gap: 24px;
}
.sidebar {
- background: white;
+ background: #fff;
border-radius: 8px;
padding: 24px;
height: fit-content;
- }
-
- .sidebar-menu {
- list-style: none;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.sidebar-menu li {
@@ -83,73 +106,28 @@
cursor: pointer;
display: flex;
align-items: center;
- gap: 12px;
- }
-
- .sidebar-menu li:hover {
- background: var(--ikea-gray);
+ gap: 16px;
+ transition: background 0.3s ease, transform 0.2s ease;
}
- .sidebar-menu li.active {
+ .sidebar-menu li:hover, .sidebar-menu li.active {
background: var(--ikea-blue);
- color: white;
+ color: #fff;
+ transform: translateX(4px);
}
.calendar-card {
background: white;
border-radius: 8px;
padding: 32px;
- }
-
- .calendar-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 32px;
- }
-
- .calendar-title h1 {
- font-size: 24px;
- font-weight: 700;
- margin-bottom: 8px;
- }
-
- .calendar-controls {
- display: flex;
- gap: 16px;
- }
-
- .btn {
- padding: 12px 24px;
- border-radius: 24px;
- border: none;
- font-weight: 600;
- cursor: pointer;
- display: flex;
- align-items: center;
- gap: 8px;
- transition: all 0.2s ease;
- }
-
- .btn-primary {
- background: var(--ikea-blue);
- color: white;
- }
-
- .btn-secondary {
- background: var(--ikea-gray);
- color: var(--ikea-text);
- }
-
- .btn:hover {
- transform: translateY(-2px);
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.calendar-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
- gap: 12px;
+ gap: 10px;
+ margin-top: 20px;
}
.calendar-grid div {
@@ -157,69 +135,50 @@
display: flex;
align-items: center;
justify-content: center;
- border-radius: 8px;
+ border-radius: 10px;
font-weight: 500;
cursor: pointer;
- transition: all 0.2s ease;
- }
-
- .calendar-grid .header {
- background: var(--ikea-gray);
- font-size: 14px;
- font-weight: 600;
- color: var(--ikea-text);
- }
-
- .calendar-grid .day {
+ transition: transform 0.2s ease;
+ position: relative;
background: white;
- border: 1px solid var(--ikea-gray);
- }
-
- .calendar-grid .day:hover {
- background: var(--ikea-gray);
- transform: translateY(-2px);
+ color: var(--ikea-text);
}
.calendar-grid .today {
background: var(--ikea-blue);
color: white;
- font-weight: 700;
}
- .calendar-grid .has-event::after {
- content: '';
- position: absolute;
- bottom: 8px;
- width: 4px;
- height: 4px;
+ .calendar-grid .day:hover {
background: var(--ikea-yellow);
- border-radius: 50%;
+ transform: scale(1.05);
}
.stats-container {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
+ display: flex;
+ justify-content: space-between;
gap: 24px;
margin-top: 24px;
}
.stat-card {
- background: white;
- border-radius: 8px;
+ flex: 1;
+ background: var(--btn-gradient);
+ border-radius: 12px;
padding: 24px;
+ color: #fff;
text-align: center;
+ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.stat-card h3 {
font-size: 32px;
font-weight: 700;
- color: var(--ikea-blue);
- margin-bottom: 8px;
}
.stat-card p {
- color: var(--ikea-text);
font-size: 14px;
+ color: rgba(255, 255, 255, 0.8);
}
@@ -231,9 +190,8 @@
@@ -241,92 +199,23 @@
-
-
-
-
-
-
-
-
-
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
-
20
-
21
-
22
-
23
-
24
-
25
-
26
-
27
-
28
-
29
-
30
-
31
+
26
+
85%
-
-
-
-