-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
67 lines (58 loc) · 4.76 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Drake Equation</title>
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="assets/images/favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
</head>
<body onload="clearForm()">
<div class="blurredcontainer">
<h1>Drake Equation</h1>
<p class="subtitle">Calculate the number of advanced civilizations in our galaxy.</p>
<div class="equation">
<p>N = R* · f<sub>p</sub> · n<sub>e</sub> · f<sub>l</sub> · f<sub>i</sub> · f<sub>c</sub> · L</p>
</div>
<div id="form-cointainer">
<form id="drake-form">
<label for="Rstar">Star formation rate (R*):</label>
<input type="number" id="Rstar" name="Rstar" step="0.5" min="0" required placeholder="e.g., 1.5 stars per year">
<label for="fp">Fraction of stars with planetary systems (f<sub>p</sub>):</label>
<input type="number" id="fp" name="fp" step="0.1" min="0" max="1" required placeholder="e.g., 0.5 (50%)">
<label for="ne">Number of planets per star system that can support life (n<sub>e</sub>):</label>
<input type="number" id="ne" name="ne" step="any" min="0" required placeholder="e.g., 2 planets">
<label for="fl">Fraction of those planets where life develops (f<sub>l</sub>):</label>
<input type="number" id="fl" name="fl" step="0.1" min="0" max="1" required placeholder="e.g., 0.1 (10%)">
<label for="fi">Fraction of planets with life where intelligent life evolves (f<sub>i</sub>):</label>
<input type="number" id="fi" name="fi" step="0.1" min="0" max="1" required placeholder="e.g., 0.01 (1%)">
<label for="fc">Fraction of civilizations that develop detectable technology (f<sub>c</sub>):</label>
<input type="number" id="fc" name="fc" step="0.1" min="0" max="1" required placeholder="e.g., 0.1 (10%)">
<label for="L">Duration of the detectable phase of the civilization (L):</label>
<input type="number" id="L" name="L" step="1000" min="0" required placeholder="e.g., 10000 years">
<button type="button" onclick="validateAndCalculate()">Calculate <i class="bi bi-stars"></i></button>
</form>
</div>
<h2 class="result">Result: <span id="result">0</span> civilizations</h2>
<canvas id="drakeChart"></canvas>
<p class="scientific-explanation">This graph represents the estimated number of technologically advanced extraterrestrial civilizations in the Milky Way galaxy capable of interstellar communication.</p>
<p class="scientific-explanation">The chart illustrates how this number changes based on the star formation rate (R) — one of the key parameters in the Drake Equation.</p>
<p class="scientific-explanation">These civilizations are hypothesized to have developed detectable signals, such as radio technology, which could be observed by our astronomical instruments. The estimate incorporates other factors like planetary habitability, the emergence of intelligent life, and the longevity of such civilizations.</p>
<div class="links-container">
<a class="links" href="https://github.com/Mendiak/drake.equation" target="_blank"><i class="bi bi-code-slash"></i> Drake Equation @ Github</a>
<a class="links" href="https://en.wikipedia.org/wiki/Drake_equation" target="_blank"><i class="bi bi-wikipedia"></i> Drake Equation @ Wikipedia</a>
</div>
</div>
<script src="script.js"></script>
<script>
function clearForm() {
document.getElementById('drake-form').reset();
}
</script>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</body>
</html>