Skip to content

Commit 8465d54

Browse files
Burhan077Burhan077
authored
Add site content
1 parent 17874ea commit 8465d54

3 files changed

Lines changed: 375 additions & 0 deletions

File tree

‎docs/index.html‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Decay Chains</title>
8+
<link rel="icon" type="image/png" href="logo.png">
9+
<script src="https://cdn.tailwindcss.com"></script>
10+
<script src="https://unpkg.com/feather-icons"></script>
11+
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12+
<style>
13+
/* Remove arrows in Chrome, Safari, Edge, Opera */
14+
input::-webkit-outer-spin-button,
15+
input::-webkit-inner-spin-button {
16+
-webkit-appearance: none;
17+
margin: 0;
18+
}
19+
20+
/* Remove arrows in Firefox */
21+
input[type=number] {
22+
-moz-appearance: textfield;
23+
}
24+
</style>
25+
26+
<style>
27+
.fade-in {
28+
animation: fadeIn 0.5s ease-in;
29+
}
30+
31+
@keyframes fadeIn {
32+
from {
33+
opacity: 0;
34+
transform: translateY(10px);
35+
}
36+
37+
to {
38+
opacity: 1;
39+
transform: translateY(0);
40+
}
41+
}
42+
43+
.glow {
44+
box-shadow: 0 0 15px rgba(74, 222, 128, 0.6);
45+
}
46+
47+
.radioactive {
48+
animation: pulse 2s infinite;
49+
}
50+
51+
@keyframes pulse {
52+
0% {
53+
transform: scale(1);
54+
}
55+
56+
50% {
57+
transform: scale(1.05);
58+
}
59+
60+
100% {
61+
transform: scale(1);
62+
}
63+
}
64+
65+
.decay-chain-item {
66+
transition: all 0.3s ease;
67+
}
68+
69+
.decay-chain-item:hover {
70+
transform: scale(1.02);
71+
background-color: rgba(10, 158, 64, 0.15);
72+
}
73+
</style>
74+
</head>
75+
76+
<body class="bg-gray-900 text-gray-100 min-h-screen">
77+
<div id="vanta-bg" class="fixed inset-0 -z-10 opacity-30"></div>
78+
<div class="relative z-10 max-w-6xl mx-auto px-4 py-8">
79+
80+
<!-- Header -->
81+
<header class="text-center mb-12">
82+
<h1
83+
class="text-4xl font-extrabold bg-gradient-to-r from-green-400 to-blue-500 text-transparent bg-clip-text mb-2 leading-relaxed pb-1"> Decay Chains
84+
</h1>
85+
<p class="text-lg text-gray-300">Explore isotopes, calculate decay, and visualize decay chains</p>
86+
<div class="mt-4 flex justify-center">
87+
<i data-feather="activity" class="text-green-400 w-10 h-10 radioactive"></i>
88+
</div>
89+
</header>
90+
91+
<!-- Input Section -->
92+
<section
93+
class="bg-gray-800 rounded-xl shadow-2xl p-6 mb-8 backdrop-blur-sm bg-opacity-90 glow transition-all duration-300">
94+
<div class="mb-6">
95+
<label for="isotope-search" class="block text-lg font-medium text-gray-300 mb-2">Select Radioactive Isotope</label>
96+
<div class="relative">
97+
<input type="text" id="isotope-search"
98+
class="w-full p-4 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-green-400 focus:border-transparent"
99+
placeholder="e.g. Uranium 238 or Strontium 90">
100+
<div id="suggestions"
101+
class="absolute z-20 w-full mt-1 bg-gray-800 border border-gray-700 rounded-lg shadow-lg hidden max-h-60 overflow-y-auto text-gray-100">
102+
</div>
103+
</div>
104+
</div>
105+
106+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
107+
<div>
108+
<label for="time-value" class="block text-lg font-medium text-gray-300 mb-2">Time Interval</label>
109+
<div class="flex">
110+
<input type="number" id="time-value"
111+
class="flex-1 p-4 bg-gray-700 border border-gray-600 rounded-l-lg text-white focus:ring-2 focus:ring-green-400 focus:border-transparent"
112+
placeholder="Enter time" min="0" step="0.01">
113+
<select id="time-unit"
114+
class="p-4 bg-gray-700 border border-gray-600 rounded-r-lg text-white focus:ring-2 focus:ring-green-400 focus:border-transparent">
115+
<option value="seconds">seconds</option>
116+
<option value="minutes">minutes</option>
117+
<option value="hours">hours</option>
118+
<option value="days">days</option>
119+
<option value="years" selected>years</option>
120+
</select>
121+
</div>
122+
</div>
123+
124+
<div>
125+
<label for="initial-nuclei" class="block text-lg font-medium text-gray-300 mb-2">Initial Nuclei (optional)</label>
126+
<input type="number" id="initial-nuclei"
127+
class="w-full p-4 bg-gray-700 border border-gray-600 rounded-lg text-white focus:ring-2 focus:ring-green-400 focus:border-transparent"
128+
placeholder="Default: 1" min="1" value="1">
129+
</div>
130+
</div>
131+
132+
<div class="text-center">
133+
<button id="calculate-btn"
134+
class="px-8 py-4 bg-gradient-to-r from-green-500 to-blue-600 hover:from-green-600 hover:to-blue-700 text-white font-bold rounded-lg transition-all duration-300 transform hover:scale-105 flex items-center justify-center">
135+
<i data-feather="zap" class="mr-2"></i> Calculate Decay
136+
</button>
137+
</div>
138+
</section>
139+
140+
<!-- Results Section -->
141+
<section id="results-section" class="hidden">
142+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
143+
<div class="bg-gray-800 border border-gray-700 rounded-xl p-6 fade-in">
144+
<div class="flex items-center mb-4">
145+
<i data-feather="activity" class="text-green-400 mr-3"></i>
146+
<h3 class="text-xl font-semibold text-green-400">Decay Probability</h3>
147+
</div>
148+
<div class="text-3xl font-bold text-green-300 mb-2" id="decay-probability">0%</div>
149+
<p class="text-gray-400">Chance that a nucleus decays in the given time</p>
150+
</div>
151+
152+
<div class="bg-gray-800 border border-gray-700 rounded-xl p-6 fade-in">
153+
<div class="flex items-center mb-4">
154+
<i data-feather="layers" class="text-blue-400 mr-3"></i>
155+
<h3 class="text-xl font-semibold text-blue-400">Remaining Nuclei</h3>
156+
</div>
157+
<div class="text-3xl font-bold text-blue-300 mb-2" id="remaining-nuclei">0</div>
158+
<p class="text-gray-400">Expected number of nuclei remaining</p>
159+
</div>
160+
</div>
161+
162+
<div class="bg-gray-800 rounded-xl shadow-xl p-6 backdrop-blur-sm bg-opacity-90 mb-8 border border-gray-700">
163+
<div class="flex items-center mb-6">
164+
<i data-feather="git-commit" class="text-purple-400 mr-3"></i>
165+
<h2 class="text-2xl font-bold text-gray-200">Decay Chain</h2>
166+
</div>
167+
<div id="decay-chain" class="space-y-4"></div>
168+
</div>
169+
170+
<div class="bg-gray-800 border border-yellow-600 rounded-xl p-6 fade-in">
171+
<div class="flex items-center mb-4">
172+
<i data-feather="info" class="text-yellow-400 mr-3"></i>
173+
<h3 class="text-xl font-semibold text-yellow-400">Interpretation</h3>
174+
</div>
175+
<p class="text-gray-300" id="interpretation"></p>
176+
</div>
177+
</section>
178+
179+
<footer class="mt-12 text-center text-gray-500 text-sm">
180+
<p>Made with <i data-feather="heart" class="inline w-4 h-4 text-red-400"></i> for nuclear science enthusiasts</p>
181+
</footer>
182+
</div>
183+
184+
<script src="index.js"></script>
185+
</body>
186+
</html>

