init gnqna ui implementation

2 files changed, 266 insertions, 0 deletions

diff --git a/wqflask/wqflask/templates/gnqa.html b/wqflask/wqflask/templates/gnqa.html
new file mode 100644
index 00000000..58ece618
--- /dev/null
+++ b/wqflask/wqflask/templates/gnqa.html
@@ -0,0 +1,117 @@
+{% extends "base.html" %}
+{% block title %}GNQNA{% endblock %}
+
+{% block content %} <!-- Start of body -->
+
+
+    <style>
+   
+
+
+   #gnqna_search {
+    padding:15px  10px;
+    border-radius: 15px;
+    border:1px solid blue;
+   }
+
+  #gnqna_search{
+    font-weight: bold;
+    font-weight: 18px;
+  }
+
+   #main-search-controller{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>
+
+
+<div style="height: 100vh;width: 100vw; ">
+<div id="main-search-controller" style="margin: 20px;width: 100%;height: 100%;">
+<div id="gnqna_controller">
+  <form method="POST" action="/gnqna" id="gnqna_form">
+  <input  id="gnqna_search" style="width:45vw" type="text" autocomplete="off" 
+required placeholder="Ask a Question or Topic ( Genes) " value='' name="querygnqa">
+
+</form>
+</div>
+
+</div>
+
+<div>
+
+</div>
+
+
+<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+<script type="text/javascript">
+
+    document.addEventListener('DOMContentLoaded', function() {
+
+       $("#gnqna_search").keyup(function(event) {
+            if (event.keyCode === 13) {
+            $('#gnqna_form').attr('action', "/gnqna").submit();
+            }
+        })
+
+
+    });
+
+
+</script>
+
+<!-- Bootstrap JS and Popper.js -->
+
+
+{% endblock %}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/wqflask/wqflask/templates/gnqa_answer.html b/wqflask/wqflask/templates/gnqa_answer.html
new file mode 100644
index 00000000..e3d010f0
--- /dev/null
+++ b/wqflask/wqflask/templates/gnqa_answer.html
@@ -0,0 +1,149 @@
+{% extends "base.html" %}
+{% block title %}GNQNA{% endblock %}
+
+{% block content %} <!-- Start of body -->
+
+
+    <style>
+   
+
+
+   #gnqna_search {
+    padding:15px  10px;
+    border-radius: 15px;
+    border:1px solid blue;
+   }
+
+  #gnqna_search{
+    font-weight: bold;
+    font-weight: 18px;
+  }
+
+   #main-search-controller{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+</style>
+
+{% block css %}
+<link rel="stylesheet" type="text/css" href="/static/new/css/markdown.css" />
+{% endblock %}
+
+
+<style type="text/css">
+  
+  #gnqa_ref {
+    height: 90vh;
+    overflow: hidden;
+    overflow-y: scroll;
+  }
+
+
+  #gnqa_ref_item{
+    border-bottom: 1px solid lightgrey;
+    padding:12px;
+  }
+
+
+  #gnqa_query {
+    font-size: 24px;
+    font-family: serif;
+    color: #3071a9;
+    font-style: italic;
+    letter-spacing: 0.3em;
+    text-transform: capitalize;
+
+    text-decoration: underline;
+  }
+
+  #gnqa_query::first-letter {
+    font-size: 30px;
+    font-style: italic;
+
+  }
+
+  #gnqa_answer {
+    text-transform: capitalize;
+  }
+
+  #gnqa_answer::first-letter{
+    font-weight: bold;
+
+
+  }
+  #gnqna_search_home{
+ display: flex;
+  justify-content: center;
+  align-items: center;
+  }
+
+ 
+   #gnqna_search_home input{
+    padding:7px  5px;
+    border-radius: 10px;
+    border:1px solid blue;
+   }
+
+  #gnqna_search_home input{
+    font-weight: bold;
+  }
+
+  .container{
+   / box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; */
+  }
+
+
+
+</style>
+
+<div style="height: 90vh;width: 100vw; margin-bottom: 10px;">
+<div style="margin:10px; border:1px solid #ccc;padding: 15px;">
+  <div >
+    <h1 id="gnqa_query" style="font-weight: bolder">{{query}}<h1>
+  </div>
+
+  <div style="width:40vw;overflow-wrap: normal; margin-top: 5px;">
+    <p style="word-spacing: 0.7em;" id="gnqa_answer">{{answer}} <p>
+  </div>
+</div>
+
+<div>
+
+ 
+  
+      <div class="container" style="overflow-y: hidden;">
+        <h4> <a href="#">References</a></h4>
+        {% if references %}
+            <ul id="gnqa_ref">
+                {% for reference in references %}
+                    <li id="gnqa_ref_item">
+                        <h2 style="font-weight:bolder;">{{ reference.bibInfo }} </h2>
+                        <p>{{reference.comboTxt}}</p>
+                    </li>
+                {% endfor %}
+            </ul>
+        {% else %}
+            <p>No references available.</p>
+        {% endif %}
+    </div>
+</div>
+</div>
+<script type="text/javascript">
+
+     document.addEventListener('DOMContentLoaded', function() {
+        $('#globalsearchform').hide()
+        $('#gnqna_search_home').show()
+         $('footer').hide()
+    });
+
+</script>
+
+<!-- Bootstrap JS and Popper.js -->
+
+
+
+{% endblock %}
+