135 lines
7.2 KiB
HTML
135 lines
7.2 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Browser app · Pastable{% endblock %}
|
|
{% block gui_nav %}aria-current="page"{% endblock %}
|
|
{% block content %}
|
|
<div class="workspace-heading">
|
|
<div>
|
|
<p class="eyebrow">YOUR SHARING WORKSPACE</p>
|
|
<h1>Pastes, links & secrets.</h1>
|
|
<p class="muted">A little space for things you want to pass along.</p>
|
|
</div>
|
|
<span id="session-label" class="badge">Anonymous</span>
|
|
</div>
|
|
|
|
<details id="account" class="card account">
|
|
<summary>Account <span class="muted">· optional</span></summary>
|
|
<form id="login-form">
|
|
<p class="muted">Sign in to manage your shares. A new username creates an account.</p>
|
|
<div class="form-grid">
|
|
<label>Username<input id="username" autocomplete="username" required pattern="[^:]+" maxlength="128"></label>
|
|
<label>Password<input id="password" type="password" autocomplete="current-password" required></label>
|
|
</div>
|
|
<div class="actions">
|
|
<button type="submit">Sign in / create account</button>
|
|
<button id="logout" type="button" class="secondary" hidden>Sign out</button>
|
|
</div>
|
|
<p class="hint">Your credentials stay in memory for this page only.</p>
|
|
</form>
|
|
</details>
|
|
|
|
<p id="status" class="status" role="status" aria-live="polite" tabindex="-1" hidden></p>
|
|
|
|
<nav class="workspace-tabs" aria-label="Workspace">
|
|
<a href="#compose" data-panel="compose" aria-current="page">Create a share</a>
|
|
<a href="#collection" data-panel="collection">My collection <span id="note-count" class="count">0</span></a>
|
|
<a href="#open" data-panel="open">Open a share</a>
|
|
</nav>
|
|
|
|
<section id="compose" class="panel" aria-labelledby="editor-title">
|
|
<div class="editor-layout">
|
|
<div class="card">
|
|
<div class="section-heading">
|
|
<h2 id="editor-title">Create a share</h2>
|
|
<button id="new-note" type="button" class="secondary" hidden>Cancel editing</button>
|
|
</div>
|
|
<form id="editor-form">
|
|
<div class="form-grid">
|
|
<label>What are you sharing?
|
|
<select id="kind"><option value="note">Text or code</option><option value="url">Short link</option></select>
|
|
</label>
|
|
<label>Custom ID <span class="muted">· optional</span>
|
|
<input id="custom-id" placeholder="Generate one for me" pattern="[^/]+" autocomplete="off">
|
|
</label>
|
|
</div>
|
|
<label><span id="content-label">Your text or code</span>
|
|
<textarea id="content" rows="15" spellcheck="false" placeholder="Paste something worth sharing…" required></textarea>
|
|
</label>
|
|
<div id="language-field">
|
|
<label>Language <span class="muted">· optional</span>
|
|
<select id="language">
|
|
<option value="">Auto detect</option>
|
|
<option value="text">Plain text</option>
|
|
{% for language in languages %}
|
|
<option value="{{ language }}">{{ language }}</option>
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
</div>
|
|
<p id="edit-hint" class="hint" hidden></p>
|
|
<div class="actions editor-actions">
|
|
<button id="save" type="submit">Create share</button>
|
|
<span id="ownership-hint" class="hint">Shared anonymously.</span>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<aside class="card options" aria-labelledby="options-title">
|
|
<p class="eyebrow">MAKE IT YOURS</p>
|
|
<h2 id="options-title">Share settings</h2>
|
|
<label>Expires after <span class="muted">· seconds</span>
|
|
<input id="expires" form="editor-form" type="number" min="0" step="1" placeholder="Never">
|
|
</label>
|
|
<label>Maximum views
|
|
<input id="max-views" form="editor-form" type="number" min="1" step="1" placeholder="Unlimited">
|
|
</label>
|
|
<label id="once-field" class="check-label">
|
|
<input id="once" form="editor-form" type="checkbox"> One-time secret
|
|
</label>
|
|
<p class="hint">One-time shares disappear after their first read. A link's views count its redirects.</p>
|
|
<hr>
|
|
<p class="hint">If a custom ID is taken, you'll get a fresh one. Always use the link returned after saving.</p>
|
|
</aside>
|
|
</div>
|
|
<section id="share-result" class="card result" aria-labelledby="result-title" hidden>
|
|
<p class="eyebrow">READY TO SHARE</p>
|
|
<h2 id="result-title">Your link</h2>
|
|
<div class="copy-row">
|
|
<input id="share-url" aria-label="Share URL" readonly>
|
|
<button id="copy-url" type="button" class="secondary">Copy link</button>
|
|
</div>
|
|
<p><a id="share-link" target="_blank" rel="noopener noreferrer">Open share ↗</a> <span class="hint">Opening counts as a view.</span></p>
|
|
</section>
|
|
</section>
|
|
|
|
<section id="collection" class="panel card" aria-labelledby="collection-title" hidden>
|
|
<div class="section-heading">
|
|
<div><h2 id="collection-title">My collection</h2><p class="hint">Editing here does not count as a view.</p></div>
|
|
<button id="refresh" type="button" class="secondary">Refresh</button>
|
|
</div>
|
|
<label class="search-label">Filter shares<input id="search" type="search" placeholder="Find by ID, content or language…"></label>
|
|
<div id="collection-empty" class="empty-state">Sign in to see and manage your shares.</div>
|
|
<div id="collection-table" class="table-scroll" hidden>
|
|
<table>
|
|
<thead><tr><th scope="col">Share</th><th scope="col">Content</th><th scope="col">Views</th><th scope="col">Created</th><th scope="col">Updated</th><th scope="col">Expires</th><th scope="col">Actions</th></tr></thead>
|
|
<tbody id="note-rows"></tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="open" class="panel card" aria-labelledby="open-title" hidden>
|
|
<h2 id="open-title">Open a share</h2>
|
|
<p class="muted">Have an ID or a Pastable link? Open it here.</p>
|
|
<form id="open-form">
|
|
<label>ID or share URL<input id="open-id" placeholder="my-paste or a full share URL" required autocomplete="off"></label>
|
|
<div class="form-grid">
|
|
<label>Type<select id="open-kind"><option value="note">Text or code</option><option value="url">Short link</option></select></label>
|
|
<label id="format-field">Display<select id="open-format"><option value="html">Syntax highlighted</option><option value="plain">Plain text</option></select></label>
|
|
</div>
|
|
<button type="submit" id="open-submit">Open paste</button>
|
|
<p class="hint">Opening a paste or following a link counts as a view. Short links open in a new tab.</p>
|
|
</form>
|
|
<div id="preview" class="preview" aria-live="polite" hidden></div>
|
|
</section>
|
|
<noscript><p class="status">Enable JavaScript to use the browser app. The HTTP API remains available.</p></noscript>
|
|
<script src="/static/gui.js" defer></script>
|
|
{% endblock %}
|