Browse Source

Settings added

master
JayPY Code 6 months ago
parent
commit
5d1b228876
26 changed files with 620 additions and 457 deletions
  1. +1
    -1
      public/bundle.js
  2. +5
    -2
      public/index.html
  3. +105
    -0
      public/settings.html
  4. +26
    -0
      public/settings.js
  5. +9
    -0
      src/components/form.scss
  6. +19
    -0
      src/components/form/button.scss
  7. +8
    -0
      src/components/form/checkbox.scss
  8. +20
    -0
      src/components/form/input.row.scss
  9. +26
    -0
      src/components/form/input.scss
  10. +8
    -0
      src/components/form/radio.scss
  11. +50
    -0
      src/components/form/section.scss
  12. +11
    -0
      src/components/measurement.pipe/measurement.pipe.background.scss
  13. +0
    -115
      src/components/seetings/items/item--2.scss
  14. +0
    -130
      src/components/seetings/items/item-1.scss
  15. +0
    -115
      src/components/seetings/items/item-2.scss
  16. +0
    -91
      src/components/seetings/items/item.scss
  17. +5
    -1
      src/components/settings.scss
  18. +0
    -0
      src/components/settings/items/item--1.scss
  19. +55
    -0
      src/components/settings/items/item--2.scss
  20. +74
    -0
      src/components/settings/items/item-1.scss
  21. +55
    -0
      src/components/settings/items/item-2.scss
  22. +60
    -0
      src/components/settings/items/item.scss
  23. +1
    -2
      src/components/settings/settings.item.scss
  24. +3
    -0
      src/icons/home.svg
  25. +49
    -0
      src/icons/settings.svg
  26. +30
    -0
      src/style.scss

+ 1
- 1
public/bundle.js
File diff suppressed because it is too large
View File


+ 5
- 2
public/index.html View File

@ -21,7 +21,7 @@
220V
</span>
</div>
<div class="settings-item item-1 active">
<div class="settings-item item-1 with-image active">
<div class="fan-image"></div>
<span>
Fan
@ -29,7 +29,7 @@
<button onclick="ToggleSettings('item-1')">OFF</button>
</div>
<div class="settings-item item active">
<div class="settings-item item with-image active">
<div class="engine-image"></div>
<span>
Engine
@ -105,6 +105,9 @@
<div class="icon temp"></div>
</div>
<footer>
<a class="back-to settings" href="/settings.html"></a>
</footer>
<script src="./script.js"></script>
</body>

+ 105
- 0
public/settings.html View File

@ -0,0 +1,105 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Settings</title>
<script src="bundle.js"></script>
</head>
<body>
<header>
<div class="logo">LOGO</div>
<div class="title">شرکت آقایان و بانوان</div>
</header>
<div class="settings-view as-tab">
<div class="settings-item item-1" onclick="ToggleTab('item-1')">
<span>
Sensors
</span>
</div>
<div class="settings-item item active" onclick="ToggleTab('item')">
<span>
Networks
</span>
</div>
<div class="settings-item item--1" onclick="ToggleTab('item--1')">
<span>
Security
</span>
</div>
</div>
<section class="form">
<div class="measurement-pipe with-fixed-background"></div>
<div class="tab-content">
<br><br>
<div class="input-row">
<h1>Network</h1>
<button onclick="save()">Save</button>
</div>
<br><br>
<div class="form-content" id="item-1">
<p>Unable to find some sensors !</p>
</div>
<div class="form-content show" id="item">
<div class="input-row">
<label for="network_ip">Device IP address</label>
<input type="text" id="network_ip" value="192.168.1.1">
</div>
<div class="input-row">
<label for="network_sub">Device subnet mask (auto generate)</label>
<input type="text" id="network_sub" value="255.0.0.0" disabled>
</div>
<div class="input-row">
<label for="nat_server">Enable NAT server</label>
<input type="checkbox" name="nat" id="nat_server">
</div>
</div>
<div class="form-content" id="item--1">
<div class="input-row tin">
<label for="hackable">Hackable</label>
<input type="radio" checked name="hackable" id="hackable">
</div>
<div class="input-row tin">
<label for="unhackable">Unhackable</label>
<input type="radio" name="hackable" id="unhackable">
</div>
<br><br>
<div class="input-row tin">
<label for="findable">CIA can find this device</label>
<input type="radio" name="cia" id="findable">
</div>
<div class="input-row tin">
<label for="hidden">Hidden for CIA</label>
<input type="radio" checked name="cia" id="hidden">
</div>
</div>
</div>
</section>
<footer>
<a class="back-to home" href="/index.html"></a>
</footer>
<script src="settings.js"></script>
<script src="script.js"></script>
</body>
</html>

