244 lines
11 KiB
HTML
244 lines
11 KiB
HTML
<!doctype html>
|
|
<html class="sl-theme-dark">
|
|
<head>
|
|
<style>
|
|
:not(:defined) {
|
|
visibility: hidden;
|
|
}
|
|
|
|
body {
|
|
font: 12px var(--sl-font-sans);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
a {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.contact {
|
|
margin-bottom: 5px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
align-items: center;
|
|
}
|
|
|
|
.contact svg {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.contact span {
|
|
text-wrap: nowrap;
|
|
}
|
|
|
|
sl-copy-button {
|
|
color: var(--sl-color-neutral-200);
|
|
}
|
|
</style>
|
|
<title>Page {{.SHORT_NAME}}</title>
|
|
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHZpZXdCb3g9IjAgMCAxMDIuMzQ0IDkzLjMxMDUiPgogPGc+CiAgPHJlY3QgaGVpZ2h0PSI5My4zMTA1IiBvcGFjaXR5PSIwIiB3aWR0aD0iMTAyLjM0NCIgeD0iMCIgeT0iMCIvPgogIDxwYXRoIGQ9Ik0xMy4zMzAxIDkyLjc3MzRMODkuMDEzNyA5Mi43NzM0Qzk3LjMxNDUgOTIuNzczNCAxMDIuMzQ0IDg3LjAxMTcgMTAyLjM0NCA3OS41NDFDMTAyLjM0NCA3Ny4yNDYxIDEwMS42NiA3NC44NTM1IDEwMC40MzkgNzIuNzA1MUw2Mi41NDg4IDYuNjg5NDVDNjAuMDA5OCAyLjI0NjA5IDU1LjY2NDEgMCA1MS4xNzE5IDBDNDYuNjc5NyAwIDQyLjI4NTIgMi4yNDYwOSAzOS43OTQ5IDYuNjg5NDVMMS45MDQzIDcyLjcwNTFDMC41ODU5MzggNzQuOTAyMyAwIDc3LjI0NjEgMCA3OS41NDFDMCA4Ny4wMTE3IDUuMDI5MyA5Mi43NzM0IDEzLjMzMDEgOTIuNzczNFoiIGZpbGw9IiNmZjQ1M2EiLz4KICA8cGF0aCBkPSJNNTEuMjIwNyA2MC4xNTYyQzQ4LjY4MTYgNjAuMTU2MiA0Ny4yNjU2IDU4LjY5MTQgNDcuMjE2OCA1Ni4xMDM1TDQ2LjU4MiAyOS41NDFDNDYuNTMzMiAyNi45NTMxIDQ4LjQzNzUgMjUuMDk3NyA1MS4xNzE5IDI1LjA5NzdDNTMuODA4NiAyNS4wOTc3IDU1Ljg1OTQgMjcuMDAyIDU1LjgxMDUgMjkuNTg5OEw1NS4wNzgxIDU2LjEwMzVDNTUuMDI5MyA1OC43NDAyIDUzLjYxMzMgNjAuMTU2MiA1MS4yMjA3IDYwLjE1NjJaTTUxLjIyMDcgNzYuNTEzN0M0OC4yOTEgNzYuNTEzNyA0NS43NTIgNzQuMTY5OSA0NS43NTIgNzEuMjg5MUM0NS43NTIgNjguMzU5NCA0OC4yNDIyIDY2LjAxNTYgNTEuMjIwNyA2Ni4wMTU2QzU0LjE1MDQgNjYuMDE1NiA1Ni42NDA2IDY4LjMxMDUgNTYuNjQwNiA3MS4yODkxQzU2LjY0MDYgNzQuMjE4OCA1NC4xMDE2IDc2LjUxMzcgNTEuMjIwNyA3Ni41MTM3WiIgZmlsbD0iYmxhY2siLz4KIDwvZz4KPC9zdmc+Cg==" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/dark.css" />
|
|
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/shoelace-autoloader.js"></script>
|
|
<script>
|
|
function clearAlerts() {
|
|
document.getElementById('sent').hide();
|
|
document.getElementById('err').hide();
|
|
}
|
|
|
|
function error(err1, err2) {
|
|
clearAlerts();
|
|
|
|
document.getElementById('err1').innerText = err1;
|
|
document.getElementById('err2').innerText = err2;
|
|
document.getElementById('err').show();
|
|
}
|
|
|
|
async function page() {
|
|
const m = document.getElementById('message').value;
|
|
|
|
if (m == '') {
|
|
error('Please fill in Message', '');
|
|
return;
|
|
}
|
|
|
|
clearAlerts();
|
|
|
|
const params = new URLSearchParams({
|
|
m: m,
|
|
});
|
|
|
|
const resp = await fetch(
|
|
'.',
|
|
{
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/x-www-form-urlencoded',
|
|
},
|
|
body: params.toString(),
|
|
},
|
|
)
|
|
|
|
if (!resp.ok) {
|
|
error('Failed to send page', await resp.text());
|
|
return;
|
|
}
|
|
|
|
document.getElementById('sent').show();
|
|
}
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div style="width: min(500px, 100vw)">
|
|
<sl-tab-group>
|
|
<sl-tab slot="nav" panel="page">Page</sl-tab>
|
|
<sl-tab slot="nav" panel="contact">Contact</sl-tab>
|
|
|
|
<sl-tab-panel name="page">
|
|
<sl-textarea id="message" placeholder="Message" oninput="clearAlerts()"></sl-textarea>
|
|
<br />
|
|
<div style="text-align: center">
|
|
<sl-button type="submit" variant="danger" onclick="page()">Page {{.SHORT_NAME}}</sl-button>
|
|
</div>
|
|
<br />
|
|
<sl-alert id="err" variant="danger">
|
|
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
|
|
<strong id="err1"></strong><br />
|
|
<span id="err2"></span>
|
|
</sl-alert>
|
|
<sl-alert id="sent" variant="success">
|
|
<sl-icon slot="icon" name="check2-circle"></sl-icon>
|
|
<strong>Page sent</strong>
|
|
</sl-alert>
|
|
</sl-tab-panel>
|
|
<sl-tab-panel name="contact" style="text-align: center">
|
|
<sl-card class="card-basic" style="font: 16px var(--sl-font-mono); text-align: left">
|
|
|
|
{{if .CONTACT_PHONE}}
|
|
<div class="contact">
|
|
<a href="tel:{{.CONTACT_PHONE | replaceAll " " "" | replaceAll "-" ""}}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M3.654 1.328a.678.678 0 0 0-1.015-.063L1.605 2.3c-.483.484-.661 1.169-.45 1.77a17.6 17.6 0 0 0 4.168 6.608 17.6 17.6 0 0 0 6.608 4.168c.601.211 1.286.033 1.77-.45l1.034-1.034a.678.678 0 0 0-.063-1.015l-2.307-1.794a.68.68 0 0 0-.58-.122l-2.19.547a1.75 1.75 0 0 1-1.657-.459L5.482 8.062a1.75 1.75 0 0 1-.46-1.657l.548-2.19a.68.68 0 0 0-.122-.58zM1.884.511a1.745 1.745 0 0 1 2.612.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z" />
|
|
</svg>
|
|
<span id="phone">{{.CONTACT_PHONE}}</span>
|
|
</a>
|
|
<sl-copy-button from="phone"></sl-copy-button>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .CONTACT_SMS}}
|
|
<div class="contact">
|
|
<a href="sms:{{.CONTACT_SMS | replaceAll " " "" | replaceAll "-" ""}}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H4.414A2 2 0 0 0 3 11.586l-2 2V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12.793a.5.5 0 0 0 .854.353l2.853-2.853A1 1 0 0 1 4.414 12H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z" />
|
|
</svg>
|
|
<span id="sms">{{.CONTACT_SMS}}</span>
|
|
</a>
|
|
<sl-copy-button from="sms"></sl-copy-button>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .CONTACT_IMESSAGE}}
|
|
<div class="contact">
|
|
<a href="imessage:{{.CONTACT_IMESSAGE | replaceAll " " "" | replaceAll "-" ""}}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M2.678 11.894a1 1 0 0 1 .287.801 11 11 0 0 1-.398 2c1.395-.323 2.247-.697 2.634-.893a1 1 0 0 1 .71-.074A8 8 0 0 0 8 14c3.996 0 7-2.807 7-6s-3.004-6-7-6-7 2.808-7 6c0 1.468.617 2.83 1.678 3.894m-.493 3.905a22 22 0 0 1-.713.129c-.2.032-.352-.176-.273-.362a10 10 0 0 0 .244-.637l.003-.01c.248-.72.45-1.548.524-2.319C.743 11.37 0 9.76 0 8c0-3.866 3.582-7 8-7s8 3.134 8 7-3.582 7-8 7a9 9 0 0 1-2.347-.306c-.52.263-1.639.742-3.468 1.105" />
|
|
</svg>
|
|
<span id="imessage">{{.CONTACT_IMESSAGE}}</span>
|
|
</a>
|
|
<sl-copy-button from="imessage"></sl-copy-button>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .CONTACT_WHATSAPP}}
|
|
<div class="contact">
|
|
<a href="https://wa.me/{{.CONTACT_WHATSAPP | replaceAll " " "" | replaceAll "-" "" | replaceAll "+" ""}}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
|
|
<path d="M13.601 2.326A7.85 7.85 0 0 0 7.994 0C3.627 0 .068 3.558.064 7.926c0 1.399.366 2.76 1.057 3.965L0 16l4.204-1.102a7.9 7.9 0 0 0 3.79.965h.004c4.368 0 7.926-3.558 7.93-7.93A7.9 7.9 0 0 0 13.6 2.326zM7.994 14.521a6.6 6.6 0 0 1-3.356-.92l-.24-.144-2.494.654.666-2.433-.156-.251a6.56 6.56 0 0 1-1.007-3.505c0-3.626 2.957-6.584 6.591-6.584a6.56 6.56 0 0 1 4.66 1.931 6.56 6.56 0 0 1 1.928 4.66c-.004 3.639-2.961 6.592-6.592 6.592m3.615-4.934c-.197-.099-1.17-.578-1.353-.646-.182-.065-.315-.099-.445.099-.133.197-.513.646-.627.775-.114.133-.232.148-.43.05-.197-.1-.836-.308-1.592-.985-.59-.525-.985-1.175-1.103-1.372-.114-.198-.011-.304.088-.403.087-.088.197-.232.296-.346.1-.114.133-.198.198-.33.065-.134.034-.248-.015-.347-.05-.099-.445-1.076-.612-1.47-.16-.389-.323-.335-.445-.34-.114-.007-.247-.007-.38-.007a.73.73 0 0 0-.529.247c-.182.198-.691.677-.691 1.654s.71 1.916.81 2.049c.098.133 1.394 2.132 3.383 2.992.47.205.84.326 1.129.418.475.152.904.129 1.246.08.38-.058 1.171-.48 1.338-.943.164-.464.164-.86.114-.943-.049-.084-.182-.133-.38-.232" />
|
|
</svg>
|
|
<span id="whatsapp">{{.CONTACT_WHATSAPP}}</span>
|
|
</a>
|
|
<sl-copy-button from="whatsapp"></sl-copy-button>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{if .CONTACT_PAGE_EMAIL}}
|
|
<div class="contact">
|
|
<a href="mailto:{{.CONTACT_PAGE_EMAIL}}">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-exclamation" viewBox="0 0 16 16">
|
|
<path d="M2 2a2 2 0 0 0-2 2v8.01A2 2 0 0 0 2 14h5.5a.5.5 0 0 0 0-1H2a1 1 0 0 1-.966-.741l5.64-3.471L8 9.583l7-4.2V8.5a.5.5 0 0 0 1 0V4a2 2 0 0 0-2-2zm3.708 6.208L1 11.105V5.383zM1 4.217V4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v.217l-7 4.2z"/>
|
|
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m.5-5v1.5a.5.5 0 0 1-1 0V11a.5.5 0 0 1 1 0m0 3a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
|
|
</svg>
|
|
<span id="page-email">{{.CONTACT_PAGE_EMAIL}}</span>
|
|
</a>
|
|
<sl-copy-button from="page-email"></sl-copy-button>
|
|
</div>
|
|
{{end}}
|
|
|
|
<div class="contact">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-terminal" viewBox="0 0 16 16">
|
|
<path d="M6 9a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3A.5.5 0 0 1 6 9M3.854 4.146a.5.5 0 1 0-.708.708L4.793 6.5 3.146 8.146a.5.5 0 1 0 .708.708l2-2a.5.5 0 0 0 0-.708z"/>
|
|
<path d="M2 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1z"/>
|
|
</svg>
|
|
<span id="curl"></span>
|
|
<sl-copy-button from="curl"></sl-copy-button>
|
|
<script>
|
|
document.getElementById('curl').innerText = `curl -d 'm=test' ${window.location.href}`;
|
|
</script>
|
|
</div>
|
|
|
|
<div class="contact" style="margin-top: 15px; justify-content: center;">
|
|
<a id="qr-a">
|
|
<sl-qr-code id="qr" background="#242428" fill="white" size="300"></sl-qr-code>
|
|
</a>
|
|
<script>
|
|
const qr = `
|
|
BEGIN:VCARD
|
|
VERSION:4.0
|
|
|
|
{{if .CONTACT_NAME}}
|
|
FN:{{.CONTACT_NAME}}
|
|
{{end}}
|
|
|
|
{{if .CONTACT_PHONE}}
|
|
TEL;TYPE=voice:{{.CONTACT_PHONE}}
|
|
URL:tel:{{.CONTACT_PHONE | replaceAll " " "" | replaceAll "-" ""}}
|
|
{{end}}
|
|
|
|
{{if .CONTACT_SMS}}
|
|
TEL;TYPE=text:{{.CONTACT_SMS}}
|
|
URL:sms:{{.CONTACT_SMS | replaceAll " " "" | replaceAll "-" ""}}
|
|
{{end}}
|
|
|
|
{{if .CONTACT_IMESSAGE}}
|
|
URL:imessage:{{.CONTACT_IMESSAGE | replaceAll " " "" | replaceAll "-" ""}}
|
|
{{end}}
|
|
|
|
{{if .CONTACT_WHATSAPP}}
|
|
URL:https://wa.me/{{.CONTACT_WHATSAPP | replaceAll " " "" | replaceAll "-" "" | replaceAll "+" ""}}
|
|
{{end}}
|
|
|
|
{{if .CONTACT_PAGE_EMAIL}}
|
|
EMAIL:{{.CONTACT_PAGE_EMAIL}}
|
|
URL:mailto:{{.CONTACT_PAGE_EMAIL}}
|
|
{{end}}
|
|
|
|
END:VCARD
|
|
`;
|
|
document.getElementById('qr').value = qr;
|
|
document.getElementById('qr-a').href = `data:text/vcard;base64,${btoa(qr)}`;
|
|
</script>
|
|
</div>
|
|
</sl-card>
|
|
</sl-tab-panel>
|
|
</sl-tab-group>
|
|
</div>
|
|
</body>
|
|
</html>
|