templates/app_shell.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>The Daily Spoon</title>

    <link rel="manifest" href="/manifest.json">
    <meta name="theme-color" content="#fa5742">
    <link rel="shortcut icon" href="/favicon.png">
    <meta name="viewport" content="initial-scale=1, minimum-scale=1, width=device-width">

    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,700"/>

    <style>{{ assets['styles/app_shell.scss'] | safe }}</style>
  </head>
  <body>
    <header>
      <div class="header-body">
        <a href="/" class="logo">TheDailySpoon</a>
        <div id="notifications-toggle"></div>
      </div>
    </header>

    <div id="body"></div>

    <div id="loading-bar"></div>
    <div id="offline-banner">Offline</div>
    <div id="refresh-banner">
      A new version of this page is available.
      <button>Refresh</button>
    </div>

    <div id="notifications-banner" style="background-image: url('/logo-white.png')">
      <p>Would you like to get notifications for the latest articles and updates?</p>
      <button class="secondary">No thanks</button>
      <button class="primary">OK</button>
    </div>
    <div id="notifications-error">
      <p>It appears that notifications are blocked for this site. Please check your browser settings.</p>
      <button class="primary">OK</button>
    </div>

    <script>navigator.serviceWorker.register('/service_worker.js');</script>
    <script src="https://cdn.ampproject.org/shadow-v0.js"></script>
    <script>{{ assets['scripts/app_shell.js'] | safe }}</script>

    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-84655221-1', 'auto');
    </script>
  </body>
</html>