Browse Source

changes for mashaiekhi

master
JayPY Code 5 months ago
parent
commit
85f8512164
6 changed files with 165 additions and 124 deletions
  1. +18
    -74
      public/index.html
  2. +24
    -38
      public/script.js
  3. +11
    -12
      src/components/icons.scss
  4. +10
    -0
      src/components/measurement.line.scss
  5. +101
    -0
      src/components/measurement.line/measurement.line.item.scss
  6. +1
    -0
      src/style.scss

+ 18
- 74
public/index.html View File

@ -15,62 +15,6 @@
<div class="title">شرکت آقایان و بانوان</div>
</header>
<div class="settings-view">
<div class="settings-item item-2">
<span>
220V
</span>
</div>
<div class="settings-item item-1 with-image active">
<div class="fan-image"></div>
<span>
Fan
</span>
<button onclick="ToggleSettings('item-1')">OFF</button>
</div>
<div class="settings-item item with-image active">
<div class="engine-image"></div>
<span>
Engine
</span>
<button onclick="ToggleSettings('item')">OFF</button>
</div>
<div class="settings-item item--1">
<span>
Lamp 1
</span>
<button onclick="ToggleSettings('item--1')">ON</button>
</div>
<div class="settings-item item--2 active">
<span>
Lamp 2
</span>
<button onclick="ToggleSettings('item--2')">OFF</button>
</div>
</div>
<div class="measurement-pipe">
<div class="line">
<div class="background"></div>
</div>
<div class="marks">
<div class="marker top">
<span class="top">0</span>
<span class="top-middle">35</span>
<span class="bottom-middle">65</span>
<span class="bottom">100</span>
</div>
<div class="marker bottom">
<span class="top">100</span>
<span class="top-middle">65</span>
<span class="bottom-middle">35</span>
<span class="bottom">0</span>
</div>
</div>
</div>
<div id="temp" class="measurement-circle">
<div class="warn"></div>
@ -82,26 +26,26 @@
<div class="arrow"></div>
</div>
<div class="measurement-line">
<div class="item" id="item-1">
<div class="background"></div>
<div class="percent">
<span class="value">0</span>
<span class="title">Title</span>
</div>
</div>
<div class="item off" id="item-2">
<div class="background"></div>
<div class="percent">
<span class="value">0</span>
<span class="title">Title</span>
</div>
</div>
</div>
<div class="icons">
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon sun"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon"></div>
<div class="icon temp"></div>
</div>

+ 24
- 38
public/script.js View File

