quartznet/quartznet-info
2
0
Fork 0
Code Issues Pull Requests Actions Packages Activity

Add status/error message display

Browse Source
This commit is contained in:
Chris Dill 2023-08-17 07:35:23 +01:00
parent 4b0d471754
commit 8fc90db6a2
2 changed files with 61 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
src/routes/+error.svelte
View File

@ -1,13 +1,12 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { page } from "$app/stores";
import Banner from "../components/Banner.svelte"; import { onMount } from "svelte";
import Banner from "../components/Banner.svelte";
export let status: string; const status = $page.status?.toString() ?? "";
export let error: Error; const dev = process.env.NODE_ENV === "development";
const dev = process.env.NODE_ENV === "development"; var appa = ` .,-:;//;:=,
var appa = ` .,-:;//;:=,
. :H@@@MM@M#H/.,+%;, . :H@@@MM@M#H/.,+%;,
,/X+ +M@@M@MM%=,-%HMMM@X/, ,/X+ +M@@M@MM%=,-%HMMM@X/,
-+@MM; $M@@MH+-,;XMMMM@MMMM@+- -+@MM; $M@@MH+-,;XMMMM@MMMM@+-
@ -28,7 +27,7 @@
,:+$+-,/H#MMMMMMM@- -, ,:+$+-,/H#MMMMMMM@- -,
=++%%%%+/:-.`; =++%%%%+/:-.`;
var nuke = ` =+$HM####@H%;, var nuke = ` =+$HM####@H%;,
/H###############M$, /H###############M$,
,@################+ ,@################+
.H##############+ .H##############+
@ -49,7 +48,7 @@ X##############%, ,+##############X
.+M###@, ,@###M+. .+M###@, ,@###M+.
:XH. .HX:`; :XH. .HX:`;
var atom = ` =/;;/- var atom = ` =/;;/-
+: // +: //
/; /; /; /;
-X H. -X H.
@ -70,7 +69,7 @@ M- ,=;;;#:, ,:#;;:=, ,@
// +; // +;
,////,`; ,////,`;
var heart = ` .,---. var heart = ` .,---.
,/XM#MMMX;, ,/XM#MMMX;,
-%##########M%, -%##########M%,
-@######% $###@= -@######% $###@=
@ -91,7 +90,7 @@ X################, -$=X#######@:
.,/X$; .::, .,/X$; .::,
., ..`; ., ..`;
var fire = ` -$- var fire = ` -$-
.H##H, .H##H,
+######+ +######+
.+#########H. .+#########H.
@ -112,7 +111,7 @@ X################, -$=X#######@:
/XHX%:#####MH%= ,---:;;;;/&&XHM,:###$ /XHX%:#####MH%= ,---:;;;;/&&XHM,:###$
$@#MX %+;- .`; $@#MX %+;- .`;
var tick = ` :X- var tick = ` :X-
:X### :X###
;@####@ ;@####@
;M######X ;M######X
@ -133,7 +132,7 @@ $@#MX %+;- .`;
+####: +####:
,$M-`; ,$M-`;
var bang = ` .+ var bang = ` .+
/M; /M;
H#@: ;, H#@: ;,
-###H- -@/ -###H- -@/
@ -154,7 +153,7 @@ $@#MX %+;- .`;
.#H, :XH, .#H, :XH,
+ .;-`; + .;-`;
var mesa = ` .-;+$XHHHHHHX$+;-. var mesa = ` .-;+$XHHHHHHX$+;-.
,;X@@X%/;=----=:/%X@@X/, ,;X@@X%/;=----=:/%X@@X/,
=$@@%=. .=+H@X: =$@@%=. .=+H@X:
-XMX: =XMX= -XMX: =XMX=
@ -175,7 +174,7 @@ H@: :HHHHHHHHHHHHHHHHHHX, =@H
,;$@@@@@@@@@@@@@@@@@@X/- ,;$@@@@@@@@@@@@@@@@@@X/-
.-;+$XXHHHHHX$+;-.`; .-;+$XXHHHHHX$+;-.`;
var cube = ` #+ @ # # M#@ var cube = ` #+ @ # # M#@
. .X X.%##@;# # +@#######X. @H% . .X X.%##@;# # +@#######X. @H%
,==. ,######M+ -#####%M####M- # ,==. ,######M+ -#####%M####M- #
:H##M%:=##+ .M##M,;#####/+#######% ,M# :H##M%:=##+ .M##M,;#####/+#######% ,M#
@ -196,7 +195,7 @@ H@: :HHHHHHHHHHHHHHHHHHX, =@H
H#M /@####/ ,++. / ==-, H#M /@####/ ,++. / ==-,
,=/:, .+X@MMH@#H #####$=`; ,=/:, .+X@MMH@#H #####$=`;
var cake = ` ,:/+/- var cake = ` ,:/+/-
/M/ .,-=;//;- /M/ .,-=;//;-
.:/= ;MH/, ,=/+%$XH@MM#@: .:/= ;MH/, ,=/+%$XH@MM#@:
-$##@+$###@H@MMM#######H:. -/H# -$##@+$###@H@MMM#######H:. -/H#
@ -217,41 +216,39 @@ H@: :HHHHHHHHHHHHHHHHHHX, =@H
,:/%XM####H/. ,:/%XM####H/.
,.:=-.`; ,.:=-.`;
// appa, atom, nuke // appa, atom, nuke
var options = [cake, heart, fire, tick, bang, mesa, cube]; var options = [cake, heart, fire, tick, bang, mesa, cube];
let active = cake; let active = cake;
function updateView() { function updateView() {
active = options[Math.floor(Math.random() * options.length)]; active = options[Math.floor(Math.random() * options.length)];
setTimeout(updateView, 5000); setTimeout(updateView, 5000);
} }
onMount(() => updateView()); onMount(() => updateView());
</script> </script>
<svelte:head> <svelte:head>
<title>Quartnzet -</title> <title>Quartznet - {status}</title>
</svelte:head> </svelte:head>
<Banner title={status} /> <Banner title={status} />
<main class="container"> <main class="container">
<!-- <p>{error.message}</p> --> <section>
<h2>{status} {$page.error?.message ?? ""}</h2>
<!-- {#if dev && error.stack} --> <audio controls autoplay>
<!-- <pre>{error.stack}</pre> --> <track kind="captions" />
<!-- {:else} --> <source src="http://quartznet.info/alive.ogg" type="audio/wav" />
<audio controls autoplay> </audio>
<track kind="captions" /> <div class="ascii">
<source src="http://quartznet.info/alive.ogg" type="audio/wav" /> <div>
</audio> <pre><br />{active}</pre>
<div class="ascii"> </div>
<div> </div>
<pre><br />{active}</pre> <br />
</div> <p class="info">
</div> This was a triumph! I'm making a note here: Huge success!
<br />
<p class="info">This was a triumph! I'm making a note here: Huge success!
It's hard to overstate my satisfaction. It's hard to overstate my satisfaction.
Aperture Science: We do what we must because we can. Aperture Science: We do what we must because we can.
@ -289,31 +286,31 @@ And when you're dead I will be still alive.
Still alive. Still alive.
Still alive.</p> Still alive.</p>
<!-- {/if} --> </section>
</main> </main>
<style> <style>
* { * {
color: white !important; color: white !important;
font-family: monospace; font-family: monospace;
white-space: pre; white-space: pre;
} }
.ascii { .ascii {
text-align: left; text-align: left;
width: 100%; width: 100%;
} }
.info { .info {
margin-bottom: 30px; margin-bottom: 30px;
position: relative; position: relative;
white-space: pre; white-space: pre;
text-align: left; text-align: left;
} }
pre { pre {
margin: 0 auto; margin: 0 auto;
font-family: monospace; font-family: monospace;
white-space: pre; white-space: pre;
} }
</style> </style>

1
static/css/global.css
View File

@ -143,6 +143,7 @@ footer {
color: var(--font-color); color: var(--font-color);
font-family: var(--font1); font-family: var(--font1);
margin-top: 30px; margin-top: 30px;
margin-bottom: 30px;
} }
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */ /* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */