From 68cc18379b70402db385d2682d0265b3832861f2 Mon Sep 17 00:00:00 2001 From: Humberto Alfonso Díaz Date: Thu, 4 Jul 2019 13:37:31 +0200 Subject: FUNCT First layout structure --- src/images/HMI_HVAC_Active.svg | 35 ++++++++++ src/images/HMI_HVAC_AirDown_Active.svg | 66 +++++++++++++++++ src/images/HMI_HVAC_AirDown_Inactive.svg | 69 ++++++++++++++++++ src/images/HMI_HVAC_AirRight_Active.svg | 69 ++++++++++++++++++ src/images/HMI_HVAC_AirRight_Inactive.svg | 72 +++++++++++++++++++ src/images/HMI_HVAC_AirUp_Active.svg | 74 ++++++++++++++++++++ src/images/HMI_HVAC_AirUp_Inactive.svg | 75 ++++++++++++++++++++ src/images/HMI_HVAC_ChairIndicator_OFF.svg | 76 ++++++++++++++++++++ src/images/HMI_HVAC_ChairIndicator_One.svg | 31 ++++++++ src/images/HMI_HVAC_ChairIndicator_Two.svg | 30 ++++++++ src/images/HMI_HVAC_Circulation_Active.svg | 87 +++++++++++++++++++++++ src/images/HMI_HVAC_Circulation_Inactive.svg | 87 +++++++++++++++++++++++ src/images/HMI_HVAC_Fan_Icon.svg | 46 ++++++++++++ src/images/HMI_HVAC_Front_Active.svg | 75 ++++++++++++++++++++ src/images/HMI_HVAC_Front_Inactive.svg | 72 +++++++++++++++++++ src/images/HMI_HVAC_Inactive.svg | 31 ++++++++ src/images/HMI_HVAC_Left_Chair_OFF.svg | 87 +++++++++++++++++++++++ src/images/HMI_HVAC_Left_Chair_ON.svg | 59 ++++++++++++++++ src/images/HMI_HVAC_Rear_Active.svg | 101 +++++++++++++++++++++++++++ src/images/HMI_HVAC_Rear_Inactive.svg | 91 ++++++++++++++++++++++++ src/images/HMI_HVAC_Right_Chair_OFF.svg | 87 +++++++++++++++++++++++ src/images/HMI_HVAC_Right_Chair_ON.svg | 60 ++++++++++++++++ src/index.html | 54 +++++++++++++- src/styles/app.scss | 3 +- src/styles/main.scss | 89 ++++++++++++++++++++--- 25 files changed, 1612 insertions(+), 14 deletions(-) create mode 100644 src/images/HMI_HVAC_Active.svg create mode 100644 src/images/HMI_HVAC_AirDown_Active.svg create mode 100644 src/images/HMI_HVAC_AirDown_Inactive.svg create mode 100644 src/images/HMI_HVAC_AirRight_Active.svg create mode 100644 src/images/HMI_HVAC_AirRight_Inactive.svg create mode 100644 src/images/HMI_HVAC_AirUp_Active.svg create mode 100644 src/images/HMI_HVAC_AirUp_Inactive.svg create mode 100644 src/images/HMI_HVAC_ChairIndicator_OFF.svg create mode 100644 src/images/HMI_HVAC_ChairIndicator_One.svg create mode 100644 src/images/HMI_HVAC_ChairIndicator_Two.svg create mode 100644 src/images/HMI_HVAC_Circulation_Active.svg create mode 100644 src/images/HMI_HVAC_Circulation_Inactive.svg create mode 100644 src/images/HMI_HVAC_Fan_Icon.svg create mode 100644 src/images/HMI_HVAC_Front_Active.svg create mode 100644 src/images/HMI_HVAC_Front_Inactive.svg create mode 100644 src/images/HMI_HVAC_Inactive.svg create mode 100644 src/images/HMI_HVAC_Left_Chair_OFF.svg create mode 100644 src/images/HMI_HVAC_Left_Chair_ON.svg create mode 100644 src/images/HMI_HVAC_Rear_Active.svg create mode 100644 src/images/HMI_HVAC_Rear_Inactive.svg create mode 100644 src/images/HMI_HVAC_Right_Chair_OFF.svg create mode 100644 src/images/HMI_HVAC_Right_Chair_ON.svg diff --git a/src/images/HMI_HVAC_Active.svg b/src/images/HMI_HVAC_Active.svg new file mode 100644 index 0000000..71e6aa0 --- /dev/null +++ b/src/images/HMI_HVAC_Active.svg @@ -0,0 +1,35 @@ + + + + + + + + + + +]> + + + + + + + + + + + + + + diff --git a/src/images/HMI_HVAC_AirDown_Active.svg b/src/images/HMI_HVAC_AirDown_Active.svg new file mode 100644 index 0000000..85dd533 --- /dev/null +++ b/src/images/HMI_HVAC_AirDown_Active.svg @@ -0,0 +1,66 @@ + + + + + + + + + + +]> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/HMI_HVAC_AirDown_Inactive.svg b/src/images/HMI_HVAC_AirDown_Inactive.svg new file mode 100644 index 0000000..a013f4b --- /dev/null +++ b/src/images/HMI_HVAC_AirDown_Inactive.svg @@ -0,0 +1,69 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_AirRight_Active.svg b/src/images/HMI_HVAC_AirRight_Active.svg new file mode 100644 index 0000000..cfb9452 --- /dev/null +++ b/src/images/HMI_HVAC_AirRight_Active.svg @@ -0,0 +1,69 @@ + + + + + + + + + + +]> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/HMI_HVAC_AirRight_Inactive.svg b/src/images/HMI_HVAC_AirRight_Inactive.svg new file mode 100644 index 0000000..991a773 --- /dev/null +++ b/src/images/HMI_HVAC_AirRight_Inactive.svg @@ -0,0 +1,72 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_AirUp_Active.svg b/src/images/HMI_HVAC_AirUp_Active.svg new file mode 100644 index 0000000..f168a39 --- /dev/null +++ b/src/images/HMI_HVAC_AirUp_Active.svg @@ -0,0 +1,74 @@ + + + + + + + + + + +]> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/HMI_HVAC_AirUp_Inactive.svg b/src/images/HMI_HVAC_AirUp_Inactive.svg new file mode 100644 index 0000000..39e1fa1 --- /dev/null +++ b/src/images/HMI_HVAC_AirUp_Inactive.svg @@ -0,0 +1,75 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_ChairIndicator_OFF.svg b/src/images/HMI_HVAC_ChairIndicator_OFF.svg new file mode 100644 index 0000000..1fcd17f --- /dev/null +++ b/src/images/HMI_HVAC_ChairIndicator_OFF.svg @@ -0,0 +1,76 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_ChairIndicator_One.svg b/src/images/HMI_HVAC_ChairIndicator_One.svg new file mode 100644 index 0000000..d560c84 --- /dev/null +++ b/src/images/HMI_HVAC_ChairIndicator_One.svg @@ -0,0 +1,31 @@ + + + + + + + + + + +]> + + + + + + + + + + + + + diff --git a/src/images/HMI_HVAC_ChairIndicator_Two.svg b/src/images/HMI_HVAC_ChairIndicator_Two.svg new file mode 100644 index 0000000..b31cc90 --- /dev/null +++ b/src/images/HMI_HVAC_ChairIndicator_Two.svg @@ -0,0 +1,30 @@ + + + + + + + + + + +]> + + + + + + + + + + + + + diff --git a/src/images/HMI_HVAC_Circulation_Active.svg b/src/images/HMI_HVAC_Circulation_Active.svg new file mode 100644 index 0000000..def92bb --- /dev/null +++ b/src/images/HMI_HVAC_Circulation_Active.svg @@ -0,0 +1,87 @@ + + + + + + + + + + +]> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/HMI_HVAC_Circulation_Inactive.svg b/src/images/HMI_HVAC_Circulation_Inactive.svg new file mode 100644 index 0000000..9c7d43f --- /dev/null +++ b/src/images/HMI_HVAC_Circulation_Inactive.svg @@ -0,0 +1,87 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_Fan_Icon.svg b/src/images/HMI_HVAC_Fan_Icon.svg new file mode 100644 index 0000000..ee583a0 --- /dev/null +++ b/src/images/HMI_HVAC_Fan_Icon.svg @@ -0,0 +1,46 @@ + + + + + + + + + + +]> + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/HMI_HVAC_Front_Active.svg b/src/images/HMI_HVAC_Front_Active.svg new file mode 100644 index 0000000..146e509 --- /dev/null +++ b/src/images/HMI_HVAC_Front_Active.svg @@ -0,0 +1,75 @@ + + + + + + + + + + +]> + + + + + + + FRONT + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/HMI_HVAC_Front_Inactive.svg b/src/images/HMI_HVAC_Front_Inactive.svg new file mode 100644 index 0000000..c5d9166 --- /dev/null +++ b/src/images/HMI_HVAC_Front_Inactive.svg @@ -0,0 +1,72 @@ + + + +image/svg+xmlFRONT + \ No newline at end of file diff --git a/src/images/HMI_HVAC_Inactive.svg b/src/images/HMI_HVAC_Inactive.svg new file mode 100644 index 0000000..2956a26 --- /dev/null +++ b/src/images/HMI_HVAC_Inactive.svg @@ -0,0 +1,31 @@ + + + + + + + + + + +]> + + + + + + + + + + diff --git a/src/images/HMI_HVAC_Left_Chair_OFF.svg b/src/images/HMI_HVAC_Left_Chair_OFF.svg new file mode 100644 index 0000000..1412266 --- /dev/null +++ b/src/images/HMI_HVAC_Left_Chair_OFF.svg @@ -0,0 +1,87 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_Left_Chair_ON.svg b/src/images/HMI_HVAC_Left_Chair_ON.svg new file mode 100644 index 0000000..b27b126 --- /dev/null +++ b/src/images/HMI_HVAC_Left_Chair_ON.svg @@ -0,0 +1,59 @@ + + + + + + + + + + +]> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/HMI_HVAC_Rear_Active.svg b/src/images/HMI_HVAC_Rear_Active.svg new file mode 100644 index 0000000..182ccbd --- /dev/null +++ b/src/images/HMI_HVAC_Rear_Active.svg @@ -0,0 +1,101 @@ + + + + + + + + + + +]> + + + + + + REAR + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/images/HMI_HVAC_Rear_Inactive.svg b/src/images/HMI_HVAC_Rear_Inactive.svg new file mode 100644 index 0000000..574c541 --- /dev/null +++ b/src/images/HMI_HVAC_Rear_Inactive.svg @@ -0,0 +1,91 @@ + + + +image/svg+xmlREAR + \ No newline at end of file diff --git a/src/images/HMI_HVAC_Right_Chair_OFF.svg b/src/images/HMI_HVAC_Right_Chair_OFF.svg new file mode 100644 index 0000000..711a942 --- /dev/null +++ b/src/images/HMI_HVAC_Right_Chair_OFF.svg @@ -0,0 +1,87 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/src/images/HMI_HVAC_Right_Chair_ON.svg b/src/images/HMI_HVAC_Right_Chair_ON.svg new file mode 100644 index 0000000..74b4861 --- /dev/null +++ b/src/images/HMI_HVAC_Right_Chair_ON.svg @@ -0,0 +1,60 @@ + + + + + + + + + + +]> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/index.html b/src/index.html index f717c10..e450e2b 100644 --- a/src/index.html +++ b/src/index.html @@ -6,8 +6,58 @@ -
- HVAC +
+ +
+
+
+ + +
+
+ +
+ A/C +
+
+
+ + +
+
+ +
+
+
+ +
+ AUTO +
+
+
+ +
+
+
+ +
+
+
+ + + + + + + + + + + + + + +
diff --git a/src/styles/app.scss b/src/styles/app.scss index 5e7fbd4..c2a4c72 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -1,6 +1,7 @@ $colors: ( primary: #00ADDC, - font: #999999 + font: #999999, + grey: #848286 ); @import "main.scss"; diff --git a/src/styles/main.scss b/src/styles/main.scss index a72b94b..5fd580e 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -14,7 +14,7 @@ body { color: map-get($colors, font); margin: 5%; - .parent { + .center { display: flex; flex-direction: row; flex-wrap: wrap; @@ -23,19 +23,86 @@ body { height: 100%; .item { - color: map-get($colors, font); - text-decoration: none; + &:before { + content:''; + float:left; + padding-top:75%; + } + + &.ac, &.auto { + .label { + font-size: 5rem; + text-align: center; + margin-top: -50%; + } + } + + &.seat { + img { + width: 50%; + margin: 0 25%; + } + } + + &.circulation { + + } + + &.block { + &:before { + padding-top:150%; + } + + .item { + height: 50%; + position: relative; + float: left; + width: 100%; + } + } + + &.temperatures { + &:before { + padding-top:150%; + } - .icon { - width: 100%; - height: 100%; + .scrolling { + position: relative; + float: left; + width: 100%; + height: 100%; + overflow: scroll; + + .temperature { + position: relative; + float: left; + height: 50%; + width: 100%; + font-size: 10rem; + text-align: center; + } + } } - .name { - width: 100%; - text-align: center; - text-transform: uppercase; - margin-top: -20%; + text-decoration: none; + flex-basis: 33%; + } + } + + .bottom { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-start; + height: 100%; + + .button { + flex-basis: 20%; + + img { + width: 80%; + margin: 0 10%; } } } -- cgit 1.2.3-korg