<html>
<head>
<title>Apply a Mask - RJM Programming - June, 2025 ... thanks to https://www.w3schools.com/cssref/playdemo.php?filename=playcss_clip-path</title>
<style>
input[type=submit] {
background-color: lightgreen !important;
}

select {
background-color: #f0f0f0 !important;
}

.circle40 {
clip-path: circle(40%);
}
.circle20 {
clip-path: circle(20%);
}
.ellipse40 {
clip-path: ellipse(25% 40% at 50% 50%);
}
.ellipse25 {
clip-path: ellipse(25% 25% at 50% 50%);
}
.polygon6 {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.polygon8 {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.inset5 {
clip-path: inset(5% 20% 15% 10%);
}

#divhost {
display: flex;
background-color: white;
}

.highlight {
background-color: rgb(255,0,0,0.4);
visibility: visible;
color: transparent;
z-index: 9;
}

.highlight0 {
background-color: rgb(255,0,0,0.4);
visibility: visible;
color: transparent;
z-index: 9;
}

.highlight1 {
background-color: rgb(255,255,0,0.4);
visibility: visible;
color: transparent;
z-index: 9;
}

.highlight2 {
background-color: rgb(255,0,255,0.4);
visibility: visible;
color: transparent;
z-index: 9;
}

.highlight3 {
background-color: rgb(0,255,255,0.4);
visibility: visible;
color: transparent;
z-index: 9;
}

.highlight4 {
background-color: rgb(127,0,0,0.4);
visibility: visible;
color: transparent;
z-index: 9;
}

.highlight5 {
background-color: rgb(127,127,0,0.4);
visibility: visible;
color: transparent;
z-index: 9;
}

.highlight6 {
background-color: rgb(127,0,127,0.4);
visibility: visible;
color: transparent;
z-index: 9;
}

.highlight7 {
background-color: rgb(0,127,127,0.4);
visibility: visible;
color: transparent;
z-index: 9;
}

.highlight8 {
background-color: rgb(127,127,127,0.4);
visibility: visible;
color: transparent;
z-index: 9;
}

.highlight9 {
background-color: rgb(0,0,255,0.4);
visibility: visible;
color: transparent;
z-index: 9;
}

</style>
<script type=text/javascript>
var defst="background-color: yellow;";
var is64=false, plus=' ', lastuserstyle='', iyo=0;
var defoptit='background-position-x:right;';
var origdefopt=defoptit;
var divih='';
var clnm=(location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('class=')[1] ? decodeURIComponent((location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('class=')[1].split('&')[0]).replace(/\+/g,' ') : '';
var eqis='=';
if ((location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).indexOf('taidea' + encodeURIComponent('=')) != -1) {
eqis=encodeURIComponent('=');
}
//alert(location.hash);
var inta='', startstyle='';
var intas=[];
if (document.URL.indexOf('Cjxi') != -1) {
//alert('here');
intas=document.URL.split('Cjxi');
for (var inm=1; inm<intas.length; inm++) {
intas[eval(-1 + inm)]=decodeURIComponent(decodeURIComponent(escape(atob('Cjxi' + intas[inm]))));
//alert(intas[eval(-1 + inm)]);
}
}
inta=(location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('taidea' + eqis)[1] ? ourdecodeURIComponent((location.search + ('' + location.hash).replace(/^undefined/g,'').replace(/^null/g,'')).split('taidea' + eqis)[1].split('&')[0]).replace(/\+/g,plus) : '';
if (inta.indexOf('background') == 0) {
startstyle=inta.replace(/\ \!important/g,'');
inta='';
}
//alert(inta);
var preint='';
preint=inta.split('div')[0];
if (eval('' + intas.length) == 0) {
intas=(inta + ' ').substring(preint.length).split('<div');
}
var nextinta='';
var woois=null;
var sofares='';

function changethis(selo) {
var selovalue=selo.value;
var keepers='', ik=0, prefixy='';
if (selovalue == ' ') {
var yourown=prompt('Please enter your own CSS styling clause ending with a semicolon ;', '');
if (yourown == null) { yourown=''; }
if (yourown.trim().replace(/\;$/g,'') != '') {
if (clnm != '' || 9 == 9) { for (var inb=0; inb<20; inb++) { yourown=yourown.replace(/\:\ /g,':'); } }
if (yourown.trim().slice(-1) == ';') {
document.getElementById('mysel').innerHTML+='<option value="yoclass' + iyo + '">' + yourown.trim() + '</option>';
document.getElementById('mysel').value='yoclass' + iyo;
document.getElementById('dstyle').innerHTML+='<sty' + 'le> .yoclass' + iyo + (' { ' + yourown.trim() + ' } </sty' + 'le>').replace('; }',' !important; }');
iyo++;
if (document.getElementById('taidea').value.indexOf(yourown.trim()) == -1) {
if (document.getElementById('taidea').value.indexOf(' data-yourown=""') != -1) {
//alert('here');
document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="', ' data-yourown="' + yourown.trim() + '');
document.getElementById('divhost').innerHTML=document.getElementById('taidea').value;
} else {
prefixy=document.getElementById('taidea').value.split(' data-yourown="')[1].split('"')[0] + ',';
//document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="', ' data-yourown="' + yourown.trim() + ',');
document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="' + prefixy.replace(/\,$/g,''), ' data-yourown="' + prefixy + yourown.trim().replace(/\;$/g,'') + ';');
document.getElementById('divhost').innerHTML=document.getElementById('taidea').value;
}
}
changethis(document.getElementById('mysel'));
} else {
document.getElementById('mysel').innerHTML+='<option value="yoclass' + iyo + '">' + yourown.trim() + ';</option>';
document.getElementById('mysel').value='yoclass' + iyo;
document.getElementById('dstyle').innerHTML+='<sty' + 'le> .yoclass' + iyo + ' { ' + yourown.trim() + ' !important; } </sty' + 'le>';
iyo++;
if (document.getElementById('taidea').value.indexOf(yourown.trim()) == -1) {
if (document.getElementById('taidea').value.indexOf(' data-yourown=""') != -1) {
//alert('Here');
document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="', ' data-yourown="' + yourown.trim() + ';');
document.getElementById('divhost').innerHTML=document.getElementById('taidea').value;
} else {
prefixy=document.getElementById('taidea').value.split(' data-yourown="')[1].split('"')[0] + ',';
document.getElementById('taidea').value=document.getElementById('taidea').value.replace(' data-yourown="' + prefixy.replace(/\,$/g,''), ' data-yourown="' + prefixy + yourown.trim().replace(/\;$/g,'') + ';');
document.getElementById('divhost').innerHTML=document.getElementById('taidea').value;
}
}
changethis(document.getElementById('mysel'));
}
}
return '';
}

if (1 == 1) {
defst=selovalue;
if (document.getElementById('divhost').innerHTML.indexOf(' class="yo') != -1) {
for (ik=1; ik<document.getElementById('divhost').innerHTML.split(' class=')[1].replace(/^\"/g,' ').split('"')[0].split(' ').length; ik++) {
keepers+='' + document.getElementById('divhost').innerHTML.split(' class=')[1].replace(/^\"/g,' ').split('"')[0].split(' ')[ik].split(' ')[0].split('"')[0] + ' ';
}
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' class="' + document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0] + '" ', ' class="' + keepers + selovalue + '" ');
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML.substring(document.getElementById('divhost').innerHTML.indexOf('<'));
} else if (document.getElementById('divhost').innerHTML.indexOf(' class="') != -1) {
if (document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0].indexOf(' yo') != -1) {
for (ik=1; ik<document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0].split(' yo').length; ik++) {
keepers+='yo' + document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0].split(' yo')[ik].split(' ')[0].split('"')[0] + ' ';
}
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' class="' + document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0] + '" ', ' class="' + keepers + selovalue + '" ');
} else {
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' class="' + document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0] + '" ', ' class="' + selovalue + '" ');
}
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML.substring(document.getElementById('divhost').innerHTML.indexOf('<'));
} else {
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' ', ' class="' + selovalue + '" ');
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML.substring(document.getElementById('divhost').innerHTML.indexOf('<'));
}
lastuserstyle=document.getElementById('mysel').innerHTML.split(' value="' + selovalue + '">')[1].split('<')[0] + '';
document.getElementById('defopt').innerText='Styling ideas [' + lastuserstyle + ']';
return '';
}
if (selovalue == '' && origdefopt != '') {
selovalue=origdefopt;
}
if (selovalue != '') {
if (document.getElementById('mybq') && document.getElementById('divhost')) {
var thisih=document.getElementById('divhost').innerHTML;
if (defoptit != '' && thisih.indexOf(defoptit + '">') != -1) {
thisih=thisih.replace(defoptit + '">', selovalue + '">');
} else if (thisih.indexOf('">') != -1) {
thisih=thisih.replace('">', selovalue + '">');
} else {
thisih=thisih.replace(' style="', ' style="' + selovalue);
}
document.getElementById('divhost').innerHTML=thisih.replace(' data-current="' + defoptit + '"', ' data-current="' + selovalue + '"');
defoptit=selovalue;
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;
}
}
}

