163 lines
4.9 KiB
TypeScript
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> / © 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);
|
||
|
|
};
|