Mercurial

annotate infinite_canvas/assets/image-view.html @ 276:b55c22cff335

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Add interactive infinite canvas prototype
author MrJuneJune <me@mrjunejune.com>
date Mon, 17 Aug 2026 16:57:56 -0700
parents
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
276
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 <!doctype html>
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 <meta charset="utf-8">
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 <style>
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 html, body {
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 width: 100%;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 height: 100%;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 margin: 0;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 overflow: hidden;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 background: #fff;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 }
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 img {
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 display: block;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 width: 100%;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 height: 100%;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 object-fit: contain;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 }
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 </style>
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 <img id="image" alt="">
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 <script>
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 const source = new URLSearchParams(location.search).get("src");
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 if (source) document.getElementById("image").src = source;
b55c22cff335 Add interactive infinite canvas prototype
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 </script>