function onl(altta) {
var outta=inta;
if (altta == '' && eval('' + intas.length) > 1) {
//alert(inta);
//alert(preint + intas[0]);
nextinta=inta.replace(preint + intas[0], '');
document.getElementById('hrbot').style.display='block';
if (is64) {
document.getElementById('ifbot').src=document.URL.split('?')[0].split('#')[0] + '?#taidea=' + ourencodeURIComponent(nextinta);
} else {
document.getElementById('ifbot').src=document.URL.split('?')[0].split('#')[0] + '?#taidea=' + encodeURIComponent(nextinta);
}
document.getElementById('ifbot').style.display='block';
inta=preint + intas[0];
outta=inta;
intas=[];
}
if (altta == '' && inta != '') {
if (eval('' + inta.split('clip-').length) > 1) {
origdefopt='clip-' + (inta.split('clip-')[1].split(';')[0].split('"')[0] + ';').replace(/^\;/g,'');
document.getElementById('defopt').innerHTML='Styling idea [' + origdefopt + ']';
defoptit=origdefopt;
}
}
if (altta != '') { outta=altta; }
if (outta == '') {
outta=document.getElementById('divhost').innerHTML;
} else {
document.getElementById('divhost').innerHTML=outta;
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML.substring(document.getElementById('divhost').innerHTML.indexOf('<'));
if (altta != '') {
if (eval('' + altta.split('clip-').length) > 1) {
defoptit='clip-' + (altta.split('clip-')[1].split(';')[0].split('"')[0] + ';').replace(/^\;/g,'');
document.getElementById('defopt').innerHTML='Styling idea [' + defoptit + ']';
}
}
}
if (document.getElementById('taidea').value.indexOf(' data-yourown=""') == -1 && document.getElementById('taidea').value.indexOf(' data-yourown="') != -1) {
var newuns=document.getElementById('taidea').value.split(' data-yourown="')[1].split('"')[0].split(';,');
for (var inew=0; inew<newuns.length; inew++) {
if (document.getElementById('mysel').innerHTML.indexOf(newuns[inew].replace(/\;$/g,'') + ';') == -1) {
document.getElementById('mysel').innerHTML+='<option value="yoclass' + iyo + '">' + newuns[inew].replace(/\;$/g,'') + ';</option>';
document.getElementById('dstyle').innerHTML+='<sty' + 'le> .yoclass' + iyo + ' { ' + newuns[inew].replace(/\;$/g,'') + ' !important; } </sty' + 'le>';
iyo++;
}
}
}
if (altta == '') {
if (startstyle != '') {
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(document.getElementById('divhost').innerHTML.split(' style="')[1].split('"')[0], startstyle);
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML.substring(document.getElementById('divhost').innerHTML.indexOf('<'));
}
sofares=document.getElementById('divhost').innerHTML;
setInterval(keeplooking, 5000);
} //else if (sofares.indexOf(document.getElementById('divhost').innerHTML) == -1) {
//sofares+=document.getElementById('divhost').innerHTML;
//}

if (clnm.trim() != '') {
if (document.getElementById('divhost').innerHTML.indexOf(' class="') == -1) {
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' ', ' class="' + clnm + '" ');
} else {
document.getElementById('mybq').className=clnm;
}
iyo=100;
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;
clnm=' ';
}
if (document.getElementById('divhost').innerHTML.indexOf(' class="') != -1) {
defst=document.getElementById('divhost').innerHTML.split(' class="')[1].split('"')[0];
}
divoverlayclone('', '');
}

