diff options
author | Nathan Fargo <32229490+ntfargo@users.noreply.github.com> | 2024-06-14 07:19:43 +0200 |
---|---|---|
committer | Nathan Fargo <32229490+ntfargo@users.noreply.github.com> | 2024-06-14 07:19:43 +0200 |
commit | 731cf88db6cf148509ef19d039f5987534ad1c9e (patch) | |
tree | d0aca9a62a0b72a6b0b484f6fdb34e88b656e2a8 | |
parent | 4c0984e49d59052f9361179e23d5a3b74c4b5425 (diff) |
Minor Changes.
-rw-r--r-- | README.md | 2 | ||||
-rw-r--r-- | SequenceViewer/app/static/genview.css | 227 | ||||
-rw-r--r-- | SequenceViewer/app/static/img/LFX-genofusionv.png (renamed from assets/LFX-genofusionv.png) | bin | 58415 -> 58415 bytes | |||
-rw-r--r-- | SequenceViewer/app/templates/index.html | 23 | ||||
-rw-r--r-- | SequenceViewer/app/templates/view.html | 50 |
5 files changed, 265 insertions, 37 deletions
@@ -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 Binary files differindex 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> |