Backup of Code Footer - Streamline Web
//internal
<script>
document.addEventListener("DOMContentLoaded", function() {
// Select the existing footer
const oldFooter = document.getElementById("page-footer");
// Select specific parts of the old footer to move
const footerNav = oldFooter.querySelector('.footer-links');
const addressInfo = oldFooter.querySelector('.col-md-6:first-child .footer-address');
const telephoneNumber = oldFooter.querySelector('.col-md-6:first-child .footer-phone');
const copyrightSection = oldFooter.querySelector('.col-md-6:first-child .footer-copyright');
const transparencySection = oldFooter.querySelector('.col-md-6:last-child .footer-static-transparency');
const streamlineSignInSection = oldFooter.querySelector('.col-md-6:last-child .footer-streamline:not(.footer-static-transparency)');
// Create the new footer structure
const newFooter = document.createElement('footer');
newFooter.className = 'footer-clean clearfix';
newFooter.innerHTML = `
<div class="container">
<div class="row">
<!-- Footer Column 1 -->
<div class="footer-col footer-col-1 col-sm-4">
<div class="footer-logo-container">
<img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/8e4f1bc1-3ae2-432f-803b-f7d1127fae0c/Metro%20Bar%20Logo-white-lettering.png?ixlib=rb-1.1.0&or=0&w=800&h=800&fit=max&auto=format%2Ccompress&s=2afb12bc9257d246b3d086d4caa4540b" width=235 alt="Sacramento Metropolitan Fire District">
</div>
<div class="footer-col-1-address"></div>
<div class="footer-col-1-content"></div>
<div class="footer-col-1-transparency"></div>
<div class="footer-col-1-login"></div>
<!-- New Link added to Footer Column 1 -->
<div class="footer-col-1-extra-link">
<a href="metrofire.ca.gov/#/website-accessibility-policy-modal" target="_blank">Website Accessibility</a>
</div>
</div>
<!-- Footer Column 2 -->
<div class="footer-col footer-col-2 col-sm-4">
<h3>Contact Us</h3>
<div class="footer-col-2-phone"></div>
<p><a href="mailto:contactus@hrwater.org">contactus@hrwater.org</a></p>
<h4 style="font-weight: bold;">Customer Service Inquiries</h4>
<p style="font-weight: normal;">Water Billing Inquiries and Payments</p>
<p class="footer-business-hours" style="font-weight: normal;">303-791-0361</p>
<h4 style="font-weight: bold;">Service Department, Meter Inquiries:</h4>
<p class="footer-business-hours" style="font-weight: normal;">303-791-2185 x3545</p>
</div>
<!-- Footer Column 3 -->
<div class="footer-col footer-col-3 col-sm-4">
<!-- Empty Column 3 will be overwritten by Footer Menu items -->
<div class="footer-social-links">
<a href="https://www.facebook.com/MetroFireOfSacramento" class="external">
<img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/92efa549-0cce-428b-b3e0-b1f28ef6b046/2657542_media_social_facebook_icon.png?ixlib=rb-1.1.0&or=0&w=200&h=200&fit=max&auto=format%2Ccompress&s=5e518e55907d6b9ad3e7b87f20ddcf2b" alt="Facebook">
</a>
<a href="https://twitter.com/metrofirepio" class="external">
<img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/455a3a50-4530-4ca7-b70d-b91b0220e62c/2657545_media_social_twitter_website_icon.png?ixlib=rb-1.1.0&or=0&w=200&h=200&fit=max&auto=format%2Ccompress&s=fb62f9b31ffe00f2ab67b141234f7c2f" alt="Twitter">
</a>
<a href="https://www.instagram.com/metrofireofsacramento/" class="external">
<img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/ea6e7399-36f6-45b9-ba2e-45552ad6484a/2657553_media_instagram_social_icon.png?ixlib=rb-1.1.0&or=0&w=200&h=200&fit=max&auto=format%2Ccompress&s=f06050efbfcc48c7079bbf9a0c8ba0d9" alt="Instagram">
</a>
<a href="https://www.youtube.com/channel/UC3Yb3btGVX-neeHfapGOOSQ/featured" class="external">
<img src="https://streamline.imgix.net/8dd2697a-cbc0-48ff-a9ad-d69c6db53c2a/8684c84a-5eef-480c-940e-f5ec5b4c7145/2657544_media_social_website_youtube_icon.png?ixlib=rb-1.1.0&or=0&w=200&h=200&fit=max&auto=format%2Ccompress&s=7ba8ac4f41c49dbfa6a09cd708a4b770" alt="YouTube">
</a>
</div>
</div>
</div>
`;
// Append the new footer after the old footer
oldFooter.parentNode.insertBefore(newFooter, oldFooter.nextSibling);
// Move the selected parts of the old footer content to the new footer
const column1Address = newFooter.querySelector('.footer-col-1-address');
const column1Content = newFooter.querySelector('.footer-col-1-content');
const column1Transparency = newFooter.querySelector('.footer-col-1-transparency');
const column1Login = newFooter.querySelector('.footer-col-1-login');
const column2Phone = newFooter.querySelector('.footer-col-2-phone');
// Check if footerNav links are found and append the h3 header conditionally
const column3 = newFooter.querySelector('.footer-col-3');
if (footerNav && footerNav.querySelector('a')) {
const resourcesHeader = document.createElement('h3');
resourcesHeader.textContent = 'Resources';
column3.prepend(resourcesHeader);
column3.appendChild(footerNav);
}
if (addressInfo) {
// Insert line breaks after 'District' and after each comma
let addressHTML = addressInfo.innerHTML;
addressHTML = addressHTML.replace('District', 'District<br>');
addressHTML = addressHTML.replace(/,/g, '<br>');
addressInfo.innerHTML = addressHTML;
column1Address.appendChild(addressInfo);
}
if (telephoneNumber) {
column2Phone.appendChild(telephoneNumber);
}
if (copyrightSection) {
column1Content.appendChild(copyrightSection);
}
if (transparencySection) {
column1Transparency.appendChild(transparencySection);
}
if (streamlineSignInSection) {
column1Login.appendChild(streamlineSignInSection);
}
if (footerNav) {
column3.appendChild(footerNav);
}
// Remove the old footer
oldFooter.parentNode.removeChild(oldFooter);
});
</script>