<html>
<head>
<title>Diagon Alley - RJM Programming - January, 2026</title>
<meta id=”myviewport” name=”viewport” content=”width=device-width, initial-scale=0.5, minimum-scale=0.25, maximum-scale=8, user-scalable=yes” />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style id=mystyle>

body { margin: 0; box-sizing: border-box; }

td { vertical-align: top; }

input[type="text"] { width: 55px; }
input[type="number"] { width: 55px; }

#xtl { background-color: rgba(255,0,0,0.0); }
#xbr { background-color: rgba(0,255,0,0.5); }

.defbody {
overflow: hidden;
height: 100%;
}

.container {
width: 800px;
height: 800px;
border: 2px solid black;
background-color: silver;
text-align: center;
/* display:flex;
min-width:0; */
position: relative; /* Essential for positioning the child element */
text-overflow: clip; /* overflow: hidden; */ /* Keeps the rotated text inside the visible box */
overflow-Y: hidden;
}

.rotated-text-bl-to-tr {
position: absolute;
/* Position the center of the element roughly at the center of the bottom-left */
bottom: 0;
left: 0;
/* Adjust origin of rotation to the bottom left corner */
transform-origin: bottom left !important;
/* Rotate 45 degrees clockwise */
transform: rotate(-45deg) !important;

/* Optional styling */
/* padding: 10px; */
// background-color: lightblue;
margin: 0; /* Remove default paragraph margins */
white-space: nowrap; /* Prevents text from wrapping onto multiple lines */
}

.rotated-text-tr-to-bl {
position: absolute;
/* Position the center of the element roughly at the center of the bottom-left */
top: 0;
right: 0;
/* Adjust origin of rotation to the bottom left corner */
transform-origin: bottom left !important;
/* Rotate 45 degrees clockwise */
transform: rotate(135deg) !important;

border:1px solid red;

/* Optional styling */
/* padding: 10px; */
// background-color: lightblue;
margin: 0; /* Remove default paragraph margins */
white-space: nowrap; /* Prevents text from wrapping onto multiple lines */
}


.rotated-text-tl-to-br {
position: absolute;
/* Position the center of the element roughly at the center of the bottom-left */
top: 0;
left: 0;
/* Adjust origin of rotation to the bottom left corner */
transform-origin: top left !important;
/* Rotate 45 degrees clockwise */
transform: rotate(45deg) !important;

/* Optional styling */
/* padding: 10px; */
// background-color: lightgreen;
margin: 0; /* Remove default paragraph margins */
white-space: nowrap; /* Prevents text from wrapping onto multiple lines */
}

</style>
<script type=text/javascript>

var charsare='⚊';
//charsare='❘';
var fs='96px';
var fttd='sub';
var ftbu='sup';
var rownum=1;
var cellnum=1;
var curcellnum=1;
var nextnum=2;
var nextto=null;
var ten=8.0;
var ourtwo=1;

var sd='', sdtwo='';
var oktolook=true;

var onets=[], twots=[];
var tconto=null, oconto=null, cconto=null;
var trecto=null, orecto=null;
var mtopt=0, mleftt=0;
var mtopo=0, mlefto=0;
var ct='', cl='';
var glinh='';
var lconto=null, rconto=null;

var ft=fttd;
var repeats=8;

// Thanks to https://stackoverflow.com/questions/4770025/how-to-disable-scrolling-temporarily
// left: 37, up: 38, right: 39, down: 40,
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
var keys = {37: 1, 38: 1, 39: 1, 40: 1};

function preventDefault(e) {
e.preventDefault();
}

function preventDefaultForScrollKeys(e) {
if (keys[e.keyCode]) {
preventDefault(e);
return false;
}
}

// modern Chrome requires { passive: false } when adding event
var supportsPassive = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, 'passive', {
get: function () { supportsPassive = true; }
}));
} catch(e) {}

var wheelOpt = supportsPassive ? { passive: false } : false;
var wheelEvent = 'onwheel' in document.createElement('div') ? 'wheel' : 'mousewheel';

// call this to Disable
function disableScroll() {
window.addEventListener('DOMMouseScroll', preventDefault, false); // older FF
window.addEventListener(wheelEvent, preventDefault, wheelOpt); // modern desktop
window.addEventListener('touchmove', preventDefault, wheelOpt); // mobile
window.addEventListener('keydown', preventDefaultForScrollKeys, false);
}

// call this to Enable
function enableScroll() {
document.body.className='nondefbody';
document.getElementById('bsquare').style.visibility='visible';
document.getElementById('bclock').style.visibility='visible';
window.removeEventListener('DOMMouseScroll', preventDefault, false);
window.removeEventListener(wheelEvent, preventDefault, wheelOpt);
window.removeEventListener('touchmove', preventDefault, wheelOpt);
window.removeEventListener('keydown', preventDefaultForScrollKeys, false);
}

function ost(incb) {
var ret=incb;
if (incb == ' mt') {
ret='" style="display:inline-block;transform:translate(-10px,-20px);font-size:' + fs + ';';
}
return ret;
}

function pinkize(evt) {
}

