Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@astoicame
astoicame authored Jan 9, 2025
1 parent 2960f43 commit 1c4dd2d
Show file tree
Hide file tree
Showing 3 changed files with 299 additions and 0 deletions.
124 changes: 124 additions & 0 deletions help_page.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Help - Younger Lab Database</title>
<link rel="stylesheet" href="style2.css">
<style>
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: background-color 0.4s ease;
}

.active, .collapsible:hover {
background-color: #ccc;
}

.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f9f9f9;
transition: max-height 0.2s ease-out;
}
</style>
</head>
<body>
<header>
<div class="container">
<a href="#" class="logo">Younger Lab Database Help</a>
</div>
</header>

<main>
<div class="container">
<h1>Help Guide</h1>

<button class="collapsible">Forms</button>
<div class="content">
<h2>Passage Form</h2>
<p>For each field in the form:
<b>Name:</b> input the name of the person filling the form.
<b>Genoype:</b> select genotype of line passaged.
<b>BC/IB Number:</b> input current inbreed or backcross number of the generation, adding +1 for the latest cross.
<b>Hatch Date:</b> hatch date of the line passaged.
<b>Passage Date:</b> input today's date.
<b>Mating Line:</b> the the passage is crossing with.
</p>
<h2>Sorting Form</h2>
<p>For each field in the form:
<b>Name:</b> input the name of the person filling the form.
<b>Date Sorting:</b> input today's date.
<b>Marker Location:</b> input location of fluorescent marker.
<b>Ratio of fluorescent to non-fluorescent larvae:</b> approximate ratio using slider, with color representing fluorescent mosquitos.
<b>Number of fluorescent animals sorted:</b> input total number of animals which were fluorescent.
<b>Additional Notes:</b> open field for any relevant notes, such as male to female ratios.
</p>
<h2>Clutch Form</h2>
<p>For each field in the form:
<b>Name:</b> input the name of the person filling the form.
<b>Genoype:</b> select genotype of line passaged.
<b>Hatch Date:</b> input hatch date of the clutch.
<b>Collection Date:</b> input date the eggs are collected.
<b>Clutch number:</b> is it the first, second, or third time collecting eggs from this cage since last passage?
<b>Egg Papers:</b> input density of the eggs on the egg paper. See images below for reference.
<img src = 'https://bioed.bu.edu/var/www/html.images/students_24/Team_4/image you want lol'>
</p>
</div>

<button class="collapsible">Tables</button>
<div class="content">
<h2>Mosquito Lines Table</h2>
<p>The mosquito lines table provides a master view of the and serves as a reference table for day to day lab queries in an easily accesible, sortable format.</p>
<h2>Sorting Table</h2>
<p>The sorting table provides more in depth archival information on each sorting event as submitted through the sorting form.</p>
<h2>Passage Table</h2>
<p>The passage table provides more in depth archival information on each sorting event as submitted through the passage form.</p>
</div>

<button class="collapsible">Modify Tables</button>
<div class="content">
<p>Guidance on how to modify tables within the database.</p>
</div>

<button class="collapsible">Diagnostics</button>
<div class="content">
<h2>Clutch Wellness</h2>
<p>The clutch wellness functionality allows users to perform clutch wellness checks. Select the Line in question from the genotype dropdown menu. The graph will display the egg density of the line over time as pulled from record submitted through the clutch form. Each individual line is correlated with whether the clutch was the first, second, or third of its parent line.</p>
<h2>Statistics</h2>
<p>Insights into the statistical tools available and how to use them to analyze data.</p>
</div>
</div>
</main>

<footer>
<div class="container">
<p>&copy; 2024 Younger Lab Database. All rights reserved.</p>
</div>
</footer>

<script>
var coll = document.getElementsByClassName("collapsible");
for (let i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>
56 changes: 56 additions & 0 deletions main2 (1).html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Younger Lab Database Example</title>
<link rel="stylesheet" href="style2.css">
</head>
<body>
<header>
<div class="container">
<a href="#" class="logo">Younger Lab Database</a>
<nav>
<ul class="nav-menu">
<li><a href="home.html">Home</a></li>
<li class="dropdown">
<a href="#">Forms</a>
<ul class="dropdown-menu">
<li><a href="passage-form.html">Passage Form</a></li>
<li><a href="sorting-form.html">Sorting Form</a></li>
<li><a href="clutch-form.html">Clutch Form</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#">Tables</a>
<ul class="dropdown-menu">
<li><a href="master-view.html">Master View</a></li>
<li><a href="sorting-table.html">Sorting Table</a></li>
<li><a href="passage-table.html">Passage Table</a></li>
</ul>
</li>
<li><a href="modify-tables.html">Modify Tables</a></li>
<li class="dropdown">
<a href="#">Diagnostics</a>
<ul class="dropdown-menu">
<li><a href="master-view.html">Clutch Wellness</a></li>
<li><a href="sorting-table.html">Statistics</a></li>
</ul>
</li>
<li><a href="#">Help</a></li>
</ul>
</nav>
</div>
</header>

<main>
<div class="container">
<h1>Introduction</h1>
<p>This database was created in cooperation with the Younger Lab to aid in mosquito line management. Tabs in this webpage will aid the Younger Lab in diagnostic plotting of egg propensity, a master view of the mosquito lines, an image
view of mosquito lines, a form to input mosquito line passage data, and a to do list. A help page is also provided to guide the user of the main functionalities of the database.
</p>
</div>
</main>
</body>
</html>

119 changes: 119 additions & 0 deletions style2 (1).css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,119 @@
/* General Styles */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}

body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
background-color: #f5f5f5;
}

a {
color: #007bff;
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}

/* Header Styles */
header {
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.logo {
font-size: 24px;
font-weight: bold;
color: black;
}

/* Navigation Styles */
nav ul {
list-style: none;
display: flex;
}

nav li {
margin-right: 20px;
}

nav a {
font-size: 18px;
color: #333;
}

/* Main Content Styles */
main {
margin-top: 40px;
}

h1 {
font-size: 36px;
margin-bottom: 20px;
}

p {
margin-bottom: 20px;
}

/* Footer Styles */
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}

footer p {
margin-bottom: 0;
}

/* Media Queries */
@media (max-width: 768px) {
.container {
padding: 10px;
}
}

.nav-menu {
display: flex;
}

.nav-menu li {
position: relative;
}

.dropdown {
position: relative;
}

.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
z-index: 1;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dropdown-menu li {
display: block;
}

.dropdown:hover .dropdown-menu {
display: block;
}

0 comments on commit 1c4dd2d

Please sign in to comment.