Theme based on season / time of day.

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

index 61ebf97..3d3a134 100644 (file)
--- a/index.html
+++ b/index.html
@@ -14,18 +14,9 @@
        Labelle Litanizer
        - Outfit-Oriented Ontology from Animal Crossing: New Leaf
      </title>
+    <script type="text/javascript" src="fastclick.js"></script>
      <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";
-              var statusbar = document.getElementById("statusbar");
-              statusbar.style.display = "block";
-          }
-      });
-    </script>
      <style>
        @font-face {
            font-family: Varela;
@@ -51,6 +42,27 @@
            font-family: Varela;
            font-size: 18px;
            background: url(bg.png);
+          height: 100%;
+      }
+
+      .month0, .month1, .month11 { background: url(winter.png); }
+      .month2, .month3, .month4 { background: url(spring.png); }
+      .month5, .month6, .month7 { background: url(summer.png); }
+      .month8, .month9, .month10 { background: url(autumn.png); }
+
+      #statusbar {
+          display: none;
+          position: fixed;
+          background-color: #896031;
+          left: 0;
+          top: 0;
+          height: 20px;
+          right: 0;
+          z-index: 1;
+      }
+
+      .standalone #statusbar {
+          display: block;
        }
  
        main {
@@ -70,7 +82,6 @@
        
        #labelle {
            position: absolute;
-          top: 1em;
            left: -10%;
            max-width: 28%;
        }
@@ -144,7 +155,7 @@
            display: inline-block;
            width: 1em;
            margin-left: 0.6667em;
-          content: "â\96º";
+          content: "â\96¶";
            color: #f45c0a;
        }
  
@@ -154,11 +165,16 @@
            height: 0.65;
        }
  
-      .day {
+      body {
            background-image: linear-gradient(#1e03e9, #185cfa 70%, transparent 71%);
+          min-height: 100%;
        }
  
-      .night {
+      .hour0, .hour1, .hour2, .hour3, .hour4, .hour5,
+      .hour20, .hour21, .hour22, .hour23,
+      .spring .hour6, .autumn .hour6, .winter .hour6,
+      .spring .hour19, .autumn .hour19, .winter .hour19,
+      .winter .hour7, .winter .hour18 {
            background-image: linear-gradient(#070b5c, #002675 70%, rgba(0, 38, 117, 0.4) 71%);
        }
  
@@ -214,7 +230,8 @@
        }
      </style>
    </head>
-  <body onload='update();' class=day>
+  <body class=day>
+    <div id=statusbar></div>
      <main>
        <img src="labelle-2.png" id=labelle>
        <div id="text">