<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Relay Paste</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css"
>
<style>
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background: #f5f5f7;
color: #111;
}
main {
max-width: 980px;
margin: 32px auto;
padding: 0 16px;
}
.header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.header a {
color: #111;
text-decoration: none;
font-weight: 600;
}
.meta {
color: #666;
font-size: 0.95rem;
margin: 0 0 12px;
}
.actions {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
button {
border: 1px solid #bbb;
border-radius: 8px;
background: #fff;
color: #111;
padding: 8px 12px;
cursor: pointer;
}
pre {
margin: 0;
padding: 16px;
border: 1px solid #ddd;
border-radius: 12px;
background: #fff;
overflow-x: auto;
line-height: 1.45;
}
code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 14px;
white-space: pre;
}
.error {
color: #b00020;
margin-top: 12px;
}
</style>
</head>
<body>
<main>
<div class="header">
<a href="/">New Paste</a>
<span id="status">Loading...</span>
</div>
<p class="meta" id="paste-id"></p>
<div class="actions">
<button id="copy-btn" type="button">Copy</button>
</div>
<pre><code id="paste-code"></code></pre>
<p id="error" class="error"></p>
</main>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script>
const codeEl = document.getElementById("paste-code");
const statusEl = document.getElementById("status");
const idEl = document.getElementById("paste-id");
const errorEl = document.getElementById("error");
const copyBtn = document.getElementById("copy-btn");
const pasteId = decodeURIComponent(window.location.pathname.replace(/^\/+/, ""));
idEl.textContent = pasteId ? ("Paste ID: " + pasteId) : "";
copyBtn.addEventListener("click", async () => {
try {
await navigator.clipboard.writeText(codeEl.textContent || "");
copyBtn.textContent = "Copied";
setTimeout(() => {
copyBtn.textContent = "Copy";
}, 1200);
} catch (_err) {
errorEl.textContent = "Unable to copy to clipboard.";
}
});
async function loadPaste() {
try {
const response = await fetch("/api/paste/" + encodeURIComponent(pasteId));
if (!response.ok) {
statusEl.textContent = "Not found";
errorEl.textContent = await response.text();
return;
}
const data = await response.json();
const content = String(data.content || "");
codeEl.textContent = content;
if (window.hljs) {
window.hljs.highlightElement(codeEl);
}
statusEl.textContent = "Ready";
} catch (_err) {
statusEl.textContent = "Error";
errorEl.textContent = "Failed to load paste.";
}
}
loadPaste();
</script>
</body>
</html>