changes for mashaiekhi
parent
18846914ab
commit
2c21bad2fd
|
@ -49,6 +49,11 @@
|
||||||
<div class="icon temp"></div>
|
<div class="icon temp"></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
<div class="disconnect-overlay">
|
||||||
|
<span>عدم اتصال به دستگاه</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
<footer>
|
<footer>
|
||||||
<a class="back-to settings" href="/settings.html"></a>
|
<a class="back-to settings" href="/settings.html"></a>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
@ -61,6 +61,11 @@ const SetMeasurementLine = (id = "", percent = 0, value = "") => {
|
||||||
document.querySelector(`div.measurement-line div.item#${id} div.background`).setAttribute('style', `clip-path: inset(0 ${100 - percent}% 0 0)`);
|
document.querySelector(`div.measurement-line div.item#${id} div.background`).setAttribute('style', `clip-path: inset(0 ${100 - percent}% 0 0)`);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const SetDisconnect = (state = true) => {
|
||||||
|
if (state) document.querySelector('div.disconnect-overlay').classList.add('show');
|
||||||
|
else document.querySelector('div.disconnect-overlay').classList.remove('show');
|
||||||
|
};
|
||||||
|
|
||||||
NewMeasurementCircle("temp", [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
|
NewMeasurementCircle("temp", [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
|
||||||
|
|
||||||
ShowIconByName("sun");
|
ShowIconByName("sun");
|
||||||
|
@ -71,16 +76,20 @@ setTimeout(() => {
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
ChangeMeasurementCircleArrow("temp", 66.5);
|
ChangeMeasurementCircleArrow("temp", 66.5);
|
||||||
|
|
||||||
SetMeasurementLine('item-1', 30, '30');
|
SetMeasurementLine('item-1', 30, '30');
|
||||||
|
ShowIconByName("temp");
|
||||||
}, 3000);
|
}, 3000);
|
||||||
|
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
SetMeasurementLine('item-1', 60, '60');
|
SetMeasurementLine('item-1', 60, '60');
|
||||||
ShowIconByName("temp");
|
|
||||||
}, 4000);
|
}, 4000);
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
SetMeasurementLine('item-1', 100, '100');
|
SetMeasurementLine('item-1', 100, '100');
|
||||||
}, 6000);
|
HideIconByName("temp");
|
||||||
|
}, 6000);
|
||||||
|
|
||||||
|
setTimeout(() => {
|
||||||
|
SetDisconnect(true);
|
||||||
|
}, 10000);
|
|
@ -0,0 +1,35 @@
|
||||||
|
div.disconnect-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
|
||||||
|
background-color: rgba($color: #000000, $alpha: 0.8);
|
||||||
|
|
||||||
|
z-index: 9999;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
color: #fd1d1d;
|
||||||
|
|
||||||
|
font-size: 3em;
|
||||||
|
|
||||||
|
&:not(.show) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 600px;
|
||||||
|
height: 300px;
|
||||||
|
background-color: whitesmoke;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
}
|
|
@ -17,7 +17,7 @@ div.icons {
|
||||||
transition: all 0.2s;
|
transition: all 0.2s;
|
||||||
|
|
||||||
&:not(.show) {
|
&:not(.show) {
|
||||||
opacity: 0;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sun {
|
&.sun {
|
||||||
|
|
|
@ -78,3 +78,4 @@ footer {
|
||||||
@import "./components/settings.scss";
|
@import "./components/settings.scss";
|
||||||
@import "./components/icons.scss";
|
@import "./components/icons.scss";
|
||||||
@import "./components/form.scss";
|
@import "./components/form.scss";
|
||||||
|
@import "./components/disconnect.overlay.scss";
|
||||||
|
|
Loading…
Reference in New Issue