From 3f9215b1cd2a88c807e7d472d362724f0168be2f Mon Sep 17 00:00:00 2001
From: Conrad Zelck <git@simpel.cc>
Date: Sun, 25 Feb 2024 17:21:52 +0100
Subject: [PATCH] feat: move Hilfe section into a detail tag

Just to have a clener app, move the whole help part into a closed detail
tag.

Signed-off-by: Conrad Zelck <git@simpel.cc>
---
 index.php     | 81 +++++++++++++++++++++++++++------------------------
 style.css     |  9 ++++++
 style.min.css |  2 +-
 3 files changed, 53 insertions(+), 39 deletions(-)

diff --git a/index.php b/index.php
index 161c60c..6a3b834 100644
--- a/index.php
+++ b/index.php
@@ -130,44 +130,49 @@
         </tbody>
       </table>
       <div class="space"></div>
-      <p>Freie TV-Kanäle mit Ortssuche finden: <a href="https://fmscan.org/locsearch.php?reset=1&r=t&m=s" target="_blank" rel="noopener noreferrer" lang="en">fmscan.org</a></p>
-      <div class="space"></div>
-      <h2>Hilfe</h2>
-      <p>Dieses Tool berechnet die besten, untereinander störungsfreien Funkfrequenzen innerhalb eines TV-Kanals (8 MHz-Raster).</p>
-      <h3>Hinweis</h3>
-      <p>Es wird nur ein TV-Kanal isoliert betrachtet. Zusätzliche Frequenzen aus anderen TV-Kanälen werden <b>nicht</b> auf Kompatibilität geprüft.</p>
-      <h3>Tipp</h3>
-      <p>Suche als erstes mit <em lang="en">fmscan.org</em>, welche TV-Kanäle (Spalte &quot;Ch&quot;) nicht oder schwach mit DVB-T belegt sind. Komplett freie Kanäle erscheinen nicht in der Liste und sind voraussichtlich eine gute Wahl. Nutze idealer Weise keine zwei direkt benachbarten TV-Kanäle.</p>
-      <h3>Weitere Funktionen</h3>
-      <ul>
-        <li>Klick auf eine einzelne Frequenz zeigt diese im Vollbild.</li>
-        <li>Klick auf das Kopiersymbol (⧉) rechts neben der Tabellenüberschrift kopiert die komplette Tabelle in den Zwischenspeicher.</li>
-        <li><em>Cookie</em>: Der zuletzt ausgewählte TV-Kanal (und die an- oder absteigend ausgewählten Frequenzabstände) werden für 7 Tage in einem Cookie gespeichert.</li>
-      </ul>
-      <h2>Hintergründe / Details</h2>
-      <h3>Frequenzabstände</h3>
-      <p>Diese sind innerhalb eines TV-Kanals spiegelbar. Standardmäßig wird der Abstand zu jeder höheren Frequenz größer (ansteigend - ↑). Dies kann umgedreht werden (absteigend - ↓). Dies ist z. B. für ein zweites, gleichzeitig zu nutzendes Set an Frequenzen zu empfehlen. Das zweite Set sollte so weit wie möglich vom ersten entfernt sein und statt der an- die absteigenden Frequenzabstände nutzen.</p>
-      <h3>Antennenabstand</h3>
-      <p>Sollen Sender und Empfänger dicht nebeneinander betrieben werden:</p>
-      <ul>
-        <li>Der physische Abstand zwischen den Antennen des Senders und Empfängers ist so groß wie möglich zu wählen.</li>
-        <li>Sender und Empfänger haben mindestens 8 MHz (ein TV-Kanal) Abstand, um Sender-Empfänger-Blocking zu minimieren.</li>
-      </ul>
-      <h3>Hintergründe Frequenzen</h3>
-      <ul>
-        <li>Es stehen höchstens 8 Frequenzen in einem TV-Kanal zur Verfügung.</li>
-        <li>TV-Kanäle nahe LTE haben auf Grund der Schutzlücke weniger Frequenzen zur Verfügung.</li>
-        <li>Mit absteigenden Frequenzabständen (↓) sinkt die Anzahl der nutzbaren Frequenzen für diese TV-Kanäle nochmals.</li>
-        <li id="footnote1"><sup>1</sup> Handgeräte im Frequenzbereich <strong>823 - 826 MHz</strong> dürfen nur mit max. 82 mW Sendeleistung betrieben werden.</li>
-      </ul>
-      <h3>Berechnung der Intermodulationsfreiheit</h3>
-      <ul>
-        <li>min. 400 kHz Trägerabstand</li>
-        <li>min. 200 kHz Abstand 2TX-IM(3) - Intermodulation 3. Ordnung von 2 Sendern</li>
-        <li>min. 100 kHz Abstand 3TX-IM(3) - Intermodulation 3. Ordnung von 3 Sendern</li>
-        <li>Intermodulationsfestigkeit: <strong>F1</strong>: 54 %, <strong>F2</strong>: 65 %, <strong>F3</strong>: 49 %, <strong>F4</strong>: 67 %, <strong>F5</strong>: 81 %, <strong>F6</strong>: 63 %, <strong>F7</strong>: 82 %, <strong>F8</strong>: 66 % (Je höher die Prozentzahl, desto besser ist das Signal.)</li>
-      </ul>
-      <p>Die Mindestanforderungen zur Intermodulationsfestigkeit sind in jedem Fall erfüllt. Diese Werte gelten für die ansteigenden Frequenzabstände. Für die absteigenden Frequenzabstände ist die Reihenfolge umzudrehen.</p>
+      <details>
+        <summary>
+          <h2>Hilfe</h2>
+        </summary>
+        <div class="space"></div>
+        <p>Freie TV-Kanäle mit Ortssuche finden: <a href="https://fmscan.org/locsearch.php?reset=1&r=t&m=s" target="_blank" rel="noopener noreferrer" lang="en">fmscan.org</a></p>
+        <div class="space"></div>
+        <p>Dieses Tool berechnet die besten, untereinander störungsfreien Funkfrequenzen innerhalb eines TV-Kanals (8 MHz-Raster).</p>
+        <h3>Hinweis</h3>
+        <p>Es wird nur ein TV-Kanal isoliert betrachtet. Zusätzliche Frequenzen aus anderen TV-Kanälen werden <b>nicht</b> auf Kompatibilität geprüft.</p>
+        <h3>Tipp</h3>
+        <p>Suche als erstes mit <em lang="en">fmscan.org</em>, welche TV-Kanäle (Spalte &quot;Ch&quot;) nicht oder schwach mit DVB-T belegt sind. Komplett freie Kanäle erscheinen nicht in der Liste und sind voraussichtlich eine gute Wahl. Nutze idealer Weise keine zwei direkt benachbarten TV-Kanäle.</p>
+        <h3>Weitere Funktionen</h3>
+        <ul>
+          <li>Klick auf eine einzelne Frequenz zeigt diese im Vollbild.</li>
+          <li>Klick auf das Kopiersymbol (⧉) rechts neben der Tabellenüberschrift kopiert die komplette Tabelle in den Zwischenspeicher.</li>
+          <li><em>Cookie</em>: Der zuletzt ausgewählte TV-Kanal (und die an- oder absteigend ausgewählten Frequenzabstände) werden für 7 Tage in einem Cookie gespeichert.</li>
+        </ul>
+        <h2>Hintergründe / Details</h2>
+        <h3>Frequenzabstände</h3>
+        <p>Diese sind innerhalb eines TV-Kanals spiegelbar. Standardmäßig wird der Abstand zu jeder höheren Frequenz größer (ansteigend - ↑). Dies kann umgedreht werden (absteigend - ↓). Dies ist z. B. für ein zweites, gleichzeitig zu nutzendes Set an Frequenzen zu empfehlen. Das zweite Set sollte so weit wie möglich vom ersten entfernt sein und statt der an- die absteigenden Frequenzabstände nutzen.</p>
+        <h3>Antennenabstand</h3>
+        <p>Sollen Sender und Empfänger dicht nebeneinander betrieben werden:</p>
+        <ul>
+          <li>Der physische Abstand zwischen den Antennen des Senders und Empfängers ist so groß wie möglich zu wählen.</li>
+          <li>Sender und Empfänger haben mindestens 8 MHz (ein TV-Kanal) Abstand, um Sender-Empfänger-Blocking zu minimieren.</li>
+        </ul>
+        <h3>Hintergründe Frequenzen</h3>
+        <ul>
+          <li>Es stehen höchstens 8 Frequenzen in einem TV-Kanal zur Verfügung.</li>
+          <li>TV-Kanäle nahe LTE haben auf Grund der Schutzlücke weniger Frequenzen zur Verfügung.</li>
+          <li>Mit absteigenden Frequenzabständen (↓) sinkt die Anzahl der nutzbaren Frequenzen für diese TV-Kanäle nochmals.</li>
+          <li id="footnote1"><sup>1</sup> Handgeräte im Frequenzbereich <strong>823 - 826 MHz</strong> dürfen nur mit max. 82 mW Sendeleistung betrieben werden.</li>
+        </ul>
+        <h3>Berechnung der Intermodulationsfreiheit</h3>
+        <ul>
+          <li>min. 400 kHz Trägerabstand</li>
+          <li>min. 200 kHz Abstand 2TX-IM(3) - Intermodulation 3. Ordnung von 2 Sendern</li>
+          <li>min. 100 kHz Abstand 3TX-IM(3) - Intermodulation 3. Ordnung von 3 Sendern</li>
+          <li>Intermodulationsfestigkeit: <strong>F1</strong>: 54 %, <strong>F2</strong>: 65 %, <strong>F3</strong>: 49 %, <strong>F4</strong>: 67 %, <strong>F5</strong>: 81 %, <strong>F6</strong>: 63 %, <strong>F7</strong>: 82 %, <strong>F8</strong>: 66 % (Je höher die Prozentzahl, desto besser ist das Signal.)</li>
+        </ul>
+        <p>Die Mindestanforderungen zur Intermodulationsfestigkeit sind in jedem Fall erfüllt. Diese Werte gelten für die ansteigenden Frequenzabstände. Für die absteigenden Frequenzabstände ist die Reihenfolge umzudrehen.</p>
+      </details>
       <div class="space"></div>
     </main>
   </body>
