From b0a205fe2ef1cab8e702cfe806ce1b744230167e Mon Sep 17 00:00:00 2001
From: Vincent <vincent@enhydra.fr>
Date: Thu, 8 Apr 2021 10:47:59 +0200
Subject: [PATCH] .

---
 .htaccess                      |   4 +
 .idea/watcherTasks.xml         |  31 --
 .idea/workspace.xml            |  45 ++-
 config/cuisine.php             |   4 +
 js/home.js                     |  14 +-
 scripts/lib/weatherstation.php |   3 +-
 style/weatherstation.css       | 146 +++++-----
 style/weatherstation.less      | 514 +++++++++++++++++----------------
 8 files changed, 389 insertions(+), 372 deletions(-)
 delete mode 100644 .idea/watcherTasks.xml

diff --git a/.htaccess b/.htaccess
index ab87c17..6fc10c4 100644
--- a/.htaccess
+++ b/.htaccess
@@ -11,6 +11,8 @@ Require ip 192.168.1.0/24 192.168.13.0/24 127.0.0.0/8 88.190.245.49
         RewriteCond %{HTTPS} off
         RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
 
+
+
     # Block browser access to the framework folder and sensitive files
 #    RewriteRule ^framework/.*$ - [F]
 #    RewriteRule ^.*\.ini$ - [F]
@@ -30,6 +32,8 @@ Require ip 192.168.1.0/24 192.168.13.0/24 127.0.0.0/8 88.190.245.49
         RewriteCond %{REQUEST_FILENAME} -d
         RewriteRule ^.*$ - [NC,L]
 
+        sRewriteRule ^apk(.*)$ app/build/outputs/apk/debug/app-debug.apk [F]
+
          RewriteRule ^s$ https://salon.home.tortuga.enhydra.fr/ [L,R=301]
          RewriteRule ^b$ https://bureau.home.tortuga.enhydra.fr/ [L,R=301]
         # Finally, redirect all other cases to the index.php
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
deleted file mode 100644
index 95a584a..0000000
--- a/.idea/watcherTasks.xml
+++ /dev/null
@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectTasksOptions">
-    <TaskOptions isEnabled="true">
-      <option name="arguments" value="--no-color $FileName$" />
-      <option name="checkSyntaxErrors" value="true" />
-      <option name="description" />
-      <option name="exitCodeBehavior" value="ERROR" />
-      <option name="fileExtension" value="less" />
-      <option name="immediateSync" value="true" />
-      <option name="name" value="Less" />
-      <option name="output" value="$FileNameWithoutExtension$.css" />
-      <option name="outputFilters">
-        <array>
-          <FilterInfo>
-            <option name="description" value="" />
-            <option name="name" value="" />
-            <option name="regExp" value="$MESSAGE$\Q in \E$FILE_PATH$\Q on line \E$LINE$\Q, column \E$COLUMN$" />
-          </FilterInfo>
-        </array>
-      </option>
-      <option name="outputFromStdout" value="true" />
-      <option name="program" value="$USER_HOME$/AppData/Roaming/npm/lessc.cmd" />
-      <option name="runOnExternalChanges" value="true" />
-      <option name="scopeName" value="Project Files" />
-      <option name="trackOnlyRoot" value="true" />
-      <option name="workingDir" value="$FileDir$" />
-      <envs />
-    </TaskOptions>
-  </component>
-</project>
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 7858240..b79cda0 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,13 +2,14 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="352ce63a-b52a-41a2-979b-becda7920939" name="Default" comment=".">
+      <change beforePath="$PROJECT_DIR$/.htaccess" beforeDir="false" afterPath="$PROJECT_DIR$/.htaccess" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/.idea/watcherTasks.xml" beforeDir="false" />
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/config/bureau.php" beforeDir="false" afterPath="$PROJECT_DIR$/config/bureau.php" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/config/chambre.php" beforeDir="false" afterPath="$PROJECT_DIR$/config/chambre.php" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/config/lit.php" beforeDir="false" afterPath="$PROJECT_DIR$/config/lit.php" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/config/salon.php" beforeDir="false" afterPath="$PROJECT_DIR$/config/salon.php" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/scripts/lib/lib.php" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/lib/lib.php" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/scripts/lib/scenes.php" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/lib/scenes.php" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/config/cuisine.php" beforeDir="false" afterPath="$PROJECT_DIR$/config/cuisine.php" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/js/home.js" beforeDir="false" afterPath="$PROJECT_DIR$/js/home.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/scripts/lib/weatherstation.php" beforeDir="false" afterPath="$PROJECT_DIR$/scripts/lib/weatherstation.php" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/style/weatherstation.css" beforeDir="false" afterPath="$PROJECT_DIR$/style/weatherstation.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/style/weatherstation.less" beforeDir="false" afterPath="$PROJECT_DIR$/style/weatherstation.less" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -284,6 +285,17 @@
         <option name="Make" enabled="true" />
       </method>
     </configuration>
