fen
16cad8796f
Give the custom expiry and readable N times submenus a shared boxed container with proper padding, indent them under their parent option, and style the number inputs and unit select with palette vars, the existing radius scale, and the select chevron. No em dashes, no hard coded colors in new rules.
94 lines
5.2 KiB
HTML
94 lines
5.2 KiB
HTML
{{template "head" .}}
|
|
{{template "topbar" .}}
|
|
<div class="deck">
|
|
<div class="pane-l-col">
|
|
<div class="float pane-l-head">
|
|
<div class="editor-head">
|
|
<div class="editor-head-title">
|
|
<input id="title" placeholder="Title">
|
|
</div>
|
|
<div class="editor-head-settings">
|
|
<select id="language">
|
|
<option value="">auto</option>
|
|
<option>go</option><option>python</option><option>javascript</option><option>typescript</option>
|
|
<option>rust</option><option>c</option><option>cpp</option><option>java</option><option>csharp</option>
|
|
<option>bash</option><option>sql</option><option>yaml</option><option>json</option>
|
|
<option>html</option><option>css</option><option>xml</option><option>php</option>
|
|
<option>ruby</option><option>perl</option><option>lua</option><option>dockerfile</option>
|
|
<option>toml</option><option>ini</option><option>diff</option>
|
|
<option>markdown</option><option>text</option>
|
|
</select>
|
|
<button class="btn btn-icon" id="reguess" title="Re-detect language" type="button"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 12a9 9 0 1 1-2.64-6.36"/><polyline points="21 3 21 9 15 9"/></svg></button>
|
|
<button type="button" class="btn btn-icon wrap-toggle" id="wrap-toggle" title="Toggle line wrap" aria-pressed="false">wrap</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="float editor-wrap">
|
|
<div class="gutter" id="gutter">1</div>
|
|
<textarea class="editor" id="content" placeholder="Paste your code, text, or notes here…" spellcheck="false"></textarea>
|
|
</div>
|
|
<div class="created-banner" id="created"></div>
|
|
<div class="actionbar">
|
|
<span class="hint">Ctrl+Enter to create</span>
|
|
<div class="spacer spacer-flex"></div>
|
|
<button class="btn" id="create">Create</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="pane-r">
|
|
<div class="float side-section">
|
|
<h3>Expiry</h3>
|
|
<div class="seg">
|
|
<label><input type="radio" name="exp" value=""> Never</label>
|
|
<label><input type="radio" name="exp" value="1h"> 1 hour</label>
|
|
<label><input type="radio" name="exp" value="24h"> 1 day</label>
|
|
<label><input type="radio" name="exp" value="168h" checked> 1 week</label>
|
|
<label><input type="radio" name="exp" value="720h"> 30 days</label>
|
|
<label><input type="radio" name="exp" value="custom"> Custom</label>
|
|
</div>
|
|
<div class="pw-row submenu hidden" id="customexp-row">
|
|
<div class="exp-group">
|
|
<input type="number" class="num-input" id="expnum" min="1" placeholder="90" aria-label="Custom expiry amount">
|
|
<select id="expunit" class="unit-select">
|
|
<option value="m">minutes</option>
|
|
<option value="h" selected>hours</option>
|
|
<option value="d">days</option>
|
|
<option value="w">weeks</option>
|
|
<option value="mo">months</option>
|
|
</select>
|
|
</div>
|
|
<div class="hint danger-hint hidden" id="customexp-err"></div>
|
|
</div>
|
|
</div>
|
|
<div class="float side-section">
|
|
<h3>Protection</h3>
|
|
<div class="protect">
|
|
<label class="toggle"><input type="checkbox" id="haspw"> Password lock</label>
|
|
<div class="pw-row hidden" id="pwrow"><div class="pw-field"><input type="password" id="password" placeholder="Password" autocomplete="new-password"><button type="button" class="reveal" id="pwreveal" title="Show password" tabindex="-1"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/><line class="eye-slash" x1="4" y1="4" x2="20" y2="20"/></svg></button></div></div>
|
|
<label class="toggle"><input type="checkbox" id="burn"> Burn after read</label>
|
|
<div class="pw-row submenu hidden" id="burnrow"><div class="exp-group readable-group"><label class="hint readable-label">Readable</label><input type="number" class="num-input" id="burnreads" min="1" value="1" aria-label="Times readable"><label class="hint readable-label">times</label></div></div>
|
|
<label class="toggle"><input type="checkbox" id="unlisted"> Unlisted</label>
|
|
</div>
|
|
</div>
|
|
<div class="float side-section">
|
|
<h3>Attachment</h3>
|
|
<div class="dropzone" id="dropzone" title="Paste (Ctrl+V), drop a file here, or click to browse">
|
|
Drop a file here, press Ctrl+V, or click to browse
|
|
</div>
|
|
<input type="file" id="file-input" class="file-input" aria-label="Choose a file">
|
|
<div id="file-chip-slot"></div>
|
|
<div class="hint hint-lg hidden mt6" id="file-text-note">File pastes ignore the text editor (one file per paste)</div>
|
|
</div>
|
|
<div class="float side-section">
|
|
<h3>Custom URL</h3>
|
|
<input type="text" id="custom" class="custom-input" placeholder="my-snippet">
|
|
</div>
|
|
<div class="float side-section hidden" id="result-card">
|
|
<h3>Result</h3>
|
|
<div class="hint wrap-normal" id="result">empty</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/static/new.js" defer></script>
|
|
{{template "foot" .}}
|