Browse Source

changes for mashaiekhi

master
JayPY Code 4 months ago
parent
commit
5c81f79cea
12 changed files with 129 additions and 46 deletions
  1. +1
    -0
      package.json
  2. BIN
      public/icons/engine.png
  3. BIN
      public/icons/fan.png
  4. +3
    -0
      public/icons/home.svg
  5. +49
    -0
      public/icons/settings.svg
  6. +50
    -0
      public/icons/sun.svg
  7. +8
    -0
      public/icons/temperature.svg
  8. +0
    -14
      public/index.html
  9. +17
    -1
      public/script.js
  10. +0
    -15
      src/components/settings/items/item-1.scss
  11. +0
    -15
      src/components/settings/items/item.scss
  12. +1
    -1
      webpack.config.js

+ 1
- 0
package.json View File

@ -9,6 +9,7 @@
},
"devDependencies": {
"css-loader": "^5.2.4",
"file-loader": "^6.2.0",
"sass": "^1.32.13",
"sass-loader": "^11.1.1",
"style-loader": "^2.0.0",

BIN
public/icons/engine.png View File

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

BIN
public/icons/fan.png View File

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

+ 3
- 0
public/icons/home.svg View File

@ -0,0 +1,3 @@
<svg fill="#4AD4FC" height="512pt" viewBox="0 0 512 512" width="512pt" xmlns="http://www.w3.org/2000/svg">
<path d="m498.195312 222.695312c-.011718-.011718-.023437-.023437-.035156-.035156l-208.855468-208.847656c-8.902344-8.90625-20.738282-13.8125-33.328126-13.8125-12.589843 0-24.425781 4.902344-33.332031 13.808594l-208.746093 208.742187c-.070313.070313-.140626.144531-.210938.214844-18.28125 18.386719-18.25 48.21875.089844 66.558594 8.378906 8.382812 19.445312 13.238281 31.277344 13.746093.480468.046876.964843.070313 1.453124.070313h8.324219v153.699219c0 30.414062 24.746094 55.160156 55.167969 55.160156h81.710938c8.28125 0 15-6.714844 15-15v-120.5c0-13.878906 11.289062-25.167969 25.167968-25.167969h48.195313c13.878906 0 25.167969 11.289063 25.167969 25.167969v120.5c0 8.285156 6.714843 15 15 15h81.710937c30.421875 0 55.167969-24.746094 55.167969-55.160156v-153.699219h7.71875c12.585937 0 24.421875-4.902344 33.332031-13.808594 18.359375-18.371093 18.367187-48.253906.023437-66.636719zm0 0" />
</svg>

+ 49
- 0
public/icons/settings.svg View File

@ -0,0 +1,49 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg fill="#4AD4FC" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M496.659,312.107l-47.061-36.8c0.597-5.675,1.109-12.309,1.109-19.328c0-7.019-0.491-13.653-1.109-19.328l47.104-36.821
c8.747-6.912,11.136-19.179,5.568-29.397L453.331,85.76c-5.227-9.557-16.683-14.464-28.309-10.176l-55.531,22.293
c-10.645-7.68-21.803-14.165-33.344-19.349l-8.448-58.901C326.312,8.448,316.584,0,305.086,0h-98.133
c-11.499,0-21.205,8.448-22.571,19.456l-8.469,59.115c-11.179,5.035-22.165,11.435-33.28,19.349l-55.68-22.357
C76.52,71.531,64.04,76.053,58.856,85.568L9.854,170.347c-5.781,9.771-3.392,22.464,5.547,29.547l47.061,36.8
c-0.747,7.189-1.109,13.44-1.109,19.307s0.363,12.117,1.109,19.328l-47.104,36.821c-8.747,6.933-11.115,19.2-5.547,29.397
l48.939,84.672c5.227,9.536,16.576,14.485,28.309,10.176l55.531-22.293c10.624,7.659,21.781,14.144,33.323,19.349l8.448,58.88
C185.747,503.552,195.454,512,206.974,512h98.133c11.499,0,21.227-8.448,22.592-19.456l8.469-59.093
c11.179-5.056,22.144-11.435,33.28-19.371l55.68,22.357c2.688,1.045,5.483,1.579,8.363,1.579c8.277,0,15.893-4.523,19.733-11.563
l49.152-85.12C507.838,331.349,505.448,319.083,496.659,312.107z M256.019,341.333c-47.061,0-85.333-38.272-85.333-85.333
s38.272-85.333,85.333-85.333s85.333,38.272,85.333,85.333S303.08,341.333,256.019,341.333z" />
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>

+ 50
- 0
public/icons/sun.svg View File

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 45.16 45.16" version="1.1" viewBox="0 0 45.16 45.16" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill="#fff963">
<path d="m22.58 11.269c-6.237 0-11.311 5.075-11.311 11.312s5.074 11.312 11.311 11.312c6.236 0 11.311-5.074 11.311-11.312s-5.075-11.312-11.311-11.312z"/>
<path d="m22.58 7.944c-1.219 0-2.207-0.988-2.207-2.206v-3.531c0-1.219 0.988-2.207 2.207-2.207s2.207 0.988 2.207 2.207v3.531c0 1.218-0.989 2.206-2.207 2.206z"/>
<path d="m22.58 37.215c-1.219 0-2.207 0.988-2.207 2.207v3.53c0 1.22 0.988 2.208 2.207 2.208s2.207-0.988 2.207-2.208v-3.53c0-1.219-0.989-2.207-2.207-2.207z"/>
<path d="m32.928 12.231c-0.861-0.862-0.861-2.259 0-3.121l2.497-2.497c0.861-0.861 2.259-0.861 3.121 0 0.862 0.862 0.862 2.26 0 3.121l-2.497 2.497c-0.861 0.862-2.258 0.862-3.121 0z"/>
<path d="m12.231 32.93c-0.862-0.863-2.259-0.863-3.121 0l-2.497 2.496c-0.861 0.861-0.862 2.26 0 3.121s2.26 0.861 3.121 0l2.497-2.498c0.862-0.861 0.862-2.259 0-3.119z"/>
<path d="m37.215 22.58c0-1.219 0.988-2.207 2.207-2.207h3.531c1.219 0 2.207 0.988 2.207 2.207s-0.988 2.206-2.207 2.206h-3.531c-1.219 0-2.207-0.987-2.207-2.206z"/>
<path d="m7.944 22.58c0-1.219-0.988-2.207-2.207-2.207h-3.53c-1.219 0-2.207 0.988-2.207 2.207s0.988 2.206 2.207 2.206h3.531c1.218 0 2.206-0.987 2.206-2.206z"/>
<path d="m32.928 32.93c0.862-0.861 2.26-0.861 3.121 0l2.497 2.497c0.862 0.86 0.862 2.259 0 3.12s-2.259 0.861-3.121 0l-2.497-2.497c-0.862-0.862-0.862-2.259 0-3.12z"/>
<path d="m12.231 12.231c0.862-0.862 0.862-2.259 0-3.121l-2.497-2.496c-0.862-0.862-2.259-0.862-3.121 0-0.862 0.861-0.862 2.259 0 3.12l2.497 2.497c0.862 0.863 2.259 0.863 3.121 0z"/>
</svg>

+ 8
- 0
public/icons/temperature.svg View File

@ -0,0 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'>
<svg enable-background="new 0 0 250.189 250.189" version="1.1" viewBox="0 0 250.19 250.19" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" fill="#fd1d1d">
<path d="m159.84 147.25v-112.51c0-19.158-15.59-34.744-34.752-34.744-19.159 0-34.746 15.586-34.746 34.744v112.51c-14.234 10.843-22.617 27.59-22.617 45.575 0 31.631 25.732 57.364 57.363 57.364 31.633 0 57.367-25.733 57.367-57.364 0-17.983-8.383-34.73-22.615-45.574zm-34.752 87.938c-23.359 0-42.363-19.004-42.363-42.364 0-14.294 7.188-27.537 19.228-35.425 2.115-1.386 3.39-3.745 3.39-6.273v-116.38c0-10.887 8.858-19.744 19.746-19.744 10.892 0 19.752 8.857 19.752 19.744v116.38c0 2.529 1.274 4.887 3.39 6.273 12.038 7.889 19.226 21.132 19.226 35.425-2e-3 23.36-19.008 42.364-42.369 42.364z"/>
<path d="m132.6 169.04v-99.118c0-4.142-3.357-7.5-7.5-7.5s-7.5 3.358-7.5 7.5v99.118c-10.104 3.183-17.43 12.622-17.43 23.783 0 13.767 11.16 24.931 24.93 24.931 13.773 0 24.932-11.164 24.932-24.931-1e-3 -11.162-7.327-20.602-17.432-23.783z"/>
</svg>

+ 0
- 14
public/index.html View File

@ -27,21 +27,7 @@
</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">

+ 17
- 1
public/script.js View File

@ -53,6 +53,18 @@ const ToggleSettings = (className = "") => {
: "ON";
};
const NewMeasurementLine = (title = "", id = "") => {
let html = `<div class="item" id="${id}">
<div class="background"></div>
<div class="percent">
<span class="value">0</span>
<span class="title">${title}</span>
</div>
</div>`;
document.querySelector('div.measurement-line').innerHTML += html;
}
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');
@ -70,6 +82,10 @@ NewMeasurementCircle("temp", [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
ShowIconByName("sun");
NewMeasurementLine("Title", "item-1");
NewMeasurementLine("Title", "item-2");
NewMeasurementLine("Title", "item-3");
setTimeout(() => {
SetMeasurementLine('item-1', 50, '50');
}, 1500);
@ -91,5 +107,5 @@ setTimeout(() => {
}, 6000);
setTimeout(() => {
SetDisconnect(true);
// SetDisconnect(true);
}, 10000);

+ 0
- 15
src/components/settings/items/item-1.scss View File

@ -1,21 +1,6 @@
@mixin item-1 {
clip-path: circle(140% at 100% 200%);
div.fan-image {
position: absolute;
left: 60px;
width: 35px;
height: 65px;
background-image: url("./icons/fan.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
&.with-image span {
left: 120px;
}

+ 0
- 15
src/components/settings/items/item.scss View File

@ -1,21 +1,6 @@
@mixin item {
clip-path: circle(138% at 100% 50%);
div.engine-image {
position: absolute;
left: 40px;
width: 35px;
height: 65px;
background-image: url("./icons/engine.png");
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
}
&.with-image span {
left: 100px;
}

+ 1
- 1
webpack.config.js View File

@ -12,7 +12,7 @@ module.exports = {
test: /\.(png|jpg|gif|svg)$/i,
use: [
{
loader: "url-loader",
loader: "file-loader",
options: {
limit: 8192,
},

Loading…
Cancel
Save