function lgc(otb) {
var wasdeg='', maxgoes=100, goes=0, thisnum=-1, endone='</sup>', cursu='';
var tds=document.getElementsByTagName('textarea');
for (var itds=0; itds<tds.length; itds++) {
if (('' + tds[itds].id).indexOf('taecll') == 0) {
goes=0;
if (tds[itds].value.indexOf('<') == 0) {
if (thisnum == -1) {
thisnum=eval('' + (tds[itds].value + '~').replace('</sub>~','').replace('</sup>~','').split('</su').length);
endone='</sup>';
if ((tds[itds].value + '~').replace('</sub>~','').replace('</sup>~','').indexOf('</sub>') != -1) { endone='</sub>'; }
}
maxgoes=eval(4 + eval('' + otb.value));
while (('' + thisnum) != '' && ('' + thisnum) != ('' + otb.value) && goes < maxgoes) {
if (thisnum > eval('' + otb.value)) {
//alert('remove');
cursu=endone.replace('/','').replace('>','') + (tds[itds].value + '~').replace('</sub>~','').replace('</sup>~','').split(endone)[0].split(endone.replace('/','').replace('>',''))[eval(-1 + (tds[itds].value + '~').replace('</sub>~','').replace('</sup>~','').split(endone)[0].split(endone.replace('/','').replace('>','')).length)] + endone;
//alert(cursu);
tds[itds].value=tds[itds].value.replace(cursu, '');
thisnum=eval('' + (tds[itds].value + '~').replace('</sub>~','').replace('</sup>~','').split('</su').length);
} else {
//alert('add');
cursu=endone.replace('/','').replace('>','') + (tds[itds].value + '~').replace('</sub>~','').replace('</sup>~','').split(endone)[0].split(endone.replace('/','').replace('>',''))[eval(-1 + (tds[itds].value + '~').replace('</sub>~','').replace('</sup>~','').split(endone)[0].split(endone.replace('/','').replace('>','')).length)] + endone;
//alert(cursu);
tds[itds].value=tds[itds].value.replace(cursu, cursu.replace(endone,'') + cursu + endone);
thisnum=eval('' + (tds[itds].value + '~').replace('</sub>~','').replace('</sup>~','').split('</su').length);
}
goes++;
}
if (document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerText.replace('+','') != '') {
document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerHTML=tds[itds].value;
}
thisnum=-1;
}
}
}
tds=document.getElementsByTagName('td');
sdfs(tds[0].innerHTML, tds[ourtwo].innerHTML);
}

function nonp(otb) {
var wasdeg='', maxgoes=100, goes=0;
var tds=document.getElementsByTagName('textarea');
for (var itds=0; itds<tds.length; itds++) {
if (('' + tds[itds].id).indexOf('taecll') == 0) {
goes=0;
if (tds[itds].value.indexOf('<') == 0) {
if (wasdeg == '') { wasdeg=tds[itds].value.split('<')[1].split(' ')[0].split('>')[0]; }
while (tds[itds].value.indexOf('</' + wasdeg + '>') != -1 && wasdeg != '' && wasdeg != otb.value && goes < maxgoes) {
tds[itds].value=tds[itds].value.replace('<' + wasdeg + ' ', '<' + otb.value + ' ').replace('</' + wasdeg + '>', '</' + otb.value + '>').replace(' title="' + wasdeg + '"', ' title="' + otb.value + '"');
goes++;
}
if (document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerText.replace('+','') != '' && wasdeg != '') {
document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerHTML=tds[itds].value;
}
}
}
}
tds=document.getElementsByTagName('td');
sdfs(tds[0].innerHTML, tds[ourtwo].innerHTML);
}

function trxc(otb) {
var wasdeg='', maxgoes=100, goes=0;
var tds=document.getElementsByTagName('textarea');
for (var itds=0; itds<tds.length; itds++) {
if (('' + tds[itds].id).indexOf('taecll') == 0) {
goes=0;
if (tds[itds].value.indexOf('translate(') != -1) {
if (wasdeg == '') { wasdeg=tds[itds].value.split('translate(')[1].split('px')[0]; }
while (tds[itds].value.indexOf('translate(' + wasdeg + 'px') != -1 && wasdeg != otb.value && wasdeg != '' && goes < maxgoes) {
tds[itds].value=tds[itds].value.replace('translate(' + wasdeg + 'px', 'translate(' + otb.value + 'px');
goes++;
}
if (document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerText.replace('+','') != '' && wasdeg != '') {
document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerHTML=tds[itds].value;
}
}
}
}
tds=document.getElementsByTagName('td');
sdfs(tds[0].innerHTML, tds[ourtwo].innerHTML);
}

function tryc(otb) {
var wasdeg='', maxgoes=100, goes=0;
var tds=document.getElementsByTagName('textarea');
for (var itds=0; itds<tds.length; itds++) {
if (('' + tds[itds].id).indexOf('taecll') == 0) {
goes=0;
if (tds[itds].value.indexOf('translate(') != -1) {
if (wasdeg == '') { wasdeg=tds[itds].value.split('translate(')[1].split(',')[1].split('px')[0]; }
if ((wasdeg.indexOf('-') != -1 && otb.value.indexOf('-') != -1) || (wasdeg.indexOf('-') == -1 && otb.value.indexOf('-') == -1)) {
while (tds[itds].value.indexOf(',' + wasdeg + 'px') != -1 && wasdeg != otb.value && wasdeg != '' && goes < maxgoes) {
tds[itds].value=tds[itds].value.replace(',' + wasdeg + 'px', ',' + otb.value + 'px');
goes++;
}
if (document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerText.replace('+','') != '' && wasdeg != '') {
document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerHTML=tds[itds].value;
}
} else {
wasdeg='';
}
}
}
}
tds=document.getElementsByTagName('td');
sdfs(tds[0].innerHTML, tds[ourtwo].innerHTML);
}