+    <configuration default="true" type="ArquillianJUnit" factoryName="" nameIsGenerated="true">
+      <option name="arquillianRunConfiguration">
+        <value>
+          <option name="containerStateName" value="" />
+        </value>
+      </option>
+      <option name="TEST_OBJECT" value="class" />
+      <method v="2">
+        <option name="Make" enabled="true" />
+      </method>
+    </configuration>
     <configuration default="true" type="ArquillianTestNG" factoryName="">
       <option name="arquillianRunConfiguration">
         <value>
@@ -985,14 +997,10 @@
       <workItem from="1616096372227" duration="1452000" />
       <workItem from="1616413943061" duration="808000" />
       <workItem from="1616750847432" duration="1881000" />
-      <workItem from="1617266503786" duration="300000" />
-    </task>
-    <task id="LOCAL-00412" summary=".">
-      <created>1606229058488</created>
-      <option name="number" value="00412" />
-      <option name="presentableId" value="LOCAL-00412" />
-      <option name="project" value="LOCAL" />
-      <updated>1606229058489</updated>
+      <workItem from="1617266503786" duration="463000" />
+      <workItem from="1617794643348" duration="128000" />
+      <workItem from="1617794856868" duration="1126000" />
+      <workItem from="1617801536336" duration="3444000" />
     </task>
     <task id="LOCAL-00413" summary=".">
       <created>1606647119118</created>
@@ -1330,7 +1338,14 @@
       <option name="project" value="LOCAL" />
       <updated>1616837886170</updated>
     </task>
-    <option name="localTasksCounter" value="461" />
+    <task id="LOCAL-00461" summary=".">
+      <created>1617266964333</created>
+      <option name="number" value="00461" />
+      <option name="presentableId" value="LOCAL-00461" />
+      <option name="project" value="LOCAL" />
+      <updated>1617266964333</updated>
+    </task>
+    <option name="localTasksCounter" value="462" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
diff --git a/config/cuisine.php b/config/cuisine.php
index 2550ad3..33986aa 100644
--- a/config/cuisine.php
+++ b/config/cuisine.php
@@ -5,6 +5,10 @@ config('SQUEEZEBOX_PLAYER', 'Cuisine');
 config('HIDEMASK_TIMEOUT', 250);
 config('VOLUME_DEVICE', 'SqueezeboxPlayer');
 config('THEME','#222222');