+ 26
- 0
public/settings.js View File

@ -0,0 +1,26 @@
const ToggleTab = (className = "") => {
document
.querySelector('div.settings-item.active')
.classList.remove('active');
document
.querySelector('div.form-content.show')
.classList.remove('show');
document
.querySelector(`div.settings-item.${className}`)
.classList.toggle("active");
document
.querySelector(`div.form-content#${className}`)
.classList.toggle("show");
let title = document
.querySelector('div.settings-item.active span').innerHTML;
document.querySelector('section.form h1').innerHTML = title;
}
const save = () => {
alert('For example, it was saved !')
}

+ 9
- 0
src/components/form.scss View File

@ -0,0 +1,9 @@
@import "./form/section.scss";
section.form {
@import "./form/input.scss";
@import "./form/input.row.scss";
@import "./form/checkbox.scss";
@import "./form/radio.scss";
@import "./form/button.scss";
}

+ 19
- 0
src/components/form/button.scss View File

@ -0,0 +1,19 @@
button {
background-color: #1277d7;
font-size: 1em;
padding: 10px 12px;
border-radius: 8px;
cursor: pointer;
color: #fff;
&:focus,
&:hover,
&:active {
box-shadow: 0 0 12px #0d51b7;
}
}

+ 8
- 0
src/components/form/checkbox.scss View File

@ -0,0 +1,8 @@
input[type="checkbox"] {
margin-left: 20px;
cursor: pointer;
width: 20px;
height: 20px;
}

+ 20
- 0
src/components/form/input.row.scss View File

@ -0,0 +1,20 @@
div.input-row {
width: 100%;
height: 56px;
display: grid;
grid-template-columns: 500px 500px;
* {
margin: auto 0;
margin-right: auto;
}
label {
font-size: 1.2em;
}
&.tin {
height: 35px;
}
}

+ 26
- 0
src/components/form/input.scss View File

@ -0,0 +1,26 @@
input[type="text"] {
width: 300px;
height: 24px;
color: #fff;
background-color: #e89635;
box-shadow: 0 0 12px #e89635;
font-size: 1em;
padding: 10px 12px;
border-radius: 8px;
&:not(:disabled):focus {
box-shadow: 0 0 20px #e89635;
}
&:disabled {
background-color: #8a4900;
box-shadow: none;
color: #462500;
}
}

+ 8
- 0
src/components/form/radio.scss View File

@ -0,0 +1,8 @@
input[type="radio"] {
margin-left: 20px;
cursor: pointer;
width: 16px;
height: 16px;
}

+ 50
- 0
src/components/form/section.scss View File

@ -0,0 +1,50 @@
section.form {
position: relative;
height: 100vh;
width: 1920px;
&::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 620px;
bottom: 0;
background-color: #111a48;
z-index: -1;
}
div.tab-content {
position: absolute;
top: 0;
right: 0;
left: 680px;
bottom: 0;
width: calc(1920px - 735px);
height: 100vh;
z-index: 2;
color: #fff;
overflow-y: scroll;
h1 {
font-size: 2.4em;
}
div.form-content {
display: none;
&.show {
display: block;
}
}
}
}

+ 11
- 0
src/components/measurement.pipe/measurement.pipe.background.scss View File

@ -21,4 +21,15 @@
z-index: -2;
}
&.with-fixed-background::before {
background: radial-gradient(
circle at calc(1920px / 2.5),
#111a48,
#111a48 55%,
rgb(9, 9, 121) 63%,
#1292ee 65%,
transparent 65.1%
);
}
}

+ 0
- 115
src/components/seetings/items/item--2.scss View File

