From 13bcf6fcc911ffa717a86e368b190322b8065d3d Mon Sep 17 00:00:00 2001
From: BonfaceKilz
Date: Sun, 26 Apr 2020 03:43:38 +0300
Subject: Add basic structure for interacting with the API

---
 bh20simplewebuploader/static/main.css     | 26 ++++++++++++++++++++++++++
 bh20simplewebuploader/templates/form.html | 22 +++++++++++++++++++++-
 2 files changed, 47 insertions(+), 1 deletion(-)

diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
index 609ae19..94d38bf 100644
--- a/bh20simplewebuploader/static/main.css
+++ b/bh20simplewebuploader/static/main.css
@@ -57,6 +57,15 @@ form h4 {
     margin: 0 auto;
     padding: 20px;
 }
+
+.button {
+    width: 6em;
+    border-radius: 5px;
+    background: #0ED1CD;
+    margin: 0.3em auto;
+    padding: 0.4em;
+}
+
 .footer {
     background-color: white;
     margin: 0 auto;
@@ -128,6 +137,22 @@ span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
     margin-top: 10px;
 }
 
+.search-section {
+    display: flex;
+    justify-content: space-between;
+}
+
+.search-section .filter-options {
+    display: flex;
+    flex-direction: column;
+    width: max-content;
+    padding: 20px;
+}
+
+.search-section p {
+    margin: 0;
+}
+
 .submit {
     grid-area: f;
     width: 17em;
@@ -158,6 +183,7 @@ footer {
 .invisible {
     display: none;
 }
+
 @media only screen and (max-device-width: 480px) {
     .grid-container {
         display: flex;
diff --git a/bh20simplewebuploader/templates/form.html b/bh20simplewebuploader/templates/form.html
index ea3caab..e01b846 100644
--- a/bh20simplewebuploader/templates/form.html
+++ b/bh20simplewebuploader/templates/form.html
@@ -15,7 +15,27 @@
 <small>Disabled until we got everything wired up</small>
 
       </section>
-        <hr>
+
+      <section class="search-section">
+          <div class="filter-options" action="#">
+              <p>[Demo] Display content sequences by: </p>
+
+              <button class="button">Source</button>
+              <button class="button">Location</button>
+          </div>
+
+          <form 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>
+          </form>
+      </section>
+
+      <section class="results">
+      </section>
 
         <section>
             <form action="/submit" method="POST" enctype="multipart/form-data" id="main_form" class="grid-container">
-- 
cgit v1.2.3