gluon/gluworld/index.html
2023-01-01 13:24:47 +00:00

136 lines
3.4 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="icon" href="https://raw.githubusercontent.com/OpenAsar/gluon/main/assets/logo.png">
<title>Gluworld</title>
</head>
<body>
<h1 id="main">
Gluon <code id="gluon_version"></code> <br>
<span id="built_with">built with <code id="builder"></code> <br></span>
running on <code id="product"></code>
</h1>
<div id="versions">
<h2>
<span id="engine_name"></span> <br>
<code id="browser_version"></code> <br>
<p><span id="js_engine_name"></span> <code id="browser_v8"></code></p>
</h2>
<h2 id="build">
Build Size <br>
<code id="build_size"></code>
</h2>
<h2>
Bun <br>
<code id="bun_version"></code> <br>
<p>WebKit <code id="bun_webkit"></code></p>
</h2>
</div>
<style>
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700;800;900');
html, body {
background: #101418;
color: #fff;
font-family: Inter, sans-serif;
margin: 0;
width: 100%;
height: 100%;
}
body {
box-sizing: border-box;
padding: 5vw 5vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
}
h1, h2, code {
text-align: center;
margin: 0;
}
h1 {
font-weight: 900;
font-size: 34px;
}
h1 > code, h2 > p > code {
margin-left: 8px;
}
h2 {
font-weight: 800;
font-size: 28px;
}
h2 > p, h2 > p > code {
font-weight: 600;
font-size: 18px;
color: #bbb;
}
code {
font-size: 100%;
font-family: Fira Code;
color: #ddd;
}
#versions {
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
}
#build, #built_with {
display: none;
}
</style>
<script> (async () => {
await new Promise(res => {
const check = () => {
if (!window.Gluon) return setTimeout(check, 100);
res();
};
check();
});
browser_version.textContent = Gluon.versions.browser;
bun_version.textContent = `${Gluon.versions.embedded.bun ? 'Embed' : 'System'} ${Gluon.versions.bun}`;
gluon_version.textContent = Gluon.versions.gluon;
builder.textContent = Gluon.versions.builder;
product.textContent = Gluon.versions.product;
bun_webkit.textContent = Gluon.versions.js.bun;
browser_v8.textContent = Gluon.versions.js.browser;
if (Gluon.versions.builder !== 'nothing') {
build.style.display = 'block';
built_with.style.display = 'block';
// main.innerHTML = main.innerHTML.replace(`built with <code id="builder">nothing</code> <br>`, '');
}
engine_name.textContent = Gluon.versions.browserType === 'firefox' ? 'Firefox' : 'Chromium';
js_engine_name.textContent = Gluon.versions.browserType === 'firefox' ? 'SpiderMonkey' : 'V8';
Gluon.ipc.on('build size', size => {
const kb = size / 1024;
const mb = kb / 1024;
build_size.textContent = mb > 0.1 ? `${mb.toFixed(2)}MB` : `${kb.toFixed(0)}KB`;
});
})();
</script>
</body>
</html>