222 lines
12 KiB
HTML
222 lines
12 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
:not(:defined) {
|
|
visibility: hidden;
|
|
}
|
|
|
|
body {
|
|
font: 12px var(--sl-font-mono);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
sl-card {
|
|
width: min(500px, calc(100vw - 10px));
|
|
margin-bottom: 10px;
|
|
--padding: 10px;
|
|
}
|
|
|
|
br + sl-tag[pill] {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
sl-tag::part(base) {
|
|
user-select: text;
|
|
}
|
|
|
|
a {
|
|
color: var(--sl-color-primary-900);
|
|
text-decoration: none;
|
|
}
|
|
</style>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMAAAADACAYAAABS3GwHAAAAAXNSR0IArs4c6QAAAAlwSFlzAAAuIwAALiMBeKU/dgAAA7VpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IlhNUCBDb3JlIDYuMC4wIj4KICAgPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICAgICAgPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIKICAgICAgICAgICAgeG1sbnM6ZXhpZj0iaHR0cDovL25zLmFkb2JlLmNvbS9leGlmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+MTkyPC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjE5MjwvZXhpZjpQaXhlbFhEaW1lbnNpb24+CiAgICAgICAgIDx4bXA6Q3JlYXRvclRvb2w+UGl4ZWxtYXRvciBQcm8gMy42LjEzPC94bXA6Q3JlYXRvclRvb2w+CiAgICAgICAgIDx4bXA6Q3JlYXRlRGF0ZT4yMDI0LTEyLTA0VDE2OjMwOjE5LTA4OjAwPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNZXRhZGF0YURhdGU+MjAyNC0xMi0wNFQxNjozMToxNy0wODowMDwveG1wOk1ldGFkYXRhRGF0ZT4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+MzAwMDAwMC8xMDAwMDwvdGlmZjpYUmVzb2x1dGlvbj4KICAgICAgICAgPHRpZmY6UmVzb2x1dGlvblVuaXQ+MjwvdGlmZjpSZXNvbHV0aW9uVW5pdD4KICAgICAgICAgPHRpZmY6WVJlc29sdXRpb24+MzAwMDAwMC8x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" />
|
|
<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>
|
|
</head>
|
|
<body>
|
|
<div style="width: min(500px, calc(100vw - 10px))">
|
|
<sl-tab-group>
|
|
<sl-tab slot="nav" panel="share">Share</sl-tab>
|
|
<sl-tab slot="nav" panel="copy">Copy</sl-tab>
|
|
<sl-tab slot="nav" panel="custom">Custom</sl-tab>
|
|
<sl-tab slot="nav" panel="browser">Browser</sl-tab>
|
|
|
|
<sl-tab-panel name="share">
|
|
<sl-card class="card-basic">
|
|
Receive
|
|
<sl-tag size="small" pill variant="primary">URLs</sl-tag>
|
|
input from
|
|
<sl-tag size="small" pill variant="primary">Share Sheet</sl-tag>
|
|
<br />
|
|
<br />
|
|
If there's no input:
|
|
<br />
|
|
<sl-tag size="small" pill variant="primary">Get Clipboard</sl-tag>
|
|
</sl-card>
|
|
|
|
<sl-card class="card-basic">
|
|
Get contents of
|
|
<sl-tag size="small" pill variant="primary">https://{{ .writeHost }}/</sl-tag>
|
|
|
|
<sl-divider></sl-divider>
|
|
|
|
Method:
|
|
<sl-tag size="small" pill variant="primary">POST</sl-tag>
|
|
<br />
|
|
|
|
Request Body:
|
|
<sl-tag size="small" pill variant="primary">JSON</sl-tag>
|
|
<br />
|
|
|
|
Key:
|
|
<sl-tag size="small" pill variant="primary">long</sl-tag>
|
|
<br />
|
|
|
|
Type:
|
|
<sl-tag size="small" pill variant="primary">Text</sl-tag>
|
|
<br />
|
|
|
|
Value:
|
|
<sl-tag size="small" pill variant="primary">Shortcut Input</sl-tag>
|
|
</sl-card>
|
|
|
|
<sl-card class="card-basic">
|
|
Get
|
|
<sl-tag size="small" pill variant="primary">Value</sl-tag>
|
|
for
|
|
<sl-tag size="small" pill variant="primary">url</sl-tag>
|
|
in
|
|
<sl-tag size="small" pill variant="primary">Contents of URL</sl-tag>
|
|
</sl-card>
|
|
|
|
<sl-card class="card-basic">
|
|
Share
|
|
<sl-tag size="small" pill variant="primary">Dictionary Value</sl-tag>
|
|
</sl-card>
|
|
</sl-tab-panel>
|
|
|
|
<sl-tab-panel name="copy">
|
|
<sl-card class="card-basic">
|
|
Receive
|
|
<sl-tag size="small" pill variant="primary">URLs</sl-tag>
|
|
input from
|
|
<sl-tag size="small" pill variant="primary">Share Sheet</sl-tag>
|
|
<br />
|
|
<br />
|
|
If there's no input:
|
|
<br />
|
|
<sl-tag size="small" pill variant="primary">Get Clipboard</sl-tag>
|
|
</sl-card>
|
|
|
|
<sl-card class="card-basic">
|
|
Get contents of
|
|
<sl-tag size="small" pill variant="primary">https://{{ .writeHost }}/</sl-tag>
|
|
|
|
<sl-divider></sl-divider>
|
|
|
|
Method:
|
|
<sl-tag size="small" pill variant="primary">POST</sl-tag>
|
|
<br />
|
|
|
|
Request Body:
|
|
<sl-tag size="small" pill variant="primary">JSON</sl-tag>
|
|
<br />
|
|
|
|
Key:
|
|
<sl-tag size="small" pill variant="primary">long</sl-tag>
|
|
<br />
|
|
|
|
Type:
|
|
<sl-tag size="small" pill variant="primary">Text</sl-tag>
|
|
<br />
|
|
|
|
Value:
|
|
<sl-tag size="small" pill variant="primary">Shortcut Input</sl-tag>
|
|
</sl-card>
|
|
|
|
<sl-card class="card-basic">
|
|
Get
|
|
<sl-tag size="small" pill variant="primary">Value</sl-tag>
|
|
for
|
|
<sl-tag size="small" pill variant="primary">url</sl-tag>
|
|
in
|
|
<sl-tag size="small" pill variant="primary">Contents of URL</sl-tag>
|
|
</sl-card>
|
|
|
|
<sl-card class="card-basic">
|
|
Copy
|
|
<sl-tag size="small" pill variant="primary">Dictionary Value</sl-tag>
|
|
to clipboard
|
|
</sl-card>
|
|
</sl-tab-panel>
|
|
|
|
<sl-tab-panel name="custom">
|
|
<sl-card class="card-basic">
|
|
Receive
|
|
<sl-tag size="small" pill variant="primary">URLs</sl-tag>
|
|
input from
|
|
<sl-tag size="small" pill variant="primary">Share Sheet</sl-tag>
|
|
<br />
|
|
<br />
|
|
If there's no input:
|
|
<br />
|
|
<sl-tag size="small" pill variant="primary">Get Clipboard</sl-tag>
|
|
</sl-card>
|
|
|
|
<sl-card class="card-basic">
|
|
URL
|
|
<sl-tag size="small" pill variant="primary">Encode</sl-tag>
|
|
<sl-tag size="small" pill variant="primary">Shortcut Input</sl-tag>
|
|
</sl-card>
|
|
|
|
<sl-card class="card-basic">
|
|
Combine
|
|
<sl-tag size="small" pill variant="primary">https://{{ .writeHost }}/?long=</sl-tag>
|
|
<sl-tag size="small" pill variant="primary">URL Encoded Text</sl-tag>
|
|
<sl-tag size="small" pill variant="neutral">+</sl-tag>
|
|
with
|
|
<sl-tag size="small" pill variant="primary">Custom</sl-tag>
|
|
<sl-tag size="small" pill variant="neutral">Text</sl-tag>
|
|
</sl-card>
|
|
|
|
<sl-card class="card-basic">
|
|
Open
|
|
<sl-tag size="small" pill variant="primary">Combined Text</sl-tag>
|
|
</sl-card>
|
|
</sl-tab-panel>
|
|
|
|
<sl-tab-panel name="browser">
|
|
<sl-card class="card-basic">
|
|
Drag link to bookmark bar:
|
|
<br />
|
|
<br />
|
|
|
|
<sl-tag pill variant="primary">
|
|
<a href="javascript:(async function() {
|
|
const params = new URLSearchParams();
|
|
params.set('long', location.href);
|
|
|
|
window.open(`https://{{ .writeHost }}/?${params.toString()}`);
|
|
})();">{{ .readHost }}</a>
|
|
</sl-tag>
|
|
</sl-card>
|
|
</sl-tab-panel>
|
|
</sl-tab-group>
|
|
</div>
|
|
</body>
|
|
</html>
|