Skip to content

Commit

Permalink
tab stuff
Browse files Browse the repository at this point in the history
  • Loading branch information
@CherrelleTucker
CherrelleTucker authored Dec 23, 2024
1 parent 058be82 commit 1c7646a
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 173 deletions.
292 changes: 120 additions & 172 deletions _tabs/Home.md
View file
Original file line number Diff line number Diff line change
@@ -1,236 +1,184 @@
---
layout: post
title: SNWG Management Office Guide
toc: true
layout: post
date: 2024-12-23 12:00:00 +0600
categories: [Guide]
tags: [overview]
---

<div class="guide-container">
<h1 class="text-center">SNWG Management Office Guide</h1>
<p class="text-center subtitle">Your resource for navigating the SNWG project lifecycle</p>

<div class="tabs">
<input type="radio" id="tab1" name="tab-control" checked>
<input type="radio" id="tab2" name="tab-control">
<input type="radio" id="tab3" name="tab-control">
<input type="radio" id="tab4" name="tab-control">

<ul>
<li><label for="tab1">Overview</label></li>
<li><label for="tab2">Implementation</label></li>
<li><label for="tab3">Stakeholder Engagement</label></li>
<li><label for="tab4">Resources</label></li>
</ul>

<div class="content">
<section>
<!-- Overview Tab Content -->
<div class="lifecycle-image">
![dark mode only](assets/DarkModeSNWGCycleGraphic.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
![light mode only](assets/LightModeSNWGCycleGraphic.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
<p class="image-caption">The SNWG Project lifecycle.</p>
<div class="navigation-tabs">
<div class="tab-list">
<button class="tab-button active" onclick="switchTab('overview')">Overview</button>
<button class="tab-button" onclick="switchTab('implementation')">Implementation</button>
<button class="tab-button" onclick="switchTab('engagement')">Stakeholder Engagement</button>
<button class="tab-button" onclick="switchTab('resources')">Resources</button>
</div>

<div id="overview" class="tab-content active">
<div class="tab-section">
<p class="text-center lead-text">Your resource for navigating the SNWG project lifecycle</p>

![dark mode only](assets/DarkModeSNWGCycleGraphic.png){: .dark .w-75 .shadow .rounded-10 w='1212' h='668' }
![light mode only](assets/LightModeSNWGCycleGraphic.png){: .light .w-75 .shadow .rounded-10 w='1212' h='668' }
_The SNWG Project lifecycle._

## What is SNWG?

The Satellite Needs Working Group (SNWG) conducts a survey of U.S. federal agencies every two years to identify what Earth observation data they need to fulfill their mission. The SNWG is part of the U.S. Group on Earth Observations (USGEO) and includes members from various federal agencies that use Earth observation data.

Survey responses are assessed by NASA, NOAA, and USGS to identify agency needs, potential data gaps in the current NASA program of record, and relevant datasets. Solutions that meet these identified needs are formulated, and those that are estimated to significantly increase satisfaction of multiple U.S. agencies are selected by the Executive Branch for funding and implementation.

## Previous Solutions

<div class="solutions-grid">
<div class="solution-card">
<h3>Cycle 1 (2016)</h3>
<ul>
<li>ADMG - <em>CASEI</em></li>
<li>Data Curation for Discovery</li>
<li>Harmonized Landsat-Sentinel-2</li>
<li>Commercial Smallsat Data Acquisition</li>
</ul>
</div>

<div class="card">
<h2>What is SNWG?</h2>
<p>The Satellite Needs Working Group (SNWG) conducts a survey of U.S. federal agencies every two years to identify what Earth observation data they need to fulfill their mission. The SNWG is part of the U.S. Group on Earth Observations (USGEO) and includes members from various federal agencies that use Earth observation data.</p>
<p>Survey responses are assessed by NASA, NOAA, and USGS to identify agency needs, potential data gaps in the current NASA program of record, and relevant datasets. Solutions that meet these identified needs are formulated, and those that are estimated to significantly increase satisfaction of multiple U.S. agencies are selected by the Executive Branch for funding and implementation.</p>
<div class="solution-card">
<h3>Cycle 2 (2018)</h3>
<ul>
<li>Low Latency Freeboard & Ice Thickness Products</li>
<li>Internet of Animals</li>
<li>Global Surface Water Extent (DSWx)</li>
<li>Water Quality Products</li>
</ul>
</div>

<div class="solution-grid">
<div class="solution-column">
<h3>Cycle 1 (2016)</h3>
<ul>
<li>ADMG - <em>CASEI</em></li>
<li>Data Curation for Discovery</li>
<li>Harmonized Landsat-Sentinel-2</li>
<li>Commercial Smallsat Data Acquisition</li>
</ul>
</div>
<div class="solution-column">
<h3>Cycle 2 (2018)</h3>
<ul>
<li>Low Latency Freeboard & Ice Thickness Products</li>
<li>Internet of Animals</li>
<li>Global Surface Water Extent (DSWx)</li>
<li>Water Quality Products</li>
</ul>
</div>
<div class="solution-column">
<h3>Cycle 3 (2020)</h3>
<ul>
<li>Air Quality Products</li>
<li>Planetary Boundary Layer</li>
<li>HLS-Vegetation Indices</li>
<li>TEMPO NRT</li>
</ul>
</div>
<div class="solution-card">
<h3>Cycle 3 (2020)</h3>
<ul>
<li>Air Quality Products</li>
<li>Planetary Boundary Layer</li>
<li>HLS-Vegetation Indices</li>
<li>TEMPO NRT</li>
</ul>
</div>
</section>

<section>
<h2>Implementation Content</h2>
<!-- Implementation tab content -->
</section>

<section>
<h2>Stakeholder Engagement Content</h2>
<!-- Stakeholder engagement tab content -->
</section>

<section>
<h2>Resources Content</h2>
<!-- Resources tab content -->
</section>
</div>
</div>
</div>
</div>

<style>
.guide-container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
<div id="implementation" class="tab-content">
<div class="tab-section">
<h2>Implementation</h2>
<!-- Implementation content here -->
</div>
</div>

.text-center {
text-align: center;
}
<div id="engagement" class="tab-content">
<div class="tab-section">
<h2>Stakeholder Engagement</h2>
<!-- Engagement content here -->
</div>
</div>

.subtitle {
margin-bottom: 2rem;
color: var(--text-muted);
}
<div id="resources" class="tab-content">
<div class="tab-section">
<h2>Resources</h2>
<!-- Resources content here -->
</div>
</div>
</div>

.tabs {
<style>
.navigation-tabs {
margin: 2rem 0;
background: var(--card-bg);
padding: 1rem;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.tabs input[type="radio"] {
display: none;
}

.tabs ul {
list-style-type: none;
padding-left: 0;
.tab-list {
display: flex;
border-bottom: 1px solid var(--border-color);
margin-bottom: 1rem;
}

.tabs ul li {
flex: 1;
text-align: center;
border-bottom: 2px solid var(--border-color);
margin-bottom: 2rem;
}

.tabs ul li label {
display: block;
padding: 1rem;
.tab-button {
background: none;
border: none;
padding: 1rem 2rem;
cursor: pointer;
transition: all 0.3s ease;
color: var(--text-color);
font-weight: 500;
}

.tabs ul li label:hover {
.tab-button.active {
color: var(--link-color);
border-bottom: 2px solid var(--link-color);
margin-bottom: -2px;
}

.lifecycle-image {
text-align: center;
margin: 2rem 0;
.tab-content {
display: none;
}

.image-caption {
text-align: center;
color: var(--text-muted);
font-style: italic;
margin-top: 0.5rem;
.tab-content.active {
display: block;
}

.solution-grid {
.solutions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}

.solution-column {
.solution-card {
background: var(--card-bg);
padding: 1.5rem;
border-radius: 8px;
border: 1px solid var(--border-color);
}

.solution-column h3 {
.solution-card h3 {
margin-top: 0;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--border-color);
}

.solution-column ul {
.solution-card ul {
list-style: none;
padding-left: 0;
}

.solution-column li {
.solution-card li {
margin: 0.8rem 0;
padding-left: 1.2rem;
position: relative;
}

.solution-column li:before {
.solution-card li:before {
content: "•";
position: absolute;
left: 0;
color: var(--link-color);
}

.tabs .content section {
display: none;
animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}

#tab1:checked ~ .content section:nth-of-type(1),
#tab2:checked ~ .content section:nth-of-type(2),
#tab3:checked ~ .content section:nth-of-type(3),
#tab4:checked ~ .content section:nth-of-type(4) {
display: block;
}

#tab1:checked ~ ul li:nth-of-type(1) label,
#tab2:checked ~ ul li:nth-of-type(2) label,
#tab3:checked ~ ul li:nth-of-type(3) label,
#tab4:checked ~ ul li:nth-of-type(4) label {
color: var(--link-color);
border-bottom: 2px solid var(--link-color);
}

.card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}

.card h2 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--heading-color);
}

.card p {
margin-bottom: 1rem;
line-height: 1.6;
.lead-text {
font-size: 1.2rem;
margin-bottom: 2rem;
color: var(--text-muted);
}
</style>
</style>

<script>
function switchTab(tabId) {
// Hide all tab contents
document.querySelectorAll('.tab-content').forEach(content => {
content.classList.remove('active');
});

// Deactivate all tab buttons
document.querySelectorAll('.tab-button').forEach(button => {
button.classList.remove('active');
});

// Show selected tab content and activate its button
document.getElementById(tabId).classList.add('active');
document.querySelector(`[onclick="switchTab('${tabId}')"]`).classList.add('active');
}
</script>
2 changes: 1 addition & 1 deletion _tabs/What is the SNWG Management Office.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ _The SNWG Project lifecycle._

Your project exists within a larger framework:
1. Federal agencies identified specific needs through the SNWG survey
2. Experts from NASA, NOAA, and USGS assessed these needs
2. Experts from Federal Agencies assessed these needs
3. Your solution was selected to address these needs
4. Your team will develop and implement the solution
5. The solution will become an operational product
Expand Down

0 comments on commit 1c7646a

Please sign in to comment.