Browse Source

settings has toggle button

master
JayPY Code 6 months ago
parent
commit
b3637ac614
10 changed files with 602 additions and 128 deletions
  1. +20
    -13
      public/index.html
  2. +12
    -0
      public/script.js
  3. +100
    -13
      src/components/seetings/items/item--1.scss
  4. +100
    -13
      src/components/seetings/items/item--2.scss
  5. +114
    -13
      src/components/seetings/items/item-1.scss
  6. +100
    -13
      src/components/seetings/items/item-2.scss
  7. +78
    -10
      src/components/seetings/items/item.scss
  8. +78
    -53
      src/components/seetings/settings.item.scss
  9. BIN
      src/icons/engine.png
  10. BIN
      src/icons/fan.png

+ 20
- 13
public/index.html View File

@ -17,29 +17,36 @@
<div class="settings-view">
<div class="settings-item item-2">
<span data-text="Settings 1">
Settings 1
<span>
220V
</span>
</div>
<div class="settings-item item-1">
<span data-text="Settings 2">
Settings 2
<div class="settings-item item-1 active">
<div class="fan-image"></div>
<span>
Fan
</span>
<button onclick="ToggleSettings('item-1')">OFF</button>
</div>
<div class="settings-item item">
<span data-text="Settings 3">
Settings 3
<div class="settings-item item active">
<div class="engine-image"></div>
<span>
Engine
</span>
<button onclick="ToggleSettings('item')">OFF</button>
</div>
<div class="settings-item item--1">
<span data-text="Settings 4">
Settings 4
<span>
Lamp 1
</span>
<button onclick="ToggleSettings('item--1')">ON</button>
</div>
<div class="settings-item item--2">
<span data-text="Settings 5">
Settings 5
<div class="settings-item item--2 active">
<span>
Lamp 2
</span>
<button onclick="ToggleSettings('item--2')">OFF</button>
</div>
</div>

+ 12
- 0
public/script.js View File

@ -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");

+ 100
- 13
src/components/seetings/items/item--1.scss View File

@ -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,
#e89635 16%,
#b24319 78%,
transparent 90%
);
&::before {
background: linear-gradient(
90deg,
#e89635 74%,
#b24319 79%,
transparent 81%
);
}
&::after {
background: linear-gradient(
90deg,
#e89635 80%,
#b24319 85%,
transparent 97%
);
}
}
&::before {
background: linear-gradient(
90deg,
#e89635 9%,
#b24319 64%,
transparent 76%
);
}
&::after {
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%);
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%);
}
&::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%);
}
&::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%);
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%);
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 5%,
rgba(9, 9, 121, 1) 70%,
transparent 82%
);
}
}
}

+ 100
- 13
src/components/seetings/items/item--2.scss View File

@ -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,
#e89635 31%,
#b24319 78%,
transparent 90%
);
&::before {
background: linear-gradient(
90deg,
#e89635 81%,
#b24319 86%,
transparent 98%
);
}
&::after {
background: linear-gradient(
90deg,
#e89635 88%,
#b24319 93%,
transparent 105%
);
}
}
&::before {
background: linear-gradient(
90deg,
#e89635 6%,
#b24319 71%,
transparent 83%
);
}
&::after {
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%);
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%);
}
&::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%);
}
&::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%);
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%);
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 3%,
rgba(9, 9, 121, 1) 78%,
transparent 90%
);
}
}
}

+ 114
- 13
src/components/seetings/items/item-1.scss View File

@ -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,
#e89635 16%,
#b24319 78%,
transparent 90%
);
&::before {
background: linear-gradient(
90deg,
#e89635 80%,
#b24319 85%,
transparent 97%
);
}
&::after {
background: linear-gradient(
90deg,
#e89635 74%,
#b24319 79%,
transparent 81%
);
}
}
&::before {
background: linear-gradient(
90deg,
#e89635 5%,
#b24319 70%,
transparent 82%
);
}
&::after {
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%);
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%);
}
&::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%);
}
&::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%);
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%);
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 9%,
rgba(9, 9, 121, 1) 64%,
transparent 76%
);
}
}
}

+ 100
- 13
src/components/seetings/items/item-2.scss View File

@ -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,
#e89635 31%,
#b24319 78%,
transparent 90%
);
&::before {
background: linear-gradient(
90deg,
#e89635 88%,
#b24319 93%,
transparent 105%
);
}
&::after {
background: linear-gradient(
90deg,
#e89635 81%,
#b24319 86%,
transparent 98%
);
}
}
&::before {
background: linear-gradient(
90deg,
#e89635 3%,
#b24319 78%,
transparent 90%
);
}
&::after {
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%);
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%);
}
&::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%);
}
&::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%);
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%);
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 6%,
rgba(9, 9, 121, 1) 71%,
transparent 83%
);
}
}
}

+ 78
- 10
src/components/seetings/items/item.scss View File

@ -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,
#e89635 8%,
#b24319 78%,
transparent 90%
);
&::after,
&::before {
background: linear-gradient(
90deg,
#e89635 73%,
#b24319 78%,
transparent 90%
);
}
}
&::after,
&::before {
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%);
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) 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%);
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 8%,
rgba(9, 9, 121, 1) 63%,
transparent 75%
);
}
}
}

+ 78
- 53
src/components/seetings/settings.item.scss View File

@ -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;
}
}
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: "";
&::after,
&::before {
content: "";
position: absolute;
position: absolute;
left: 0;
right: 0;
left: 0;
right: 0;
height: 2px;
}
height: 2px;
}
&::after {
margin-top: 95px;
}
&::after {
margin-top: 95px;
}
&:hover span {
text-shadow: -3px -1px 3px #002651, -1px -3px 3px #002651, 3px 1px 3px #002651, 1px 3px 3px #002651;
}
&: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-2 {
@include item-2();
}
&.item-1 {
@include item-1();
}
&.item-1 {
@include item-1();
}
&.item {
@include item();
}
&.item {
@include item();
}
&.item--1 {
@include item--1();
}
&.item--1 {
@include item--1();
}
&.item--2 {
@include item--2();
}
&.item--2 {
@include item--2();
}
}
}

BIN
src/icons/engine.png View File

Before After
Width: 64  |  Height: 64  |  Size: 2.0 KiB

BIN
src/icons/fan.png View File

Before After
Width: 64  |  Height: 64  |  Size: 2.0 KiB

Loading…
Cancel
Save