+config('SLEEPSCREEN', 15);
+config('SCREENSAVER_BRIGHTNESS', 100);
+config('SLEEPTYPE', 'screensaver');
+config('SCREENSAVER','weatherstation');
 
 if (DISPLAYINTERFACE) {
     $c = cuisine();
diff --git a/js/home.js b/js/home.js
index 02383d8..66bbe51 100644
--- a/js/home.js
+++ b/js/home.js
@@ -1,5 +1,6 @@
 var iOS = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
-if (!raspberry && !iOS) {
+var androidApp = navigator.userAgent.indexOf("Lenovo TB-8505") >= 0;
+if (!raspberry && !iOS && !androidApp) {
     CONFIG.SLEEPSCREEN = 0;
     CONFIG.SLEEPTYPE = 'off';
 }
@@ -183,7 +184,7 @@ $(function () {
 
         $('#scrollholder').scrollTo(0);
         setTimeout(function () {
-           $('#scrollholder').scrollTo(0);
+            $('#scrollholder').scrollTo(0);
         }, 50);
 
         resize();
@@ -276,7 +277,7 @@ $(function () {
     $(document).on(clickevent, '[data-action]', function () {
         switch ($(this).data('action')) {
             case 'install-app': {
-                installapp();
+                window.location = '/app/build/outputs/apk/debug/app-debug.apk';
                 break;
             }
             case 'alert':
@@ -869,6 +870,9 @@ function resize() {
     var ww = $(window).outerWidth();
     var hh = $(window).outerHeight();
 
+    var sss = Math.min(ww / 800, hh / 480);
+    $("#weatherstation .contents").css('transform', 'scale(' + sss + ')');
+
     $("#loader,#mask").css({width: ww, height: hh});
 
     // Resize bar
@@ -1001,6 +1005,10 @@ function updateRemote() {
             return;
         }
         _updateRemote(data);
+    }).fail(function () {
+        setTimeout(function () {
+            updateRemote();
+        }, 500);
     })
 }
 
diff --git a/scripts/lib/weatherstation.php b/scripts/lib/weatherstation.php
index ac74c4c..8ce32a5 100644
--- a/scripts/lib/weatherstation.php
+++ b/scripts/lib/weatherstation.php
@@ -7,6 +7,7 @@ function weatherStationScreenSaver()
     $pressure = $weather['outdoor_pressure'] == '--' ? $weather['backyard_pressure'] : $weather['outdoor_pressure'];
 
     $res = '<div id="weatherstation" class="screensaver">';
+    $res .= '<div class="contents">';
     $res .= '<div class="time"></div>';
     $res .= '<div class="current">';
     $res .= '<div class="icon">' . accuweatherIcon($weather['icon']) . '</div>';
@@ -48,7 +49,7 @@ function weatherStationScreenSaver()
     $res .= _curve($weather, 'sun');
     $res .= _curve($weather, 'moon');
     $res .= '</div>';
-
+    $res .= '</div>';
 
     return $res;
 }
diff --git a/style/weatherstation.css b/style/weatherstation.css
index 4fd0572..7266039 100644
--- a/style/weatherstation.css
+++ b/style/weatherstation.css
@@ -1,7 +1,5 @@
 #weatherstation {
   position: relative;
-  width: 800px;
-  height: 480px;
   background-size: cover;
   backgroud-position: 50% 50%;
   background-repeat: no-repeat;
@@ -10,14 +8,24 @@
   z-index: 10001;
   color: #fff;
   font-size: 30px;
+  width: 100%;
+  height: 100%;
+}
+#weatherstation .contents {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 800px;
+  height: 480px;
+  transform-origin: 0 0;
 }
-#weatherstation .temp-min {
+#weatherstation .contents .temp-min {
   color: cornflowerblue;
 }
-#weatherstation .temp-max {
+#weatherstation .contents .temp-max {
   color: orangered;
 }
-#weatherstation .time {
+#weatherstation .contents .time {
   position: absolute;
   display: inline-block;
   text-align: right;
@@ -26,24 +34,24 @@
   bottom: 20px;
   right: 20px;
 }
-#weatherstation .time .hour {
+#weatherstation .contents .time .hour {
   display: block;
   font-size: 60px;
 }
-#weatherstation .time .date {
+#weatherstation .contents .time .date {
   font-size: 22px;
   display: block;
 }
-#weatherstation .moon {
+#weatherstation .contents .moon {
   position: absolute;
   right: 15px;
   top: 15px;
 }
-#weatherstation .moon img {
+#weatherstation .contents .moon img {
   width: 100px;
   height: 100px;
 }
-#weatherstation .current {
+#weatherstation .contents .current {
   text-align: center;
   font-size: 22px;
   width: 400px;
@@ -51,70 +59,70 @@
   position: absolute;
   left: 200px;
 }
-#weatherstation .current .icon {
+#weatherstation .contents .current .icon {
   width: 200px;
   text-align: center;
   position: relative;
   top: 10px;
   margin: 0 auto;
 }
-#weatherstation .current .temps {
+#weatherstation .contents .current .temps {
   position: relative;
   margin-top: -10px;
 }
-#weatherstation .current .temps > div {
+#weatherstation .contents .current .temps > div {
   display: inline-block;
   margin: 0 8px;
 }
-#weatherstation .current .temps .temp {
+#weatherstation .contents .current .temps .temp {
   font-weight: 700;
   font-size: 50px;
   line-height: 50px;
 }
-#weatherstation .current .fa {
+#weatherstation .contents .current .fa {
   font-size: 18px;
 }
-#weatherstation .current .fa-arrow-circle-up {
+#weatherstation .contents .current .fa-arrow-circle-up {
   transform: rotate(45deg);
 }