function chrc(otb) {
var wasdeg='', maxgoes=100, goes=0;
var tds=document.getElementsByTagName('textarea');
for (var itds=0; itds<tds.length; itds++) {
if (('' + tds[itds].id).indexOf('taecll') == 0) {
goes=0;
if (tds[itds].value.indexOf('</su') != -1) {
if (wasdeg == '') { wasdeg=tds[itds].value.split('</su')[0].split('>')[eval(-1 + tds[itds].value.split('</su')[0].split('>').length)]; }
while (tds[itds].value.indexOf('>' + wasdeg + '<') != -1 && wasdeg != otb.value && wasdeg != '' && goes < maxgoes) {
tds[itds].value=tds[itds].value.replace('>' + wasdeg + '<', '>' + otb.value + '<');
goes++;
}
if (document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerText.replace('+','') != '' && wasdeg != '') {
document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerHTML=tds[itds].value;
}
}
}
}
tds=document.getElementsByTagName('td');
sdfs(tds[0].innerHTML, tds[ourtwo].innerHTML);
}

function fsnc(otb) {
var wasdeg='', maxgoes=100, goes=0;
var tds=document.getElementsByTagName('textarea');
for (var itds=0; itds<tds.length; itds++) {
if (('' + tds[itds].id).indexOf('taecll') == 0) {
goes=0;
if (tds[itds].value.indexOf('deg)') != -1) {
if (wasdeg == '') { wasdeg=tds[itds].value.split('font-size:')[1].split('px;')[0]; }
while (tds[itds].value.indexOf('font-size:' + wasdeg + 'px;') != -1 && wasdeg != otb.value && wasdeg != '' && goes < maxgoes) {
tds[itds].value=tds[itds].value.replace('font-size:' + wasdeg + 'px;', 'font-size:' + otb.value + 'px;');
goes++;
}
if (document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerText.replace('+','') != '' && wasdeg != '') {
document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerHTML=tds[itds].value;
}
}
}
}
tds=document.getElementsByTagName('td');
sdfs(tds[0].innerHTML, tds[ourtwo].innerHTML);
}

function rotc(otb) {
var wasdeg='', maxgoes=100, goes=0;
var tds=document.getElementsByTagName('textarea');
for (var itds=0; itds<tds.length; itds++) {
if (('' + tds[itds].id).indexOf('taecll') == 0) {
goes=0;
if (tds[itds].value.indexOf('deg)') != -1) {
if (wasdeg == '') { wasdeg=tds[itds].value.split('deg)')[0].split('(')[eval(-1 + tds[itds].value.split('deg)')[0].split('(').length)].replace('-',''); }
while ((tds[itds].value.indexOf('(-' + wasdeg + 'deg') != -1 || tds[itds].value.indexOf('(' + wasdeg + 'deg') != -1) && wasdeg != otb.value && wasdeg != '' && goes < maxgoes) {
if (tds[itds].value.indexOf('</sub>') != -1) {
tds[itds].value=tds[itds].value.replace('(' + wasdeg + 'deg', '(' + Math.abs(otb.value) + 'deg').replace('(-' + wasdeg + 'deg', '(-' + Math.abs(otb.value) + 'deg');
} else if (tds[itds].value.indexOf('</sup>') != -1) {
tds[itds].value=tds[itds].value.replace('(' + wasdeg + 'deg', '(-' + Math.abs(otb.value) + 'deg').replace('(-' + wasdeg + 'deg', '(-' + Math.abs(otb.value) + 'deg');
} else {
tds[itds].value=tds[itds].value.replace('(' + wasdeg + 'deg', '(' + Math.abs(otb.value) + 'deg').replace('(-' + wasdeg + 'deg', '(-' + Math.abs(otb.value) + 'deg');
}
goes++;
}
if (document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerText.replace('+','') != '' && wasdeg != '') {
document.getElementById(('' + tds[itds].id).replace('taecll','cell')).innerHTML=tds[itds].value;
}
}
}
}
tds=document.getElementsByTagName('td');
sdfs(tds[0].innerHTML, tds[ourtwo].innerHTML);
}

function tait(tao) {
document.getElementById(tao.id.replace('taecll','cell')).innerHTML=tao.value;
var tds=document.getElementsByTagName('td');
sdfs(tds[0].innerHTML, tds[ourtwo].innerHTML);
}

