platformclient/ts/infohtml/template.ts
2024-02-17 20:24:28 +01:00

163 lines
4.9 KiB
TypeScript

import * as plugins from '../plugins.js';
import { type IHtmlInfoOptions } from './classes.infohtml.js';
export const simpleInfo = async (
smartntmlInstanceArg: plugins.smartntml.Smartntml,
optionsArg: IHtmlInfoOptions
) => {
const html = plugins.smartntml.deesElement.html;
const htmlTemplate = await plugins.smartntml.deesElement.html`
<html lang="en">
<head>
<title>${optionsArg.title}</title>
<script>
setTimeout(() => {
const redirectUrl = '${optionsArg.redirectTo}';
if (redirectUrl) {
window.location = redirectUrl;
}
}, 5000);
</script>
<style>
body {
margin: 0px;
background: #000000;
font-family: 'Roboto Mono', monospace;
min-height: 100vh;
min-width: 100vw;
border: 1px solid #e4002b;
}
* {
box-sizing: border-box;
}
.logo {
width: 150px;
padding-top: 70px;
margin: 0px auto 30px auto;
}
.content {
text-align: center;
max-width: 800px;
margin: auto;
}
.content .maintext {
margin: 10px;
color: #ffffff;
background: #333;
display: block;
border-radius: 3px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
padding: 20px;
}
.content .maintext h1 {
margin: 0px;
}
.content .addontext {
margin: 10px;
color: #ffffff;
background: #222;
display: block;
padding: 10px 15px;
border-radius: 3px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
padding: 10px;
}
.content .text h1 {
margin: 0px;
font-weight: 100;
font-size: 40px;
}
.content .text ul {
text-align: left;
}
a {
color: #ffffff;
}
.legal {
color: #fff;
position: fixed;
bottom: 0px;
width: 100vw;
text-align: center;
padding: 10px;
}
</style>
<meta
name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi"
/>
<script
src="https://browser.sentry-cdn.com/5.4.0/bundle.min.js"
crossorigin="anonymous"
></script>
<script>
const sentryDsn = '${optionsArg.sentryDsn}';
const sentryMessage = '${optionsArg.sentryMessage}';
if (optionsArg.sentryDsn && optionsArg.sentryMessage) {
Sentry.init({
dsn: '${optionsArg.sentryDsn}',
// ...
});
Sentry.setExtra('location', window.location.href);
Sentry.captureMessage('${optionsArg.sentryMessage} @ ' + window.location.host);
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="logo">
<img src="https://assetbroker.lossless.one/brandfiles/lossless/svg-minimal-bright.svg" />
</div>
<div class="content">
${(() => {
const returnArray: plugins.smartntml.deesElement.TemplateResult[] = [];
if (optionsArg.heading) {
returnArray.push(html`
<div class="maintext">
<h1>${optionsArg.heading}</h1>
${optionsArg.text}
</div>
`);
} else {
returnArray.push(html` <div class="maintext">${optionsArg.text}</div> `);
}
if (optionsArg.sentryDsn && optionsArg.sentryMessage) {
returnArray.push(
html`<div class="addontext">
We recorded this event. Should you continue to see this page against your
expectations, feel free to mail us at
<a href="mailto:hello@lossless.com">hello@lossless.com</a>
</div>`
);
}
if (optionsArg.redirectTo) {
returnArray.push(
html`<div class="addontext">
We will redirect you to ${optionsArg.redirectTo} in a few seconds.
</div>`
);
}
return returnArray;
})()}
</div>
<div class="legal">
<a href="https://lossless.com">Lossless GmbH</a> / &copy 2014-${new Date().getFullYear()}
/ <a href="https://lossless.gmbh">Legal Info</a> /
<a href="https://lossless.gmbh">Privacy Policy</a>
</div>
</body>
</html>
`;
return smartntmlInstanceArg.renderTemplateResult(htmlTemplate);
};