37 lines
6.0 KiB
HTML
37 lines
6.0 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>gen</title>
|
||
<style>
|
||
:root{--b:#000;--f:#eee;--m:#777;--l:#292929;--s:#111}*{box-sizing:border-box}body{margin:0;background:var(--b);color:var(--f);font:13px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}main{width:min(680px,calc(100% - 12px));margin:auto;padding:18px 0 35px;text-align:center}.box{border:1px solid var(--l);padding:12px;margin-bottom:10px}label{display:block;margin:8px 0 4px;color:var(--m);font-size:10px;text-align:left}input,textarea,select{width:100%;border:1px solid var(--l);border-radius:0;background:var(--s);color:var(--f);font:13px ui-monospace;padding:7px;outline:0}input:focus,textarea:focus,select:focus{border-color:#666}textarea{resize:vertical;min-height:58px}.row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.checks,.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin-top:9px}.check{display:flex;align-items:center;gap:5px;border:1px solid var(--l);padding:5px 7px;margin:0;color:var(--f)}.check input{width:auto}button{border:1px solid var(--f);border-radius:0;background:var(--f);color:#000;font:10px ui-monospace;padding:6px 9px;cursor:pointer}button.secondary{border-color:var(--l);background:var(--s);color:var(--f)}button:hover{filter:brightness(.8)}.preview{min-height:100px;display:grid;place-items:center;border:1px solid var(--l);padding:14px;overflow:auto}.preview pre{margin:0;white-space:pre;font:13px ui-monospace}.status{height:16px;color:var(--m);font-size:10px;margin-top:5px}.toolbar{display:flex;gap:6px;margin-bottom:8px}.toolbar input{flex:1}.symbols{display:flex;flex-wrap:wrap;justify-content:center;gap:3px;max-height:390px;overflow:auto;border:1px solid var(--l);padding:8px}.symbols button{width:32px;height:30px;padding:0;border:1px solid var(--l);background:var(--s);color:var(--f);font-size:16px}.symbols button:hover{border-color:#aaa;background:#222}@media(max-width:500px){.row{grid-template-columns:1fr}.toolbar{flex-direction:column}}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<main>
|
||
<div class="box">
|
||
<label for="text">text</label><input id="text" value="" maxlength="80" spellcheck="false">
|
||
<div class="row"><div><label for="left">left</label><input id="left" value="" maxlength="8" spellcheck="false"></div><div><label for="right">right</label><input id="right" value="" maxlength="8" spellcheck="false"></div></div>
|
||
<label for="symbol">separator</label><input id="symbol" value="" maxlength="12" spellcheck="false">
|
||
<div class="row"><div><label for="repeat">repeat</label><input id="repeat" type="number" min="1" max="12" value="1"></div><div><label for="caseMode">case</label><select id="caseMode"><option value="normal">normal</option><option value="upper">UPPERCASE</option><option value="lower">lowercase</option></select></div></div>
|
||
<div class="checks"><label class="check"><input id="spaces" type="checkbox" checked> spaces</label><label class="check"><input id="trim" type="checkbox"> trim</label><label class="check"><input id="mirror" type="checkbox"> mirror</label></div>
|
||
<div class="actions"><button id="random">random</button><button id="clear" class="secondary">clear</button></div>
|
||
</div>
|
||
<div class="box">
|
||
<div class="preview"><pre id="preview"></pre></div>
|
||
<label for="output">out</label><textarea id="output" readonly></textarea>
|
||
<div class="actions"><button id="copy">copy</button><button id="download" class="secondary">download</button></div><div id="status" class="status"></div>
|
||
</div>
|
||
<div class="box">
|
||
<div class="toolbar"><input id="filter" placeholder="" spellcheck="false"><button id="copyAll" class="secondary">copy all</button></div>
|
||
<div class="symbols" id="symbols"></div>
|
||
</div>
|
||
</main>
|
||
<script>
|
||
const $=x=>document.getElementById(x),ids=["text","left","right","symbol","repeat","caseMode","spaces","trim","mirror"],symbols="★ ☆ ✦ ✧ ✶ ✷ ✹ ✺ ✿ ❀ ❁ ❃ ❋ ☀ ☼ ☾ ☽ ☁ ☂ ☃ ❄ ♥ ♡ ❤ ❥ ❣ ☮ ☯ ☠ ☢ ☣ ✓ ✔ ✕ ✖ ✗ ➜ ➤ ➳ → ← ↑ ↓ ↗ ↘ ↔ ⇢ » « › ‹ 「 」 『 』 【 】 〈 〉 • · ‣ ⁕ ※ ⁂ ⁑ † ‡ § ¶ ∞ ≈ ≠ ≤ ≥ ± × ÷ √ ∑ ∴ ∵ ⌁ 〜 〰 ─ ━ ═ ╴ ╶ ◈ ◇ ◆ ○ ● ◌ □ ■ ▸ ◂ △ ▽ ☰ ⌘ ⌫ ⏎♠ ♣ ♦ ♤ ♧ ⚙ ✎ ✉ ☎ ☑ ☒ ☻ ☺ ☹ ツ シ 彡 ヅ ヽ ヾ ・ 〒 〆 々 乂 亗 𖤐 ".split(" ");
|
||
function render(){let t=$("text").value;if($("trim").checked)t=t.trim();if(!$("spaces").checked)t=t.replace(/\s+/g,"");if($("caseMode").value==="upper")t=t.toUpperCase();if($("caseMode").value==="lower")t=t.toLowerCase();if($("mirror").checked)t=[...t].reverse().join("");let n=Math.max(1,Math.min(12,+$("repeat").value||1)),x=Array(n).fill($("left").value+t+$("right").value).join($("symbol").value);$("preview").textContent=x;$("output").value=x}function msg(x){$("status").textContent=x;clearTimeout(msg.t);msg.t=setTimeout(()=>$("status").textContent="",1800)}function table(){let q=$("filter").value.toLowerCase();$("symbols").innerHTML=symbols.filter(x=>x.toLowerCase().includes(q)).map((x,i)=>`<button title="copy" data-i="${i}">${x}</button>`).join("")}ids.forEach(id=>$(id).addEventListener("input",render));$("filter").addEventListener("input",table);$("symbols").onclick=async e=>{if(e.target.tagName==="BUTTON"){await navigator.clipboard.writeText(symbols[e.target.dataset.i]);msg("copied")}};$("copy").onclick=async()=>{await navigator.clipboard.writeText($("output").value);msg("copied")};$("copyAll").onclick=async()=>{await navigator.clipboard.writeText([...new Set(symbols)].join(""));msg("copied all")};$("clear").onclick=()=>{$("text").value="";render()};$("random").onclick=()=>{let a=()=>symbols[Math.random()*symbols.length|0];$("left").value=a();$("right").value=a();$("symbol").value=" "+a()+" ";render();msg("randomized")};$("download").onclick=()=>{let a=document.createElement("a");a.href=URL.createObjectURL(new Blob([$("output").value+"\n"],{type:"text/plain"}));a.download="ascii-line.txt";a.click()};table();render();
|
||
</script>
|
||
</body>
|
||
</html>
|