Skip to content

Commit

Permalink
change styles of client pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@catink123
catink123 committed Jan 16, 2024
1 parent f361bef commit 0c26af2
Show file tree
Hide file tree
Showing 3 changed files with 192 additions and 23 deletions.
99 changes: 88 additions & 11 deletions src/client/control/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,48 +4,125 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gate Control</title>

<style>
body {
color: white;
background: hsl(221, 33%, 13%);
font-family: sans-serif;
display: grid;
place-items: center;
height: 100dvh;
margin: 0;
}

body > div {
display: grid;
place-items: center;
gap: 10px;
}

h1 {
margin: 0;
}

button {
border: 1px solid hsl(221, 33%, 30%);
padding: 10px 15px;
color: white;
text-decoration: none;
border-radius: 50px;
transition-duration: .1s;
background:hsl(221, 33%, 15%);
}

button:hover {
background:hsl(221, 33%, 30%);
}

button:active {
background:hsl(221, 33%, 10%);
}

div.controlbar {
display: flex;
gap: 10px;
}

.state {
border-radius: 50px;
padding: 2px 5px;
display: block;
width: 16px;
height: 16px;
transition-duration: .5s;
}

.state.unknown {
background: yellow;
background: rgb(255, 255, 82);
}

.state.raised {
background: lime;
background: rgb(79, 235, 79);
}

.state.lowered {
background: red;
color: white;
background: rgb(255, 70, 70);
}

.state-block {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 15px;
border: 1px solid hsl(221, 33%, 30%);
border-radius: 15px;
}

.state-container {
display: flex;
align-items: center;
gap: 15px;
padding-top: 10px;
}

p {
margin: 0;
}
</style>
</head>
<body>
<h1>Control Page</h1>
<div>
<h1>Control Page</h1>

<button disabled id="send-up">Send Raise</button>
<button disabled id="send-down">Send Lower</button>
<div class="controlbar">
<button disabled id="send-up">Raise</button>
<button disabled id="send-down">Lower</button>
</div>

<p>Current state: <span class="state unknown">Unknown</span></p>
<div class="state-container">
<p>Gate state: </p>
<div class="state-block">
<span class="state unknown"></span>
<p>Unknown</p>
</div>
</div>
</div>

<script>
let ws = new WebSocket("ws://" + location.host + location.pathname);
const stateSpan = document.querySelector("span.state");
const stateText = document.querySelector("div.state-block > p");

ws.addEventListener('message', e => {
let msg = JSON.parse(e.data);
if (msg.type == "text") alert(`Text from Server: ${msg.payload}`);
if (msg.type == "query_state_result") {
if (msg.payload == true) {
stateSpan.className = "state raised";
stateSpan.innerText = "Raised";
stateText.innerText = "Raised";
} else if (msg.payload == false) {
stateSpan.className = "state lowered";
stateSpan.innerText = "Lowered";
stateText.innerText = "Lowered";
}
}
if (msg.type == "availability") alert(`Availability: ${msg.payload}`);
Expand Down
56 changes: 53 additions & 3 deletions src/client/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,61 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gate Control</title>

<style>
body {
color: white;
background: hsl(221, 33%, 13%);
font-family: sans-serif;
display: grid;
place-items: center;
height: 100dvh;
margin: 0;
}

body > div {
display: grid;
place-items: center;
gap: 10px;
}

h1 {
margin: 0;
}

a {
border: 1px solid hsl(221, 33%, 30%);
padding: 10px 15px;
color: white;
text-decoration: none;
border-radius: 10px;
transition-duration: .1s;
background:hsl(221, 33%, 15%);
}

a:hover {
background:hsl(221, 33%, 30%);
}

a:active {
background:hsl(221, 33%, 10%);
}

div.linkbar {
display: flex;
gap: 10px;
}
</style>
</head>
<body>
<h1>Home Page</h1>
<a href="/view">View</a>
<a href="/control">Control</a>
<div>
<h1>Gate Control</h1>

<div class="linkbar">
<a href="/view">View</a>
<a href="/control">Control</a>
</div>
</div>

<!--<h1>Login Test</h1>
<div>
Expand Down
60 changes: 51 additions & 9 deletions src/client/view/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,45 +4,87 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gate Control</title>

<style>
body {
color: white;
background: hsl(221, 33%, 13%);
font-family: sans-serif;
display: grid;
place-items: center;
height: 100dvh;
margin: 0;
}

body > div {
display: grid;
place-items: center;
gap: 10px;
}

h1 {
margin: 0;
}

.state {
border-radius: 50px;
padding: 2px 5px;
display: block;
width: 16px;
height: 16px;
transition-duration: .5s;
}

.state.unknown {
background: yellow;
background: rgb(255, 255, 82);
}

.state.raised {
background: lime;
background: rgb(79, 235, 79);
}

.state.lowered {
background: red;
color: white;
background: rgb(255, 70, 70);
}

.state-block {
display: flex;
align-items: center;
gap: 10px;
padding: 13px 15px;
border: 1px solid hsl(221, 33%, 30%);
border-radius: 15px;
}

p {
margin: 0;
}
</style>
</head>
<body>
<h1>View Page</h1>
<div>
<h1>Gate State</h1>

<p>Current state: <span class="state unknown">Unknown</span></p>
<div class="state-block">
<span class="state unknown"></span>
<p>Unknown</p>
</div>
</div>

<script>
let ws = new WebSocket("ws://" + location.host + location.pathname);
const stateSpan = document.querySelector("span.state");
const stateText = document.querySelector("div.state-block > p");

ws.addEventListener('message', e => {
let msg = JSON.parse(e.data);
if (msg.type == "text") alert(`Text from Server: ${msg.payload}`);
if (msg.type == "query_state_result") {
if (msg.payload == true) {
stateSpan.className = "state raised";
stateSpan.innerText = "Raised";
stateText.innerText = "Raised";
} else if (msg.payload == false) {
stateSpan.className = "state lowered";
stateSpan.innerText = "Lowered";
stateText.innerText = "Lowered";
}
}
if (msg.type == "availability") alert(`Availability: ${msg.payload}`);
Expand Down

0 comments on commit 0c26af2

Please sign in to comment.