<!DOCTYPE HTML>
<html lang="en-PH">
<head>
<meta charset="utf-8">
<title>Websocket Client</title>
<style>
form {
margin: 2em 0;
}
fieldset {
display: contents;
}
legend {
position: absolute;
left: -999999px;
}
legend ~ div {
margin: 0.5em 0;
}
legend ~ div > div {
display: flex;
gap: 0.5em;
}
legend ~ div > div :first-child {
flex: auto;
}
legend ~ div > div :first-child > label {
display: block;
width: 100%;
}
legend ~ div > div :first-child > label > input {
display: block;
width: 100%;
box-sizing: border-box;
}
label {
position: relative;
}
label > span {
position: absolute;
left: -999999px;
}
label + input[type="checkbox"] {
position: absolute;
left: -999999px;
}
textarea {
width: 100%;
box-sizing: border-box;
display: block;
}
</style>
</head>
<body>
<h1>Websocket Client</h1>
<form
id="formConnection"
>
<fieldset>
<legend>Server</legend>
<div>
<div>
<div>
<label>
<span>URL</span>
<input
type="url"
name="serverUrl"
autocomplete="off"
value="ws://localhost:42069"
required
>
</label>
</div>
</div>
</div>
<div>
<div>
<div>
<label>
<span>Username</span>
<input
type="text"
name="username"
autocomplete="off"
value="Web"
required
>
</label>
</div>
</div>
</div>
<button
type="submit"
name="connect"
>
Connect
</button>
</fieldset>
</form>
<form
id="formMessage"
>
<fieldset
name="fieldset"
disabled
>
<legend>Message</legend>
<div>
<div>
<div>
<label>
<span>Message</span>
<input
type="text"
value=""
autocomplete="off"
name="message"
placeholder="Type your message"
>
</label>
<input
type="checkbox"
name="binary"
readonly
tabindex="-1"
/>
</div>
<button
type="submit"
>
Send as Text (Enter)
</button>
<button
name="submitBinary"
type="button"
>
Send as Binary (Shift + Enter)
</button>
</div>
</div>
</fieldset>
</form>
<form
id="formLogs"
>
<fieldset>
<legend>Logs</legend>
<div>
<label>
<span>Logs</span>
<textarea
rows="10"
cols="50"
name="logs"
readonly
></textarea>
</label>
</div>
<button
type="submit"
>
Clear Logs
</button>
</fieldset>
</form>
<script src="index.js"></script>
</body>
</html>