romans/index.html

469 lines
12 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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) || roma == a2r10i(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 a2r10i(n) {
var roman = '';
roman += 'M'.repeat(n / 1000); n %= 1000;
roman += 'D'.repeat(n / 500); n %= 500;
roman += 'C'.repeat(n / 100); n %= 100;
roman += 'L'.repeat(n / 50); n %= 50;
roman += 'X'.repeat(n / 10); n %= 10;
roman += 'V'.repeat(n / 5); n %= 5;
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 "r10i": return a2r10i(arab);
case "r8": return a2r8(arab);
}
} else return "...";
}
function updatea2r() {
var r10 = a2r(document.getElementById("arin").value, "r10");
var r10i = a2r(document.getElementById("arin").value, "r10i");
var resr10 = r10;
if (r10 != r10i) resr10 += "<br><font style='color: gray;'>" + r10i +
"</font>";
document.getElementById("outr10").innerHTML = resr10;
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>";
var r10 = a2r10(num);
var r10i = a2r10i(num);
restab += "<td align=left>" + r10;
if (r10 != r10i)
restab += "<font style='color: gray;'> " + r10i + "</font>";
restab += "</td></tr>";
}
restab += "</table>";
document.getElementById("allnum").innerHTML = restab;
break;
case "roman8":
var restab = "<p align=center>octal coincidence table</p>";
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 r8 = a2r8(num);
restab += "<tr><td align=right>" + num + "</td>";
restab += "<td align=center style='background: #112222;'>" +
r8 + "</td>";
restab += "<td align=left>" + r2a(r8, "r10") + "</td></tr>";
}
restab += "</table>";
document.getElementById("allnum").innerHTML = restab;
break;
case "roman10":
var restab = "<p align=center>decimal coincidence table</p>";
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 r10 = a2r10(num);
var r10i = a2r10i(num);
restab += "<tr><td align=right>" + num + "</td>";
restab += "<td align=center style='background: #112222;'>" + r10;
if (r10 != r10i)
restab += "<font style='color: gray;'> " + r10i + "</font>";
restab += "</td>";
var coinc = r2a(r10, "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="DCLXVI"><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>