<!doctype html>
<html>
<head>
<title>Gradient Creations - RJM Programming - August, 2020</title>
<script type='text/javascript'>
var sdih='', osdih='', lastwhite='', lasttransparent='';
var prepassedg='';
var from='', msg='';
var bcols=['red','#ff0000'
,'green','#00ff00'
,'white','#FFFFFF'
,'black','#000000'
,'blue','#0000ff'
,'pink','#ffc0cb'
,'lightpink','#ffb6c1'
,'hotpink','#ff69b4'
,'deeppink','#ff1493'
,'palevioletred','#db7093'
,'mediumvioletred','#c71585'
,'lightsalmon','#ffa07a'
,'salmon','#fa8072'
,'darksalmon','#e9967a'
,'lightcoral','#f08080'
,'indianred','#cd5c5c'
,'crimson','#dc143c'
,'firebrick','#b22222'
,'darkred','#8b0000'
,'red','#ff0000'
,'orangered','#ff4500'
,'tomato','#ff6347'
,'coral','#ff7f50'
,'darkorange','#ff8c00'
,'orange','#ffa500'
,'yellow','#ffff00'
,'lightyellow','#ffffe0'
,'lemonchiffon','#fffacd'
,'lightgoldenrodyellow','#fafad2'
,'papayawhip','#ffefd5'
,'moccasin','#ffe4b5'
,'peachpuff','#ffdab9'
,'palegoldenrod','#eee8aa'
,'khaki','#f0e68c'
,'darkkhaki','#bdb76b'
,'gold','#ffd700'
,'cornsilk','#fff8dc'
,'blanchedalmond','#ffebcd'
,'bisque','#ffe4c4'
,'navajowhite','#ffdead'
,'wheat','#f5deb3'
,'burlywood','#deb887'
,'tan','#d2b48c'
,'rosybrown','#bc8f8f'
,'sandybrown','#f4a460'
,'goldenrod','#daa520'
,'darkgoldenrod','#b8860b'
,'peru','#cd853f'
,'chocolate','#d2691e'
,'saddlebrown','#8b4513'
,'sienna','#a0522d'
,'brown','#a52a2a'
,'maroon','#800000'
,'olive','#808000'
,'olivedrab','#6b8e23'
,'yellowgreen','#9acd32'
,'limegreen','#32cd32'
,'lime','#00ff00'
,'lawngreen','#7cfc00'
,'chartreuse','#7fff00'
,'greenyellow','#adff2f'
,'springgreen','#00ff7f'
,'mediumspringgreen','#00fa9a'
,'lightgreen','#90ee90'
,'palegreen','#98fb98'
,'darkseagreen','#8fbc8f'
,'mediumseagreen','#3cb371'
,'seagreen','#2e8b57'
,'forestgreen','#228b22'
,'green','#008000'
,'darkgreen','#006400'
,'mediumaquamarine','#66cdaa'
,'aqua','#00ffff'
,'cyan','#00ffff'
,'lightcyan','#e0ffff'
,'paleturquoise','#afeeee'
,'aquamarine','#7fffd4'
,'turquoise','#40e0d0'
,'mediumturquoise','#48d1cc'
,'darkturquoise','#00ced1'
,'lightseagreen','#20b2aa'
,'cadetblue','#5f9ea0'
,'darkcyan','#008b8b'
,'teal','#008080'
,'lightsteelblue','#b0c4de'
,'powderblue','#b0e0e6'
,'lightblue','#add8e6'
,'skyblue','#87ceeb'
,'lightskyblue','#87cefa'
,'deepskyblue','#00bfff'
,'dodgerblue','#1e90ff'
,'cornflowerblue','#6495ed'
,'steelblue','#4682b4'
,'royalblue','#4169e1'
,'blue','#0000ff'
,'mediumblue','#0000cd'
,'darkblue','#00008b'
,'navy','#000080'
,'midnightblue','#191970'
,'thistle','#d8bfd8'
,'plum','#dda0dd'
,'violet','#ee82ee'
,'orchid','#da70d6'
,'fuchsia','#ff00ff'
,'magenta','#ff00ff'
,'mediumorchid','#ba55d3'
,'mediumpurple','#9370db'
,'blueviolet','#8a2be2'
,'darkviolet','#9400d3'
,'darkorchid','#9932cc'
,'darkmagenta','#8b008b'
,'purple','#800080'
,'indigo','#4b0082'
,'darkslateblue','#483d8b'
,'rebeccapurple','#663399'
,'slateblue','#6a5acd'
,'mediumslateblue','#7b68ee'
,'snow','#fffafa'
,'honeydew','#f0fff0'
,'mintcream','#f5fffa'
,'azure','#f0ffff'
,'aliceblue','#f0f8ff'
,'ghostwhite','#f8f8ff'
,'whitesmoke','#f5f5f5'
,'seashell','#fff5ee'
,'beige','#f5f5dc'
,'oldlace','#fdf5e6'
,'floralwhite','#fffaf0'
,'ivory','#fffff0'
,'antiquewhite','#faebd7'
,'linen','#faf0e6'
,'lavenderblush','#fff0f5'
,'mistyrose','#ffe4e1'
,'gainsboro','#dcdcdc'
,'lightgrey','#d3d3d3'
,'silver','#c0c0c0'
,'darkgray','#a9a9a9'
,'gray','#808080'
,'dimgray','#696969'
,'lightslategray','#778899'
,'slategray','#708090'
,'darkslategray','#2f4f4f'];
function islasttransparent(indx, pcol) {
if (('' + indx) == ('' + lasttransparent)) {
//lasttransparent='';
return 'transparent';
}
return pcol;
}
function lookup(tv,tvo) {
if (tv.toLowerCase() == 'transparent') {
lasttransparent=tvo.id.substring(1);
changeit();
} else {
for (var ijk=0; ijk<bcols.length; ijk++) {
if (bcols[ijk].toLowerCase().replace(/\#/g,'').replace(/\;/g,'').replace(/\-/g,'').replace(/\_/g,'').replace(/\ /g,'') == tv.toLowerCase().replace(/\#/g,'').replace(/\;/g,'').replace(/\-/g,'').replace(/\_/g,'').replace(/\ /g,'')) {
if (eval(ijk % 2) == 1) {
document.getElementById(tvo.id.substring(1)).value=tv;
tvo.value='';
changeit();
} else {
if (bcols[eval(1 + ijk)].toLowerCase() == '#ffffff') { lastwhite=tvo.id.substring(1); }
document.getElementById(tvo.id.substring(1)).value=bcols[eval(1 + ijk)];
tvo.value='';
changeit();
}
}
}
}
}
function hexdec(hexString) { // thanks to https://locutus.io/php/math/hexdec/
// discuss at: https://locutus.io/php/hexdec/
// original by: Philippe Baumann
// example 1: hexdec('that')
// returns 1: 10
// example 2: hexdec('a0')
// returns 2: 160
hexString = (hexString + '').replace(/[^a-f0-9]/gi, '');
return parseInt(hexString, 16);
}
function hex2dec(couleur, inopac) {
var dolR = couleur.toLowerCase().replace('#','').substring(0,2);
var dolrouge = hexdec(dolR);
var dolV = couleur.toLowerCase().replace('#','').replace(dolR,'').substring(0,2);
var dolvert = hexdec(dolV);
var dolB = couleur.toLowerCase().replace('#','').replace(dolR,'').replace(dolV,'').substring(0,2);
var dolbleu = hexdec(dolB);
if (('' + inopac).replace('1.0','') != '') {
return 'rgba(' + dolrouge + ',' + dolvert + ',' + dolbleu + ',' + inopac + ')';
} else {
return couleur.toLowerCase();
}
}
function changeit() {
var tdlb='background: ' + document.getElementById('stype').value + '(' + document.getElementById('sdirection').value;
if (document.getElementById('sdirection').value == '' && document.getElementById('iangle').value != '0') {
tdlb='background: ' + document.getElementById('stype').value + '(' + document.getElementById('iangle').value + 'deg';
}
if (tdlb.indexOf(' at center') != -1 && document.getElementById('iat').value != '') {
if (document.getElementById('iat').value.indexOf(' at ') != -1) {
tdlb=tdlb.replace(' at center', document.getElementById('iat').value);
} else {
tdlb=tdlb.replace(' at center', ' at ' + document.getElementById('iat').value);
}
}
for (var ij=1; ij<=8; ij++) {
if (document.getElementById('o' + ij).value.replace('.0','') == '1' || ij <= 2) {
if (ij > 2) {
if (lastwhite == ('c' + ij) || document.getElementById('c' + ij).value.replace('#ffffff','') != '') {
tdlb+=(',' + islasttransparent(('c' + ij),hex2dec(document.getElementById('c' + ij).value, document.getElementById('o' + ij).value)));
if (document.getElementById('hcs' + ij).value.indexOf('%') != -1) {
tdlb+=' ' + document.getElementById('hcs' + ij).value;
}
}
} else {
tdlb+=(',' + islasttransparent(('c' + ij),hex2dec(document.getElementById('c' + ij).value, document.getElementById('o' + ij).value)));
if (document.getElementById('hcs' + ij).value.indexOf('%') != -1) {
tdlb+=' ' + document.getElementById('hcs' + ij).value;
}
}
} else if (lastwhite == ('c' + ij) || document.getElementById('c' + ij).value.replace('#ffffff','') != '' || document.getElementById('o' + ij).value.replace('.0','') != '1') {
tdlb+=(',' + islasttransparent(('c' + ij),hex2dec(document.getElementById('c' + ij).value, document.getElementById('o' + ij).value)));
if (document.getElementById('hcs' + ij).value.indexOf('%') != -1) {
tdlb+=' ' + document.getElementById('hcs' + ij).value;
}
}
}
tdlb+=')';
lastwhite='';
//alert(document.getElementById('stype').value + ' ... ' + tdlb.replace(',,',',').replace('(,','(').replace('background:','').trim());
document.getElementById('tdlook').style.background=tdlb.replace(',,',',').replace('(,','(').replace('background:','').trim();
//document.getElementById('tdcss').innerHTML=tdlb.replace(',,',',').replace('(,','(') + ';';
document.getElementById('dfix').innerHTML=tdlb.replace(',,',',').replace('(,','(') + ';';
//lasttransparent='';
}
function preemailit(ine) {
if (ine.indexOf('@') != -1) {
emailit(ine);
} else if (ine != '') {
toize(ine);
}
}
function emailit(defe) {
document.getElementById('ih').value=document.getElementById('tdlook').innerHTML.replace(/\<br\>/g,String.fromCharCode(10));
var em='';
if (defe.indexOf('@') != -1) {
em=defe
} else {
em=prompt('Email to (append a space to just show the table cell with the gradient)?', '');
}
if (em == null) { em=''; }
if (em.indexOf('@') != -1) {
document.getElementById('from').value=em;
if (document.URL.toLowerCase().indexOf('rjmprogramming.com.au') != -1) {
var xzhr = new XMLHttpRequest();
var xform=new FormData();
xform.append('inline','');
xform.append('to',em.trim());
if (from.indexOf('@') != -1) { xform.append('cc',from.trim()); }
if (em.trim() != em) {
if (document.getElementById('gtd').innerHTML == '') {
xform.append('subj','Gradient Creation');
} else {
xform.append('subj',document.getElementById('tdlook').innerHTML.replace(/\<br\>/g,' '));
}
var cbgtd=document.getElementById('tdlook').getBoundingClientRect();
xform.append('body','<body><table>' + document.getElementById('gtd').outerHTML.replace(' style="', ' style="width:' + ('' + cbgtd.width).split('.')[0] + 'px;min-width:' + ('' + cbgtd.width).split('.')[0] + 'px;min-height:' + ('' + cbgtd.height).split('.')[0] + 'px;height:' + ('' + cbgtd.height).split('.')[0] + 'px;').replace(' style="c', ' style="width:' + ('' + cbgtd.width).split('.')[0] + 'px;min-width:' + ('' + cbgtd.width).split('.')[0] + 'px;min-height:' + ('' + cbgtd.height).split('.')[0] + 'px;height:' + ('' + cbgtd.height).split('.')[0] + 'px;c') + '</table></body>');
} else {
xform.append('subj','Gradient Creation');
xform.append('body',(document.body.outerHTML.split('</form>')[0] + '</form></body>').replace(/NONE\;/g, 'inline-block;').replace('<div ','<input type=text style=width:50%; ').replace('>background:', ' value="').replace('</div>', '"></input>').replace('"></textarea>', '">' + document.getElementById('tdlook').innerHTML.replace(/\<br\>/g,String.fromCharCode(10)) + '</textarea>'));
}
xzhr.open('post','//www.rjmprogramming.com.au/HTMLCSS/emailhtml.php',true);
xzhr.send(xform);
} else {
if (document.getElementById('gtd').innerHTML == '') {
document.getElementById('asms').href='mailto:' + em.trim() + '?subject=' + encodeURIComponent('Gradient Creation') + '&body=' + encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?gradient=' + encodeURIComponent(encodeURIComponent(document.getElementById('dfix').innerHTML.replace('background: ','').replace('background:','').replace(');',')').replace(';',''))));
} else {
document.getElementById('asms').href='mailto:' + em.trim() + '?subject=' + encodeURIComponent(document.getElementById('tdlook').innerHTML) + '&body=' + encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?gradient=' + encodeURIComponent(encodeURIComponent(document.getElementById('dfix').innerHTML.replace('background: ','').replace('background:','').replace(');',')').replace(';',''))));
}
document.getElementById('asms').click();
}
}
}
function toize(defe) {
document.getElementById('ih').value=document.getElementById('tdlook').innerHTML.replace(/\<br\>/g,String.fromCharCode(10));
var em='';
if (defe.trim() != '') {
em=defe
} else {
em=prompt('SMS to?', '');
}
if (em == null) { em=''; }
if (em.trim() != '') {
document.getElementById('from').value=em;
document.getElementById('asms').href='sms:' + em + '&body=' + encodeURIComponent(document.URL.split('#')[0].split('?')[0] + '?gradient=' + encodeURIComponent(encodeURIComponent(document.getElementById('dfix').innerHTML.replace('background: ','').replace('background:','').replace(');',')').replace(';',''))));
document.getElementById('asms').click();
}
return true;
}
function amsg() {
if (msg != '') {
alert(msg);
}
msg='';
}
function checkol() {
from=location.search.split('from=')[1] ? decodeURIComponent(location.search.split('from=')[1].split('&')[0]).replace(/\+/g,' ') : '';
var passedg=location.search.split('gradient=')[1] ? decodeURIComponent(location.search.split('gradient=')[1].split('&')[0]).replace(/\+/g,' ') : '';
var tois=location.search.split('to=')[1] ? decodeURIComponent(location.search.split('to=')[1].split('&')[0]).replace(/\+/g,' ') : '';
var ihis=location.search.split('ih=')[1] ? decodeURIComponent(location.search.split('ih=')[1].split('&')[0]).replace(/\+/g,' ') : '';
if (passedg != '') {
prepassedg=passedg;
while (ihis.indexOf(String.fromCharCode(10)) != -1) {
ihis=ihis.replace(String.fromCharCode(10),"<br>");
}
document.getElementById('dfix').innerHTML=('background: ' + passedg + ';').replace(';;',';');
document.getElementById('tdlook').innerHTML=ihis;
document.getElementById('tdlook').style.background=passedg.replace(',,',',').replace('(,','(').replace('background:','').replace(';','').trim();
setTimeout(postpop,2000);
if (tois.indexOf('@') != -1) {
emailit(tois);
msg=('The look of this webpage was emailed to ' + tois);
from='';
document.getElementById('from').value='';
setTimeout(amsg, 2000);
}
}
}
function postpop() {
if (prepassedg != '') {
//alert(prepassedg);
document.getElementById('dfix').innerHTML=('background: ' + prepassedg + ';').replace(';;',';');
document.getElementById('tdlook').style.background=prepassedg.replace(',,',',').replace('(,','(').replace('background:','').replace(';','').trim();
}
}
function popih(ihs) {
document.getElementById('ih').value=ihs.replace(/\<br\>/g,String.fromCharCode(10));
}
</script>
</head>
<body onload="sdih=document.getElementById('sdirection').innerHTML; osdih=document.getElementById('rdirection').innerHTML; checkol();">
<h1>Gradient Creations <span data-onfocus="document.getElementById('semail').innerHTML='';" data-title='Email to (append a space to just show the table cell with the gradient)?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=emailit(''); id=semail>📧</span> <span data-onfocus="document.getElementById('semail').innerHTML='';" data-title='SMS to?' data-contenteditable=true data-onblur=preemail(this.innerHTML); onclick=toize(''); id=ssms>📟</span></h1>
<h3>RJM Programming - August, 2020</h3>
<form action='http://www.rjmprogramming.com.au/HTMLCSS/gradient_creations.htm' method=GET>
<table style=width:100%; border=5>
<tr><th>Gradient<br>Type</th><th>Direction</th><th colspan=8>Colours</th></tr>
<tr><td><select size=4 onchange="if (this.value.indexOf('radial') != -1) { if (document.getElementById('sdirection').innerHTML == sdih) { document.getElementById('sdirection').innerHTML=osdih; document.getElementById('iangle').value='0'; document.getElementById('iangle').style.display='none'; document.getElementById('sdirection').value=''; document.getElementById('iat').style.display='inline-block'; } } else { if (document.getElementById('sdirection').innerHTML != sdih) { document.getElementById('sdirection').innerHTML=sdih; document.getElementById('iangle').value='0'; document.getElementById('iangle').style.display='inline-block'; document.getElementById('iat').style.display='none'; document.getElementById('sdirection').value=''; } } changeit();" id=stype><option value='linear-gradient' selected>linear-gradient</option><option value='repeating-linear-gradient'>repeating-linear-gradient</option><option value='radial-gradient'>radial-gradient</option><option value='repeating-radial-gradient'>repeating-radial-gradient</option></select></td>
<td><select onchange="changeit();" id=sdirection><option value=''>As per angle below</option>
<option value='to right,'>to right</option>
<option value='to left,'>to left</option>
<option value='to top,'>to top</option>
<option value='to bottom,'>to bottom</option>
<option value='to right top,'>to right top</option>
<option value='to left top,'>to left top</option>
<option value='to right bottom,'>to right bottom</option>
<option value='to left bottom,'>to left bottom</option>
</select><br> ... at ... <input title='Angle in degrees' onblur="changeit();" onchange="changeit();" type=number min=-359 max=359 step=1 value=0 id=iangle></input>
<select style='display:none;' onchange="changeit();" id=rdirection><option value=''>Defaults</option>
<option value='ellipse farthest-corner at center,'>ellipse farthest-corner</option>
<option value='ellipse closest-side at center,'>ellipse closest-side</option>
<option value='ellipse closest-corner at center,'>ellipse closest-corner</option>
<option value='ellipse farthest-side at center,'>ellipse farthest-side</option>
<option value='circle farthest-corner at center,'>circle farthest-corner</option>
<option value='circle closest-side at center,'>circle closest-side</option>
<option value='circle closest-corner at center,'>circle closest-corner</option>
<option value='circle farthest-side at center,'>circle farthest-side</option>
</select> <input style='display:none;' onblur="changeit();" onchange="changeit();" type=text placeholder=' at center' title='position ... can be ... at 15% 34%' id='iat' value=''></input></td>
<td><input onblur="changeit();" onchange="changeit();" type=color id=c1 value='#ff0000'></input> <input onblur="changeit();" onchange="changeit();" type=text id=hcs1 value='' placeholder='Colour Stop %' style=width:120px;></input> <input onblur='lookup(this.value,this);' type=text id=sc1 placeholder='Colour by name'></input> Opacity: <input onblur="changeit();" onchange="changeit();" type=number id=o1 min=0.0 max=1.0 step=0.1 value='1.0'></input></td>
<td><input onblur="changeit();" onchange="changeit();" type=color id=c2 value='#0000ff'></input> <input onblur="changeit();" onchange="changeit();" type=text id=hcs2 value='' placeholder='Colour Stop %' style=width:120px;></input> <input onblur='lookup(this.value,this);' type=text id=sc2 placeholder='Colour by name'></input> Opacity: <input onblur="changeit();" onchange="changeit();" type=number id=o2 min=0.0 max=1.0 step=0.1 value='1.0'></input></td>
<td><input onblur="changeit();" onchange="changeit();" type=color id=c3 value='#ffffff'></input> <input onblur="changeit();" onchange="changeit();" type=text id=hcs3 value='' placeholder='Colour Stop %' style=width:120px;></input> <input onblur='lookup(this.value,this);' type=text id=sc3 placeholder='Colour by name'></input> Opacity: <input onblur="changeit();" onchange="changeit();" type=number id=o3 min=0.0 max=1.0 step=0.1 value='1.0'></input></td>
<td><input onblur="changeit();" onchange="changeit();" type=color id=c4 value='#ffffff'></input> <input onblur="changeit();" onchange="changeit();" type=text id=hcs4 value='' placeholder='Colour Stop %' style=width:120px;></input> <input onblur='lookup(this.value,this);' type=text id=sc4 placeholder='Colour by name'></input> Opacity: <input onblur="changeit();" onchange="changeit();" type=number id=o4 min=0.0 max=1.0 step=0.1 value='1.0'></input></td>
<td><input onblur="changeit();" onchange="changeit();" type=color id=c5 value='#ffffff'></input> <input onblur="changeit();" onchange="changeit();" type=text id=hcs5 value='' placeholder='Colour Stop %' style=width:120px;></input> <input onblur='lookup(this.value,this);' type=text id=sc5 placeholder='Colour by name'></input> Opacity: <input onblur="changeit();" onchange="changeit();" type=number id=o5 min=0.0 max=1.0 step=0.1 value='1.0'></input></td>
<td><input onblur="changeit();" onchange="changeit();" type=color id=c6 value='#ffffff'></input> <input onblur="changeit();" onchange="changeit();" type=text id=hcs6 value='' placeholder='Colour Stop %' style=width:120px;></input> <input onblur='lookup(this.value,this);' type=text id=sc6 placeholder='Colour by name'></input> Opacity: <input onblur="changeit();" onchange="changeit();" type=number id=o6 min=0.0 max=1.0 step=0.1 value='1.0'></input></td>
<td><input onblur="changeit();" onchange="changeit();" type=color id=c7 value='#ffffff'></input> <input onblur="changeit();" onchange="changeit();" type=text id=hcs7 value='' placeholder='Colour Stop %' style=width:120px;></input> <input onblur='lookup(this.value,this);' type=text id=sc7 placeholder='Colour by name'></input> Opacity: <input onblur="changeit();" onchange="changeit();" type=number id=o7 min=0.0 max=1.0 step=0.1 value='1.0'></input></td>
<td><input onblur="changeit();" onchange="changeit();" type=color id=c8 value='#ffffff'></input> <input onblur="changeit();" onchange="changeit();" type=text id=hcs8 value='' placeholder='Colour Stop %' style=width:120px;></input> <input onblur='lookup(this.value,this);' type=text id=sc8 placeholder='Colour by name'></input> Opacity: <input onblur="changeit();" onchange="changeit();" type=number id=o8 min=0.0 max=1.0 step=0.1 value='1.0'></input></td>
</tr>
<tr style="height:60vh;" id=gtd><td onblur=popih(this.innerHTML); colspan=10 id=tdlook style="color:white;text-align:center;vertical-align:middle;background: linear-gradient(to right, #ff0000, #0000ff);" contenteditable=true></td></tr>
<tr><td colspan=10 id=tdcss style='text-align:center;' title='CSS'><div title='CSS' name=gradient id=dfix contenteditable=true onblur="document.getElementById('tdlook').style.background=this.innerHTML.replace(',,',',').replace('(,','(').replace('background:','').replace(';','').trim();">background: linear-gradient(#ff0000, #0000ff);</div><input type=submit style="display:NONE;" value=Email></input> <input name=to id=to value="" style=display:NONE; type=text placeholder=" ... to emailee background at left"></input> <textarea style=display:NONE; name=ih id=ih value=''></textarea><input name=from id=from value="" style=display:NONE; type=hidden></input></td></tr>
</table>
</form>
<a target=_top href='sms:' id=asms style=display:none;>SMS</a>
<input type=text style="position:absolute;top:-200px;left:-200px;" value=""></input>
</body>
</html>