9 files changed, 141 insertions, 58 deletions
diff --git a/bh20simplewebuploader/templates/about.html b/bh20simplewebuploader/templates/about.html
new file mode 100644
index 0000000..47b68fa
--- /dev/null
+++ b/bh20simplewebuploader/templates/about.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  {% include 'header.html' %}
+    <body>
+      {% include 'banner.html' %}
+      {% include 'menu.html' %}
+
+      WIP
+
+      <script type="text/javascript">
+        let scriptRoot = {{ request.script_root|tojson|safe }}; // examples
+
+        document.addEventListener("DOMContentLoaded", function(){
+            var count = fetch("/api/getCount")
+                .then((resp) => resp.json())
+                .then(function (data) {
+                    count = data["sequences"];
+              console.log(count);
+                    span = document.getElementById("Counter");
+                    txt = document.createTextNode(count);
+                    span.appendChild(txt);
+                });
+        });
+
+      </script>
+    </body>
+
+</html>
diff --git a/bh20simplewebuploader/templates/banner.html b/bh20simplewebuploader/templates/banner.html
new file mode 100644
index 0000000..3e2ee9d
--- /dev/null
+++ b/bh20simplewebuploader/templates/banner.html
@@ -0,0 +1,7 @@
+      <section class="header">
+      <div class="logo"><a href="http://covid-19.genenetwork.org/"><img src="static/image/coronasmallcomp.gif" width="150" title="COVID-19 image by Tyler Morgan-Wall"></a></div>
+      <h1>Web uploader for Public SARS-CoV-2 Sequence Resource</h1>
+
+      <p>Database contains <span id="Counter"></span> public sequences!</p>
+
+      </section>
diff --git a/bh20simplewebuploader/templates/blog.html b/bh20simplewebuploader/templates/blog.html
new file mode 100644
index 0000000..47b68fa
--- /dev/null
+++ b/bh20simplewebuploader/templates/blog.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  {% include 'header.html' %}
+    <body>
+      {% include 'banner.html' %}
+      {% include 'menu.html' %}
+
+      WIP
+
+      <script type="text/javascript">
+        let scriptRoot = {{ request.script_root|tojson|safe }}; // examples
+
+        document.addEventListener("DOMContentLoaded", function(){
+            var count = fetch("/api/getCount")
+                .then((resp) => resp.json())
+                .then(function (data) {
+                    count = data["sequences"];
+              console.log(count);
+                    span = document.getElementById("Counter");
+                    txt = document.createTextNode(count);
+                    span.appendChild(txt);
+                });
+        });
+
+      </script>
+    </body>
+
+</html>
diff --git a/bh20simplewebuploader/templates/demo-run.html b/bh20simplewebuploader/templates/demo-run.html
new file mode 100644
index 0000000..7f29185
--- /dev/null
+++ b/bh20simplewebuploader/templates/demo-run.html
@@ -0,0 +1,17 @@
+      <section class="search-section">
+          <div class="filter-options" action="#">
+              <p>[Demo] Display content sequences by: </p>
+
+              <div>
+                  <button class="button" onclick="fetchSEQBySpecimen()">Specimen source</button>
+                  <button class="button" onclick="fetchSEQByLocation()">Location</button>
+                  <button class="button" onclick="fetchSEQByTech()">Sequencer</button>
+                  <button class="button" onclick="fetchAllaccessions()">All accessions</button>
+              </div>
+
+          </div>
+      <div id="loader" class="loader invisible"></div>
+
+      <section id="results" class="invisible">
+          <pre><code id="json"></code></pre>
+      </section>
diff --git a/bh20simplewebuploader/templates/demo.html b/bh20simplewebuploader/templates/demo.html
new file mode 100644
index 0000000..2137f59
--- /dev/null
+++ b/bh20simplewebuploader/templates/demo.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  {% include 'header.html' %}
+    <body>
+      {% include 'banner.html' %}
+      {% include 'menu.html' %}
+      <!-- {% include 'search.html' %} -->
+      {% include 'demo-run.html' %}
+
+      <script type="text/javascript">
+        let scriptRoot = {{ request.script_root|tojson|safe }}; // examples
+
+        document.addEventListener("DOMContentLoaded", function(){
+            var count = fetch("/api/getCount")
+                .then((resp) => resp.json())
+                .then(function (data) {
+                    count = data["sequences"];
+              console.log(count);
+                    span = document.getElementById("Counter");
+                    txt = document.createTextNode(count);
+                    span.appendChild(txt);
+                });
+        });
+
+      </script>
+    </body>
+
+</html>
diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html
index 819d9c3..2c0b5e7 100644
--- a/bh20simplewebuploader/templates/form.html
+++ b/bh20simplewebuploader/templates/form.html
@@ -1,62 +1,9 @@
 <!DOCTYPE html>
 <html>
