<html>
<head>
<meta charset='utf-8'/>
<title>Simple Card with Emoji Border Design - RJM Programming - April, 2022 ... thanks to https://stackoverflow.com/questions/41199841/use-emoji-as-css-border</title>
<style>
.box {
width: 300px;
/* our SVG's width and height is 30px, so we need to keep the width and height multiple of 30 to avoid cutting */
height: 240px;
position: relative;
/* to center the text */
display: flex;
justify-content: center;
align-items: center;
}
.box:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle'%3E🎄%3C/text%3E%3C/svg%3E");
--mask: linear-gradient(#000, #000) content-box,
linear-gradient(#000, #000);
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-composite: source-out;
padding: 30px;
}
</style>
<script type='text/javascript'>
var wasih='', isih='', dho='';
function newwin(divo) {
var wo=window.open('','_blank','left=10,top=10,width=' + eval(-20 + screen.width) + ',height=' + eval(-20 + screen.height));
if (dho != '') {
wo.document.write('<html>' + dho + '<body>' + divo.outerHTML + '</body></html>');
} else {
wo.document.write('<html>' + document.head.outerHTML + '<body>' + divo.outerHTML + '</body></html>');
}
}
function iframeit(tao) {
document.getElementById('toptable').style.opacity='0.0';
document.getElementById('ifp').src=document.URL.split('#')[0].split('?')[0] + '?rand=' + Math.floor(Math.random() * 19876564);
if (1 == 1) {
document.getElementById('ifp').style.display='block';
document.getElementById('ifp').style.position='absolute';
document.getElementById('ifp').style.top='0px';
document.getElementById('ifp').style.left='0px';
document.getElementById('ifp').style.width='100%';
document.getElementById('ifp').style.height='100vh';
document.getElementById('ifp').style.zIndex='99';
//document.getElementById('ifp').style.opacity='1.0';
}
}
function checkforparent() {
if (window.parent != window) {
dho=document.head.outerHTML.replace('<style' + document.head.outerHTML.split('<style')[1].split('</style>')[0] + '</style>', parent.document.getElementById('css').value);
document.getElementById('spares').innerHTML=parent.document.getElementById('css').value;
document.getElementById('css').value=parent.document.getElementById('css').value;
document.getElementById('words').value=parent.document.getElementById('words').value;
document.getElementById('box').innerHTML=parent.document.getElementById('box').innerHTML;
showb();
}
}
function emailit() {
var emis=prompt('Email address to send to?', '');
if (emis != null) {
if (emis.trim() != '') {
if (emis.indexOf('@') != '') {
//document.getElementById('myemail').href=document.getElementById('myemail').href.replace('mailto:', 'mailto:' + emis);
//document.getElementById('myemail').click();
//parent.document.getElementById('myform').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
//parent.document.getElementById('myform').target='jfp';
document.getElementById('myform').target='jfp';
//alert('ReadY');
document.getElementById('subbut').click();
//alert('REadY');
//top.location.href=document.URL.split('?')[0];
//alert('REAdY');
} else if (emis.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,'') == '') {
//document.getElementById('mysms').href=document.getElementById('mysms').href.replace('sms:', 'sms:' + emis);
//document.getElementById('mysms').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=sms value=\"' + emis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
} else {
//document.getElementById('myemail').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + emis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
}
}
}
}
function smsit() {
var smsis=prompt('Mobile number to SMS to?', '');
if (smsis != null) {
if (smsis.trim() != '') {
if (smsis.indexOf('@') != '') {
//document.getElementById('myemail').href=document.getElementById('myemail').href.replace('mailto:', 'mailto:' + smsis);
//document.getElementById('myemail').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=email value=\"' + smsis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
} else if (smsis.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,'') == '') {
//document.getElementById('mysms').href=document.getElementById('mysms').href.replace('sms:', 'sms:' + smsis);
//document.getElementById('mysms').click();
document.getElementById('eof').innerHTML+='<input type=hidden name=sms value=\"' + smsis + '\"></input>';
document.getElementById('myform').target='jfp';
document.getElementById('subbut').click();
}
}
}
}
function showb() {
document.getElementById('bemail').style.display='inline-block';
document.getElementById('bsms').style.display='inline-block';
}
</script>
</head>
<body onload=" checkforparent(); ">
<table id=toptable border=12 cellpadding=3 cellspacing=3><tr><td style=vertical-align:top; title='Click to show card above in new window' onclick="newwin(document.getElementById('box'));" ondblclick="newwin(document.getElementById('box'));">
<div id=box title='Double click to show in new window' onclick='event.stopPropagation();' ondblclick=newwin(this); class='box' contenteditable=true onblur=" document.getElementById('words').value=(this.innerText || this.contentWindow || this.contentDocument); wasih=this.innerHTML; isih=wasih; if (document.getElementById('words').value.indexOf(String.fromCharCode(10)) != -1) { isih=document.getElementById('words').value; } if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } this.innerHTML=isih; } ">Hello</div><br>
</td><td style=vertical-align:top;text-align:center;><h1>Simple Card with Emoji Border Design <input type=button onclick=emailit(); style=display:none; id=bemail value='Email 📧'></input> <input type=button onclick=smsit(); style=display:none; id=bsms value='SMS 📟'></input></h1><h3>RJM Programming - April, 2022</h3><h4>Thanks to <a target=_blank title=https://stackoverflow.com/questions/41199841/use-emoji-as-css-border href='//stackoverflow.com/questions/41199841/use-emoji-as-css-border'>Use Emoji as CSS Border</a></h4>
</td><td style=vertical-align:top;>
<form id=myform method=POST action=./simple_card.php>
<table border=18 style=background-color:yellow;>
<tr><th>Words</th><th><input id=subbut type=submit value=Post style=background-color:pink;display:none;></input> CSS</th></tr>
<tr><td style=vertical-align:top;><textarea id=words name=words rows=40 onblur=" showb(); isih=this.value; if (isih.indexOf(String.fromCharCode(10)) != -1) { while (isih.indexOf(String.fromCharCode(10)) != -1) { isih=isih.replace(String.fromCharCode(10),'<br>'); } } document.getElementById('box').innerHTML=isih; ">Hello</textarea></td>
<td style=vertical-align:top;><textarea id=css name=css cols=52 rows=40 onblur=" showb(); iframeit(this); " title='Can use, within that SVG defining the card border, an Emoji Menu entry (eg. control-command-space for macOS or Mac OS X, logo key + . (period) for Windows, control=space for iOS, top left + for Android keyboard).'><style>
.box {
width: 300px;
/* our SVG's width and height is 30px, so we need to keep the width and height multiple of 30 to avoid cutting */
height: 240px;
position: relative;
/* to center the text */
display: flex;
justify-content: center;
align-items: center;
}
.box:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='30' width='30'%3E%3Ctext x='50%25' y='50%25' dominant-baseline='middle' text-anchor='middle'%3E🎄%3C/text%3E%3C/svg%3E");
--mask: linear-gradient(#000, #000) content-box,
linear-gradient(#000, #000);
-webkit-mask: var(--mask);
mask: var(--mask);
-webkit-mask-composite: source-out;
padding: 30px;
}
</style>
</textarea></td></tr></table>
<div id=eof style=display:none;></div>
</form>
</td></tr></table>
<iframe name=ifp id=ifp style=display:none; src=''></iframe>
<div id=spares style=display:none;></div>
<iframe name=jfp id=jfp style=display:none; src=''></iframe>
</body>
</html>