-#weatherstation .current .fa-arrow-circle-down {
+#weatherstation .contents .current .fa-arrow-circle-down {
   transform: rotate(-45deg);
 }
-#weatherstation .icons {
+#weatherstation .contents .icons {
   position: absolute;
   top: 22px;
   width: 100%;
 }
-#weatherstation .icons .night {
+#weatherstation .contents .icons .night {
   position: absolute;
   left: 25px;
 }
-#weatherstation .icons .day {
+#weatherstation .contents .icons .day {
   position: absolute;
   right: 25px;
 }
-#weatherstation .icons img {
+#weatherstation .contents .icons img {
   width: 75px;
 }
-#weatherstation .icons > div {
+#weatherstation .contents .icons > div {
   width: 100px;
   display: inline-block;
 }
-#weatherstation .pp {
+#weatherstation .contents .pp {
   position: relative;
   top: 10px;
 }
-#weatherstation .forecasts {
+#weatherstation .contents .forecasts {
   position: absolute;
   top: 0px;
   left: 0px;
 }
-#weatherstation .forecasts .forecast {
+#weatherstation .contents .forecasts .forecast {
   position: relative;
   height: 120px;
   width: 275px;
 }
-#weatherstation .forecasts .forecast .weekday {
+#weatherstation .contents .forecasts .forecast .weekday {
   position: absolute;
   top: 12px;
   left: 12px;
@@ -122,24 +130,24 @@
   font-size: 66px;
   opacity: 0.2;
 }
-#weatherstation .forecasts .forecast .night,
-#weatherstation .forecasts .forecast .day {
+#weatherstation .contents .forecasts .forecast .night,
+#weatherstation .contents .forecasts .forecast .day {
   position: absolute;
   left: 64px;
   opacity: 0.6;
 }
-#weatherstation .forecasts .forecast .night img,
-#weatherstation .forecasts .forecast .day img {
+#weatherstation .contents .forecasts .forecast .night img,
+#weatherstation .contents .forecasts .forecast .day img {
   width: 50px;
 }
-#weatherstation .forecasts .forecast .night {
+#weatherstation .contents .forecasts .forecast .night {
   top: 0;
 }
-#weatherstation .forecasts .forecast .day {
+#weatherstation .contents .forecasts .forecast .day {
   top: 60px;
 }
-#weatherstation .forecasts .forecast .temp-min,
-#weatherstation .forecasts .forecast .temp-max {
+#weatherstation .contents .forecasts .forecast .temp-min,
+#weatherstation .contents .forecasts .forecast .temp-max {
   position: absolute;
   left: 115px;
   font-size: 35px;
@@ -148,25 +156,25 @@
   font-weight: 700;
   opacity: 0.35;
 }
-#weatherstation .forecasts .forecast .temp-min {
+#weatherstation .contents .forecasts .forecast .temp-min {
   top: 2px;
 }
-#weatherstation .forecasts .forecast .temp-max {
+#weatherstation .contents .forecasts .forecast .temp-max {
   top: 62px;
 }
-#weatherstation .curves {
+#weatherstation .contents .curves {
   position: absolute;
   right: 30px;
   top: 20px;
   width: 150px;
   height: 150px;
 }
-#weatherstation .curves .curve.curve-sun {
+#weatherstation .contents .curves .curve.curve-sun {
   position: absolute;
   width: 170px;
   height: 150px;
 }
-#weatherstation .curves .curve.curve-sun .orbit {
+#weatherstation .contents .curves .curve.curve-sun .orbit {
   position: absolute;
   top: 0px;
   left: 10px;
@@ -176,7 +184,7 @@
   border: 1px dashed #aaa;
   z-index: 1;
 }
-#weatherstation .curves .curve.curve-sun .horizon {
+#weatherstation .contents .curves .curve.curve-sun .horizon {
   position: absolute;
   left: 0px;
   width: 170px;
@@ -184,14 +192,14 @@
   border-top: 1px dashed #fc0;
   z-index: 1;
 }
-#weatherstation .curves .curve.curve-sun .astre {
+#weatherstation .contents .curves .curve.curve-sun .astre {
   position: absolute;
   top: 75px;
   left: 85px;
   z-index: 3;
   transform-origin: 0 0 0;
 }