-    <head>
-        <meta charset="UTF-8">
-        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
-        <link href="/static/main.css" rel="stylesheet" type="text/css">
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <title>Web uploader for Public SARS-CoV-2 Sequence Resource</title>
-        <script type="text/javascript" src="/static/main.js"></script>
-    </head>
+  {% include 'header.html' %}
     <body>
-      <section class="header">
-      <div class="logo"><a href="http://covid-19.genenetwork.org/"><img src="static/image/coronasmallcomp.gif" width="150" title="COVID-19 image by Tyler Morgan-Wall"></a></div>
-      <h1>Web uploader for Public SARS-CoV-2 Sequence Resource</h1>
-
-      <p>Database contains <span id="Counter"></span> public sequences!</p>
-
-      </section>
-
-      <section class="menu">
-        <div class="topnav" id="myTopnav">
-          <a href="/" class="active">COVID-19</a>
-          <a href="/demo">DEMO</a>
-          <a href="/blog">BLOG</a>
-          <a href="/about">ABOUT</a>
-          <a href="javascript:void(0);" class="icon" onclick="myFunction()">
-            <i class="fa fa-bars"></i>
-          </a>
-        </div>
-      </section>
-
-      <section class="search-section">
-          <div class="filter-options" action="#">
-              <p>[Demo] Display content sequences by: </p>
-
-              <div>
-                  <button class="button" onclick="fetchSEQBySpecimen()">Specimen source</button>
-                  <button class="button" onclick="fetchSEQByLocation()">Location</button>
-                  <button class="button" onclick="fetchSEQByTech()">Sequencer</button>
-                  <button class="button" onclick="fetchAllaccessions()">All accessions</button>
-              </div>
-
-          </div>
-
-          <div class="search">
-              <input id="search-input" id="global-search" type="search" placeholder="FASTA uri" required>
-              <button class="button search-button" type="submit" onclick="search()">
-                  <span class="icon ion-search">
-                      <span class="sr-only">Search</span>
-                  </span>
-              </button>
-          </div>
-      </section>
-
-      <div id="loader" class="loader invisible"></div>
-
-      <section id="results" class="invisible">
-          <pre><code id="json"></code></pre>
-      </section>
+      {% include 'banner.html' %}
+      {% include 'menu.html' %}
 
         <section>
             <form action="/submit" method="POST" enctype="multipart/form-data" id="main_form" class="grid-container">
@@ -215,7 +162,7 @@
       <div class="sponsorimg">
         <a href="https://uthsc.edu/"><img src="static/image/UTHSC-primary-stacked-logo-4c.png"></a>
       </div>
-  </div>
+    </div>
 </div>
 <div class="footer">
     <!-- Sponsors -->
@@ -230,7 +177,7 @@
 </div>
 
 <script type="text/javascript">
-  let scriptRoot = {{ request.script_root|tojson|safe }};
+  // let scriptRoot = {{ request.script_root|tojson|safe }};
   let uploadForm = document.getElementById('metadata_upload_form')
   let uploadFormSpot = document.getElementById('metadata_upload_form_spot')
   let fillForm = document.getElementById('metadata_fill_form')
diff --git a/bh20simplewebuploader/templates/header.html b/bh20simplewebuploader/templates/header.html
new file mode 100644
index 0000000..0c06f62
--- /dev/null
+++ b/bh20simplewebuploader/templates/header.html
@@ -0,0 +1,8 @@
+    <head>
+        <meta charset="UTF-8">
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">
+        <link href="/static/main.css" rel="stylesheet" type="text/css">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Web uploader for Public SARS-CoV-2 Sequence Resource</title>
+        <script type="text/javascript" src="/static/main.js"></script>
+    </head>
diff --git a/bh20simplewebuploader/templates/menu.html b/bh20simplewebuploader/templates/menu.html
new file mode 100644
index 0000000..55bb1c4
--- /dev/null
+++ b/bh20simplewebuploader/templates/menu.html
@@ -0,0 +1,11 @@
+<section class="menu">
+  <div class="topnav" id="myTopnav">
+    <a href="/" class="{{ 'active' if menu=='HOME' }}">COVID-19</a>
+    <a href="/demo" class="{{ 'active' if menu=='DEMO' }}">DEMO</a>
+    <a href="/blog" class="{{ 'active' if menu=='BLOG' }}">BLOG</a>
+    <a href="/about" class="{{ 'active' if menu=='ABOUT' }}">ABOUT</a>
+    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
+      <i class="fa fa-bars"></i>
+    </a>
+  </div>
+</section>
diff --git a/bh20simplewebuploader/templates/search.html b/bh20simplewebuploader/templates/search.html
new file mode 100644
index 0000000..6651c0f
--- /dev/null
+++ b/bh20simplewebuploader/templates/search.html
@@ -0,0 +1,9 @@
+          <div class="search">
+              <input id="search-input" id="global-search" type="search" placeholder="FASTA uri" required>
+              <button class="button search-button" type="submit" onclick="search()">
+                  <span class="icon ion-search">
+                      <span class="sr-only">Search</span>
+                  </span>
+              </button>
+          </div>
+      </section>