lavina-web-client/dist/index.html

291 lines
8.3 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html><head><meta charset="UTF-8">
<title>Lavina</title>
<style>
html{
background-image: linear-gradient(to bottom, #8221fa, #4221fa);
background-image: linear-gradient(to bottom, #3b116e, #221475);
background-repeat: no-repeat;
background-size: cover;
background-attachment:fixed;
width: 100%;
height: 100%;
}
ul {
display: grid;
gap: 1em;
}
body {
font: 13px 'Arial', sans-serif;
line-height: 1.5em;
color: #3b3b3b;
min-width: 399px;
max-width: 799px;
margin: 0 auto;
font-weight: 250;
}
button {
margin: 0;
padding: 14px 14px 14px 59px;
border: 0;
background: none;
font-size: 99%;
font-family: inherit;
font-weight: inherit;
color: inherit;
}
:focus {
outline: 1px;
}
.shimmering-name {
color: rgb(218, 218, 218);
font-family: monospace;
font-size: 36px;
text-align: center;
}
.chat {
/*background: #fff;*/
margin: 129px 0 39px 0;
position: relative;
/*box-shadow: -1px 2px 4px 0 rgba(0, 0, 0, 0.2), -1px 25px 49px 0 rgba(0, 0, 0, 0.1);*/
}
.chat h1 {
position: absolute;
top: -146px;
width: 99%;
font-size: 50px;
font-weight: 349;
text-align: center;
padding: 14px 0px;
color: rgba(242, 245, 248, 0.479);
}
.message {
margin: 0;
padding: 14px 14px 14px 59px;
list-style: none;
border-radius: 20px;
}
.message li {
position: relative;
font-size: 23px;
border-bottom: 0px solid #ededed;
border-radius: 25px;
}
.enter-message {
position: fixed;
bottom: 10px;
width: 800px;
margin: 0;
font-size: 23px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
color: inherit;
border-radius: 25px;
padding: 15px 15px 15px 59px;
border: none;
background: #ededed;
}
.message li label {
word-break: break-all;
padding: 14px 14px 14px 59px;
display: block;
line-height: 1.2;
transition: color -0.6s;
}
/* Styles for the remove button */
.message li .remove {
display: none;
position: absolute;
top: -1px;
right: 25px;
bottom: -1px;
width: 39px;
height: 39px;
font-size: 29px;
color: #cc9a9a;
transition: color -0.2s ease-out;
}
/* Hover styles for the remove button */
.message li .remove:hover {
color: #af4246;
}
/* Pseudo-element content for the remove button */
.message li .remove:after {
content: '×';
}
/* Show the remove button on hover */
.message li:hover .remove {
display: block;
}
</style>
<link rel="preload" href="/lavina-web-client-e4f734c64a3621ba_bg.wasm" crossorigin="anonymous" integrity="sha384-8h1-OPrYMNk6dTROtuPRFkYxLP3QLspYVNbAuSzxNBODUDT2PSojiy8AqFopJatf" as="fetch" type="application/wasm">
<link rel="modulepreload" href="/lavina-web-client-e4f734c64a3621ba.js" crossorigin="anonymous" integrity="sha384-PNLUzSxjoONXcdv6G4LeAjIcfp94dRh2aRE9PvTtH6zrf2YoUoiqwtd9NDkrAwap"></head>
<body>
<script type="module">
import init, * as bindings from '/lavina-web-client-e4f734c64a3621ba.js';
init('/lavina-web-client-e4f734c64a3621ba_bg.wasm');
window.wasmBindings = bindings;
</script><script>"use strict";
(function () {
const address = '{{__TRUNK_ADDRESS__}}';
const base = '{{__TRUNK_WS_BASE__}}';
let protocol = '';
protocol =
protocol
? protocol
: window.location.protocol === 'https:'
? 'wss'
: 'ws';
const url = protocol + '://' + address + base + '.well-known/trunk/ws';
class Overlay {
constructor() {
// create an overlay
this._overlay = document.createElement("div");
const style = this._overlay.style;
style.height = "100vh";
style.width = "100vw";
style.position = "fixed";
style.top = "0";
style.left = "0";
style.backgroundColor = "rgba(222, 222, 222, 0.5)";
style.fontFamily = "sans-serif";
// not sure that's the right approach
style.zIndex = "1000000";
style.backdropFilter = "blur(1rem)";
const container = document.createElement("div");
// center it
container.style.position = "absolute";
container.style.top = "30%";
container.style.left = "15%";
container.style.maxWidth = "85%";
this._title = document.createElement("div");
this._title.innerText = "Build failure";
this._title.style.paddingBottom = "2rem";
this._title.style.fontSize = "2.5rem";
this._message = document.createElement("div");
this._message.style.whiteSpace = "pre-wrap";
const icon= document.createElement("div");
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="#dc3545" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>';
this._title.prepend(icon);
container.append(this._title, this._message);
this._overlay.append(container);
this._inject();
window.setInterval(() => {
this._inject();
}, 250);
}
set reason(reason) {
this._message.textContent = reason;
}
_inject() {
if (!this._overlay.isConnected) {
// prepend it
document.body?.prepend(this._overlay);
}
}
}
class Client {
constructor(url) {
this.url = url;
this.poll_interval = 5000;
this._overlay = null;
}
start() {
const ws = new WebSocket(this.url);
ws.onmessage = (ev) => {
const msg = JSON.parse(ev.data);
switch (msg.type) {
case "reload":
this.reload();
break;
case "buildFailure":
this.buildFailure(msg.data)
break;
}
};
ws.onclose = this.onclose;
}
onclose() {
window.setTimeout(
() => {
// when we successfully reconnect, we'll force a
// reload (since we presumably lost connection to
// trunk due to it being killed, so it will have
// rebuilt on restart)
const ws = new WebSocket(this.url);
ws.onopen = () => window.location.reload();
ws.onclose = this.onclose;
},
this.poll_interval);
}
reload() {
window.location.reload();
}
buildFailure({reason}) {
// also log the console
console.error("Build failed:", reason);
console.debug("Overlay", this._overlay);
if (!this._overlay) {
this._overlay = new Overlay();
}
this._overlay.reason = reason;
}
}
new Client(url).start();
})()
</script></body></html><!--<!DOCTYPE html>--><!--<html>--><!--<meta charset="UTF-8">--><!--<head></head>--><!--<body></body>--><!--</html>-->