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

Update legend position and style, adjust background color

This commit is contained in:
Daniel LaForce 2024-08-07 17:18:37 -06:00
parent 7d668c1467
commit ac23c3022a
1 changed files with 35 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
index.html
View File

@ -10,7 +10,7 @@
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
background-color: #eaeaea; /* Softer background color */
color: #333;
}
.header {
@ -23,21 +23,39 @@
top: 0;
z-index: 1000;
}
.navbar {
.legend {
position: absolute;
top: 10px;
right: 10px;
background-color: #fff;
padding: 10px;
border: 1px solid #ccc;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
width: 200px;
}
.legend h3 {
margin-top: 0;
font-size: 18px;
}
.legend ul {
list-style: none;
padding-left: 0;
margin: 0;
}
.legend li {
margin-bottom: 5px;
display: flex;
justify-content: center;
background-color: #2c3e50;
padding: 10px 0;
align-items: center;
}
.navbar a {
color: white;
padding: 14px 20px;
text-decoration: none;
text-align: center;
.legend .color-box {
width: 20px;
height: 20px;
display: inline-block;
margin-right: 10px;
border: 1px solid #ccc;
}
.navbar a:hover {
background-color: #2980b9;
border-radius: 5px;
.color-green {
background-color: #00ff00;
}
.map-container {
width: 100%;
@ -54,34 +72,6 @@
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.legend {
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);
}
.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;
}
.buttons {
text-align: center;
margin: 20px 0;
@ -121,32 +111,10 @@
gtag('js', new Date());
gtag('config', 'G-CC1B9CQ691');
</script>
<script>
function reloadIframe() {
var iframe = document.getElementById('gaiaMap');
iframe.src = iframe.src;
}
function onLoadHandler() {
var iframe = document.getElementById('gaiaMap');
if (iframe.contentWindow.location.href === "about:blank") {
reloadIframe();
}
}
</script>
</head>
<body>
<div class="header">
<h1>CSMS Claims and Neighbors</h1>
</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">
<iframe src="https://www.google.com/maps/d/embed?mid=1CH09O8Gp7sQ6H2GdybFvRdLB-1vElVc&ehbc=2E312F"></iframe>
<iframe id="gaiaMap" src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True" onload="onLoadHandler()"></iframe>
<div class="legend">
<h3>Legend</h3>
<ul>
@ -154,6 +122,10 @@
</ul>
</div>
</div>
<div class="map-container">
<iframe src="https://www.google.com/maps/d/embed?mid=1CH09O8Gp7sQ6H2GdybFvRdLB-1vElVc&ehbc=2E312F"></iframe>
<iframe id="gaiaMap" src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True" onload="onLoadHandler()"></iframe>
</div>
<div class="buttons">
<a href="https://rebrand.ly/csmsgoogle" target="_blank" class="button">View on Google Maps</a>
<a href="https://rebrand.ly/csmsgaia" target="_blank" class="button">View on Gaia GPS</a>