From d1e92619285c658dd788ed1108180b2ed3d9342d Mon Sep 17 00:00:00 2001 From: "google-labs-jules[bot]" <161369871+google-labs-jules[bot]@users.noreply.github.com> Date: Tue, 12 Aug 2025 19:02:53 +0000 Subject: [PATCH] feat: Create Water Management Districts webpage This commit introduces a new webpage for Harris Civil Engineers, LLC that provides information about the Florida Water Management Districts. The webpage features: - A dropdown menu to select one of the five Florida Water Management Districts. - Dynamic display of information for the selected district, including a code summary, highlights, and useful links. - A section to ask questions, which links to the district's contact page or email. The implementation includes: - `index.html`: The main HTML structure of the page. - `style.css`: Basic styling for the webpage. - `script.js`: JavaScript to handle the dynamic content and user interaction. The script is populated with data gathered from each district's official website. The functionality was verified using Playwright to ensure the dropdown and information display work as expected. --- index.html | 33 +++++++++++++++ script.js | 120 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 57 +++++++++++++++++++++++++ 3 files changed, 210 insertions(+) create mode 100644 index.html create mode 100644 script.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..59af067 --- /dev/null +++ b/index.html @@ -0,0 +1,33 @@ + + + + + + Harris Civil Engineers, LLC - Water Management Districts + + + +
+

Harris Civil Engineers, LLC - Water Management Districts

+
+
+
+

Select a Water Management District

+ +
+
+
+ +
+
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..32aed17 --- /dev/null +++ b/script.js @@ -0,0 +1,120 @@ +document.addEventListener('DOMContentLoaded', () => { + const districtDropdown = document.getElementById('district-dropdown'); + const infoContainer = document.getElementById('info-container'); + + const districtData = { + nwfwmd: { + name: 'Northwest Florida Water Management District', + summary: 'The Northwest Florida Water Management District is one of five water management districts in Florida. It is responsible for managing the water resources of the Florida panhandle, covering 16 counties and serving approximately 1.5 million residents. The district\'s core missions are to ensure a sustainable water supply, protect and improve water quality, provide flood protection, and protect and restore natural systems.', + highlights: [ + 'Water Supply Planning', + 'Environmental Resource Permitting', + 'Flood Protection and Floodplain Management', + 'Springs Protection and Restoration', + 'Land Acquisition and Management for Water Resource Protection' + ], + links: { + 'Website': 'http://www.nwfwater.com/', + 'Rules and References': 'https://nwfwater.com/permits/rules-and-references/', + 'Permits': 'https://nwfwater.com/permits/', + 'Reports & Plans': 'https://nwfwater.com/data-publications/reports-plans/', + 'Ask a Question': 'mailto:public.information@nwfwater.com' + } + }, + srwmd: { + name: 'Suwannee River Water Management District', + summary: 'The Suwannee River Water Management District manages water and related natural resources in north-central Florida by providing water quality and quantity monitoring, research, regulation, land acquisition and management, and flood protection.', + highlights: [ + 'Water Quality and Quantity Monitoring', + 'Research and Data Collection', + 'Permitting and Regulation', + 'Land Acquisition and Management', + 'Flood Protection and Floodplain Management' + ], + links: { + 'Website': 'http://www.mysuwanneeriver.com/', + 'Permits & Rules': 'https://www.mysuwanneeriver.com/8/Permits-Rules', + 'Recreation': 'https://www.mysuwanneeriver.com/62/Recreational-Opportunities', + 'Water Data Portal': 'https://www.mysuwanneeriver.com/507/Water-Data-Portal', + 'Ask a Question': 'https://www.mysuwanneeriver.com/FormCenter/District-7/Contact-Us-45' + } + }, + sjrwmd: { + name: 'St. Johns River Water Management District', + summary: 'The St. Johns River Water Management District’s work is grouped into four core missions: ensuring a long-term supply of drinking water for the region’s residents and businesses; protecting and improving the health of aquatic systems; preserving and restoring natural systems, such as wetlands, marshes and floodplains; and protecting people and property from floods.', + highlights: [ + 'Water Supply', + 'Water Quality', + 'Natural Systems', + 'Flood Protection' + ], + links: { + 'Website': 'http://www.sjrwmd.com/', + 'Permitting': 'https://www.sjrwmd.com/permitting/', + 'Data and Tools': 'https://www.sjrwmd.com/data/', + 'Recreation': 'https://www.sjrwmd.com/lands/recreation/list/', + 'Contact Us': 'https://www.sjrwmd.com/contact/' + } + }, + swfwmd: { + name: 'Southwest Florida Water Management District', + summary: 'The Southwest Florida Water Management District is a regional agency responsible for managing water resources in west-central Florida. The District’s mission is to protect water resources, minimize flood risks and ensure the public’s water needs are met.', + highlights: [ + 'Water Conservation', + 'Water Restrictions', + 'Florida-Friendly Landscaping™', + 'Recreation on District Lands', + 'Minimum Flows and Levels (MFLs)' + ], + links: { + 'Website': 'https://www.swfwmd.state.fl.us/', + 'ePermitting': 'https://www.swfwmd.state.fl.us/business/epermitting', + 'Data & Maps': 'https://www.swfwmd.state.fl.us/resources/data-maps', + 'Recreation': 'https://www.swfwmd.state.fl.us/recreation', + 'Contact Us': 'https://www.swfwmd.state.fl.us/about/about-the-district/contact-us' + } + }, + sfwmd: { + name: 'South Florida Water Management District', + summary: 'The South Florida Water Management District is the oldest and largest of the state\'s five water management districts, managing water resources in a 16-county region that stretches from Orlando to the Florida Keys, serving a population of 9 million people.', + highlights: [ + 'Flood Control', + 'Water Supply Planning', + 'Water Quality Improvement', + 'Ecosystem Restoration', + 'Python Elimination Program' + ], + links: { + 'Website': 'https://www.sfwmd.gov/', + 'Permits': 'https://www.sfwmd.gov/doing-business-with-us/permits', + 'Real-Time Data': 'https://www.sfwmd.gov/science-data/levels', + 'Recreation': 'https://www.sfwmd.gov/community-residents/recreation', + 'Contact Us': 'https://www.sfwmd.gov/contact' + } + } + }; + + districtDropdown.addEventListener('change', (event) => { + const selectedDistrict = event.target.value; + if (selectedDistrict) { + const data = districtData[selectedDistrict]; + infoContainer.innerHTML = ` +

${data.name}

+

Code Summary

+

${data.summary}

+

Highlights

+ +

Links

+ +

Ask a Question

+

Have a question about the rules? Ask here.

+ `; + } else { + infoContainer.innerHTML = ''; + } + }); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..f78081c --- /dev/null +++ b/style.css @@ -0,0 +1,57 @@ +body { + font-family: Arial, sans-serif; + margin: 0; + padding: 0; + background-color: #f4f4f4; +} + +header { + background-color: #333; + color: #fff; + padding: 1rem 0; + text-align: center; +} + +main { + padding: 1rem; + max-width: 800px; + margin: 0 auto; +} + +#district-selection { + margin-bottom: 1rem; +} + +#district-dropdown { + width: 100%; + padding: 0.5rem; + font-size: 1rem; +} + +#info-container { + background-color: #fff; + padding: 1rem; + border: 1px solid #ddd; +} + +#info-container h2 { + margin-top: 0; +} + +#info-container ul { + list-style-type: none; + padding: 0; +} + +#info-container ul li { + margin-bottom: 0.5rem; +} + +#info-container a { + color: #333; + text-decoration: none; +} + +#info-container a:hover { + text-decoration: underline; +}