-#weatherstation .curves .curve.curve-sun .astre img {
+#weatherstation .contents .curves .curve.curve-sun .astre img {
   width: 30px;
   height: 34px;
   display: block;
@@ -200,7 +208,7 @@
   left: -90px;
   z-index: 3;
 }
-#weatherstation .curves .curve.curve-sun .point {
+#weatherstation .contents .curves .curve.curve-sun .point {
   background: #fc0;
   border-radius: 50%;
   width: 6px;
@@ -208,32 +216,32 @@
   position: absolute;
   z-index: 2;
 }
-#weatherstation .curves .curve.curve-sun .point span {
+#weatherstation .contents .curves .curve.curve-sun .point span {
   display: inline-block;
   position: absolute;
   font-size: 15px;
 }
-#weatherstation .curves .curve.curve-sun .point.set span {
+#weatherstation .contents .curves .curve.curve-sun .point.set span {
   text-align: right;
   top: 5px;
   right: 12px;
 }
-#weatherstation .curves .curve.curve-sun .point.rise span {
+#weatherstation .contents .curves .curve.curve-sun .point.rise span {
   top: 5px;
   left: 12px;
 }
-#weatherstation .curves .curve.curve-sun .orbit.earth {
+#weatherstation .contents .curves .curve.curve-sun .orbit.earth {
   background-position: 50% 50%;
   background-size: 200px 200px;
 }
-#weatherstation .curves .curve.curve-moon {
+#weatherstation .contents .curves .curve.curve-moon {
   position: absolute;
   width: 120px;
   height: 100px;
   top: 25px;
   left: 25px;
 }
-#weatherstation .curves .curve.curve-moon .orbit {
+#weatherstation .contents .curves .curve.curve-moon .orbit {
   position: absolute;
   top: 0px;
   left: 10px;
@@ -243,7 +251,7 @@
   border: 1px dashed #aaa;
   z-index: 1;
 }
-#weatherstation .curves .curve.curve-moon .horizon {
+#weatherstation .contents .curves .curve.curve-moon .horizon {
   position: absolute;
   left: 0px;
   width: 120px;
@@ -251,14 +259,14 @@
   border-top: 1px dashed #3BC5FF;
   z-index: 1;
 }
-#weatherstation .curves .curve.curve-moon .astre {
+#weatherstation .contents .curves .curve.curve-moon .astre {
   position: absolute;
   top: 50px;
   left: 60px;
   z-index: 3;
   transform-origin: 0 0 0;
 }
-#weatherstation .curves .curve.curve-moon .astre img {
+#weatherstation .contents .curves .curve.curve-moon .astre img {
   width: 30px;
   height: 34px;
   display: block;
@@ -267,7 +275,7 @@
   left: -65px;
   z-index: 3;
 }
-#weatherstation .curves .curve.curve-moon .point {
+#weatherstation .contents .curves .curve.curve-moon .point {
   background: #3BC5FF;
   border-radius: 50%;
   width: 6px;
@@ -275,61 +283,61 @@
   position: absolute;
   z-index: 2;
 }
-#weatherstation .curves .curve.curve-moon .point span {
+#weatherstation .contents .curves .curve.curve-moon .point span {
   display: inline-block;
   position: absolute;
   font-size: 15px;
 }
-#weatherstation .curves .curve.curve-moon .point.set span {
+#weatherstation .contents .curves .curve.curve-moon .point.set span {
   text-align: right;
   top: 5px;
   right: 12px;
 }
-#weatherstation .curves .curve.curve-moon .point.rise span {
+#weatherstation .contents .curves .curve.curve-moon .point.rise span {
   top: 5px;
   left: 12px;
 }
-#weatherstation .curves .curve.curve-moon .point span {
+#weatherstation .contents .curves .curve.curve-moon .point span {
   display: none;
 }
-#weatherstation .house {
+#weatherstation .contents .house {
   width: 60%;
   margin: 40px auto;
 }
-#weatherstation .house .sep {
+#weatherstation .contents .house .sep {
   min-width: 25px;
 }
-#weatherstation .house .backyard {
+#weatherstation .contents .house .backyard {
   color: #009d60;
 }
-#weatherstation .house .livingroom {
+#weatherstation .contents .house .livingroom {
   color: orange;
 }
-#weatherstation .house .bedroom {
+#weatherstation .contents .house .bedroom {
   color: orangered;
 }