function keeplooking() {
if (sofares.indexOf(document.getElementById('divhost').innerHTML) == -1) {
var vs=sofares;
sofares=document.getElementById('divhost').innerHTML + vs;
//alert(sofares);
divoverlayclone('', '');
}
}


function doemail() {
var anchor=null;
var emis=prompt('Please enter email address to send to.', '');
if (emis == null) { emis=''; }
if (emis.indexOf('@') != -1) {
anchor = document.createElement('a');
anchor.href = 'mailto:' + emis.trim() + '?subject=Mask%20ideas&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#taidea=' + encodeURIComponent(sofares));
anchor.style.display='none';
document.body.appendChild(anchor);
anchor.innerHTML='Email';
anchor.target='_top';
anchor.click();

} else if (emis.trim() != '' && emis.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
anchor = document.createElement('a');
anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares));
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
} else if (emis.trim() != '' && emis.trim().replace(/^\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*(\d{1,2})$/g,'') != emis.trim()) { // thanks to https://stackoverflow.com/questions/2113908/what-regular-expression-will-match-valid-international-phone-numbers
anchor = document.createElement('a');
anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares));
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
}
}

function juststyle(inswas) {
//alert(inswas);
if (inswas.indexOf(' style="') != -1) {
if (('' + document.getElementById('mybq').getAttribute('data-yourown')).replace(/^undefined/g,'').replace(/^null/g,'') != '') {
lastuserstyle=('' + document.getElementById('mybq').getAttribute('data-yourown')).replace(/\ \!important/g,'').replace(/\;\,/g,';').replace(/\;/g,' !important;').replace(/\:/g,': ');
return inswas.split(' style="')[1].split('"')[0].replace(/\:/g,': ') + lastuserstyle;
}
return inswas.split(' style="')[1].split('"')[0] + lastuserstyle;
}
return inswas + lastuserstyle;
}

