changes for mashaiekhi
parent
5d1b228876
commit
85f8512164
|
@ -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>
|
||||
|
||||
|
|
|
@ -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(() => {
|
||||
SetMeasurementLine('item-1', 50, '50');
|
||||
}, 1500);
|
||||
|
||||
setTimeout(() => {
|
||||
SetPipePercent("top", 25);
|
||||
|
||||
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);
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -0,0 +1,10 @@
|
|||
@import "./measurement.line/measurement.line.item.scss";
|
||||
|
||||
div.measurement-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
|
||||
width: 400px;
|
||||
|
||||
@include item();
|
||||
}
|
|
@ -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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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…
Reference in New Issue