Skip to content

Commit 1e9cd5f

Browse files
MatiasG19MatiasG19
authored
feat(web): Improve design (#1)
* First draft * Make design scalable and more modern * Update style.css
1 parent cf271bb commit 1e9cd5f

File tree

2 files changed

+72
-120
lines changed

2 files changed

+72
-120
lines changed

‎web/src/index.htm‎

Lines changed: 41 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -7,52 +7,60 @@
77
<link rel="stylesheet" href="style.css" />
88
</head>
99
<body>
10-
<h2>STORINATOR</h2>
10+
<div class="heading">STORINATOR</div>
1111

12-
<div class="statusContainer">
13-
<div class="led-box">
14-
<div id="powerLed" class="led-off"></div>
15-
<p>Power</p>
16-
</div>
17-
</div>
18-
19-
<div class="operationContainer">
20-
<button type="button" class="powerOnButton" onclick="sendCommand(CMD_POWER_ON)">
21-
ON
22-
</button>
23-
<button type="button" class="standbyButton" onclick="sendCommand(CMD_STAND_BY)">
24-
STANDBY
25-
</button>
26-
<button type="button" class="resetButton" onclick="sendCommand(CMD_RESET)">
27-
RESET
28-
</button>
29-
<button type="button" class="killButton" onclick="sendCommand(CMD_KILL)">
30-
KILL
31-
</button>
32-
</div>
12+
<button
13+
id="powerBtn"
14+
type="button"
15+
class="activeButton"
16+
onclick="sendCommand(CMD_POWER_ON)"
17+
>
18+
POWER ON
19+
</button>
20+
<button
21+
id="standByBtn"
22+
type="button"
23+
class="activeButton"
24+
onclick="sendCommand(CMD_STAND_BY)"
25+
>
26+
STANDBY
27+
</button>
28+
<button
29+
id="resetBtn"
30+
type="button"
31+
class="activeButton"
32+
onclick="sendCommand(CMD_RESET)"
33+
>
34+
RESET
35+
</button>
36+
<button
37+
id="killBtn"
38+
type="button"
39+
class="activeButton"
40+
onclick="sendCommand(CMD_KILL)"
41+
>
42+
KILL
43+
</button>
3344

3445
<script>
35-
var state = false
3646
const CMD_POWER_ON = "powerOn", CMD_STAND_BY = "standBy", CMD_RESET = "reset", CMD_KILL = "kill"
3747
const REQ_POWER_STATUS = "powerStatus"
3848

3949
setInterval(() => {
4050
requestStatus(REQ_POWER_STATUS)
4151
}, 3000)
4252

43-
function togglePowerLed(state) {
44-
const powerLed = document.getElementById('powerLed')
53+
function togglePowerButtonColor(state) {
54+
const powerBtn = document.getElementById('powerBtn')
4555
if (state) {
46-
powerLed.classList.remove('led-off')
47-
powerLed.classList.add('led-green')
56+
powerBtn.style.color = "#27e670"
4857
} else {
49-
powerLed.classList.remove('led-green')
50-
powerLed.classList.add('led-off')
58+
powerBtn.style.color = "#cfcfcf"
5159
}
5260
}
5361

54-
function sendCommand(request) {
55-
if (!confirm(request.toUpperCase())) return
62+
function sendCommand(type) {
63+
if (!confirm(type.toUpperCase())) return
5664

5765
var xhttp = new XMLHttpRequest()
5866
xhttp.onreadystatechange = function () {
@@ -72,9 +80,9 @@ <h2>STORINATOR</h2>
7280
console.debug(`requestStatus:${request}:${this.responseText}`)
7381
if(request == REQ_POWER_STATUS && typeof this.response === "string") {
7482
if(this.response.toString().includes(REQ_POWER_STATUS+":on"))
75-
togglePowerLed(true)
83+
togglePowerButtonColor(true)
7684
else
77-
togglePowerLed(false)
85+
togglePowerButtonColor(false)
7886
}
7987
}
8088
}

‎web/src/style.css‎

Lines changed: 31 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -1,102 +1,46 @@
1-
body {
2-
font-family: 'Lucida Console', 'Courier New', monospace;
3-
}
4-
5-
.operationContainer {
6-
7-
}
8-
9-
button {
10-
position: relative;
11-
display: inline-block;
12-
width: 100px;
13-
height: 34px;
14-
}
15-
16-
.powerOnButton {
17-
background-color: #04e486;
18-
}
19-
20-
.powerOnButton:hover {
21-
background-color: #60ebb1;
22-
color: black;
23-
}
24-
25-
.powerOnButton:active {
26-
background-color: #08b16b;
27-
color: white;
1+
html {
2+
height: 95%;
3+
font-family: 'Lucida Console', 'Arial', monospace;
284
}
295

30-
.standbyButton {
31-
background-color: #ee7707;
32-
}
33-
34-
.standbyButton:hover {
35-
background-color: #f09b4c;
36-
color: white;
37-
}
38-
39-
.standbyButton:active {
40-
background-color: #c26208;
41-
color: white;
42-
}
43-
44-
.resetButton {
45-
background-color: #d60656;
46-
}
47-
48-
.resetButton:hover {
49-
background-color: #cf4376;
50-
color: black;
51-
}
52-
53-
.resetButton:active {
54-
background-color: #b41f56;
55-
color: white;
6+
body {
7+
background-color: #1f1e29;
8+
color: #cfcfcf;
9+
height: 95%;
5610
}
5711

58-
/**********************************************/
59-
/* Status */
60-
/**********************************************/
61-
.statusContainer {
62-
margin: 30px;
12+
.heading {
13+
font-size: 5vh;
14+
text-align: center;
6315
}
6416

65-
.led-box {
66-
height: 30px;
67-
margin: 10px 30px;
17+
button {
18+
position: relative;
6819
display: inline-block;
69-
}
20+
width: calc(100% - 2vw);
21+
min-width: 50px;
22+
max-width: 200vh;
23+
height: 20%;
24+
min-height: 50px;
25+
border: none;
26+
border-radius: 1vw;
27+
margin: 1vh 1vw 1vh 1vw;
28+
font-size: 10vh;
7029

71-
.led-box p {
72-
font-size: 12px;
73-
text-align: center;
74-
margin: 1em;
30+
color: #cfcfcf;
31+
background-color: #313131;
7532
}
7633

77-
.led-green {
78-
margin: 0 auto;
79-
width: 24px;
80-
height: 24px;
81-
background-color: #aee9d0;
82-
border-radius: 50%;
83-
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset #08b16b 0 -1px 9px, #42e4a0 0 2px 12px;
34+
.activeButton {
35+
cursor: pointer;
8436
}
8537

86-
.led-blue {
87-
margin: 0 auto;
88-
width: 24px;
89-
height: 24px;
90-
background-color: #24E0FF;
91-
border-radius: 50%;
92-
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset rgb(59, 59, 190) 0 -1px 9px, #3F8CFF 0 2px 14px;
38+
.activeButton:hover {
39+
background-color: #cfcfcf;
40+
color: black;
9341
}
9442

95-
.led-off {
96-
margin: 0 auto;
97-
width: 24px;
98-
height: 24px;
99-
background-color: #ffffff;
100-
border-radius: 50%;
101-
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 7px 1px, inset rgb(65, 65, 73) 0 -1px 9px, #ffffff 0 2px 14px;
43+
.activeButton:active {
44+
background-color: #494949;
45+
color: #cfcfcf;
10246
}

0 commit comments

Comments
 (0)