|
|
@@ -4,39 +4,72 @@
|
|
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
|
<title>Project1</title>
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
|
+ <link href="bulma.min.css" rel="stylesheet">
|
|
|
<script src="wasmwebsocket.js"></script>
|
|
|
</head>
|
|
|
<body>
|
|
|
- <h1>Webassembly Websocket-based chat demo</h1>
|
|
|
- <div>
|
|
|
- <div>
|
|
|
- <label for="edtMessage" >
|
|
|
- <div style="display: inline-block; min-width: 10em; margin-bottom: 4px;">From:</div>
|
|
|
- </label>
|
|
|
- <input id="edtFrom" >
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <label for="edtTo" autocomplete="off">
|
|
|
- <div style="display: inline-block; min-width: 10em; margin-bottom: 4px;">To:</div>
|
|
|
- </label>
|
|
|
- <input id="edtTo" autocomplete="off">
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <label for="edtMessage" >
|
|
|
- <div style="display: inline-block; min-width: 10em; margin-bottom: 4px;">Message:</div>
|
|
|
- </label>
|
|
|
- <input id="edtMessage">
|
|
|
- <button id="btnSend">Send</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div><p>Chat history:</p></div>
|
|
|
- <div id="pasjsconsole" style="min-height: 75vh;"></div>
|
|
|
- <div>
|
|
|
- <label for="cbLog">
|
|
|
- <input id="cbLog" type="checkbox" checked autocomplete="off">
|
|
|
- Show API log
|
|
|
- </label>
|
|
|
- </div>
|
|
|
+ <div class="container">
|
|
|
+ <h3 class="title is-3">Webassembly Websocket-based chat demo</h3>
|
|
|
+ <hr>
|
|
|
+ <div class="box">
|
|
|
+
|
|
|
+ <div class="field is-horizontal">
|
|
|
+ <div class="field-label is-small">
|
|
|
+ <label class="label is-small" for="edtMessage" >
|
|
|
+ From:
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="field-body">
|
|
|
+ <div class="control">
|
|
|
+ <input class="input is-small" type="text" id="edtFrom" >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> <!-- .field -->
|
|
|
+
|
|
|
+ <div class="field is-horizontal">
|
|
|
+ <div class="field-label is-small">
|
|
|
+ <label class="label is-small" for="edtTo">
|
|
|
+ To:
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="field-body">
|
|
|
+ <div class="control">
|
|
|
+ <input class="input is-small" type="text" id="edtTo" autocomplete="off">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> <!-- .field -->
|
|
|
+
|
|
|
+ <div class="field is-horizontal">
|
|
|
+ <div class="field-label is-small">
|
|
|
+ <label class="label is-small" for="edtMessage" >
|
|
|
+ Message:
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
+ <div class="field-body">
|
|
|
+ <div class="field has-addons">
|
|
|
+ <div class="control is-expanded">
|
|
|
+ <input class="input is-small" type="text" id="edtMessage">
|
|
|
+ </div>
|
|
|
+ <div class="control">
|
|
|
+ <button class="button is-small" id="btnSend">Send</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> <!-- .field -->
|
|
|
+ </div> <!-- .box -->
|
|
|
+
|
|
|
+ <div class="box">
|
|
|
+
|
|
|
+ <div><p>Chat history:</p></div>
|
|
|
+ <div id="pasjsconsole" style="min-height: 75vh;"></div>
|
|
|
+ <div class="field">
|
|
|
+ <label class="checkbox" for="cbLog">
|
|
|
+ <input id="cbLog" type="checkbox" checked autocomplete="off">
|
|
|
+ Show API log
|
|
|
+ </label>
|
|
|
+ </div> <!-- .field -->
|
|
|
+ </div> <!-- .box -->
|
|
|
+ </div> <!-- .container -->
|
|
|
<script>
|
|
|
rtl.showUncaughtExceptions=true;
|
|
|
window.addEventListener("load", rtl.run);
|
Michaël Van Canneyt