<html>
<head>
<title>Approaches to the Short Wait - RJM Programming - October, 2023 ... inspired by Stan ... Frasier ... Next Episode button</title>
<meta charset='UTF-8'/>
<style>
td {
text-align: center;
}

.waitbuttoneight {
padding: 8 11 8 11;
background-color: lightblue;
border-radius: 80px;
background-image: linear-gradient(to right, lightblue 0%, rgb(255,255,127) 100%);
}

.fadeXbutton {
-webkit-animation: fadebutton 18s ease-out infinite;
-moz-animation: fadebutton 18s ease-out infinite;
animation: fadebutton 18s ease-out infinite;
}

@keyframes fadebutton { /* Thanks to https://ide.geeksforgeeks.org/online-html-editor/4f0ce33b-a6e5-463e-8398-9500b4752d90 */
from {
background-image: linear-gradient(to right, lightblue 0%, rgb(255,255,127) 100%);
}

to {
background-image: linear-gradient(to right, lightblue 100%, rgb(255,255,127) 0%);
}
}

.fadeXdiv {
-webkit-animation: fadediv 18s linear infinite;
-moz-animation: fadediv 18s linear infinite;
animation: fadediv 18s linear infinite;
}

@keyframes fadediv {
from {
background-image: linear-gradient(to right, lightblue 0%, rgb(255,255,127) 100%);
}

to {
background-image: linear-gradient(to right, lightblue 100%, rgb(255,255,127) 0%);
}
}

.waitprogresseight {
height: 60px;
width: 75%;
color: lightblue;
}

progress::-webkit-progress-value {
background-color: lightblue;
}

meter::-webkit-meter-bar {
background-color: rgb(255,255,127);
}

meter::-webkit-meter-value {
background-color: lightblue;
}

progress::-webkit-progress-bar {
background-color: rgb(255,255,127);
}

progress::-webkit-progress-value {
background-color: lightblue;
}

.waitmetereight {
height: 60px;
width: 78%;
color: lightblue;
}

.waitdiveight {
border: 1px solid black;
padding: 5 5 5 5;
margin-left: 20%;
width: 55%;
background-color: lightblue;
border-radius: 80px;
background-image: linear-gradient(to right, lightblue 5%, rgb(255,255,127) 95%);
}

.waitsvgeight {
}

#closebutton {
padding: 8 11 8 11;
background-color: lightblue;
border-radius: 80px;
}

#okbutton {
padding: 8 11 8 11;
background-color: lightblue;
border-radius: 80px;
}

#okyesbutton {
padding: 8 11 8 11;
background-color: lightgreen;
border-radius: 80px;

svg {
/* font-family: sans-serif; */
border-radius: 80px;
background-color: rgb(255,255,127);
}

text {
font-size: 16px;
fill: black;
transform: translateY(3px);
animation: wavyText 18s alternate steps(2, end) infinite;
}

.w {
animation-delay: 0;
}

.a {
animation-delay: 0.1s;
}

.v {
animation-delay: 0.15s;
}

.y {
animation-delay: 0.2s;
}

@keyframes wavyText {
20%,
100% {
transform: translate(0, 3px);
}

0% {
transform: translate(0, 0px);
}
10% {
transform: translate(0, 3px);
}
}
</style>
<script type='text/javascript'>
var mval=0;
var pval=0;

function aunit() {
if (mval == 99) {
document.getElementById('mspan').innerHTML='Next Episode ...';
mval=100;
} else if (mval == 100){
document.getElementById('mspan').innerHTML='▶ Play Now';
mval=0;
} else {
mval++;
}
document.getElementById('mymeter').value=mval;
if (pval == 99) {
document.getElementById('pspan').innerHTML='Next Episode ...';
document.getElementById('bwait').innerHTML='Next Episode ...';
document.getElementById('dwait').innerHTML='Next Episode ...';
document.getElementById('mystext').innerHTML='Next Episode ...';
document.body.ondblclick=function() { location.href=document.URL; };
pval=100;
} else if (pval == 100) {
if (document.getElementById('dvideo').innerHTML == '') {
document.getElementById('dvideo').innerHTML='<video id=myvideo autostart=true autoplay=true loop=true style="width:100%;" controls=true><source src="//www.rjmprogramming.com.au/Mac/iPhone/air_drop_messages_live_photo_more.mp4 " type="video/mp4"></video>';
setTimeout(function(){ document.getElementById('myvideo').click(); }, 3000);
}
document.getElementById('myvideo').click();
ouralert('');
document.getElementById('pspan').innerHTML='▶ Play Now';
document.getElementById('bwait').innerHTML='▶ Play Now';
document.getElementById('dwait').innerHTML='▶ Play Now';
pval=0;
} else {
pval++;
}
document.getElementById('myprogress').value=pval;

}

