@benev/praxis
Version:
Multiplayer webgame laboratory
338 lines (280 loc) • 8.52 kB
HTML
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="darkreader-lock"/>
<title>PRAXIS</title>
<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=Orbitron:wght@400..900&display=swap" rel="stylesheet">
<link rel="icon" href="assets/favicon.png?v=922be8c6"/>
<style>
@layer injections {
:root {
--resources-images-concept1: url("https://benev-storage.sfo2.cdn.digitaloceanspaces.com/praxis/images/concept1.avif");--resources-images-circuitry: url("https://benev-storage.sfo2.cdn.digitaloceanspaces.com/praxis/images/circuitry.avif");--resources-images-plates: url("https://benev-storage.sfo2.cdn.digitaloceanspaces.com/praxis/images/plates.avif");--resources-images-bestagons: url("https://benev-storage.sfo2.cdn.digitaloceanspaces.com/praxis/images/bestagons.avif");
}
}
</style>
<style>
@layer vars {
:root {
--link: cyan;
--bg: #111;
--prime: #ebb935;
--offbeat: #ebb935;
--select-bg: #f60;
--select-color: #ff8;
}
}
</style>
<style>
@layer standard {
* {
margin: 0;
padding: 0;
box-sizing: border-box;
scrollbar-width: thin;
scrollbar-color: #333 transparent;
&:focus {
outline: none;
}
&:focus-visible {
outline: 0.2em dashed color-mix(in lch, var(--prime), #fff8 50%);
}
}
::selection {
color: var(--select-color);
background-color: var(--select-bg);
}
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333; border-radius: 1em; }
::-webkit-scrollbar-thumb:hover { background: #444; }
a {
color: var(--link);
text-decoration: none;
&:visited {
color: color-mix(in srgb, purple, var(--link) 70%);
}
&:hover {
color: color-mix(in srgb, white, var(--link) 90%);
text-decoration: underline;
}
&:active {
color: color-mix(in srgb, white, var(--link) 50%);
}
}
}
</style>
<style>
@layer injections, vars, standard, main;
@layer main {
:root {
color-scheme: dark;
}
html {
font-size: 16px;
height: 100%;
font-family: "Orbitron", sans-serif;
background: var(--bg);
/* background: */
/* radial-gradient(circle, #0001, #000c), */
/* var(--bg) var(--resources-images-plates) center center / cover; */
background:
radial-gradient(circle, #0009, #000f),
var(--bg) var(--resources-images-circuitry) center center / cover;
}
body {
height: 100%;
}
praxis-shell {
display: block;
width: 100%;
height: 100%;
}
.plate {
font-size: 1.2em;
color: var(--prime);
overflow: auto;
width: 100%;
height: 100%;
padding: 1em;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
gap: min(2em, 5vh);
&::before {
content: "";
flex: 1 1 auto;
}
&::after {
content: "";
flex: 2 1 auto;
}
h1 {
font-size: 1em;
font-weight: normal;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
> strong {
font-size: 4em;
font-size: min(4em, 10vw, 10vh);
text-align: center;
text-transform: uppercase;
color: color-mix(in lch, var(--prime), white 33%);
text-shadow:
0 0 0.5em var(--prime),
0 0 1em var(--prime),
0 0 2em var(--prime),
0 0 4em var(--prime);
letter-spacing: 0.4em;
&::after {
content: "";
margin-left: -0.4em;
}
}
> small {
opacity: 0.5;
margin-left: auto;
margin-right: 1em;
}
}
.widget {
display: flex;
flex-direction: column;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
p { opacity: 0.5; }
}
.text {
opacity: 0.8;
display: flex;
flex-direction: column;
text-transform: lowercase;
text-align: center;
gap: 0.5em;
}
}
}
</style>
<meta data-commit-hash="215d0f16630db8385aae9eb44d021048914539af"/>
<meta data-version="0.0.0-3"/>
<meta name="theme-color" content="#ebb935">
<meta property="og:type" content="website">
<meta property="og:site_name" content="praxis.benevolent.games">
<meta property="og:title" content="PRAXIS">
<meta property="og:description" content="Multiplayer webgame laboratory">
<meta property="og:image" content="https://praxis.benevolent.games/assets/favicon.png">
<meta property="og:url" content="https://praxis.benevolent.games/">
<script type="importmap">
{
"imports": {
"@benev/slate/": "/node_modules/@benev/slate/",
"@benev/slate": "/node_modules/@benev/slate/x/index.js",
"@e280/authlocal/": "/node_modules/@e280/authlocal/",
"@e280/authlocal": "/node_modules/@e280/authlocal/x/exports.web.js",
"@e280/kv/": "/node_modules/@e280/kv/",
"@e280/kv": "/node_modules/@e280/kv/x/index.js",
"@e280/science/": "/node_modules/@e280/science/",
"@e280/science": "/node_modules/@e280/science/x/index.js",
"@e280/stz/": "/node_modules/@e280/stz/",
"@e280/stz": "/node_modules/@e280/stz/x/index.js",
"@lit-labs/ssr-dom-shim/": "/node_modules/@lit-labs/ssr-dom-shim/",
"@lit-labs/ssr-dom-shim": "/node_modules/@lit-labs/ssr-dom-shim/index.js",
"@lit/reactive-element/": "/node_modules/@lit/reactive-element/",
"@lit/reactive-element": "/node_modules/@lit/reactive-element/reactive-element.js",
"@noble/ed25519/": "/node_modules/@noble/ed25519/",
"@noble/ed25519": "/node_modules/@noble/ed25519/index.js",
"@types/trusted-types/": "/node_modules/@types/trusted-types/",
"abstract-level/": "/node_modules/abstract-level/",
"abstract-level": "/node_modules/abstract-level/index.js",
"base64-js/": "/node_modules/base64-js/",
"base64-js": "/node_modules/base64-js/index.js",
"browser-level/": "/node_modules/browser-level/",
"browser-level": "/node_modules/browser-level/index.js",
"buffer/": "/node_modules/buffer/",
"buffer": "/node_modules/buffer/index.js",
"classic-level/": "/node_modules/classic-level/",
"classic-level": "/node_modules/classic-level/index.js",
"ieee754/": "/node_modules/ieee754/",
"ieee754": "/node_modules/ieee754/index.js",
"is-buffer/": "/node_modules/is-buffer/",
"is-buffer": "/node_modules/is-buffer/index.js",
"level/": "/node_modules/level/",
"level": "/node_modules/level/index.js",
"level-supports/": "/node_modules/level-supports/",
"level-transcoder/": "/node_modules/level-transcoder/",
"level-transcoder": "/node_modules/level-transcoder/index.js",
"lit/": "/node_modules/lit/",
"lit": "/node_modules/lit/index.js",
"lit-element/": "/node_modules/lit-element/",
"lit-element": "/node_modules/lit-element/index.js",
"lit-html/": "/node_modules/lit-html/",
"lit-html": "/node_modules/lit-html/lit-html.js",
"maybe-combine-errors/": "/node_modules/maybe-combine-errors/",
"module-error/": "/node_modules/module-error/",
"napi-macros/": "/node_modules/napi-macros/",
"napi-macros": "/node_modules/napi-macros/index.js",
"node-gyp-build/": "/node_modules/node-gyp-build/",
"node-gyp-build": "/node_modules/node-gyp-build/index.js",
"renraku/": "/node_modules/renraku/",
"renraku": "/node_modules/renraku/x/universal.exports.js",
"ws/": "/node_modules/ws/",
"ws": "/node_modules/ws/index.js"
},
"scopes": {}
}
</script>
<script>
// determine dev mode
const params = new URLSearchParams(location.search)
const isDevMode = params.has("dev")
? params.get("dev") !== "false"
: (
location.hostname === "localhost" ||
location.hostname.startsWith("192.168.") ||
location.hostname.startsWith("10.0.") ||
location.hostname.endsWith("trycloudflare.com")
)
// create and insert a script element
function script(attributes) {
const element = document.createElement("script")
element.defer = true
for (const [key, value] of Object.entries(attributes))
element.setAttribute(key, value === true ?"" :value)
document.head.appendChild(element)
}
// launch dev module
if (isDevMode) {
document.title = "[dev] " + document.title
script({type: "module", src: "demo/main.bundle.js?v=ad280ddd"})
}
// launch prod module
else {
script({type: "module", src: "demo/main.bundle.min.js?v=3eac8023"})
}
</script>
</head>
<body>
<praxis-shell>
<section class=plate>
<h1>
<strong>Praxis</strong>
<small class=version>0.0.0-3</small>
</h1>
<div class=text>
<p>Multiplayer webgame laboratory</p>
</div>
<div class=widget>
<praxis-play></praxis-play>
<p>or <a href="https://github.com/benevolent-games/praxis#readme">learn more</a></p>
</div>
</section>
</praxis-shell>
</body>
</html>