-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (77 loc) · 3.73 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mendelian Inheritance Simulator</title>
<link rel="stylesheet" href="css/style.css" id="light-mode-style">
<link rel="stylesheet" href="css/darkmode.css" id="dark-mode-style" disabled>
<link rel="stylesheet" href="css/layout.css">
</head>
<body data-theme="light">
<header>
<h1>Mendelian Inheritance Simulator</h1>
<p>Explore different traits and their inheritance patterns based on Mendelian genetics.</p>
<button id="darkModeToggle">Toggle Dark Mode</button>
</header>
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="pages/blood-types.html">Blood Types</a></li>
<li><a href="pages/eye-color.html">Eye Color</a></li>
<li><a href="pages/skin-color.html">Skin Color</a></li>
<li><a href="pages/height.html">Height</a></li>
<li><a href="pages/hair-color.html">Hair Color</a></li>
</ul>
</nav>
<main class="container">
<div class="left-column">
<section>
<h2>Welcome to the Inheritance Simulator!</h2>
<p>Select a trait from the navigation bar to test the inheritance of different characteristics.</p>
</section>
<section>
<h2>What is Mendelian Genetics?</h2>
<p>Mendelian genetics is the study of how traits are inherited from one generation to the next, based on the work of Gregor Mendel. Mendel discovered that traits are passed on through discrete units called alleles, which can be dominant or recessive.</p>
<p>In this simulator, you can explore how different traits are inherited based on the combinations of alleles from the parents.</p>
</section>
<section>
<h2>Common Traits Explored</h2>
<h3>Eye Color</h3>
<p>Eye color is determined by multiple genes, with brown being the dominant trait over blue and green.</p>
<h3>Skin Color</h3>
<p>Skin color is a polygenic trait influenced by several genes that produce a wide range of shades.</p>
<h3>Height</h3>
<p>Height is also influenced by many genes and can be affected by environmental factors.</p>
<h3>Blood Type</h3>
<p>
Blood type is determined by the presence of specific antigens on the surface of red blood cells.
The ABO blood group system includes types A, B, AB, and O, with O being the most common.
Additionally, the Rh factor can be either positive or negative, providing further classification of blood types.
</p>
</section>
</div>
<div class="right-column">
<section>
<h2>How to Use the Simulator</h2>
<ol>
<li>Navigate to the desired trait tester from the menu above.</li>
<li>Select the parent traits you want to test.</li>
<li>Click the "Calculate" button to see possible offspring traits.</li>
<li>Review the results displayed for potential offspring characteristics.</li>
</ol>
</section>
<section>
<h2>Visual Aid</h2>
<img src="images/mendel-diagram.png" alt="Mendelian Genetics Diagram" style="width:100%;max-width:600px;">
<p>This diagram illustrates the basic principles of Mendelian inheritance.</p>
</section>
</div>
</main>
<footer>
<p>© 2024 Ponder, Anthony. All rights reserved.</p>
</footer>
<script src="js/script.js"></script>
<script src="js/darkmode.js"></script>
</body>
</html>