Skip to content

Commit eb693e6

Browse files
codeperfectpluscodeperfectplus
committed
chore: navbar fixed
1 parent 22267da commit eb693e6

File tree

6 files changed

+382
-357
lines changed

6 files changed

+382
-357
lines changed

‎src/static/css/card.css

Lines changed: 258 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
/* General Card Styles */
2+
.card {
3+
min-height: 150px; /* Ensures consistent card height */
4+
background-size: cover; /* Ensure the image covers the entire card */
5+
background-repeat: no-repeat; /* Prevent the image from repeating */
6+
background-position: center center; /* Center the image */
7+
color: #fff; /* Adjust text color for better contrast */
8+
border: none; /* Remove default border */
9+
border-radius: 10px; /* Rounded corners */
10+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1); /* Box shadow for depth */
11+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effect */
12+
position: relative; /* Allows positioning for the pseudo-element */
13+
}
14+
15+
/* Specific Background Colors */
16+
.card.bg-basic {
17+
background-color: var(--color-primary); /* Bright blue for basic info */
18+
}
19+
20+
.card.bg-username {
21+
background-color: var(--color-username); /* Bright blue for username */
22+
}
23+
24+
.card.bg-ipv4 {
25+
background-color: var(--color-ip); /* Bright blue for IP address */
26+
}
27+
28+
.card.bg-cpu {
29+
background-color: var(--color-cpu); /* Red for CPU */
30+
}
31+
32+
.card.bg-boot {
33+
background-color: var(--color-boot); /* Green for boot time */
34+
}
35+
36+
.card.bg-connection {
37+
background-color: var(--color-connection); /* Red for connection */
38+
}
39+
40+
.card.bg-dashboard-memory {
41+
background-color: var(--color-bg-dashboard-memory); /* Green for memory card */
42+
}
43+
44+
.card.bg-cpu-usage {
45+
background-color: var(--color-cpu-usage); /* Yellow for CPU usage */
46+
}
47+
48+
.card.bg-memory {
49+
background-color: var(--color-memory); /* Purple for memory usage */
50+
}
51+
52+
.card.bg-disk {
53+
background-color: var(--color-disk); /* Gray for disk usage */
54+
}
55+
56+
.card.bg-uptime {
57+
background-color: var(--color-uptime); /* Cyan for uptime */
58+
}
59+
60+
.card.bg-network {
61+
background-color: var(--color-network); /* Bright blue for network */
62+
}
63+
64+
.card.bg-speedtest {
65+
background-color: var(--color-speedtest); /* Bright blue for speedtest */
66+
}
67+
68+
.card-body {
69+
display: flex;
70+
flex-direction: column;
71+
justify-content: center;
72+
align-items: center; /* Center-aligns the content */
73+
}
74+
75+
.card-title {
76+
font-size: 1.25rem; /* Adjusts font size for titles */
77+
}
78+
79+
.card-text {
80+
font-size: 1.5rem; /* Adjusts font size for text */
81+
}
82+
83+
/* Battery Card Styles */
84+
.battery-card {
85+
background: linear-gradient(135deg, #ffffff, #e0e0e0);
86+
border-radius: 10px;
87+
border: none;
88+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
89+
transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
90+
color: #fff;
91+
}
92+
93+
.battery-card[data-battery="100"] {
94+
background: linear-gradient(135deg, #76c7c0, #4caf50);
95+
}
96+
97+
.battery-card[data-battery="75"] {
98+
background: linear-gradient(135deg, #76c7c0, #ffeb3b);
99+
}
100+
101+
.battery-card[data-battery="50"] {
102+
background: linear-gradient(135deg, #fbc02d, #ff9800);
103+
}
104+
105+
.battery-card[data-battery="25"] {
106+
background: linear-gradient(135deg, #ff7043, #f44336);
107+
}
108+
109+
.battery-card[data-battery="0"] {
110+
background: linear-gradient(135deg, #f44336, #d32f2f);
111+
color: #fff;
112+
}
113+
114+
/* The hover effect still applies */
115+
.battery-card:hover {
116+
transform: translateY(-10px);
117+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
118+
color: #fff;
119+
}
120+
121+
/* Card containing CPU core visualization */
122+
.card.bg-cpu {
123+
position: relative;
124+
}
125+
126+
.cpu-core-visualization {
127+
display: flex;
128+
gap: 0.5rem; /* Space between bars */
129+
margin-top: 1rem;
130+
justify-content: center; /* Center-align bars */
131+
}
132+
133+
134+
/* Individual bar representing a CPU core */
135+
.cpu-core-bar {
136+
width: 10px; /* Width of each bar */
137+
height: 10px; /* Height of each bar */
138+
background-color: #ffffff; /* Bar color */
139+
border-radius: 5px; /* Rounded corners */
140+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Shadow for depth */
141+
transition: background-color 0.3s ease; /* Smooth transition on hover */
142+
}
143+
144+
/* Card Red Bottom Effect */
145+
.card::before {
146+
content: "";
147+
position: absolute;
148+
bottom: 0;
149+
left: 0;
150+
width: 100%;
151+
height: 10px; /* Height of the red effect */
152+
border-radius: 0 0 10px 10px; /* Match the card's border radius */
153+
z-index: 1; /* Ensure it's on top of the card content */
154+
}
155+
156+
.cpu-core-bar:hover {
157+
background-color: var(--color-cpu); /* Red color on hover */
158+
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.6); /* Slightly larger shadow */
159+
transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
160+
filter: brightness(1.2); /* Brighten the bar */
161+
162+
}
163+
164+
/* General Card Hover Effect */
165+
.card:hover {
166+
transform: translateY(-10px); /* Slight lift effect */
167+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
168+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
169+
}
170+
171+
/* Specific Background Colors with Hover Effects */
172+
173+
/* User-related info */
174+
.card.bg-username:hover {
175+
transform: translateX(-10px); /* Slight lift effect */
176+
box-shadow: 0 10px 20px var(--color-username);
177+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
178+
}
179+
180+
/* Boot time */
181+
.card.bg-boot:hover {
182+
transform: translateZ(-10px); /* Slight lift effect */
183+
box-shadow: 0 10px 20px var(--color-boot);
184+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
185+
}
186+
187+
/* Memory Use */
188+
.card.bg-dashboard-memory:hover {
189+
transform: translateY(-10px); /* Slight lift effect */
190+
box-shadow: 0 10px 20px var(--color-bg-dashboard-memory);
191+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
192+
}
193+
194+
/* Network info */
195+
.card.bg-connection:hover {
196+
transform: translateX(-10px); /* Slight lift effect */
197+
box-shadow: 0 10px 20px var(--color-connection);
198+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
199+
}
200+
201+
/* CPU-related info */
202+
.card.bg-cpu:hover {
203+
transform: translateX(-10px); /* Slight lift effect */
204+
box-shadow: 0 10px 20px var(--color-cpu);
205+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
206+
}
207+
208+
/* Battery Card Styles */
209+
.battery-card:hover {
210+
transform: translateY(-10px); /* Slight lift effect */
211+
box-shadow: 0 10px 20px var(--color-shadow);
212+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
213+
}
214+
215+
/* CPU usage */
216+
.card.bg-cpu-usage:hover {
217+
transform: translateX(-10px); /* Slight lift effect */
218+
box-shadow: 0 10px 20px var(--color-cpu-usage);
219+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
220+
}
221+
222+
/* Memory usage */
223+
.card.bg-memory:hover {
224+
transform: translateZ(-10px); /* Slight lift effect */
225+
box-shadow: 0 10px 20px var(--color-memory);
226+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
227+
}
228+
229+
/* Disk usage */
230+
.card.bg-disk:hover {
231+
transform: translateY(-10px); /* Slight lift effect */
232+
box-shadow: 0 10px 20px var(--color-disk);
233+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
234+
}
235+
236+
/* Uptime */
237+
.card.bg-uptime:hover {
238+
transform: translateX(-10px); /* Slight lift effect */
239+
box-shadow: 0 10px 20px var(--color-uptime);
240+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
241+
}
242+
243+
/* Network statistics */
244+
.card.bg-network:hover {
245+
transform: translateY(-10px); /* Slight lift effect */
246+
box-shadow: 0 10px 20px var(--color-network);
247+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
248+
}
249+
250+
/* Speedtest */
251+
.card.bg-speedtest:hover {
252+
transform: translateZ(-10px); /* Slight lift effect */
253+
box-shadow: 0 10px 20px var(--color-speedtest);
254+
transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
255+
}
256+
257+
258+

‎src/static/css/footer.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
footer {
2+
background-color: #343a40;
3+
color: #adb5bd;
4+
padding: 1rem 0;
5+
position: relative;
6+
width: 100%;
7+
bottom: 0;
8+
text-align: center;
9+
position: fixed;
10+
}
11+
12+
footer a {
13+
color: #ffffff;
14+
text-decoration: none;
15+
}
16+
17+
footer a:hover {
18+
color: #ced4da;
19+
text-decoration: underline;
20+
}

0 commit comments

Comments
 (0)