function andthen() {
var tds=document.getElementsByTagName('td');
ourtwo=1;
for (var itds=0; itds<tds.length; itds++) {
if (('' + tds[itds].id).indexOf('cell') == 0) {
if (eval('' + tds[itds].innerText.length) < 7) {
//alert(tds[0].innerHTML.split('rotate(')[1].split('deg')[0]);
var zx=(tds[0].innerHTML.replace(/sub/g,'sup').replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(360 - ten)).replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(360 - ten)).replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(360 - ten)).replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(360 - ten)));
ten=eval(-1 * ten);
ourtwo=itds;
tds[itds].innerHTML=tds[0].innerHTML.replace(' style="',' style="color:blue;margin-top:-256px;').replace(/0001/g,'0002').replace(/sub/g,'sup').replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(ten)).replace(/\,\-20px/g,',32px');
document.getElementById(('' + tds[itds].id).replace('cell','ecll')).innerHTML='<textarea rows=17 cols=80 id=' + ('' + tds[itds].id).replace('cell','taecll') + ' onblur=tait(this); style=width=100%;>' + document.getElementById('cell' + ('0000' + curcellnum).slice(-4)).innerHTML.replace(' style="',' style="color:blue;margin-top:-256px;').replace(/0001/g,'0002').replace(/sub/g,'sup').replace('rotate(' + tds[0].innerHTML.split('rotate(')[1].split('deg')[0],'rotate(' + eval(ten)).replace(/\,\-20px/g,',32px') + '</textarea>';
} else {
tds[itds].innerHTML=tds[itds].innerHTML.replace(/background\-color\:\ pink\;/g, 'background-color: white;').replace(/background\-color\:pink\;/g, 'background-color:white;');
document.getElementById(('' + tds[itds].id).replace('cell','ecll')).innerHTML='<textarea rows=17 cols=80 id=' + ('' + tds[itds].id).replace('cell','taecll') + ' onblur=tait(this); style=width=100%;>' + document.getElementById('cell' + ('0000' + curcellnum).slice(-4)).innerHTML + '</textarea>';
}
}
}
var recto=document.getElementById('fibothone').getBoundingClientRect();
//document.getElementById('fibothtwo').style.position='absolute';
//document.getElementById('fibothtwo').style.left='' + recto.left + 'px';
//document.getElementById('fibothtwo').style.top='' + recto.top + 'px';
//document.getElementById('fibothtwo').style.width='' + recto.width + 'px';
//document.getElementById('fibothtwo').style.height='' + recto.height + 'px';
document.getElementById('ifbothone').srcdoc=maybeclock(tds[0].innerHTML.replace(' style="', ' style="margin-top:0px;margin-left:0px;'));
document.getElementById('ifbothtwo').srcdoc=tds[ourtwo].innerHTML;
recto=document.getElementById('ifbothone').getBoundingClientRect();
document.getElementById('ifbothtwo').style.position='absolute';
document.getElementById('ifbothtwo').style.left='' + recto.left + 'px';
document.getElementById('ifbothtwo').style.top='' + recto.top + 'px';
document.getElementById('ifbothtwo').style.width='' + recto.width + 'px';
document.getElementById('ifbothtwo').style.height='' + recto.height + 'px';
recto=document.getElementById('fibothone').getBoundingClientRect();
document.getElementById('fibothtwo').style.position='absolute';
document.getElementById('fibothtwo').style.left='' + recto.left + 'px';
document.getElementById('fibothtwo').style.top='' + recto.top + 'px';
document.getElementById('fibothtwo').style.width='' + recto.width + 'px';
document.getElementById('fibothtwo').style.height='' + recto.height + 'px';
document.getElementById('fiboththree').style.position='absolute';
document.getElementById('fiboththree').style.left='' + recto.left + 'px';
document.getElementById('fiboththree').style.top='' + recto.top + 'px';
document.getElementById('fiboththree').style.width='' + recto.width + 'px';
document.getElementById('fiboththree').style.height='' + recto.height + 'px';
}

function premaybeclock() {
if (glinh != '') {
//alert('ct=' + ct + ' and glinh=' + glinh);
maybeclock(glinh);
}
}

function minuteang() {
var tss=('' + new Date());
cconto.body.title=tss;
document.getElementById('fiboththree').title=tss;
var th=eval(tss.split(':')[0].split(' ')[eval(-1 + tss.split(':')[0].split(' ').length)] % 12);
var tm=eval(tss.split(':')[1]);
var ts=eval(tss.split(':')[2].split(' ')[0].split('.')[0]);
tm+=eval(ts / 60);
return '' + eval((90 + tm * 6) % 360);
}

function hourang() {
var tss=('' + new Date());
var th=eval(tss.split(':')[0].split(' ')[eval(-1 + tss.split(':')[0].split(' ').length)] % 12);
var tm=eval(tss.split(':')[1]);
var ts=eval(tss.split(':')[2].split(' ')[0].split('.')[0]);
th+=eval(tm / 60);
th+=eval(ts / (60 * 60));
return '' + eval((90 + th * 30) % 360);
}

