-
Notifications
You must be signed in to change notification settings - Fork 0
/
catalog_landing_page.html
274 lines (242 loc) · 14.5 KB
/
catalog_landing_page.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!DOCTYPE html>
<html lang="en">
<head>
{{org_config.google_analytics_text}}
<title>FIT Homepage</title>
<link rel="icon" type="image/png" href="https://raw.githubusercontent.com/noaa-fisheries-integrated-toolbox/FIT_graphics/main/FIT_logo/logo_pngs/FIT_favicon_2022_color.png">
<link type="text/css" rel="stylesheet" href="./static/main.css" />
</head>
<body>
<main role="main" class="container">
<div class="mywrap_head">
<img src="https://raw.githubusercontent.com/noaa-fisheries-integrated-toolbox/FIT_graphics/main/FIT_logo/logo_pngs/FIT_logo_2022_color_no_text.png" alt="NOAA Fisheries Integrated Toolbox Logo" height="75">
<h1 class ="header_title">NOAA Fisheries Integrated Toolbox</h1>
</div>
<div class ="mywrap_head">
<button class="dropbtn" onclick="location.href='/';" value="FIT homepage" >FIT Homepage</button>
<div class="dropdown">
<button class="dropbtn" value="Resources" >Resources</button>
<div class="dropdown-content">
<button class="menudropbtn" onclick="location.href='/resources';" value="Resources Home" >Resources Home</button>
<button class="menudropbtn" onclick="location.href='/resources/categories';" value="Browse by category" >Browse By Category</button>
<button class="menudropbtn" onclick="location.href='/resources/tags';" value="Browse by tag" >Browse By Tag</button>
</div>
</div>
<button class="dropbtn" onclick="location.href='/resources/about';" value="About" >About</button>
<button class="dropbtn" onclick="location.href='/resources/noaa%20fit/contact';" value="Contact" >Contact</button>
</div>
<div class = "divider"></div>
<div class="mywrap">
<h2>Welcome to the FIT!</h2>
</div>
<div class="mywrap">
<ul>
<li>Browse publicly accessible software tools for NOAA Fisheries scientific work using the search bar below.</li>
<li>Interested in using compiled FIT R packages? Check out the <a href="https://noaa-fisheries-integrated-toolbox.r-universe.dev/packages">FIT R Universe</a>.</li>
</ul>
</div>
<div class="mywrap">
<input class = "boxInput" type="text" id="myInput" onkeyup="simpleSearch()" placeholder="Search for tools" title="Type in a name">
<input type="button" class="dropbtn" value="See all tools" onclick="resetSearch()">
<div class="dropdown">
<button class="dropbtn">Filter tools by drawer</button>
<div class="dropdown-content">
<input type="button" value="Ecosystem" onclick="drawerSearch('Ecosystem')">
<input type="button" value="Fish and Fisheries" onclick="drawerSearch('Fish and Fisheries')">
<input type="button" value="Human Dimensions" onclick="drawerSearch('Human Dimensions')">
<input type="button" value="Protected Species" onclick="drawerSearch('Protected Species')">
<input type="button" value="General Modeling Tools" onclick="drawerSearch('General Modeling Tools')">
<input type="button" value="Utility Tools" onclick="drawerSearch('Utility Tools')">
</div>
</div>
<!-- // Filter by keywords
// To update this, run parsejson.R get_html_snippet()
// And copy/paste over the output below div class= "tab-content" -->
<div class="dropdown">
<button class="dropbtn">Filter tools by keyword</button>
<div class="dropdown-content">
<input type="button" value="ADMB" onclick="simpleSearch(this.value)">
<input type="button" value="Age Structured Model" onclick="simpleSearch(this.value)">
<input type="button" value="API Client" onclick="simpleSearch(this.value)">
<input type="button" value="Bayesian Modeling" onclick="simpleSearch(this.value)">
<input type="button" value="Bycatch" onclick="simpleSearch(this.value)">
<input type="button" value="C++" onclick="simpleSearch(this.value)">
<input type="button" value="Calculator" onclick="simpleSearch(this.value)">
<input type="button" value="Data Exploration" onclick="simpleSearch(this.value)">
<input type="button" value="Data Limited Method" onclick="simpleSearch(this.value)">
<input type="button" value="Data Visualization" onclick="simpleSearch(this.value)">
<input type="button" value="Decision Support Tool" onclick="simpleSearch(this.value)">
<input type="button" value="Developer Utilities" onclick="simpleSearch(this.value)">
<input type="button" value="Economics" onclick="simpleSearch(this.value)">
<input type="button" value="Ecosystem" onclick="simpleSearch(this.value)">
<input type="button" value="Ensemble Modeling" onclick="simpleSearch(this.value)">
<input type="button" value="Fish Biology" onclick="simpleSearch(this.value)">
<input type="button" value="Fisheries" onclick="simpleSearch(this.value)">
<input type="button" value="Gradient Solver" onclick="simpleSearch(this.value)">
<input type="button" value="Guided User Interface" onclick="simpleSearch(this.value)">
<input type="button" value="Individual Based Model" onclick="simpleSearch(this.value)">
<!-- <input type="button" value="Legacy Tool" onclick="simpleSearch(this.value)"> -->
<input type="button" value="Length Structured Model" onclick="simpleSearch(this.value)">
<input type="button" value="Management Strategy Evaluation" onclick="simpleSearch(this.value)">
<input type="button" value="Marine Mammals" onclick="simpleSearch(this.value)">
<input type="button" value="Maximum Likelihood Estimation" onclick="simpleSearch(this.value)">
<input type="button" value="Model Builder" onclick="simpleSearch(this.value)">
<input type="button" value="Model Comparision" onclick="simpleSearch(this.value)">
<input type="button" value="Multispecies Model" onclick="simpleSearch(this.value)">
<input type="button" value="Natural Mortality Model" onclick="simpleSearch(this.value)">
<input type="button" value="NOAA Branding" onclick="simpleSearch(this.value)">
<input type="button" value="North Pacific" onclick="simpleSearch(this.value)">
<input type="button" value="Output Visualization" onclick="simpleSearch(this.value)">
<input type="button" value="Projection Modeling" onclick="simpleSearch(this.value)">
<input type="button" value="Python Package" onclick="simpleSearch(this.value)">
<input type="button" value="R Package" onclick="simpleSearch(this.value)">
<input type="button" value="Reference Points Model" onclick="simpleSearch(this.value)">
<input type="button" value="Risk Assessment Tool" onclick="simpleSearch(this.value)">
<input type="button" value="Salmon" onclick="simpleSearch(this.value)">
<input type="button" value="Sampling Decision Tool" onclick="simpleSearch(this.value)">
<input type="button" value="Shiny" onclick="simpleSearch(this.value)">
<input type="button" value="Simulation" onclick="simpleSearch(this.value)">
<input type="button" value="Size Spectra Model" onclick="simpleSearch(this.value)">
<input type="button" value="Size Structured Model" onclick="simpleSearch(this.value)">
<input type="button" value="Socioeconomics" onclick="simpleSearch(this.value)">
<input type="button" value="Spatial Model" onclick="simpleSearch(this.value)">
<input type="button" value="Species Distribution Model" onclick="simpleSearch(this.value)">
<input type="button" value="Standardized Reporting" onclick="simpleSearch(this.value)">
<input type="button" value="Stock Assessment Model" onclick="simpleSearch(this.value)">
<input type="button" value="Stock Assessment Projections" onclick="simpleSearch(this.value)">
<input type="button" value="Stock Assessment Tool" onclick="simpleSearch(this.value)">
<input type="button" value="Surplus Production Model" onclick="simpleSearch(this.value)">
<input type="button" value="Tag Data Model" onclick="simpleSearch(this.value)">
<input type="button" value="Teaching Tool" onclick="simpleSearch(this.value)">
<input type="button" value="Time Series" onclick="simpleSearch(this.value)">
<input type="button" value="TMB" onclick="simpleSearch(this.value)">
<input type="button" value="User Utilities" onclick="simpleSearch(this.value)">
<input type="button" value="Virtual Population Analysis" onclick="simpleSearch(this.value)">
<input type="button" value="Visualization" onclick="simpleSearch(this.value)">
<input type="button" value="Web App" onclick="simpleSearch(this.value)">
<input type="button" value="West Coast" onclick="simpleSearch(this.value)">
</div>
</div>
</div>
<div class ="boxcontainer">
{% for key, value in configs.items() %}
<div class = "box">
{% set my_string = value['tool_abbreviation'] %}
<a class = "shortTitle" href= {{my_string}}> {{value['tool_abbreviation']}} </a>
<div class = "longTitle">{{value['tool_name']}}</div>
<div class = "toolbox_drawers">
<h3>Toolbox drawer(s):</h3>
<ul>
{% for kwd in value['toolbox_drawers']%}
<li>{{kwd}}</li>
{% endfor %}
</ul>
</div>
<div class = "keywords">
<h3>Keywords:</h3>
{% if value['keywords'] is defined and value['keywords']|length %}
<ul>
{% for kwd in value['keywords']%}
<li>{{kwd}}</li>
{% endfor %}
</ul>
{% endif %}
</div>
<!-- <div class = "modelType">{{value['tool_type']}}</div>
<div class = "modelType">{{value['model_type']}}</div> -->
<div class = "language"></div>
</div>
{% endfor %}
</div>
</div>
</div>
<div class = "divider"></div>
<a class = "mylink" href = "https://noaa-fisheries-integrated-toolbox.github.io/site-index">Site Index</a>
<div class = "divider"></div>
<footer >
<img src="https://raw.githubusercontent.com/noaa-fisheries-integrated-toolbox/FIT_graphics/main/NOAA_logos/noaa-fisheries-rgb-2line-horizontal-small.png" alt="NOAA Fisheries Logo" height="75" >
<div class="mywrap_center">
<a class ="mylink line" href="https://www.commerce.gov/">U.S. Department of Commerce</a>
<a class ="mylink line" href="https://www.noaa.gov">National Oceanographic and Atmospheric Administration</a>
<a class ="mylink" href="https://www.fisheries.noaa.gov/">NOAA Fisheries</a>
</div>
</footer>
<!-- <div class ="attribution">Icons by icons8 https://icons8.com/</div> -->
</main>
<script>
var sidenav = document.getElementsByClassName("sidenav");
var menu = document.getElementById("menu");
var menulabel = document.getElementsByClassName("menulabel");
// sidenav[0].style.display="none";
function simpleSearch(val) {
var input, filter, ul, box, box_each, box_each_abbrev, box_each_keywords, box_each_drawer, i, txtValue;
if(val === undefined){
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
}
else {
filter = val.toUpperCase();
}
box = document.getElementsByClassName("box");
for (i = 0; i < box.length; i++) {
box_each = box[i].getElementsByClassName("longTitle")[0];
box_each_abbrev = box[i].getElementsByClassName("shortTitle")[0];
box_each_keywords = box[i].getElementsByClassName("keywords")[0];
box_each_drawer = box[i].getElementsByClassName("toolbox_drawers")[0];
//console.log(box_each_keywords); // For Debugging
txtValue = box_each.textContent + " " + box_each_abbrev.innerText + " " + box_each_keywords.innerText + " " + box_each_drawer.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
box[i].style.display = "";
} else {
box[i].style.display = "none";
}
}
}
function drawerSearch(val) {
var input, filter, ul, box, box_each, i, txtValue;
if(val === undefined){
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
}
else {
filter = val.toUpperCase();
}
box = document.getElementsByClassName("box");
for (i = 0; i < box.length; i++) {
box_each = box[i].getElementsByClassName("toolbox_drawers")[0];
txtValue = box_each.textContent;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
box[i].style.display = "";
} else {
box[i].style.display = "none";
}
}
}
function resetSearch() {
var box, i;
box = document.getElementsByClassName("box");
for (i = 0; i < box.length; i++) {
box[i].style.display = "";
}
}
function menuClick(x) {
// x.classList.toggle("change");
menulabel[0].classList.toggle("change");
sidenav[0].classList.toggle("open");
menu.classList.toggle("is_active");
let y =x.getAttribute("aria-expanded");
let t;
if (y == "true"){
y = "false"
t="-1";
}
else {
y = "true";
t="0";
}
x.setAttribute("aria-expanded", x);
}
// boxcontainer
</script>
</body>
</html>