JSFiddle - React, Tailwind, and code Playground

Timed Email launcher with animated dots.

by Andrew Pougher

HTML

<p id="connecting">
Connecting to <b style="background:#FFF;padding:5px 9px;border:1px solid #EEE;border-radius:5px">Email</b> <i></i><i></i><i></i>
</p>
<p id="note_alt">
If the app did not open, <br> please copy &amp; paste this URL into the app:
<input onclick="if(this.setSelectionRange)this.setSelectionRange(0, this.value.length);else this.select()" type="text" value="http://www.andrewpougher.com/#">
<br><br>
<span id="counter">Closing in <i id="count">5</i></span>
</p>

CSS

body{background-color:#f1f1f1;margin:0}
p{font:20px Arial,Helvetica,sans-serif;color:#2A2A2A;margin:0;text-align:center;padding:20px}
#note_alt{display:none;line-height:2}
#note_alt input{border:0;display:block;font:inherit;margin:20px auto 0;padding:10px;text-align:center;width:99%}
#note_alt span{font-size:16px}
#connecting i{font-size:1;color:darkblue}
#connecting i:before{content:"•";font-size:23px;color:pink}

JavaScript

var final_dest = 'mailto:?subject=When%20Andrew%20Pougher%20Sold%20Castelnau%20London&body=http%3A%2F%2Fwww.andrewpougher.com%2F2015%2F05%2F25%2FHow-To-Sell-A-House-%2F';

function soon() {
  var e = document,
    n = e.visibilityState
  return n && "visible" != n ? void e.addEventListener("visibilitychange", soon) : (setTimeout(function() {
    window.location = final_dest
  }, 5399), setTimeout(function() {
    var e, n, t = 5,
      o = document
    o.getElementById("note_alt").style.display = "block", o.getElementById("connecting").style.display = "none", window.opener ? (n = function() {
      clearInterval(e), o.getElementById("counter").style.display = "none"
    }, e = setInterval(function() {
      t--, o.getElementById("count").innerHTML = t, 0 == t && (setInterval(window.close, 399), clearInterval(e))
    }, 1100), o.addEventListener ? (o.addEventListener("keydown", n), o.addEventListener("mousedown", n), o.addEventListener("touchstart", n)) : (o.attachEvent("onmousedown", n), o.attachEvent("onkeydown", n))) : o.getElementById("counter").style.display = "none"
  }, 4e3), void(n && e.removeEventListener("visibilitychange", soon)))
}
window.onload = soon

var i = 0,
  s = document.getElementsByTagName('i'),
  v = 'hidden';

function f() {
  s.item(i).style.visibility = v;
  i++;
  if (i > 2) {
    i = 0;
    v = (v == 'hidden') ? 'visible' : 'hidden'
  }
  setTimeout(f, 99)
};
f();