diff --git a/public/index.html b/public/index.html
index 445f67e..76ad5e2 100644
--- a/public/index.html
+++ b/public/index.html
@@ -17,29 +17,36 @@
-
- Settings 1
+
+ 220V
-
-
- Settings 2
+
-
-
- Settings 3
+
-
- Settings 4
+
+ Lamp 1
+
-
-
- Settings 5
+
+
+ Lamp 2
+
diff --git a/public/script.js b/public/script.js
index 4710c4d..167fbd6 100644
--- a/public/script.js
+++ b/public/script.js
@@ -71,6 +71,18 @@ const SetPipePercent = (key = "top", percent = 0) => {
);
};
+const ToggleSettings = (className = "") => {
+ document
+ .querySelector(`div.settings-item.${className}`)
+ .classList.toggle("active");
+ let on = document
+ .querySelector(`div.settings-item.${className}`)
+ .classList.contains("active");
+ document.querySelector(`div.settings-item.${className} button`).innerHTML = on
+ ? "OFF"
+ : "ON";
+};
+
NewMeasurementCircle("temp", [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
ShowIconByName("sun");
diff --git a/src/components/seetings/items/item--1.scss b/src/components/seetings/items/item--1.scss
index 68a47fa..db5ed50 100644
--- a/src/components/seetings/items/item--1.scss
+++ b/src/components/seetings/items/item--1.scss
@@ -1,28 +1,115 @@
@mixin item--1 {
- background: linear-gradient(70deg, rgba(0, 212, 255, 1) 8%, rgba(9, 9, 121, 1) 13%, transparent 23%);
- clip-path: circle(140% at 100% -100%);
+ clip-path: circle(140% at 100% -100%);
- span {
- left: 60px;
- }
+ span {
+ left: 60px;
+ }
+
+ &:not(.active) {
+ background: linear-gradient(
+ 70deg,
+ #e89635 8%,
+ #b24319 13%,
+ transparent 23%
+ );
&:hover {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 16%, rgba(9, 9, 121, 1) 78%, transparent 90%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 16%,
+ #b24319 78%,
+ transparent 90%
+ );
- &::before {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 74%, rgba(9, 9, 121, 1) 79%, transparent 81%);
- }
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ #e89635 74%,
+ #b24319 79%,
+ transparent 81%
+ );
+ }
- &::after {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 80%, rgba(9, 9, 121, 1) 85%, transparent 97%);
- }
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ #e89635 80%,
+ #b24319 85%,
+ transparent 97%
+ );
+ }
}
&::before {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 9%, rgba(9, 9, 121, 1) 64%, transparent 76%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 9%,
+ #b24319 64%,
+ transparent 76%
+ );
}
&::after {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 5%, rgba(9, 9, 121, 1) 70%, transparent 82%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 5%,
+ #b24319 70%,
+ transparent 82%
+ );
}
+ }
+
+ &.active {
+ background: linear-gradient(
+ 70deg,
+ rgba(0, 212, 255, 1) 8%,
+ rgba(9, 9, 121, 1) 13%,
+ transparent 23%
+ );
+
+ &:hover {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 16%,
+ rgba(9, 9, 121, 1) 78%,
+ transparent 90%
+ );
+
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 74%,
+ rgba(9, 9, 121, 1) 79%,
+ transparent 81%
+ );
+ }
+
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 80%,
+ rgba(9, 9, 121, 1) 85%,
+ transparent 97%
+ );
+ }
+ }
+
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 9%,
+ rgba(9, 9, 121, 1) 64%,
+ transparent 76%
+ );
+ }
+
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 5%,
+ rgba(9, 9, 121, 1) 70%,
+ transparent 82%
+ );
+ }
+ }
}
diff --git a/src/components/seetings/items/item--2.scss b/src/components/seetings/items/item--2.scss
index 60f2f0d..fc3819d 100644
--- a/src/components/seetings/items/item--2.scss
+++ b/src/components/seetings/items/item--2.scss
@@ -1,28 +1,115 @@
@mixin item--2 {
- background: linear-gradient(53deg, rgba(0, 212, 255, 1) 23%, rgba(9, 9, 121, 1) 28%, transparent 39%);
- clip-path: circle(100% at 75% -140%);
+ clip-path: circle(100% at 75% -140%);
- span {
- left: 120px;
- }
+ span {
+ left: 120px;
+ }
+
+ &:not(.active) {
+ background: linear-gradient(
+ 53deg,
+ #e89635 23%,
+ #b24319 28%,
+ transparent 39%
+ );
&:hover {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 31%, rgba(9, 9, 121, 1) 78%, transparent 90%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 31%,
+ #b24319 78%,
+ transparent 90%
+ );
- &::before {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 81%, rgba(9, 9, 121, 1) 86%, transparent 98%);
- }
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ #e89635 81%,
+ #b24319 86%,
+ transparent 98%
+ );
+ }
- &::after {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 88%, rgba(9, 9, 121, 1) 93%, transparent 105%);
- }
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ #e89635 88%,
+ #b24319 93%,
+ transparent 105%
+ );
+ }
}
&::before {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 6%, rgba(9, 9, 121, 1) 71%, transparent 83%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 6%,
+ #b24319 71%,
+ transparent 83%
+ );
}
&::after {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 3%, rgba(9, 9, 121, 1) 78%, transparent 90%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 3%,
+ #b24319 78%,
+ transparent 90%
+ );
}
+ }
+
+ &.active {
+ background: linear-gradient(
+ 53deg,
+ rgba(0, 212, 255, 1) 23%,
+ rgba(9, 9, 121, 1) 28%,
+ transparent 39%
+ );
+
+ &:hover {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 31%,
+ rgba(9, 9, 121, 1) 78%,
+ transparent 90%
+ );
+
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 81%,
+ rgba(9, 9, 121, 1) 86%,
+ transparent 98%
+ );
+ }
+
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 88%,
+ rgba(9, 9, 121, 1) 93%,
+ transparent 105%
+ );
+ }
+ }
+
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 6%,
+ rgba(9, 9, 121, 1) 71%,
+ transparent 83%
+ );
+ }
+
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 3%,
+ rgba(9, 9, 121, 1) 78%,
+ transparent 90%
+ );
+ }
+ }
}
diff --git a/src/components/seetings/items/item-1.scss b/src/components/seetings/items/item-1.scss
index 3bf1944..7f5b329 100644
--- a/src/components/seetings/items/item-1.scss
+++ b/src/components/seetings/items/item-1.scss
@@ -1,29 +1,130 @@
@mixin item-1 {
- background: linear-gradient(110deg, rgba(0, 212, 255, 1) 8%, rgba(9, 9, 121, 1) 13%, transparent 23%);
+ clip-path: circle(140% at 100% 200%);
- clip-path: circle(140% at 100% 200%);
+ div.fan-image {
+ position: absolute;
- span {
- left: 60px;
- }
+ left: 60px;
+
+ width: 35px;
+ height: 65px;
+
+ background-image: url("./icons/fan.png");
+
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: contain;
+ }
+
+ span {
+ left: 120px;
+ }
+
+ &:not(.active) {
+ background: linear-gradient(
+ 110deg,
+ #e89635 8%,
+ #b24319 13%,
+ transparent 23%
+ );
&:hover {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 16%, rgba(9, 9, 121, 1) 78%, transparent 90%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 16%,
+ #b24319 78%,
+ transparent 90%
+ );
- &::before {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 80%, rgba(9, 9, 121, 1) 85%, transparent 97%);
- }
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ #e89635 80%,
+ #b24319 85%,
+ transparent 97%
+ );
+ }
- &::after {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 74%, rgba(9, 9, 121, 1) 79%, transparent 81%);
- }
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ #e89635 74%,
+ #b24319 79%,
+ transparent 81%
+ );
+ }
}
&::before {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 5%, rgba(9, 9, 121, 1) 70%, transparent 82%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 5%,
+ #b24319 70%,
+ transparent 82%
+ );
}
&::after {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 9%, rgba(9, 9, 121, 1) 64%, transparent 76%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 9%,
+ #b24319 64%,
+ transparent 76%
+ );
}
+ }
+
+ &.active {
+ background: linear-gradient(
+ 110deg,
+ rgba(0, 212, 255, 1) 8%,
+ rgba(9, 9, 121, 1) 13%,
+ transparent 23%
+ );
+
+ &:hover {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 16%,
+ rgba(9, 9, 121, 1) 78%,
+ transparent 90%
+ );
+
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 80%,
+ rgba(9, 9, 121, 1) 85%,
+ transparent 97%
+ );
+ }
+
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 74%,
+ rgba(9, 9, 121, 1) 79%,
+ transparent 81%
+ );
+ }
+ }
+
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 5%,
+ rgba(9, 9, 121, 1) 70%,
+ transparent 82%
+ );
+ }
+
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 9%,
+ rgba(9, 9, 121, 1) 64%,
+ transparent 76%
+ );
+ }
+ }
}
diff --git a/src/components/seetings/items/item-2.scss b/src/components/seetings/items/item-2.scss
index b0f5469..041a11f 100644
--- a/src/components/seetings/items/item-2.scss
+++ b/src/components/seetings/items/item-2.scss
@@ -1,28 +1,115 @@
@mixin item-2 {
- background: linear-gradient(128deg, rgba(0, 212, 255, 1) 23%, rgba(9, 9, 121, 1) 28%, transparent 39%);
- clip-path: circle(100% at 75% 240%);
+ clip-path: circle(100% at 75% 240%);
- span {
- left: 120px;
- }
+ span {
+ left: 120px;
+ }
+
+ &:not(.active) {
+ background: linear-gradient(
+ 128deg,
+ #e89635 23%,
+ #b24319 28%,
+ transparent 39%
+ );
&:hover {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 31%, rgba(9, 9, 121, 1) 78%, transparent 90%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 31%,
+ #b24319 78%,
+ transparent 90%
+ );
- &::before {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 88%, rgba(9, 9, 121, 1) 93%, transparent 105%);
- }
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ #e89635 88%,
+ #b24319 93%,
+ transparent 105%
+ );
+ }
- &::after {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 81%, rgba(9, 9, 121, 1) 86%, transparent 98%);
- }
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ #e89635 81%,
+ #b24319 86%,
+ transparent 98%
+ );
+ }
}
&::before {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 3%, rgba(9, 9, 121, 1) 78%, transparent 90%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 3%,
+ #b24319 78%,
+ transparent 90%
+ );
}
&::after {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 6%, rgba(9, 9, 121, 1) 71%, transparent 83%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 6%,
+ #b24319 71%,
+ transparent 83%
+ );
}
+ }
+
+ &.active {
+ background: linear-gradient(
+ 128deg,
+ rgba(0, 212, 255, 1) 23%,
+ rgba(9, 9, 121, 1) 28%,
+ transparent 39%
+ );
+
+ &:hover {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 31%,
+ rgba(9, 9, 121, 1) 78%,
+ transparent 90%
+ );
+
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 88%,
+ rgba(9, 9, 121, 1) 93%,
+ transparent 105%
+ );
+ }
+
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 81%,
+ rgba(9, 9, 121, 1) 86%,
+ transparent 98%
+ );
+ }
+ }
+
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 3%,
+ rgba(9, 9, 121, 1) 78%,
+ transparent 90%
+ );
+ }
+
+ &::after {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 6%,
+ rgba(9, 9, 121, 1) 71%,
+ transparent 83%
+ );
+ }
+ }
}
diff --git a/src/components/seetings/items/item.scss b/src/components/seetings/items/item.scss
index f01d86a..a58edff 100644
--- a/src/components/seetings/items/item.scss
+++ b/src/components/seetings/items/item.scss
@@ -1,23 +1,91 @@
@mixin item {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 0%, rgba(9, 9, 121, 1) 5%, transparent 15%);
+ clip-path: circle(138% at 100% 50%);
- clip-path: circle(138% at 100% 50%);
+ div.engine-image {
+ position: absolute;
- span {
- left: 30px;
- }
+ left: 40px;
+ width: 35px;
+ height: 65px;
+
+ background-image: url("./icons/engine.png");
+
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-size: contain;
+ }
+
+ span {
+ left: 100px;
+ }
+
+ &:not(.active) {
+ background: linear-gradient(90deg, #e89635 0%, #b24319 5%, transparent 15%);
&:hover {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 8%, rgba(9, 9, 121, 1) 78%, transparent 90%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 8%,
+ #b24319 78%,
+ transparent 90%
+ );
- &::after,
- &::before {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 73%, rgba(9, 9, 121, 1) 78%, transparent 90%);
- }
+ &::after,
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ #e89635 73%,
+ #b24319 78%,
+ transparent 90%
+ );
+ }
}
&::after,
&::before {
- background: linear-gradient(90deg, rgba(0, 212, 255, 1) 8%, rgba(9, 9, 121, 1) 63%, transparent 75%);
+ background: linear-gradient(
+ 90deg,
+ #e89635 8%,
+ #b24319 63%,
+ transparent 75%
+ );
}
+ }
+
+ &.active {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 0%,
+ rgba(9, 9, 121, 1) 5%,
+ transparent 15%
+ );
+ &:hover {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 8%,
+ rgba(9, 9, 121, 1) 78%,
+ transparent 90%
+ );
+
+ &::after,
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 73%,
+ rgba(9, 9, 121, 1) 78%,
+ transparent 90%
+ );
+ }
+ }
+
+ &::after,
+ &::before {
+ background: linear-gradient(
+ 90deg,
+ rgba(0, 212, 255, 1) 8%,
+ rgba(9, 9, 121, 1) 63%,
+ transparent 75%
+ );
+ }
+ }
}
diff --git a/src/components/seetings/settings.item.scss b/src/components/seetings/settings.item.scss
index f0b1cc0..e27910f 100644
--- a/src/components/seetings/settings.item.scss
+++ b/src/components/seetings/settings.item.scss
@@ -5,81 +5,106 @@
@import "./items/item--2.scss";
@mixin settings-item {
- div.settings-item {
- height: 95px;
- width: 420px;
+ div.settings-item {
+ position: relative;
- cursor: pointer;
+ height: 95px;
+ width: 420px;
- margin: 3px 0;
+ margin: 3px 0;
- span {
- position: relative;
- top: 20px;
+ span {
+ position: relative;
+ top: 20px;
- font-size: 1.8em;
+ font-size: 1.8em;
- color: white;
+ color: white;
- &::before {
- content: attr(data-text);
+ &::before {
+ content: attr(data-text);
- position: absolute;
- top: -0.05em;
- left: -0.15em;
- right: -0.15em;
- bottom: -0.1em;
+ position: absolute;
+ top: -0.05em;
+ left: -0.15em;
+ right: -0.15em;
+ bottom: -0.1em;
- font-size: 1.08em;
+ font-size: 1.08em;
- white-space: pre;
+ white-space: pre;
- color: #002651;
+ color: #002651;
- opacity: 0;
+ opacity: 0;
- z-index: -1;
- }
- }
-
- &::after,
- &::before {
- content: "";
-
- position: absolute;
-
- left: 0;
- right: 0;
-
- height: 2px;
- }
-
- &::after {
- margin-top: 95px;
- }
-
- &:hover span {
- text-shadow: -3px -1px 3px #002651, -1px -3px 3px #002651, 3px 1px 3px #002651, 1px 3px 3px #002651;
- }
-
- &.item-2 {
- @include item-2();
- }
-
- &.item-1 {
- @include item-1();
- }
-
- &.item {
- @include item();
- }
-
- &.item--1 {
- @include item--1();
- }
-
- &.item--2 {
- @include item--2();
- }
+ z-index: -1;
+ }
}
+
+ button {
+ position: absolute;
+ top: 30px;
+ right: 100px;
+ cursor: pointer;
+ font-size: 1em;
+ padding: 6px 0;
+ width: 65px;
+ color: white;
+ border-radius: 4px;
+ }
+
+ &:not(.active) button {
+ background-color: #5a200a;
+ border: 2px solid #e89635;
+ box-shadow: 0 0 3px #e89635;
+ }
+
+ &.active button {
+ background-color: #002651;
+ border: 2px solid rgba(0, 212, 255, 1);
+ box-shadow: 0 0 3px rgba(0, 212, 255, 1);
+ }
+
+ &::after,
+ &::before {
+ content: "";
+
+ position: absolute;
+
+ left: 0;
+ right: 0;
+
+ height: 2px;
+ }
+
+ &::after {
+ margin-top: 95px;
+ }
+
+ &:hover span {
+ text-shadow: -3px -1px 3px #002651, -1px -3px 3px #002651,
+ 3px 1px 3px #002651, 1px 3px 3px #002651;
+ }
+
+ &.item-2 {
+ @include item-2();
+ }
+
+ &.item-1 {
+ @include item-1();
+ }
+
+ &.item {
+ @include item();
+ }
+
+ &.item--1 {
+ @include item--1();
+ }
+
+ &.item--2 {
+ @include item--2();
+ }
+ }
}
diff --git a/src/icons/engine.png b/src/icons/engine.png
new file mode 100644
index 0000000..29fcf82
Binary files /dev/null and b/src/icons/engine.png differ
diff --git a/src/icons/fan.png b/src/icons/fan.png
new file mode 100644
index 0000000..301a918
Binary files /dev/null and b/src/icons/fan.png differ