kreidler90/chemie-spiel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: Bohr model centering and orbit fix

Browse Source
This commit is contained in:
kreidler90 2026-07-04 14:59:16 +00:00
parent f14337096a
commit da3feb012e
2 changed files with 15 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app.js
View File

@ -1177,6 +1177,8 @@ function renderBohrModel(electronsArray) {
const diameter = 40 + (shellIndex * 30); const diameter = 40 + (shellIndex * 30);
shellDiv.style.width = diameter + 'px'; shellDiv.style.width = diameter + 'px';
shellDiv.style.height = diameter + 'px'; shellDiv.style.height = diameter + 'px';
shellDiv.style.left = `calc(50% - ${diameter / 2}px)`;
shellDiv.style.top = `calc(50% - ${diameter / 2}px)`;
// Geschwindigkeit variieren für coole Dynamik // Geschwindigkeit variieren für coole Dynamik
shellDiv.style.animationDuration = (6 + shellIndex * 4) + 's'; shellDiv.style.animationDuration = (6 + shellIndex * 4) + 's';

20
style.css
View File

@ -1014,20 +1014,26 @@ body {
z-index: 5; z-index: 5;
} }
#bohr-shells {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
display: flex;
justify-content: center;
align-items: center;
}
.bohr-shell { .bohr-shell {
position: absolute; position: absolute;
border: 1px dashed rgba(255,255,255,0.15); border: 1px dashed rgba(255,255,255,0.15);
border-radius: 50%; border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
animation: rotate-shell 20s linear infinite; animation: rotate-shell 20s linear infinite;
transform-origin: center;
} }
.bohr-shell:nth-child(1) { width: 50px; height: 50px; animation-duration: 8s; }
.bohr-shell:nth-child(2) { width: 90px; height: 90px; animation-duration: 15s; }
.bohr-shell:nth-child(3) { width: 130px; height: 130px; animation-duration: 25s; }
.bohr-electron { .bohr-electron {
width: 6px; width: 6px;
height: 6px; height: 6px;