|
| 1 | +<!DOCTYPE html> |
| 2 | +<html lang="en"> |
| 3 | + <head> |
| 4 | + <meta charset="UTF-8" /> |
| 5 | + <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| 6 | + <title>Document</title> |
| 7 | + <style> |
| 8 | + body { |
| 9 | + font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", |
| 10 | + "Liberation Sans", Verdana, "Verdana Ref", sans-serif; |
| 11 | + } |
| 12 | + body.img { |
| 13 | + margin: 0; |
| 14 | + padding: 0; |
| 15 | + overflow: hidden; |
| 16 | + |
| 17 | + background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuX1o2Nmk1ZyIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjEyIiBwYXR0ZXJuVHJhbnNmb3JtPSJyb3RhdGUoNDUpIj48bGluZSB4MT0iMCIgeT0iMCIgeDI9IjAiIHkyPSIxMiIgc3Ryb2tlPSIjRjNGM0YzIiBzdHJva2Utd2lkdGg9IjEyIiAvPjwvcGF0dGVybj48L2RlZnM+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuX1o2Nmk1ZykiICAvPjwvc3ZnPg==); |
| 18 | + |
| 19 | + img { |
| 20 | + width: 100vw; |
| 21 | + height: 100vh; |
| 22 | + object-fit: contain; |
| 23 | + display: block; |
| 24 | + } |
| 25 | + } |
| 26 | + #doc { |
| 27 | + display: none; |
| 28 | + } |
| 29 | + input { |
| 30 | + width: 90%; |
| 31 | + } |
| 32 | + </style> |
| 33 | + </head> |
| 34 | + <body> |
| 35 | + <img /> |
| 36 | + <div id="doc"> |
| 37 | + <pre> |
| 38 | +Just put url to any image to use this document to present it. |
| 39 | + |
| 40 | +Mainly it was created for imgur.com images which once loaded directly redirects to imgur.com ui |
| 41 | + |
| 42 | +Probably because it detects request header accept: text/html |
| 43 | + </pre> |
| 44 | + |
| 45 | + <label> |
| 46 | + type img url: |
| 47 | + <input type="text" id="url" value="" /> |
| 48 | + </label> |
| 49 | + |
| 50 | + <br /> |
| 51 | + |
| 52 | + <a href=""></a> |
| 53 | + <br /> |
| 54 | + <div> |
| 55 | + <a href="i.html">reset</a> |
| 56 | + </div> |
| 57 | + <br /> |
| 58 | + |
| 59 | + <div> |
| 60 | + direct link to original |
| 61 | + <a href="https://i.imgur.com/q3CHEJs.png" target="_blank">https://i.imgur.com/q3CHEJs.png</a> - will redirect to |
| 62 | + https://imgur.com/q3CHEJs |
| 63 | + </div> |
| 64 | + </div> |
| 65 | + <br /> |
| 66 | + <div>the same image (https://i.imgur.com/q3CHEJs.png) but handled with this document - <a href="?i=https://i.imgur.com/q3CHEJs.png">link</a></div> |
| 67 | + </body> |
| 68 | + <script> |
| 69 | + const i = new URLSearchParams(window.location.search).get("i"); |
| 70 | + |
| 71 | + if (i) { |
| 72 | + document.querySelector("img").src = i; |
| 73 | + document.body.classList.add("img"); |
| 74 | + } else { |
| 75 | + document.querySelector("#doc").removeAttribute("id"); |
| 76 | + |
| 77 | + const input = document.querySelector("#url"); |
| 78 | + const a = document.querySelector("a"); |
| 79 | + |
| 80 | + input.addEventListener("input", (e) => { |
| 81 | + const url = `${location.origin}${location.pathname}?i=${encodeURIComponent(e.target.value)}`; |
| 82 | + a.href = url; |
| 83 | + a.innerText = url; |
| 84 | + }); |
| 85 | + } |
| 86 | + </script> |
| 87 | +</html> |
0 commit comments