-#weatherstation .house .bathroom {
+#weatherstation .contents .house .bathroom {
   color: #d03bee;
 }
-#weatherstation .house .kitchen {
+#weatherstation .contents .house .kitchen {
   color: #ccc;
 }
-#weatherstation .house .wc {
+#weatherstation .contents .house .wc {
   color: #2472aa;
 }
-#weatherstation .house .office {
+#weatherstation .contents .house .office {
   color: #051234;
 }
-#weatherstation .house td {
+#weatherstation .contents .house td {
   vertical-align: bottom;
   text-align: left;
 }
-#weatherstation .house td.hicon {
+#weatherstation .contents .house td.hicon {
   width: 0;
   padding-right: 5px;
   padding-left: 10px;
 }
-#weatherstation .house td.hum {
+#weatherstation .contents .house td.hum {
   font-size: 80%;
   padding-bottom: 2px;
 }
diff --git a/style/weatherstation.less b/style/weatherstation.less
index 942a72a..ecf4656 100644
--- a/style/weatherstation.less
+++ b/style/weatherstation.less
@@ -1,7 +1,5 @@
 #weatherstation {
   position: relative;
-  width: 800px;
-  height: 480px;
   background-size: cover;
   backgroud-position: 50% 50%;
   background-repeat: no-repeat;
@@ -10,337 +8,347 @@
   z-index: 10001;
   color: #fff;
   font-size: 30px;
+  width: 100%;
+  height: 100%;
 
