231 lines
8.8 KiB
HTML
231 lines
8.8 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="_favicon.png" />
|
|
<link rel="apple-touch-icon" href="_favicon.png" />
|
|
<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 slot="nav" panel="tools">Tools</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);
|
|
params.set('title', document.title);
|
|
|
|
window.open(`https://{{ .writeHost }}/?${params.toString()}`);
|
|
})();">{{ .readHost }}</a>
|
|
</sl-tag>
|
|
</sl-card>
|
|
</sl-tab-panel>
|
|
|
|
<sl-tab-panel name="tools">
|
|
<sl-card class="card-basic" style="text-align: center;">
|
|
<a href="_list"><sl-button variant="primary">List</sl-button></a>
|
|
</sl-card>
|
|
</sl-tab-panel>
|
|
</sl-tab-group>
|
|
</div>
|
|
</body>
|
|
</html>
|