@ -29,7 +29,7 @@ const ChangeMeasurementCircleArrow = (id, to) => {
let min = -270,
max = 0;
let element = document.querySelector(`#${id} div.arrow`);
let rotate = (to * (max - min)) / 100 + min;
let rotate = (to * (max - min)) / 90 + min;
element.style.transform = `rotate(${rotate}deg)`;
};
@ -41,36 +41,6 @@ const HideIconByName = (name) => {
document.querySelector(`div.icons div.icon.${name}`).classList.remove("show");
};
const SetPipePercent = (key = "top", percent = 0) => {
let top_max = 390,
top_min = 36,
bottom_max = 562,
bottom_min = 915;
let line = document.querySelector(
"div.measurement-pipe div.line div.background"
);
if (pipe_bottom_gap == null) pipe_bottom_gap = bottom_min;
if (pipe_top_gap == null) pipe_top_gap = top_min;
switch (key) {
case "top":
pipe_top_gap = (percent / 100) * (top_max - top_min) + top_min;
break;
case "bottom":
pipe_bottom_gap =
(percent / 100) * (bottom_max - bottom_min) + bottom_min;
break;
}
line.setAttribute(
"style",
`clip-path: polygon(0% 60px, 0% 100%, 0 100%, 0 ${pipe_top_gap}px, 100% ${pipe_top_gap}px, 100% ${pipe_bottom_gap}px, 0 ${pipe_bottom_gap}px, 0 100%, 100% calc(100% - 75px), 100% 0%)`
);
};
const ToggleSettings = (className = "") => {
document
.querySelector(`div.settings-item.${className}`)
@ -83,18 +53,34 @@ const ToggleSettings = (className = "") => {
: "ON";
};
const SetMeasurementLine = (id = "", percent = 0, value = "") => {
if (percent >= 75) document.querySelector(`div.measurement-line div.item#${id}`).classList.add('red');
else if (document.querySelector(`div.measurement-line div.item#${id}`).classList.contains('red')) document.querySelector(`div.measurement-line div.item#${id}`).classList.remove('red');
document.querySelector(`div.measurement-line div.item#${id} span.value`).innerText = value;
document.querySelector(`div.measurement-line div.item#${id} div.percent`).style.width = `${percent}%`;
document.querySelector(`div.measurement-line div.item#${id} div.background`).setAttribute('style', `clip-path: inset(0 ${100 - percent}% 0 0)`);
}
NewMeasurementCircle("temp", [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
ShowIconByName("sun");
SetPipePercent("bottom", 35);
setTimeout(() => {
SetPipePercent("top", 25);
SetMeasurementLine('item-1', 50, '50');
}, 1500);
setTimeout(() => {
ChangeMeasurementCircleArrow("temp", 66.5);
setTimeout(() => {
SetPipePercent("bottom", 55);
ShowIconByName("temp");
}, 500);
SetMeasurementLine('item-1', 30, '30');
}, 3000);
setTimeout(() => {
SetMeasurementLine('item-1', 60, '60');
ShowIconByName("temp");
}, 4000);
setTimeout(() => {
SetMeasurementLine('item-1', 100, '100');
}, 6000);

+ 11
- 12
src/components/icons.scss View File

@ -1,18 +1,14 @@
div.icons {
position: absolute;
bottom: 20px;
right: 20px;
position: fixed;
bottom: 10px;
right: 10px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-template-rows: auto auto auto auto;
display: inline-block;
z-index: 999;
div.icon {
width: 100%;
height: 100%;
width: 64px;
height: 64px;
background-size: 50%;
background-repeat: no-repeat;
@ -21,7 +17,7 @@ div.icons {
transition: all 0.2s;
&:not(.show) {
transform: scale(0);
opacity: 0;
}
&.sun {
@ -31,5 +27,8 @@ div.icons {
&.temp {
background-image: url("./icons/temperature.svg");
}
&.fan {
background-image: url("./icons/fan.png");
}
}
}

+ 10
- 0
src/components/measurement.line.scss View File

@ -0,0 +1,10 @@
@import "./measurement.line/measurement.line.item.scss";
div.measurement-line {
position: absolute;
left: 0;
width: 400px;
@include item();
}

+ 101
- 0
src/components/measurement.line/measurement.line.item.scss View File

@ -0,0 +1,101 @@
@mixin item {
div.item {
position: relative;
width: 100%;
height: 56px;
margin: 20px 30px;
border: 2px solid #1292ee;
background-color: transparent;
border-radius: 2em;
transition: all 1s;
* {
transition: all 1s;
}
&.red {
border-color: #fd1d1d;
div.background {
background: linear-gradient(90deg, #ff9999 0%, #fd1d1d 50%, #ff9999 100%);
}
div.percent {
box-shadow: 0 0 100px rgba($color: #ff9999, $alpha: 0.5);
}
}
&.off {
border-color: #757575;
span.value {
display: none;
}
div.background {
background: linear-gradient(90deg, #e0e0e0 0%, #757575 50%, #e0e0e0 100%);
}
}
div.background {
position: absolute;
top: 5px;
left: 5px;
right: 5px;
height: 46px;
background: linear-gradient(90deg, #a0d4ff 0%, #1292ee 50%, #a0d4ff 100%);
transition: all 1s;
clip-path: inset(0 100% 0 0);
border-radius: 2em;
}
div.percent {
position: absolute;
left: 0;
width: 0%;
height: 56px;
background-color: transparent;
box-shadow: 0 0 100px rgba($color: #a0d4ff, $alpha: 0.5);
border-radius: 2em;
span {
position: absolute;
top: 50%;
color: white;
&.value {
right: 10px;
font-size: 20px;
transform: translateY(-50%) rotate(-90deg);
}
&.title {
font-size: 22px;
right: -50px;
transform: translateY(-50%);
}
}
}
}
}

+ 1
- 0
src/style.scss View File

@ -74,6 +74,7 @@ footer {
@import "./components/measurement.circle.scss";
@import "./components/measurement.pipe.scss";
@import "./components/measurement.line.scss";
@import "./components/settings.scss";
@import "./components/icons.scss";
@import "./components/form.scss";

Loading…
Cancel
Save