mirror of
https://github.com/Rolands-Laucis/Socio.git
synced 2026-05-15 14:15:57 -06:00
162 lines
No EOL
5.3 KiB
HTML
162 lines
No EOL
5.3 KiB
HTML
<html>
|
|
<head>
|
|
<title>Socio demonstration - basic</title>
|
|
<!-- fake favicon -->
|
|
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
|
|
|
|
<!-- font -->
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link
|
|
href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@200;400;700&family=Trispace:wght@100;200&display=swap"
|
|
rel="stylesheet">
|
|
|
|
<!-- to import base64.js from static, as ES modules import in socio/core-client -->
|
|
<script type="importmap">
|
|
{
|
|
"imports": {
|
|
"base64-js": "./base64-js"
|
|
}
|
|
}
|
|
</script>
|
|
<!-- i reall dont know why this error came up, but this script seems to fix it. Base64 doesnt export a default, but it does export 3 functions, which i import as "import * as b64 from 'base64-js';" and that gives browser error "exports is not defined". -->
|
|
<script>var exports = {};</script>
|
|
|
|
<!-- get the actual client script from express static, which has all the socio client logic. -->
|
|
<script src="./client.js" type="module"></script>
|
|
</head>
|
|
|
|
<style>
|
|
:root{
|
|
--accent1: #ee3a46;
|
|
--accent2: #6418a3;
|
|
--grad: linear-gradient(45deg, var(--accent1) 0%, var(--accent1) 40%, var(--accent2) 90%, var(--accent2) 100%);
|
|
--shad:drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.192));
|
|
--trans: 150ms ease-in-out;
|
|
}
|
|
body{
|
|
margin: 0;
|
|
height: 100%;
|
|
|
|
background-color: #16161b;
|
|
color: white;
|
|
font-family: 'Josefin Sans', 'Open Sans', sans-serif;
|
|
}
|
|
main{
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-evenly;
|
|
}
|
|
nav{
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
}
|
|
a, h1, h2, h3{
|
|
margin: 0;
|
|
padding: 0;
|
|
filter: var(--shad);
|
|
}
|
|
h1{
|
|
font-size: 48.83px;
|
|
font-weight: 700;
|
|
}
|
|
h2{
|
|
font-size: 31.25px;
|
|
font-weight: 700;
|
|
line-height: 1.3;
|
|
}
|
|
h3{
|
|
font-size: 20px;
|
|
font-weight: 300;
|
|
font-style: italic;
|
|
color: #5a5a5f;
|
|
}
|
|
a{
|
|
font-size: 25px;
|
|
}
|
|
|
|
h1, h2{
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
}
|
|
h1{align-items: baseline;}
|
|
h2{align-items: center;}
|
|
.status{align-items: baseline;}
|
|
|
|
.code{
|
|
font-family: 'Trispace', monospace;
|
|
font-weight: 100;
|
|
font-size: 19.20px;
|
|
padding: 8px;
|
|
border-radius: 4px;
|
|
background-color: rgb(41, 41, 41);
|
|
border: 1px solid rgb(156, 156, 156);
|
|
}
|
|
.num{
|
|
font-weight: 700;
|
|
font-size: 48.83px;
|
|
}
|
|
button{
|
|
font-weight: 700;
|
|
font-size: 24px;
|
|
background: var(--grad);
|
|
background-position: 50% 0px;
|
|
background-size: 150%;
|
|
color: #fff;
|
|
border: none;
|
|
outline: none;
|
|
border-radius: 12px;
|
|
padding: 12px;
|
|
filter: var(--shad);
|
|
|
|
transition: var(--trans);
|
|
}
|
|
button:hover{
|
|
cursor: pointer;
|
|
border-radius: 6px;
|
|
background-position: 0px 0px;
|
|
}
|
|
.grad_clip{
|
|
background: var(--grad);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-position: 30% 0px;
|
|
background-size: 130%;
|
|
transition: var(--trans);
|
|
}
|
|
.grad_clip:hover{
|
|
background-position: 0px 0px;
|
|
}
|
|
|
|
/* .status.ready{color: #5fe757;} */
|
|
</style>
|
|
|
|
<body>
|
|
<main>
|
|
<nav>
|
|
<h2 class="grad_clip">Socio</h2>
|
|
<a href="https://github.com/Rolands-Laucis/Socio.js" style="color: var(--accent2);">github</a>
|
|
<a href="https://www.npmjs.com/package/socio" style="color: var(--accent2);">npm</a>
|
|
</nav>
|
|
<h1>Socio Basic Demonstration</h1>
|
|
<h2 id="ready" class="status">Not Ready!</h2>
|
|
|
|
<h2><span class="code"><i>once:</i> "SELECT 42+69 AS RESULT;"</span> = <span id="1" class="num grad_clip"></span></h2>
|
|
<h2><span class="code"><i>once:</i> "SELECT COUNT(*) FROM users;"</span> = <span id="2" class="num grad_clip"></span></h2>
|
|
<h2><span class="code"><i>subscribed:</i> "SELECT COUNT(*) FROM users WHERE name = :name;" && :name = 'Bob'</span> =
|
|
<span id="3" class="num grad_clip"></span></h2>
|
|
|
|
<button id="insert">"INSERT INTO users VALUES("Bob", 420);"</button>
|
|
|
|
<h3>Check the dev console for verbose logs and the network panel for websocket connection messages ;)</h3>
|
|
</main>
|
|
</body>
|
|
</html> |