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

Update layout, add legend for CSMS claims, and style adjustments

This commit is contained in:
Daniel LaForce 2024-08-07 16:09:26 -06:00
parent 3dd9c473ae
commit ce03bc43fa
1 changed files with 35 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
index.html
View File

@ -35,15 +35,39 @@
padding: 20px; padding: 20px;
} }
iframe { iframe {
width: 960px; width: 960px; /* 800px + 20% */
height: 660px; height: 660px; /* 550px + 20% */
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 {
text-align: center; width: 960px;
margin-bottom: 20px; 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);
}
.legend h3 {
margin-top: 0;
}
.legend ul {
list-style: none;
padding-left: 0;
}
.legend li {
margin-bottom: 5px;
}
.legend .color-box {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 10px;
}
.color-green {
background-color: #00ff00; /* Adjust the color to match your map */
} }
.buttons { .buttons {
text-align: center; text-align: center;
@ -88,16 +112,19 @@
<div class="header"> <div class="header">
<h1>CSMS Claims and Neighbors</h1> <h1>CSMS Claims and Neighbors</h1>
</div> </div>
<div class="legend">
<p><strong>Legend:</strong> CSMS claims are in green.</p>
</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>
<div class="legend">
<h3>Legend</h3>
<ul>
<li><span class="color-box color-green"></span>CSMS Claims</li>
</ul>
</div>
</div> </div>
<div class="buttons"> <div class="buttons">
<button onclick="window.open('https://rebrand.ly/csmsgoogle', '_blank')">View on Google Maps</button> <a href="https://rebrand.ly/csmsgoogle" target="_blank" class="button">View on Google Maps</a>
<button onclick="window.open('https://rebrand.ly/csmsgaia', '_blank')">View on Gaia GPS</button> <a href="https://rebrand.ly/csmsgaia" target="_blank" class="button">View on Gaia GPS</a>
</div> </div>
<div class="footer"> <div class="footer">
<p>&copy; 2024 Daniel LaForce. All rights reserved.</p> <p>&copy; 2024 Daniel LaForce. All rights reserved.</p>