@ -1,115 +0,0 @@
@mixin item--2 {
clip-path: circle(100% at 75% -140%);
span {
left: 120px;
}
&:not(.active) {
background: linear-gradient(
53deg,
#e89635 23%,
#b24319 28%,
transparent 39%
);
&:hover {
background: linear-gradient(
90deg,
#e89635 31%,
#b24319 78%,
transparent 90%
);
&::before {
background: linear-gradient(
90deg,
#e89635 81%,
#b24319 86%,
transparent 98%
);
}
&::after {
background: linear-gradient(
90deg,
#e89635 88%,
#b24319 93%,
transparent 105%
);
}
}
&::before {
background: linear-gradient(
90deg,
#e89635 6%,
#b24319 71%,
transparent 83%
);
}
&::after {
background: linear-gradient(
90deg,
#e89635 3%,
#b24319 78%,
transparent 90%
);
}
}
&.active {
background: linear-gradient(
53deg,
rgba(0, 212, 255, 1) 23%,
rgba(9, 9, 121, 1) 28%,
transparent 39%
);
&:hover {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 31%,
rgba(9, 9, 121, 1) 78%,
transparent 90%
);
&::before {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 81%,
rgba(9, 9, 121, 1) 86%,
transparent 98%
);
}
&::after {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 88%,
rgba(9, 9, 121, 1) 93%,
transparent 105%
);
}
}
&::before {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 6%,
rgba(9, 9, 121, 1) 71%,
transparent 83%
);
}
&::after {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 3%,
rgba(9, 9, 121, 1) 78%,
transparent 90%
);
}
}
}

+ 0
- 130
src/components/seetings/items/item-1.scss View File

@ -1,130 +0,0 @@
@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;
}
span {
left: 120px;
}
&:not(.active) {
background: linear-gradient(
110deg,
#e89635 8%,
#b24319 13%,
transparent 23%
);
&:hover {
background: linear-gradient(
90deg,
#e89635 16%,
#b24319 78%,
transparent 90%
);
&::before {
background: linear-gradient(
90deg,
#e89635 80%,
#b24319 85%,
transparent 97%
);
}
&::after {
background: linear-gradient(
90deg,
#e89635 74%,
#b24319 79%,
transparent 81%
);
}
}
&::before {
background: linear-gradient(
90deg,
#e89635 5%,
#b24319 70%,
transparent 82%
);
}
&::after {
background: linear-gradient(
90deg,
#e89635 9%,
#b24319 64%,
transparent 76%
);
}
}
&.active {
background: linear-gradient(
110deg,
rgba(0, 212, 255, 1) 8%,
rgba(9, 9, 121, 1) 13%,
transparent 23%
);
&:hover {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 16%,
rgba(9, 9, 121, 1) 78%,
transparent 90%
);
&::before {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 80%,
rgba(9, 9, 121, 1) 85%,
transparent 97%
);
}
&::after {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 74%,
rgba(9, 9, 121, 1) 79%,
transparent 81%
);
}
}
&::before {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 5%,
rgba(9, 9, 121, 1) 70%,
transparent 82%
);
}
&::after {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 9%,
rgba(9, 9, 121, 1) 64%,
transparent 76%
);
}
}
}

+ 0
- 115
src/components/seetings/items/item-2.scss View File

@ -1,115 +0,0 @@
@mixin item-2 {
clip-path: circle(100% at 75% 240%);
span {
left: 120px;
}
&:not(.active) {
background: linear-gradient(
128deg,
#e89635 23%,
#b24319 28%,
transparent 39%
);
&:hover {
background: linear-gradient(
90deg,
#e89635 31%,
#b24319 78%,
transparent 90%
);
&::before {
background: linear-gradient(
90deg,
#e89635 88%,
#b24319 93%,
transparent 105%
);
}
&::after {
background: linear-gradient(
90deg,
#e89635 81%,
#b24319 86%,
transparent 98%
);
}
}
&::before {
background: linear-gradient(
90deg,
#e89635 3%,
#b24319 78%,
transparent 90%
);
}
&::after {
background: linear-gradient(
90deg,
#e89635 6%,
#b24319 71%,
transparent 83%
);
}
}
&.active {
background: linear-gradient(
128deg,
rgba(0, 212, 255, 1) 23%,
rgba(9, 9, 121, 1) 28%,
transparent 39%
);
&:hover {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 31%,
rgba(9, 9, 121, 1) 78%,
transparent 90%
);
&::before {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 88%,
rgba(9, 9, 121, 1) 93%,
transparent 105%
);
}
&::after {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 81%,
rgba(9, 9, 121, 1) 86%,
transparent 98%
);
}
}
&::before {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 3%,
rgba(9, 9, 121, 1) 78%,
transparent 90%
);
}
&::after {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 6%,
rgba(9, 9, 121, 1) 71%,
transparent 83%
);
}
}
}

