<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>
.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;
}

</style>
<script type=text/javascript>
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) {
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;
} 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;
} else {
document.getElementById('divhost').innerHTML=document.getElementById('divhost').innerHTML.replace(' ', ' class="' + selovalue + '" ');
document.getElementById('taidea').value=document.getElementById('divhost').innerHTML;
}
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;
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;
}
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=' ';
}
}

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


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();
}
}
</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-family:Courier New;font-weight:bold;background-color:#f0f0f0;' 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="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>
<option value=" ">Your Own CSS Styling?</option>
</select>
</form>
<div id=dstyle></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>