Skip to content

Commit 8ca45b6

Browse files
aimtyaemaimtyaem
authored
Update dashboard.html
Updated
1 parent 0889bb8 commit 8ca45b6

File tree

1 file changed

+85
-84
lines changed

1 file changed

+85
-84
lines changed

‎dashboard.html‎

Lines changed: 85 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -6,105 +6,106 @@
66
<title>Agricultural Dashboard</title>
77
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap">
88
<style>
9-
body {
10-
font-family: 'Inter', sans-serif;
11-
margin: 0;
12-
padding: 0;
13-
background-color: #f9fafb;
14-
color: #333;
15-
}
9+
body {
10+
font-family: 'Inter', sans-serif;
11+
margin: 0;
12+
padding: 0;
13+
background-color: #f9fafb;
14+
color: #333;
15+
}
1616

17-
/* Header and Navigation Bar */
18-
.header {
19-
display: flex;
20-
align-items: center;
21-
background-color: #fff;
22-
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
23-
padding: 12px 20px;
24-
position: fixed;
25-
top: 0;
26-
left: 0;
27-
width: 100%;
28-
z-index: 1000;
29-
}
17+
/* Fixed header selector and improved navigation layout */
18+
header {
19+
display: flex;
20+
align-items: center;
21+
background-color: #fff;
22+
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
23+
padding: 12px 20px;
24+
position: fixed;
25+
top: 0;
26+
left: 0;
27+
width: 100%;
28+
z-index: 1000;
29+
}
3030

31-
.logo {
32-
max-height: 50px;
33-
margin-right: 20px;
34-
}
31+
.logo {
32+
height: 40px; /* Consistent height for better alignment */
33+
margin-right: 30px;
34+
}
3535

36-
nav {
37-
display: flex;
38-
align-items: center;
39-
flex-grow: 1;
40-
}
36+
nav {
37+
display: flex;
38+
gap: 10px; /* Better spacing between menu items */
39+
align-items: center;
40+
}
4141

42-
.menu-item {
43-
text-decoration: none;
44-
color: #555;
45-
font-size: 16px;
46-
font-weight: 600;
47-
padding: 10px 15px;
48-
transition: all 0.3s ease;
49-
border-radius: 6px;
50-
margin-right: 15px;
51-
}
42+
.menu-item {
43+
text-decoration: none;
44+
color: #555;
45+
font-size: 16px;
46+
font-weight: 600;
47+
padding: 10px 15px;
48+
transition: all 0.3s ease;
49+
border-radius: 6px;
50+
white-space: nowrap; /* Prevent text wrapping */
51+
}
5252

53-
.menu-item:hover,
54-
.menu-item.active {
55-
background-color: #4CAF50;
56-
color: white;
57-
}
53+
.menu-item:hover,
54+
.menu-item.active {
55+
background-color: #4CAF50;
56+
color: white;
57+
}
5858

59-
/* Dashboard Layout */
60-
.dashboard-container {
61-
display: flex;
62-
flex-wrap: wrap;
63-
gap: 20px;
64-
margin-top: 70px; /* Adjusted for fixed header */
65-
padding: 20px;
66-
}
59+
/* Rest of your existing CSS remains unchanged */
60+
.dashboard-container {
61+
display: flex;
62+
flex-wrap: wrap;
63+
gap: 20px;
64+
margin-top: 70px;
65+
padding: 20px;
66+
}
6767

68-
.card {
69-
background: white;
70-
border-radius: 10px;
71-
padding: 20px;
72-
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
73-
flex: 1;
74-
min-width: 300px;
75-
transition: transform 0.2s ease;
76-
}
68+
.card {
69+
background: white;
70+
border-radius: 10px;
71+
padding: 20px;
72+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
73+
flex: 1;
74+
min-width: 300px;
75+
transition: transform 0.2s ease;
76+
}
7777

78-
.card:hover {
79-
transform: translateY(-5px);
80-
}
78+
.card:hover {
79+
transform: translateY(-5px);
80+
}
8181

82-
.card-title {
83-
margin-top: 0;
84-
font-size: 18px;
85-
font-weight: bold;
86-
}
82+
.card-title {
83+
margin-top: 0;
84+
font-size: 18px;
85+
font-weight: bold;
86+
}
8787

88-
.loading {
89-
display: flex;
90-
justify-content: center;
91-
align-items: center;
92-
height: 80px;
93-
}
88+
.loading {
89+
display: flex;
90+
justify-content: center;
91+
align-items: center;
92+
height: 80px;
93+
}
9494
</style>
9595
</head>
9696
<body>
9797
<header>
9898
<img src="logo.jpg" alt="Logo" class="logo">
99-
<nav>
100-
<a href="notifications.html" class="menu-item active">🌱 Notifications</a>
101-
<a href="climate.html" class="menu-item">🌦️ Climate</a>
102-
<a href="fields.html" class="menu-item">🌾 Fields</a>
103-
<a href="water.html" class="menu-item">💧 Water</a>
104-
<a href="reports.html" class="menu-item">📊 Reports</a>
105-
<a href="tutorials.html" class="menu-item">🎓 Tutorials</a>
106-
</nav>
99+
<nav>
100+
<a href="notifications.html" class="menu-item active">🌱 Notifications</a>
101+
<a href="climate.html" class="menu-item">🌦️ Climate</a>
102+
<a href="fields.html" class="menu-item">🌾 Fields</a>
103+
<a href="water.html" class="menu-item">💧 Water</a>
104+
<a href="reports.html" class="menu-item">📊 Reports</a>
105+
<a href="tutorials.html" class="menu-item">🎓 Tutorials</a>
106+
</nav>
107107
</header>
108+
108109
<div class="dashboard-container">
109110
<div class="card" id="fields-card">
110111
<h3 class="card-title">Field Status</h3>
@@ -282,4 +283,4 @@ <h3 class="card-title">🌱 Expert Recommendations</h3>
282283
</script>
283284

284285
</body>
285-
</html>
286+
</html>

0 commit comments

Comments
 (0)