Icons and other mobile web app things.

[labelle.git] / index.html
diff --git a/index.html b/index.html

index 337b253..7991ed2 100644 (file)
--- a/index.html
+++ b/index.html
@@ -1,8 +1,22 @@
  <!DOCTYPE html>
-<html lang="en">
+<html lang="en" manifest="labelle.manifest">
    <head>
      <meta charset="utf-8">
      <meta name=viewport content="width=device-width, initial-scale=1">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <link rel="shortcut icon" href="icon_72x72.png">
+    <link rel="apple-touch-icon" href="icon_57x57.png">
+    <link rel="apple-touch-icon" sizes="57x57" href="icon_57x57.png">
+    <link rel="apple-touch-icon" sizes="72x72" href="icon_72x72.png">
+    <link rel="apple-touch-icon" sizes="76x76" href="icon_76x76.png">
+    <link rel="apple-touch-icon" sizes="114x114" href="icon_114x114.png">
+    <link rel="apple-touch-icon" sizes="120x120" href="icon_120x120.png">
+    <link rel="apple-touch-icon" sizes="144x144" href="icon_144x144.png">
+    <link rel="apple-touch-icon" sizes="152x152" href="icon_152x152.png">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+    <meta name="apple-mobile-web-app-title" content="Labelle Litanizer">
      <link rel="stylesheet" href="/css/main.css" type="text/css">
      <title>
        Labelle Litanizer
@@ -11,7 +25,22 @@
      </title>
      <script type="text/javascript" src="acnl-wearables-list.js"></script>
      <script type="text/javascript" src="acnl-outfit.js"></script>
+    <script>
+      window.addEventListener("load", function () {
+          if (window.navigator.standalone) {
+              var header = document.getElementsByTagName("header")[0];
+              header.className += " statusbar";
+          }
+      });
+    </script>
      <style>
+      .statusbar {
+          border-top-left-radius: 0;
+          border-top-right-radius: 0;
+          border-top-width: 20px;
+          margin: 0 -1em;
+      }
+      
        #labelle {
            min-height: 180px;
            margin-top: 1em;