function pmstuff() {
var buts=document.getElementById('bwait').getBoundingClientRect();
var divs=document.getElementById('dwait').getBoundingClientRect();
var svgs=document.getElementById('mysvg').getBoundingClientRect();
document.getElementById('dstyle').innerHTML+='<style> .wbutton { border-color:transparent; border-radius: 80px; background-color:rgba(173, 216, 230, 0.4); z-index:78; width:0px; height:' + buts.height + 'px; top:' + buts.top + 'px; left:' + buts.left + 'px; position:absolute; -webkit-animation: widthbutton 18s ease-out infinite; -moz-animation: widthbutton 18s ease-out infinite; animation: widthbutton 18s ease-out infinite; } @keyframes widthbutton { 0% { width: 0px; } 100% { width: ' + buts.width + 'px; } } </style>';
document.getElementById('delement').innerHTML+='<button id=obut class=wbutton></button>';
document.getElementById('dstyle').innerHTML+='<style> .dbutton { border-color:transparent; border-radius: 80px; background-color:rgba(173, 216, 230, 0.4); z-index:78; width:0px; height:' + divs.height + 'px; top:' + divs.top + 'px; left:' + divs.left + 'px; position:absolute; -webkit-animation: widthdiv 18s ease-out infinite; -moz-animation: widthdiv 18s ease-out infinite; animation: widthdiv 18s ease-out infinite; } @keyframes widthdiv { 0% { width: 0px; } 100% { width: ' + divs.width + 'px; } } </style>';
document.getElementById('delement').innerHTML+='<button id=dbut class=dbutton></button>';
document.getElementById('dstyle').innerHTML+='<style> .sbutton { border-color:transparent; border-radius: 80px; background-color:rgba(173, 216, 230, 0.4); z-index:78; width:0px; height:' + svgs.height + 'px; top:' + svgs.top + 'px; left:' + svgs.left + 'px; position:absolute; -webkit-animation: widthsvg 18s ease-out infinite; -moz-animation: widthsvg 18s ease-out infinite; animation: widthsvg 18s ease-out infinite; } @keyframes widthsvg { 0% { width: 0px; } 100% { width: ' + svgs.width + 'px; } } </style>';
document.getElementById('delement').innerHTML+='<button id=sbut class=sbutton></button>';
var prec=document.getElementsByTagName('progress')[0].getBoundingClientRect();
var mrec=document.getElementsByTagName('meter')[0].getBoundingClientRect();
document.getElementById('doverlay').innerHTML+='<span onclick="event.stopPropagation(); ouralert(' + "'Next Episode.'" + '); document.getElementById(' + "'myvideo'" + ').style.opacity=' + "'1.0'" + '; document.getElementById(' + "'myvideo'" + ').play(); " id=pspan style="background-color:transparent;position:absolute;top:' + eval(20 + prec.top) + 'px;left:' + eval(20 + prec.left) + 'px;z-index:99;">▶ Play Now</span>';
document.getElementById('doverlay').innerHTML+='<span onclick="event.stopPropagation(); ouralert(' + "'Next Episode.'" + '); document.getElementById(' + "'myvideo'" + ').style.opacity=' + "'1.0'" + '; document.getElementById(' + "'myvideo'" + ').play(); " id=mspan style="background-color:transparent;position:absolute;top:' + eval(20 + mrec.top) + 'px;left:' + eval(20 + mrec.left) + 'px;z-index:99;">▶ Play Now</span>';
setInterval(aunit, 180);
}