+ 0
- 91
src/components/seetings/items/item.scss View File

@ -1,91 +0,0 @@
@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;
}
span {
left: 100px;
}
&:not(.active) {
background: linear-gradient(90deg, #e89635 0%, #b24319 5%, transparent 15%);
&:hover {
background: linear-gradient(
90deg,
#e89635 8%,
#b24319 78%,
transparent 90%
);
&::after,
&::before {
background: linear-gradient(
90deg,
#e89635 73%,
#b24319 78%,
transparent 90%
);
}
}
&::after,
&::before {
background: linear-gradient(
90deg,
#e89635 8%,
#b24319 63%,
transparent 75%
);
}
}
&.active {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 0%,
rgba(9, 9, 121, 1) 5%,
transparent 15%
);
&:hover {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 8%,
rgba(9, 9, 121, 1) 78%,
transparent 90%
);
&::after,
&::before {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 73%,
rgba(9, 9, 121, 1) 78%,
transparent 90%
);
}
}
&::after,
&::before {
background: linear-gradient(
90deg,
rgba(0, 212, 255, 1) 8%,
rgba(9, 9, 121, 1) 63%,
transparent 75%
);
}
}
}

+ 5
- 1
src/components/settings.scss View File

@ -1,4 +1,4 @@
@import "./seetings/settings.item.scss";
@import "./settings/settings.item.scss";
div.settings-view {
position: absolute;
@ -13,4 +13,8 @@ div.settings-view {
z-index: 1;
@include settings-item();
&.as-tab div.settings-item {
cursor: pointer;
}
}

src/components/seetings/items/item--1.scss → src/components/settings/items/item--1.scss View File


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

@ -0,0 +1,55 @@
@mixin item--2 {
clip-path: circle(100% at 75% -140%);
span {
left: 120px;
}
&:not(.active) {
background: linear-gradient(53deg, #e89635 23%, #b24319 28%, transparent 39%);
&:hover {
background: linear-gradient(90deg, #e89635 31%, #b24319 78%, transparent 90%);
&::before {
background: linear-gradient(90deg, #e89635 81%, #b24319 86%, transparent 98%);
}
&::after {
background: linear-gradient(90deg, #e89635 88%, #b24319 93%, transparent 105%);
}
}
&::before {
background: linear-gradient(90deg, #e89635 6%, #b24319 71%, transparent 83%);
}
&::after {
background: linear-gradient(90deg, #e89635 3%, #b24319 78%, transparent 90%);
}
}
&.active {
background: linear-gradient(53deg, rgba(0, 212, 255, 1) 23%, rgba(9, 9, 121, 1) 28%, transparent 39%);
&:hover {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 31%, rgba(9, 9, 121, 1) 78%, transparent 90%);
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 81%, rgba(9, 9, 121, 1) 86%, transparent 98%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 88%, rgba(9, 9, 121, 1) 93%, transparent 105%);
}
}
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 6%, rgba(9, 9, 121, 1) 71%, transparent 83%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 3%, rgba(9, 9, 121, 1) 78%, transparent 90%);
}
}
}

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

@ -0,0 +1,74 @@
@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;
}
&:not(.with-image) span {
left: 60px;
}
&:not(.active) {
background: linear-gradient(110deg, #e89635 8%, #b24319 13%, transparent 23%);
&:hover {
background: linear-gradient(90deg, #e89635 16%, #b24319 78%, transparent 90%);
&::before {
background: linear-gradient(90deg, #e89635 80%, #b24319 85%, transparent 97%);
}
&::after {
background: linear-gradient(90deg, #e89635 74%, #b24319 79%, transparent 81%);
}
}
&::before {
background: linear-gradient(90deg, #e89635 5%, #b24319 70%, transparent 82%);
}
&::after {
background: linear-gradient(90deg, #e89635 9%, #b24319 64%, transparent 76%);
}
}
&.active {
background: linear-gradient(110deg, rgba(0, 212, 255, 1) 8%, rgba(9, 9, 121, 1) 13%, transparent 23%);
&:hover {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 16%, rgba(9, 9, 121, 1) 78%, transparent 90%);
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 80%, rgba(9, 9, 121, 1) 85%, transparent 97%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 74%, rgba(9, 9, 121, 1) 79%, transparent 81%);
}
}
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 5%, rgba(9, 9, 121, 1) 70%, transparent 82%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 9%, rgba(9, 9, 121, 1) 64%, transparent 76%);
}
}
}

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

@ -0,0 +1,55 @@
@mixin item-2 {
clip-path: circle(100% at 75% 240%);
span {
left: 120px;
}
&:not(.active) {
background: linear-gradient(128deg, #e89635 23%, #b24319 28%, transparent 39%);
&:hover {
background: linear-gradient(90deg, #e89635 31%, #b24319 78%, transparent 90%);
&::before {
background: linear-gradient(90deg, #e89635 88%, #b24319 93%, transparent 105%);
}
&::after {
background: linear-gradient(90deg, #e89635 81%, #b24319 86%, transparent 98%);
}
}
&::before {
background: linear-gradient(90deg, #e89635 3%, #b24319 78%, transparent 90%);
}
&::after {
background: linear-gradient(90deg, #e89635 6%, #b24319 71%, transparent 83%);
}
}
&.active {
background: linear-gradient(128deg, rgba(0, 212, 255, 1) 23%, rgba(9, 9, 121, 1) 28%, transparent 39%);
&:hover {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 31%, rgba(9, 9, 121, 1) 78%, transparent 90%);
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 88%, rgba(9, 9, 121, 1) 93%, transparent 105%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 81%, rgba(9, 9, 121, 1) 86%, transparent 98%);
}
}
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 3%, rgba(9, 9, 121, 1) 78%, transparent 90%);
}
&::after {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 6%, rgba(9, 9, 121, 1) 71%, transparent 83%);
}
}
}

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

@ -0,0 +1,60 @@
@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;
}
&:not(.with-image) span {
left: 40px;
}
&:not(.active) {
background: linear-gradient(90deg, #e89635 0%, #b24319 5%, transparent 15%);
&:hover {
background: linear-gradient(90deg, #e89635 8%, #b24319 78%, transparent 90%);
&::after,
&::before {
background: linear-gradient(90deg, #e89635 73%, #b24319 78%, transparent 90%);
}
}
&::after,
&::before {
background: linear-gradient(90deg, #e89635 8%, #b24319 63%, transparent 75%);
}
}
&.active {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 0%, rgba(9, 9, 121, 1) 5%, transparent 15%);
&:hover {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 8%, rgba(9, 9, 121, 1) 78%, transparent 90%);
&::after,
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 73%, rgba(9, 9, 121, 1) 78%, transparent 90%);
}
}
&::after,
&::before {
background: linear-gradient(90deg, rgba(0, 212, 255, 1) 8%, rgba(9, 9, 121, 1) 63%, transparent 75%);
}
}
}

