<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name ="theme-color" content="#79A736">
  <link rel="manifest" href="/manifest.json">

  <%# generics %>
  <link rel="icon" href="/logo_32.png" sizes="32x32">
  <link rel="icon" href="/logo_57.png" sizes="57x57">
  <link rel="icon" href="/logo_76.png" sizes="76x76">
  <link rel="icon" href="/logo_96.png" sizes="96x96">
  <link rel="icon" href="/logo_128.png" sizes="128x128">
  <link rel="icon" href="/logo_192.png" sizes="192x192">
  <link rel="icon" href="/logo_228.png" sizes="228x228">

  <%#  Android %>
  <link rel="shortcut icon" sizes="196x196" href="/logo_196.png">

  <%# iOS %>
  <link rel="apple-touch-icon" href="/logo_120.png" sizes="120x120">
  <link rel="apple-touch-icon" href="/logo_152.png" sizes="152x152">
  <link rel="apple-touch-icon" href="/logo_180.png" sizes="180x180">

  <%# Windows 8 IE 10 %>
  <meta name="msapplication-TileColor" content="#4a4a4a">
  <meta name="msapplication-TileImage" content="/logo_144.png">

  <%# Windows 8.1 + IE11 and above %>
  <meta name="msapplication-config" content="/browserconfig.xml" />


  <title>Parsley</title>

  <style type="text/css">

    body.loading {
      background-color: #79A736;
    }

    #app {
      transition: opacity 0.1s ease-in;
    }

    body.loading #app {
      opacity: 0;
    }

  </style>

  <%= stylesheet_pack_tag 'application' %>
  <%= action_cable_meta_tag %>
</head>
<body class="loading">

<div id="app" data-url="<%= root_url %>">
  <div id="app-placeholder">
    Loading...
  </div>
</div>

<%= javascript_pack_tag 'application' %>

</body>
</html>
