zlax/romans
zlax
/
romans
1
0
Fork 0
Code Issues Pull Requests Releases Activity

add listings

This commit is contained in:
ivan 2023-03-13 15:43:31 +03:00
parent 2921ef2d46
commit 60545ee3ed
1 changed files with 113 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
index.html
View File

@ -2,16 +2,17 @@
<html xmlns="http://www.w3.org/1999/xhtml"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> <head>
<!-- https://gitlab.com/zlax/romans ancient roman numerals --> <!-- https://gitlab.com/zlax/romans ancient roman numerals -->
<!-- background gif by Erica Anderson
https://ericaofanderson.tumblr.com/post/679984955933261824 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ancient roman numerals</title> <title>ancient roman numerals</title>
<style type="text/css"> <style type="text/css">
body { body {
background: url(dynborder.gif) no-repeat center center fixed #000; background: #000;
color: white; color: white;
} }
.bodyagif {
background: url(dynborder.gif) no-repeat center center fixed #000;
}
.columns { .columns {
width: 100%; width: 100%;
display: table; display: table;
@ -79,15 +80,19 @@ body {
font-size: 2rem; font-size: 2rem;
color: white; color: white;
} }
.popupvisible {
visibility: visible;
}
.helps img { .helps img {
width: 22%; width: 22%;
} }
.helpxv img { .helpxv img {
width: 44%; width: 44%;
} }
.allnumtab {
margin: auto;
}
.allnumtab td {
padding: 1px;
border: 1px solid #2a3f42;
}
.butt { .butt {
text-align: center; text-align: center;
position: fixed; position: fixed;
@ -96,6 +101,15 @@ body {
display: block; display: block;
z-index: 5; z-index: 5;
} }
.fulllist {
visibility: hidden;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
</style> </style>
<script type="text/javascript"> <script type="text/javascript">
@ -158,7 +172,7 @@ function r2a8(n) {
} }
function a2r10(n) { function a2r10(n) {
let roman = ''; var roman = '';
roman += 'M'.repeat(n / 1000); n %= 1000; roman += 'M'.repeat(n / 1000); n %= 1000;
roman += 'CM'.repeat(n / 900); n %= 900; roman += 'CM'.repeat(n / 900); n %= 900;
roman += 'D'.repeat(n / 500); n %= 500; roman += 'D'.repeat(n / 500); n %= 500;
@ -176,7 +190,7 @@ function a2r10(n) {
} }
function a2r8(n) { function a2r8(n) {
let roman = ''; var roman = '';
roman += 'M'.repeat(n / 512); n %= 512; roman += 'M'.repeat(n / 512); n %= 512;
roman += 'D'.repeat(n / 256); n %= 256; roman += 'D'.repeat(n / 256); n %= 256;
roman += 'C'.repeat(n / 64); n %= 64; roman += 'C'.repeat(n / 64); n %= 64;
@ -219,11 +233,11 @@ function bgPopupCheck(event) {
function fpopup(type) { function fpopup(type) {
var fpop = document.getElementById("pop").classList; var fpop = document.getElementById("pop").classList;
if (type == "hide") { if (type == "hide") {
fpop.remove("popupvisible"); fpop.remove("visible");
document.removeEventListener('click', bgPopupCheck); document.removeEventListener('click', bgPopupCheck);
} else if (type == "help") { } else if (type == "help") {
fpop.toggle("popupvisible"); fpop.toggle("visible");
if (fpop.contains("popupvisible")) { if (fpop.contains("visible")) {
document.addEventListener('click', bgPopupCheck); document.addEventListener('click', bgPopupCheck);
} else { } else {
document.removeEventListener('click', bgPopupCheck); document.removeEventListener('click', bgPopupCheck);
@ -231,11 +245,94 @@ function fpopup(type) {
} }
} }
function fulltable(type) {
switch(type) {
case "arabic":
var restab = "<p align=center>sequence table</p>";
restab += "<table class='allnumtab'><tr><td align=right>octal " +
"roman</td><td align=center>arabic</td><td align=left>" +
"decimal roman</td>";
var num;
for (num = 1; num < 4000; num++) {
restab += "<tr><td align=right>" + a2r8(num) + "</td>";
restab += "<td align=center style='background: #112222;'>" + num +
"</td>";
restab += "<td align=left>" + a2r10(num) + "</td></tr>";
}
restab += "</table>";
document.getElementById("allnum").innerHTML = restab;
break;
case "roman8":
var restab = "<p align=center>octal coincidence table</p>";
document.getElementById("allnum").innerHTML = restab;
restab += "<table class='allnumtab'><tr><td align=right>arabic" +
"</td><td align=center>octal roman</td><td align=left>" +
"decimal roman value</td>";
var num;
for (num = 1; num < 4000; num++) {
var a2r8num = a2r8(num);
restab += "<tr><td align=right>" + num + "</td>";
restab += "<td align=center style='background: #112222;'>" +
a2r8num + "</td>";
restab += "<td align=left>" + r2a(a2r8num, "r10") + "</td></tr>";
}
restab += "</table>";
document.getElementById("allnum").innerHTML = restab;
break;
case "roman10":
var restab = "<p align=center>decimal coincidence table</p>";
document.getElementById("allnum").innerHTML = restab;
restab += "<table class='allnumtab'><tr><td align=right>arabic" +
"</td><td align=center>decimal roman</td><td align=left>" +
"octal roman value</td>";
var num;
for (num = 1; num < 4000; num++) {
var a2r10num = a2r10(num);
restab += "<tr><td align=right>" + num + "</td>";
restab += "<td align=center style='background: #112222;'>" +
a2r10num + "</td>";
var coinc = r2a(a2r10num, "r8");
if (coinc == "...") restab += "<td></td></tr>";
else restab += "<td align=left>" + coinc + "</td></tr>";
}
restab += "</table>";
document.getElementById("allnum").innerHTML = restab;
break;
}
}
function chbg() {
currscr++;
if (currscr > 3) currscr = 0;
switch(currscr) {
case 0:
document.getElementById("allnum").innerHTML = "";
document.getElementById("bod").classList.toggle("bodyagif");
document.getElementById("conver").classList.toggle("invisible");
document.getElementById("allnum").classList.toggle("visible");
break;
case 1:
fulltable("arabic");
document.getElementById("bod").classList.toggle("bodyagif");
document.getElementById("conver").classList.toggle("invisible");
document.getElementById("allnum").classList.toggle("visible");
break;
case 2:
fulltable("roman8");
break;
case 3:
fulltable("roman10");
break;
}
}
</script> </script>
</head> </head>
<body> <body id="bod" class="bodyagif">
<div class="columns"> <div id="allnum" class="fulllist"></div>
<div id="conver" class="columns">
<div class="column leftc"> <div class="column leftc">
<table class="inbloc"> <table class="inbloc">
<tr> <tr>
@ -315,10 +412,13 @@ function fpopup(type) {
<div id="buttbl" class="butt"> <div id="buttbl" class="butt">
<input type="button" onclick="fpopup('help');" value="?" <input type="button" onclick="fpopup('help');" value="?"
style="font-size: 2em;"/> style="font-size: 2em;"/>
<input type="button" onclick="chbg();" value="*"
style="font-size: 2em;"/>
</div> </div>
<script type="text/javascript"> <script type="text/javascript">
var currscr = 0;
var r=''; var r='';
document.getElementById('roin').onkeyup = (function() { document.getElementById('roin').onkeyup = (function() {
return function(k) { return function(k) {