diff options
Diffstat (limited to 'form.html')
| -rw-r--r-- | form.html | 213 |
1 files changed, 213 insertions, 0 deletions
diff --git a/form.html b/form.html new file mode 100644 index 0000000..a5de342 --- /dev/null +++ b/form.html @@ -0,0 +1,213 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> + <title>Gloginki</title> + + <style> + :root { + --bg: #f6f8fa; + --card-bg: #ffffff; + --border: #d0d7de; + --text: #24292f; + --muted: #57606a; + --primary: #2da44e; + --primary-hover: #2c974b; + --danger: #cf222e; + --radius: 6px; + } + + * { + box-sizing: border-box; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", + Helvetica, Arial, sans-serif; + } + + body { + margin: 0; + padding: 2rem; + background: var(--bg); + color: var(--text); + } + + h1 { + margin-bottom: 1rem; + font-size: 1.6rem; + } + + .container { + max-width: 900px; + margin: 0 auto; + } + + #error { + color: var(--danger); + margin-bottom: 1rem; + font-weight: 500; + } + + form { + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1.5rem; + margin-bottom: 2rem; + } + + fieldset { + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1rem; + margin-bottom: 1.2rem; + } + + legend { + padding: 0 0.5rem; + color: var(--muted); + font-size: 0.9rem; + } + + textarea { + width: 100%; + min-height: 250px; + resize: vertical; + padding: 0.75rem; + border-radius: var(--radius); + border: 1px solid var(--border); + font-size: 0.95rem; + } + + textarea:focus, + input:focus { + outline: none; + border-color: #0969da; + } + + input[type="file"], + input[type="text"] { + margin-top: 0.5rem; + } + + .submit-row { + display: flex; + gap: 1rem; + align-items: center; + flex-wrap: wrap; + } + + input[type="submit"] { + background: var(--primary); + color: white; + border: none; + padding: 0.6rem 1.2rem; + border-radius: var(--radius); + font-weight: 600; + cursor: pointer; + } + + input[type="submit"]:hover { + background: var(--primary-hover); + } + + /* Preview card */ + #preview-container { + background: var(--card-bg); + border: 1px solid var(--border); + border-radius: var(--radius); + padding: 1rem; + } + + #preview-container h2 { + margin-top: 0; + font-size: 1rem; + color: var(--muted); + } + + #preview { + max-width: 100%; + border-radius: var(--radius); + display: none; + } + + .hint { + font-size: 0.85rem; + color: var(--muted); + margin-top: 0.5rem; + } + </style> +</head> + +<body> + <div class="container"> + <h1>Bin-ки и глогинки.</h1> + + <div id="error"></div> + + <form enctype="multipart/form-data" action="/post" method="post"> + <fieldset> + <legend>Text Posting</legend> + <textarea name="text" placeholder="Write something..."></textarea> + </fieldset> + + <fieldset> + <legend>File Upload</legend> + <input type="file" name="file" /> + <div class="hint">You can also paste an image directly</div> + </fieldset> + + <fieldset> + <legend>Submit</legend> + <div class="submit-row"> + <label> + Mime-type: + <input type="text" name="mimetype" value="auto" /> + </label> + <input type="submit" value="Post" /> + </div> + </fieldset> + </form> + + <div id="preview-container"> + <h2>Image Preview</h2> + <img id="preview" /> + <div class="hint" id="preview-hint">Paste an image to preview it</div> + </div> + </div> + + <script> + const pasteArea = document.body; + const preview = document.getElementById("preview"); + const previewHint = document.getElementById("preview-hint"); + const form = document.querySelector("form"); + + let pastedFile = null; + + pasteArea.addEventListener("paste", (event) => { + const items = event.clipboardData.items; + + for (const item of items) { + if (item.type.startsWith("image/")) { + pastedFile = item.getAsFile(); + + preview.src = URL.createObjectURL(pastedFile); + preview.style.display = "block"; + previewHint.style.display = "none"; + + event.preventDefault(); + break; + } + } + }); + + form.addEventListener("submit", () => { + if (pastedFile) { + const fileInput = form.querySelector('input[type="file"]'); + const dt = new DataTransfer(); + dt.items.add(pastedFile); + fileInput.files = dt.files; + } + }); + </script> +</body> +</html> |