<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- https://gitlab.com/zlax/romans ancient roman numerals -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ancient roman numerals</title>
<style type="text/css">
body {
background: #000;
color: white;
}
.bodyagif {
background: url(dynborder.gif) no-repeat center center fixed #000;
}
.columns {
width: 100%;
display: table;
clear: both;
}
.column {
float: left;
overflow: hidden;
text-align: center;
}
.leftc {
width: 46%;
padding: 2%;
}
.rightc {
width: 44%;
padding: 3%;
}
.inbloc {
position: absolute;
top: 0;
bottom: 0;
margin: auto;
height: 66%;
max-width: 44%;
}
.inp {
font-size: 2rem;
}
.img {
filter: brightness(25%);
max-width: 50%;
}
.imgcontainer {
position: relative;
text-align: center;
color: white;
}
.imgcenteredtext {
font-size: 3rem;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-text-stroke: 1px gray;
font-family: sans; color: white;
}
.popup {
margin: 0 1em 1em 0;
max-width: 80%;
border: #2a3f42 5px groove;
padding: 1em;
backdrop-filter: blur(5px) brightness(95%) contrast(95%) grayscale(50%);
text-shadow: -1px 0 gray, 0 1px gray, 1px 0 gray, 0 -1px gray;
position: absolute;
top: 10%;
right: 0;
bottom: 10%;
left: 0;
margin: auto;
visibility: hidden;
text-align: center;
}
.popin a {
font-size: 2rem;
color: white;
}
.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;
right: 50%;
bottom: 1%;
display: block;
z-index: 5;
}
.fulllist {
visibility: hidden;
}
.visible {
visibility: visible;
}
.invisible {
visibility: hidden;
}
</style>
<script type="text/javascript">
function r2a(roma, type) {
if (roma == null || roma == "")
return "...";
switch (type) {
case "r10": var arab = r2a10(roma.charAt(0)); break;
case "r8": var arab = r2a8(roma.charAt(0)); break;
}
var prev, curr;
for (var i = 1; i < roma.length; i++) {
switch (type) {
case "r10":
curr = r2a10(roma.charAt(i));
prev = r2a10(roma.charAt(i-1));
break;
case "r8":
curr = r2a8(roma.charAt(i));
prev = r2a8(roma.charAt(i-1));
break;
}
if (curr <= prev) arab += curr;
else arab = arab - prev * 2 + curr;
}
switch (type) {
case "r10": if (roma == a2r10(arab))
return arab;
case "r8": if (roma == a2r8(arab))
return arab;
}
return "...";
}
function r2a10(n) {
switch (n) {
case 'I': return 1;
case 'V': return 5;
case 'X': return 10;
case 'L': return 50;
case 'C': return 100;
case 'D': return 500;
case 'M': return 1000;
default: return -1;
}
}
function r2a8(n) {
switch (n) {
case 'I': return 1;
case 'V': return 4;
case 'X': return 8;
case 'L': return 32;
case 'C': return 64;
case 'D': return 256;
case 'M': return 512;
default: return -1;
}
}
function a2r10(n) {
var roman = '';
roman += 'M'.repeat(n / 1000); n %= 1000;
roman += 'CM'.repeat(n / 900); n %= 900;
roman += 'D'.repeat(n / 500); n %= 500;
roman += 'CD'.repeat(n / 400); n %= 400;
roman += 'C'.repeat(n / 100); n %= 100;
roman += 'XC'.repeat(n / 90); n %= 90;
roman += 'L'.repeat(n / 50); n %= 50;
roman += 'XL'.repeat(n / 40); n %= 40;
roman += 'X'.repeat(n / 10); n %= 10;
roman += 'IX'.repeat(n / 9); n %= 9;
roman += 'V'.repeat(n / 5); n %= 5;
roman += 'IV'.repeat(n / 4); n %= 4;
roman += 'I'.repeat(n);
return roman;
}
function a2r8(n) {
var roman = '';
roman += 'M'.repeat(n / 512); n %= 512;
roman += 'D'.repeat(n / 256); n %= 256;
roman += 'C'.repeat(n / 64); n %= 64;
roman += 'L'.repeat(n / 32); n %= 32;
roman += 'X'.repeat(n / 8); n %= 8;
roman += 'V'.repeat(n / 4); n %= 4;
roman += 'I'.repeat(n);
return roman;
}
function a2r(arab, type) {
if (arab > 0 && arab < 4000) {
switch (type) {
case "r10": return a2r10(arab);
case "r8": return a2r8(arab);
}
} else return "...";
}
function updatea2r() {
document.getElementById("outr10").innerHTML =
a2r(document.getElementById("arin").value, "r10");
document.getElementById("outr8").innerHTML =
a2r(document.getElementById("arin").value, "r8");
}
function updater2a() {
document.getElementById("outa10").innerHTML =
r2a(document.getElementById("roin").value.toUpperCase(), "r10");
document.getElementById("outa8").innerHTML =
r2a(document.getElementById("roin").value.toUpperCase(), "r8");
}
function bgPopupCheck(event) {
if (!document.getElementById('pop').contains(event.target)
&& !document.getElementById('buttbl').contains(event.target))
fpopup("hide");
}
function fpopup(type) {
var fpop = document.getElementById("pop").classList;
if (type == "hide") {
fpop.remove("visible");
document.removeEventListener('click', bgPopupCheck);
} else if (type == "help") {
fpop.toggle("visible");
if (fpop.contains("visible")) {
document.addEventListener('click', bgPopupCheck);
} else {
document.removeEventListener('click', bgPopupCheck);
}
}
}
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 id="bod" class="bodyagif">
<div id="allnum" class="fulllist"></div>
<div id="conver" class="columns">
<div class="column leftc">
<table class="inbloc">
<tr>
<td>
<input id="arin" class="inp" onchange="updatea2r();"
size="5" type="number" step="1" min="1" max="3999"
placeholder="1234567890" value="5"><br>
</td>
</tr>
<tr>
<td>
<div class="imgcontainer">
<img src="r8.png" class="img">
<div class="imgcenteredtext" id="outr8"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="imgcontainer">
<img src="r10.png" class="img">
<div class="imgcenteredtext" id="outr10"></div>
</div>
</td>
</tr>
</table>
</div>
<div class="column rightc">
<table class="inbloc">
<tr>
<td>
<input id="roin" class="inp" onchange="updater2a();"
size="7" type="text" style="text-transform: uppercase;"
name="roman" maxlength="16" placeholder="MDCLXVI"
value="V"><br>
</td>
</tr>
<tr>
<td>
<div class="imgcontainer">
<img src="r8.png" class="img">
<div class="imgcenteredtext" id="outa8"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="imgcontainer">
<img src="r10.png" class="img">
<div class="imgcenteredtext" id="outa10"></div>
</div>
</td>
</tr>
</table>
</div>
</div>
<div id="pop" class="popup">
<div class="popin">
<div class="helpxv">
<a href="https://commons.wikimedia.org/wiki/File:Pompa_circensis_Circus_Maximus.jpg">
<img src="xv.png"></a>
</div>
<div>
<a href="https://scan1707.blogspot.com/2019/08/blog-post.html">
римский счёт – ключ к тайне хронологии</a>
</div>
<div class="helps">
<a href="r8i.png"><img src="r8.png"></a> <a href="r10i.png">
<img src="r10.png"></a>
</div>
<div>
<a href="https://chispa1707.blogspot.com/2020/04/the-roman-numeration-key-to-chronology.html">
the roman numeration - a key to the chronology secret</a>
</div>
</div>
</div>
<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) {
if (this.value == "") return this.value;
var s = /^[IVXLCDMivxlcdm]/.test(this.value.slice(-1));
a = k.which || k.keyCode;
if (s == true) {
r = this.value+this.value.slice(-1);
updater2a();
return r;
} else
r.slice(-1);
this.value = r;
updater2a();
}
})();
updatea2r();
updater2a();
</script>
</body>
</html>