diff --git a/style.css b/style.css
index 8899976..0a18810 100644
--- a/style.css
+++ b/style.css
@@ -299,6 +299,10 @@ th, td {
   margin-bottom: 1.2em;
 }
 
+summary h2 {
+  margin-left: 0.2em;
+}
+
 p.label {
   margin-right: 15px;
 }
@@ -375,6 +379,11 @@ select#channel {
   height: 1.3em;
 }
 
+summary h2 {
+  display: inline-block;
+  vertical-align: sub;
+}
+
 p#source {
   width: fit-content;
 }
diff --git a/style.min.css b/style.min.css
index 4b2d700..836e2a0 100644
--- a/style.min.css
+++ b/style.min.css
@@ -1 +1 @@
-:root{--default-top-padding:1.5em;--default-body-bottom-margin:2vmin;--default-min-font-size-px:12px;--default-min-font-size:12;--default-max-font-size-px:18px;--default-max-font-size:18;}html{font-size:calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560));font-size:clamp(var(--default-min-font-size-px),calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560)),var(--default-max-font-size-px));}body{height:calc(100vh - 3vmin);font-size:inherit;font-family:helvetica,Arial,sans-serif;background-color:#555;color:white;margin:3vmin 4vmin calc(var(--default-body-bottom-margin) - var(--default-body-bottom-margin)) 4vmin;}*:focus{outline:2px solid white;outline-offset:2px;}a{color:#ffffff;}header a{text-decoration:none;}a:not([href]){color:#AAAAAA;}header{margin-bottom:1.0;}header a{display:inline-flex;}header img{width:1.9em;height:auto;}nav{display:flex;align-items:center;column-gap:.7em;}h1{font-size:1.5em;margin:0;}#github{margin-left:auto;}#github-cat{transform:scale(.5) translate(50%,-50%);}*,*::before,*::after{box-sizing:unset;}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0;}ul[role='list'],ol[role='list']{list-style:none;}html:focus-within{scroll-behavior:smooth;}body{text-rendering:optimizeSpeed;line-height:1.5;}a:not([class]){text-decoration-skip-ink:auto;}img,picture{max-width:100%;font-style:italic;}input,button,textarea,select{font:inherit;}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body{font-size:2em;}#dialogText{font-size:23vw;line-height:.8em;}#dialog-wrapper{background:rgba(85,85,85,.97);}#dialogText{color:#fff;background-color:#555;}select{color:#000;}button,input{color:white;background-color:#333;}input[type=radio]{accent-color:#333;}th{background-color:#444444;}tr:nth-child(even){background-color:#505050;}#dialogText{border:1px solid white;border-radius:10px;}button,input,select{border:2px solid white;}button,input{-webkit-border-radius:5px;border-radius:5px;}select#channel{border-radius:5px;}body{hyphens:auto;}body:has(dialog[open]){overflow:hidden;}button,input,select,details summary{cursor:pointer;}#dialog-wrapper{cursor:pointer;}#dialogText{cursor:pointer;}#copyIcon{text-decoration:none;}td:nth-child(even){cursor:pointer;}main .first-in-main{padding-top:calc(var(--default-top-padding) - .8em);}.horizontal{margin-top:10px;}.horizontal label{margin-right:10px;}#dialogText{padding:.25em;}th,td{padding:0;padding-left:10px;padding-right:10px;}#copyIcon{margin-left:10px;}.space{margin-bottom:1.2em;}p.label{margin-right:15px;}p{margin-block-start:0;}ul{margin-block-start:0;}p#source{margin-top:2em;margin-left:auto;}body{display:flex;flex-direction:column}main{display:flex;flex-direction:column;height:100%}#dialog-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}.horizontal{display:inline-flex;}th{text-align:left;}table,tr,td{overflow:hidden;}th:nth-child(1),td:nth-child(1){width:2ch;}th:nth-child(2),td:nth-child(2){width:13ch;}th:nth-child(3),td:nth-child(3){width:fit-content;}select#channel{width:fit-content;height:1.3em;}p#source{width:fit-content;}
\ No newline at end of file
+:root{--default-top-padding:1.5em;--default-body-bottom-margin:2vmin;--default-min-font-size-px:12px;--default-min-font-size:12;--default-max-font-size-px:18px;--default-max-font-size:18;}html{font-size:calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560));font-size:clamp(var(--default-min-font-size-px),calc(var(--default-min-font-size-px) + (var(--default-max-font-size) - var(--default-min-font-size)) * ((100vw - 360px) / 1560)),var(--default-max-font-size-px));}body{height:calc(100vh - 3vmin);font-size:inherit;font-family:helvetica,Arial,sans-serif;background-color:#555;color:white;margin:3vmin 4vmin calc(var(--default-body-bottom-margin) - var(--default-body-bottom-margin)) 4vmin;}*:focus{outline:2px solid white;outline-offset:2px;}a{color:#ffffff;}header a{text-decoration:none;}a:not([href]){color:#AAAAAA;}header{margin-bottom:1.0;}header a{display:inline-flex;}header img{width:1.9em;height:auto;}nav{display:flex;align-items:center;column-gap:.7em;}h1{font-size:1.5em;margin:0;}#github{margin-left:auto;}#github-cat{transform:scale(.5) translate(50%,-50%);}*,*::before,*::after{box-sizing:unset;}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin-block-end:0;}ul[role='list'],ol[role='list']{list-style:none;}html:focus-within{scroll-behavior:smooth;}body{text-rendering:optimizeSpeed;line-height:1.5;}a:not([class]){text-decoration-skip-ink:auto;}img,picture{max-width:100%;font-style:italic;}input,button,textarea,select{font:inherit;}@media (prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}body{font-size:2em;}#dialogText{font-size:23vw;line-height:.8em;}#dialog-wrapper{background:rgba(85,85,85,.97);}#dialogText{color:#fff;background-color:#555;}select{color:#000;}button,input{color:white;background-color:#333;}input[type=radio]{accent-color:#333;}th{background-color:#444444;}tr:nth-child(even){background-color:#505050;}#dialogText{border:1px solid white;border-radius:10px;}button,input,select{border:2px solid white;}button,input{-webkit-border-radius:5px;border-radius:5px;}select#channel{border-radius:5px;}body{hyphens:auto;}body:has(dialog[open]){overflow:hidden;}button,input,select,details summary{cursor:pointer;}#dialog-wrapper{cursor:pointer;}#dialogText{cursor:pointer;}#copyIcon{text-decoration:none;}td:nth-child(even){cursor:pointer;}main .first-in-main{padding-top:calc(var(--default-top-padding) - .8em);}.horizontal{margin-top:10px;}.horizontal label{margin-right:10px;}#dialogText{padding:.25em;}th,td{padding:0;padding-left:10px;padding-right:10px;}#copyIcon{margin-left:10px;}.space{margin-bottom:1.2em;}summary h2{margin-left:.2em;}p.label{margin-right:15px;}p{margin-block-start:0;}ul{margin-block-start:0;}p#source{margin-top:2em;margin-left:auto;}body{display:flex;flex-direction:column}main{display:flex;flex-direction:column;height:100%}#dialog-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;}.horizontal{display:inline-flex;}th{text-align:left;}table,tr,td{overflow:hidden;}th:nth-child(1),td:nth-child(1){width:2ch;}th:nth-child(2),td:nth-child(2){width:13ch;}th:nth-child(3),td:nth-child(3){width:fit-content;}select#channel{width:fit-content;height:1.3em;}summary h2{display:inline-block;vertical-align:sub;}p#source{width:fit-content;}
\ No newline at end of file
-- 
GitLab