feat(tp): add skip button for desktop view

public/assets/transition-page/styles/transition-page.css

@@ -40,11 +40,12 @@ body {
   display: block;
   color: white;
   font-size: 16px;
-  margin-bottom: 24px;
+  margin-bottom: 35px;
 }
 
 .loading-image {
   width: 100px;
+  margin: 15px 0 15px;
 }
 
 .browser-image {
@@ -81,6 +82,17 @@ body {
   font-size: 13px;
 }
 
+#skip {
+  display: none;
+  cursor: pointer;
+}
+
+#skip > span {
+  font-size: 13px;
+  color: #456682;
+  text-decoration: underline;
+}
+
 .footer {
   position: absolute;
   bottom: 70px;

src/server/views/redirect.ejs

@@ -22,6 +22,11 @@ function proceedToDestination() {
     window.location = document.getElementById('url').getAttribute('data-href')
 }
 
+setTimeout(function(){
+    var skipButton = document.getElementById('skip')
+    skipButton.style.display = 'block'
+}, 2000)
+
 var secondsUntilRedirect = 6
 
 function handlePlural() {
@@ -42,3 +47,9 @@ var intervalId = setInterval(function(){
     clearInterval(intervalId)
     proceedToDestination()
 }, 1000)
+
+;(function() {
+    document.getElementById('skip').addEventListener('click', function (e) {
+        proceedToDestination()
+    })
+})()

src/server/views/transition-page.ejs

@@ -33,6 +33,10 @@
     <div class="bottom-half">
         <p id="url" data-href="<%- escapedLongUrl %>">You will be redirected in <span id="countdown-seconds">6</span> second<span id="s">s</span></p>
         <img class="loading-image" src="/assets/transition-page/images/loading.gif" alt="loading" />
+        <div id="skip">
+            <span>I've checked the link. Skip ahead</span>
+            <img src="/assets/transition-page/icons/icon-arrow-right.svg" alt="right arrow" />
+        </div>
         <div class="footer">
             <img src="/assets/transition-page/icons/go-logo.svg" alt="go logo" />
             <p>You will only be shown this page the first time you access this short link.</p>