function maybeclock(linh) {
var absbit='position:absolute;top:350px;left:300px;';
var rotv=linh.split('rotate(')[1].split('deg')[0];
var thisfs=linh.split('font-size:')[1].split('px')[0];
var huh='<br><br><br><br><br><br><br><br><br><br><br><br>';
document.getElementById('fibothone').srcdoc='' + linh.replace('>' + document.getElementById('chars').value + '</su', ' id=lastsu>' + document.getElementById('chars').value + '</su').replace('margin-top:','padding-top:').replace('margin-left:','padding-left:').replace('rotate(' + rotv,'rotate(' + hourang()).replace(' style="', ' style="' + ct + cl + absbit + 'transform-origin:50% 33%;') + '<style> sub:last-of-type { font-weight:bold; color: olive !important; } sup:last-of-type { font-weight:bold; color: olive !important; } </style>'; //.replace(/inline\-block\;/g, 'inline;');
var origlinh=linh;
if (glinh == '') {
glinh=linh.replace('margin-top:','padding-top:').replace('margin-left:','padding-left:');
setInterval(premaybeclock, 5000);
}
while (origlinh.indexOf('font-size:' + thisfs + 'px') != -1) {
origlinh=origlinh.replace('font-size:' + thisfs + 'px', 'font-size:' + eval(-3 + eval('' + thisfs)) + 'px');
}
document.getElementById('fibothtwo').srcdoc='' + origlinh.replace('>' + document.getElementById('chars').value + '</su', ' id=lastsu>' + document.getElementById('chars').value + '</su').replace('margin-top:','padding-top:').replace('margin-left:','padding-left:').replace('rotate(' + rotv,'rotate(' + minuteang()).replace(' style="', ' style="' + absbit + 'text-shadow:-0.5px 0.5px 0.5px #95ff2d;transform-origin:50% 33%;color:rgba(0,0,255,0.4);') + '<style> sub:last-of-type { font-weight:bold; color: pink !important; } sup:last-of-type { font-weight:bold; color: pink !important; } </style>'; // + "<style>.logo { width: 100vw; height: 100vh; position: relative; } .logo__svg { width: 300px; height: 300px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}</style><div class=\"logo\"><svg class=\"logo__svg\"><circle cx=\"50%\" cy=\"50%\" r=\"150\" style=\"fill:rgba(255,0,0,0.6);stroke:white;stroke-width:1;\"/></svg></div>"; //.replace(/inline\-block\;/g, 'inline;');
document.getElementById('fiboththree').srcdoc="<head><title>" + ('' + new Date()) + "</title><style> .logo { width: 100vw; height: 100vh; position: relative; } .logo__svg { width: 312px; height: 312px; position: absolute; top: 47%; left: 49%; transform: translate(-50%, -50%); } </style></head><body id=xbody><div class=\"logo\"><svg class=\"logo__svg\"><circle cx=\"50%\" cy=\"50%\" r=\"155\" style=\"fill:rgba(255,0,0,1);stroke:white;stroke-width:1;\"/></svg></div></body>"; //.replace(/inline\-block\;/g, 'inline;');
return linh;
}

function sdfs(ones,twos) {
document.getElementById('ifbothone').srcdoc=maybeclock(ones.replace(' style="', ' style="margin-top:0px;margin-left:0px;'));
document.getElementById('ifbothtwo').srcdoc=twos;
}

function rit(cis) {
var outcis=cis;
var atend='';
for (var jits=1; jits<repeats; jits++) {
atend+='</' + ft + '>';
outcis+='<' + ft + ' class="ele' + ('0000' + cellnum).slice(-4) + ost(' mt') + '" title=' + ft + '>' + cis;
}
return ' style="font-size:' + fs + ';transform:rotate(' + ten + 'deg); ">' + outcis + atend;
}

function fbt(iois) {
if (iois != null) {
tconto = (iois.contentWindow || iois.contentDocument);
if (tconto != null) {
if (tconto.document) { tconto = tconto.document; }
if (tconto.body != null) {
if (tconto.body.innerHTML.indexOf('</sub>') != -1) {
if (tconto.body.innerHTML.indexOf('<') != -1) {
onets=tconto.getElementsByTagName(tconto.body.innerHTML.replace(/\<br\>/g,'').replace(/\<br\ \/\>/g,'').replace(/\<br\/\>/g,'').split('<')[1].split(' ')[0].split('>')[0]);
}
var subs=tconto.getElementsByTagName('sub');
//alert(subs[eval(-1 + subs.length)].outerHTML);
if (!trecto || 1 == 1) {
if (tconto.getElementById('lastsu')) {
trecto=tconto.getElementById('lastsu').getBoundingClientRect();
} else {
trecto=subs[eval(-1 + subs.length)].getBoundingClientRect();
}
//trecto=subs[0].getBoundingClientRect();
//subs[eval(-1 + subs.length)].style.backgroundColor='olive';
}
}
}
}
}
}


function fbc(iois) {
if (iois != null) {
cconto = (iois.contentWindow || iois.contentDocument);
if (cconto != null) {
if (cconto.document) { cconto = cconto.document; }
if (cconto.body != null) {
cconto.body.title=('' + new Date());
}
}
}
}

