root/sphere-electrons
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

interface

Browse source
This commit is contained in:
root 2025-04-26 12:37:50 +00:00
parent d57d49a194
commit d10f77d420
2 changed files with 119 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

74
index.html
View file

@ -13,11 +13,83 @@ body {
padding: 0;
margin: 0;
background-color: #1b1b1b;
overflow-y: hidden;
overflow: hidden;
display: grid;
grid-template-columns: var(--aside-size) auto;
color: white;
}
aside {
padding: 20px;
height: 100vh;
box-sizing: border-box;
overflow: scroll;
}
aside > container {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
aside button {
font-size: 20px;
min-width: 27px;
}
aside input[type="checkbox"] {
width: 28px;
height: 28px;
}
aside > container > div {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
@media screen and (orientation:portrait) {
body {
grid-template-columns: none;
grid-template-rows: auto var(--aside-size);
}
aside {
order: 1;
}
aside > container {
flex-direction: row;
}
}
</style>
</head>
<body>
<aside>
<container>
<div style="width:100%">
<button onclick="toggle_physics()">Physics</button>
<input id="checkbox-physics" type="checkbox" disabled>
</div>
<div>
<button onclick="toggle_skeleton()">Skeleton</button>
<input id="checkbox-skeleton" type="checkbox" disabled>
</div>
<div>
<button onclick="toggle_polytope()">Polytope</button>
<input id="checkbox-polytope" type="checkbox" disabled>
</div>
<div>
<button id="button-surface-none" onclick="set_surface(SURFACE_NONE)">Hide surface</button>
<button id="button-surface-circles" onclick="set_surface(SURFACE_CIRCLES)">Wireframe</button>
<button id="button-surface-earth" onclick="set_surface(SURFACE_EARTH)">Earth</button>
</div>
<div>
<button onclick="make_charges(0);faces=[]">0</button>
<button onclick="make_charges(1);faces=[]">1</button>
<button onclick="make_charges(2);faces=[]">2</button>
<button onclick="make_charges(3);faces=[]">3</button>
<button onclick="make_charges(4);faces=[]">4</button>
<button onclick="make_charges(5);faces=[]">5</button>
<button onclick="make_charges(6);faces=[]">6</button>
<button onclick="make_charges(7);faces=[]">7</button>
<button onclick="make_charges(8);faces=[]">8</button>
<button onclick="make_charges(9);faces=[]">9</button>
</div>
</container>
</aside>
<main>
</main>
<script src="thomson-problem.js"></script>