itty-bitty/docs/edit.html
Nicholas Jitkoff 96fdfcfa43 Update edit
2022-07-21 02:39:52 -07:00

102 lines
No EOL
6.5 KiB
HTML

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src data: 'self'; script-src cdnjs.cloudflare.com cdn.quilljs.com 'self'; connect-src https://codepen.io; font-src https://fonts.gstatic.com; style-src https://fonts.googleapis.com cdnjs.cloudflare.com cdn.quilljs.com 'unsafe-inline' 'self'">
<meta id="themeColor" name="theme-color" content="#f1f1f1" media="(prefers-color-scheme: light)">
<meta id="themeColorDark" name="theme-color" content="#121212" media="(prefers-color-scheme: dark)">
<link rel="canonical" id="canonical" href="/edit">
<title>itty.bitty</title>
<link rel="stylesheet" type="text/css" href="edit.css">
<link id="favicon" rel="icon" href='/favicon.svg'>
<link rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>
<script src="/js/lzma/lzma_worker-min.js"></script>
<script src="/edit.js" type="module"></script>
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined">
<body>
<iframe class="hide-before-edit" id="preview-frame"></iframe>
<div class="editor-container">
<div id="doc-file"></div>
<input id="file-input" type="file" name="name" style="display: none;" />
<div id="drop-zone"></div>
<div id="copy-message">Link copied to clipboard.</div>
<div id="doc-title" class="toolbarbutton hide-before-edit" placeholder="untitled">
<div class="title" id="doc-title-text"></div>
<form id="md-contents" class="menu">
<div class="inputrow"><label for="md-title">title</label><input type="text" name="title" id="md-title" placeholder="untitled"></div>
<div class="inputrow"><label for="md-description">description</label><input type="text" name="description" id="md-description" placeholder="text"></div>
<div class="inputrow"><label for="md-favicon">favicon</label><input type="text" name="favicon" id="md-favicon" placeholder="emoji or url"></div>
<div class="inputrow"><label for="md-image">image</label><input type="text" name="image" id="md-image" placeholder="image url"></div>
<div class="inputrow"><label for="md-password">password</label><input type="text" name="password" id="md-password" placeholder="encryption password"></div>
<div class="inputrow"><label for="md-include">metadata</label><input type="checkbox" name="includeMetadata" id="md-include" checked><label for="md-include">include link metadata</label><a href="">?</a></div>
</form>
</div>
<div id="placeholder">&nbsp;itty bitty things<br>&nbsp;can be conveyed in a link.<br>&nbsp;type here &ndash; and then share!<p>&nbsp;<a id="ib-info" href="http://about.bitty.site" target="_blank">about itty bitty</a></p></div>
<div id="editor"></div>
<div class="toolbar" id="menubar">
<!-- <div class="spacer"></div> -->
<div class="toolbar-right">
<div id="length" class="hide-before-edit menu-item"></div>
<div id="share" class="hide-before-edit menu-item">share</div>
<div id="mainmenu">
<div class="menu-item">menu</div>
<div id="menu-contents" class="menu">
<a id="preview">show preview</a>
<a id="copy">copy link</a>
<hr>
<span id="menus-share-hint" class="disabled">share via</span><br>
<a target="_blank" id="qrcode" href="https://zxing.appspot.com/generator/">make qr code</a>
<a target="_blank" id="twitter" href="https://twitter.com/">twitter</a>
<!-- <a target="_blank" id="bitly" href="https://bitly.com/">Bitly</a><br> -->
<a id="upload" style="display:none">upload file…</a>
<hr>
<!-- <a id="new" href="/edit">new site</a><br> -->
<a id="about" target="_blank" href="http://about.bitty.site" id="about">about itty</a>
</div>
</div>
</div>
<div class="toolbar hide-before-edit" id="formatbar">
<div class="menu-item" id="format-toggle">Aa</div>
<span class="ql-formats">
<button class="ql-bold"></button>
<button class="ql-italic"></button>
<select class="ql-header" id="ql-header">HX</select>
<select class="ql-color"><option value="#F6D4D2"/><option value="#FAE4D3"/><option value="#FEF3D5"/><option value="#CFE8DC"/><option value="#CFE0E8"/><option value="#E1D7E8"/><option value="white"/><option value="#E99590"/><option value="#F3BB92"/><option value="#FDE095"/><option value="#86C6A8"/><option value="#86B1C6"/><option value="#B39BC6"/><option value="#A4A4A4"/><option value="#D42A20"/><option value="#E77625"/><option value="#FAC22B"/><option value="#0E8E51"/><option value="#0E638E"/><option value="#67378D"/><option value="#727272"/><option value="#BF0000"/><option value="#DB3F00"/><option value="#F8A600"/><option value="#005E12"/><option value="#00275E"/><option value="#2C005C"/><option value="#3D3D3D"/><option value="#860000"/><option value="#943E00"/><option value="#AE7400"/><option value="#00420D"/><option value="#001B42"/><option value="#1F0040"/><option value="black"/></select>
<select class="ql-background"><option value="#F6D4D2"/><option value="#FAE4D3"/><option value="#FEF3D5"/><option value="#CFE8DC"/><option value="#CFE0E8"/><option value="#E1D7E8"/><option value="white"/><option value="#E99590"/><option value="#F3BB92"/><option value="#FDE095"/><option value="#86C6A8"/><option value="#86B1C6"/><option value="#B39BC6"/><option value="#A4A4A4"/><option value="#D42A20"/><option value="#E77625"/><option value="#FAC22B"/><option value="#0E8E51"/><option value="#0E638E"/><option value="#67378D"/><option value="#727272"/><option value="#BF0000"/><option value="#DB3F00"/><option value="#F8A600"/><option value="#005E12"/><option value="#00275E"/><option value="#2C005C"/><option value="#3D3D3D"/><option value="#860000"/><option value="#943E00"/><option value="#AE7400"/><option value="#00420D"/><option value="#001B42"/><option value="#1F0040"/><option value="black"/></select>
<button class="ql-clean"></button>
</span>
<span class="ql-formats">
<button class="ql-code-block"></button>
<button class="ql-link"></button>
<select class="ql-align"></select>
<button type="button" class="ql-list" value="bullet"></button>
<button type="button" class="ql-list" value="ordered"></button>
<button class="ql-indent" value="-1"></button>
<button class="ql-indent" value="+1"></button>
</span>
</div>
</div>
</div>
</body>
</html>