function ourencodeURIComponent(insis) {
//alert(btoa(unescape(encodeURIComponent('<div'))));
//alert(btoa(unescape(encodeURIComponent(insis))));
//alert(atob(btoa(unescape(encodeURIComponent(insis)))));
var outsis=insis;
try {
outsis=encodeURIComponent(juststyle(insis.split('><div')[0] + '>').replace(/\>\>$/g,'>'));
} catch(excf) {
outsis=btoa(unescape(encodeURIComponent(juststyle(insis.split('><div')[0] + '>').replace(/\>\>$/g,'>'))));
}
return outsis;
}

function ourdecodeURIComponent(insis) {
//alert(decodeURIComponent(insis));
//alert(insis);
if (decodeURIComponent(insis).indexOf('Cjxib') == 0) { // decodeURIComponent
is64=true;
plus='+';
//alert(decodeURIComponent(decodeURIComponent(escape(atob(insis)))));
return decodeURIComponent(decodeURIComponent(escape(atob(insis))));
}
return decodeURIComponent(insis);
}

function dosms(){
var anchor=null;
var emis=prompt('Please enter SMS number to send to.', '');
if (emis == null) { emis=''; }
if (emis.indexOf('@') != -1) {
anchor = document.createElement('a');
anchor.href = 'mailto:' + emis.trim() + '?subject=Mask%20ideas&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?rand=' + Math.floor(Math.random() * 19897865) + '#taidea=' + encodeURIComponent(sofares));
anchor.style.display='none';
document.body.appendChild(anchor);
anchor.innerHTML='Email';
anchor.target='_top';
anchor.click();

} else if (emis.trim() != '' && emis.trim().replace(/0/g,'').replace(/1/g,'').replace(/2/g,'').replace(/3/g,'').replace(/4/g,'').replace(/5/g,'').replace(/6/g,'').replace(/7/g,'').replace(/8/g,'').replace(/9/g,'') == '') {
anchor = document.createElement('a');
anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares));
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
} else if (emis.trim() != '' && emis.trim().replace(/^\+(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*\d\W*(\d{1,2})$/g,'') != emis.trim()) { // thanks to https://stackoverflow.com/questions/2113908/what-regular-expression-will-match-valid-international-phone-numbers
anchor = document.createElement('a');
anchor.href = 'sms:' + emis.trim() + '&body=' + encodeURIComponent(document.URL.split('?')[0].split('#')[0] + '?class=' + encodeURIComponent(('' + document.getElementById('mybq').className)) + '&taidea=' + ourencodeURIComponent(sofares));
anchor.style.display='none';
anchor.innerHTML='SMS';
anchor.target='_top';
anchor.click();
}
}

