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

Updated index.html with improved legend placement, background color, and iframe reload script

This commit is contained in:
Daniel LaForce 2024-08-07 17:22:09 -06:00
parent ac23c3022a
commit 3f1e672e4b
1 changed files with 39 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
index.html
View File

@ -10,7 +10,7 @@
font-family: 'Roboto', sans-serif; font-family: 'Roboto', sans-serif;
margin: 0; margin: 0;
padding: 0; padding: 0;
background-color: #eaeaea; /* Softer background color */ background-color: #f5f5f5;
color: #333; color: #333;
} }
.header { .header {
@ -23,19 +23,33 @@
top: 0; top: 0;
z-index: 1000; z-index: 1000;
} }
.map-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
padding: 20px;
position: relative;
}
iframe {
width: 960px;
height: 660px;
border: none;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.legend { .legend {
position: absolute; position: absolute;
top: 10px; top: 20px;
right: 10px; right: 20px;
background-color: #fff; background-color: white;
padding: 10px; padding: 10px;
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);
width: 200px;
} }
.legend h3 { .legend h3 {
margin-top: 0; margin: 0 0 10px;
font-size: 18px;
} }
.legend ul { .legend ul {
list-style: none; list-style: none;
@ -44,34 +58,16 @@
} }
.legend li { .legend li {
margin-bottom: 5px; margin-bottom: 5px;
display: flex;
align-items: center;
} }
.legend .color-box { .legend .color-box {
width: 20px; width: 20px;
height: 20px; height: 20px;
display: inline-block; display: inline-block;
margin-right: 10px; margin-right: 10px;
border: 1px solid #ccc;
} }
.color-green { .color-green {
background-color: #00ff00; background-color: #00ff00;
} }
.map-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
flex: 1;
padding: 20px;
}
iframe {
width: 960px;
height: 660px;
border: none;
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.buttons { .buttons {
text-align: center; text-align: center;
margin: 20px 0; margin: 20px 0;
@ -111,20 +107,35 @@
gtag('js', new Date()); gtag('js', new Date());
gtag('config', 'G-CC1B9CQ691'); gtag('config', 'G-CC1B9CQ691');
</script> </script>
<script>
function reloadIframe(iframeId, src) {
var iframe = document.getElementById(iframeId);
iframe.src = src;
}
window.onload = function() {
var gaiaIframe = document.getElementById('gaiaIframe');
setTimeout(function() {
if (gaiaIframe.contentWindow.location.href === 'about:blank') {
reloadIframe('gaiaIframe', 'https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True');
}
}, 3000); // 3 seconds delay
};
</script>
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<h1>CSMS Claims and Neighbors</h1> <h1>CSMS Claims and Neighbors</h1>
</div>
<div class="map-container">
<div class="legend"> <div class="legend">
<h3>Legend</h3> <h3>Legend</h3>
<ul> <ul>
<li><span class="color-box color-green"></span>CSMS Claims</li> <li><span class="color-box color-green"></span>CSMS Claims</li>
</ul> </ul>
</div> </div>
</div>
<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 id="gaiaMap" src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True" onload="onLoadHandler()"></iframe> <iframe id="gaiaIframe" src="https://www.gaiagps.com/public/VVXcZPvEfvAbvRWi5F0DQPNT/?embed=True"></iframe>
</div> </div>
<div class="buttons"> <div class="buttons">
<a href="https://rebrand.ly/csmsgoogle" target="_blank" class="button">View on Google Maps</a> <a href="https://rebrand.ly/csmsgoogle" target="_blank" class="button">View on Google Maps</a>