Skip to content

Commit fa261d1

Browse files
yadinaclarkyadinaclark
authored
Adjust page header in index.html
Adjust page header/image wrap and add back to top button
1 parent 32ecaf7 commit fa261d1

1 file changed

Lines changed: 204 additions & 125 deletions

File tree

‎index.html‎

Lines changed: 204 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,43 @@
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1">
77
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
8-
</head>
98
<style>
10-
.header-spacing { padding-top:80px; padding-bottom:0px; min-height: 300px; display: flex; align-items: center; justify-content: center; }
11-
@media (max-width:800px) { .header-spacing { padding-top:10px; padding-bottom:50px; min-height: 250px;} }
12-
.header-logo { display:block; margin:18px auto; padding:10px; max-width:400px; height:auto; object-fit:contain; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,0.12); transition: transform 0.3s ease, box-shadow 0.3s ease; }
13-
.header-logo:hover { transform: translateY(-5px); box-shadow:0 8px 25px rgba(0,0,0,0.2); }
14-
@media (max-width:600px) { .header-logo { max-width:92%; padding:8px; } }
9+
/* Combined Page Header/Intro Container: last updated March 2026 */
10+
.header-spacing {
11+
padding-top: 100px;
12+
padding-bottom: 20px;
13+
overflow: auto; /* Ensures container expands to fit the floating logo */
14+
}
15+
16+
/* SAWGraph Logo: Floating left for text wrap */
17+
.header-logo {
18+
float: left;
19+
margin: 10px 35px 20px 0;
20+
max-width: 380px;
21+
height: auto;
22+
object-fit: contain;
23+
border-radius: 12px;
24+
box-shadow: 0 4px 15px rgba(0,0,0,0.12);
25+
transition: transform 0.3s ease, box-shadow 0.3s ease;
26+
}
27+
28+
.header-logo:hover {
29+
transform: translateY(-5px);
30+
box-shadow: 0 8px 25px rgba(0,0,0,0.2);
31+
}
32+
33+
/* Responsive: Stacks logo on top for smaller screens */
34+
@media (max-width:850px) {
35+
.header-logo {
36+
float: none;
37+
margin: 0 auto 30px auto;
38+
display: block;
39+
max-width: 90%;
40+
}
41+
.header-spacing { padding-top: 80px; }
42+
}
1543