src/components/seetings/settings.item.scss → src/components/settings/settings.item.scss View File

@ -83,8 +83,7 @@
}
&:hover span {
text-shadow: -3px -1px 3px #002651, -1px -3px 3px #002651,
3px 1px 3px #002651, 1px 3px 3px #002651;
text-shadow: -3px -1px 3px #002651, -1px -3px 3px #002651, 3px 1px 3px #002651, 1px 3px 3px #002651;
}
&.item-2 {

+ 3
- 0
src/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
src/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>

+ 30
- 0
src/style.scss View File

@ -1,6 +1,7 @@
* {
border: none;
outline: none;
user-select: none;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
@ -43,7 +44,36 @@ header {
}
}
footer {
position: fixed;
color: white;
bottom: 30px;
right: 30px;
left: 30px;
display: flex;
flex-direction: column;
z-index: 2;
a.back-to {
width: 32px;
height: 32px;
cursor: pointer;
&.home {
background: center / contain no-repeat url("./icons/home.svg");
}
&.settings {
background: center / contain no-repeat url("./icons/settings.svg");
}
}
}
@import "./components/measurement.circle.scss";
@import "./components/measurement.pipe.scss";
@import "./components/settings.scss";
@import "./components/icons.scss";
@import "./components/form.scss";

Loading…
Cancel
Save