function ouralert(what) {
document.getElementById('obut').style.zIndex='-1987';
document.getElementById('dbut').style.zIndex='-1987';
document.getElementsByTagName('h1')[0].style.zIndex='-1987';
document.getElementsByTagName('h3')[0].style.zIndex='-1987';
document.getElementsByTagName('table')[0].style.zIndex='-1987';
document.getElementsByTagName('span')[0].style.zIndex='-1987';
document.getElementsByTagName('span')[1].style.zIndex='-1987';
document.getElementsByTagName('h1')[0].style.opacity='0.0';
document.getElementsByTagName('h3')[0].style.opacity='0.0';
document.getElementsByTagName('table')[0].style.opacity='0.0';
document.getElementsByTagName('span')[0].style.opacity='0.0';
document.getElementsByTagName('span')[1].style.opacity='0.0';
document.getElementById('myvideo').style.opacity='1.0';
document.getElementById('myvideo').play();
}

</script>
</head>
<body onload="pmstuff();">
<h1>Approaches to the Short Wait</h1>
<h3>RJM Programming - October, 2023 ... inspired by Stan ... Frasier ... Next Episode button</h3><div id=doverlay></div><br><br>
<table border=5 style='width:95%;'>
<tr><th colspan=5><br>Waiting 18 seconds for Next Episode <button id=okbutton>Okay to Wait ...</button> <button onclick=" document.getElementById('closebutton').click(); " id=okyesbutton>More Episodes</button><br><br></th></tr>
<tr><th>Linear Gradient Button</th><th>Progress Element</th><th>Meter Element</th><th>Div Linear Gradient</th><th>SVG Animation</th></tr>
<tr><td onclick="ouralert('Next Episode.'); document.getElementById('myvideo').style.opacity='1.0'; document.getElementById('myvideo').play(); "><button onclick="event.stopPropagation(); ouralert('Next Episode.'); document.getElementById('myvideo').style.opacity='1.0'; document.getElementById('myvideo').play(); " id=bwait class='waitbuttoneight fadebutton'>▶ Play Now</button></td><td onclick="ouralert('Next Episode.'); document.getElementById('myvideo').style.opacity='1.0'; document.getElementById('myvideo').play(); "><progress onclick="event.stopPropagation(); ouralert('Next Episode.'); document.getElementById('myvideo').style.opacity='1.0'; document.getElementById('myvideo').play(); " id=myprogress class=waitprogresseight value=0 max=100 min=0>Stuff</progress></td><td onclick="ouralert('Next Episode.'); document.getElementById('myvideo').style.opacity='1.0'; document.getElementById('myvideo').play(); "><meter onclick="event.stopPropagation(); ouralert('Next Episode.'); document.getElementById('myvideo').style.opacity='1.0'; document.getElementById('myvideo').play(); " id=mymeter class=waitmetereight value=0 max=100 min=0></meter></td><td onclick="ouralert('Next Episode.'); document.getElementById('myvideo').style.opacity='1.0'; document.getElementById('myvideo').play(); "><div onclick="event.stopPropagation(); ouralert('Next Episode.'); document.getElementById('myvideo').style.opacity='1.0'; document.getElementById('myvideo').play(); " id=dwait class='waitdiveight fadediv'>▶ Play Now</div></td><td onclick="ouralert('Next Episode.'); document.getElementById('myvideo').style.opacity='1.0'; document.getElementById('myvideo').play(); ">
<svg id=mysvg style='background-color:rgb(255,255,127);border-radius:80px;' class=fadediv xmlns="http://www.w3.org/2000/svg" width="180" height="30">
<text id=mystext y="65%" x="15%" font-size="20px">▶ Play Now</text>

</svg>
</td></tr>
<tr><td colspan=5><br><button style=display:none; id=closebutton onclick="alert('Starting again.'); location.href=document.URL;">Close</button><br></td></tr>
</table><br>
<div id=dvideo><video title="Double click to reload" id=myvideo data-autostart=true data-autoplay=true loop=true style="width:100%;position:absolute;top:0px;left:0px;z-index:-987;opacity:0.0;" controls=true><source src="//www.rjmprogramming.com.au/Mac/iPhone/air_drop_messages_live_photo_more.mp4 " type="video/mp4"></video></div>
<div id=dstyle></div>
<div id=delement></div>
</body>
</html>