More gui
This commit is contained in:
17 files changed
+1043
-31
No files matched your search
+13
-2
@@ -6,10 +6,21 @@
|
||||
<meta name="description" content="Pastable">
|
||||
<title>{% block title %}Pastable{% endblock %}</title>
|
||||
<link rel="stylesheet" href="/static/app.css">
|
||||
{% block head %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<a href="/">Pastable</a>
|
||||
<header class="site-header">
|
||||
<a class="brand" href="/" aria-label="Pastable home">
|
||||
<svg width="30" height="34" viewBox="0 0 30 34" fill="none" aria-hidden="true">
|
||||
<rect x="2" y="2" width="26" height="30" rx="6" fill="currentColor"/>
|
||||
<path d="M9 11h12M9 17h12M9 23h7" stroke="white" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<span>Pastable</span>
|
||||
</a>
|
||||
<nav aria-label="Main navigation">
|
||||
<a href="/" {% block home_nav %}{% endblock %}>Documentation</a>
|
||||
<a href="/gui" {% block gui_nav %}{% endblock %}>Browser app <span aria-hidden="true">↗</span></a>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
{% block content %}
|
||||
|
||||
@@ -0,0 +1,134 @@
|
||||
{% 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 %}
|
||||
+5
-2
@@ -1,4 +1,7 @@
|
||||
{% extends "base.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% block home_nav %}aria-current="page"{% endblock %}
|
||||
{% block content %}
|
||||
<h1>Pastable</h1>
|
||||
<article class="card readme">
|
||||
{{ readme|safe }}
|
||||
</article>
|
||||
{% endblock %}
|
||||
+9
-2
@@ -1,4 +1,11 @@
|
||||
{% extends "base.html" %}
|
||||
{% extends "base.html" %}
|
||||
{% block title %}{{ paste.id }} · Pastable{% endblock %}
|
||||
{% block content %}
|
||||
{{ code|safe }}
|
||||
<article class="card paste-view">
|
||||
<div class="section-heading">
|
||||
<div><p class="eyebrow">SHARED PASTE</p><h1>{{ paste.id }}</h1></div>
|
||||
<p class="badge view-counter">Views: {{ paste.views }} / {% match paste.max_views %}{% when Some with (max) %}{{ max }}{% when None %}∞{% endmatch %}</p>
|
||||
</div>
|
||||
{{ code|safe }}
|
||||
</article>
|
||||
{% endblock %}
|
||||
Reference in new issue
Block a user