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">
<head>
<!-- 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">
<title>ancient roman numerals</title>
<style type="text/css">
body {
background: url(dynborder.gif) no-repeat center center fixed #000;
background: #000;
color: white;
}
.bodyagif {
background: url(dynborder.gif) no-repeat center center fixed #000;
}
.columns {
width: 100%;
display: table;
@ -79,15 +80,19 @@ body {
font-size: 2rem;
color: white;
}
.popupvisible {
visibility: visible;
}
.helps img {
width: 22%;
}
.helpxv img {
width: 44%;
}
.allnumtab {
margin: auto;
}
.allnumtab td {
padding: 1px;
border: 1px solid #2a3f42;
}
.butt {
text-align: center;
position: fixed;
@ -96,6 +101,15 @@ body {
display: block;
z-index: 5;
}
.fulllist {
visibility: hidden;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
</style>
<script type="text/javascript">
@ -158,7 +172,7 @@ function r2a8(n) {
}
function a2r10(n) {
let roman = '';
var roman = '';
roman += 'M'.repeat(n / 1000); n %= 1000;
roman += 'CM'.repeat(n / 900); n %= 900;
roman += 'D'.repeat(n / 500); n %= 500;
@ -176,7 +190,7 @@ function a2r10(n) {
}
function a2r8(n) {
let roman = '';
var roman = '';
roman += 'M'.repeat(n / 512); n %= 512;
roman += 'D'.repeat(n / 256); n %= 256;
roman += 'C'.repeat(n / 64); n %= 64;
@ -219,11 +233,11 @@ function bgPopupCheck(event) {
function fpopup(type) {
var fpop = document.getElementById("pop").classList;
if (type == "hide") {
fpop.remove("popupvisible");
fpop.remove("visible");
document.removeEventListener('click', bgPopupCheck);
} else if (type == "help") {
fpop.toggle("popupvisible");
if (fpop.contains("popupvisible")) {
fpop.toggle("visible");
if (fpop.contains("visible")) {
document.addEventListener('click', bgPopupCheck);
} else {
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>
</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">
<table class="inbloc">
<tr>
@ -315,10 +412,13 @@ function fpopup(type) {
<div id="buttbl" class="butt">
<input type="button" onclick="fpopup('help');" value="?"
style="font-size: 2em;"/>
<input type="button" onclick="chbg();" value="*"
style="font-size: 2em;"/>
</div>
<script type="text/javascript">
var currscr = 0;
var r='';
document.getElementById('roin').onkeyup = (function() {
return function(k) {