410 lines
28 KiB
HTML
410 lines
28 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<meta name="color-scheme" content="dark light">
|
||
<title>__DOCUMENT_TITLE__ · __PARENT_TITLE__</title>
|
||
__APP_THEME_BOOTSTRAP__
|
||
__APP_STYLESHEET__
|
||
__APP_IMPORT_MAP__
|
||
__APP_ENTRYPOINT__
|
||
</head>
|
||
|
||
<body class="pad-page" data-resource-kind="__RESOURCE_KIND__" data-registration-enabled="__REGISTRATION_ENABLED__">
|
||
<header class="app-header">
|
||
<div class="app-header__main">
|
||
<div class="resource-brand" aria-label="__RESOURCE_ARIA_LABEL__">
|
||
<a class="resource-brand__logo home-brand" href="/" aria-label="RustPad home">RustPad</a>
|
||
<nav class="resource-brand__trail" aria-label="Current location">__RESOURCE_BREADCRUMB__</nav>
|
||
</div>
|
||
<span class="header-divider"></span>
|
||
<div id="document-link-copy" class="document-heading document-heading--copy" role="button" tabindex="0"
|
||
title="Copy this link" aria-label="Copy this link">
|
||
<h1 id="document-title">__DOCUMENT_TITLE__</h1>
|
||
<p id="document-url" class="document-url"></p>
|
||
</div>
|
||
</div>
|
||
<span class="header-user-control user-color-control"><button id="current-user" class="user-chip" type="button"
|
||
title="Change your color"><span class="user-chip__dot" aria-hidden="true"></span><span
|
||
class="user-chip__name"></span></button><input id="user-color-picker" class="user-color-picker"
|
||
type="color" aria-label="Override color for this note"><button id="use-global-color"
|
||
class="use-global-color" type="button" title="Use global profile color"
|
||
aria-label="Use global profile color" hidden>↺</button></span>
|
||
<div class="header-navigation">
|
||
<button id="header-menu-toggle" class="header-menu-toggle" type="button" aria-expanded="false"
|
||
aria-controls="header-actions" aria-label="Open navigation menu">
|
||
<span aria-hidden="true"></span><span aria-hidden="true"></span><span aria-hidden="true"></span>
|
||
</button>
|
||
<div id="header-actions" class="header-actions"><button id="copy-link" class="secondary-button">Copy
|
||
link</button>
|
||
<details class="page-settings">
|
||
<summary class="secondary-button" aria-label="Page options"><span class="page-settings__label"><span
|
||
class="page-settings__status" aria-hidden="true"></span>Page</span><span
|
||
class="page-settings__chevron" aria-hidden="true">▾</span></summary>
|
||
<div class="page-settings-menu">
|
||
<p id="page-password-requirement" class="page-password-requirement" hidden>Access to page
|
||
options requires a password-protected note.</p>
|
||
<form id="set-page-password-form" class="page-password-inline" hidden>
|
||
<div class="page-password-inline__heading">
|
||
<label id="set-page-password-label" for="set-page-password">Set password</label>
|
||
<small id="set-page-password-help">Minimum 8 characters.</small>
|
||
</div>
|
||
<div class="page-password-inline__controls"><input id="set-page-password" type="password"
|
||
minlength="8" maxlength="128" autocomplete="new-password" placeholder="Min. 8 chars"
|
||
aria-describedby="set-page-password-help" required><button type="submit"
|
||
class="page-password-inline__save">Set</button></div>
|
||
<small id="set-page-password-error" class="error" role="alert" aria-live="polite"></small>
|
||
</form>
|
||
<button id="publish-page" class="page-settings-action" type="button"><span>Open
|
||
page</span><small>Copy its link and open it in a new tab</small></button>
|
||
<div class="page-settings-divider" role="separator"></div><label class="public-task-toggle"
|
||
title="Enable or disable the published page"><input id="public-page-enabled"
|
||
type="checkbox"> Enable Page</label><label class="public-task-toggle"
|
||
title="Allow visitors to update task checkboxes on the published page"><input
|
||
id="public-task-updates" type="checkbox"> Editable tasks</label><label
|
||
class="public-task-toggle"
|
||
title="Allow the published page to open without the resource password or private access"><input
|
||
id="unprotect-public-page" type="checkbox"> Unprotect Page</label>
|
||
</div>
|
||
</details><button id="files-button" class="secondary-button">Files</button><button id="delete-note"
|
||
class="secondary-button danger-button" hidden>Delete</button><button id="history-button"
|
||
class="secondary-button">History</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
<main class="editor-layout">
|
||
<section class="editor-panel">
|
||
<div class="editor-toolbar">
|
||
<div class="toolbar-group"><button data-format="bold" title="Bold"><strong>B</strong></button><button
|
||
data-format="italic" title="Italic"><em>I</em></button><button data-format="strike"
|
||
title="Strikethrough"><s>S</s></button><button data-format="heading1">H1</button><button
|
||
data-format="heading2">H2</button><button data-format="heading3">H3</button><button
|
||
data-format="heading4">H4</button><button data-format="bullet">• List</button><button
|
||
data-format="number" title="Numbered list · Ctrl/Cmd+Shift+7">1. List</button><button
|
||
data-format="task" title="Task list · Ctrl/Cmd+Shift+9">☑ Task</button><button
|
||
data-format="quote">Quote</button><button data-format="link">Link</button>
|
||
<details id="emoji-picker" class="emoji-picker">
|
||
<summary title="Insert emoji" aria-label="Insert emoji">😀 Emoji</summary>
|
||
<div class="emoji-picker-panel">
|
||
<input id="emoji-search" class="emoji-search" type="search" placeholder="Search emoji…"
|
||
autocomplete="off" aria-label="Search emoji">
|
||
<div id="emoji-categories" class="emoji-categories" aria-label="Emoji categories"></div>
|
||
<div id="emoji-grid" class="emoji-grid" role="listbox" aria-label="Emoji"></div>
|
||
<p id="emoji-empty" class="emoji-empty" hidden>No emoji found.</p>
|
||
</div>
|
||
</details>
|
||
<details class="markdown-more">
|
||
<summary title="Extended Markdown">More</summary>
|
||
<div class="markdown-more-menu"><button type="button" data-format="details">Collapsible
|
||
section</button><button type="button" data-format="toc">Table of
|
||
contents</button><button type="button" data-format="alert-success">Success
|
||
alert</button><button type="button" data-format="alert-info">Info
|
||
alert</button><button type="button" data-format="alert-warning">Warning
|
||
alert</button><button type="button" data-format="alert-danger">Danger
|
||
alert</button><button type="button" data-format="inline-code">Inline
|
||
code</button><button type="button" data-format="codeblock">Code block</button><button
|
||
type="button" data-format="codeblock-lines">Code block with line
|
||
numbers</button><button type="button" data-format="mermaid">Mermaid
|
||
diagram</button><button type="button" data-format="table">Table</button><button
|
||
type="button" data-format="footnote">Footnote</button><button type="button"
|
||
data-format="definition">Definition</button><button type="button"
|
||
data-format="highlight">Highlight</button><button type="button"
|
||
data-format="subscript">Subscript</button><button type="button"
|
||
data-format="superscript">Superscript</button><button type="button"
|
||
data-format="horizontal-rule">Horizontal rule</button></div>
|
||
</details>
|
||
</div>
|
||
<button id="mobile-upload-button" class="mobile-upload-button" type="button"
|
||
title="Upload a file"><span aria-hidden="true"></span> Upload</button>
|
||
<div class="editor-controls"><label>Font<select id="font-family">
|
||
<option value="mono">Mono</option>
|
||
<option value="system">System</option>
|
||
<option value="serif">Serif</option>
|
||
<option value="arial">Arial</option>
|
||
<option value="georgia">Georgia</option>
|
||
</select></label><label>Size<select id="font-size">
|
||
<option value="14" selected>14</option>
|
||
<option value="16">16</option>
|
||
<option value="18">18</option>
|
||
<option value="20">20</option>
|
||
<option value="22">22</option>
|
||
</select></label></div><button id="upload-button"
|
||
class="toolbar-action" title="Upload a file">Upload</button><input id="file-input" type="file" hidden><label
|
||
class="line-toggle"><input id="line-numbers-toggle" type="checkbox" checked> Editor
|
||
lines</label><label class="line-toggle"><input id="preview-line-numbers-toggle" type="checkbox">
|
||
Preview lines</label><label class="line-toggle"><input id="compact-toggle" type="checkbox" checked>
|
||
Compact</label><label class="line-toggle"><input id="line-links-toggle" type="checkbox">
|
||
Line links</label>
|
||
<div class="toolbar-fill"></div><button id="mode-toggle" class="toolbar-action active"
|
||
aria-pressed="true" aria-label="Markdown" title="Markdown"><span
|
||
class="control-label-full">Markdown</span><span class="control-label-short"
|
||
aria-hidden="true">M</span></button>
|
||
<button id="toolbar-collapse-toggle" class="toolbar-collapse-toggle" type="button"
|
||
aria-pressed="false" aria-label="Hide editor toolbar" title="Hide editor toolbar"><span
|
||
class="toolbar-collapse-toggle__icon" aria-hidden="true">⌃</span></button>
|
||
<div class="view-switch" aria-label="Editor view"><button data-view="edit" class="active"
|
||
aria-label="Edit" title="Edit"><span class="control-label-full">Edit</span><span
|
||
class="control-label-short" aria-hidden="true">E</span></button><button data-view="split"
|
||
aria-label="Split" title="Split"><span class="control-label-full">Split</span><span
|
||
class="control-label-short" aria-hidden="true">S</span></button><button data-view="preview"
|
||
aria-label="Preview" title="Preview"><span class="control-label-full">Preview</span><span
|
||
class="control-label-short" aria-hidden="true">P</span></button></div>
|
||
</div>
|
||
<div id="connection-notice" class="connection-notice" role="status" aria-live="polite" hidden>
|
||
<span class="connection-notice__signal"
|
||
aria-hidden="true"><span></span><span></span><span></span></span>
|
||
<span class="connection-notice__content"><strong id="connection-notice-title">Connection
|
||
interrupted</strong><span id="connection-notice-message">Trying to reconnect
|
||
automatically.</span></span>
|
||
</div>
|
||
<div id="editor-workspace" class="workspace view-edit">
|
||
<div class="editor-column">
|
||
<div class="column-label editor-column-label"><span>Editor</span>
|
||
<div class="authorship-controls"><label class="switch-control authorship-colors-switch"
|
||
title="Show or hide author coloring"><input id="authorship-colors-toggle"
|
||
type="checkbox" checked disabled><span class="switch-control__track"
|
||
aria-hidden="true"></span><span id="authorship-colors-label">Colors
|
||
on</span></label>
|
||
<div class="authorship-mode-control" role="group" aria-label="Authorship display"><button
|
||
type="button" data-authorship-mode="simple" class="active"
|
||
disabled>Simple</button><button type="button" data-authorship-mode="full"
|
||
disabled>Full</button></div>
|
||
</div>
|
||
</div>
|
||
<div id="participant-badges" class="participant-badges" aria-label="Participants" hidden></div>
|
||
<div class="editor-shell">
|
||
<div id="line-gutter" class="line-gutter" aria-hidden="true"></div>
|
||
<div id="authorship-layer" class="authorship-layer" aria-hidden="true"></div>
|
||
<div id="owner-labels" class="owner-labels" aria-hidden="true"></div><textarea id="editor"
|
||
wrap="off" placeholder="Start writing…" spellcheck="false" readonly></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="preview-column">
|
||
<div id="preview-label" class="column-label">Markdown preview</div>
|
||
<article id="preview" class="preview markdown-body"></article>
|
||
</div>
|
||
</div>
|
||
<footer class="editor-footer">
|
||
<div class="footer-left"><span id="characters">0 characters</span> · <span id="words">0
|
||
words</span>
|
||
<div class="footer-connection-block"> · <details id="connection-details" class="connection-details">
|
||
<summary title="WebSocket connection diagnostics"><span class="footer-status status"><span
|
||
id="status-dot" class="status__dot"></span><span
|
||
id="status-text">Connecting…</span></span><span id="socket-latency"
|
||
class="footer-socket-latency">— ms</span><span class="connection-details__chevron"
|
||
aria-hidden="true">▾</span></summary>
|
||
<div class="connection-diagnostics-popover">
|
||
<strong>Connection diagnostics</strong>
|
||
<dl class="connection-diagnostics-grid">
|
||
<div class="connection-diagnostics-grid__wide">
|
||
<dt>Quality</dt>
|
||
<dd data-connection-diagnostic="quality">Waiting</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Latency</dt>
|
||
<dd data-connection-diagnostic="latency">—</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Jitter</dt>
|
||
<dd data-connection-diagnostic="jitter">—</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Uptime</dt>
|
||
<dd data-connection-diagnostic="uptime">—</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Reconnects</dt>
|
||
<dd data-connection-diagnostic="reconnects">0</dd>
|
||
</div>
|
||
<div class="connection-diagnostics-grid__wide">
|
||
<dt>Client</dt>
|
||
<dd data-connection-diagnostic="client">—</dd>
|
||
</div>
|
||
<div class="connection-diagnostics-grid__wide">
|
||
<dt>Last event</dt>
|
||
<dd data-connection-diagnostic="last-event">—</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</details>
|
||
</div> ·
|
||
<details id="room-details" class="room-details">
|
||
<summary><span id="room-count">0 users</span><span id="chat-unread" class="chat-unread"
|
||
hidden></span></summary>
|
||
<div class="room-popover">
|
||
<section class="room-users"><strong>In this room</strong>
|
||
<ul id="room-users"></ul>
|
||
</section>
|
||
<section class="room-chat">
|
||
<div class="room-chat__head"><strong>Room chat</strong><span>Messages disappear after
|
||
disconnect</span></div>
|
||
<div id="chat-messages" class="chat-messages" aria-live="polite"></div>
|
||
<form id="chat-form" class="chat-form"><input id="chat-input" maxlength="1000"
|
||
autocomplete="off" placeholder="Write a message…"
|
||
aria-label="Chat message"><button type="submit">Send</button></form>
|
||
</section>
|
||
</div>
|
||
</details>
|
||
</div><span class="footer-right"><button id="shortcuts-button" class="footer-link" type="button"
|
||
aria-haspopup="dialog">Shortcuts</button> · <span id="access-level"
|
||
class="footer-access">Access: checking…</span> · <button id="footer-files" class="footer-link"
|
||
type="button">0 files</button> · <span id="save-state">Changes are saved
|
||
automatically</span></span>
|
||
</footer>
|
||
</section>
|
||
<aside id="history-panel" class="history-panel" aria-hidden="true">
|
||
<div class="history-header">
|
||
<div>
|
||
<h2>Change history</h2>
|
||
<p>Author, time, and version preview</p>
|
||
</div><button id="close-history" class="icon-button">×</button>
|
||
</div>
|
||
<div id="history-list" class="history-list"></div>
|
||
</aside>
|
||
</main>
|
||
<dialog id="shortcuts-dialog">
|
||
<div class="dialog-panel shortcuts-panel">
|
||
<div class="files-head">
|
||
<div>
|
||
<h2>Keyboard shortcuts</h2>
|
||
<p>Use Ctrl on Windows/Linux or Cmd on macOS.</p>
|
||
</div><button id="close-shortcuts" class="icon-button" type="button">×</button>
|
||
</div>
|
||
<div class="shortcut-grid">
|
||
<kbd>Ctrl/Cmd+Z</kbd><span>Undo last
|
||
change</span><kbd>Ctrl/Cmd+Shift+Z</kbd><span>Redo</span><kbd>Ctrl/Cmd+B</kbd><span>Bold</span><kbd>Ctrl/Cmd+I</kbd><span>Italic</span><kbd>Ctrl/Cmd+Shift+X</kbd><span>Strikethrough</span><kbd>Ctrl/Cmd+K</kbd><span>Link</span><kbd>Ctrl/Cmd+Shift+7</kbd><span>Numbered
|
||
list</span><kbd>Ctrl/Cmd+Shift+8</kbd><span>Bullet list</span><kbd>Ctrl/Cmd+Shift+9</kbd><span>Task
|
||
list</span><kbd>Alt+1…4</kbd><span>Headings H1–H4</span><kbd>Tab</kbd><span>Indent by 2
|
||
spaces</span><kbd>Shift+Tab</kbd><span>Remove indentation</span>__EXTRA_SHORTCUTS__
|
||
</div>
|
||
</div>
|
||
</dialog>
|
||
<dialog id="files-dialog" class="image-editor-dialog files-dialog">
|
||
<div class="image-editor-panel files-panel">
|
||
<div class="files-head">
|
||
<div>
|
||
<h2>Note files</h2>
|
||
<p>Copy a direct link or ready Markdown/Alias code.</p>
|
||
</div>
|
||
<div class="files-head-actions">
|
||
<button id="files-upload-button" class="action-button action-button--primary compact-button"
|
||
type="button">Upload file</button>
|
||
<button id="close-files" class="icon-button" type="button" aria-label="Close files">×</button>
|
||
</div>
|
||
</div>
|
||
<div id="files-list" class="files-list"></div>
|
||
</div>
|
||
</dialog>
|
||
<dialog id="identity-dialog">
|
||
<form id="identity-form" autocomplete="on" class="dialog-panel identity-panel">
|
||
<h2>What should we call you?</h2>
|
||
<p class="dialog-copy">Use a free nickname without an account, or register it to reserve it.</p><input
|
||
id="nickname" maxlength="40" autocomplete="off" data-bwignore="true" required
|
||
placeholder="Name or nickname">
|
||
<div class="identity-actions"><button id="guest-continue" class="primary-button" type="submit">Continue as
|
||
guest</button><button id="show-register" class="text-button" type="button">Register</button><button
|
||
id="show-login" class="text-button" type="button">Log in</button></div>
|
||
<section id="auth-panel" class="auth-panel" hidden>
|
||
<h3 id="auth-mode-title">Log in</h3><label id="auth-email-field"><span
|
||
id="auth-email-label">E-mail</span><input id="auth-email" name="username" type="email"
|
||
maxlength="320" autocomplete="username"
|
||
placeholder="you@example.com"></label><label>Password<input id="auth-password" name="password"
|
||
type="password" minlength="8" maxlength="128" autocomplete="current-password"></label><button
|
||
id="auth-submit" class="primary-button" type="submit">Log in and continue</button>
|
||
<div class="identity-links"><button id="show-reset" class="text-button" type="button">Forgot
|
||
password?</button><button id="auth-back" class="text-button" type="button">Back to
|
||
nickname</button><button id="logout-account" class="text-button" type="button">Log out saved
|
||
account</button></div>
|
||
</section>
|
||
<p id="identity-error" class="form-message error" role="alert"></p>
|
||
</form>
|
||
</dialog>
|
||
<dialog id="password-dialog">
|
||
<form id="password-form" class="dialog-panel">
|
||
<h2>Protected __PROTECTED_RESOURCE_LABEL__</h2><input id="open-password" type="password"
|
||
autocomplete="current-password" required placeholder="Password">
|
||
<p id="password-error" class="form-message error"></p><button class="primary-button">Open</button><a
|
||
class="dialog-link" href="/">Cancel</a>
|
||
</form>
|
||
</dialog>
|
||
<div id="mobile-editor-bubble" class="mobile-editor-bubble" aria-label="Quick editor actions">
|
||
<button id="mobile-bubble-drag" class="mobile-bubble-drag" type="button" title="Move quick actions"
|
||
aria-label="Move quick actions">⋮⋮</button>
|
||
<button id="mobile-files-button" type="button" title="Files" aria-label="Open files">📎</button>
|
||
<details id="mobile-editor-options" class="mobile-editor-options">
|
||
<summary title="Editor options" aria-label="Open editor options">⚙</summary>
|
||
<div class="mobile-editor-options__panel">
|
||
<label>Font<select id="mobile-font-family">
|
||
<option value="mono">Mono</option>
|
||
<option value="system">System</option>
|
||
<option value="serif">Serif</option>
|
||
<option value="arial">Arial</option>
|
||
<option value="georgia">Georgia</option>
|
||
</select></label>
|
||
<label>Size<select id="mobile-font-size">
|
||
<option value="14">14</option>
|
||
<option value="16">16</option>
|
||
<option value="18">18</option>
|
||
<option value="20">20</option>
|
||
<option value="22">22</option>
|
||
</select></label>
|
||
<label class="public-task-toggle mobile-option-check"><input id="mobile-line-numbers-toggle"
|
||
type="checkbox"> Editor lines</label>
|
||
<label class="public-task-toggle mobile-option-check"><input id="mobile-preview-line-numbers-toggle"
|
||
type="checkbox"> Preview lines</label>
|
||
<label class="public-task-toggle mobile-option-check"><input id="mobile-compact-toggle" type="checkbox">
|
||
Compact view</label>
|
||
<label class="public-task-toggle mobile-option-check"><input id="mobile-line-links-toggle"
|
||
type="checkbox"> Line links</label>
|
||
</div>
|
||
</details>
|
||
<label id="mobile-color-button" class="mobile-color-button" title="Editor color"
|
||
aria-label="Change editor color"><span class="mobile-color-dot" aria-hidden="true"></span><input
|
||
id="mobile-color-picker" type="color" aria-label="Change editor color"></label>
|
||
<button id="mobile-chat-button" class="mobile-chat-button" type="button" title="Chat"
|
||
aria-label="Open chat">💬<span id="mobile-chat-unread" class="mobile-chat-unread" hidden></span></button>
|
||
<details id="mobile-connection-details" class="mobile-connection-details">
|
||
<summary id="mobile-connection-status" class="mobile-connection-status"
|
||
title="WebSocket connection diagnostics"><span id="mobile-status-dot" class="status__dot"></span><span
|
||
id="mobile-status-text">Connecting…</span><span id="mobile-socket-latency">—</span></summary>
|
||
<div class="connection-diagnostics-popover mobile-connection-diagnostics-popover">
|
||
<strong>Connection diagnostics</strong>
|
||
<dl class="connection-diagnostics-grid">
|
||
<div class="connection-diagnostics-grid__wide">
|
||
<dt>Quality</dt>
|
||
<dd data-connection-diagnostic="quality">Waiting</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Latency</dt>
|
||
<dd data-connection-diagnostic="latency">—</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Jitter</dt>
|
||
<dd data-connection-diagnostic="jitter">—</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Uptime</dt>
|
||
<dd data-connection-diagnostic="uptime">—</dd>
|
||
</div>
|
||
<div>
|
||
<dt>Reconnects</dt>
|
||
<dd data-connection-diagnostic="reconnects">0</dd>
|
||
</div>
|
||
<div class="connection-diagnostics-grid__wide">
|
||
<dt>Client</dt>
|
||
<dd data-connection-diagnostic="client">—</dd>
|
||
</div>
|
||
<div class="connection-diagnostics-grid__wide">
|
||
<dt>Last event</dt>
|
||
<dd data-connection-diagnostic="last-event">—</dd>
|
||
</div>
|
||
</dl>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
<div id="toast" class="toast"></div>
|
||
</body>
|
||
|
||
</html> |