diff --git a/index.html b/index.html
index d8b2414..7781c5f 100644
--- a/index.html
+++ b/index.html
@@ -10,9 +10,6 @@
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
- display: flex;
- flex-direction: column;
- align-items: center;
background-color: #f4f4f4;
color: #333;
}
@@ -26,6 +23,22 @@
top: 0;
z-index: 1000;
}
+ .navbar {
+ display: flex;
+ justify-content: center;
+ background-color: #2c3e50;
+ padding: 10px 0;
+ }
+ .navbar a {
+ color: white;
+ padding: 14px 20px;
+ text-decoration: none;
+ text-align: center;
+ }
+ .navbar a:hover {
+ background-color: #2980b9;
+ border-radius: 5px;
+ }
.map-container {
width: 100%;
display: flex;
@@ -33,26 +46,22 @@
align-items: center;
flex: 1;
padding: 20px;
- position: relative;
}
iframe {
- width: 960px; /* 800px + 20% */
- height: 660px; /* 550px + 20% */
+ width: 960px;
+ height: 660px;
border: none;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.legend {
- width: 200px;
+ width: 960px;
margin-bottom: 20px;
text-align: left;
padding: 10px;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
- position: absolute;
- top: 20px;
- right: 20px;
}
.legend h3 {
margin-top: 0;
@@ -71,7 +80,7 @@
margin-right: 10px;
}
.color-green {
- background-color: #00ff00; /* Adjust the color to match your map */
+ background-color: #00ff00;
}
.buttons {
text-align: center;
@@ -117,6 +126,12 @@
+