Skip to content

Commit

Permalink
styling upgrade
Browse files Browse the repository at this point in the history
  • Loading branch information
@mr-eyes
mr-eyes committed Oct 4, 2024
1 parent 1deafc7 commit f39982d
Showing 1 changed file with 44 additions and 47 deletions.
91 changes: 44 additions & 47 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,37 +14,18 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snipe Web</title>

<!-- Bootstrap 4 CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">

<!-- Dropzone CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.css">
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

<!-- Custom Styles -->
<link href="styles/main.css" rel="stylesheet">

<!-- Required Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<!-- Dropzone JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.0/min/dropzone.min.js"></script>

<!-- JSZip for ZIP file handling -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

<!-- Pyodide for Python integration -->
<script src="https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js"></script>

<!-- Plotly for plotting -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<!-- Custom Script -->
<script src="./scripts/main.js" defer></script>

<style>
/* Custom Styles */
body {
Expand Down Expand Up @@ -175,16 +156,14 @@
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Snipe Metrics Description</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Here you can describe the metrics used in Snipe...</p>
<!-- Add more detailed descriptions as needed -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
Expand All @@ -196,31 +175,31 @@ <h1>Snipe Processing App</h1>

<!-- Data Selection Section -->
<div id="data-selection-container" class="species-selection">
<div class="form-row">
<div class="form-group col-md-3">
<label for="species-select">Species:</label>
<select id="species-select" class="form-control">
<div class="row">
<div class="col-md-3 mb-3">
<label for="species-select" class="form-label">Species:</label>
<select id="species-select" class="form-select">
<option value="" disabled selected>Select Species</option>
<!-- Options will be populated dynamically -->
</select>
</div>
<div class="form-group col-md-3">
<label for="genome-select">Reference Genome:</label>
<select id="genome-select" class="form-control" disabled>
<div class="col-md-3 mb-3">
<label for="genome-select" class="form-label">Reference Genome:</label>
<select id="genome-select" class="form-select" disabled>
<option value="" disabled selected>Select Reference Genome</option>
<!-- Options will be populated dynamically -->
</select>
</div>
<div class="form-group col-md-3">
<label for="ychr-select">Y Chromosome:</label>
<select id="ychr-select" class="form-control" disabled>
<div class="col-md-3 mb-3">
<label for="ychr-select" class="form-label">Y Chromosome:</label>
<select id="ychr-select" class="form-select" disabled>
<option value="" disabled selected>Select Y Chromosome</option>
<!-- Options will be populated dynamically -->
</select>
</div>
<div class="form-group col-md-3">
<label for="amplicon-select">Amplicon (Optional):</label>
<select id="amplicon-select" class="form-control" disabled>
<div class="col-md-3 mb-3">
<label for="amplicon-select" class="form-label">Amplicon (Optional):</label>
<select id="amplicon-select" class="form-select" disabled>
<option value="" disabled selected>Select Amplicon (Optional)</option>
<!-- Options will be populated dynamically -->
</select>
Expand All @@ -247,8 +226,8 @@ <h2>Upload Sample Files</h2>

<!-- Results Table -->
<div id="resultsTableContainer" class="mt-4" style="display: none;">
<div class="form-group mt-4">
<label for="bioprojectInput"><b>Update BioProject Accession:</b></label>
<div class="mb-3">
<label for="bioprojectInput" class="form-label"><b>Update BioProject Accession:</b></label>
<input type="text" id="bioprojectInput" class="form-control" placeholder="Enter BioProject Accession">
</div>
<h3>Results</h3>
Expand All @@ -266,12 +245,30 @@ <h3>Results</h3>
<div id="loadingAnimation" style="display: none;">
<div class="loader"></div>
</div>
</div>
<!-- Footer -->
<footer class="footer mt-auto py-3 bg-light">
<p class="text-center">© 2024 Snipe. All rights reserved.</p>
</footer>
</body>
</html>


</body>
<!-- Footer -->
<footer>
<p class="text-center">© 2024 Snipe. All rights reserved.</p>
</footer>
<!-- Required Scripts -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

<!-- Dropzone JS -->
<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>

<!-- JSZip for ZIP file handling -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>

</html>
<!-- Pyodide for Python integration -->
<script src="https://cdn.jsdelivr.net/pyodide/v0.26.2/full/pyodide.js"></script>

<!-- Plotly for plotting -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>

<!-- Custom Script -->
<script src="./scripts/main.js" defer></script>

0 comments on commit f39982d

Please sign in to comment.