<html>
<head>
<title>Cursor Change via Shift or Alt or Control versus Caps Lock Keyboard Presses - RJM Programming - May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum</title>
<style>

body {
display: inline-block;
font-size: 128px;
line-height: 1.2;
text-align: center;
background: url(//picsum.photos/1000/1000) center center no-repeat;
background-size: cover;
background-clip: text;
-webkit-background-clip: text;

color: rgba(255,0,0,0.6);

span { color: transparent; }
}

div {
background-color: transparent;
caret-color: transparent;
}

@media only screen and (max-width: 1000px) {
div {
background: url(//picsum.photos/1000/1000) center center no-repeat;
}
}

div:focus {
outline: none !important;
}

html {
height: 100%;
display: flex;
cursor: Url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\002753</text></svg>") 16 0, crosshair;
}

</style>

<script type='text/javascript'>
var gro=false;
var lastkeymodifier=''
var lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
var lastaltcursor='', lastctrlcursor='', lastshiftcursor='';
var pos3=-1, pos4=-1;
var subdiv=1;
var newu='';
var factor=1;
var lastpos3=-2, lastpos4=-1;
var allowable=false;
//var allowed=true;

//function reseta() {
// allowed=true;
//}

function andthen() {
document.getElementById("mydiv").innerHTML="";
}

function stamp(evt) {
var divo=evt.target;
xycursorlook(evt);
if (('' + pos3).indexOf('-') == -1) {
if (allowable) {
//if (allowed) {
//allowed=false;
//setTimeout(reseta, 2000);
if (factor != 1) {
divo.innerHTML+='<div title="Double click to clear all the foreground emoji elements." ondblclick="setTimeout(andthen,2000);" id=div' + subdiv + ' style="position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:' + eval(factor * 50) + 'px;background-color:transparent;"></div><style> #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } </style>';
} else {
divo.innerHTML+='<div title="Double click to clear all the foreground emoji elements." ondblclick="setTimeout(andthen,2000);" id=div' + subdiv + ' style="position:absolute;top:' + pos4 + 'px;left:' + pos3 + 'px;width:126px;height:48px;background-color:transparent;"></div><style> #div' + subdiv + ' { background:' + lastcursor.split(') ')[0] + ') no-repeat; } </style>';
}
subdiv++;
//console.log('lastpos4=' + lastpos4 + ' and pos4=' + pos4);
//console.log('lastpos3=' + lastpos3 + ' and pos3=' + pos3);
lastpos3=pos3;
lastpos4=pos4;
//}
}
}
}

function xycursorlook(e) {
e = e || window.event;
e.preventDefault();

if (e.touches) {
if (e.touches[0].pageX) {
pos3 = e.touches[0].pageX;
pos4 = e.touches[0].pageY;
} else {
pos3 = e.touches[0].clientX;
pos4 = e.touches[0].clientY;
}
//console.log('pos3=' + pos3 + ',pos4=' + pos4);
} else if (e.clientX || e.clientY) {
pos3 = e.clientX;
pos4 = e.clientY;
} else {
pos3 = e.pageX;
pos4 = e.pageY;
}
}

function alte() {
allowable=true;
}

function kpcursorlook(evt) {
var atofa=['a','b','c','d','e','f'];
var rgbit='';
var exs=[];
var exc='';
var iexc=0;
var seven=7;
var thereismore=false;
if (evt.keyCode == 92) {
if (newu.length == 1) { gro=true; } else if ((newu + ' ').substring(0,1) != ("\\").substring(0,1)) { gro=false; }
if (eval('' + newu.length) > 1 && eval(eval('' + newu.length) % 7) != 0 && (newu + ' ').substring(0,1) == ("\\").substring(0,1)) {
console.log('start');
exs=newu.split(("\\").substring(0,1));
if (exs.length > 2) {
for (iexc=1; iexc<eval(-1 + exs.length); iexc++) {
exc+=("\\").substring(0,1);
exc+=exs[iexc];
}
newu=newu.replace(exc, '');
//alert('exc=' + exc + ' and newu left=' + newu);
}
while (eval(eval('' + newu.length) % 7) != 0) {
newu=("\\").substring(0,1) + '0' + newu.substring(1);
thereismore=true;
}
newu=exc + newu;
newu+=("\\").substring(0,1);
} else if ((newu + ' ').substring(0,1) == ("\\").substring(0,1) && eval(eval('' + newu.length) % 7) == 0 ) {
newu+=("\\").substring(0,1);
} else {
newu=("\\").substring(0,1);
}
} else if (evt.keyCode >= 48 && evt.keyCode <= 57) {
newu+=('' + eval(-48 + evt.keyCode));
} else if (evt.keyCode >= 65 && evt.keyCode <= 70) {
newu+=('' + atofa[eval(-65 + evt.keyCode)]);
} else if (evt.keyCode >= 97 && evt.keyCode <= 102) {
newu+=('' + atofa[eval(-97 + evt.keyCode)]);
} else if (eval(eval('' + newu.length) % 7) == 1 && (newu + ' ').substring(0,1) == ("\\").substring(0,1)) {
if (evt.keyCode == 43) { factor*=2; }
//alert('2:' + evt.keyCode);
} //else {
//alert('0:' + evt.keyCode);
//}
if (!thereismore && eval(eval('' + newu.length) % 7) == 0 && (newu + ' ').substring(0,1) == ("\\").substring(0,1)) {
//alert(newu);
if (lastcursor.indexOf(("\\\\").substring(0,2)) != -1) {
rgbit=lastcursor.split(("\\\\").substring(0,2))[1].substring(6);
seven=eval('' + newu.length);
lastcursor=lastcursor.split(("\\\\").substring(0,2))[0] + newu.replace(("\\").substring(0,1), "~~").replace(("\\").substring(0,1), "~~").replace(("\\").substring(0,1), "~~").replace(("\\").substring(0,1), "~~").replace(("\\").substring(0,1), "~~").replace(/\~\~/g, ("\\").substring(0,1) + ("\\").substring(0,1)) + rgbit;
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
newu='';
//factor=1;
} else if (lastcursor.indexOf(("\\").substring(0,1)) != -1) {
rgbit=lastcursor.split(("\\").substring(0,1))[1].substring(6);
seven=eval('' + newu.length);
lastcursor=lastcursor.split(("\\").substring(0,1))[0] + newu + rgbit;
if (gro) {
lastcursor=lastcursor.replace('>Shift/Alt/Ctrl', '>').replace('>Shift', '>').replace('>Alt', '>').replace('>Ctrl', '>').replace(" width='126'", " width='" + eval(20 * factor * eval('' + newu.length) / seven) + "'").replace(" width='66'", " width='" + eval(20 * factor * eval('' + newu.length) / seven) + "'").replace(" height='48'", " height='" + eval(20 * factor * eval('' + newu.length) / seven) + "'").replace('0 0 100 100', '0 0 ' + eval(20 * factor * eval('' + newu.length) / seven) + ' ' + eval(20 * factor * eval('' + newu.length) / seven)).replace('font-size:16px','font-size:' + eval(16 * factor) + 'px').replace('font-size:17px','font-size:' + eval(17 * factor) + 'px').replace('border-radius:15px','border-radius:' + eval(15 * factor) + 'px').replace(') 16 0,',') ' + eval(16 * factor) + ' 0,');
}
newu='';
//factor=1;
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
}
}
// console.log(evt.keyCode);
}

function premt() {
document.getElementById('mydiv').style.fontSize='28px';
document.getElementById('mydiv').style.color='green';
document.getElementById('mydiv').style.textShadow='2px 2px red';
document.getElementById('mydiv').innerHTML='Temporary 20 second message. ' + document.getElementById('mydiv').title;
setTimeout(postmt, 20000);
}

function postmt() {
document.getElementById('mydiv').style.color='transparent';
document.getElementById('mydiv').style.textShadow='';
document.getElementById('mydiv').innerHTML='';
}

function mt(ih) {
setTimeout(premt, 2000);
return ih;
}

function cursorlook(evt) {
var cbe=false;
if (evt.altKey) {
if (lastkeymodifier != 'alt') {
factor=1;
lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,0,255,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Alt\\01f3d5</text></svg>\") 16 0, progress";
lastaltcursor=lastcursor;
lastshiftcursor='';
lastctrlcursor='';
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
lastkeymodifier='alt';
}
} else if (evt.ctrlKey) {
if (lastkeymodifier != 'ctrl') {
factor=1;
lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Ctrl\\01f333</text></svg>\") 16 0, pointer";
lastctrlcursor=lastcursor;
lastshiftcursor='';
lastaltcursor='';
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
lastkeymodifier='ctrl';
}
} else if (evt.shiftKey) {
if (lastkeymodifier != 'shift') {
factor=1;
lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='66' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(255,0,0,0.3);fill:black;font-family:Verdana;font-size:17px;'><text y='80%'>Shift\\01f389</text></svg>\") 16 0, grab";
lastshiftcursor=lastcursor;
lastaltcursor='';
lastctrlcursor='';
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
lastkeymodifier='shift';
}
} else {
//console.log('evt.keyCode=' + evt.keyCode);
if (evt.keyCode == 220) {
cbe=true;
} else if (evt.keyCode >= 48 && evt.keyCode <= 57) {
cbe=true;
} else if (evt.keyCode >= 65 && evt.keyCode <= 70) {
cbe=true;
} else if (evt.keyCode >= 97 && evt.keyCode <= 102) {
cbe=true;
} //else {
//alert(evt.keyCode);
//}
if (lastkeymodifier != '' && !cbe) {
factor=1;
console.log('' + document.getElementById('mydiv').innerHTML);
lastcursor="Url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='126' height='48' viewport='0 0 100 100' style='border-radius:15px;background-color:rgba(0,255,0,0.3);fill:black;font-family:Verdana;font-size:16px;'><text y='80%'>Shift/Alt/Ctrl\\002753</text></svg>\") 16 0, crosshair";
document.head.innerHTML+='<style> html { cursor: ' + lastcursor + '; } </style>';
lastkeymodifier='';
}
}
}
</script>
</head>
<body data-onload="document.getElementById('mydiv').click();" onload="if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) { if (document.body.innerHTML.indexOf('ur' + 'l(') == -1) { document.body.innerHTML=mt(document.body.innerHTML).replace(' style=' + String.fromCharCode(34), ' style=' + String.fromCharCode(34) + 'background: u' + 'rl(' + document.URL.split('/')[0] + '//picsum.photos/500/500) center center no-repeat;background-size:cover;'); } }">
<div id=mydiv onfocus='setTimeout(alte, 1000);' ondblclick="this.innerHTML='';" onclick='stamp(event);' title='Click and type and see the cursor change as you use Alt or Shift or Control that can be reset via Caps Lock with a click copying cursor into content ... RJM Programming ... May, 2022 ... thanks to https://picsum.photos/ Lorem Picsum You can change emojis if you know the \002602 form of UTF-16 (hex) entry (our example is umbrella and if you express it as \\002602 that leaves cursor just as your emoji). Double click existant foreground emoji element to clear all the foreground emoji elements. With complex emoji entries do not zero leftpad until your last simple entity eg. \\1F6A3\200D\2640\00FE0F could define a Woman Rowing complex emoji. Optionally make emojis bigger after \ with + two time multipliers.' spellcheck='false' contenteditable=true style='width:100vw;height:100%;color:transparent;text-color:transparent;overflow:hidden;' onkeypress=kpcursorlook(event); onkeydown=cursorlook(event); onmousemove=xycursorlook(event); ontouchmove=xycursorlook(event);></div>
</body>
</html>