<meta name="theme-color" content="#111d2a" />
<meta name="title" content="Poketab Messenger" />
<meta name="description"
  content="This is a temporary instant messaging app where you can chat also in groups. There is no database so any of your chat is not stored. ">
<meta property="og:title" content="Instant Messaging App" />
<meta property="og:description"
  content="This is a temporary instant messaging app where you can chat also in groups. There is no database so any of your chat is not stored. ">
<meta property="og:image" content="cover.png" />

<link rel="apple-touch-icon" href="icons/apple-icon-180.png">

<meta name="apple-mobile-web-app-capable" content="yes">


<style nonce="<%=hash%>">
  /* latin */
  @font-face {
    font-family: 'Comic';
    src: url('/fonts/comic-webfont.woff2') format('woff2');
  }

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Comic';
  }

  .preload {
    width: 100vw;
    height: 100vh;
    background: var(--primary-dark);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    gap: 10px;
  }

  .preload .logo {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .preload .text {
    padding: 25px;
    color: var(--secondary-dark);
  }

  .preload img {
    display: inline-block;
    z-index: 1000;
    animation: rotate 700ms infinite;
  }

  .preload .preload-ripple {
    width: 100px;
    height: 100px;
    background: #ffffff3f;
    border-radius: 50%;
    position: absolute;
    animation: preload-ripple 700ms infinite;
    z-index: 999;
  }

  .preload.done {
    display: none;
  }

  @keyframes preload-ripple {
    0% {
      height: 50px;
      width: 50px;
      opacity: 1;
    }

    100% {
      height: 100px;
      width: 100px;
      opacity: 0;
    }
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }

    80% {
      transform: rotate(360deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }
</style>

<link rel="apple-touch-startup-image" href="icons/apple-splash-2048-2732.jpg"
  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-2732-2048.jpg"
  media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1668-2388.jpg"
  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-2388-1668.jpg"
  media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1536-2048.jpg"
  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-2048-1536.jpg"
  media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1668-2224.jpg"
  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-2224-1668.jpg"
  media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1620-2160.jpg"
  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-2160-1620.jpg"
  media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1284-2778.jpg"
  media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-2778-1284.jpg"
  media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1170-2532.jpg"
  media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-2532-1170.jpg"
  media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1125-2436.jpg"
  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-2436-1125.jpg"
  media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1242-2688.jpg"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-2688-1242.jpg"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-828-1792.jpg"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1792-828.jpg"
  media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1242-2208.jpg"
  media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-2208-1242.jpg"
  media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-750-1334.jpg"
  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1334-750.jpg"
  media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-640-1136.jpg"
  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)">
<link rel="apple-touch-startup-image" href="icons/apple-splash-1136-640.jpg"
  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)">
<link rel="preload" href="/fonts/comic-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" as="style" href="/styles/chat.css" crossorigin="anonymous">
<link rel="preload" as="style" href="/libs/fontawesome/css/all.min.css" crossorigin="anonymous">

<meta charset="utf-8">
<title>Inbox</title>
<meta name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0, interactive-widget=resizes-visual">
<link rel="stylesheet" href="/libs/fontawesome/css/all.min.css">
<link rel="stylesheet" href="/styles/chat.css">
<link rel="stylesheet" href="/styles/global.css">
<link rel="stylesheet" href="/libs/prism/prism.css">
<link rel="manifest" href="/manifest.json" crossorigin="anonymous">
<link rel="icon" href="/images/<%=icon_%>">
<!-- Google tag (gtag.js) -->
<script nonce="<%=hash%>" async src="https://www.googletagmanager.com/gtag/js?id=G-2329BNJK6F"></script>
<script nonce="<%=hash%>">
//Google Analytics
window.dataLayer = window.dataLayer || [];
function gtag(){window.dataLayer.push(arguments);}
gtag('js', new Date());

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

<style>
  :root{
    --secondary-dark: <%=color_%>;
  }
</style>

<% if (ENV==='DEVELOPMENT' ) { %>
  <script defer type="module" src="/scripts/app/app.js"></script>
<% } else { %>
    <script defer type="module" src="/scripts/app/bundle/bundle.js"></script>
<% } %>
