QR kód se dá přepnout na jinou adresu

Tabule dosud zbylé adresy jen vypsala, ale naskenovat se dala pouze ta
první. Teď se na ně dá kliknout: vybraná se přesune nahoru velkým písmem,
QR kód se přepne na ni a ta předchozí se objeví v seznamu, takže se dá
kroužit dokola.

Kódy jsou vykreslené všechny předem a přepíná se jen ten viditelný —
žádné doptávání serveru, žádná QR knihovna na klientovi. Aby to stránku
nenafouklo, skládá se SVG ze souvislých úseků místo jednotlivých
čtverečků; tabule se třemi adresami má 23 kB.

Otisk v data-address zahrnuje všechny adresy, ne jen tu první. Když se
změní kterákoli z nich, nabídka i QR kódy jsou k ničemu a tabule se
načte znovu.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

static/style.css

@@ -373,7 +373,7 @@ button {
   line-height: 1.4;
 }
 
-.join .address span {
+.join .address .what {
   display: block;
   font-family: var(--font-ui);
   font-size: 0.7rem;
@@ -382,6 +382,8 @@ button {
   color: var(--ink-soft);
 }
 
+.join .address .url { display: block; }
+
 .qr { width: 5.5rem; height: 5.5rem; fill: var(--ink); }
 
 .idle {
@@ -480,6 +482,24 @@ button {
 
 .alt li { white-space: nowrap; }
 
+/* Adresa je tlačítko, ale nemá vypadat jako tlačítko — jen dát najevo,
+   že se na ni dá kliknout. */
+.alt button {
+  font: inherit;
+  color: inherit;
+  background: none;
+  border: 0;
+  border-bottom: 1px dotted var(--rule);
+  padding: 0;
+  cursor: pointer;
+}
+
+.alt button:hover,
+.alt button:focus-visible {
+  color: var(--ink);
+  border-bottom-color: currentColor;
+}
+
 .alt em {
   font-family: var(--font-ui);
   font-style: normal;