function analyze(iois) {
var arecto=null, brecto=null, brecto=null, elesa=[], subsups=[], huh='';
if (!oktolook) { return ''; }
if (iois != null) {
var aconto = (iois.contentWindow || iois.contentDocument);
if (aconto != null) {
if (aconto.document) { aconto = aconto.document; }
if (aconto.body != null) {
elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('<')[2].split(' ')[0].split('>')[0]);
for (var ivb=0; ivb<elesa.length; ivb+=eval(elesa.length / 2)) {
arecto=elesa[ivb].getBoundingClientRect();
if (ivb == 0 && iois.id == 'ifleft') {
subsups=aconto.getElementsByTagName('sub');
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; //'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
//prompt(huh,'one;' + iois.id);
//aconto.body.innerHTML+='<div style="position:absolute;left:' + Math.max(0,arecto.left) + 'px;top:' + brecto.top + 'px;width:' + brecto.right + 'px;height:' + brecto.height + 'px;background-color:rgba(255,0,0,0.5);"></div>';
elesa[ivb].style.left='50px';
elesa[ivb].style.marginTop='75px';
for (var iop=0; iop<15; iop++) {
elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('</sub>','') + subsups[eval(-1 + subsups.length)].outerHTML + '</sub>');
}
lconto=aconto;
lconto.querySelectorAll('sub').forEach(xsub => {
xsub.addEventListener('click', () => {
alert('Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long');
});
});
} else {
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
if (iois.id == 'ifright') {
elesa[ivb].style.left='50px';
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
//prompt(huh,'two;' + iois.id);
}
aconto.getElementById('mycontainer').style.width=aconto.getElementById('mycontainer').style.height; //'' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
//aconto.body.innerHTML+='<div style="position:absolute;left:' + Math.max(0,arecto.left) + 'px;bottom:' + arecto.bottom + 'px;width:' + brecto.right + 'px;height:' + brecto.height + 'px;background-color:rgba(0,255,0,0.5);"></div>';
if (iois.id == 'ifright') {
oktolook=false;
var xtdcrect=null;
if (document.getElementById('ifleft')) {
xtdcrect=document.getElementById('ifleft').getBoundingClientRect();
} else {
xtdcrect=document.getElementById('tdcontainer').getBoundingClientRect();
}
iois.style.top='' + xtdcrect.top + 'px';
iois.style.left='' + xtdcrect.left + 'px';
elesa=aconto.getElementsByTagName(aconto.body.innerHTML.split('<')[2].split(' ')[0].split('>')[0]);
subsups=aconto.getElementsByTagName('su' + aconto.body.innerHTML.split('</su')[1].split('>')[0]);
arecto=elesa[ivb].getBoundingClientRect();
brecto=subsups[0].getBoundingClientRect();
crecto=subsups[eval(-1 + subsups.length)].getBoundingClientRect();
//aconto.getElementById('mycontainer').style.width='' + eval(eval('' + crecto.right) + 0 + eval(0.0 * eval('' + crecto.width))) + 'px';
for (var iozp=0; iozp<15; iozp++) {
elesa[0].innerHTML.replace(subsups[eval(-1 + subsups.length)].outerHTML, subsups[eval(-1 + subsups.length)].outerHTML.replace('</sup>','') + subsups[eval(-1 + subsups.length)].outerHTML + '</sup>');
}
huh='arecto brecto crecto ' + String.fromCharCode(10);
huh+=' left: ' + arecto.left + ' ' + brecto.left + ' ' + crecto.left + ' ' + String.fromCharCode(10);
huh+=' top: ' + arecto.top + ' ' + brecto.top + ' ' + crecto.top + ' ' + String.fromCharCode(10);
huh+=' x: ' + arecto.x + ' ' + brecto.x + ' ' + crecto.x + ' ' + String.fromCharCode(10);
huh+=' y: ' + arecto.y + ' ' + brecto.y + ' ' + crecto.y + ' ' + String.fromCharCode(10);
huh+=' width: ' + arecto.width + ' ' + brecto.width + ' ' + crecto.width + ' ' + String.fromCharCode(10);
huh+='height: ' + arecto.height + ' ' + brecto.height + ' ' + crecto.height + ' ' + String.fromCharCode(10);
//prompt(huh,'tWo;' + iois.id);
aconto.getElementById('xbr').style.position='absolute';
aconto.getElementById('xbr').style.left='33px';
aconto.getElementById('xbr').style.top='40px';
aconto.getElementById('xbr').style.width='276px';
aconto.getElementById('xbr').style.height='276px';
aconto.getElementById('xbr').style.backgroundColor='orange';
aconto.getElementById('xbr').title='Square 276 x 276';
rconto=aconto;
rconto.querySelectorAll('sup').forEach(xsub => {
xsub.addEventListener('click', () => {
alert('Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long');
});
});
//subsups[eval(-1 + subsups.length)].title='Diagonal to square 276 x 276 ... ' + (eval(276 / Math.sin(45))) + ' pixels long';
//setTimeout(function(){ document.getElementById('precon').style.display='table-cell'; }, 3000);
enableScroll();
}
}
}
}
}
}

if (iois.id == 'ifright' && 5 == 7) {
var xtdcrect=parent.document.getElementById('ifleft').getBoundingClientRect();
iois.style.top='' + xrectcrect.top + 'px';
iois.style.left='' + xrectcrect.left + 'px';
}
}

function fbo(iois) {
if (iois != null) {
oconto = (iois.contentWindow || iois.contentDocument);
if (oconto != null) {
if (oconto.document) { oconto = oconto.document; }
if (oconto.body != null) {
if (oconto.body.innerHTML.indexOf('</sub>') != -1) {
if (oconto.body.innerHTML.indexOf('<') != -1) {
twots=oconto.getElementsByTagName(oconto.body.innerHTML.replace(/\<br\>/g,'').replace(/\<br\ \/\>/g,'').replace(/\<br\/\>/g,'').split('<')[1].split(' ')[0].split('>')[0]);
}
var subs=oconto.getElementsByTagName('sub');
//alert(subs[eval(-1 + subs.length)].outerHTML);
if (!orecto || 1 == 1) {
if (oconto.getElementById('lastsu')) {
orecto=oconto.getElementById('lastsu').getBoundingClientRect();
} else {
orecto=subs[eval(-1 + subs.length)].getBoundingClientRect();
}
//orecto=subs[0].getBoundingClientRect();
//subs[eval(-1 + subs.length)].style.backgroundColor='pink';
}
}
}
}
}
}

