|
- <!doctype html>
- <html>
- <head>
- <title>Write.as</title>
- <style>
- body, input[type=submit], label[for=norm], textarea.norm {
- font-family: Lora, serif;
- }
- #url, #result-holder, label[for=sans], textarea.sans {
- font-family: 'Open Sans', sans-serif;
- }
- body {
- font-size: 100%;
- padding: 0.5em;
- }
- textarea, textarea:focus {
- border: 1px solid #dfdfdf;
- }
- textarea, textarea:focus, input {
- outline: 0;
- }
- textarea {
- margin-bottom: 0.5em;
- min-width: 38em;
- min-height: 20em;
- width: 100%;
- padding: 1em;
- font-size: 1em;
- box-sizing: border-box;
- resize: none;
- }
- input {
- padding: 0.5em;
- }
- input[type=submit] {
- border: 1px solid rgb(114, 120, 191);
- background: rgb(114, 120, 191);
- color: white;
- text-align: right;
- margin-left: 0.5em;
- }
- input[type=submit].disabled {
- background: #ddd;
- color: #999;
- border-color: #eee;
- }
- #publish-holder, #result-holder {
- text-align: right;
- }
- #result-holder {
- display: none;
- }
- #url {
- width: 18em;
- margin-right: 0.5em;
- }
- label[for=mono], label[for=code], textarea.mono, textarea.code {
- font-family: monospace, monospace;
- font-size: 1em;
- }
- body.popout #publish-holder, body.popout #result-holder {
- position: fixed;
- bottom: 1em;
- left: 1em;
- right: 1em;
- }
- body.popout textarea {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 4em;
- border: 0;
- border-bottom: 1px solid #dfdfdf;
- min-height: 0;
- }
- a#popout {
- padding: 0.5em;
- position: absolute;
- left: 0.75em;
- bottom: 0.75em;
- }
- a#popout img {
- vertical-align: middle;
- }
- body.popout a#popout {
- display: none;
- }
- </style>
-
- <script src="H.js"></script>
- <script src="popup.js"></script>
- </head>
- <body>
- <form name="postForm" method="post">
- <textarea id="content" placeholder="Write..."></textarea>
- <div id="result-holder">
- <input id="url" type="url" readonly />
- <a id="url-link" target="_blank">Open</a>
- </div>
- <div id="publish-holder">
- <input type="radio" name="font" value="sans" id="sans" checked="checked" /><label for="sans"> Sans</label>
- <input type="radio" name="font" value="norm" id="norm" /><label for="norm"> Serif</label>
- <input type="radio" name="font" value="mono" id="mono" /><label for="mono"> Monospace</label>
- <input type="radio" name="font" value="code" id="code" /><label for="code"> Code</label>
- <input id="publish" type="submit" value="Publish" />
- <a href="#" id="popout"><img src="img/ic_launch.svg" /></a>
- </div>
- </form>
-
- <link href='fonts.css' rel='stylesheet' type='text/css'>
- </body>
- </html>
|