function wasdivoverlayclone(ovid, indefst) {
var tih='', taih=document.getElementById('divhost').innerHTML, nextih='', tbit='', huhs=[], ihuh=0, mss='', ahh=[], ione=1, ihh=0;
var tarectis=document.getElementById('taidea').getBoundingClientRect();
if (ovid == '') { ovid='doverlay'; } else {
mss=ovid.replace('doverlay','');
for (var iou=0; iou<eval('' + mss); iou++) {
ahh.push('');
}
}
var defclass=(' ' + mss).slice(-1).trim();
for (var itih=taih.indexOf('<'); itih<taih.length; itih++) {
if (taih.substring(itih).substring(0,1) == String.fromCharCode(10)) {
tih+='<br>';
} else if (taih.substring(itih).substring(0,1) == '<') {
tih+='<';
} else if (taih.substring(itih).substring(0,1) == '>') {
tih+='>';
} else {
tih+=taih.substring(itih).substring(0,1);
}
}
document.getElementById(ovid).style.position='absolute';
document.getElementById(ovid).style.top='' + tarectis.top + 'px';
document.getElementById(ovid).style.left='' + tarectis.left + 'px';
document.getElementById(ovid).style.width='' + tarectis.width + 'px';
document.getElementById(ovid).style.height='' + tarectis.height + 'px';
document.getElementById(ovid).style.fontSize = window.getComputedStyle(document.getElementById('taidea'),null).fontSize || document.getElementById('taidea').style.fontSize || document.getElementById('taidea').currentStyle.getCurrentProperty('font-size');
if (indefst.trim() != '') {
//alert('0:' + indefst);
if (document.getElementById('divhost').innerHTML.indexOf(indefst.replace(':',': ')) != -1) {
//alert('00:' + indefst);
document.getElementById(ovid).innerHTML=tih.replace(indefst.replace(':',': '), '<span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + ' title="' + indefst.replace(':',': ') + '">' + indefst.replace(':',': ') + '</span>');
} else if (document.getElementById('divhost').innerHTML.indexOf(indefst) != -1) {
//alert('000:' + indefst);
document.getElementById(ovid).innerHTML=tih.replace(indefst, '<span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + ' title="' + indefst + '">' + indefst + '</span>');
} else {
return '';
}
} else {
//alert(defst);
if (defst.indexOf(';') == -1) {
huhs=defst.split(' ');
//alert('2:' + huhs[0]);
for (ihuh=0; ihuh<huhs.length; ihuh++) {
if (document.getElementById('mysel').innerHTML.indexOf(' value="' + huhs[ihuh] + '">') != -1) {
//alert('3:' + huhs[0]);
tbit+=document.getElementById('mysel').innerHTML.split(' value="' + huhs[ihuh] + '">')[1].split('<')[0];
ahh.push('doverlay' + ione + '~' + document.getElementById('mysel').innerHTML.split(' value="' + huhs[ihuh] + '">')[1].split('<')[0]);
ione++;
}
}
defclass='' + ahh.length;
//alert('defclass=' + defclass);
document.getElementById(ovid).innerHTML=tih.replace(defst, '<span id=myspan' + mss + ' class=highlight' + defclass + ' title="' + tbit + '">' + defst + '</span>');
} else if (document.getElementById('mysel').innerHTML.indexOf(' value="' + defst + '">') != -1) {
document.getElementById(ovid).innerHTML=tih.replace(defst, '<span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + ' title="' + document.getElementById('mysel').innerHTML.split(' value="' + defst + '">')[1].split('<')[0] + '">' + defst + '</span>');
} else {
document.getElementById(ovid).innerHTML=tih.replace(defst, '<span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + ' title="">' + defst + '</span>');
}
}
if (document.getElementById('myspan' + mss)) {
// document.getElementById('myspan' + mss).className='highlight' + ahh.length;
//alert('mss=' + mss + ' oh=' + document.getElementById('myspan' + mss).outerHTML);
nextih=document.getElementById('myspan' + mss).outerHTML;
tarectis=document.getElementById('myspan' + mss).getBoundingClientRect();
document.getElementById(ovid).style.position='absolute';
document.getElementById(ovid).style.top='' + tarectis.top + 'px';
document.getElementById(ovid).style.left='' + tarectis.left + 'px';
document.getElementById(ovid).style.width='' + tarectis.width + 'px';
document.getElementById(ovid).style.height='' + tarectis.height + 'px';
if (tbit != '') {
document.getElementById(ovid).title=tbit;
} else {
document.getElementById(ovid).title=document.getElementById('myspan' + mss).title;
}
//document.getElementById(ovid).className='highlight' + ahh.length;
document.getElementById(ovid).innerHTML=nextih;
}
if (eval('' + ahh.length) > 0) {
for (ihh=0; ihh<ahh.length; ihh++) {
if (ahh[ihh].trim() != '') {
if (document.getElementById('divhost').innerHTML.replace(/\:\ /g,':').indexOf(ahh[ihh].split('~')[1]) != -1) {
//alert(ahh[ihh]);
divoverlayclone(ahh[ihh].split('~')[0], ahh[ihh].split('~')[1]);
} else {
document.getElementById(ahh[ihh].split('~')[0]).innerHTML='';
}
}
}
}
}


function divoverlayclone(ovid, indefst) {
var tih='', taih=document.getElementById('divhost').innerHTML, nextih='', tbit='', huhs=[], ihuh=0, mss='', ahh=[], ione=1, ihh=0;
var tarectis=document.getElementById('taidea').getBoundingClientRect();
if (ovid == '') { ovid='doverlay'; } else {
mss=ovid.replace('doverlay','');
for (var iou=0; iou<eval('' + mss); iou++) {
ahh.push('');
}
}
var defclass=(' ' + mss).slice(-1).trim();
for (var itih=taih.indexOf('<'); itih<taih.length; itih++) {
if (taih.substring(itih).substring(0,1) == String.fromCharCode(10)) {
tih+='<br>';
} else if (taih.substring(itih).substring(0,1) == '<') {
tih+='<';
} else if (taih.substring(itih).substring(0,1) == '>') {
tih+='>';
} else {
tih+=taih.substring(itih).substring(0,1);
}
}
document.getElementById(ovid).style.position='absolute';
document.getElementById(ovid).style.top='' + tarectis.top + 'px';
document.getElementById(ovid).style.left='' + tarectis.left + 'px';
document.getElementById(ovid).style.width='' + tarectis.width + 'px';
document.getElementById(ovid).style.height='' + tarectis.height + 'px';
document.getElementById(ovid).style.fontSize = window.getComputedStyle(document.getElementById('taidea'),null).fontSize || document.getElementById('taidea').style.fontSize || document.getElementById('taidea').currentStyle.getCurrentProperty('font-size');
if (indefst.trim() != '') {
//alert('0:' + indefst);
if (document.getElementById('divhost').innerHTML.indexOf(indefst.replace(':',': ')) != -1) {
//alert('00:' + indefst);
if (tih.indexOf(indefst.replace(':',': ') + '">') != -1) {
document.getElementById(ovid).innerHTML=tih.replace(indefst.replace(':',': ') + '">', '<span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + ' title="' + indefst.replace(':',': ') + '">' + indefst.replace(':',': ') + '</span>">');
} else {
document.getElementById(ovid).innerHTML=tih.replace(indefst.replace(':',': '), '<span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + ' title="' + indefst.replace(':',': ') + '">' + indefst.replace(':',': ') + '</span>');
}
} else if (document.getElementById('divhost').innerHTML.indexOf(indefst) != -1) {
//alert('000:' + indefst);
if (tih.indexOf(indefst + '">') != -1) {
document.getElementById(ovid).innerHTML=tih.replace(indefst + '">', '<span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + ' title="' + indefst + '">' + indefst + '</span>">');
} else {
document.getElementById(ovid).innerHTML=tih.replace(indefst, '<span id=myspan' + mss + ' class=highlight' + (' ' + mss).slice(-1).trim() + ' title="' + indefst + '">' + indefst + '</span>');
}
} else {
return '';
}
} else {
//alert(defst);
if (defst.indexOf(';') == -1) {
huhs=defst.split(' ');
//alert('2:' + huhs[0]);
for (ihuh=0; ihuh<huhs.length; ihuh++) {
if (document.getElementById('mysel').innerHTML.indexOf(' value="' + huhs[ihuh] + '">') != -1) {
//alert('3:' + huhs[0]);
tbit+=document.getElementById('mysel').innerHTML.split(' value="' + huhs[ihuh] + '">')[1].split('<')[0];
ahh.push('doverlay' + ione + '~' + document.getElementById('mysel').innerHTML.split(' value="' + huhs[ihuh] + '">')[1].split('<')[0]);
ione++;
}
}
defclass='' + ahh.length;
//alert('defclass=' + defclass);
document.getElementById(ovid).innerHTML=tih.replace(defst, '<span id=myspan' + mss + ' class=highlight' + defclass + ' title="' + tbit + '">' + defst + '</span>');
} else if (document.getElementById('mysel').innerHTML.indexOf(' value="' + defst + '">') != -1) {
if (eval('' + tih.split(defst).length) > 2) {
ahh.push('doverlay' + ione + '~' + document.getElementById('mysel').innerHTML.split(' value="' + defst + '">')[1].split('<')[0]);
ione++;
defclass='' + ahh.length;
}
document.getElementById(ovid).innerHTML=tih.replace(defst, '<span id=myspan' + mss + ' class=highlight' + defclass + ' title="' + document.getElementById('mysel').innerHTML.split(' value="' + defst + '">')[1].split('<')[0] + '">' + defst + '</span>');
} else {
//alert(defst + ' in? ' + tih);
if (eval('' + tih.split(defst).length) > 2 && 1 == 7) {
ahh.push('doverlay' + ione + '~' + document.getElementById('mysel').innerHTML.split(' value="' + defst + '">')[1].split('<')[0]);
ione++;
defclass='' + ahh.length;
}
document.getElementById(ovid).innerHTML=tih.replace(defst, '<span id=myspan' + mss + ' class=highlight' + defclass + ' title="">' + defst + '</span>');
}
}
if (document.getElementById('myspan' + mss)) {
// document.getElementById('myspan' + mss).className='highlight' + ahh.length;
//alert('mss=' + mss + ' oh=' + document.getElementById('myspan' + mss).outerHTML);
nextih=document.getElementById('myspan' + mss).outerHTML;
tarectis=document.getElementById('myspan' + mss).getBoundingClientRect();
document.getElementById(ovid).style.position='absolute';
document.getElementById(ovid).style.top='' + tarectis.top + 'px';
document.getElementById(ovid).style.left='' + tarectis.left + 'px';
document.getElementById(ovid).style.width='' + tarectis.width + 'px';
document.getElementById(ovid).style.height='' + tarectis.height + 'px';
if (tbit != '') {
document.getElementById(ovid).title=tbit;
} else {
document.getElementById(ovid).title=document.getElementById('myspan' + mss).title;
}
//document.getElementById(ovid).className='highlight' + ahh.length;
document.getElementById(ovid).innerHTML=nextih;
}
if (eval('' + ahh.length) > 0) {
for (ihh=0; ihh<ahh.length; ihh++) {
if (ahh[ihh].trim() != '') {
if (document.getElementById('divhost').innerHTML.replace(/\:\ /g,':').indexOf(ahh[ihh].split('~')[1]) != -1) {
//alert(ahh[ihh]);
divoverlayclone(ahh[ihh].split('~')[0], ahh[ihh].split('~')[1]);
} else {
document.getElementById(ahh[ihh].split('~')[0]).innerHTML='';
}
}
}
}
}

</script>
</head>
<body onload="onl('');">
<h1>Apply a Mask</h1>
<h3>RJM Programming - June, 2025 ... <button onclick="setTimeout(function(){ doemail(); }, 2000);" id="butemail">Email 📧</button>  <button data-style=display:none; onclick="setTimeout(function(){ dosms(); }, 2000);" id="butsms">SMS 📟</button></h3><br>
<h4>Thanks to <a target=_blank title='https://www.w3schools.com/cssref/playdemo.php?filename=playcss_clip-path' href='//www.w3schools.com/cssref/playdemo.php?filename=playcss_clip-path'>https://www.w3schools.com/cssref/playdemo.php?filename=playcss_clip-path</a></h4>
<div id=divhost>
<div id="mybq" data-yourown="" style="background-color: yellow;">
The rain<br>
In Spain<br>
Falls mainly<br>
On the plain<br>
</div>
</div>
<br>
<form style='margin-left:20px;' id=myform method=GET action='./apply_a_mask.html'>
<textarea onblur="onl(this.value);" style='font-size:10px;width:98%;font-family:Courier New;font-weight:bold;background-color:#f0f0f0;margin:0 0 0 0;padding:0 0 0 0;' rows=10 cols=120 id=taidea name=taidea>
<div id="mybq" data-yourown="" style="background-color: yellow;">
The rain<br>
In Spain<br>
Falls mainly<br>
On the plain<br>
</div>
</textarea><br><br>
<input style="background-color:yellow;" type=submit value=Reload></input> ... <select onchange="changethis(this);" id=mysel style='display:inline-block;'><option value='' id=defopt>Styling idea []</option>
<option value=" ">Your Own CSS Styling?</option>
<option value="circle40">clip-path: circle(40%);</option>
<option value="circle20">clip-path: circle(20%);</option>
<option value="ellipse40">clip-path: ellipse(25% 40% at 50% 50%);</option>
<option value="ellipse25">clip-path: ellipse(25% 25% at 50% 50%);</option>
<option value="polygon6">clip-path: polygon(50% 0%, 0% 100%, 100% 100%);</option>
<option value="polygon8">clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);</option>
<option value="inset5">clip-path: inset(5% 20% 15% 10%);</option>
</select>
</form>
<div id=dstyle></div>
<div id=doverlay style="font-size:10px;font-family:Courier New;font-weight:bold;z-index:19;visibility:visible;margin:0 0 0 0;padding:0 0 0 0;color:olive;"></div>
<div id=doverlay1 style="font-size:10px;font-family:Courier New;font-weight:bold;z-index:18;visibility:visible;margin:0 0 0 0;padding:0 0 0 0;color:olive;"></div>
<div id=doverlay2 style="font-size:10px;font-family:Courier New;font-weight:bold;z-index:17;visibility:visible;margin:0 0 0 0;padding:0 0 0 0;color:olive;"></div>
<div id=doverlay3 style="font-size:10px;font-family:Courier New;font-weight:bold;z-index:16;visibility:visible;margin:0 0 0 0;padding:0 0 0 0;color:olive;"></div>
<div id=doverlay4 style="font-size:10px;font-family:Courier New;font-weight:bold;z-index:15;visibility:visible;margin:0 0 0 0;padding:0 0 0 0;color:olive;"></div>
<div id=doverlay5 style="font-size:10px;font-family:Courier New;font-weight:bold;z-index:14;visibility:visible;margin:0 0 0 0;padding:0 0 0 0;color:olive;"></div>
<div id=doverlay6 style="font-size:10px;font-family:Courier New;font-weight:bold;z-index:13;visibility:visible;margin:0 0 0 0;padding:0 0 0 0;color:olive;"></div>
<div id=doverlay7 style="font-size:10px;font-family:Courier New;font-weight:bold;z-index:12;visibility:visible;margin:0 0 0 0;padding:0 0 0 0;color:olive;"></div>
<div id=doverlay8 style="font-size:10px;font-family:Courier New;font-weight:bold;z-index:11;visibility:visible;margin:0 0 0 0;padding:0 0 0 0;color:olive;"></div>
<div id=doverlay9 style="font-size:10px;font-family:Courier New;font-weight:bold;z-index:10;visibility:visible;margin:0 0 0 0;padding:0 0 0 0;color:olive;"></div>
<hr id=hrbot style=display:none;></hr>
<iframe frameborder=0 src='/About_Us.html' id=ifbot style=display:none;width:100%;height:6000px;></iframe>
</body>
</html>