function tom() {
var wasq=0;
if (1 == 1 || (trecto && orecto)) {
//var mtopt=0, mleftt=0;
//var mtopo=0, mlefto=0;
if (trecto && orecto) {
if (mtopt == 0 || 3 == 3) {
wasq=mtopt;
mtopt=eval(1.0 * eval(eval(Math.round(trecto.top) + Math.round(trecto.height) / 1) - eval(Math.round(orecto.top) + Math.round(orecto.height) / 1)));
//ct='text-shadow:-0.5px 0.5px 0.5px #ff2d95;margin-top:' + mtopt + 'px;';
mleftt=eval(0 + eval(eval(Math.round(trecto.left) + Math.round(trecto.width) / 1) - eval(Math.round(orecto.left) + Math.round(orecto.width) / 1)));
//cl='margin-left:' + mleftt + 'px;';
if (wasq == 0) {
onets[0].style.marginTop='' + mtopt + 'px';
onets[0].style.marginLeft='' + mleftt + 'px';
}
//document.title='t: ' + eval(Math.round(trecto.left) + Math.round(trecto.width) / 1) + ',' + eval(Math.round(trecto.top) + Math.round(trecto.height) / 1) + ' o: ' + eval(Math.round(orecto.left) + Math.round(orecto.width) / 1) + ',' + eval(Math.round(orecto.top) + Math.round(orecto.height) / 1);
}
}
setTimeout(tom, 500);
} else {
setTimeout(tom, 2000);
}
}

