<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <title>Device Offline</title>
    <style type="text/css"> 
      :root { --background-color: white; --primary-color: #1C1C1E; }
      [data-theme="dark"] { --background-color: #121212; --primary-color: #eee; }
      [data-theme="light"] { --background-color: white; --primary-color: #1C1C1E; }
      html, body{ background-color: var(--background-color) !important; }
      html, body, button { font-family: Arial, Helvetica, sans-serif; font-size: 18px; } 
      div.container { color: var(--primary-color); position: relative; top: 100px; text-align: center; } 
      button { padding: 10px 30px; margin: 4px 2px; }
    </style>
  </head>
  <body>
    <div class="container">
      <p>The first image below is an embedded SVG.<br/>The second image is an embedded base64 encoded PNG</p>
      <svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1.5" y="1.5" width="197" height="197" fill="white"/>
<path d="M70.0074 72.897H103.256C105.902 72.897 108.44 73.9479 110.311 75.8187C112.182 77.6894 113.233 80.2266 113.233 82.8722V112.794H69.9992C68.6891 112.792 67.3922 112.533 66.1824 112.03C64.9726 111.527 63.8738 110.791 62.9485 109.864C62.0233 108.936 61.2898 107.836 60.7899 106.625C60.29 105.414 60.0336 104.116 60.0352 102.806V82.8722C60.0352 80.2273 61.0857 77.6907 62.9557 75.8201C64.8258 73.9495 67.3622 72.8981 70.0074 72.897Z" fill="#4299ED"/>
<path d="M90.0418 52.9465H116.475C117.785 52.9465 119.083 53.2046 120.293 53.7059C121.503 54.2072 122.603 54.9419 123.53 55.8682C124.456 56.7945 125.191 57.8942 125.692 59.1044C126.194 60.3147 126.452 61.6118 126.452 62.9218V112.794H90.0418C88.7306 112.794 87.4323 112.536 86.2212 112.034C85.01 111.531 83.9097 110.796 82.9831 109.868C82.0566 108.94 81.322 107.839 80.8213 106.628C80.3207 105.416 80.0638 104.118 80.0654 102.807V62.9218C80.0654 60.2762 81.1165 57.7389 82.9874 55.8682C84.8584 53.9975 87.3959 52.9465 90.0418 52.9465Z" fill="#F567F0"/>
<path d="M109.925 33H129.873C132.519 33 135.057 34.051 136.928 35.9217C138.799 37.7924 139.85 40.3297 139.85 42.9753V112.794H109.925C108.612 112.796 107.312 112.539 106.099 112.038C104.886 111.537 103.784 110.801 102.856 109.874C101.927 108.946 101.191 107.844 100.69 106.631C100.188 105.419 99.9305 104.119 99.9321 102.806V42.9753C99.9321 41.6639 100.191 40.3655 100.693 39.1541C101.195 37.9428 101.932 36.8424 102.86 35.9159C103.788 34.9894 104.89 34.255 106.102 33.7546C107.314 33.2543 108.613 32.9979 109.925 33Z" fill="#F7C406"/>
<path d="M103.257 72.9177H80.0654V102.839C80.0654 105.485 81.1165 108.022 82.9874 109.893C84.8584 111.764 87.3959 112.815 90.0418 112.815H113.233V82.8726C113.227 80.2305 112.174 77.6985 110.304 75.8322C108.433 73.9659 105.899 72.9177 103.257 72.9177Z" fill="#3F3EDF"/>
<path d="M116.475 52.9346H99.9321V102.819C99.9321 105.465 100.983 108.002 102.854 109.873C104.725 111.743 107.263 112.794 109.908 112.794H126.451V62.9221C126.453 61.6111 126.196 60.3126 125.695 59.1009C125.195 57.8893 124.46 56.7882 123.534 55.8606C122.607 54.933 121.507 54.1971 120.296 53.6951C119.084 53.193 117.786 52.9346 116.475 52.9346Z" fill="#ED4F06"/>
<path d="M109.908 112.794H113.233V82.8726C113.227 80.2305 112.174 77.6985 110.303 75.8322C108.433 73.9659 105.899 72.9177 103.256 72.9177H99.9321V102.839C99.9375 105.481 100.991 108.013 102.861 109.88C104.732 111.746 107.266 112.794 109.908 112.794Z" fill="#1A100B"/>
<path d="M40.4791 156.134L30.1283 135.289H25V166.925H29.8547V144.592L38.4974 161.805H42.775L50.9324 144.731V166.925H55.7871V135.289H50.6567L40.4791 156.134Z" fill="#1A100B"/>
<path d="M78.7119 144.022C76.9312 142.889 74.7785 142.312 72.2988 142.312C69.8639 142.312 67.7113 142.884 65.9113 144.022C64.1171 145.106 62.6661 146.676 61.7257 148.549C60.7464 150.489 60.25 152.636 60.2785 154.809C60.2565 156.99 60.7704 159.144 61.7749 161.081C62.7828 162.959 64.2734 164.534 66.0931 165.644C67.9293 166.741 70.0927 167.297 72.5233 167.297C75.3728 167.297 77.7414 166.604 79.5627 165.236C81.3789 163.874 82.7728 162.025 83.5837 159.905L83.9621 158.928H78.7482L78.5345 159.304C77.9847 160.321 77.1924 161.186 76.2279 161.822C75.2552 162.444 74.0218 162.759 72.5575 162.759C71.2875 162.788 70.031 162.494 68.9063 161.904C67.8857 161.321 67.0205 160.501 66.3838 159.514C65.9034 158.703 65.5543 157.821 65.3491 156.901H84.3041V154.815C84.3336 152.644 83.8379 150.498 82.859 148.56C81.9316 146.687 80.4941 145.114 78.7119 144.022ZM65.4581 152.258C65.8118 150.882 66.5261 149.624 67.5275 148.616C68.7353 147.433 70.3065 146.858 72.3116 146.858C74.3168 146.858 75.888 147.433 77.0979 148.616C78.1249 149.611 78.8484 150.877 79.1843 152.267L65.4581 152.258Z" fill="#1A100B"/>
<path d="M106.627 145.133C105.951 144.485 105.188 143.934 104.361 143.496C102.924 142.711 101.184 142.314 99.1874 142.314C96.836 142.314 94.7474 142.889 92.9689 144.024C91.2202 145.129 89.808 146.693 88.8859 148.545C87.9068 150.484 87.4103 152.632 87.4386 154.804C87.4174 156.974 87.9128 159.118 88.8837 161.059C89.8144 162.922 91.2272 164.502 92.9753 165.634C94.7539 166.735 96.8445 167.293 99.1874 167.293C101.182 167.293 102.924 166.895 104.356 166.113C105.182 165.674 105.946 165.127 106.627 164.486V166.927H111.479V133.553H106.627V145.133ZM105.964 150.768C106.54 152.033 106.832 153.41 106.819 154.8C106.827 156.19 106.535 157.565 105.964 158.832C105.432 159.994 104.586 160.984 103.521 161.69C102.492 162.393 101.188 162.758 99.6428 162.758C98.0972 162.758 96.7954 162.399 95.7051 161.69C94.6163 160.985 93.7427 159.994 93.1805 158.825C92.5868 157.567 92.2836 156.191 92.2934 154.8C92.2766 153.41 92.5793 152.035 93.1784 150.781C93.7418 149.613 94.6161 148.624 95.7051 147.921C96.7954 147.211 98.1207 146.852 99.6428 146.852C101.165 146.852 102.492 147.209 103.527 147.921C104.589 148.624 105.433 149.61 105.964 150.768Z" fill="#1A100B"/>
<path d="M121.167 142.679H116.312V166.925H121.167V142.679Z" fill="#1A100B"/>
<path d="M118.741 133.299C117.967 133.299 117.224 133.607 116.676 134.154C116.128 134.701 115.819 135.442 115.817 136.217V136.279C115.837 137.04 116.155 137.764 116.7 138.295C117.246 138.827 117.978 139.124 118.74 139.124C119.502 139.124 120.234 138.827 120.78 138.295C121.326 137.764 121.643 137.04 121.663 136.279V136.217C121.661 135.443 121.352 134.701 120.805 134.154C120.257 133.608 119.515 133.3 118.741 133.299Z" fill="#1A100B"/>
<path d="M143.79 145.133C143.113 144.486 142.351 143.935 141.524 143.496C140.087 142.711 138.345 142.314 136.348 142.314C133.997 142.314 131.911 142.889 130.132 144.024C128.383 145.129 126.971 146.693 126.049 148.545C125.07 150.485 124.573 152.632 124.602 154.804C124.581 156.975 125.076 159.12 126.047 161.061C126.978 162.923 128.391 164.502 130.138 165.634C131.917 166.735 134.005 167.293 136.338 167.293C138.334 167.293 140.077 166.895 141.507 166.113C142.334 165.675 143.098 165.128 143.779 164.486V166.927H148.632V142.677H143.779L143.79 145.133ZM143.127 150.768C143.7 152.034 143.988 153.411 143.971 154.8C143.982 156.189 143.694 157.564 143.127 158.832C142.594 159.993 141.748 160.983 140.684 161.69C139.655 162.393 138.351 162.759 136.804 162.759C135.256 162.759 133.958 162.4 132.866 161.69C131.779 160.987 130.907 159.999 130.344 158.834C129.749 157.576 129.446 156.2 129.456 154.809C129.44 153.419 129.742 152.044 130.339 150.79C130.915 149.575 131.834 148.555 132.983 147.857C134.132 147.158 135.46 146.811 136.804 146.858C138.351 146.858 139.655 147.215 140.69 147.927C141.751 148.629 142.595 149.613 143.127 150.768Z" fill="#1A100B"/>
<path d="M173.593 147.145C172.752 145.616 171.485 144.365 169.947 143.543C168.489 142.73 166.846 142.306 165.177 142.314C163.191 142.314 161.528 142.741 160.231 143.566C159.55 144.003 158.913 144.504 158.328 145.063V142.677H153.476V166.923H158.328V153.066C158.303 151.935 158.583 150.818 159.138 149.832C159.676 148.913 160.446 148.151 161.372 147.626C162.325 147.102 163.398 146.835 164.485 146.85C166.176 146.85 167.51 147.401 168.568 148.543C169.626 149.684 170.147 151.127 170.147 153.032V166.927H175V152.929C175.009 150.648 174.53 148.697 173.593 147.145Z" fill="#1A100B"/>
<rect x="1.5" y="1.5" width="197" height="197" stroke="black" stroke-width="3"/>
</svg>

      <br/>
      <img height="200" width="200" src="data:image/png;base64,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"/>
      <span id="message">
        <p>No internet connection or VPN disconnected<br/>Connect and try again</p>
      </span>
      <button id="retryButton" type="button" onclick="gonative.webview.reload()">Retry</button>
    </div>
    <script>
      var message = document.getElementById('message');
      var retryButton = document.getElementById('retryButton')
      function updateDarkMode(){
        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
          document.documentElement.setAttribute("data-theme", "dark");
        }
        else {
          document.documentElement.setAttribute("data-theme", "light");
        } 
      }
      updateDarkMode();
      if(window.matchMedia){
        window.matchMedia('(prefers-color-scheme: dark)')
          .addEventListener('change', updateDarkMode);
      }
    </script>
  </body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.