diff --git a/index.html b/index.html
index 76ca4e6..e4d665c 100644
--- a/index.html
+++ b/index.html
@@ -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) {
