Mercurial > mbsePi-apps / file diff

--- a/www/css/style.css	Sun Apr 14 14:41:38 2024 +0200
+++ b/www/css/style.css	Mon Apr 15 17:04:57 2024 +0200
@@ -29,3 +29,227 @@
 }
 
 
+#fermenter_table {
+    width: 960px;
+    height: 210px;
+    background: #252526;
+    margin: 5px;
+    border: 2px solid;
+    border-color: #59b4d4;
+    border-radius: 5px 5px 5px 5px;
+}
+
+
+/*
+ * +----------------------------------------------------+
+ * |+-------------------++--------++-------------------+|
+ * ||                   ||        ||                   ||
+ * ||                   || chiller||                   ||
+ * ||                   ||        ||                   ||
+ * ||     Air temp      |+--------+|     Beer temp     ||
+ * ||    Temperature    |          |     Pressure      ||
+ * ||                   |          |                   ||
+ * ||                   |          |                   ||
+ * ||                   |          |                   ||
+ * |+-------------------+          +-------------------+|
+ * +----------------------------------------------------+
+ */
+
+#fermenter_thermometers {
+    width: 960px;
+    height: 390px;
+    float: left;
+    background-color: #252526;
+    margin: 5px;
+    margin-top: 3px;
+    border: 2px solid;
+    border-color: #59b4d4;
+    border-radius: 5px 5px 5px 5px;
+}
+
+
+/*
+ * +----------panel_top------------+
+ * |  door light alarm power LEDs  |
+ * |                               |
+ * +-------------------------------+
+ * +---------panel_display---------+
+ * |+-------------++--------------+|
+ * ||  display 1  ||  display 2   ||
+ * |+-------------++--------------+|
+ * +-------------------------------+
+ * +---------panel_control---------+
+ * |+--------++---------++--------+|
+ * ||  led 1 ||  led 2  ||  led 3 ||
+ * |+--------++---------++--------+|
+ * |+--------++---------++--------+|
+ * ||  sw 1  ||   sw 2  ||  sw 3  ||
+ * |+--------++---------++--------+|
+ * +-------------------------------+
+ * +--------panel_buttons----------+
+ * |                               |
+ * +-------------------------------+
+ */
+#fermenter_panel_top {
+  width: 290px;
+  height: 100px;
+  float: right;
+  margin: 5px;
+  background-color: #252526;
+  border: 2px solid;
+  border-color: #59b4d4;
+  border-radius: 5px 5px 5px 5px;
+}
+
+#fermenter_doorled,
+#fermenter_lightled,
+#fermenter_alarmled,
+#fermenter_powerled {
+  width: 50px;
+  height: 30px;
+  float: left;
+  text-align: center;
+  margin-top: 15px;
+  margin-left: 20px;
+}
+
+#fermenter_panel_display {
+  width: 290px;
+  height:  98px;
+  float: right;
+  margin: 5px;
+  margin-top: 3px;
+  background-color: #252526;
+  border: 2px solid;
+  border-color: #59b4d4;
+  border-radius: 5px 5px 5px 5px;
+}
+
+#fermenter_display {
+  width: 145px;
+  height: 98px;
+  float: left;
+  text-align: center;
+}
+
+
+#fermenter_panel_control {
+  width: 290px;
+  height: 150px;
+  float: right;
+  margin: 5px;
+  margin-top: 3px;
+  background-color: #252526;
+  border: 2px solid;
+  border-color: #59b4d4;
+  border-radius: 5px 5px 5px 5px;
+}
+
+#fermenter_led1,
+#fermenter_led2,
+#fermenter_led3 {
+  width: 96px;
+  height: 30px;
+  float: left;
+  text-align: center;
+  margin-top: 13px;
+}
+
+#fermenter_toggle1 {
+  float: left;
+  margin-left: 29px;
+  margin-top: 20px;
+}
+
+#fermenter_toggle2,
+#fermenter_toggle3 {
+  float: left;
+  margin-left: 60px;
+  margin-top: 20px;
+}
+
+#fermenter_panel_buttons {
+  width: 290px;
+  height: 227px;
+  float: right;
+  margin: 5px;
+  margin-top: 3px;
+  background-color: #252526;
+  border: 2px solid;
+  border-color: #59b4d4;
+  border-radius: 5px 5px 5px 5px;
+}
+
+.LEDred_on {
+    margin: 5px auto;
+    width: 18px;
+    height: 18px;
+    background-color: #F40;
+    border-radius: 50%;
+    box-shadow: #000 0 0px 4px 1px, inset #C33 0 -1px 5px, #f44 0 2px 12px;
+}
+
+.LEDred_off {
+    margin: 5px auto;
+    width: 18px;
+    height: 18px;
+    background-color: #820;
+    border-radius: 50%;
+    box-shadow: #400 0 0px 1px 1px;
+}
+
+.LEDyellow_on {
+    margin: 5px auto;
+    width: 18px;
+    height: 18px;
+    background-color: #FF0;
+    border-radius: 50%;
+    box-shadow: #000 0 0px 4px 1px, inset #860 0 -1px 5px, #DD0 0 2px 12px;
+}
+
+.LEDyellow_off {
+    margin: 5px auto;
+    width: 18px;
+    height: 18px;
+    background-color: #A90;
+    border-radius: 50%;
+    box-shadow: #440 0 0px 1px 1px;
+}
+
+.LEDgreen_on {
+    margin: 5px auto;
+    width: 18px;
+    height: 18px;
+    background-color: #5E0;
+    border-radius: 50%;
+    box-shadow: #000 0 0px 4px 1px, inset #270 0 -1px 5px, #5D0 0 2px 12px;
+}
+
+.LEDgreen_off {
+    margin: 5px auto;
+    width: 18px;
+    height: 18px;
+    background-color: #270;
+    border-radius: 50%;
+    box-shadow: #250 0 0px 1px 1px;
+}
+
+.LEDblue_on {
+    margin: 5px auto;
+    width: 18px;
+    height: 18px;
+    background-color: #4AF;
+    border-radius: 50%;
+    box-shadow: #000 0 0px 4px 1px, inset #247 0 -1px 5px, #48F 0 2px 12px;
+}
+
+.LEDblue_off {
+    margin: 5px auto;
+    width: 18px;
+    height: 18px;
+    background-color: #137;
+    border-radius: 50%;
+    box-shadow: #024 0 0px 1px 1px;
+}
+
+