276 lines
13 KiB
HTML
276 lines
13 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<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"
|
|
media="(prefers-color-scheme:light)"
|
|
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/light.css"
|
|
/>
|
|
<link
|
|
rel="stylesheet"
|
|
media="(prefers-color-scheme:dark)"
|
|
href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.18.0/cdn/themes/dark.css"
|
|
onload="document.documentElement.classList.add('sl-theme-dark');"
|
|
/>
|
|
<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.json()).message);
|
|
return;
|
|
}
|
|
|
|
document.getElementById('sent-msg').innerText = (await resp.json()).message;
|
|
document.getElementById('sent').show();
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
var msg = document.getElementById('message');
|
|
|
|
msg.focus();
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<div style="width: min(500px, calc(100vw - 10px))">
|
|
<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"></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 id="sent-msg"></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}}
|
|
|
|
{{if .GARMIN_MAPSHARE_URL}}
|
|
<div class="contact">
|
|
<a href="{{.GARMIN_MAPSHARE_URL}}">
|
|
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" viewBox="0 0 16.6562 15.4141">
|
|
<g>
|
|
<rect height="15.4141" opacity="0" width="16.6562" x="0" y="0"/>
|
|
<path d="M0.882812 15.1094C1.07812 15.1094 1.28125 15.0391 1.53125 14.8984L5.50781 12.7578L9.82812 15.1797C10.1094 15.3359 10.4141 15.4141 10.7031 15.4141C10.9766 15.4141 11.25 15.3438 11.4844 15.2109L15.5703 12.8906C16.0391 12.6328 16.25 12.2578 16.25 11.7344L16.25 1.21094C16.25 0.632812 15.9297 0.3125 15.3672 0.3125C15.1719 0.3125 14.9688 0.375 14.7109 0.515625L10.5703 2.82031L6.32812 0.21875C6.08594 0.078125 5.8125 0 5.53906 0C5.25781 0 4.97656 0.078125 4.73438 0.21875L0.671875 2.53125C0.210938 2.79688 0 3.17188 0 3.69531L0 14.2031C0 14.7812 0.320312 15.1094 0.882812 15.1094ZM5 11.5156L1.47656 13.4531C1.4375 13.4688 1.39844 13.4922 1.35938 13.4922C1.29688 13.4922 1.25781 13.4453 1.25781 13.3672L1.25781 4C1.25781 3.8125 1.32812 3.67969 1.51562 3.57031L4.71875 1.69531C4.82031 1.64062 4.90625 1.59375 5 1.53906ZM6.25781 11.6406L6.25781 1.70312C6.33594 1.75 6.42969 1.79688 6.50781 1.84375L9.99219 3.96875L9.99219 13.7344C9.88281 13.6719 9.76562 13.6172 9.64844 13.5547ZM11.25 13.875L11.25 3.89062L14.7734 1.96875C14.8125 1.94531 14.8516 1.92969 14.8828 1.92969C14.9531 1.92969 14.9922 1.97656 14.9922 2.05469L14.9922 11.4219C14.9922 11.6172 14.9141 11.75 14.7344 11.8594L11.6016 13.6797C11.4844 13.75 11.3672 13.8203 11.25 13.875Z" fill="white" fill-opacity="0.85"/>
|
|
</g>
|
|
</svg>
|
|
<span id="mapshare">{{.GARMIN_MAPSHARE_URL}}</span>
|
|
</a>
|
|
<sl-copy-button from="mapshare"></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 -dm=test ${window.location.href.replace(/\/$/, '')}`;
|
|
</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>
|