-  .temp-min {
-    color: cornflowerblue;
-  }
-
-  .temp-max {
-    color: orangered;
-  }
-
-  .time {
+  .contents {
     position: absolute;
-    display: inline-block;
-    text-align: right;
-    text-transform: uppercase;
-    font-weight: 700;
-    bottom: 20px;
-    right: 20px;
-
-    .hour {
-      display: block;
-      font-size: 60px;
-    }
+    top: 0px;
+    left: 0px;
+    width: 800px;
+    height: 480px;
+    transform-origin: 0 0;
 
-    .date {
-      font-size: 22px;
-      display: block;
+    .temp-min {
+      color: cornflowerblue;
     }
-  }
 
-  .moon {
-    position: absolute;
-    right: 15px;
-    top: 15px;
-
-    img {
-      width: 100px;
-      height: 100px;
+    .temp-max {
+      color: orangered;
     }
-  }
 
-  .current {
-    text-align: center;
-    font-size: 22px;
-    width: 400px;
-    white-space: nowrap;
-    position: absolute;
-    left: 200px;
+    .time {
+      position: absolute;
+      display: inline-block;
+      text-align: right;
+      text-transform: uppercase;
+      font-weight: 700;
+      bottom: 20px;
+      right: 20px;
+
+      .hour {
+        display: block;
+        font-size: 60px;
+      }
 
-    .icon {
-      width: 200px;
-      text-align: center;
-      position: relative;
-      top: 10px;
-      margin: 0 auto;
+      .date {
+        font-size: 22px;
+        display: block;
+      }
     }
 
-    .temps {
-      position: relative;
-      margin-top: -10px;
+    .moon {
+      position: absolute;
+      right: 15px;
+      top: 15px;
 
-      > div {
-        display: inline-block;
-        margin: 0 8px;
+      img {
+        width: 100px;
+        height: 100px;
       }
+    }
 
-      .temp {
-        font-weight: 700;
-        font-size: 50px;
-        line-height: 50px;
+    .current {
+      text-align: center;
+      font-size: 22px;
+      width: 400px;
+      white-space: nowrap;
+      position: absolute;
+      left: 200px;
+
+      .icon {
+        width: 200px;
+        text-align: center;
+        position: relative;
+        top: 10px;
+        margin: 0 auto;
       }
-    }
 
-    .fa {
-      font-size: 18px;
-    }
+      .temps {
+        position: relative;
+        margin-top: -10px;
 
-    .fa-arrow-circle-up {
-      transform: rotate(45deg);
-    }
+        > div {
+          display: inline-block;
+          margin: 0 8px;
+        }
 
-    .fa-arrow-circle-down {
-      transform: rotate(-45deg);
-    }
-  }
+        .temp {
+          font-weight: 700;
+          font-size: 50px;
+          line-height: 50px;
+        }
+      }
 
-  .icons {
-    position: absolute;
-    top: 22px;
-    width: 100%;
+      .fa {
+        font-size: 18px;
+      }
 
-    .night {
-      position: absolute;
-      left: 25px;
+      .fa-arrow-circle-up {
+        transform: rotate(45deg);
+      }
+
+      .fa-arrow-circle-down {
+        transform: rotate(-45deg);
+      }
     }
 
-    .day {
+    .icons {
       position: absolute;
-      right: 25px;
-    }
+      top: 22px;
+      width: 100%;
 
-    img {
-      width: 75px;
-    }
+      .night {
+        position: absolute;
+        left: 25px;
+      }
 
-    > div {
-      width: 100px;
-      display: inline-block;
-    }
-  }
+      .day {
+        position: absolute;
+        right: 25px;
+      }
 
-  .pp {
-    position: relative;
-    top: 10px;
-  }
+      img {
+        width: 75px;
+      }
 
-  .forecasts {
-    position: absolute;
-    top: 0px;
-    left: 0px;
+      > div {
+        width: 100px;
+        display: inline-block;
+      }
+    }
 
-    .forecast {
+    .pp {
       position: relative;
-      height: 120px;
-      width: 275px;
+      top: 10px;
+    }
 
-      .weekday {
-        position: absolute;
-        top: 12px;
-        left: 12px;
-        font-weight: 700;
-        font-size: 66px;
-        opacity: 0.2;
-      }
+    .forecasts {
+      position: absolute;
+      top: 0px;
+      left: 0px;
+
+      .forecast {
+        position: relative;
+        height: 120px;
+        width: 275px;
+
+        .weekday {
+          position: absolute;
+          top: 12px;
+          left: 12px;
+          font-weight: 700;
+          font-size: 66px;
+          opacity: 0.2;
+        }
 
-      .night, .day {
-        position: absolute;
+        .night, .day {
+          position: absolute;
 
-        img {
-          width: 50px;
-        }
+          img {
+            width: 50px;
+          }
 
-        left: 64px;
-        opacity: 0.6;
-      }
+          left: 64px;
+          opacity: 0.6;
+        }
 
-      .night {
-        top: 0;
-      }
+        .night {
+          top: 0;
+        }
 
-      .day {
-        top: 60px;
-      }
+        .day {
+          top: 60px;
+        }
 
-      .temp-min, .temp-max {
-        position: absolute;
-        left: 115px;
-        font-size: 35px;
-        text-align: right;
-        width: 82px;
-        font-weight: 700;
-        opacity: .35;
-      }
+        .temp-min, .temp-max {
+          position: absolute;
+          left: 115px;
+          font-size: 35px;
+          text-align: right;
+          width: 82px;
+          font-weight: 700;
+          opacity: .35;
+        }
 
-      .temp-min {
-        top: 2px;
-      }
+        .temp-min {
+          top: 2px;
+        }
 
-      .temp-max {
-        top: 62px;
+        .temp-max {
+          top: 62px;
+        }
       }
     }
-  }
 
-  .curves {
-    position: absolute;
-    right: 30px;
-    top: 20px;
-    width: 150px;
-    height: 150px;
+    .curves {
+      position: absolute;
+      right: 30px;
+      top: 20px;
+      width: 150px;
+      height: 150px;
 
-    .curve {
-      &.curve-sun {
-        .curvemix(150, 10, #fc0);
+      .curve {
+        &.curve-sun {
+          .curvemix(150, 10, #fc0);
 
-        .orbit.earth {
-          background-position: 50% 50%;
-          background-size: 200px 200px;
+          .orbit.earth {
+            background-position: 50% 50%;
+            background-size: 200px 200px;
 
+          }
         }
-      }
 
-      &.curve-moon {
-        .curvemix(100, 10, #3BC5FF);
-        top: 25px;
-        left: 25px;
+        &.curve-moon {
+          .curvemix(100, 10, #3BC5FF);
+          top: 25px;
+          left: 25px;
 
-        .point {
-          span {
-            display: none;
+          .point {
+            span {
+              display: none;
+            }
           }
         }
       }
     }
-  }
 
-  .house {
-    width: 60%;
-    margin: 40px auto;
+    .house {
+      width: 60%;
+      margin: 40px auto;
 
-    .sep {
-      min-width: 25px;
-    }
+      .sep {
+        min-width: 25px;
+      }
 
-    .backyard {
-      color: #009d60;
-    }
+      .backyard {
+        color: #009d60;
+      }
 
-    .livingroom {
-      color: orange;
-    }
+      .livingroom {
+        color: orange;
+      }
 
-    .bedroom {
-      color: orangered;
-    }
+      .bedroom {
+        color: orangered;
+      }
 
-    .bathroom {
-      color: #d03bee;
-    }
+      .bathroom {
+        color: #d03bee;
+      }
 
-    .kitchen {
-      color: #ccc;
-    }
+      .kitchen {
+        color: #ccc;
+      }
 
-    .wc {
-      color: #2472aa;
-    }
+      .wc {
+        color: #2472aa;
+      }
 
-    .office {
-      color: #051234;
-    }
+      .office {
+        color: #051234;
+      }
 
-    td {
-      vertical-align: bottom;
-      text-align: left;
+      td {
+        vertical-align: bottom;
+        text-align: left;
 
-      &.hicon {
-        width: 0;
-        padding-right: 5px;
-        padding-left: 10px;
-      }
+        &.hicon {
+          width: 0;
+          padding-right: 5px;
+          padding-left: 10px;
+        }
 
-      &.hum {
-        font-size: 80%;
-        padding-bottom: 2px;
+        &.hum {
+          font-size: 80%;
+          padding-bottom: 2px;
+        }
       }
     }
   }
-}
-
-.curvemix(@width,@margin,@color) {
-  position: absolute;
-  width: unit(@width+@margin*2, px);
-  height: unit(@width, px);
-  .orbit {
-    position: absolute;
-    top: 0px;
-    left: unit(@margin, px);
-    width: unit(@width, px);
-    height: unit(@width, px);
-    border-radius: 50%;
-    border: 1px dashed #aaa;
-    z-index: 1;
-  }
 
-  .horizon {
+  .curvemix(@width,@margin,@color) {
     position: absolute;
-    left: 0px;
     width: unit(@width+@margin*2, px);
-    top: unit(@width/2-1, px);
-    border-top: 1px dashed @color;
-    z-index: 1;
-  }
-
-  .astre {
-    img {
-      width: 30px;
-      height: 34px;
-      display: block;
+    height: unit(@width, px);
+    .orbit {
       position: absolute;
-      top: -17px;
-      left: unit(@width/-2-15, px);
-      z-index: 3;
+      top: 0px;
+      left: unit(@margin, px);
+      width: unit(@width, px);
+      height: unit(@width, px);
+      border-radius: 50%;
+      border: 1px dashed #aaa;
+      z-index: 1;
     }
 
-    position: absolute;
-    top: unit(@width/2, px);
-    left: unit(@width/2+@margin, px);
-    z-index: 3;
-    transform-origin: 0 0 0;
-  }
-
-  .point {
-    background: @color;
-    border-radius: 50%;
-    width: 6px;
-    height: 6px;
-    position: absolute;
+    .horizon {
+      position: absolute;
+      left: 0px;
+      width: unit(@width+@margin*2, px);
+      top: unit(@width/2-1, px);
+      border-top: 1px dashed @color;
+      z-index: 1;
+    }
 
-    z-index: 2;
+    .astre {
+      img {
+        width: 30px;
+        height: 34px;
+        display: block;
+        position: absolute;
+        top: -17px;
+        left: unit(@width/-2-15, px);
+        z-index: 3;
+      }
 
-    span {
-      display: inline-block;
       position: absolute;
-      font-size: 15px;
+      top: unit(@width/2, px);
+      left: unit(@width/2+@margin, px);
+      z-index: 3;
+      transform-origin: 0 0 0;
     }
 
-    &.set {
+    .point {
+      background: @color;
+      border-radius: 50%;
+      width: 6px;
+      height: 6px;
+      position: absolute;
+
+      z-index: 2;
+
       span {
-        text-align: right;
-        top: 5px;
-        right: 12px;
+        display: inline-block;
+        position: absolute;
+        font-size: 15px;
       }
-    }
 
-    &.rise {
-      span {
-        top: 5px;
-        left: 12px;
+      &.set {
+        span {
+          text-align: right;
+          top: 5px;
+          right: 12px;
+        }
       }
-    }
-  }
 
+      &.rise {
+        span {
+          top: 5px;
+          left: 12px;
+        }
+      }
+    }
 
+  }
 }
\ No newline at end of file
-- 
2.39.5