blob: b3b46729d9c132a0677bea98ce6606e5e83bb366 (
plain)
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Interactive Periodic Table</title>
<link rel="stylesheet" href="elements.css" />
<style>
div.periodic-table {
overflow-x: scroll;
width: 1600px;
}
</style>
</head>
<body>
<h1 style="text-align: center; padding-top: 20px; font-size: 1.8em;">Explore the elements used in quantum tech!</h1>
<h3 style="text-align: center; padding-top: 10px; font-size: 1.0em;"><i>Simply click on any element.</i></h3>
<div id="overlay"></div>
<div id="popup">
<h2 id="element-name">Element Name</h2>
<h3>Usage in Quantum Technologies</h3>
<p id="quantum-text">Dummy text for usage in quantum technologies...</p>
<h3>Usage in Other Technologies</h3>
<p id="other-text">Dummy text for other usage...</p>
<h3>Vendors</h3>
<p id="vendors-text">Dummy text for vendors...</p>
<button onclick="closePopup()">Close</button>
</div>
<div class="periodic-table" id="table"></div>
<script>
async function loadElements() {
const res = await fetch('elements.json');
const elements = await res.json();
const table = document.getElementById("table");
elements.forEach(el => {
const div = document.createElement("div");
div.className = `element ${el.category}`;
div.style.gridColumn = el.column;
div.style.gridRow = el.row;
div.onclick = () => openPopup(el);
div.innerHTML = `
<span class="number">${el.number}</span>
<span class="symbol">${el.symbol}</span>
<span class="name">${el.name}</span>
`;
table.appendChild(div);
});
}
function openPopup(el) {
document.getElementById("overlay").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById("element-name").innerText = el.name;
document.getElementById("quantum-text").innerText = el.quantum || 'No data.';
document.getElementById("other-text").innerText = el.other || 'No data.';
document.getElementById("vendors-text").innerText = el.vendors?.join(', ') || 'No data.';
}
function closePopup() {
document.getElementById("overlay").style.display = "none";
document.getElementById("popup").style.display = "none";
}
loadElements();
</script>
</body>
</html>
|
