KeyArgo
/
csms-claims-and-neighbors
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update site design and add legend for CSMS claims

This commit is contained in:
Daniel LaForce 2024-08-07 16:39:18 -06:00
parent 81923e9535
commit 78dcbbc2fb
1 changed files with 26 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
index.html
View File

@ -10,9 +10,6 @@
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
display: flex;
flex-direction: column;
align-items: center;
background-color: #f4f4f4; background-color: #f4f4f4;
color: #333; color: #333;
} }
@ -26,6 +23,22 @@
top: 0; top: 0;
z-index: 1000; 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 { .map-container {
width: 100%; width: 100%;
display: flex; display: flex;
@ -33,26 +46,22 @@
align-items: center; align-items: center;
flex: 1; flex: 1;
padding: 20px; padding: 20px;
position: relative;
} }
iframe { iframe {
width: 960px; /* 800px + 20% */ width: 960px;
height: 660px; /* 550px + 20% */ height: 660px;
border: none; border: none;
margin-bottom: 20px; margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1);
} }
.legend { .legend {
width: 200px; width: 960px;
margin-bottom: 20px; margin-bottom: 20px;
text-align: left; text-align: left;
padding: 10px; padding: 10px;
background-color: #fff; background-color: #fff;
border: 1px solid #ccc; border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0,0,0,0.1); box-shadow: 0 4px 8px rgba(0,0,0,0.1);
position: absolute;
top: 20px;
right: 20px;
} }
.legend h3 { .legend h3 {
margin-top: 0; margin-top: 0;
@ -71,7 +80,7 @@
margin-right: 10px; margin-right: 10px;
} }
.color-green { .color-green {
background-color: #00ff00; /* Adjust the color to match your map */ background-color: #00ff00;
} }
.buttons { .buttons {
text-align: center; text-align: center;
@ -117,6 +126,12 @@
<div class="header"> <div class="header">
<h1>CSMS Claims and Neighbors</h1> <h1>CSMS Claims and Neighbors</h1>
</div> </div>
<div class="navbar">
<a href="#home">Home</a>
<a href="#claims">Claims</a>
<a href="#events">Events</a>
<a href="#contact">Contact</a>
</div>
<div class="map-container"> <div class="map-container">
<iframe src="https://www.google.com/maps/d/embed?mid=1CH09O8Gp7sQ6H2GdybFvRdLB-1vElVc&ehbc=2E312F"></iframe> <iframe src="https://www.google.com/maps/d/embed?mid=1CH09O8Gp7sQ6H2GdybFvRdLB-1vElVc&ehbc=2E312F"></iframe>
<iframe src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True"></iframe> <iframe src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True"></iframe>