Browse Source

icons added

master
JayPY Code 6 months ago
parent
commit
cc9e58cfed
5 changed files with 131 additions and 1 deletions
  1. +50
    -0
      public/icons/sun.svg
  2. +8
    -0
      public/icons/temperature.svg
  3. +18
    -1
      public/script.js
  4. +35
    -0
      src/components/icons.scss
  5. +20
    -0
      src/style.scss

+ 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>

+ 18
- 1
public/script.js View File

@ -30,4 +30,21 @@ const ChangeMeasurementCircleArrow = (id, to) => {
element.style.transform = `rotate(${rotate}deg)`;
}
NewMeasurementCircle('speed', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
const ShowIconByName = (name) => {
document.querySelector(`div.icons div.icon.${name}`).classList.add('show');
}
const HideIconByName = (name) => {
document.querySelector(`div.icons div.icon.${name}`).classList.remove('show');
}
NewMeasurementCircle('temp', [0, 10, 20, 30, 40, 50, 60, 70, 80, 90]);
ShowIconByName('sun');
setTimeout(() => {
ChangeMeasurementCircleArrow('temp', 66.5);
setTimeout(() => {
ShowIconByName('temp');
}, 500);
}, 3000);

+ 35
- 0
src/components/icons.scss View File

@ -0,0 +1,35 @@
div.icons {
position: absolute;
bottom: 20px;
right: 20px;
width: 500px;
height: 400px;
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-template-rows: auto auto auto auto;
div.icon {
width: 100%;
height: 100%;
background-size: 50%;
background-repeat: no-repeat;
background-position: center center;
transition: all 0.2s;
&:not(.show) {
transform: scale(0);
}
&.sun {
background-image: url("./icons/sun.svg");
}
&.temp {
background-image: url("./icons/temperature.svg");
}
}
}

+ 20
- 0
src/style.scss View File

@ -24,6 +24,26 @@ body {
margin: 0;
}
header {
position: fixed;
color: white;
top: 30px;
right: 30px;
left: 30px;
display: flex;
flex-direction: column;
div.logo {
width: 45px;
height: 45px;
font-size: 45px;
margin-bottom: 12px;
color: #00d4ff;
}
}
@import "./components/measurement.circle.scss";
@import "./components/measurement.pipe.scss";
@import "./components/settings.scss";
@import "./components/icons.scss";

Loading…
Cancel
Save