You've already forked BitBox-Web
mirror of
https://github.com/MrLyallCSIT/BitBox-Web.git
synced 2026-01-18 07:09:38 +00:00
257 lines
18 KiB
HTML
257 lines
18 KiB
HTML
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"><title>Binary Box Simulator</title><link rel="icon" type="image/png" sizes="1080x1080" href="assets/img/Bit%20Box%20Logo.png?h=a50b3ddb5614299b0c00dd4f01bc402e"><link rel="icon" type="image/png" sizes="1080x1080" href="assets/img/Bit%20Box%20Logo.png?h=a50b3ddb5614299b0c00dd4f01bc402e"><link rel="icon" type="image/png" sizes="1080x1080" href="assets/img/Bit%20Box%20Logo.png?h=a50b3ddb5614299b0c00dd4f01bc402e"><link rel="icon" type="image/png" sizes="1080x1080" href="assets/img/Bit%20Box%20Logo.png?h=a50b3ddb5614299b0c00dd4f01bc402e"><link rel="icon" type="image/png" sizes="1080x1080" href="assets/img/Bit%20Box%20Logo.png?h=a50b3ddb5614299b0c00dd4f01bc402e"><link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css?h=3f30c2c47d7d23c7a994db0c862d45a5"><link rel="stylesheet" href="assets/css/styles.min.css?h=97129fb3e6323d39c5acf5acebb6fa92"></head><body style="background: rgb(0,0,0);color: rgb(255,255,255);--bs-body-color: #FFFFFF;--bs-body-bg: #000000;--bs-primary: #dc3545;--bs-primary-rgb: 220,53,69;--bs-secondary: #198754;--bs-secondary-rgb: 25,135,84;--bs-dark: #000000;--bs-dark-rgb: 0,0,0;border-style: none;"><script>
|
|
denary = 0
|
|
binary = ""
|
|
bit1 = false
|
|
bit2 = false
|
|
bit4 = false
|
|
bit8 = false
|
|
bit16 = false
|
|
bit32 = false
|
|
bit64 = false
|
|
bit128 = false
|
|
bit256 = false
|
|
function resetSimulator(){
|
|
document.getElementById("blb256").classList.remove('poweredOn');
|
|
document.getElementById("blb256").classList.add('poweredOff');
|
|
document.getElementById("swt256").classList.remove('btnActive');
|
|
bit256 = false;
|
|
document.getElementById("blb128").classList.add('poweredOff');
|
|
document.getElementById("blb128").classList.remove('poweredOn');
|
|
document.getElementById("swt128").classList.remove('btnActive');
|
|
bit128 = false;
|
|
document.getElementById("blb64").classList.add('poweredOff');
|
|
document.getElementById("blb64").classList.remove('poweredOn');
|
|
document.getElementById("swt64").classList.remove('btnActive');
|
|
bit64 = false;
|
|
document.getElementById("blb32").classList.add('poweredOff');
|
|
document.getElementById("blb32").classList.remove('poweredOn');
|
|
document.getElementById("swt32").classList.remove('btnActive');
|
|
bit32 = false;
|
|
document.getElementById("blb16").classList.add('poweredOff');
|
|
document.getElementById("blb16").classList.remove('poweredOn');
|
|
document.getElementById("swt16").classList.remove('btnActive');
|
|
bit16 = false;
|
|
document.getElementById("blb8").classList.add('poweredOff');
|
|
document.getElementById("blb8").classList.remove('poweredOn');
|
|
document.getElementById("swt8").classList.remove('btnActive');
|
|
bit8 = false;
|
|
document.getElementById("blb4").classList.add('poweredOff');
|
|
document.getElementById("blb4").classList.remove('poweredOn');
|
|
document.getElementById("swt4").classList.remove('btnActive');
|
|
bit4 = false;
|
|
document.getElementById("blb2").classList.add('poweredOff');
|
|
document.getElementById("blb2").classList.remove('poweredOn');
|
|
document.getElementById("swt2").classList.remove('btnActive');
|
|
bit2 = false;
|
|
document.getElementById("blb1").classList.add('poweredOff');
|
|
document.getElementById("blb1").classList.remove('poweredOn');
|
|
document.getElementById("swt1").classList.remove('btnActive');
|
|
bit1 = false;
|
|
denary = 0;
|
|
updateNumbers();
|
|
}
|
|
function changeClass256(){
|
|
if (bit256){
|
|
document.getElementById("blb256").classList.add('poweredOff');
|
|
document.getElementById("blb256").classList.remove('poweredOn');
|
|
document.getElementById("swt256").classList.remove('btnActive');
|
|
bit256 = false;
|
|
denary = denary - 256;
|
|
updateNumbers();
|
|
}else{
|
|
document.getElementById("blb256").classList.add('poweredOn');
|
|
document.getElementById("blb256").classList.remove('poweredOff');
|
|
document.getElementById("swt256").classList.add('btnActive');
|
|
bit256 = true;
|
|
denary = denary + 256;
|
|
updateNumbers();
|
|
}
|
|
}
|
|
function changeClass128(){
|
|
if (bit128){
|
|
document.getElementById("blb128").classList.add('poweredOff');
|
|
document.getElementById("blb128").classList.remove('poweredOn');
|
|
document.getElementById("swt128").classList.remove('btnActive');
|
|
bit128 = false;
|
|
denary = denary - 128;
|
|
updateNumbers();
|
|
}else{
|
|
document.getElementById("blb128").classList.add('poweredOn');
|
|
document.getElementById("blb128").classList.remove('poweredOff');
|
|
document.getElementById("swt128").classList.add('btnActive');
|
|
bit128 = true;
|
|
denary = denary + 128;
|
|
updateNumbers();
|
|
}
|
|
}
|
|
function changeClass64(){
|
|
if (bit64){
|
|
document.getElementById("blb64").classList.add('poweredOff');
|
|
document.getElementById("blb64").classList.remove('poweredOn');
|
|
document.getElementById("swt64").classList.remove('btnActive');
|
|
bit64 = false;
|
|
denary = denary - 64;
|
|
updateNumbers();
|
|
}else{
|
|
document.getElementById("blb64").classList.add('poweredOn');
|
|
document.getElementById("blb64").classList.remove('poweredOff');
|
|
document.getElementById("swt64").classList.add('btnActive');
|
|
bit64 = true;
|
|
denary = denary + 64;
|
|
updateNumbers();
|
|
}
|
|
}
|
|
function changeClass32(){
|
|
if (bit32){
|
|
document.getElementById("blb32").classList.add('poweredOff');
|
|
document.getElementById("blb32").classList.remove('poweredOn');
|
|
document.getElementById("swt32").classList.remove('btnActive');
|
|
bit32 = false;
|
|
denary = denary - 32;
|
|
updateNumbers();
|
|
}else{
|
|
document.getElementById("blb32").classList.add('poweredOn');
|
|
document.getElementById("blb32").classList.remove('poweredOff');
|
|
document.getElementById("swt32").classList.add('btnActive');
|
|
bit32 = true;
|
|
denary = denary + 32;
|
|
updateNumbers();
|
|
}
|
|
}
|
|
function changeClass16(){
|
|
if (bit16){
|
|
document.getElementById("blb16").classList.add('poweredOff');
|
|
document.getElementById("blb16").classList.remove('poweredOn');
|
|
document.getElementById("swt16").classList.remove('btnActive');
|
|
bit16 = false;
|
|
denary = denary - 16;
|
|
updateNumbers();
|
|
}else{
|
|
document.getElementById("blb16").classList.add('poweredOn');
|
|
document.getElementById("blb16").classList.remove('poweredOff');
|
|
document.getElementById("swt16").classList.add('btnActive');
|
|
bit16 = true;
|
|
denary = denary + 16;
|
|
updateNumbers();
|
|
}
|
|
}
|
|
function changeClass8(){
|
|
if (bit8){
|
|
document.getElementById("blb8").classList.add('poweredOff');
|
|
document.getElementById("blb8").classList.remove('poweredOn');
|
|
document.getElementById("swt8").classList.remove('btnActive');
|
|
bit8 = false;
|
|
denary = denary - 8;
|
|
updateNumbers();
|
|
}else{
|
|
document.getElementById("blb8").classList.add('poweredOn');
|
|
document.getElementById("blb8").classList.remove('poweredOff');
|
|
document.getElementById("swt8").classList.add('btnActive');
|
|
bit8 = true;
|
|
denary = denary + 8;
|
|
updateNumbers();
|
|
}
|
|
}
|
|
function changeClass4(){
|
|
if (bit4){
|
|
document.getElementById("blb4").classList.add('poweredOff');
|
|
document.getElementById("blb4").classList.remove('poweredOn');
|
|
document.getElementById("swt4").classList.remove('btnActive');
|
|
bit4 = false;
|
|
denary = denary - 4;
|
|
updateNumbers();
|
|
}else{
|
|
document.getElementById("blb4").classList.add('poweredOn');
|
|
document.getElementById("blb4").classList.remove('poweredOff');
|
|
document.getElementById("swt4").classList.add('btnActive');
|
|
bit4 = true;
|
|
denary = denary + 4;
|
|
updateNumbers();
|
|
}
|
|
}
|
|
function changeClass2(){
|
|
if (bit2){
|
|
document.getElementById("blb2").classList.add('poweredOff');
|
|
document.getElementById("blb2").classList.remove('poweredOn');
|
|
document.getElementById("swt2").classList.remove('btnActive');
|
|
bit2 = false;
|
|
denary = denary - 2;
|
|
updateNumbers();
|
|
}else{
|
|
document.getElementById("blb2").classList.add('poweredOn');
|
|
document.getElementById("blb2").classList.remove('poweredOff');
|
|
document.getElementById("swt2").classList.add('btnActive');
|
|
bit2 = true;
|
|
denary = denary + 2;
|
|
updateNumbers();
|
|
}
|
|
}
|
|
function changeClass1(){
|
|
if (bit1){
|
|
document.getElementById("blb1").classList.add('poweredOff');
|
|
document.getElementById("blb1").classList.remove('poweredOn');
|
|
document.getElementById("swt1").classList.remove('btnActive');
|
|
bit1 = false;
|
|
denary = denary - 1;
|
|
updateNumbers();
|
|
}else{
|
|
document.getElementById("blb1").classList.add('poweredOn');
|
|
document.getElementById("blb1").classList.remove('poweredOff');
|
|
document.getElementById("swt1").classList.add('btnActive');
|
|
bit1 = true;
|
|
denary = denary + 1;
|
|
updateNumbers();
|
|
}
|
|
}
|
|
|
|
function updateNumbers(){
|
|
binary = ""
|
|
if(bit256){
|
|
binary = binary + "1"
|
|
}else{
|
|
binary = binary + "0"
|
|
}
|
|
if(bit128){
|
|
binary = binary + "1"
|
|
}else{
|
|
binary = binary + "0"
|
|
}
|
|
if(bit64){
|
|
binary = binary + "1"
|
|
}else{
|
|
binary = binary + "0"
|
|
}
|
|
if(bit32){
|
|
binary = binary + "1"
|
|
}else{
|
|
binary = binary + "0"
|
|
}
|
|
if(bit16){
|
|
binary = binary + "1"
|
|
}else{
|
|
binary = binary + "0"
|
|
}
|
|
if(bit8){
|
|
binary = binary + "1"
|
|
}else{
|
|
binary = binary + "0"
|
|
}
|
|
if(bit4){
|
|
binary = binary + "1"
|
|
}else{
|
|
binary = binary + "0"
|
|
}
|
|
if(bit2){
|
|
binary = binary + "1"
|
|
}else{
|
|
binary = binary + "0"
|
|
}
|
|
if(bit1){
|
|
binary = binary + "1"
|
|
}else{
|
|
binary = binary + "0"
|
|
}
|
|
document.getElementById("denaryNumber").innerHTML = denary;
|
|
document.getElementById("binaryNumber").innerHTML = binary;
|
|
}
|
|
</script><!-- Start: 1 Row 2 Columns --><div class="container" style="width: 100%;margin-top: 15px;"><div class="row"><div class="col-md-6 container" style="margin: 0;margin-top: 0;"><a onclick="resetSimulator()"><img style="margin-top: 10px;margin-left: 10px;width: 100px;margin-bottom: 10px;display: block;" src="assets/img/Bit%20Box%20Logo.png?h=a50b3ddb5614299b0c00dd4f01bc402e" onclick="resetSimulator()"><div class="overlay"><p style="font-weight: 600;color: black;text-align: center;position: absolute;top: 25%;left: 50%;-webkit-transform: translate(-50%, -50%);-ms-transform: translate(-50%, -50%);transform: translate(-50%);">Reset bit:box</p></div></a></div><div class="col"></div><div class="col-md-6" style="width: 30%;"><div class="row"><div class="col"><h1 style="text-align: center;font-family: 'Seven Segment Regular';">Denary</h1></div></div><div class="row"><div class="col"><h1 id="denaryNumber" style="text-align: center;color: #10ff00;font-family: 'DSEG7 Classic Regular';">0</h1></div></div><div class="row"><div class="col"><h1 style="text-align: center;font-family: 'Seven Segment Regular';">Binary</h1></div></div><div class="row"><div class="col"><h1 id="binaryNumber" style="text-align: center;color: #10ff00;font-family: 'DSEG7 Classic Regular';">000000000</h1></div></div></div></div></div><!-- End: 1 Row 2 Columns --><!-- Start: Box Sim --><div class="container" style="width: 100%;"><div class="row"><div class="col-md-12" style="width: 11.11%;"><h1 id="blb256" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></div><div class="col-md-12" style="width: 11.11%;"><h1 id="blb128" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></div><div class="col-md-12" style="width: 11.11%;"><h1 id="blb64" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></div><div class="col-md-12" style="width: 11.11%;"><h1 id="blb32" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></div><div class="col-md-12" style="width: 11.11%;"><h1 id="blb16" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></div><div class="col-md-12" style="width: 11.11%;"><h1 id="blb8" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></div><div class="col-md-12" style="width: 11.11%;"><h1 id="blb4" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></div><div class="col-md-12" style="width: 11.11%;"><h1 id="blb2" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></div><div class="col-md-12" style="width: 11.11%;"><h1 id="blb1" class="poweredOff" style="text-align: center;font-size: 48px;">💡<br></h1></div></div><div class="row"><div class="col-md-12" style="width: 11.11%;"><h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';">256</h1></div><div class="col-md-12" style="width: 11.11%;"><h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';">128</h1></div><div class="col-md-12" style="width: 11.11%;"><h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';">64</h1></div><div class="col-md-12" style="width: 11.11%;"><h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';">32</h1></div><div class="col-md-12" style="width: 11.11%;"><h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';">16</h1></div><div class="col-md-12" style="width: 11.11%;"><h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';">8</h1></div><div class="col-md-12" style="width: 11.11%;"><h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';">4</h1></div><div class="col-md-12" style="width: 11.11%;"><h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';">2</h1></div><div class="col-md-12" style="width: 11.11%;"><h1 style="text-align: center;font-family: 'DSEG7 Classic Regular';">1</h1></div></div><div class="row"><div class="col-md-12" style="width: 11.11%;margin-top: 10px;text-align: center;margin-bottom: 10px;"><button class="btn btn-primary" id="swt256" type="button" style="margin-top: 10px;text-align: center;margin-bottom: 10px;font-family: 'Unicode IEC Symbols';" onclick="changeClass256()">⏼</button></div><div class="col-md-12" style="width: 11.11%;margin-top: 10px;text-align: center;margin-bottom: 10px;"><button class="btn btn-primary" id="swt128" type="button" style="margin-top: 10px;text-align: center;margin-bottom: 10px;font-family: 'Unicode IEC Symbols';" onclick="changeClass128()">⏼<br></button></div><div class="col-md-12" style="width: 11.11%;margin-top: 10px;text-align: center;margin-bottom: 10px;" onclick="onclick"><button class="btn btn-primary" id="swt64" type="button" style="margin-top: 10px;text-align: center;margin-bottom: 10px;font-family: 'Unicode IEC Symbols';" onclick="changeClass64()">⏼<br></button></div><div class="col-md-12" style="width: 11.11%;margin-top: 10px;text-align: center;margin-bottom: 10px;"><button class="btn btn-primary" id="swt32" type="button" style="margin-top: 10px;text-align: center;margin-bottom: 10px;font-family: 'Unicode IEC Symbols';" onclick="changeClass32()">⏼<br></button></div><div class="col-md-12" style="width: 11.11%;margin-top: 10px;text-align: center;margin-bottom: 10px;"><button class="btn btn-primary" id="swt16" type="button" style="margin-top: 10px;text-align: center;margin-bottom: 10px;font-family: 'Unicode IEC Symbols';" onclick="changeClass16()">⏼<br></button></div><div class="col-md-12" style="width: 11.11%;margin-top: 10px;text-align: center;margin-bottom: 10px;"><button class="btn btn-primary" id="swt8" type="button" style="margin-top: 10px;text-align: center;margin-bottom: 10px;font-family: 'Unicode IEC Symbols';" onclick="changeClass8()">⏼<br></button></div><div class="col-md-12" style="width: 11.11%;margin-top: 10px;text-align: center;margin-bottom: 10px;"><button class="btn btn-primary" id="swt4" type="button" style="margin-top: 10px;text-align: center;margin-bottom: 10px;font-family: 'Unicode IEC Symbols';" onclick="changeClass4()">⏼<br></button></div><div class="col-md-12" style="width: 11.11%;margin-top: 10px;text-align: center;margin-bottom: 10px;"><button class="btn btn-primary" id="swt2" type="button" style="margin-top: 10px;text-align: center;margin-bottom: 10px;font-family: 'Unicode IEC Symbols';" onclick="changeClass2()">⏼<br></button></div><div class="col-md-12" style="width: 11.11%;margin-top: 10px;text-align: center;margin-bottom: 10px;"><button class="btn btn-primary" id="swt1" type="button" style="margin-top: 10px;text-align: center;margin-bottom: 10px;font-family: 'Unicode IEC Symbols';" onclick="changeClass1()">⏼<br></button></div></div></div><!-- End: Box Sim --><footer></footer><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script></body></html> |