forked from snxraven/p2ns
peer.paste style/layout
This commit is contained in:
Raven Scott
@@ -8,88 +8,106 @@
|
||||
<link rel="stylesheet" href="/api/vendor/highlight-dark.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="page">
|
||||
<section class="hero">
|
||||
<h1>peer.paste</h1>
|
||||
<p>Share temporary text with one clean link.</p>
|
||||
</section>
|
||||
<div class="app-shell">
|
||||
<header class="app-header">
|
||||
<div class="brand">
|
||||
<h1>peer.paste</h1>
|
||||
<p>Share temporary text with one clean link.</p>
|
||||
</div>
|
||||
<span id="live-dot" class="live-dot">LIVE</span>
|
||||
</header>
|
||||
|
||||
<section class="panel">
|
||||
<form id="create-form" class="create-form">
|
||||
<label for="content" class="label">Secret / Paste</label>
|
||||
<div class="toolbar">
|
||||
<select id="format">
|
||||
<option value="text">Text</option>
|
||||
<option value="markdown">Markdown</option>
|
||||
</select>
|
||||
<select id="theme">
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
</select>
|
||||
<button type="button" id="toggle-preview" class="ghost">Preview</button>
|
||||
<button type="button" id="copy-editor" class="ghost">Copy Text</button>
|
||||
</div>
|
||||
<textarea id="content" rows="14" required placeholder="Paste text here..."></textarea>
|
||||
<div id="preview-panel" class="preview-panel hidden">
|
||||
<div id="preview-content">Preview will appear here.</div>
|
||||
</div>
|
||||
<div class="app-body">
|
||||
<section class="compose panel">
|
||||
<form id="create-form" class="create-form">
|
||||
<div class="compose-grid">
|
||||
<div class="compose-main">
|
||||
<label for="content" class="label">Paste</label>
|
||||
<div class="toolbar">
|
||||
<select id="format" title="Format">
|
||||
<option value="text">Text</option>
|
||||
<option value="markdown">Markdown</option>
|
||||
</select>
|
||||
<select id="theme" title="Theme">
|
||||
<option value="dark">Dark</option>
|
||||
<option value="light">Light</option>
|
||||
</select>
|
||||
<button type="button" id="toggle-preview" class="ghost">Preview</button>
|
||||
<button type="button" id="copy-editor" class="ghost">Copy</button>
|
||||
</div>
|
||||
<textarea id="content" required placeholder="Paste text here…"></textarea>
|
||||
<div id="preview-panel" class="preview-panel hidden">
|
||||
<div id="preview-content">Preview will appear here.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<details class="advanced">
|
||||
<summary>Advanced options</summary>
|
||||
<div class="advanced-grid">
|
||||
<label>Language (optional)
|
||||
<input type="text" id="language" maxlength="32" placeholder="plain / js / json / md" />
|
||||
</label>
|
||||
<label>Expires in hours
|
||||
<input type="number" id="expiresHours" min="1" max="168" value="24" />
|
||||
</label>
|
||||
<label>Max reads (0 = unlimited)
|
||||
<input type="number" id="maxReads" min="0" max="1000000" value="0" />
|
||||
</label>
|
||||
<label class="check-row">
|
||||
<input type="checkbox" id="destroyOnRead" />
|
||||
Burn after first read
|
||||
</label>
|
||||
<label class="check-row">
|
||||
<input type="checkbox" id="publicPaste" />
|
||||
Public paste (disable encryption)
|
||||
</label>
|
||||
<label>Passphrase (optional encryption key derivation)
|
||||
<input id="passphrase" type="password" autocomplete="off" placeholder="Optional extra layer" />
|
||||
</label>
|
||||
<label>Attachments (up to 64MB total)
|
||||
<input id="attachments" type="file" multiple />
|
||||
</label>
|
||||
<aside class="compose-options" aria-label="Paste options">
|
||||
<h2 class="options-title">Options</h2>
|
||||
<div class="options-stack">
|
||||
<label class="field">
|
||||
<span>Language</span>
|
||||
<input type="text" id="language" maxlength="32" placeholder="plain, js, json…" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Expires (hours)</span>
|
||||
<input type="number" id="expiresHours" min="1" max="168" value="24" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Max reads</span>
|
||||
<input type="number" id="maxReads" min="0" max="1000000" value="0" title="0 = unlimited" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Passphrase</span>
|
||||
<input id="passphrase" type="password" autocomplete="off" placeholder="Optional" />
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>Attachments</span>
|
||||
<input id="attachments" type="file" multiple />
|
||||
</label>
|
||||
<label class="check-row">
|
||||
<input type="checkbox" id="destroyOnRead" />
|
||||
<span>Burn after first read</span>
|
||||
</label>
|
||||
<label class="check-row">
|
||||
<input type="checkbox" id="publicPaste" />
|
||||
<span>Public (no encryption)</span>
|
||||
</label>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="actions">
|
||||
<button type="submit" id="create-btn">Create secure link</button>
|
||||
<button type="button" id="clear-btn" class="ghost">Clear</button>
|
||||
<div id="create-result" class="result hidden">
|
||||
<div class="result-inner">
|
||||
<div class="result-copy">
|
||||
<span class="result-label">Share link</span>
|
||||
<div class="link-row">
|
||||
<input id="share-link" type="text" readonly />
|
||||
<button id="copy-link-btn" type="button" class="ghost">Copy</button>
|
||||
<a id="open-link-btn" class="ghost link-btn" href="#" target="_blank" rel="noopener">Open</a>
|
||||
</div>
|
||||
</div>
|
||||
<p class="meta-row" id="result-meta"></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="actions">
|
||||
<button type="submit" id="create-btn">Create secure link</button>
|
||||
<button type="button" id="clear-btn" class="ghost">Clear</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
||||
<aside class="sidebar panel" aria-label="Recent pastes">
|
||||
<div class="list-head">
|
||||
<h2>Recent</h2>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="create-result" class="result hidden">
|
||||
<h2>Share this link</h2>
|
||||
<p class="hint">Anyone with this link can read the paste.</p>
|
||||
<div class="link-row">
|
||||
<input id="share-link" type="text" readonly />
|
||||
<button id="copy-link-btn" type="button" class="ghost">Copy</button>
|
||||
<a id="open-link-btn" class="ghost link-btn" href="#" target="_blank" rel="noopener">Open</a>
|
||||
<div id="sidebar-scroll" class="sidebar-scroll">
|
||||
<div id="list" class="sidebar-list"></div>
|
||||
<div id="list-loading" class="list-loading hidden">Loading more…</div>
|
||||
</div>
|
||||
<div class="meta-row" id="result-meta"></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel compact">
|
||||
<div class="list-head">
|
||||
<h2>Recent active pastes</h2>
|
||||
<span id="live-dot" class="live-dot">LIVE</span>
|
||||
</div>
|
||||
<div id="list"></div>
|
||||
<div id="list-loading" class="list-loading hidden">Loading more...</div>
|
||||
</section>
|
||||
</main>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
<script src="/api/vendor/marked.min.js"></script>
|
||||
<script src="/api/vendor/highlight.min.js"></script>
|
||||
<script src="/main.js"></script>
|
||||
|
||||
Reference in New Issue
Block a user