Minor Changes.

5 files changed, 265 insertions, 37 deletions

diff --git a/README.md b/README.md
index af1f3db..d973141 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,5 @@
 <div align="center">
-  <img src="assets/LFX-genofusionv.png" width="210"/>
+  <img src="SequenceViewer/app/static/img/LFX-genofusionv.png" width="210"/>
 
   # Linear Fox | GenoFusion
 
diff --git a/SequenceViewer/app/static/genview.css b/SequenceViewer/app/static/genview.css
index 75eaf2b..9213276 100644
--- a/SequenceViewer/app/static/genview.css
+++ b/SequenceViewer/app/static/genview.css
@@ -1,23 +1,240 @@
+:root {
+    --background-color: #0b0b0b;
+    --text-color: white;
+    --heading-color: #f0f0f0;
+    --pre-background-color: #f4f4f4;
+    --pre-text-color: #333;
+    --pre-border-color: #ddd;
+    --link-color: #ff5656;
+    --link-hover-color: #ffcc00;
+    --list-item-background-color: #333;
+    --details-background-color: #444;
+    --details-border-color: #666;
+    --summary-color: #ffeb3b;
+    --summary-hover-color: #ffcc00;
+    --hr-border-color: #666;
+    --container-background-color: #1e1e1e;
+    --container-box-shadow-color: rgba(0, 0, 0, 0.5);
+    --enzyme-background-color: #ffeb3b;
+    --enzyme-text-color: #000;
+}
+
 body {
-    font-family: Arial, sans-serif;
-    margin: 20px;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: var(--background-color);
+    color: var(--text-color);
 }
 
 h1 {
-    color: #333;
+    color: var(--heading-color);
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+header {
+    padding: 10px;
+}
+
+header img {
+    max-width: 150px;
+}
+
+main {
+    padding: 20px;
+    text-align: center;
+    max-width: 600px;
+    width: 100%;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    background-color: rgb(14, 14, 14);
+    margin: 20px;
+    border-radius: 8px;
+}
+
+input[type="file"] {
+    margin: 10px 0;
+}
+
+button {
+    background-color: #af4c4c;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    cursor: pointer;
+    border-radius: 4px;
+}
+
+button:hover {
+    background-color: #a04545;
+}
+
+.recent-uploads {
+    margin-top: 20px;
+}
+
+.recent-uploads h2 {
+    font-size: 1.2em;
+}
+
+.recent-uploads ul {
+    list-style-type: none;
+    padding: 0;
+}
+
+.recent-uploads li {
+    margin: 5px 0;
+}
+
+.recent-uploads a {
+    color: #ffb2b2;
+    text-decoration: none;
+}
+
+.recent-uploads a:hover {
+    text-decoration: underline;
+}
+
+.progress {
+    display: none;
+    margin: 10px 0;
+    width: 100%;
+    background-color: #f3f3f3;
+    border-radius: 4px;
+}
+
+.progress-bar {
+    width: 0;
+    height: 20px;
+    background-color: #505050;
+    border-radius: 4px;
+    text-align: center;
+    line-height: 20px;
+    color: white;
 }
 
 form {
     margin-bottom: 20px;
+    text-align: center;
 }
 
 pre {
-    background-color: #f4f4f4;
+    background-color: var(--pre-background-color);
+    color: var(--pre-text-color);
     padding: 10px;
-    border: 1px solid #ddd;
+    border: 1px solid var(--pre-border-color);
     overflow: auto;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    border-radius: 5px;
 }
 
 li {
     margin-bottom: 20px;
 }
+
+a {
+    color: var(--link-color);
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+    color: var(--link-hover-color);
+}
+
+ul {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+}
+
+ul li {
+    background-color: var(--list-item-background-color);
+    padding: 10px;
+    border-radius: 5px;
+    margin-bottom: 10px;
+}
+
+details {
+    background-color: var(--details-background-color);
+    padding: 10px;
+    border-radius: 5px;
+}
+
+details[open] summary {
+    border-bottom: 1px solid var(--details-border-color);
+    margin-bottom: 10px;
+}
+
+summary {
+    cursor: pointer;
+    color: var(--summary-color);
+    font-weight: bold;
+}
+
+summary:hover {
+    color: var(--summary-hover-color);
+}
+
+hr {
+    border: none;
+    border-top: 2px solid var(--hr-border-color);
+    margin: 20px 0;
+    width: 100%;
+}
+
+.container {
+    width: 100%;
+    max-width: 1140px;
+    margin: 0 auto; 
+    padding: 0 15px;
+    box-sizing: border-box;
+}
+
+.view {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100vh; /* Optional: This will make the container take up the full height of the viewport */
+}
+
+.enzyme {
+    background-color: var(--enzyme-background-color);
+    color: var(--enzyme-text-color);
+    padding: 2px 4px;
+    border-radius: 3px;
+}
+
+.row {
+    display: flex;
+    flex-wrap: wrap;
+    margin-right: -15px;
+    margin-left: -15px;
+}
+
+[class*="col-"] {
+    padding-right: 15px;
+    padding-left: 15px;
+    flex: 1;
+}
+
+.col-1 { flex: 0 0 8.33%; }
+.col-2 { flex: 0 0 16.66%; }
+.col-3 { flex: 0 0 25%; }
+.col-4 { flex: 0 0 33.33%; }
+.col-5 { flex: 0 0 41.66%; }
+.col-6 { flex: 0 0 50%; }
+.col-7 { flex: 0 0 58.33%; }
+.col-8 { flex: 0 0 66.66%; }
+.col-9 { flex: 0 0 75%; }
+.col-10 { flex: 0 0 83.33%; }
+.col-11 { flex: 0 0 91.66%; }
+.col-12 { flex: 0 0 100%; }
+
+@media (max-width: 768px) {
+    [class*="col-"] {
+        flex: 0 0 100%;
+    }
+}
diff --git a/assets/LFX-genofusionv.png b/SequenceViewer/app/static/img/LFX-genofusionv.png
index 9ab0285..9ab0285 100644
--- a/assets/LFX-genofusionv.png
+++ b/SequenceViewer/app/static/img/LFX-genofusionv.png
diff --git a/SequenceViewer/app/templates/index.html b/SequenceViewer/app/templates/index.html
index 7aaef10..1391002 100644
--- a/SequenceViewer/app/templates/index.html
+++ b/SequenceViewer/app/templates/index.html
@@ -5,12 +5,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="{{ url_for('static', filename='genview.css') }}">
+    <style>
+        body {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+        }
+    </style>
 </head>
 <body>
-    <h1>Select a file to view</h1>
-    <form action="{{ url_for('upload_file') }}" method="post" enctype="multipart/form-data">
-        <input type="file" name="file" accept=".fasta, .fa, .fastq, .gb, .genbank">
-        <button type="submit">Upload</button>
-    </form>
+    <header>
+        <center><img src="{{ url_for('static', filename='img/LFX-genofusionv.png') }}" alt="Fox Logo"></center>
+    </header>
+    <main>
+        <h1>Select a file to view</h1>
+        <p>Please upload a file in one of the following formats: FASTA (.fasta, .fa), FASTQ (.fastq), GenBank (.gb, .genbank).</p>
+        <form action="{{ url_for('upload_file') }}" method="post" enctype="multipart/form-data">
+            <input type="file" name="file" accept=".fasta, .fa, .fastq, .gb, .genbank" multiple required>
+            <button type="submit">Upload</button>
+        </form>
+    </main>
 </body>
 </html>
diff --git a/SequenceViewer/app/templates/view.html b/SequenceViewer/app/templates/view.html
index 4f1ef18..378e3ce 100644
--- a/SequenceViewer/app/templates/view.html
+++ b/SequenceViewer/app/templates/view.html
@@ -5,32 +5,30 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>View Sequences - {{ filename }}</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='genview.css') }}">
-    <style>
-        .enzyme {
-            background-color: lightblue;
-        }
-    </style>
 </head>
 <body>