‎docs/index.js‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
// Background
2+
VANTA.GLOBE({
3+
el: "#vanta-bg",
4+
mouseControls: true,
5+
touchControls: true,
6+
gyroControls: false,
7+
minHeight: 200.0,
8+
minWidth: 200.0,
9+
scale: 1.0,
10+
scaleMobile: 1.0,
11+
color: "#3b82f6",
12+
backgroundColor: "#111827",
13+
size: 0.8
14+
});
15+
16+
// --- Isotope Database ---
17+
const isotopeDatabase = {
18+
// Uranium-238 series
19+
"Uranium-238": { halfLife: 4.468e9, unit: "years", decayChain: ["Thorium-234"] },
20+
"Thorium-234": { halfLife: 24.1, unit: "days", decayChain: ["Protactinium-234"] },
21+
"Protactinium-234": { halfLife: 6.69, unit: "hours", decayChain: ["Uranium-234"] },
22+
"Uranium-234": { halfLife: 2.455e5, unit: "years", decayChain: ["Thorium-230"] },
23+
"Thorium-230": { halfLife: 7.538e4, unit: "years", decayChain: ["Radium-226"] },
24+
"Radium-226": { halfLife: 1600, unit: "years", decayChain: ["Radon-222"] },
25+
"Radon-222": { halfLife: 3.82, unit: "days", decayChain: ["Polonium-218"] },
26+
"Polonium-218": { halfLife: 3.1, unit: "minutes", decayChain: ["Lead-214"] },
27+
"Lead-214": { halfLife: 26.8, unit: "minutes", decayChain: ["Bismuth-214"] },
28+
"Bismuth-214": { halfLife: 19.9, unit: "minutes", decayChain: ["Polonium-214"] },
29+
"Polonium-214": { halfLife: 164e-6, unit: "seconds", decayChain: ["Lead-210"] },
30+
"Lead-210": { halfLife: 22.3, unit: "years", decayChain: ["Bismuth-210"] },
31+
"Bismuth-210": { halfLife: 5.01, unit: "days", decayChain: ["Polonium-210"] },
32+
"Polonium-210": { halfLife: 138.4, unit: "days", decayChain: ["Lead-206"] },
33+
"Lead-206": { halfLife: Infinity, unit: "stable", decayChain: [] },
34+
35+
// Uranium-235 series
36+
"Uranium-235": { halfLife: 7.04e8, unit: "years", decayChain: ["Thorium-231"] },
37+
"Thorium-231": { halfLife: 25.5, unit: "hours", decayChain: ["Protactinium-231"] },
38+
"Protactinium-231": { halfLife: 3.276e4, unit: "years", decayChain: ["Actinium-227"] },
39+
"Actinium-227": { halfLife: 21.8, unit: "years", decayChain: ["Thorium-227"] },
40+
"Thorium-227": { halfLife: 18.7, unit: "days", decayChain: ["Radium-223"] },
41+
"Radium-223": { halfLife: 11.4, unit: "days", decayChain: ["Radon-219"] },
42+
"Radon-219": { halfLife: 3.96, unit: "seconds", decayChain: ["Polonium-215"] },
43+
"Polonium-215": { halfLife: 1.78e-3, unit: "seconds", decayChain: ["Lead-211"] },
44+
"Lead-211": { halfLife: 36.1, unit: "minutes", decayChain: ["Bismuth-211"] },
45+
"Bismuth-211": { halfLife: 2.14, unit: "minutes", decayChain: ["Thallium-207"] },
46+
"Thallium-207": { halfLife: 4.77, unit: "minutes", decayChain: ["Lead-207"] },
47+
"Lead-207": { halfLife: Infinity, unit: "stable", decayChain: [] },
48+
49+
// Thorium-232 series
50+
"Thorium-232": { halfLife: 1.405e10, unit: "years", decayChain: ["Radium-228"] },
51+
"Radium-228": { halfLife: 5.75, unit: "years", decayChain: ["Actinium-228"] },
52+
"Actinium-228": { halfLife: 6.15, unit: "hours", decayChain: ["Thorium-228"] },
53+
"Thorium-228": { halfLife: 1.91, unit: "years", decayChain: ["Radium-224"] },
54+
"Radium-224": { halfLife: 3.66, unit: "days", decayChain: ["Radon-220"] },
55+
"Radon-220": { halfLife: 55.6, unit: "seconds", decayChain: ["Polonium-216"] },
56+
"Polonium-216": { halfLife: 0.145, unit: "seconds", decayChain: ["Lead-212"] },
57+
"Lead-212": { halfLife: 10.6, unit: "hours", decayChain: ["Bismuth-212"] },
58+
"Bismuth-212": { halfLife: 60.6, unit: "minutes", decayChain: ["Polonium-212", "Thallium-208"] },
59+
"Polonium-212": { halfLife: 0.3e-6, unit: "seconds", decayChain: ["Lead-208"] },
60+
"Thallium-208": { halfLife: 3.05, unit: "minutes", decayChain: ["Lead-208"] },
61+
"Lead-208": { halfLife: Infinity, unit: "stable", decayChain: [] },
62+
63+
// Other isotopes (sample)
64+
"Carbon-14": { halfLife: 5730, unit: "years", decayChain: ["Nitrogen-14"] },
65+
"Iodine-131": { halfLife: 8.02, unit: "days", decayChain: ["Xenon-131"] },
66+
"Cobalt-60": { halfLife: 5.27, unit: "years", decayChain: ["Nickel-60"] },
67+
"Cesium-137": { halfLife: 30.17, unit: "years", decayChain: ["Barium-137m"] },
68+
"Barium-137m": { halfLife: 2.55, unit: "minutes", decayChain: ["Barium-137"] },
69+
"Technetium-99m": { halfLife: 6.01, unit: "hours", decayChain: ["Technetium-99"] },
70+
"Technetium-99": { halfLife: 2.11e5, unit: "years", decayChain: ["Ruthenium-99"] },
71+
"Strontium-90": { halfLife: 28.8, unit: "years", decayChain: ["Yttrium-90"] },
72+
"Yttrium-90": { halfLife: 64, unit: "hours", decayChain: ["Zirconium-90"] },
73+
"Plutonium-239": { halfLife: 2.41e4, unit: "years", decayChain: ["Uranium-235"] },
74+
"Iodine-129": { halfLife: 1.57e7, unit: "years", decayChain: ["Xenon-129"] },
75+
"Tritium": { halfLife: 12.32, unit: "years", decayChain: ["Helium-3"] },
76+
"Deuterium": { halfLife: Infinity, unit: "stable", decayChain: [] },
77+
"Helium-3": { halfLife: Infinity, unit: "stable", decayChain: [] },
78+
"Helium-4": { halfLife: Infinity, unit: "stable", decayChain: [] },
79+
"Neutron": { halfLife: 14.7, unit: "minutes", decayChain: ["Proton", "Electron", "Antineutrino"] },
80+
"Proton": { halfLife: Infinity, unit: "stable", decayChain: [] },
81+
"Electron": { halfLife: Infinity, unit: "stable", decayChain: [] },
82+
"Antineutrino": { halfLife: Infinity, unit: "stable", decayChain: [] },
83+
"Fluorine-18": { halfLife: 109.8, unit: "minutes", decayChain: ["Oxygen-18"] },
84+
"Oxygen-18": { halfLife: Infinity, unit: "stable", decayChain: [] }
85+
};
86+
87+
// --- Helpers ---
88+
function convertToYears(value, unit) {
89+
const conversion = {
90+
seconds: 1 / (60 * 60 * 24 * 365),
91+
minutes: 1 / (60 * 24 * 365),
92+
hours: 1 / (24 * 365),
93+
days: 1 / 365,
94+
years: 1,
95+
stable: Infinity
96+
};
97+
return value * (conversion[unit] || 1);
98+
}
99+
100+
function formatHalfLife(value, unit) {
101+
if (unit === "stable") return "Stable";
102+
return `${value} ${unit}`;
103+
}
104+
105+
// --- Search Suggestions ---
106+
const searchInput = document.getElementById("isotope-search");
107+
const suggestionsBox = document.getElementById("suggestions");
108+
109+
searchInput.addEventListener("input", () => {
110+
const query = searchInput.value.toLowerCase();
111+
suggestionsBox.innerHTML = "";
112+
if (!query) {
113+
suggestionsBox.classList.add("hidden");
114+
return;
115+
}
116+
117+
const matches = Object.keys(isotopeDatabase).filter(key =>
118+
key.toLowerCase().includes(query)
119+
);
120+
if (matches.length === 0) {
121+
suggestionsBox.classList.add("hidden");
122+
return;
123+
}
124+
125+
matches.forEach(match => {
126+
const div = document.createElement("div");
127+
div.textContent = match;
128+
div.className = "px-4 py-2 hover:bg-gray-700 cursor-pointer";
129+
div.addEventListener("click", () => {
130+
searchInput.value = match;
131+
suggestionsBox.classList.add("hidden");
132+
});
133+
suggestionsBox.appendChild(div);
134+
});
135+
136+
suggestionsBox.classList.remove("hidden");
137+
});
138+
139+
// --- Calculate Decay ---
140+
document.getElementById("calculate-btn").addEventListener("click", () => {
141+
const isotopeName = searchInput.value.trim();
142+
if (!isotopeDatabase[isotopeName]) {
143+
alert("Please select a valid isotope from the list.");
144+
return;
145+
}
146+
147+
const isotope = isotopeDatabase[isotopeName];
148+
const timeValue = parseFloat(document.getElementById("time-value").value) || 0;
149+
const timeUnit = document.getElementById("time-unit").value;
150+
const initialNuclei = parseInt(document.getElementById("initial-nuclei").value) || 1;
151+
152+
const timeInYears = convertToYears(timeValue, timeUnit);
153+
const halfLifeInYears = convertToYears(isotope.halfLife, isotope.unit);
154+
155+
let decayProbability = 0;
156+
let remainingNuclei = initialNuclei;
157+
158+
if (isotope.unit !== "stable") {
159+
const decayConstant = Math.log(2) / halfLifeInYears;
160+
decayProbability = 1 - Math.exp(-decayConstant * timeInYears);
161+
remainingNuclei = initialNuclei * Math.exp(-decayConstant * timeInYears);
162+
}
163+
164+
document.getElementById("decay-probability").textContent =
165+
(decayProbability * 100).toFixed(2) + "%";
166+
document.getElementById("remaining-nuclei").textContent =
167+
remainingNuclei.toFixed(2);
168+
169+
const chainDiv = document.getElementById("decay-chain");
170+
chainDiv.innerHTML = "";
171+
isotope.decayChain.forEach((step, i) => {
172+
const div = document.createElement("div");
173+
div.className = "decay-chain-item p-3 rounded-lg bg-gray-700 border border-gray-600";
174+
div.innerHTML = `<strong class="text-green-300">Step ${i + 1}:</strong> ${step}`;
175+
chainDiv.appendChild(div);
176+
});
177+
178+
const interpretation = `For ${isotopeName} with half-life ${formatHalfLife(
179+
isotope.halfLife,
180+
isotope.unit
181+
)}, after ${timeValue} ${timeUnit}, about ${(
182+
decayProbability * 100
183+
).toFixed(2)}% of nuclei have decayed.`;
184+
document.getElementById("interpretation").textContent = interpretation;
185+
186+
document.getElementById("results-section").classList.remove("hidden");
187+
});
188+
189+
feather.replace();

‎docs/logo.png‎

5.48 KB
Loading

0 commit comments

Comments
 (0)