<!DOCTYPE html>
<html>

<head>
  <base href="/">
  <meta charset="UTF-8">
  <title>Flutter Gallery</title>
  <meta name="description" content="A resource to help developers evaluate and use Flutter.">
  <link rel="manifest" href="manifest.json">

  <!-- Browser meta tags & icons -->
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="gallery">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">
  <link rel="icon" type="image/png" href="favicon.png" sizes="32x32" />

  <!-- Fonts -->
  <link href="https://fonts.googleapis.com/css?family=Roboto:400" rel="stylesheet" media="all">
  <link href="https://fonts.googleapis.com/css?family=Google+Sans:700" rel="stylesheet" media="all">

  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-HBB5H8CECM"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-HBB5H8CECM');
  </script>

  <!-- Renderer specifier -->
  <script>
    let searchParams = new URLSearchParams(window.location.search);
    if (searchParams.has('renderer')) {
      window.flutterWebRenderer = searchParams.get('renderer');
      console.log(searchParams.get('renderer') + ' renderer requested in the URL');
    }
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = null;
  </script>

  <script src="flutter.js" defer></script>
</head>

<body>
  <style>
    body {
      background-color: #030303;
    }
  </style>

  <!-- Cookie notice -->
  <div>
    <style>
      #cookie-notice {
        background-color: #fff;
        bottom: 0;
        box-shadow: 0px 8px 24px rgba(0, 0, 0, .25);
        -webkit-box-direction: normal;
        -webkit-font-smoothing: antialiased;
        display: none;
        left: 0;
        opacity: 0;
        padding: 40px 0;
        position: fixed;
        width: 100%;
        z-index: 11;
      }

      #cookie-notice.show {
        animation-delay: .2s;
        animation-duration: .5s;
        animation-fill-mode: forwards;
        animation-iteration-count: 1;
        animation-name: fadein;
        animation-timing-function: cubic-bezier(.27, .89, .39, .95);
        display: block;
      }

      @keyframes fadein {
        0% {
          opacity: 0
        }

        to {
          opacity: 1
        }
      }

      .container {
        align-items: center;
        display: flex;
        justify-content: space-between;
        position: relative;
        top: 1px;
        margin: 0 auto;
        max-width: calc(1280px - 100px);
        width: calc(100% - 24px*2);
      }

      .container p {
        max-width: 1200px;
        margin: 0;
        margin-right: 50px;
        color: #4a4a4a;
        font-size: 16px;
        font-family: "Roboto", sans-serif;
        line-height: 1.5;

      }

      p a {
        color: #0468d7;
        text-decoration: none;
      }

      button {
        background-color: #0468d7;
        color: #fff;
        align-items: center;
        justify-content: center;
        border: 0 solid;
        border-radius: 24px;
        cursor: pointer;
        display: inline-flex;
        font-family: "Google Sans", sans-serif;
        font-size: 14px;
        font-weight: 700;
        height: 40px;
        padding: 0 32px;
        text-align: center;
        line-height: 1.15;
      }
    </style>
    <section id="cookie-notice">
      <div class="container">
        <p>Google uses cookies to deliver its services, to personalize ads, and to analyze traffic. You can
          adjust your privacy controls anytime in your
          <a href="https://myaccount.google.com/data-and-personalization" target="_blank" rel="noopener">Google
            settings</a>.
          <a href="https://policies.google.com/technologies/cookies" target="_blank" rel="noopener">Learn more</a>.
        </p>
        <button id="cookie-consent">Okay</button>
      </div>
    </section>
  </div>
  <script>
    function _setCookie(name, value) {
      const expires = "; expires=2147483647"; // ~2038 i.e. until user clears cookies
      document.cookie = name + "=" + (value || "") + expires + "; SameSite=Strict";
    }

    function _getCookie(name) {
      var nameEQ = name + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
      }
      return null;
    }

    function initCookieNotice() {
      const notice = document.getElementById('cookie-notice');
      const consentBtn = document.getElementById('cookie-consent');
      const cookieKey = 'cookie-consent';
      const cookieConsentValue = 'true'
      const activeClass = 'show';
      if (_getCookie(cookieKey) === cookieConsentValue) {
        return;
      }
      notice.classList.add(activeClass);
      consentBtn.classList.add(activeClass);
      consentBtn.addEventListener('click', (e) => {
        e.preventDefault();
        _setCookie(cookieKey, cookieConsentValue);
        notice.classList.remove(activeClass);
        consentBtn.classList.add(activeClass);
      });
    }

    initCookieNotice();
  </script>

  <!-- Background -->
  <style>
    body.light {
      background-color: #E6EBEB;
    }

    body.dark {
      background-color: #241E30;
    }
  </style>
  <script>
    var queryParams = new URLSearchParams(window.location.search);

    // Set the theme from the URL param, with fallback to user preference if no theme is
    // specified.
    var theme = queryParams.get("brightness");
    theme ||= window.matchMedia("(prefers-color-scheme: dark)").matches
      ? "dark"
      : "light";
    document.body.classList.add(theme);
  </script>

  <!-- Loading indicator -->
  <div id="loading">
    <style>
      body {
        inset: 0;
        overflow: hidden;
        margin: 0;
        padding: 0;
        position: fixed;
      }

      #loading {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: center;
        width: 100%;
      }

      #loading img {
        animation: 1s ease-in-out 0s infinite alternate breathe;
        opacity: .66;
        transition: opacity .4s;
      }

      #loading.main_done img {
        opacity: 1;
      }

      #loading.init_done img {
        animation: .33s ease-in-out 0s 1 forwards zooooom;
        opacity: .05;
      }

      @keyframes breathe {
        from {
          transform: scale(1)
        }

        to {
          transform: scale(0.95)
        }
      }

      @keyframes zooooom {
        from {
          transform: scale(1)
        }

        to {
          transform: scale(0.01)
        }
      }
    </style>
    <img src="icons/Icon-192.png" alt="Loading indicator..." />
  </div>
  <script>
    window.addEventListener('load', function () {
      var loading = document.querySelector('#loading');
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function (engineInitializer) {
        loading.classList.add('main_done');
        return engineInitializer.initializeEngine();
      }).then(function (appRunner) {
        loading.classList.add('init_done');
        return appRunner.runApp();
      }).then(function (app) {
        // Wait a few milliseconds so users can see the "zoooom" animation
        // before getting rid of the "loading" div.
        window.setTimeout(function () {
          loading.remove();
        }, 200);
      });
    });
  </script>

  <!-- App -->
</body>

</html>