-    <h1>Viewing Sequences from {{ filename }}</h1>
-    <a href="{{ url_for('index') }}">Upload another file</a>
-    <ul>
-    {% for record in sequences %}
-        <li>
-            <strong>ID: {{ record.id }}</strong><br>
-            <pre>{{ record.sequence|safe }}</pre>
-            {% if record.features %}
-                <details>
-                    <summary>Features:</summary>
-                    <ul>
-                    {% for feature in record.features %}
-                        <li>{{ feature }}</li>
-                    {% endfor %}
-                    </ul>
-                </details>
-            {% endif %}
-        </li>
-    {% endfor %}
-    </ul>
+    <div class="container view">
+        <h1>Viewing Sequences from {{ filename }}</h1>
+        <a href="{{ url_for('index') }}">View Another File</a>
+        <hr>
+        <ul>
+        {% for record in sequences %}
+            <li>
+                <strong>ID: {{ record.id }}</strong><br>
+                <pre>{{ record.sequence|safe }}</pre>
+                {% if record.features %}
+                    <details>
+                        <summary>Features:</summary>
+                        <ul>
+                        {% for feature in record.features %}
+                            <li>{{ feature }}</li>
+                        {% endfor %}
+                        </ul>
+                    </details>
+                {% endif %}
+            </li>
+        {% endfor %}
+        </ul>
+    </div>
 </body>
-</html>
\ No newline at end of file
+</html>