-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
110 lines (102 loc) · 3.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Telltail</title>
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<!-- styles generated by dropping this html code into https://play.tailwindcss.com/ -->
<link rel="stylesheet" href="/static/style.css" />
<link rel="preconnect" href="https://rsms.me/" />
<link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
<style>
:root {
font-family: "Inter", sans-serif;
}
@supports (font-variation-settings: normal) {
:root {
font-family: "Inter var", sans-serif;
}
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto px-3 py-6">
<!-- <img src="/static/wifi.svg" alt="Logo" /> -->
<!-- remove wifi.svg from static/ if you're removing it from here too -->
<h1 class="font-bold text-4xl mb-4">Telltail</h1>
<input
type="text"
value="{{.Text}}"
id="text"
class="px-2 py-1 rounded-md border-2"
/>
<button
type="button"
id="copy"
class="ml-2 px-2 py-1 bg-sky-700 text-white rounded-md shadow"
>
Copy
</button>
<a
id="open-link"
href=""
class="ml-2 text-sky-900 hidden"
target="_blank"
rel="noreferrer"
>
<span class="underline">Open link</span>↗
</a>
</div>
<script type="text/javascript">
function debounce(func, timeout = 300) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => {
func.apply(this, args);
}, timeout);
};
}
const textEl = document.querySelector("#text");
const openLinkEl = document.querySelector("#open-link");
// check how browsers handle opening multiple links simultaneously
// if it fails:
// - split('\n') and only open the first link, or
// - check if ananto's linkify can be used to recognize and list links
function checkAndShowOpenLinkButton(text) {
try {
new URL(textEl.value);
openLinkEl.href = textEl.value;
openLinkEl.classList.remove("hidden");
} catch {
openLinkEl.href = "";
openLinkEl.classList.add("hidden");
}
}
checkAndShowOpenLinkButton();
textEl.addEventListener(
"input",
debounce((ev) => {
const text = ev.target.value;
if (text === "") return;
fetch("/set", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({
text,
device: "unknown",
}),
});
checkAndShowOpenLinkButton();
})
);
document.querySelector("#copy").addEventListener("click", () => {
navigator.clipboard.writeText(textEl.value);
});
</script>
</body>
</html>