16-
h2 { color: #1a4d7a; font-weight: 700; font-size: 2em; margin-top: 40px; }
44+
h2 { color: #1a4d7a; font-weight: 700; font-size: 2em; margin-top: 10px; }
1745
h3 { color: #2a5c91; font-weight: 600; }
1846
h4 { color: #0066cc; font-weight: 600; margin-bottom: 15px; }
1947

@@ -26,155 +54,206 @@
2654
li { margin-bottom: 12px; }
2755
a { color: #0066cc; text-decoration: none; font-weight: 500; transition: color 0.2s ease; }
2856
a:hover { color: #004499; text-decoration: underline; }
57+
58+
/* Back to Top Button Styling */
59+
#backToTop {
60+
display: none; /* Hidden until user scrolls */
61+
position: fixed;
62+
bottom: 40px;
63+
right: 40px;
64+
z-index: 99; /* Higher than content, lower than navbar dropdowns */
65+
border: none;
66+
outline: none;
67+
background-color: #1a4d7a; /* Matches your H2 color */
68+
color: white;
69+
cursor: pointer;
70+
padding: 15px;
71+
border-radius: 50%; /* Makes it a circle */
72+
font-size: 20px;
73+
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
74+
transition: background-color 0.3s, transform 0.3s;
75+
}
76+
77+
#backToTop:hover {
78+
background-color: #0066cc; /* Brighter blue on hover */
79+
transform: scale(1.1);
80+
}
81+
2982
</style>
3083
</head>
31-
</head>
3284
<body>
3385

3486
<!-- Navbar (sit on top) -->
3587
<div class="w3-top w3-padding-8">
36-
<div class="w3-bar w3-white w3-wide w3-padding w3-card">
37-
<script src="menu.js"></script>
38-
</div>
88+
<div class="w3-bar w3-white w3-wide w3-padding w3-card">
89+
<script src="menu.js"></script>
90+
</div>
3991
</div>
4092

4193
<!-- Page content -->
4294
<div class="w3-content w3-main w3-padding" style="max-width:1564px">
4395

44-
<!-- Header -->
45-
<header class="header-spacing" style="max-width:1500px;" id="home">
46-
<img class="header-logo" src="images/Sawgraph-Logo-transparent.png" alt="SAWGraph logo">
47-
</header>
48-
49-
<!-- Overview Section -->
50-
<div class="w3-container w3-padding-8" id="intro">
51-
<h2 class="w3-border-bottom w3-border-light-grey w3-padding-16">Overview</h2>
52-
<p><strong>Safe Agricultural Products and Water Graph (SAWGraph)</strong>: An <b>Open Knowledge Network </b> to Monitor and Trace PFAS and Other Contaminants in the Nation's Food and Water Systems
53-
<a href="https://www.nsf.gov/awardsearch/showAward?AWD_ID=2333782"><i>A ProtoOKN project</i></a></p>
54-
<p>The goal of SAWGraph is to connect federal and other datasets to more quickly analyze data and make decisions around per- and polyfluoroalkyl substances (PFAS) sources, testing, impacts, and risks.
55-
The graph integrates data and provides interfaces that support:
56-
<ul><li>analysis, mapping and communication of the results of testing for PFAS contamination</li>
57-
<li>spatial connections to known and potential sources</li></ul>
58-
to support PFAS research and decision making around PFAS testing and mitigation.</p>
59-
60-
<div class="w3-card-4 w3-leftbar w3-light-grey" style="max-width:1100px; padding:15px">
61-
<img src="images/overview.png" style="width:100%;max-width:1000px" class="w3-margin w3-center">
62-
<p>In contrast to the current ecosystem of disconnected datasources, SAWGraph works by integrating and aligning data into a geospatial knowledge graph that supports interfaces that can dynamically answer questions about the related datasets. </p>
96+
<div class="w3-container w3-padding-8 header-spacing" id="home">
97+
<img class="header-logo" src="images/Sawgraph-Logo-transparent.png" alt="SAWGraph logo">
98+
99+
<div id="intro">
100+
<h2 class="w3-border-bottom w3-border-light-grey w3-padding-16">Overview</h2>
101+
<p><strong>Safe Agricultural Products and Water Graph (SAWGraph)</strong>: An <b>Open Knowledge Network </b> to Monitor and Trace PFAS and Other Contaminants in the Nation's Food and Water Systems
102+
<a href="https://www.nsf.gov/awardsearch/showAward?AWD_ID=2333782"><i>A ProtoOKN project</i></a></p>
103+
<p>The goal of SAWGraph is to connect federal and other datasets to more quickly analyze data and make decisions around per- and polyfluoroalkyl substances (PFAS) sources, testing, impacts, and risks.
104+
The graph integrates data and provides interfaces that support:
105+
<ul>
106+
<li>analysis, mapping and communication of the results of testing for PFAS contamination</li>
107+
<li>spatial connections to known and potential sources</li>
108+
</ul>
109+
to support PFAS research and decision making around PFAS testing and mitigation.</p>
110+
</div>
111+
</div>
112+
113+
<div class="w3-container">
114+
<div class="w3-card-4 w3-leftbar w3-light-grey" style="max-width:1100px; padding:15px">
115+
<img src="images/overview.png" style="width:100%;max-width:1000px" class="w3-margin w3-center" alt="Overview of SAWGraph architecture">
116+
<p>In contrast to the current ecosystem of disconnected datasources, SAWGraph works by integrating and aligning data into a geospatial knowledge graph that supports interfaces that can dynamically answer questions about the related datasets. </p>
63117
</div>
64118

65119
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Intended Users</h3>
66-
<p>
120+
<p>
67121
The primary end users of SAWGraphs are personnel at state and federal agencies who monitor the environment and the safety of drinking water and agricultural land and products.
68-
End users include but are not limited to :
69-
<ul><li>personnel at EPA and state environmental protection agencies (e.g. state environmental toxicologists)</li>
122+
End users include but are not limited to:
123+
<ul>
124+
<li>personnel at EPA and state environmental protection agencies (e.g. state environmental toxicologists)</li>
70125
<li>personnel at USDA and state agricultural agencies.</li>
71-
<li>experts from FDA, USGS and similar state agencies. </li></ul>
72-
We distinguish four types of users based on their primary responsibility:
73-
<ol>
74-
<li>drinking water monitoring </li>
75-
<li>understanding the extent and sources of environmental contamination with PFAS </li>
76-
<li>PFAS researchers </li>
77-
<li>environmental justice</li>
78-
</ol>
79-
The graph is expected to empower these users to:
80-
<ol><li>formulate and implement comprehensive test plans aimed at monitoring elevated PFAS levels in drinking water or agricultural lands,</li>
81-
<li>pinpoint the most significant sources of PFAS in a state and how it impacts disadvantaged communities;</li>
82-
<li>identify populations at elevated risk and prioritize testing resources and support accordingly;</li>
83-
84-
</p>
85-
86-
</div>
126+
<li>experts from FDA, USGS and similar state agencies.</li>
127+
</ul>
128+
We distinguish four types of users based on their primary responsibility:
129+
<ol>
130+
<li>drinking water monitoring</li>
131+
<li>understanding the extent and sources of environmental contamination with PFAS</li>
132+
<li>PFAS researchers</li>
133+
<li>environmental justice</li>
134+
</ol>
135+
The graph is expected to empower these users to:
136+
<ol>
137+
<li>formulate and implement comprehensive test plans aimed at monitoring elevated PFAS levels in drinking water or agricultural lands,</li>
138+
<li>pinpoint the most significant sources of PFAS in a state and how it impacts disadvantaged communities;</li>
139+
<li>identify populations at elevated risk and prioritize testing resources and support accordingly;</li>
140+
</ol>
141+
</p>
142+
</div>
87143

88144
<!-- Use Cases Section -->
89-
<div class="w3-padding-32" id="use_cases" style="margin-top:40px;">
90-
<h2 class="w3-border-bottom w3-border-blue w3-padding-24" style="border-bottom-width:3px!important;">Use Cases</h2>
91-
92-
<div class="w3-row w3-margin-top">
93-
<div class="w3-col m6 w3-padding-24">
94-
<div class="use-case-card w3-padding-32">
95-
<h4>🔍 Understanding Testing Gaps</h4>
96-
<p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>Where have we tested and where are significant gaps?</b></p>
97-
<ul style="color:#333; font-size:0.95em;">
98-
<li>Where have we tested for what?</li>
99-
<li>What waterbodies are near potential contamination sources? <a href="tracing.html">See Example</a></li>
100-
<li>What do the available test results show in a particular region?</li>
101-
<li>Where are the biggest testing gaps based on what is known?</li>
102-
</ul>
145+
<div class="w3-padding-32" id="use_cases" style="margin-top:40px;">
146+
<h2 class="w3-border-bottom w3-border-blue w3-padding-24" style="border-bottom-width:3px!important;">Use Cases</h2>
147+
148+
<div class="w3-row w3-margin-top">
149+
<div class="w3-col m6 w3-padding-24">
150+
<div class="use-case-card w3-padding-32">
151+
<h4>🔍 Understanding Testing Gaps</h4>
152+
<p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>Where have we tested and where are significant gaps?</b></p>
153+
<ul style="color:#333; font-size:0.95em;">
154+
<li>Where have we tested for what?</li>
155+
<li>What waterbodies are near potential contamination sources? <a href="tracing.html">See Example</a></li>
156+
<li>What do the available test results show in a particular region?</li>
157+
<li>Where are the biggest testing gaps based on what is known?</li>
158+
</ul>
159+
</div>
160+
</div>
161+
162+
<div class="w3-col m6 w3-padding-24">
163+
<div class="use-case-card w3-padding-32">
164+
<h4>⚠️ Assess and Map Risks</h4>
165+
<p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>Who is impacted the most?</b></p>
166+
<ul style="color:#333; font-size:0.95em;">
167+
<li>Where are concerning test results suggesting prioritized investigation? <a href="impacts.html">See Example</a></li>
168+
<li>Which communities are at greatest risk?</li>
169+
</ul>
170+
</div>
171+
</div>
103172
</div>
104-
</div>
105-
106-
<div class="w3-col m6 w3-padding-24">
107-
<div class="use-case-card w3-padding-32">
108-
<h4>⚠️ Assess and Map Risks</h4>
109-
<p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>Who is impacted the most?</b></p>
110-
<ul style="color:#333; font-size:0.95em;">
111-
<li>Where are concerning test results suggesting prioritized investigation? <a href="impacts.html">See Example</a></li>
112-
<li>Which communities are at greatest risk?</li>
113-
</ul>
173+
174+
<div class="w3-row">
175+
<div class="w3-col m6 w3-padding-24">
176+
<div class="use-case-card w3-padding-32">
177+
<h4>🔄 Trace Contamination</h4>
178+
<p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>Where does PFAS end up? Where does it originate?</b></p>
179+
<ul style="color:#333; font-size:0.95em;">
180+
<li>How do point sources (facilities, landfills, training sites) affect surroundings?</li>
181+
<li>What potential sources are upstream from concerning test results?</li>
182+
<li>What do downstream test results show? <a href="testing.html">See Example</a></li>
183+
<li>Which wells need prioritized testing?</li>
184+
</ul>
185+
</div>
186+
</div>
187+
188+
<div class="w3-col m6 w3-padding-24">
189+
<div class="use-case-card w3-padding-32">
190+
<h4>🔬 Research Insights</h4>
191+
<p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>What linkages does the data suggest?</b></p>
192+
<ul style="color:#333; font-size:0.95em;">
193+
<li>Where are unexplained high test results?</li>
194+
<li>What agricultural practices reduce PFAS exposure?</li>
195+
<li>What connections exist between different PFAS substances?</li>
196+
</ul>
197+
</div>
198+
</div>
114199
</div>
115200
</div>
116-
</div>
117201

118-
<div class="w3-row">
119-
<div class="w3-col m6 w3-padding-24">
120-
<div class="use-case-card w3-padding-32">
121-
<h4>🔄 Trace Contamination</h4>
122-
<p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>Where does PFAS end up? Where does it originate?</b></p>
123-
<ul style="color:#333; font-size:0.95em;">
124-
<li>How do point sources (facilities, landfills, training sites) affect surroundings?</li>
125-
<li>What potential sources are upstream from concerning test results?</li>
126-
<li>What do downstream test results show? <a href="testing.html">See Example</a></li>
127-
<li>Which wells need prioritized testing?</li>
202+
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Competency questions and User queries</h3>
203+
<ul>
204+
<li><b>Testing Coverage and Gaps:</b> Where (locations/towns) should we prioritize environmental/water testing?
205+
<ul>
206+
<li>E.g. which wells are within 5 miles of landfills/airports/biosludge application sites? Which wells near locations with a reported PFOA contamination above 4ppt have not been tested?</li>
128207
</ul>
129-
</div>
130-
</div>
131-
132-
<div class="w3-col m6 w3-padding-24">
133-
<div class="use-case-card w3-padding-32">
134-
<h4>🔬 Research Insights</h4>
135-
<p style="font-size:1.05em; color:#333; margin-bottom:15px;"><b>What linkages does the data suggest?</b></p>
136-
<ul style="color:#333; font-size:0.95em;">
137-
<li>Where are unexplained high test results?</li>
138-
<li>What agricultural practices reduce PFAS exposure?</li>
139-
<li>What connections exist between different PFAS substances?</li>
208+
</li>
209+
<li><b>Assessing Contamination Impacts:</b> Where and who is impacted? (Prevalence, risk/vulnerability mapping)
210+
<ul>
211+
<li>E.g. Which towns or counties have multiple test results with PFOS levels above 20ppt with no known contamination source nearby? Which chemicals show the highest average readings in samples from a particular region? Which towns/counties are most vulnerability based on their proximity to known or potential PFAS sources?</li>
140212
</ul>
141-
</div>
142-
</div>
143-
</div>
144-
</div>
213+
</li>
214+
<li><b>Contaminant Tracing:</b> What are potential sources of contamination at a particular location or area?
215+
<ul>
216+
<li>E.g. What potential contamination sources exist 20 miles upstream from the sample result? What wells are hydrologically connected to other wells with a reported contamination of +10ppt</li>
217+
</ul>
218+
</li>
219+
</ul>
145220

146-
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Competency questions and User queries
147-
</h3>
148-
<ul>
149-
<li><b>Testing Coverage and Gaps:</b> Where (locations/towns) should we prioritize environmental/water testing?
150-
<ul><li>E.g. which wells are within 5 miles of landfills/airports/biosludge application sites? Which wells near locations with a reported PFOA contamination above 4ppt have not been tested?
151-
</li></ul></li>
152-
<li><b>Assessing Contamination Impacts:</b> Where and who is impacted? (Prevalence, risk/vulnerability mapping)
153-
<ul><li>E.g. Which towns or counties have multiple test results with PFOS levels above 20ppt with no known contamination source nearby? Which chemicals show the highest average readings in samples from a particular region? Which towns/counties are most vulnerable based on their proximity to known or potential PFAS sources?
154-
</li></ul></li>
155-
<li><b>Contaminant Tracing:</b> What are potential sources of contamination at a particular location or area?
156-
<ul><li>E.g. What potential contamination sources exist 20 miles upstream from the sample result? What wells are hydrologically connected to other wells with a reported contamination of +10ppt
157-
</li></ul></li>
158-
</ul>
159-
160-
161-
162-
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Project Overview</h3>
163-
<div class="w3-center w3-padding-32">
164-
<iframe width="560" height="315" src="https://www.youtube.com/embed/vS82LsLjZ5U?si=DePgmMknHwZyUBLP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
165-
</div>
221+
<h3 class="w3-border-bottom w3-border-light-grey w3-padding-16">Project Overview</h3>
222+
<div class="w3-center w3-padding-32">
223+
<iframe width="560" height="315" src="https://www.youtube.com/embed/vS82LsLjZ5U?si=DePgmMknHwZyUBLP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
224+
</div>
166225

167226
<!-- End page content -->
168-
</div>
169-
</div>
170-
</div>
171-
227+
</div>
172228

173-
<!-- Footer -->
229+
<!-- Page Footer -->
174230
<footer class="w3-center w3-black w3-padding-16">
175231
<p>Powered by <a href="https://www.w3schools.com/w3css/default.asp" title="W3.CSS" target="_blank" class="w3-hover-text-green">w3.css</a></p>
176232
</footer>
177233

234+
<button onclick="topFunction()" id="backToTop" title="Go to top">↑</button>
235+
236+
237+
<script>
238+
// Get the button
239+
const mybutton = document.getElementById("backToTop");
240+
241+
// When the user scrolls down 400px from the top, show the button
242+
window.onscroll = function() {scrollFunction()};
243+
244+
function scrollFunction() {
245+
if (document.body.scrollTop > 400 || document.documentElement.scrollTop > 400) {
246+
mybutton.style.display = "block";
247+
} else {
248+
mybutton.style.display = "none";
249+
}
250+
}
251+
252+
// When the user clicks, scroll to the top smoothly
253+
function topFunction() {
254+
window.scrollTo({top: 0, behavior: 'smooth'});
255+
}
256+
</script>
257+
178258
</body>
179259
</html>
180-

0 commit comments

Comments
 (0)