<doctype html>
<head>
<title>Flowchart - RJM Programming - January, 2019 ... Thanks to https://enjoycss.com/</title>
<style>
.cglow {
box-shadow-bottom-right-radius: 50%; // thanks to https://stackoverflow.com/questions/2714765/using-border-radius-and-box-shadow-together-css
box-shadow-bottom-left-radius: 50%;
box-shadow-top-right-radius: 50%;
box-shadow-top-left-radius: 50%;
-webkit-animation: cglow 1s ease-in-out infinite alternate;
-moz-animation: cglow 1s ease-in-out infinite alternate;
animation: cglow 1s ease-in-out infinite alternate;
-webkit-border-radius: 50%;
border-radius: 50%;
}
.glow {
-webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate;
}
/* Thanks to https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_glowing_text */
@-webkit-keyframes cglow {
from {
box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;
box-shadow-bottom-right-radius: 50%; // thanks to https://stackoverflow.com/questions/2714765/using-border-radius-and-box-shadow-together-css
box-shadow-bottom-left-radius: 50%;
box-shadow-top-right-radius: 50%;
box-shadow-top-left-radius: 50%;
}
to {
box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;
box-shadow-bottom-right-radius: 50%; // thanks to https://stackoverflow.com/questions/2714765/using-border-radius-and-box-shadow-together-css
box-shadow-bottom-left-radius: 50%;
box-shadow-top-right-radius: 50%;
box-shadow-top-left-radius: 50%;
}
}
@-webkit-keyframes glow {
from {
box-shadow: 0 0 3px #fff, 0 0 5px #fff, 0 0 37px #e60073, 0 0 9px #e60073, 0 0 11px #e60073, 0 0 13px #e60073, 0 0 15px #e60073;
}
to {
box-shadow: 0 0 24px #fff, 0 0 6px #ff4da6, 0 0 8px #ff4da6, 0 0 10px #ff4da6, 0 0 12px #ff4da6, 0 0 14px #ff4da6, 0 0 16px #ff4da6;
}
}
.diamond {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 0;
height: 0;
position: relative;
top: 0;
border: 50px solid rgba(0,0,0,0);
border-top-width: 0;
border-bottom: 70px solid yellow; //#1abc9c;
font: normal 70%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
//-o-text-overflow: visible; //clip;
//text-overflow: visible; //clip;
white-space: nowrap;
overflow: visible;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
/* -webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate; */
}
.diamond::after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 0;
height: 0;
position: absolute;
content: "";
top: 70px;
left: -50px;
border: 50px solid rgba(0,0,0,0);
border-top: 70px solid yellow; //#1abc9c;
font: normal 70%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
//-o-text-overflow: visible; //clip;
//text-overflow: visible; //clip;
white-space: nowrap;
overflow: visible;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.diamond:hover {
overflow: visible;
}
.circle {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-align: center;
width: 200px;
height: 200px;
border: none;
-webkit-border-radius: 50%;
border-radius: 50%;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: pink; //#1abc9c;
opacity:0.5;
/* -webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate; */
}
.oval {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
text-align: center;
width: 200px;
height: 100px;
border: none;
-webkit-border-radius: 50%;
border-radius: 50%;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: lightgreen; //#1abc9c;
/* -webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate; */
}
.rectangle {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 200px;
height: 100px;
border: none;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: lightblue; //#1abc9c;
/* -webkit-animation: glow 1s ease-in-out infinite alternate;
-moz-animation: glow 1s ease-in-out infinite alternate;
animation: glow 1s ease-in-out infinite alternate; */
}
</style>
<script type='text/javascript'>
var ciss=' class=glow', doglow=true, xciss=' class=cglow';
var idarr=[];
var undoid=-1;
var redoid=-1;
var ambeingsupervised=false;
var bodyclick=true, nonbodyclick=0, div1=null, div2=null, dval='';
var x=0,y=0,lastx=0,lasty=0,icnt=0,jcnt=0;
var wording="Start", shape="oval";
var wwok=true;
var myselsc='', urlis='';
var mcnt=0;
var outst='';
var bris='<br>';
var gpreb='';
var ncol=0;
var vscnt=0;
var cat='?';
var noeolp='Now other end of line please. ';
var wdef='';
var bcols=['red','yellow','green','blue','cyan','magenta','pink','lightblue','lightgreen','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'];
var inp="Flowchart";
var withvenn="?venn=y", withoutvenn="";
var venn="Venn Diagram", novenn="Flowchart";
var dfrom='.php', dto='.html';
var h1is='<h1 style=display:inline-block; id="myemail"></h1> <h1 style=display:inline-block; id="myh1">Flowchart</h1> or <input style=display:inline-block; id=itbut type=button onclick=location.href=document.URL.split(String.fromCharCode(35))[0].split(String.fromCharCode(63))[0].replace(dfrom,dto)+withvenn; value="Venn Diagram"></input>';
h1is=location.search.split('venn=')[1] ? '<h1 style=display:inline-block; id="myemail"></h1> <h1 style=display:inline-block; id="myh1">' + venn + '</h1> or <input id=itbut style=display:inline-block; type=button onclick=location.href=document.URL.split(String.fromCharCode(35))[0].split(String.fromCharCode(63))[0].replace(dfrom,dto)+withoutvenn; value="' + novenn + '"></input>' : h1is;
if (h1is.indexOf('"myh1">Venn') != -1) { inp="Venn Diagram"; cat="circle"; wording=cat; noeolp='Is this a new circle pointing or you want to place value? '; }
function overdiv(adiv, acol) {
if (adiv.className == 'diamond') {
adiv.style.borderTop='70px solid ' + acol;
adiv.style.borderBottom='70px solid ' + acol;
} else {
adiv.style.backgroundColor=acol;
}
return adiv;
}
function somuchmore(inst) {
var mycol='', r=0, g=0, b=0, arr='0123456789abcdef'.split('');
outst=inst;
if (h1is.indexOf('"myh1">Venn') != -1) {
outst+='<div id=dcolour style=display:inline-block;><input onclick=notc(); id=icolour type="color" onchange="overdiv(div1,this.value);" value="#90ee90"></input></div> <div id=dpf style=display:NONE;><input onclick="wnotc(); setTimeout(preprocess,12000);" style=display:inline-block; id=file type=file name=file></input><span class=readBytesButtons><button style=display:none; data-endbyte=4 data-startbyte=0>1-5</button><button style=display:none; data-endbyte=14 data-startbyte=5>6-15</button><button style=display:none; data-endbyte=7 data-startbyte=6>7-8</button><button name=button id=button value=Process data-endbyte=0 data-startbyte=0>Process</button></span></div>';
} else if (idarr.length == 0 && inst == '') {
outst+='<div id=dcolour style=display:inline-block;><input onclick=notc(); id=icolour type="color" onchange="overdiv(div1,this.value);" value="#90ee90"></input></div> <div id=dpf style=display:NONE;><input onclick="wnotc(); setTimeout(preprocess,12000);" style=display:inline-block; id=file type=file name=file></input><span class=readBytesButtons><button style=display:none; data-endbyte=4 data-startbyte=0>1-5</button><button style=display:none; data-endbyte=14 data-startbyte=5>6-15</button><button style=display:none; data-endbyte=7 data-startbyte=6>7-8</button><button name=button id=button value=Process data-endbyte=0 data-startbyte=0>Process</button></span></div>';
} else if (inst != '' && div1 == null) {
outst+='<div id=dcolour style=display:inline-block;><input onclick=notc(); id=icolour type="color" onchange="overdiv(div1,this.value);" value="#90ee90"></input></div> <div id=dpf style=display:NONE;><input onclick="wnotc(); setTimeout(preprocess,12000);" style=display:inline-block; id=file type=file name=file></input><span class=readBytesButtons><button style=display:none; data-endbyte=4 data-startbyte=0>1-5</button><button style=display:none; data-endbyte=14 data-startbyte=5>6-15</button><button style=display:none; data-endbyte=7 data-startbyte=6>7-8</button><button name=button id=button value=Process data-endbyte=0 data-startbyte=0>Process</button></span></div>';
} else {
if (inst == '') { div1=document.getElementById(idarr[eval(-1 + idarr.length)]); }
mycol=('' + div1.style.backgroundColor);
if (mycol == '') {
if (div1.outerHTML.indexOf('background-color:') != -1) {
mycol=div1.outerHTML.split('background-color:')[1].split(';')[0].trim();
} else if (div1.outerHTML.indexOf(' class="circle"') != -1) {
mycol='#ffc0cb';
} else if (div1.outerHTML.indexOf(' class="oval"') != -1) {
mycol='#90ee90';
} else if (div1.outerHTML.indexOf(' class="diamond"') != -1) {
mycol='#ffff00';
} else if (div1.outerHTML.indexOf(' class="rectangle"') != -1) {
mycol='#add8e6';
} else {
mycol='#90ee90';
}
}
if (mycol.indexOf('rgb') != -1) {
r=eval(mycol.split('(')[1].split(',')[0].trim());
g=eval(mycol.split('(')[1].split(',')[1].trim());
b=eval(mycol.split('(')[1].split(',')[2].split(')')[0].split(',')[0].trim());
//alert('r=' + r + ' and g=' + g + ' and b=' + b);
mycol ='#' + arr[(r-(r % 16)) / 16] + arr[r % 16] + arr[(g-(g % 16)) / 16] + arr[g % 16] + arr[(b-(b % 16)) / 16] + arr[b % 16];
}
outst+='<div id=dcolour style=display:inline-block;><input onclick=notc(); id=icolour type="color" onchange="overdiv(div1,this.value);" value="' + mycol + '"></input></div> <div id=dpf style=display:NONE;><input onclick="wnotc(); setTimeout(preprocess,12000);" style=display:inline-block; id=file type=file name=file></input><span class=readBytesButtons><button style=display:none; data-endbyte=4 data-startbyte=0>1-5</button><button style=display:none; data-endbyte=14 data-startbyte=5>6-15</button><button style=display:none; data-endbyte=7 data-startbyte=6>7-8</button><button name=button id=button value=Process data-endbyte=0 data-startbyte=0>Process</button></span></div>';
if (inst == '' && document.getElementById('dcolour')) {
ncol++;
document.getElementById('dcolour').innerHTML='<input onclick=notc(); id=icolour' + ncol + ' type="color" onchange="overdiv(div1,this.value);" value="' + mycol + '"></input>';
//alert(document.getElementById('dcolour').innerHTML);
}
}
//alert(outst);
return inst;
}
function tfc(intb) {
var outtb=intb.replace(';','').trim();
if (outtb.length == 7) {
if (outtb.substring(0,1) == '#') {
if (outtb.toLowerCase().substring(1).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,'').replace(/a/g,'').replace(/b/g,'').replace(/c/g,'').replace(/d/g,'').replace(/e/g,'').replace(/f/g,'') == '') {
if (div1 != null) {
overdiv(div1,outtb);
document.getElementById('dstart').innerHTML=cat;
return cat;
}
}
}
}
return intb;
}
function preprocess() {
//alert(254);
if (document.getElementById("file").value != '') {
//alert(2254);
eh();
document.getElementById('button').click();
//alert(354);
document.getElementById("file").value='';
//alert(454);
bodyclick=true;
//nonbodyclick=0;
}
}
function process(infilecontents) {
//alert(754);
if (infilecontents != null) {
//alert(99);
//alert(1754);
notc();
if (div1.outerHTML.indexOf('diamond') != -1) {
if (gpreb == '') {
div1.style.backgroundImage="URL(data:image/png;base64," + btoa(infilecontents) + ")";
} else {
div1.style.background="linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL(data:image/png;base64," + btoa(infilecontents) + ")";
}
gpreb='';
//alert(2754);
document.getElementById('dcontentd').innerHTML+=div1.outerHTML.replace('diamond','oval').replace(' id="', ' id="z').replace(' style="', ' style="opacity:0.1;z-index:90;');
//alert(document.getElementById('z' + div1.id).outerHTML);
idarr.push('z' + div1.id);
} else {
if (gpreb == '') {
div1.style.backgroundImage="URL('data:image/png;base64," + btoa(infilecontents) + "')";
} else {
div1.style.background="linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),URL('data:image/png;base64," + btoa(infilecontents) + "')";
}
gpreb='';
}
//alert(999);
//document.getElementById('dpf').style.display='inline-block';
//alert(9999);
wording=cat;
nonbodyclick=0;
document.getElementById('dsave').innerHTML=document.getElementById('dsave').innerHTML.replace(somuchmore(noeolp), '');
}
}
function readBlob(opt_startByte, opt_stopByte) {
//alert(33);
wnotc();
var files = document.getElementById("file").files;
//alert(333);
if (!files.length) {
//alert("Please select a file!");
return;
} else {
//alert(54);
//setTimeout(preprocess, 3000);
w = files[0].name;
//document.getElementById("fil").value = w;
}
var file = files[0];
var start = parseInt(opt_startByte) || 0;
var stop = parseInt(opt_stopByte) || file.size - 1;
//alert(stop);
var reader = new FileReader();
// If we use onloadend, we need to check the readyState.
reader.onloadend = function(evt) {
if (evt.target.readyState == FileReader.DONE) { // DONE == 2
//alert(77);
process(evt.target.result);
//alert(777);
}
};
var blob = file.slice(start, stop + 1);
reader.readAsBinaryString(blob);
}
function eh() {
//alert(45);
document.querySelector('.readBytesButtons').addEventListener('click', function(evt) {
//alert(145);
//alert(2);
wnotc();
if (evt.target.tagName.toLowerCase() == 'button') {
var startByte = evt.target.getAttribute('data-startbyte');
var endByte = evt.target.getAttribute('data-endbyte');
//alert(22);
readBlob(startByte, endByte);
//alert(222);
}
}, false);
}
function doundo() {
notc();
if (undoid >= 0) {
redoid=undoid;
document.getElementById(idarr[undoid]).style.display='none';
document.getElementById('iredo').style.display='inline-block';
undoid--;
if (undoid < 0) {
document.getElementById('iundo').style.display='none';
}
}
}
function doredo() {
notc();
if (redoid >= 0 && redoid < idarr.length) {
undoid=redoid;
document.getElementById(idarr[redoid]).style.display='block';
document.getElementById('iundo').style.display='inline-block';
redoid++;
}
}
function recxy(event) {
var isok=true;
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('cliCk ' + wording + ' ' + bodyclick); }
//}
if (event.touches) { // thanks to https://stackoverflow.com/questions/24567441/how-do-i-detect-two-fingers-at-touchstart-in-javascript
if (event.touches.length > 1) { isok=false; }
}
if (isok) {
if (x == 0 && y == 0 && lastx == 0 && lasty == 0) {
if (event.clientX || event.clientY) {
x = event.clientX; // - elemLeft;
y = event.clientY; // - elemTop;
} else {
x = event.pageX; // - elemLeft;
y = event.pageY; // - elemTop;
}
lastx=x;
lasty=y;
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('Click ' + wording + ' ' + bodyclick); }
//}
setTimeout(xthen, 2000);
setTimeout(andthen, 1000);
} else {
if (event.clientX || event.clientY) {
if (x != event.clientX || y != event.clientY) {
lastx=x;
lasty=y;
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('ClIck ' + wording + ' ' + bodyclick); }
//}
setTimeout(xthen, 2000);
setTimeout(andthen, 1000);
//} else {
//document.title+=' ! ';
}
} else {
if (x != event.pageX || y != event.pageY) {
lastx=x;
lasty=y;
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('clicK ' + wording + ' ' + bodyclick); }
//}
setTimeout(xthen, 2000);
setTimeout(andthen, 1000);
//} else {
//document.title+=' ? ';
}
}
if (event.clientX || event.clientY) {
x = event.clientX; // - elemLeft;
y = event.clientY; // - elemTop;
} else {
x = event.pageX; // - elemLeft;
y = event.pageY; // - elemTop;
}
}
//alert('x=' + x + ' and y=' + y);
}
}
function butlater() {
bodyclick=true;
}
function clickme(dois) {
bodyclick=false;
if (nonbodyclick == 0) {
div1=dois;
} else if (nonbodyclick > 0) {
if (dois.id == div1.id) {
//document.title+=' n ' + dois.id + '*';
nonbodyclick--;
} else {
div2=dois;
}
} else if (nonbodyclick < 0) {
div1=dois;
nonbodyclick=0;
}
if (h1is.indexOf('"myh1">Venn') != -1) {
bodyclick=false;
nonbodyclick--;
wdef='';
var vdtitle='', vspare;
if (dois.innerHTML == '') {
wdef=prompt('Enter Venn Diagram circle title (and can separate its integer value by ~ or use it for line feeds), else will plot a new circle', '');
if (wdef == null) { wdef=''; }
if (wdef.indexOf('~') != -1) { vspare=wdef.split('~')[eval(-1 + wdef.split('~').length)]; vdtitle=wdef.substring(0, eval(-1 + eval('' + wdef.length) - eval('' + vspare.length))).replace(/\~/g,'<br>') + '<br>'; wdef=vspare; }
}
if (wdef == '') { wdef=prompt('If you enter an integer, will show this, else will plot a new circle', ''); }
if (wdef == null) { wdef=''; }
if ((wdef + ' ').substring(0,1) >= '0' && (wdef + ' ').substring(0,1) <= '9') {
//alert(div1.outerHTML + ' ' + '<span style="position:absolute;top:' + y + 'px;left:' + x + 'px;">' + wdef + '</span>');
if (vdtitle != '') { dois.innerHTML=' '; }
idarr.push("sp" + vscnt);
document.getElementById('dcontent').innerHTML+='<span id=sp' + vscnt + ' style="z-index:56;position:absolute;top:' + y + 'px;left:' + x + 'px;">' + vdtitle + wdef + '</span>';
vscnt++;
wdef='';
nonbodyclick=-1;
setTimeout(butlater, 1500);
} else {
bodyclick=true;
nonbodyclick=-1;
wdef="";
andthen();
}
}
nonbodyclick++;
}
function resetit() {
bodyclick=true;
}
function getOffset(el) { // thanks to https://stackoverflow.com/questions/8672369/how-to-draw-a-line-between-two-divs
var rect = el.getBoundingClientRect();
return {
left: rect.left + window.pageXOffset,
top: rect.top + window.pageYOffset,
width: rect.width || el.offsetWidth,
height: rect.height || el.offsetHeight
};
}
function connect() { // div1, div2) { //, color, thickness) { // draw a line connecting elements
wording=cat;
var notwithin=true;
var thisrect;
var thickness = 0;
var ioff=0;
var off1 = 0;
var off2 = 0;
off1 = getOffset(div1);
off2 = getOffset(div2);
// bottom right
var x1 = off1.left + off1.width;
var y1 = off1.top + off1.height;
notwithin=true;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
thisrect=div1.getBoundingClientRect();
if (lastx >= thisrect.left && lastx <= eval(thisrect.left + thisrect.width) && lasty >= thisrect.top && lasty <= eval(thisrect.top + thisrect.height)) {
notwithin=false;
} else {
x1=eval(thisrect.left + thisrect.width / 2);
y1=eval(thisrect.top + thisrect.height / 2);
}
}
if (notwithin && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
x2=x2;
} else {
x1=lastx;
y1=lasty;
}
// top right
var x2 = off2.left + off2.width;
var y2 = off2.top;
notwithin=true;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
thisrect=div2.getBoundingClientRect();
if (lastx >= thisrect.left && lastx <= eval(thisrect.left + thisrect.width) && lasty >= thisrect.top && lasty <= eval(thisrect.top + thisrect.height)) {
notwithin=false;
} else {
x2=eval(thisrect.left + thisrect.width / 2);
y2=eval(thisrect.top + thisrect.height / 2);
}
}
if (notwithin && navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
x2=x2;
} else {
x2=x;
y2=y;
}
// distance
var length = Math.sqrt(((x2-x1) * (x2-x1)) + ((y2-y1) * (y2-y1)));
// center
var cx = ((x1 + x2) / 2) - (length / 2);
var cy = ((y1 + y2) / 2) - (thickness / 2);
// angle
var angle = Math.atan2((y1-y2),(x1-x2))*(180/Math.PI);
// make hr
idarr.push("ld" + mcnt);
undoid=eval(-1 + idarr.length);
document.getElementById('iundo').style.display='inline-block';
var htmlLine = "<div" + ciss + " id=ld" + mcnt + " style='" + dval + "padding:0px;opacity:0.3; margin:0px; height:4px; position:absolute; left:" + eval(ioff + cx) + "px; top:" + eval(ioff + cy) + "px; width:" + length + "px; -moz-transform:rotate(" + angle + "deg); -webkit-transform:rotate(" + angle + "deg); -o-transform:rotate(" + angle + "deg); -ms-transform:rotate(" + angle + "deg); transform:rotate(" + angle + "deg);background: linear-gradient(to left, olive 80%, rgba(255,0,0,1) 20%);'> </div>";
mcnt++;
//
// alert(htmlLine);
return htmlLine; //document.body.innerHTML += htmlLine;
}
function xthen() {
if (nonbodyclick < -2) { nonbodyclick=0; }
}
function andthen() {
var brbr="<br><br>", biis='', preb='';
//if (document.getElementById('dpf')) {
// if (('' + document.getElementById('dpf').style.display).toLowerCase().indexOf('block') != -1) { alert('' + nonbodyclick + ' ' + document.getElementById('secpoint').innerHTML.indexOf('Now other end of line please.') + ' CLICK ' + wording + ' ' + bodyclick); }
//}
if (bodyclick && document.getElementById('secpoint').innerHTML.indexOf(noeolp.split('&')[0]) == -1) {
if (wording.replace('circle','').replace('?','') == '' && nonbodyclick >= 0) {
wording='';
while (wording == '' && wwok) {
if (h1is.indexOf('"myh1">Venn') != -1) { cat="circle"; wording=cat; } else {
wording=prompt("What wording do you want? (~ is carriage return) ... optional (space to) URL will be a background image (append ' /browse' to browse for background image) ... later an #ffffff type of colour can change a background colour (should the colour picker not work)", wdef);
}
if (wording == null) { wording=cat; } else { wording=tfc(wording); }
}
}
if (wording.replace('?','') != '') {
if (wording.toLowerCase().indexOf(' http') != -1) {
if (wording.split(' http')[0].split(' HTTP')[0].split(' Http')[0] != '') { preb='linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),'; }
biis='background:' + preb + 'URL(' + 'http' + wording.replace(' Http',' http').replace(' HTTP',' http').split(' http')[1] + ');';
wording=wording.split(' http')[0].split(' HTTP')[0].split(' Http')[0];
if ((biis.replace(');','') + '.jpg').toLowerCase().indexOf('/browse.') != -1) {
//alert(222);
biis='';
if (!document.getElementById('dpf')) {
if (document.getElementById('dsave').innerHTML != '') {
if (document.getElementById('dsave').innerHTML.indexOf('<') == -1) {
document.getElementById('dsave').innerHTML+='<input style=display:inline-block;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input> <input style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input> ' + outst + ' <br><input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input> <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>';
eh();
} else if (document.getElementById('dsave').innerHTML.indexOf('iemail') != -1 && document.getElementById('dsave').innerHTML.indexOf('isave') == -1) {
document.getElementById('dsave').innerHTML+=' <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>'; // <input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>';
}
}
}
//document.getElementById('dpf').style.display='inline-block';
wnotc();
gpreb=wording;
document.getElementById('file').click();
setTimeout(preprocess, 12000);
}
} else if (wording.toLowerCase().indexOf(' //') != -1) {
if (wording.split(' //')[0] != '') { preb='linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),'; }
biis='background:' + preb + 'URL(' + document.URL.split(':')[0] + '://' + wording.split(' //')[1] + ');';
wording=wording.split(' //')[0];
if ((biis.replace(');','') + '.jpg').toLowerCase().indexOf('/browse.') != -1) {
//alert(22);
biis='';
if (!document.getElementById('dpf')) {
if (document.getElementById('dsave').innerHTML != '') {
if (document.getElementById('dsave').innerHTML.indexOf('<') == -1) {
document.getElementById('dsave').innerHTML+='<input style=display:inline-block;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input> <input style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input> ' + outst + ' <br><input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input> <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>';
eh();
} else if (document.getElementById('dsave').innerHTML.indexOf('iemail') != -1 && document.getElementById('dsave').innerHTML.indexOf('isave') == -1) {
document.getElementById('dsave').innerHTML+=' <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>'; // <input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>';
}
}
}
//document.getElementById('dpf').style.display='inline-block';
wnotc();
gpreb=wording;
document.getElementById('file').click();
setTimeout(preprocess, 12000);
}
} else if (wording.toLowerCase().indexOf(' /') != -1) {
//alert(1);
if (wording.split(' /')[0] != '') { preb='linear-gradient(rgba(255,255,255,0.8),rgba(255,255,255,0.8)),'; }
//alert(11);
biis='background:' + preb + 'URL(' + document.URL.split('flowchart.')[0] + wording.split(' /')[1] + ');';
//alert(biis);
wording=wording.split(' /')[0];
//alert((biis.replace(');','') + '.jpg').toLowerCase().indexOf('/browse.'));
if ((biis.replace(');','') + '.jpg').toLowerCase().indexOf('/browse.') != -1) {
//alert(2);
biis='';
if (!document.getElementById('dpf')) {
if (document.getElementById('dsave').innerHTML != '') {
if (document.getElementById('dsave').innerHTML.indexOf('<') == -1) {
document.getElementById('dsave').innerHTML+='<input style=display:inline-block;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input> <input style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input> ' + outst + ' <br><input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input> <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>';
eh();
} else if (document.getElementById('dsave').innerHTML.indexOf('iemail') != -1 && document.getElementById('dsave').innerHTML.indexOf('isave') == -1) {
document.getElementById('dsave').innerHTML+=' <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>'; // <input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>';
}
}
}
//document.getElementById('dpf').style.display='inline-block';
wnotc();
gpreb=wording;
document.getElementById('file').click();
setTimeout(preprocess, 12000);
}
//alert(11111);
}
wording=wording.replace(/~/g, '<br>');
if ((wording.trim() + '~').indexOf('?~') != -1) {
shape="diamond";
brbr="<br>";
} else if (wording.trim().toLowerCase() == 'end' || wording.trim().toLowerCase() == 'start') {
shape='oval';
} else {
shape='rectangle';
}
icnt++;
wwok=false;
while (document.getElementById('d' + icnt)) {
icnt++;
}
idarr.push("d" + icnt);
undoid=eval(-1 + idarr.length);
if (h1is.indexOf('"myh1">Venn') != -1) {
shape="circle";
var bch=Math.floor(Math.random() * bcols.length);
if (shape == 'diamond') {
document.getElementById('dcontent').innerHTML+="<div" + xciss + " id=d" + icnt + " onclick='recxy(event); clickme(this);' class='" + shape + "' style='" + biis + "line-height:20px;background-color:" + bcols[bch] + ";opacity:0.5;position:absolute;left:" + x + "px;top:" + y + "px;width:" + document.getElementById('idiam').style.width.replace('px','') + "px;height:" + document.getElementById('idiam').style.width.replace('px','') + "px;'></div>";
} else if (xciss != '' && document.URL.indexOf('venn=') != -1) {
document.getElementById('dcontent').innerHTML+="<div" + xciss + " id=d" + icnt + " onclick='recxy(event); clickme(this);' class='" + shape + xciss.replace('class=','') + "' style='" + biis + "line-height:20px;background-color:" + bcols[bch] + ";opacity:0.5;position:absolute;left:" + x + "px;top:" + y + "px;width:" + document.getElementById('idiam').style.width.replace('px','') + "px;height:" + document.getElementById('idiam').style.width.replace('px','') + "px;'></div>";
} else {
document.getElementById('dcontent').innerHTML+="<div id=d" + icnt + " onclick='recxy(event); clickme(this);' class='" + shape + ciss.replace('class=','') + "' style='" + biis + "line-height:20px;background-color:" + bcols[bch] + ";opacity:0.5;position:absolute;left:" + x + "px;top:" + y + "px;width:" + document.getElementById('idiam').style.width.replace('px','') + "px;height:" + document.getElementById('idiam').style.width.replace('px','') + "px;'></div>";
}
} else {
if (shape == 'diamond') {
document.getElementById('dcontent').innerHTML+="<div id=d" + icnt + " onclick='clickme(this);' class='" + shape + "' style='" + biis + "line-height:20px;position:absolute;left:" + x + "px;top:" + y + "px;'>" + brbr + " " + wording + "</div>";
} else if (xciss != '' && document.URL.indexOf('venn=') != -1) {
document.getElementById('dcontent').innerHTML+="<div id=d" + icnt + " onclick='clickme(this);' class='" + shape + xciss.replace('class=','') + "' style='" + biis + "line-height:20px;position:absolute;left:" + x + "px;top:" + y + "px;'>" + brbr + " " + wording + "</div>";
} else {
document.getElementById('dcontent').innerHTML+="<div id=d" + icnt + " onclick='clickme(this);' class='" + shape + ciss.replace('class=','') + "' style='" + biis + "line-height:20px;position:absolute;left:" + x + "px;top:" + y + "px;'>" + brbr + " " + wording + "</div>";
}
}
somuchmore('');
wording=cat;
document.getElementById('dstart').innerHTML=wording;
nonbodyclick=0;
if (document.getElementById('dsave').innerHTML != '') {
if (document.getElementById('dsave').innerHTML.indexOf('<') == -1) {
document.getElementById('dsave').innerHTML+='<input style=display:inline-block;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input> <input style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input> ' + outst + ' <br><input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input> <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>';
eh();
} else if (document.getElementById('dsave').innerHTML.indexOf('iemail') != -1 && document.getElementById('dsave').innerHTML.indexOf('isave') == -1) {
document.getElementById('dsave').innerHTML+=' <input style=background-color:orange; id=isave type=button onclick=ifsave(); value=Save></input>'; // <input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>';
}
}
if (document.getElementById('iundo')) {
document.getElementById('iundo').style.display='inline-block';
}
setTimeout(wwokagain, 2000);
}
} else if (nonbodyclick == 1) {
wording=cat;
//document.title+=' xx';
document.getElementById('secpoint').innerHTML=somuchmore(noeolp);
} else if (nonbodyclick <= 0) {
nonbodyclick=0;
//alert(134);
//document.title+=' zz' + document.getElementById('secpoint').innerHTML + 'zz ';
document.getElementById('secpoint').innerHTML=document.getElementById('secpoint').innerHTML.replace(somuchmore(noeolp), '');
document.getElementById('dsave').innerHTML=document.getElementById('dsave').innerHTML.replace(somuchmore(noeolp), '');
} else {
//document.title+=' yy';
document.getElementById('secpoint').innerHTML='';
document.getElementById('dcontent').innerHTML+=connect();
bodyclick=true;
nonbodyclick=-5;
}
}
function wwokagain() {
wwok=true;
}
function ifit(osel) {
if (osel.value != '') {
wording=cat;
jcnt++;
document.getElementById('dstart').innerHTML='?';
if (1 == 1) {
location.href=document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + '?recall=' + encodeURIComponent(osel.value);
} else {
document.getElementById('dcontother').innerHTML+="<iframe style=display:none; id=if" + jcnt + " src='" + document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + '?recall=' + encodeURIComponent(osel.value) + "'></iframe>";
}
}
}
function ath() {
location.href=document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + '?recall=' + encodeURIComponent(urlis);
}
function ifsave() {
notc();
var nameis=prompt('Please enter ' + inp + ' name to Save to (and be able to recall later).', '');
if (nameis != null) {
notc();
jcnt++;
document.getElementById('dcontother').innerHTML+="<iframe style=display:none; id=if" + jcnt + " name=if" + jcnt + " src=''></iframe>";
notc();
document.getElementById('dcontother').innerHTML+="<form style=display:none; method=POST target=if" + jcnt + " action=flowchart.php><input type=hidden name=newsave id=newsave value='" + nameis + "'></input><textarea style=display:none; rows=5 cols=5 name=newsavecontent id=newsavecontent value=''>" + document.getElementById('dcontent').innerHTML.replace(/\ \;/g,' ').replace(/\ \;/g,' ') + "</textarea><input type=submit id=ifb" + jcnt + " value=Save></input></form>";
notc();
document.getElementById('isave').value='Saved to ' + nameis.replace(/\ /g,'');
notc();
document.getElementById('ifb' + jcnt).click();
urlis=nameis; //location.href=document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + '?recall=' + encodeURIComponent(nameis);
notc();
setTimeout(ath, 2000);
}
}
function ifemail() {
notc();
var nameis=prompt('Please enter Email Address.', '');
if (nameis != null) {
if (nameis.indexOf('@') != -1) {
notc();
jcnt++;
document.getElementById('dcontother').innerHTML+="<iframe style=display:none; id=if" + jcnt + " name=if" + jcnt + " src=''></iframe>";
notc();
document.getElementById('dcontother').innerHTML+="<form style=display:none; method=POST target=if" + jcnt + " action=flowchart.php><input type=hidden name=newemail id=newemail value='" + nameis + "'></input><textarea style=display:none; rows=5 cols=5 name=newemailcontent id=newemailcontent value=''>" + document.getElementById('dcontent').innerHTML.replace(/\ \;/g,' ') + "</textarea><input type=submit id=ifb" + jcnt + " value=Email></input></form>";
notc();
document.getElementById('iemail').value='Emailed to ' + nameis;
notc();
document.getElementById('ifb' + jcnt).click();
//urlis=nameis; //location.href=document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + '?recall=' + encodeURIComponent(nameis);
notc();
//setTimeout(ath, 2000);
}
}
}
function minus(hm) {
notc();
var ij=eval('' + document.getElementById('idiam').style.width.replace('px',''));
ij-=hm;
document.getElementById('idiam').style.width='' + ij + 'px';
}
function plus(hm) {
notc();
var ij=eval('' + document.getElementById('idiam').style.width.replace('px',''));
ij+=hm;
document.getElementById('idiam').style.width='' + ij + 'px';
}
function glowit() {
if (doglow) {
ciss=' class=glow';
xciss=' class=cglow';
document.getElementById('dstyle').innerHTML='<style> .circle { -webkit-animation: cglow 1s ease-in-out infinite alternate; -moz-animation: cglow 1s ease-in-out infinite alternate; animation: cglow 1s ease-in-out infinite alternate; } .oval, .rectangle, .glow { -webkit-animation: glow 1s ease-in-out infinite alternate; -moz-animation: glow 1s ease-in-out infinite alternate; animation: glow 1s ease-in-out infinite alternate; } </style>';
} else {
ciss='';
xciss='';
document.getElementById('dstyle').innerHTML='';
}
}
function onl() {
setTimeout(glowit, 5000);
if (h1is.indexOf('"myh1">Venn') != -1 || (h1is.indexOf('"myh1">Venn') == -1 && document.getElementById('dcontent').innerHTML.replace(/\"/g,'').indexOf('class=circle') != -1)) {
document.getElementById('myh1').innerHTML=document.getElementById('myh1').innerHTML.replace('Flowchart', venn);
document.getElementById('itbut').value=novenn;
h1is='<h1 style=display:inline-block; id="myemail"></h1> <h1 style=display:inline-block; id="myh1">' + venn + '</h1> or <input id=itbut style=display:inline-block; type=button onclick=location.href=document.URL.split(String.fromCharCode(35))[0].split(String.fromCharCode(63))[0].replace(dfrom,dto)+withoutvenn; value="' + novenn + '"></input>';
withvenn='';
inp="Venn Diagram";
cat="circle";
wording=cat;
noeolp='Is this a new circle pointing or you want to place value? ';
}
if (h1is.indexOf('"myh1">Venn') != -1) { document.getElementById('dstart').innerHTML="circle"; document.getElementById('instruction').innerHTML+=' Venn Diagram Title: <input title="You can add line feeds via ~ character" id=idiam placeholder="Diameter of Venn Diagram circle" onclick=notc(); style=display:inline-block;width:200px; type=text onblur="document.getElementById(' + "'" + 'dheader' + "'" + ').innerHTML=' + "'" + '<h1>' + "'" + ' + this.value.replace(/~/g,bris) + ' + "'" + '</h1>' + "'" + ';"></input> <a onclick=minus(10); style=cursor:pointer;>--</a> <a onclick=minus(1); style=cursor:pointer;>-</a> <a onclick=plus(1); style=cursor:pointer;>+</a> <a onclick=plus(10); style=cursor:pointer;>++</a>'; }
if (document.getElementById('d0') || document.getElementById('d1')) {
document.getElementById('dsave').innerHTML+='<input style=display:inline-block;background-color:lightblue; id=iundo type=button onclick=doundo(); value=Undo></input> <input style=display:none;background-color:lightblue; id=iredo type=button onclick=doredo(); value=Redo></input> <br><input style=background-color:orange; id=iemail type=button onclick=ifemail(); value=Email></input>';
}
if (!ambeingsupervised) {
jcnt++;
document.getElementById('dcontother').innerHTML+="<iframe style=display:none; id=if" + jcnt + " src='" + document.URL.split('?')[0].split('#')[0].replace('.html','.php').replace('.htm','.php') + "?rand=" + Math.floor(Math.random() * 123456) + "'></iframe>";
}
}
function wnotc() {
bodyclick=false;
nonbodyclick=-2;
}
function notc() {
wording=cat;
bodyclick=false;
nonbodyclick=-2;
setTimeout(resetit,1000);
}
function mysels() {
var xxxx=myselsc;
if (xxxx != '') {
if (document.getElementById('mysel')) { document.getElementById('mysel').value=xxxx; }
}
}
</script>
</head>
<body style='width:100%; height: 100vh;' ontouchstart='recxy(event);' onmousedown='recxy(event);' onload='onl();'>
<h1 style=display:inline-block; id="myemail"></h1> <h1 style=display:inline-block; id="myh1">Flowchart</h1> or <input style=display:inline-block; id=itbut type=button onclick=location.href=document.URL.split(String.fromCharCode(35))[0].split(String.fromCharCode(63))[0].replace(dfrom,dto)+withvenn; value="Venn Diagram"></input>
<h3>RJM Programming - January<a class="glow" ontouchstart='event.stopPropagation();' onmousedown='event.stopPropagation();' onclick="event.stopPropagation(); doglow=!doglow; if (!doglow) { this.className='xglow'; ciss=''; xciss=''; } else { this.className='glow'; ciss=' class=glow'; xciss=' class=cglow'; } glowit(); " style="cursor:pointer;text-decoration:none;" title="Click to toggle glow mode">,</a> 2019 ... Thanks to <a target=_blank title='Enjoy CSS' href='https://enjoycss.com/'>Online CSS3 Code Generator With a Simple Graphical Interface - EnjoyCSS</a></h3>
<h4 id='instruction' onclick='notc();'><div onclick='notc();' style='display:inline-block;' id=secpoint></div>Click where you want "<div onclick=" if (this.innerHTML.length == 0) { wording=cat; } bodyclick=false; nonbodyclick=-2; setTimeout(resetit,1000); " style='display:inline-block;background-color:pink;' id=dstart contenteditable=true onblur="wording=tfc(this.innerHTML); " title="What wording do you want? (~ is carriage return) ... optional (space to) URL will be a background image (append ' /browse' to browse for background image) ... later an #ffffff type of colour can change a background colour (should the colour picker not work)">Start</div>" to be placed</h4>
<div id="dsave"></div>
<div id="diamond" class="diamond" style='display:none;'></div><div id="oval" class="oval" style='display:none;'></div><div id="rectangle" class="rectangle" style='display:none;'></div><div id="circle" class="circle" style='display:none;'></div>
<div id="dcontent"><div id="dheader"></div></div>
<div id="dcontentd"></div>
<div id="dcontother"></div>
<div id="dstyle"></div>
</body>
</html>