function jccheck() {
if (document.URL.indexOf('justclock=') != -1) {
setTimeout(function() { document.getElementById('fibothone').scrollIntoView(); }, 15000);
}
if (document.URL.indexOf('justsquare=') != -1) {
setTimeout(function() { document.getElementById('prerrow').scrollIntoView(); }, 15000);
}

setTimeout(function(){
if (document.getElementById('taecll0001') && document.getElementById('taecll0002')) {
//alert(document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;'));
document.getElementById('mycontainer').innerHTML=document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=tl class="') + document.getElementById('taecll0002').value.replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=br class="');
var rectbr=document.getElementById('br').getBoundingClientRect();
document.getElementById('mycontainer').style.width='' + eval(0.70710678118 * eval(0.70710678118 * Math.sqrt((Math.abs(rectbr.width) * Math.abs(rectbr.width)) + (Math.abs(rectbr.height) * Math.abs(rectbr.height))))) + 'px';
document.getElementById('mycontainer').style.height='' + eval(0.70710678118 * eval(0.70710678118 * Math.sqrt((Math.abs(rectbr.width) * Math.abs(rectbr.width)) + (Math.abs(rectbr.height) * Math.abs(rectbr.height))))) + 'px';
sd=document.getElementById('taecll0001').value.replace(' style="',' style="margin-left:40px;').replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(' id="', ' id=tl class="rotated-text-tl-to-br ');
sd=sd +'</div>' + document.getElementById('taecll0001').value.replace(' style="margin-left:40px;',' style="').replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(' id="', ' id=xtl class="rotated-text-tl-to-br ').replace(/\ id\=\"/g, ' id="x').replace(/\ class\=\"/g, ' class="x').replace(' style="', ' style="padding-top:20px;opacity:0.2;color:transparent;');
sdtwo=document.getElementById('taecll0002').value.replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=br class="rotated-text-bl-to-tr ');
sdtwo=sdtwo + '</div>' + document.getElementById('taecll0002').value.replace('margin-top:-256px;','').replace(/rotate\(8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(/rotate\(\-8/g, 'rotate(0').replace(' id="', ' id=xbr class="rotated-text-bl-to-tr ').replace(/\ id\=\"/g, ' id="x').replace(/\ class\=\"/g, ' class="x').replace('color:blue;','').replace(' style="', ' style="margin-top:-256px;opacity:0.3;color:transparent;'); // used to be -520
setTimeout(function(){
var tdcrect=document.getElementById('tdcontainer').getBoundingClientRect();
document.getElementById('tdcontainer').innerHTML='<iframe frameborder=0 id=ifleft onload="analyze(this);" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sd.replace(/\"/g,"'") + '</div>'.replace('</div>','') + '"></iframe>' + '<iframe frameborder=0 id=ifright onload="analyze(this);" style="position:absolute;top:' + tdcrect.top + 'px;left:' + tdcrect.left + 'px;opacity:0.6;width:100%;height:100%;background-color:white;" srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sdtwo.replace(/\"/g,"'").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '</div>'.replace('</div>','') + '"></iframe>';
//document.getElementById('rrow0001').innerHTML='<td id=tdcontainer colspan=2 style=text-align:center;><iframe frameborder=0 id=ifleft onload="analyze(this);" style=opacity:0.6;width:100%;height:100%;background-color:white; srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sd.replace(/\"/g,"'") + '</div>'.replace('</div>','') + '"></iframe>' + '<iframe frameborder=0 id=ifright onload="analyze(this);" style="position:absolute;top:' + tdcrect.top + 'px;left:' + tdcrect.left + 'px;opacity:0.6;width:100%;height:100%;background-color:white;" srcdoc="<style>' + document.getElementById('mystyle').innerHTML.replace('background-color: silver;',' ').replace(/\"/g,"'").replace('800px', '' + document.getElementById('mycontainer').style.width + '').replace('800px', '' + document.getElementById('mycontainer').style.height + '') + '</style>' + document.getElementById('mycontainer').outerHTML.split('>')[0].replace(' style="',' style="background-color:white;').replace(/\"/g,"'") + '>' + sdtwo.replace(/\"/g,"'").replace('margin-top:-256px;','').replace('margin-top:-256px;','') + '</div>'.replace('</div>','') + '"></iframe></td>';
}, 2000);
}
}, 2000);
}

setTimeout(tom, 2000);

</script>
</head>
<body class=defbody onload='disableScroll(); jccheck();'>
<h1 id=myh1>Diagon Alley</h1>
<h2>RJM Programming - January, 2026</h3>
<h4><button onclick="document.getElementById('fibothone').scrollIntoView(); window.scrollBy(0,80);" id=bclock style=visibility:hidden;>Analogue <br>Clock 🕓</button> <button onclick="document.getElementById('prerrow').scrollIntoView();" id=bsquare style=visibility:hidden;>Square 🟪<br>Diagonals</button> <select title='Element Type of first ... subsequents will always be sub for top to bottom and sup for bottom to top all left to right' onchange=nonp(this); id=eletype><option value=p>p</option><option value=sub>sub</option><option value=sup>sup</option><option value=span>span</option><option value=sub>sub</option><option value=font>font</option><option value=div>div</option><option value=h1>h1</option><option value=h2>h2</option><option value=h3>h3</option><option value=h4>h4</option></select> <input onblur=chrc(this); title='Content' type=text id=chars name=chars placeholder=Content value='⚊'></input>  <input onblur=fsnc(this); onchange=fsnc(this); title='Font Size' type=number min=0 step=1 id=fsn name=fsn placeholder='Font Size' value='96'></input>px  <input onblur=rotc(this); onchange=rotc(this); title='Rotation in degrees' type=number min=0 max=360 step=0.1 id=rtn name=rtn placeholder='Rotation in degrees' value='8.0'></input>deg  <input onblur=trxc(this); onchange=trxc(this); title='Translate X' type=number step=0.1 id=txn name=txn placeholder='Translate X' value='-10.0'></input>px,<input onblur=tryc(this); onchange=tryc(this); title='Translate Y' type=number step=0.1 id=tyn name=tyn placeholder='Translate Y' value='-20.0'></input>px  <input onblur=lgc(this); onchange=lgc(this); title='Components' type=number min=1 step=1 id=fsn name=lgn placeholder='Components' value='8'></input></h4>
<table id-mytable border=1>
<script type=text/javascript>
document.write('<tr id=frow' + ('0000' + rownum).slice(-4) + '><td onblur=obr(this); id=cell' + ('0000' + cellnum).slice(-4) + '><' + ft.replace('sub','p').replace('sup','p') + ' id=ele' + ('0000' + cellnum).slice(-4) + ' title=' + ft.replace('sub','p').replace('sup','p') + '' + rit(charsare) + '</' + ft.replace('sub','p').replace('sup','p') + '><td onblur=obr(this); id=cell' + ('0000' + eval(1 + cellnum)).slice(-4) + '><a title=Clone style=background-color:yellow; onclick=addone(); href=#>➕</a></' + ft + '></td></tr>');
document.write('<tr id=crow' + ('0000' + rownum).slice(-4) + '><td id=ecll' + ('0000' + cellnum).slice(-4) + '><' + ft + ' id=lee' + ('0000' + cellnum).slice(-4) + '><td id=ecll' + ('0000' + eval(1 + cellnum)).slice(-4) + '></' + ft + '></td></tr>');
document.write('<tr id=brow' + ('0000' + rownum).slice(-4) + '><td colspan=2 style=text-align:center;><iframe style="opacity:0.6;width:50%;height:800px;" id=ifbothone srcdoc="" src=#></iframe><iframe style="opacity:0.6;width:50%;height:800px;" id=ifbothtwo srcdoc="" src=#></iframe></tr>');
document.write('<tr id=pretrow' + ('0000' + rownum).slice(-4) + '><td id=pretrow colspan=2><button onclick="document.getElementById(' + "'fibothone'" + ').scrollIntoView(); window.scrollBy(0,80);">Analogue <br>Clock 🕓</button> <button onclick="document.getElementById(' + "'prerrow'" + ').scrollIntoView();">Square 🟪<br>Diagonals</button> <button onclick="document.getElementById(' + "'myh1'" + ').scrollIntoView();">Top</button> </td></tr><tr id=trow' + ('0000' + rownum).slice(-4) + '><td colspan=2 style=text-align:center;><iframe onload="fbo(this);" style="opacity:0.6;width:80%;height:1100px;" id=fibothone srcdoc="" src=#></iframe><iframe onload="fbt(this);" style="opacity:0.6;width:80%;height:1100px;" id=fibothtwo srcdoc="" src=#></iframe><iframe onload="fbc(this);" style="opacity:1.0;width:80%;height:1100px;background-color:transparent;" id=fiboththree srcdoc="" src=#></iframe></td></tr>');
document.write('<tr id=prerrow' + ('0000' + rownum).slice(-4) + '><td id=prerrow colspan=2><button onclick="document.getElementById(' + "'fibothone'" + ').scrollIntoView(); window.scrollBy(0,80);">Analogue <br>Clock 🕓</button> <button onclick="document.getElementById(' + "'prerrow'" + ').scrollIntoView();">Square 🟪<br>Diagonals</button> <button onclick="document.getElementById(' + "'myh1'" + ').scrollIntoView();">Top</button> </td></tr><tr id=rrow' + ('0000' + rownum).slice(-4) + '><td id=tdcontainer colspan=2 style=text-align:center;width:1000px;height:1000px;><div id=mycontainer class=container></div></td></tr>');
setTimeout(andthen, 400);
</script>
</table>
<div id=dstyle>
</div>
</body>
</html>