gru/rustpad
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Mateusz Gruszczyński
2026-07-17 15:29:08 +02:00
commit 771494671b
35 changed files with 5020 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/error.html
+24
View File
@@ -0,0 +1,24 @@
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="dark">
<meta name="robots" content="noindex">
<title>__ERROR_TITLE__ · RustPad</title>
<link rel="stylesheet" href="/assets/styles.css?v=__ASSET_VERSION__">
</head>
<body>
<main class="error-page">
<section class="error-card" aria-labelledby="error-title">
<p class="error-code">__ERROR_CODE__</p>
<h1 id="error-title">__ERROR_TITLE__</h1>
<p>__ERROR_MESSAGE__</p>
<div class="error-actions">
<a class="primary-button inline-button" href="__PRIMARY_URL__">__PRIMARY_LABEL__</a>
<button class="secondary-button inline-button" type="button" onclick="history.back()">Wstecz</button>
</div>
</section>
</main>
</body>
</html>
static/home.html
+63
View File
@@ -0,0 +1,63 @@
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="dark">
<title>RustPad</title>
<link rel="stylesheet" href="/assets/styles.css?v=__ASSET_VERSION__">
<script type="module" src="/assets/js/home.js?v=__ASSET_VERSION__"></script>
</head>
<body>
<header class="site-header"><a class="brand" href="/">RustPad</a></header>
<main class="home-layout home-layout--wide">
<section class="home-intro">
<h1>Nowa przestrzeń</h1>
<p>Utwórz szybką notatkę albo workspace z wieloma notatkami.</p>
</section>
<div class="create-grid">
<section class="panel create-panel">
<div class="create-panel__heading">
<h2>Notatka</h2>
<p>Jeden dokument pod własnym linkiem.</p>
</div>
<form id="pad-form" novalidate>
<div class="field">
<label for="pad-name">Nazwa notatki</label>
<input id="pad-name" maxlength="80" required autocomplete="off" placeholder="Notatki ze spotkania">
<div class="field-meta"><span id="pad-slug-preview">/p/notatki-ze-spotkania</span><span id="pad-name-count">0/80</span></div>
</div>
<div class="field">
<div class="label-row"><label for="pad-password">Hasło</label><span>opcjonalne, min. 8 znaków</span></div>
<div class="password-input"><input id="pad-password" type="password" maxlength="128" autocomplete="new-password" placeholder="Hasło notatki"><button class="text-button password-toggle" type="button" data-target="pad-password">Pokaż</button></div>
</div>
<p id="pad-error" class="form-message error" role="alert"></p>
<button id="pad-button" class="primary-button" type="submit">Utwórz notatkę</button>
</form>
</section>
<section class="panel create-panel">
<div class="create-panel__heading">
<h2>Workspace</h2>
<p>Przestrzeń z listą wielu notatek.</p>
</div>
<form id="workspace-form" novalidate>
<div class="field">
<label for="workspace-name">Nazwa workspace</label>
<input id="workspace-name" maxlength="80" required autocomplete="off" placeholder="Mój projekt">
<div class="field-meta"><span id="workspace-slug-preview">/w/moj-projekt</span><span id="workspace-name-count">0/80</span></div>
<small>Krótka lub zajęta nazwa otrzyma losowy sufiks.</small>
</div>
<div class="field">
<div class="label-row"><label for="workspace-password">Hasło</label><span>opcjonalne, min. 8 znaków</span></div>
<div class="password-input"><input id="workspace-password" type="password" maxlength="128" autocomplete="new-password" placeholder="Hasło workspace"><button class="text-button password-toggle" type="button" data-target="workspace-password">Pokaż</button></div>
</div>
<p id="workspace-error" class="form-message error" role="alert"></p>
<button id="workspace-button" class="primary-button" type="submit">Utwórz workspace</button>
</form>
</section>
</div>
</main>
</body>
</html>
static/js/api.js
+19
View File
@@ -0,0 +1,19 @@
export async function api(path, options = {}) {
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 12000);
try {
const response = await fetch(path, {
...options,
headers: { "content-type": "application/json", ...(options.headers || {}) },
signal: controller.signal,
});
const data = await response.json().catch(() => ({}));
if (!response.ok) throw new Error(data.error || `Błąd ${response.status}`);
return data;
} catch (error) {
if (error.name === "AbortError") throw new Error("Przekroczono czas odpowiedzi serwera");
throw error;
} finally {
clearTimeout(timeout);
}
}
static/js/clipboard.js
+16
View File
@@ -0,0 +1,16 @@
export async function copyText(text) {
if (navigator.clipboard && window.isSecureContext) {
await navigator.clipboard.writeText(text);
return;
}
const input = document.createElement("textarea");
input.value = text;
input.setAttribute("readonly", "");
input.style.position = "fixed";
input.style.opacity = "0";
document.body.appendChild(input);
input.select();
const copied = document.execCommand("copy");
input.remove();
if (!copied) throw new Error("Nie udało się skopiować linku");
}
static/js/editor-format.js
+23
View File
@@ -0,0 +1,23 @@
export function applyFormat(editor, format) {
const wrap = (before, after = before, placeholder = "tekst") => {
const start = editor.selectionStart, end = editor.selectionEnd;
const selected = editor.value.slice(start, end) || placeholder;
editor.setRangeText(before + selected + after, start, end, "select");
};
const prefix = (value) => {
const start = editor.selectionStart, end = editor.selectionEnd;
const lineStart = editor.value.lastIndexOf("\n", start - 1) + 1;
const selected = editor.value.slice(lineStart, end);
editor.setRangeText(selected.split("\n").map((line, index) => typeof value === "function" ? value(index) + line : value + line).join("\n"), lineStart, end, "select");
};
if (format === "bold") wrap("**");
if (format === "italic") wrap("*");
if (format === "strike") wrap("~~");
if (format === "heading") prefix("## ");
if (format === "bullet") prefix("- ");
if (format === "number") prefix((index) => `${index + 1}. `);
if (format === "quote") prefix("> ");
if (format === "link") wrap("[", "](https://)", "opis linku");
editor.focus();
editor.dispatchEvent(new Event("input", { bubbles: true }));
}
static/js/home.js
+76
View File
@@ -0,0 +1,76 @@
import { api } from "./api.js?v=0.6.0";
function slugify(value, fallback) {
return value.toLowerCase().normalize("NFKD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || fallback;
}
function bindPreview(inputId, previewId, countId, prefix, fallback) {
const input = document.querySelector(inputId);
const preview = document.querySelector(previewId);
const count = document.querySelector(countId);
const update = () => {
count.textContent = `${input.value.length}/80`;
preview.textContent = `${prefix}${slugify(input.value, fallback)}`;
};
input.addEventListener("input", update);
update();
}
function setBusy(button, busy, idleText, busyText) {
button.disabled = busy;
button.textContent = busy ? busyText : idleText;
}
bindPreview("#pad-name", "#pad-slug-preview", "#pad-name-count", "/p/", "notatka");
bindPreview("#workspace-name", "#workspace-slug-preview", "#workspace-name-count", "/w/", "workspace");
document.querySelectorAll(".password-toggle").forEach((button) => {
button.addEventListener("click", () => {
const input = document.getElementById(button.dataset.target);
const show = input.type === "password";
input.type = show ? "text" : "password";
button.textContent = show ? "Ukryj" : "Pokaż";
});
});
document.querySelector("#pad-form").addEventListener("submit", async (event) => {
event.preventDefault();
const name = document.querySelector("#pad-name");
const password = document.querySelector("#pad-password");
const button = document.querySelector("#pad-button");
const error = document.querySelector("#pad-error");
error.textContent = "";
setBusy(button, true, "Utwórz notatkę", "Tworzenie…");
try {
const payload = { name: name.value.trim() };
if (password.value) payload.password = password.value;
const result = await api("/api/pads", { method: "POST", body: JSON.stringify(payload) });
if (password.value) sessionStorage.setItem(`rustpad:pad:${result.slug}:password`, password.value);
window.location.assign(`${result.url}?view=split&mode=markdown`);
} catch (requestError) {
error.textContent = requestError.message;
} finally {
setBusy(button, false, "Utwórz notatkę", "Tworzenie…");
}
});
document.querySelector("#workspace-form").addEventListener("submit", async (event) => {
event.preventDefault();
const name = document.querySelector("#workspace-name");
const password = document.querySelector("#workspace-password");
const button = document.querySelector("#workspace-button");
const error = document.querySelector("#workspace-error");
error.textContent = "";
setBusy(button, true, "Utwórz workspace", "Tworzenie…");
try {
const payload = { name: name.value.trim() };
if (password.value) payload.password = password.value;
const result = await api("/api/workspaces", { method: "POST", body: JSON.stringify(payload) });
if (password.value) sessionStorage.setItem(`rustpad:workspace:${result.slug}:password`, password.value);
window.location.assign(result.url);
} catch (requestError) {
error.textContent = requestError.message;
} finally {
setBusy(button, false, "Utwórz workspace", "Tworzenie…");
}
});
static/js/markdown.js
+26
View File
@@ -0,0 +1,26 @@
function escapeHtml(value) {
return value.replace(/[&<>"']/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#039;" }[char]));
}
function inline(value) {
return escapeHtml(value)
.replace(/`([^`]+)`/g, "<code>$1</code>")
.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>")
.replace(/~~([^~]+)~~/g, "<s>$1</s>")
.replace(/\*([^*]+)\*/g, "<em>$1</em>")
.replace(/\[([^\]]+)\]\((https?:\/\/[^\s)]+)\)/g, '<a href="$2" target="_blank" rel="noopener noreferrer">$1</a>');
}
export function renderMarkdown(source) {
let html = "", inCode = false, list = null;
const closeList = () => { if (list) { html += `</${list}>`; list = null; } };
for (const line of source.split("\n")) {
if (line.startsWith("```")) { closeList(); html += inCode ? "</code></pre>" : "<pre><code>"; inCode = !inCode; continue; }
if (inCode) { html += `${escapeHtml(line)}\n`; continue; }
const heading = line.match(/^(#{1,6})\s+(.+)$/);
const ul = line.match(/^\s*[-*+]\s+(.+)$/);
const ol = line.match(/^\s*\d+\.\s+(.+)$/);
if (heading) { closeList(); const n = heading[1].length; html += `<h${n}>${inline(heading[2])}</h${n}>`; }
else if (ul || ol) { const type = ul ? "ul" : "ol"; if (list !== type) { closeList(); html += `<${type}>`; list = type; } html += `<li>${inline((ul || ol)[1])}</li>`; }
else { closeList(); if (/^---+$/.test(line)) html += "<hr>"; else if (line.startsWith("> ")) html += `<blockquote>${inline(line.slice(2))}</blockquote>`; else if (line.trim()) html += `<p>${inline(line)}</p>`; else html += "<br>"; }
}
closeList(); if (inCode) html += "</code></pre>"; return html;
}
static/js/note.js
+53
View File
@@ -0,0 +1,53 @@
import { api } from "./api.js?v=0.6.0";
import { copyText } from "./clipboard.js?v=0.6.0";
import { applyFormat } from "./editor-format.js?v=0.6.0";
import { renderMarkdown } from "./markdown.js?v=0.6.0";
import { getPassword, setPassword } from "./session.js?v=0.6.0";
import { NoteSocket } from "./socket.js?v=0.6.0";
import { currentShareUrl, readEditorState, writeEditorState } from "./url-state.js?v=0.6.0";
const parts = location.pathname.split("/").filter(Boolean);
const workspaceSlug = parts[1], noteSlug = parts[3];
const editor = document.querySelector("#editor"), preview = document.querySelector("#preview"), editorWorkspace = document.querySelector("#editor-workspace");
const modeToggle = document.querySelector("#mode-toggle"), passwordDialog = document.querySelector("#password-dialog");
let password = getPassword(workspaceSlug), info, socket, saveTimer, applyingRemote = false, uiState = readEditorState();
function toast(text) { const el = document.querySelector("#toast"); el.textContent = text; el.classList.add("visible"); setTimeout(() => el.classList.remove("visible"), 1600); }
function setStatus(kind, text) { document.querySelector("#status-dot").className = `status__dot${kind ? ` is-${kind}` : ""}`; document.querySelector("#status-text").textContent = text; }
function updateAddressLabel() { document.querySelector("#note-url").textContent = `${location.pathname}${location.search}`; }
function render() {
if (uiState.mode === "markdown") { preview.classList.remove("preview--raw"); preview.innerHTML = renderMarkdown(editor.value); document.querySelector("#preview-label").textContent = "Podgląd Markdown"; }
else { preview.classList.add("preview--raw"); preview.textContent = editor.value; document.querySelector("#preview-label").textContent = "Tekst źródłowy"; }
document.querySelector("#characters").textContent = `${editor.value.length} znaków`;
const words = editor.value.trim() ? editor.value.trim().split(/\s+/).length : 0; document.querySelector("#words").textContent = `${words} słów`;
}
function applyUi({ write = false, replace = false } = {}) {
editorWorkspace.className = `workspace view-${uiState.view}`;
document.querySelectorAll("[data-view]").forEach(button => { const active = button.dataset.view === uiState.view; button.classList.toggle("active", active); button.setAttribute("aria-pressed", String(active)); });
const markdown = uiState.mode === "markdown"; modeToggle.classList.toggle("active", markdown); modeToggle.setAttribute("aria-pressed", String(markdown)); modeToggle.textContent = markdown ? "Markdown" : "Tekst"; modeToggle.title = markdown ? "Kliknij, aby pokazać tekst bez interpretacji" : "Kliknij, aby interpretować Markdown";
render(); if (write) writeEditorState(uiState, { replace }); updateAddressLabel();
}
function applyRemote(content) { if (content === editor.value) return; const start = editor.selectionStart, end = editor.selectionEnd; applyingRemote = true; editor.value = content; editor.setSelectionRange(Math.min(start, content.length), Math.min(end, content.length)); applyingRemote = false; render(); }
function connect() {
socket?.stop(); socket = new NoteSocket({ workspaceSlug, noteSlug, password,
onStatus: state => setStatus(state === "online" ? "online" : state === "offline" ? "offline" : null, state === "online" ? "Połączono" : state === "offline" ? "Ponowne łączenie…" : "Łączenie…"),
onAuthenticated: message => { if (passwordDialog.open) passwordDialog.close(); document.querySelector("#note-title").textContent = message.note_title; document.querySelector("#workspace-link").textContent = message.workspace_title; applyRemote(message.content); editor.focus(); },
onDocument: message => { applyRemote(message.content); document.querySelector("#save-state").textContent = `Zapisano ${new Date(message.updated_at).toLocaleTimeString("pl-PL", { hour: "2-digit", minute: "2-digit" })}`; },
onError: message => { document.querySelector("#password-error").textContent = message; if (info?.protected && !passwordDialog.open) passwordDialog.showModal(); }
}); socket.connect();
}
async function initialize() {
try { info = await api(`/api/workspaces/${encodeURIComponent(workspaceSlug)}/notes/${encodeURIComponent(noteSlug)}`); document.querySelector("#note-title").textContent = info.title; document.querySelector("#workspace-link").textContent = info.workspace_title; document.querySelector("#workspace-link").href = `/w/${encodeURIComponent(workspaceSlug)}`; document.querySelector("#back-workspace").href = `/w/${encodeURIComponent(workspaceSlug)}`; document.title = `${info.title} · ${info.workspace_title}`; applyUi({ write: true, replace: true }); if (info.protected && !password) passwordDialog.showModal(); else connect(); } catch (e) { document.body.innerHTML = `<main class="error-page"><div><h1>Nie znaleziono notatki</h1><p>${e.message}</p><a href="/w/${encodeURIComponent(workspaceSlug)}">Wróć do workspace</a></div></main>`; }
}
document.querySelectorAll("[data-view]").forEach(button => button.addEventListener("click", () => { uiState = { ...uiState, view: button.dataset.view }; applyUi({ write: true }); }));
modeToggle.addEventListener("click", () => { uiState = { ...uiState, mode: uiState.mode === "markdown" ? "text" : "markdown" }; applyUi({ write: true }); });
window.addEventListener("popstate", () => { uiState = readEditorState(); applyUi(); });
window.addEventListener("rustpad:urlchange", updateAddressLabel);
document.querySelector("#copy-link").addEventListener("click", async () => { try { const url = currentShareUrl(uiState); await copyText(url); toast("Skopiowano link z widokiem"); } catch (e) { toast(e.message); } });
document.querySelectorAll("[data-format]").forEach(button => button.addEventListener("click", () => applyFormat(editor, button.dataset.format)));
editor.addEventListener("input", () => { render(); if (applyingRemote) return; clearTimeout(saveTimer); document.querySelector("#save-state").textContent = "Zapisywanie…"; saveTimer = setTimeout(() => socket?.update(editor.value), 250); });
document.querySelector("#password-form").addEventListener("submit", event => { event.preventDefault(); password = document.querySelector("#open-password").value; setPassword(workspaceSlug, password); document.querySelector("#password-error").textContent = ""; connect(); });
const historyPanel = document.querySelector("#history-panel"); document.querySelector("#history-button").addEventListener("click", async () => { historyPanel.setAttribute("aria-hidden", "false"); document.body.classList.add("history-open"); const list = document.querySelector("#history-list"); list.innerHTML = '<p class="empty">Ładowanie…</p>'; try { const revisions = await api(`/api/workspaces/${encodeURIComponent(workspaceSlug)}/notes/${encodeURIComponent(noteSlug)}/history`, { method: "POST", body: JSON.stringify({ password: password || null }) }); list.innerHTML = revisions.length ? revisions.map(r => `<article class="revision"><time>${new Date(r.created_at.replace(" ", "T") + "Z").toLocaleString("pl-PL")}</time><button class="secondary-button" data-revision="${r.id}">Przywróć</button></article>`).join("") : '<p class="empty">Brak historii.</p>'; list.querySelectorAll("[data-revision]").forEach(button => button.addEventListener("click", async () => { await api(`/api/workspaces/${encodeURIComponent(workspaceSlug)}/notes/${encodeURIComponent(noteSlug)}/restore`, { method: "POST", body: JSON.stringify({ password: password || null, revision_id: Number(button.dataset.revision) }) }); toast("Przywrócono wersję"); })); } catch (e) { list.innerHTML = `<p class="error">${e.message}</p>`; } });
document.querySelector("#close-history").addEventListener("click", () => { historyPanel.setAttribute("aria-hidden", "true"); document.body.classList.remove("history-open"); });
initialize();
static/js/pad.js
+173
View File
@@ -0,0 +1,173 @@
import { api } from "./api.js?v=0.6.0";
import { copyText } from "./clipboard.js?v=0.6.0";
import { applyFormat } from "./editor-format.js?v=0.6.0";
import { renderMarkdown } from "./markdown.js?v=0.6.0";
import { PadSocket } from "./socket.js?v=0.6.0";
import { currentShareUrl, readEditorState, writeEditorState } from "./url-state.js?v=0.6.0";
const slug = location.pathname.split("/").filter(Boolean)[1];
const passwordKey = `rustpad:pad:${slug}:password`;
const editor = document.querySelector("#editor");
const preview = document.querySelector("#preview");
const editorWorkspace = document.querySelector("#editor-workspace");
const modeToggle = document.querySelector("#mode-toggle");
const passwordDialog = document.querySelector("#password-dialog");
let password = sessionStorage.getItem(passwordKey) || "";
let info;
let socket;
let saveTimer;
let applyingRemote = false;
let uiState = readEditorState();
function toast(text) {
const element = document.querySelector("#toast");
element.textContent = text;
element.classList.add("visible");
setTimeout(() => element.classList.remove("visible"), 1600);
}
function setStatus(kind, text) {
document.querySelector("#status-dot").className = `status__dot${kind ? ` is-${kind}` : ""}`;
document.querySelector("#status-text").textContent = text;
}
function updateAddressLabel() {
document.querySelector("#pad-url").textContent = `${location.pathname}${location.search}`;
}
function render() {
if (uiState.mode === "markdown") {
preview.classList.remove("preview--raw");
preview.innerHTML = renderMarkdown(editor.value);
document.querySelector("#preview-label").textContent = "Podgląd Markdown";
} else {
preview.classList.add("preview--raw");
preview.textContent = editor.value;
document.querySelector("#preview-label").textContent = "Tekst źródłowy";
}
document.querySelector("#characters").textContent = `${editor.value.length} znaków`;
const words = editor.value.trim() ? editor.value.trim().split(/\s+/).length : 0;
document.querySelector("#words").textContent = `${words} słów`;
}
function applyUi({ write = false, replace = false } = {}) {
editorWorkspace.className = `workspace view-${uiState.view}`;
document.querySelectorAll("[data-view]").forEach((button) => {
const active = button.dataset.view === uiState.view;
button.classList.toggle("active", active);
button.setAttribute("aria-pressed", String(active));
});
const markdown = uiState.mode === "markdown";
modeToggle.classList.toggle("active", markdown);
modeToggle.setAttribute("aria-pressed", String(markdown));
modeToggle.textContent = markdown ? "Markdown" : "Tekst";
modeToggle.title = markdown ? "Pokaż tekst bez interpretacji" : "Interpretuj Markdown";
render();
if (write) writeEditorState(uiState, { replace });
updateAddressLabel();
}
function applyRemote(content) {
if (content === editor.value) return;
const start = editor.selectionStart;
const end = editor.selectionEnd;
applyingRemote = true;
editor.value = content;
editor.setSelectionRange(Math.min(start, content.length), Math.min(end, content.length));
applyingRemote = false;
render();
}
function connect() {
socket?.stop();
socket = new PadSocket({
slug,
password,
onStatus: (state) => setStatus(state === "online" ? "online" : state === "offline" ? "offline" : null, state === "online" ? "Połączono" : state === "offline" ? "Ponowne łączenie…" : "Łączenie…"),
onAuthenticated: (message) => {
if (passwordDialog.open) passwordDialog.close();
document.querySelector("#pad-title").textContent = message.title;
applyRemote(message.content);
editor.focus();
},
onDocument: (message) => {
applyRemote(message.content);
document.querySelector("#save-state").textContent = `Zapisano ${new Date(message.updated_at).toLocaleTimeString("pl-PL", { hour: "2-digit", minute: "2-digit" })}`;
},
onError: (message) => {
document.querySelector("#password-error").textContent = message;
if (info?.protected && !passwordDialog.open) passwordDialog.showModal();
},
});
socket.connect();
}
async function initialize() {
try {
info = await api(`/api/pads/${encodeURIComponent(slug)}`);
document.querySelector("#pad-title").textContent = info.title;
document.title = `${info.title} · RustPad`;
applyUi({ write: true, replace: true });
if (info.protected && !password) passwordDialog.showModal();
else connect();
} catch (error) {
location.replace("/");
}
}
document.querySelectorAll("[data-view]").forEach((button) => button.addEventListener("click", () => {
uiState = { ...uiState, view: button.dataset.view };
applyUi({ write: true });
}));
modeToggle.addEventListener("click", () => {
uiState = { ...uiState, mode: uiState.mode === "markdown" ? "text" : "markdown" };
applyUi({ write: true });
});
window.addEventListener("popstate", () => { uiState = readEditorState(); applyUi(); });
window.addEventListener("rustpad:urlchange", updateAddressLabel);
document.querySelector("#copy-link").addEventListener("click", async () => {
try {
await copyText(currentShareUrl(uiState));
toast("Skopiowano link z widokiem");
} catch (error) {
toast(error.message);
}
});
document.querySelectorAll("[data-format]").forEach((button) => button.addEventListener("click", () => applyFormat(editor, button.dataset.format)));
editor.addEventListener("input", () => {
render();
if (applyingRemote) return;
clearTimeout(saveTimer);
document.querySelector("#save-state").textContent = "Zapisywanie…";
saveTimer = setTimeout(() => socket?.update(editor.value), 250);
});
document.querySelector("#password-form").addEventListener("submit", (event) => {
event.preventDefault();
password = document.querySelector("#open-password").value;
sessionStorage.setItem(passwordKey, password);
document.querySelector("#password-error").textContent = "";
connect();
});
const historyPanel = document.querySelector("#history-panel");
document.querySelector("#history-button").addEventListener("click", async () => {
historyPanel.setAttribute("aria-hidden", "false");
document.body.classList.add("history-open");
const list = document.querySelector("#history-list");
list.innerHTML = '<p class="empty">Ładowanie…</p>';
try {
const revisions = await api(`/api/pads/${encodeURIComponent(slug)}/history`, { method: "POST", body: JSON.stringify({ password: password || null }) });
list.innerHTML = revisions.length ? revisions.map((revision) => `<article class="revision"><time>${new Date(revision.created_at.replace(" ", "T") + "Z").toLocaleString("pl-PL")}</time><button class="secondary-button" data-revision="${revision.id}">Przywróć</button></article>`).join("") : '<p class="empty">Brak historii.</p>';
list.querySelectorAll("[data-revision]").forEach((button) => button.addEventListener("click", async () => {
await api(`/api/pads/${encodeURIComponent(slug)}/restore`, { method: "POST", body: JSON.stringify({ password: password || null, revision_id: Number(button.dataset.revision) }) });
toast("Przywrócono wersję");
}));
} catch (error) {
list.innerHTML = `<p class="error">${error.message}</p>`;
}
});
document.querySelector("#close-history").addEventListener("click", () => {
historyPanel.setAttribute("aria-hidden", "true");
document.body.classList.remove("history-open");
});
initialize();
static/js/session.js
+6
View File
@@ -0,0 +1,6 @@
export function passwordKey(workspaceSlug) { return `rustpad:workspace:${workspaceSlug}:password`; }
export function getPassword(workspaceSlug) { return sessionStorage.getItem(passwordKey(workspaceSlug)) || ""; }
export function setPassword(workspaceSlug, password) {
if (password) sessionStorage.setItem(passwordKey(workspaceSlug), password);
else sessionStorage.removeItem(passwordKey(workspaceSlug));
}
static/js/socket.js
+60
View File
@@ -0,0 +1,60 @@
export class NoteSocket {
constructor({ workspaceSlug, noteSlug, password, onStatus, onAuthenticated, onDocument, onError }) {
Object.assign(this, { workspaceSlug, noteSlug, password, onStatus, onAuthenticated, onDocument, onError });
this.socket = null; this.timer = null; this.closed = false;
}
connect() {
clearTimeout(this.timer); this.onStatus?.("connecting");
const protocol = location.protocol === "https:" ? "wss:" : "ws:";
this.socket = new WebSocket(`${protocol}//${location.host}/ws/${encodeURIComponent(this.workspaceSlug)}/${encodeURIComponent(this.noteSlug)}`);
this.socket.addEventListener("open", () => this.socket.send(JSON.stringify({ type: "authenticate", password: this.password || null })));
this.socket.addEventListener("message", (event) => {
const message = JSON.parse(event.data);
if (message.type === "error") { this.onError?.(message.message); this.closed = true; this.socket.close(); }
if (message.type === "authenticated") { this.onStatus?.("online"); this.onAuthenticated?.(message); }
if (message.type === "document") this.onDocument?.(message);
});
this.socket.addEventListener("close", () => { if (!this.closed) { this.onStatus?.("offline"); this.timer = setTimeout(() => this.connect(), 1500); } });
this.socket.addEventListener("error", () => this.socket.close());
}
update(content) { if (this.socket?.readyState === WebSocket.OPEN) this.socket.send(JSON.stringify({ type: "update", content })); }
stop() { this.closed = true; clearTimeout(this.timer); this.socket?.close(); }
}
export class PadSocket {
constructor({ slug, password, onStatus, onAuthenticated, onDocument, onError }) {
Object.assign(this, { slug, password, onStatus, onAuthenticated, onDocument, onError });
this.socket = null;
this.timer = null;
this.closed = false;
}
connect() {
clearTimeout(this.timer);
this.closed = false;
this.onStatus?.("connecting");
const protocol = location.protocol === "https:" ? "wss:" : "ws:";
this.socket = new WebSocket(`${protocol}//${location.host}/ws/p/${encodeURIComponent(this.slug)}`);
this.socket.addEventListener("open", () => this.socket.send(JSON.stringify({ type: "authenticate", password: this.password || null })));
this.socket.addEventListener("message", (event) => {
const message = JSON.parse(event.data);
if (message.type === "error") { this.onError?.(message.message); this.closed = true; this.socket.close(); }
if (message.type === "authenticated") { this.onStatus?.("online"); this.onAuthenticated?.(message); }
if (message.type === "document") this.onDocument?.(message);
});
this.socket.addEventListener("close", () => {
if (!this.closed) {
this.onStatus?.("offline");
this.timer = setTimeout(() => this.connect(), 1500);
}
});
this.socket.addEventListener("error", () => this.socket.close());
}
update(content) {
if (this.socket?.readyState === WebSocket.OPEN) this.socket.send(JSON.stringify({ type: "update", content }));
}
stop() {
this.closed = true;
clearTimeout(this.timer);
this.socket?.close();
}
}
static/js/url-state.js
+27
View File
@@ -0,0 +1,27 @@
const VIEWS = new Set(["edit", "split", "preview"]);
const MODES = new Set(["markdown", "text"]);
export function readEditorState() {
const params = new URLSearchParams(window.location.search);
return {
view: VIEWS.has(params.get("view")) ? params.get("view") : "split",
mode: MODES.has(params.get("mode")) ? params.get("mode") : "markdown",
};
}
export function writeEditorState(state, { replace = false } = {}) {
const url = new URL(window.location.href);
url.searchParams.set("view", state.view);
url.searchParams.set("mode", state.mode);
const method = replace ? "replaceState" : "pushState";
window.history[method]({ ...state }, "", `${url.pathname}${url.search}${url.hash}`);
window.dispatchEvent(new CustomEvent("rustpad:urlchange", { detail: { url: url.href } }));
return url.href;
}
export function currentShareUrl(state) {
const url = new URL(window.location.href);
url.searchParams.set("view", state.view);
url.searchParams.set("mode", state.mode);
return url.href;
}
static/js/workspace.js
+11
View File
@@ -0,0 +1,11 @@
import { api } from "./api.js?v=0.6.0"; import { copyText } from "./clipboard.js?v=0.6.0"; import { getPassword, setPassword } from "./session.js?v=0.6.0";
const parts = location.pathname.split("/").filter(Boolean), slug = parts[1]; let info, password = getPassword(slug); const dialog = document.querySelector("#password-dialog"), notesList = document.querySelector("#notes-list");
function toast(text) { const el = document.querySelector("#toast"); el.textContent = text; el.classList.add("visible"); setTimeout(() => el.classList.remove("visible"), 1600); }
function renderNotes(notes) { notesList.innerHTML = notes.length ? notes.map(note => `<a class="note-card" href="${note.url}?view=split&mode=markdown"><h3>${escapeHtml(note.title)}</h3><p>Aktualizacja: ${new Date(note.updated_at).toLocaleString("pl-PL")}</p></a>`).join("") : '<p class="empty">Brak notatek.</p>'; }
function escapeHtml(v) { const e = document.createElement("div"); e.textContent = v; return e.innerHTML; }
async function openWorkspace() { try { const data = await api(`/api/workspaces/${encodeURIComponent(slug)}/open`, { method: "POST", body: JSON.stringify({ password: password || null }) }); info = data.workspace; document.querySelector("#workspace-title").textContent = info.title; document.querySelector("#workspace-url").textContent = location.pathname; document.title = `${info.title} · RustPad`; renderNotes(data.notes); if (dialog.open) dialog.close(); } catch (e) { if (info?.protected || e.message.includes("hasło")) { document.querySelector("#password-error").textContent = e.message; if (!dialog.open) dialog.showModal(); } else document.querySelector("#workspace-error").textContent = e.message; } }
async function init() { try { info = await api(`/api/workspaces/${encodeURIComponent(slug)}`); document.querySelector("#workspace-title").textContent = info.title; document.querySelector("#workspace-url").textContent = location.pathname; if (info.protected && !password) dialog.showModal(); else openWorkspace(); } catch (e) { document.querySelector("#workspace-error").textContent = e.message; } }
document.querySelector("#password-form").addEventListener("submit", e => { e.preventDefault(); password = document.querySelector("#open-password").value; setPassword(slug, password); openWorkspace(); });
document.querySelector("#new-note-button").addEventListener("click", () => document.querySelector("#note-dialog").showModal()); document.querySelector("#cancel-note").addEventListener("click", () => document.querySelector("#note-dialog").close());
document.querySelector("#note-form").addEventListener("submit", async e => { e.preventDefault(); const error = document.querySelector("#note-error"); error.textContent = ""; try { const note = await api(`/api/workspaces/${encodeURIComponent(slug)}/notes`, { method: "POST", body: JSON.stringify({ name: document.querySelector("#note-name").value, password: password || null }) }); location.assign(`${note.url}?view=split&mode=markdown`); } catch (err) { error.textContent = err.message; } });
document.querySelector("#copy-workspace-link").addEventListener("click", async () => { try { await copyText(new URL(location.pathname, location.origin).href); toast("Skopiowano link"); } catch (e) { toast(e.message); } }); init();
static/note.html
+4
View File
@@ -0,0 +1,4 @@
<!doctype html><html lang="pl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="dark"><title>Notatka · RustPad</title><link rel="stylesheet" href="/assets/styles.css?v=__ASSET_VERSION__"><script type="module" src="/assets/js/note.js?v=__ASSET_VERSION__"></script></head>
<body class="pad-page"><header class="app-header"><div class="app-header__main"><a id="workspace-link" class="brand" href="/">RustPad</a><span class="header-divider"></span><div class="document-heading"><h1 id="note-title">Ładowanie…</h1><p id="note-url" class="document-url"></p></div></div><div class="header-actions"><div class="status"><span id="status-dot" class="status__dot"></span><span id="status-text">Łączenie…</span></div><button id="copy-link" class="secondary-button">Kopiuj link</button><button id="history-button" class="secondary-button">Historia</button></div></header>
<main class="editor-layout"><section class="editor-panel"><div class="editor-toolbar"><div class="toolbar-group"><button data-format="bold"><strong>B</strong></button><button data-format="italic"><em>I</em></button><button data-format="strike"><s>S</s></button><button data-format="heading">H2</button><button data-format="bullet">• Lista</button><button data-format="number">1. Lista</button><button data-format="quote">Cytat</button><button data-format="link">Link</button></div><div class="toolbar-fill"></div><button id="mode-toggle" class="markdown-toggle active" aria-pressed="true">Markdown</button><div class="view-switch"><button data-view="edit">Edytuj</button><button data-view="split" class="active">Podział</button><button data-view="preview">Podgląd</button></div></div><div id="editor-workspace" class="workspace view-split"><div class="editor-column"><div class="column-label">Edytor</div><textarea id="editor" placeholder="Zacznij pisać…"></textarea></div><div class="preview-column"><div id="preview-label" class="column-label">Podgląd Markdown</div><article id="preview" class="preview markdown-body"></article></div></div><footer class="editor-footer"><div><span id="characters">0 znaków</span> · <span id="words">0 słów</span></div><span id="save-state">Zmiany zapisują się automatycznie</span></footer></section><aside id="history-panel" class="history-panel" aria-hidden="true"><div class="history-header"><h2>Historia</h2><button id="close-history" class="icon-button">×</button></div><div id="history-list" class="history-list"></div></aside></main>
<dialog id="password-dialog"><form id="password-form" class="dialog-panel"><h2>Workspace chroniony</h2><input id="open-password" type="password" autocomplete="current-password" required placeholder="Hasło"><p id="password-error" class="form-message error"></p><button class="primary-button">Otwórz</button><a id="back-workspace" class="dialog-link" href="/">Wróć</a></form></dialog><div id="toast" class="toast"></div></body></html>
static/pad.html
+19
View File
@@ -0,0 +1,19 @@
<!doctype html>
<html lang="pl">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="color-scheme" content="dark">
<title>Notatka · RustPad</title>
<link rel="stylesheet" href="/assets/styles.css?v=__ASSET_VERSION__">
<script type="module" src="/assets/js/pad.js?v=__ASSET_VERSION__"></script>
</head>
<body class="pad-page">
<header class="app-header">
<div class="app-header__main"><a class="brand" href="/">RustPad</a><span class="header-divider"></span><div class="document-heading"><h1 id="pad-title">Ładowanie…</h1><p id="pad-url" class="document-url"></p></div></div>
<div class="header-actions"><div class="status"><span id="status-dot" class="status__dot"></span><span id="status-text">Łączenie…</span></div><button id="copy-link" class="secondary-button">Kopiuj link</button><button id="history-button" class="secondary-button">Historia</button></div>
</header>
<main class="editor-layout"><section class="editor-panel"><div class="editor-toolbar"><div class="toolbar-group"><button data-format="bold"><strong>B</strong></button><button data-format="italic"><em>I</em></button><button data-format="strike"><s>S</s></button><button data-format="heading">H2</button><button data-format="bullet">• Lista</button><button data-format="number">1. Lista</button><button data-format="quote">Cytat</button><button data-format="link">Link</button></div><div class="toolbar-fill"></div><button id="mode-toggle" class="markdown-toggle active" aria-pressed="true">Markdown</button><div class="view-switch"><button data-view="edit">Edytuj</button><button data-view="split" class="active">Podział</button><button data-view="preview">Podgląd</button></div></div><div id="editor-workspace" class="workspace view-split"><div class="editor-column"><div class="column-label">Edytor</div><textarea id="editor" placeholder="Zacznij pisać…"></textarea></div><div class="preview-column"><div id="preview-label" class="column-label">Podgląd Markdown</div><article id="preview" class="preview markdown-body"></article></div></div><footer class="editor-footer"><div><span id="characters">0 znaków</span> · <span id="words">0 słów</span></div><span id="save-state">Zmiany zapisują się automatycznie</span></footer></section><aside id="history-panel" class="history-panel" aria-hidden="true"><div class="history-header"><h2>Historia</h2><button id="close-history" class="icon-button">×</button></div><div id="history-list" class="history-list"></div></aside></main>
<dialog id="password-dialog"><form id="password-form" class="dialog-panel"><h2>Notatka chroniona</h2><input id="open-password" type="password" autocomplete="current-password" required placeholder="Hasło"><p id="password-error" class="form-message error"></p><button class="primary-button">Otwórz</button><a class="dialog-link" href="/">Wróć</a></form></dialog><div id="toast" class="toast"></div>
</body>
</html>
static/styles.css
+207
View File
@@ -0,0 +1,207 @@
:root {
color-scheme: dark;
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
font-synthesis: none;
background: #0b0d11;
color: #f4f6f8;
--bg: #0b0d11;
--surface: #11141a;
--surface-2: #151922;
--surface-3: #1a1f29;
--border: #272d38;
--border-strong: #343c49;
--text: #f4f6f8;
--muted: #929cab;
--muted-2: #697383;
--accent: #7c68ee;
--accent-hover: #8d79f8;
--accent-soft: #272246;
--danger: #ff7b91;
--success: #40d3a3;
}
* { box-sizing: border-box; }
html { min-width: 320px; background: var(--bg); }
body { min-height: 100vh; margin: 0; background: var(--bg); color: var(--text); }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.brand { color: var(--text); font-weight: 700; text-decoration: none; letter-spacing: -.02em; }
.site-header { width: min(720px, calc(100% - 32px)); min-height: 64px; margin: 0 auto; display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.home-layout { width: min(520px, calc(100% - 32px)); margin: 0 auto; padding: 72px 0; }
.home-intro { margin-bottom: 28px; }
.home-intro h1 { margin: 0; font-size: clamp(2rem, 7vw, 3rem); letter-spacing: -.04em; }
.home-intro p { margin: 10px 0 0; color: var(--muted); line-height: 1.6; }
.panel { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.create-panel { padding: 24px; }
#create-form { display: grid; gap: 20px; padding-top: 22px; }
.field { display: grid; gap: 8px; }
.field label { color: #dce1e8; font-size: .86rem; font-weight: 750; }
.label-row, .field-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.label-row span, .field-meta, .field small { color: var(--muted-2); font-size: .73rem; }
input, select { border: 1px solid var(--border-strong); outline: none; background: #0e1116; color: var(--text); }
input { width: 100%; min-height: 46px; padding: 0 13px; border-radius: 10px; }
input:focus, select:focus, textarea:focus { border-color: #7567db; outline: 1px solid #7567db; outline-offset: 1px; }
.password-input { position: relative; }
.password-input input { padding-right: 72px; }
.text-button { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); border: 0; background: transparent; color: #a99ef8; padding: 7px; font-size: .78rem; }
.form-message { min-height: 1.2em; margin: -5px 0 0; font-size: .8rem; }
.error { color: var(--danger); }
.primary-button, .secondary-button, .inline-button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border-radius: 8px; font-weight: 650; text-decoration: none; }
.primary-button { width: 100%; border: 1px solid #8372ef; background: var(--accent); color: white; padding: 0 16px; }
.primary-button:hover { background: var(--accent-hover); }
.secondary-button { border: 1px solid var(--border-strong); background: var(--surface-2); color: #d2d8e1; padding: 0 13px; }
.secondary-button:hover { border-color: #4b5565; background: var(--surface-3); }
.inline-button { width: auto; margin-top: 18px; padding: 0 16px; }
.app-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 70px; padding: 0 20px; border-bottom: 1px solid var(--border); background: #0d1015; }
.app-header__main, .header-actions { display: flex; align-items: center; gap: 14px; min-width: 0; }
.header-divider { width: 1px; height: 30px; background: var(--border); }
.document-heading { min-width: 0; }
.document-heading h1 { overflow: hidden; margin: 0; font-size: 1rem; white-space: nowrap; text-overflow: ellipsis; }
.document-url { overflow: hidden; max-width: 360px; margin: 3px 0 0; color: var(--muted-2); font-size: .72rem; white-space: nowrap; text-overflow: ellipsis; }
.status { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 8px; color: var(--muted); font-size: .78rem; }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: #e3a94d; }
.status__dot.is-online { background: var(--success); }
.status__dot.is-offline { background: var(--danger); }
.editor-layout { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 0; height: calc(100vh - 70px); overflow: hidden; transition: grid-template-columns .18s ease; }
.history-open .editor-layout { grid-template-columns: minmax(0, 1fr) 340px; }
.editor-panel { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-width: 0; background: var(--surface); }
.editor-toolbar { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px; border-bottom: 1px solid var(--border); background: #101319; }
.toolbar-group, .view-switch { display: inline-flex; align-items: center; gap: 4px; padding-right: 8px; border-right: 1px solid var(--border); }
.toolbar-group:last-child, .view-switch { padding-right: 0; border-right: 0; }
.toolbar-fill { flex: 1; }
.editor-toolbar button, .editor-toolbar select { min-height: 34px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #b8c0cc; padding: 0 9px; font-size: .78rem; }
.editor-toolbar button:hover, .editor-toolbar select:hover { border-color: var(--border); background: var(--surface-2); color: white; }
.editor-toolbar select { border-color: var(--border); background: #11151c; }
.view-switch { padding: 3px; border: 1px solid var(--border); border-radius: 9px; background: #0d1015; }
.view-switch button.active { background: var(--surface-3); color: white; }
.workspace { display: grid; min-height: 0; background: #0e1116; }
.workspace.view-split { grid-template-columns: 1fr 1fr; }
.workspace.view-edit { grid-template-columns: 1fr; }
.workspace.view-preview { grid-template-columns: 1fr; }
.workspace.view-edit .preview-column, .workspace.view-preview .editor-column { display: none; }
.editor-column, .preview-column { display: grid; grid-template-rows: 30px minmax(0, 1fr); min-width: 0; min-height: 0; }
.preview-column { border-left: 1px solid var(--border); }
.column-label { display: flex; align-items: center; padding: 0 18px; border-bottom: 1px solid #202631; background: #10141a; color: var(--muted-2); font-size: .7rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
textarea { display: block; width: 100%; height: 100%; min-height: 0; resize: none; padding: 24px; border: 0; outline: none; background: #0d1015; color: #edf1f6; font: 400 17px/1.72 ui-monospace, SFMono-Regular, Consolas, monospace; caret-color: #9b89ff; }
textarea::placeholder { color: #515a68; }
textarea::selection { background: rgba(124,104,238,.35); }
.preview { overflow: auto; min-height: 0; padding: 24px; color: #dce2eb; line-height: 1.72; }
.markdown-body h1, .markdown-body h2, .markdown-body h3 { margin: 1.25em 0 .5em; letter-spacing: -.03em; }
.markdown-body h1:first-child, .markdown-body h2:first-child, .markdown-body h3:first-child { margin-top: 0; }
.markdown-body h1 { font-size: 2rem; }
.markdown-body h2 { font-size: 1.5rem; }
.markdown-body p { margin: .72em 0; }
.markdown-body code { padding: .16em .36em; border: 1px solid #303745; border-radius: 5px; background: #1a2029; }
.markdown-body pre { overflow: auto; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: #0a0d12; }
.markdown-body pre code { padding: 0; border: 0; background: transparent; }
.markdown-body blockquote { margin: 1em 0; padding: .2em 1em; border-left: 3px solid var(--accent); color: #abb5c3; }
.markdown-body a { color: #aa9df8; }
.markdown-body hr { border: 0; border-top: 1px solid var(--border); }
.editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 38px; padding: 0 16px; border-top: 1px solid var(--border); color: var(--muted-2); font-size: .72rem; }
.document-stats { display: flex; gap: 14px; }
.history-panel { position: relative; width: 340px; overflow: hidden; border-left: 1px solid var(--border); background: #101319; transform: translateX(100%); transition: transform .18s ease; }
.history-panel.open { transform: translateX(0); }
.history-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px; }
.history-help { margin: 0; padding: 0 18px 16px; border-bottom: 1px solid var(--border); color: var(--muted); font-size: .8rem; line-height: 1.5; }
.icon-button { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: transparent; color: #c5ccd6; font-size: 1.2rem; }
.history-list { overflow: auto; height: calc(100vh - 185px); padding: 10px 18px 24px; }
.revision { position: relative; display: grid; grid-template-columns: 12px 1fr; gap: 10px; padding: 13px 0; }
.revision::after { content: ""; position: absolute; top: 25px; bottom: -13px; left: 5px; width: 1px; background: var(--border); }
.revision:last-child::after { display: none; }
.revision__marker { position: relative; z-index: 1; width: 11px; height: 11px; margin-top: 3px; border: 2px solid #8b7af4; border-radius: 50%; background: #101319; }
.revision time { display: block; color: #d1d7df; font-size: .8rem; }
.revision small { display: block; margin-top: 4px; color: var(--muted-2); }
.revision button { margin-top: 10px; border: 0; background: transparent; color: #9e92f5; padding: 0; font-size: .76rem; font-weight: 750; }
.empty { padding: 28px 0; color: var(--muted-2); text-align: center; font-size: .82rem; }
dialog { width: min(420px, calc(100% - 24px)); padding: 0; border: 0; background: transparent; color: inherit; }
dialog::backdrop { background: rgba(4,6,9,.82); }
.dialog-panel { display: grid; gap: 12px; padding: 24px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); text-align: left; }
.dialog-panel input { margin-top: 6px; }
.dialog-panel .primary-button { margin-top: 2px; }
.dialog-link { color: var(--muted); font-size: .78rem; }
.toast { position: fixed; right: 20px; bottom: 20px; z-index: 20; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: 10px; background: #171b23; color: #e6eaf0; font-size: .8rem; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .16s ease; }
.toast.visible { opacity: 1; transform: translateY(0); }
.error-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; text-align: center; }
.error-page h1 { margin: 0; font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -.05em; }
.error-page p { color: var(--muted); }
@media (max-width: 980px) {
.app-header { align-items: flex-start; min-height: auto; padding: 12px 14px; }
.app-header__main, .header-actions { flex-wrap: wrap; }
.editor-layout { height: calc(100vh - 92px); }
.toolbar-settings { display: none; }
.history-open .editor-layout { grid-template-columns: minmax(0, 1fr); }
.history-panel { position: absolute; top: 0; right: 0; bottom: 0; z-index: 10; }
}
@media (max-width: 720px) {
.site-header, .home-layout { width: min(100% - 24px, 520px); }
.document-url, .header-divider { display: none; }
.home-layout { padding: 44px 0; }
.app-header { gap: 10px; }
.status { display: none; }
.editor-toolbar { overflow-x: auto; flex-wrap: nowrap; }
.toolbar-fill { display: none; }
.workspace.view-split { grid-template-columns: 1fr; }
.workspace.view-split .preview-column { display: none; }
.view-switch button[data-view="split"] { display: none; }
.preview-column { border-left: 0; }
textarea, .preview { padding: 18px; }
.editor-footer { align-items: flex-start; flex-direction: column; justify-content: center; gap: 2px; padding: 7px 12px; }
}
@media (max-width: 480px) {
.create-panel { padding: 20px; }
.header-actions { gap: 6px; }
.secondary-button { min-height: 36px; padding: 0 10px; font-size: .75rem; }
.history-panel { width: 100%; }
}
.markdown-toggle { border: 1px solid var(--border) !important; }
.markdown-toggle.active { background: var(--surface-3) !important; color: white !important; }
.preview--raw { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.workspace-page { width: min(1100px, calc(100% - 32px)); margin: 0 auto; padding: 44px 0 80px; }
.workspace-top { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--border); }
.workspace-top h2 { margin: 0; font-size: 2rem; }
.workspace-top p { margin: 7px 0 0; color: var(--muted); }
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding-top: 20px; }
.note-card { min-height: 130px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none; transition: border-color .15s, background .15s; }
.note-card:hover { border-color: var(--border-strong); background: var(--surface-2); }
.note-card h3 { margin: 0; font-size: 1rem; }
.note-card p { margin: 36px 0 0; color: var(--muted); font-size: .75rem; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 8px; }
.inline-button { width: auto; padding-inline: 18px; }
.error-card { width: min(560px, 100%); padding: 32px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.error-code { margin: 0 0 10px; color: var(--muted-2); font: 700 .78rem/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .12em; }
.error-card h1 { font-size: clamp(1.8rem, 6vw, 3rem); }
.error-card > p:not(.error-code) { max-width: 46ch; margin: 14px auto 0; line-height: 1.6; }
.error-actions { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
@media (max-width: 480px) { .error-card { padding: 24px 18px; } .error-actions { flex-direction: column; } .error-actions .inline-button { width: 100%; } }
/* Home: standalone note and workspace are separate choices. */
.home-layout--wide { width: min(1040px, calc(100% - 32px)); }
.create-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.create-panel__heading { margin-bottom: 22px; }
.create-panel__heading h2 { margin: 0; font-size: 1.35rem; }
.create-panel__heading p { margin: 7px 0 0; color: var(--muted); line-height: 1.5; }
.create-panel form { display: grid; gap: 18px; }
.create-panel .primary-button { width: 100%; }
@media (max-width: 760px) {
.home-layout--wide { width: min(100% - 24px, 560px); }
.create-grid { grid-template-columns: 1fr; }
}
static/workspace.html
+5
View File
@@ -0,0 +1,5 @@
<!doctype html><html lang="pl"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="color-scheme" content="dark"><title>Workspace · RustPad</title><link rel="stylesheet" href="/assets/styles.css?v=__ASSET_VERSION__"><script type="module" src="/assets/js/workspace.js?v=__ASSET_VERSION__"></script></head>
<body><header class="app-header"><div class="app-header__main"><a class="brand" href="/">RustPad</a><span class="header-divider"></span><div class="document-heading"><h1 id="workspace-title">Ładowanie…</h1><p id="workspace-url" class="document-url"></p></div></div><div class="header-actions"><button id="copy-workspace-link" class="secondary-button">Kopiuj link</button></div></header>
<main class="workspace-page"><section class="workspace-top"><div><h2>Notatki</h2><p>Wybierz notatkę albo utwórz nową.</p></div><button id="new-note-button" class="primary-button inline-button">Nowa notatka</button></section><p id="workspace-error" class="form-message error"></p><section id="notes-list" class="notes-grid" aria-live="polite"></section></main>
<dialog id="password-dialog"><form id="password-form" class="dialog-panel"><h2>Workspace chroniony</h2><input id="open-password" type="password" autocomplete="current-password" required placeholder="Hasło"><p id="password-error" class="form-message error"></p><button class="primary-button">Otwórz</button><a href="/" class="dialog-link">Anuluj</a></form></dialog>
<dialog id="note-dialog"><form id="note-form" class="dialog-panel"><h2>Nowa notatka</h2><input id="note-name" maxlength="80" required placeholder="Nazwa notatki"><p id="note-error" class="form-message error"></p><div class="dialog-actions"><button type="button" id="cancel-note" class="secondary-button">Anuluj</button><button class="primary-button">Utwórz</button></div></form></dialog><div id="toast" class="toast"></div></body></html>