Merge pull request #39 from BonfaceKilz/feature/display-results-of-api-consumption

Feature/display results of api consumption

1 files changed, 269 insertions, 0 deletions

diff --git a/bh20simplewebuploader/static/main.css b/bh20simplewebuploader/static/main.css
new file mode 100644
index 0000000..57e29ef
--- /dev/null
+++ b/bh20simplewebuploader/static/main.css
@@ -0,0 +1,269 @@
+hr {
+    margin: auto 0;
+}
+
+body {
+    color: #101010;
+    background-color: #F5FFFF;
+    margin: 0;
+}
+
+h1, h2, h3, h4 {
+    font-family: 'Inter', sans-serif;
+    color: #0ED1CD;
+}
+
+h1 {
+    text-align: center;
+}
+
+.intro {
+    color: #505050;
+    font-weight: 300;
+}
+
+.header {
+    background-color: white;
+    margin: 0 auto;
+    padding: 20px;
+    text-align: center;
+    height: 150px;
+}
+
+h2 > svg {
+    position: relative;
+    top: 8px;
+}
+
+.logo {
+    float: right;
+}
+
+p, form, .about, .footer {
+    font-family: 'Inter', sans-serif;
+    line-height: 1.5;
+}
+
+form h4 {
+    text-transform: 'uppercase';
+}
+
+.intro, form, .search {
+    padding: 20px;
+}
+
+.intro {
+    background-color: inherit;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.about {
+    background-color: #B2F8F8;
+    margin: 30px auto;
+    padding: 20px;
+    width: 95%;
+    border-radius: 20px;
+}
+
+.button {
+    border-radius: 5px;
+    background: #0ED1CD;
+    margin: 0.3em auto;
+    padding: 0.4em;
+}
+
+.footer {
+    background: #058280;;
+    margin: 0 auto;
+    color: #fff;
+}
+
+.footer a {
+    color: #fff;
+}
+
+span.dropt {border-bottom: thin dotted; background: #ffeedd;}
+span.dropt:hover {text-decoration: none; background: #ffffff; z-index: 6; }
+
+.grid-container {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: auto;
+    row-gap:5px;
+    grid-template-areas:
+        "a a b b"
+            "a a c c"
+            "a a d d"
+            "e e e e"
+            "f f f f";
+    grid-auto-flow: column;
+}
+
+.about {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-auto-flow: row;
+}
+
+.about h1 {
+    text-align: left;
+}
+
+.about p {
+    font-weight: 300;
+    color: #505050;
+}
+
+.intro {
+    grid-area: a;
+}
+
+.fasta-file-select {
+    padding: 1em;
+    grid-area: b;
+}
+
+a {
+    color: #40DBD8;
+    font-weight: 700;
+}
+
+.fasta-file-select label, .metadata label {
+    font-weight: 600;
+}
+
+.metadata {
+    padding: 1em;
+    grid-area: c;
+}
+.metadata_upload_form {
+    padding: 1em;
+    grid-area: c;
+}
+
+#metadata_upload_form_spot {
+    grid-area: d;
+}
+
+#metadata_fill_form_spot {
+    grid-area: e;
+}
+
+#metadata_fill_form {
+    column-count: 4;
+    margin-top: 0.5em;
+    column-width: 250px;
+}
+
+pre code {
+    background-color: #eee;
+    display: flex;
+    width: max-content;
+    margin: 0 auto;
+    overflow-y: scroll;
+    max-height: 300px;
+    padding: 10px;
+    border: solid 1px black;
+}
+
+.record {
+    display: flex;
+    flex-direction: column;
+    border: solid 1px #808080;
+    padding: 1em;
+    background: #F8F8F8;
+    margin-bottom: 1em;
+    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
+    page-break-inside: avoid; /* Firefox */
+    break-inside: avoid;
+}
+
+.record label {
+    font-size: small;
+    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;
+    justify-self: center;
+}
+
+footer {
+    display: block;
+    width: 100%;
+}
+
+.sponsors {
+    width: inherit;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    justify-content: space-evenly;
+    align-content: space-evenly;
+}
+
+.sponsors a {
+    flex-grow: 4;
+    height: 200px;
+    margin: 10px;
+    background: white;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.sponsors img {
+    width: 100%;
+}
+.metadata input#metadata_upload:checked ~ #metadata_upload_form_spot {
+    display: block;
+}
+
+.metadata input#metadata_upload ~ #metadata_upload_form_spot {
+    display: none;
+}
+
+.loader {
+    display: block;
+    border: 5px solid #f3f3f3; /* Light grey */
+    border-top: 5px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    margin-right: auto;
+    margin-left: auto;
+    animation: spin 1.5s linear infinite;
+}
+
+.invisible {
+    display: none;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+@media only screen and (max-device-width: 480px) {
+    .grid-container {
+        display: flex;
+        flex-direction: column;
+    }
+}