Unsupported Splash Screen

_unsupported.js

document.addEventListener("DOMContentLoaded", () => {

  /*! modernizr 3.6.0 (Custom Build) | MIT *
  * https://modernizr.com/download/?-flexbox-flexwrap-setclasses !*/
  /*! modernizr 3.6.0 (Custom Build) | MIT *
 * https://modernizr.com/download/?-flexbox-flexwrap-supports-setclasses !*/
  !function(e,n,t){function r(e,n){return typeof e===n}function s(){var e,n,t,s,o,i,l;for(var a in S)if(S.hasOwnProperty(a)){if(e=[],n=S[a],n.name&&(e.push(n.name.toLowerCase()),n.options&&n.options.aliases&&n.options.aliases.length))for(t=0;t<n.options.aliases.length;t++)e.push(n.options.aliases[t].toLowerCase());for(s=r(n.fn,"function")?n.fn():n.fn,o=0;o<e.length;o++)i=e[o],l=i.split("."),1===l.length?Modernizr[l[0]]=s:(!Modernizr[l[0]]||Modernizr[l[0]]instanceof Boolean||(Modernizr[l[0]]=new Boolean(Modernizr[l[0]])),Modernizr[l[0]][l[1]]=s),C.push((s?"":"no-")+l.join("-"))}}function o(e){var n=x.className,t=Modernizr._config.classPrefix||"";if(_&&(n=n.baseVal),Modernizr._config.enableJSClass){var r=new RegExp("(^|\\s)"+t+"no-js(\\s|$)");n=n.replace(r,"$1"+t+"js$2")}Modernizr._config.enableClasses&&(n+=" "+t+e.join(" "+t),_?x.className.baseVal=n:x.className=n)}function i(e,n){return!!~(""+e).indexOf(n)}function l(){return"function"!=typeof n.createElement?n.createElement(arguments[0]):_?n.createElementNS.call(n,"http://www.w3.org/2000/svg",arguments[0]):n.createElement.apply(n,arguments)}function a(e){return e.replace(/([a-z])-([a-z])/g,function(e,n,t){return n+t.toUpperCase()}).replace(/^-/,"")}function f(e,n){return function(){return e.apply(n,arguments)}}function u(e,n,t){var s;for(var o in e)if(e[o]in n)return t===!1?e[o]:(s=n[e[o]],r(s,"function")?f(s,t||n):s);return!1}function p(e){return e.replace(/([A-Z])/g,function(e,n){return"-"+n.toLowerCase()}).replace(/^ms-/,"-ms-")}function d(n,t,r){var s;if("getComputedStyle"in e){s=getComputedStyle.call(e,n,t);var o=e.console;if(null!==s)r&&(s=s.getPropertyValue(r));else if(o){var i=o.error?"error":"log";o[i].call(o,"getComputedStyle returning null, its possible modernizr test results are inaccurate")}}else s=!t&&n.currentStyle&&n.currentStyle[r];return s}function c(){var e=n.body;return e||(e=l(_?"svg":"body"),e.fake=!0),e}function m(e,t,r,s){var o,i,a,f,u="modernizr",p=l("div"),d=c();if(parseInt(r,10))for(;r--;)a=l("div"),a.id=s?s[r]:u+(r+1),p.appendChild(a);return o=l("style"),o.type="text/css",o.id="s"+u,(d.fake?d:p).appendChild(o),d.appendChild(p),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(n.createTextNode(e)),p.id=u,d.fake&&(d.style.background="",d.style.overflow="hidden",f=x.style.overflow,x.style.overflow="hidden",x.appendChild(d)),i=t(p,e),d.fake?(d.parentNode.removeChild(d),x.style.overflow=f,x.offsetHeight):p.parentNode.removeChild(p),!!i}function y(n,r){var s=n.length;if("CSS"in e&&"supports"in e.CSS){for(;s--;)if(e.CSS.supports(p(n[s]),r))return!0;return!1}if("CSSSupportsRule"in e){for(var o=[];s--;)o.push("("+p(n[s])+":"+r+")");return o=o.join(" or "),m("@supports ("+o+") { #modernizr { position: absolute; } }",function(e){return"absolute"==d(e,null,"position")})}return t}function v(e,n,s,o){function f(){p&&(delete T.style,delete T.modElem)}if(o=r(o,"undefined")?!1:o,!r(s,"undefined")){var u=y(e,s);if(!r(u,"undefined"))return u}for(var p,d,c,m,v,g=["modernizr","tspan","samp"];!T.style&&g.length;)p=!0,T.modElem=l(g.shift()),T.style=T.modElem.style;for(c=e.length,d=0;c>d;d++)if(m=e[d],v=T.style[m],i(m,"-")&&(m=a(m)),T.style[m]!==t){if(o||r(s,"undefined"))return f(),"pfx"==n?m:!0;try{T.style[m]=s}catch(h){}if(T.style[m]!=v)return f(),"pfx"==n?m:!0}return f(),!1}function g(e,n,t,s,o){var i=e.charAt(0).toUpperCase()+e.slice(1),l=(e+" "+P.join(i+" ")+i).split(" ");return r(n,"string")||r(n,"undefined")?v(l,n,s,o):(l=(e+" "+z.join(i+" ")+i).split(" "),u(l,n,t))}function h(e,n,r){return g(e,t,t,n,r)}var C=[],S=[],w={_version:"3.6.0",_config:{classPrefix:"",enableClasses:!0,enableJSClass:!0,usePrefixes:!0},_q:[],on:function(e,n){var t=this;setTimeout(function(){n(t[e])},0)},addTest:function(e,n,t){S.push({name:e,fn:n,options:t})},addAsyncTest:function(e){S.push({name:null,fn:e})}},Modernizr=function(){};Modernizr.prototype=w,Modernizr=new Modernizr;var x=n.documentElement,_="svg"===x.nodeName.toLowerCase(),b="Moz O ms Webkit",P=w._config.usePrefixes?b.split(" "):[];w._cssomPrefixes=P;var z=w._config.usePrefixes?b.toLowerCase().split(" "):[];w._domPrefixes=z;var E={elem:l("modernizr")};Modernizr._q.push(function(){delete E.elem});var T={style:E.elem.style};Modernizr._q.unshift(function(){delete T.style}),w.testAllProps=g,w.testAllProps=h,Modernizr.addTest("flexbox",h("flexBasis","1px",!0)),Modernizr.addTest("flexwrap",h("flexWrap","wrap",!0));var N="CSS"in e&&"supports"in e.CSS,j="supportsCSS"in e;Modernizr.addTest("supports",N||j),s(),o(C),delete w.addTest,delete w.addAsyncTest;for(var k=0;k<Modernizr._q.length;k++)Modernizr._q[k]();e.Modernizr=Modernizr}(window,document);
  
  var html = document.querySelector('html');

  if (document.querySelector('.no-flexbox') || document.querySelector('.no-supports')) {
  // if (true) {
    function setStyles(el, selector) {
      switch (selector) {
        case 'unsupported' :
            el.style.backgroundColor = '#ccc';
            el.style.boxSizing = 'border-box';
            el.style.color = '#333';
            el.style.left = '0';
            el.style.fontFamily = 'Arial, sans-serif';
            el.style.height = window.innerHeight+'px';
            el.style.overflow = 'auto';
            el.style.padding = '40px 20px 20px 20px';
            el.style.position = 'absolute';
            el.style.textAlign = 'center';
            el.style.top = '0';
            el.style.width = '100%';
            el.style.zIndex = 99999;
          break;
        case 'unsupported-container' :
            el.style.borderRadius = '5px';
            el.style.boxShadow = '0 5px 10px rgba(0, 0, 0, .2)';
            el.style.margin = 'auto';
            el.style.maxWidth = '700px';
            el.style.overflow = 'hidden';
          break;
        case 'unsupported-container-top' :
          el.style.backgroundColor = '#fff';
          el.style.padding = '60px 40px 60px 40px';
          break;
        case 'unsupported-container-bottom' :
          el.style.backgroundColor = '#f9f9f9';
          el.style.padding = '40px 40px 0 40px';
          break;
        case 'title' :
          el.style.display = 'inline-block';
          el.style.fontSize = '3em';
          el.style.fontWeight = 'bold';
          el.style.lineHeight = '1.2';
          el.style.marginBottom = '20px';
          el.style.width = '100%';
          break;
        case 'p' :
          el.style.color = '#666';
          el.style.fontSize = '14px';
          el.style.lineHeight = '1.5';
          el.style.marginLeft = 'auto';
          el.style.marginRight = 'auto';
          el.style.maxWidth = '500px';
          break;
        case 'ul' :
          el.style.color = '#f9f9f9';
          el.style.listStyleType = 'none';
          el.style.margin = '0';
          el.style.padding = '0';
          el.style.textAlign = 'center';
          el.style.verticalAlign = 'top';
          break;
        case 'li' :
          el.style.display = 'inline-block';
          el.style.fontSize = '14px';
          el.style.listStyleType = 'none';
          el.style.margin = '0 20px 0 20px';
          el.style.verticalAlign = 'top';
          el.style.overflow = 'hidden';
          el.style.paddingBottom = '40px';
          el.style.width = '80px';
          break;
        case 'browser-name' :
          el.style.display = 'inline-block';
          el.style.width = '100%';
          el.style.color = '#333';
          el.style.fontWeight = 'bold';
          el.style.marginBottom = '20px';
          break;
        case 'download' :
          el.style.backgroundColor = '#0686E4';
          el.style.borderRadius = '3px';
          el.style.boxSizing = 'border-box';
          el.style.color = '#fff';
          el.style.fontSize = '12px';
          el.style.fontWeight = '400';
          el.style.padding = '5px 5px 5px 5px';
          el.style.textDecoration = 'none';
          el.style.width = '100%'
          break;
        case 'browser-logo' :
          el.style.height = '40px';
          el.style.margin = '0 auto 10px auto';
          el.style.width = '40px';
          break;
        case 'img' :
          el.style.display = 'block';
          el.style.height = 'auto';
          el.style.width = 'auto';
          el.style.maxHeight = '40px';
          el.style.maxWidth = '40px';
          el.style.width = 'auto';
          break;
        default:
      }
    }

    // JS only version of markup / css in https://codepen.io/mh7/pen/zYYJJQG
    var unsupported = document.createElement('div');
    setStyles(unsupported, 'unsupported');

    var unsupportedContainer = document.createElement('div');
    setStyles(unsupportedContainer, 'unsupported-container');

    var unsupportedContainerTop = document.createElement('div');
    setStyles(unsupportedContainerTop, 'unsupported-container-top');

    var unsupportedContainerBottom = document.createElement('div');
    setStyles(unsupportedContainerBottom, 'unsupported-container-bottom');

    var title = document.createElement('span');
    setStyles(title, 'title');
    var titleContent = document.createTextNode("Unsupported browser");
    title.appendChild(titleContent);

    var paragraph1 = document.createElement('p');
    setStyles(paragraph1, 'p');
    var paragraph1Content = document.createTextNode("This website has been built using the latest web technology. Unfortunately, your browser doesn't support all of these features.");
    paragraph1.appendChild(paragraph1Content);

    var paragraph2 = document.createElement('p');
    setStyles(paragraph2, 'p');
    paragraph2.style.marginBottom = '0';
    var paragraph2Content = document.createTextNode("Please download the latest version of one of the browsers below to view this website.");
    paragraph2.appendChild(paragraph2Content);

    var ul = document.createElement('ul');
    setStyles(ul, 'ul');

    // Chrome
    var chromeListItem = document.createElement('li');
    var chromeLogoContainer = document.createElement('div');
    var chromeTitle = document.createElement('span');
    var chromeTitleContent = document.createTextNode('Chrome');
    var chromeButton = document.createElement('a');
    var chromeButtonContent = document.createTextNode('Download');

    setStyles(chromeListItem, 'li');
    setStyles(chromeTitle, 'browser-name');
    setStyles(chromeButton, 'download');

    chromeTitle.appendChild(chromeTitleContent);
    chromeButton.setAttribute('href', 'https://www.google.com/chrome/');
    chromeButton.setAttribute('target', '_blank');
    chromeButton.appendChild(chromeButtonContent);

    chromeListItem.appendChild(chromeTitle);
    chromeListItem.appendChild(chromeButton);

    // Firefox
    var firefoxListItem = document.createElement('li');
    var firefoxTitle = document.createElement('span');
    var firefoxTitleContent = document.createTextNode('Firefox');
    var firefoxButton = document.createElement('a');
    var firefoxButtonContent = document.createTextNode('Download');

    setStyles(firefoxListItem, 'li');
    setStyles(firefoxTitle, 'browser-name');
    setStyles(firefoxButton, 'download');

    firefoxTitle.appendChild(firefoxTitleContent);
    firefoxButton.setAttribute('href', 'https://www.mozilla.org/en-GB/firefox/new/');
    firefoxButton.setAttribute('target', '_blank');
    firefoxButton.appendChild(firefoxButtonContent);

    firefoxListItem.appendChild(firefoxTitle);
    firefoxListItem.appendChild(firefoxButton);

    // Safari
    var safariListItem = document.createElement('li');
    var safariTitle = document.createElement('span');
    var safariTitleContent = document.createTextNode('Safari');
    var safariButton = document.createElement('a');
    var safariButtonContent = document.createTextNode('Download');

    setStyles(safariListItem, 'li');
    setStyles(safariTitle, 'browser-name');
    setStyles(safariButton, 'download');

    safariTitle.appendChild(safariTitleContent);
    safariButton.setAttribute('href', 'https://support.apple.com/en_GB/downloads/safari');
    safariButton.setAttribute('target', '_blank');
    safariButton.appendChild(safariButtonContent);

    safariListItem.appendChild(safariTitle);
    safariListItem.appendChild(safariButton);

    // Edge
    var edgeListItem = document.createElement('li');
    var edgeTitle = document.createElement('span');
    var edgeTitleContent = document.createTextNode('Edge');
    var edgeButton = document.createElement('a');
    var edgeButtonContent = document.createTextNode('Download');

    setStyles(edgeListItem, 'li');
    setStyles(edgeTitle, 'browser-name');
    setStyles(edgeButton, 'download');

    edgeTitle.appendChild(edgeTitleContent);
    edgeButton.setAttribute('href', 'https://www.microsoft.com/en-gb/windows/microsoft-edge');
    edgeButton.setAttribute('target', '_blank');
    edgeButton.appendChild(edgeButtonContent);

    edgeListItem.appendChild(edgeTitle);
    edgeListItem.appendChild(edgeButton);

    ul.appendChild(chromeListItem);
    ul.appendChild(firefoxListItem);
    ul.appendChild(safariListItem);
    ul.appendChild(edgeListItem);

    unsupportedContainerTop.appendChild(title);
    unsupportedContainerTop.appendChild(paragraph1);
    unsupportedContainerTop.appendChild(paragraph2);
    unsupportedContainerBottom.appendChild(ul);
    unsupportedContainer.appendChild(unsupportedContainerTop);
    unsupportedContainer.appendChild(unsupportedContainerBottom);
    unsupported.appendChild(unsupportedContainer);
    document.querySelector('body').appendChild(unsupported);

    if (window.innerWidth > 768) {
      document.querySelector('html').style.overflow = 'hidden';
    }
  }

});