From 69d172a8d885cdcd544054cb32ade964bc241dc1 Mon Sep 17 00:00:00 2001
From: Miraty <miraty@antopie.org>
Date: Sat, 6 Nov 2021 00:33:15 +0100
Subject: [PATCH] Allow empty automatic sizes + better HTML semantics and forms

---
 inc.php        |   6 +--
 index.php      | 138 ++++++++++++++++++++++++++-----------------------
 locales/en.php |  18 +++----
 locales/fr.php |  18 +++----
 locales/oc.php |  18 +++----
 style.less     |   8 +++
 6 files changed, 108 insertions(+), 98 deletions(-)

diff --git a/inc.php b/inc.php
index aa6adfd..cd80205 100644
--- a/inc.php
+++ b/inc.php
@@ -2,9 +2,9 @@
 
 require "config.inc.php";
 
-define("DEFAULT_REDONDANCY", "H");
-define("DEFAULT_MARGIN", 10);
-define("DEFAULT_SIZE", 100);
+define("DEFAULT_REDONDANCY", "high");
+define("DEFAULT_MARGIN", NULL);
+define("DEFAULT_SIZE", NULL);
 define("DEFAULT_BGCOLOR", "FFFFFF");
 define("DEFAULT_MAINCOLOR", "000000");
 
diff --git a/index.php b/index.php
index e127ca1..632fe38 100755
--- a/index.php
+++ b/index.php
@@ -53,11 +53,15 @@ if (
 
   if (is_numeric($_POST['margin']) AND $_POST['margin'] >= 0 AND $_POST['margin'] <= 1024)
     $params['margin'] = $_POST['margin'];
+  else if (empty($_POST['margin']))
+    $params['margin'] = NULL;
   else
     exit("Wrong value for margin");
 
-  if (is_numeric($_POST['size']) AND $_POST['size'] >= 1 AND $_POST['size'] <= 1024)
+  if (is_numeric($_POST['size']) AND $_POST['size'] >= 1 AND $_POST['size'] <= 4096)
     $params['size'] = $_POST['size'];
+  else if (empty($_POST['size']))
+    $params['size'] = NULL;
   else
     exit("Wrong value for size");
 
@@ -117,28 +121,24 @@ if (
         <div id="firstWrapper">
 
           <div class="param" id="txtParam">
-            <label for="txt">
-              <details>
-                <summary><?= $loc['label_content'] ?></summary>
-                <p class="helpText">
-                  <?= $loc['help_content'] ?>
-                </p>
-              </details>
-            </label>
-            <textarea rows="8" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt" minlenght="5" maxlenght="50"><?= htmlspecialchars($params['txt']) ?></textarea>
+            <details>
+              <summary><label for="txt"><?= $loc['label_content'] ?></label></summary>
+              <div class="helpText">
+                <?= $loc['help_content'] ?>
+              </div>
+            </details>
+            <textarea rows="8" required="" id="txt" placeholder="<?= $loc['placeholder'] ?>" name="txt"><?= htmlspecialchars($params['txt']) ?></textarea>
           </div>
 
           <div id="sideParams">
 
             <div class="param">
-              <label for="redondancy">
-                <details>
-                  <summary><?= $loc['label_redondancy'] ?></summary>
-                  <p class="helpText">
-                    <?= $loc['help_redondancy'] ?>
-                  </p>
-                </details>
-              </label>
+              <details>
+                <summary><label for="redondancy"><?= $loc['label_redondancy'] ?></label></summary>
+                <p class="helpText">
+                  <?= $loc['help_redondancy'] ?>
+                </p>
+              </details>
               <select id="redondancy" name="redondancy">
                 <option <?php if ($params['redondancy'] === "low") echo 'selected="" '; ?>value="low">L - 7%</option>
                 <option <?php if ($params['redondancy'] === "medium") echo 'selected="" '; ?>value="medium">M - 15%</option>
@@ -148,27 +148,35 @@ if (
             </div>
 
             <div class="param">
-              <label for="margin">
-                <details>
-                  <summary><?= $loc['label_margin'] ?></summary>
-                  <p class="helpText">
-                    <?= $loc['help_margin'] ?>
-                  </p>
-                </details>
-              </label>
-              <input type="number" id="margin" placeholder="2" name="margin" min="0" max="1024" value="<?= htmlspecialchars($params['margin']) ?>">
+              <details>
+                <summary><label for="margin"><?= $loc['label_margin'] ?></label></summary>
+                <p class="helpText">
+                  <?= $loc['help_margin'] ?>
+                </p>
+              </details>
+              <input type="number" list="margins" id="margin" placeholder="<?= $loc['placeholder_pixels'] ?>" name="margin" min="0" max="1024" value="<?= htmlspecialchars($params['margin']) ?>">
+              <datalist id="margins">
+                <option value="16">
+                <option value="32">
+                <option value="64">
+                <option value="128">
+              </datalist>
             </div>
 
             <div class="param">
-              <label for="size">
-                <details>
-                  <summary><?= $loc['label_size'] ?></summary>
-                  <p class="helpText">
-                    <?= $loc['help_size'] ?>
-                  </p>
-                </details>
-              </label>
-              <input type="number" id="size" placeholder="4" name="size" min="1" max="1024" value="<?= htmlspecialchars($params['size']) ?>">
+              <details>
+                <summary><label for="size"><?= $loc['label_size'] ?></label></summary>
+                <p class="helpText">
+                  <?= $loc['help_size'] ?>
+                </p>
+              </details>
+              <input type="number" list="sizes" id="size" placeholder="<?= $loc['placeholder_pixels'] ?>" name="size" min="1" max="4096" value="<?= htmlspecialchars($params['size']) ?>">
+              <datalist id="sizes">
+                <option value="128">
+                <option value="256">
+                <option value="512">
+                <option value="1024">
+              </datalist>
             </div>
 
           </div>
@@ -198,46 +206,46 @@ if (
 
       </form>
 
-      <section id="output">
+      <?php
 
-        <?php
+      if (!empty($params['txt'])) {
 
-        if (!empty($params['txt'])) {
+        require "barcode-generator/Utils/QrCode.php";
+        $qrCode = new QrCode();
+        if (!is_null($params['margin']))
+          $qrCode->setPadding($params['margin']);
+        $qrCode
+          ->setText($params['txt'])
+          ->setSize($params['size'])
+          ->setErrorCorrection($params['redondancy'])
+          ->setForegroundColor(array(
+            'r' => hexdec(substr($params['mainColor'],0,2)),
+            'g' => hexdec(substr($params['mainColor'],2,2)),
+            'b' => hexdec(substr($params['mainColor'],4,2)),
+          ))
+          ->setBackgroundColor(array(
+            'r' => hexdec(substr($params['bgColor'],0,2)),
+            'g' => hexdec(substr($params['bgColor'],2,2)),
+            'b' => hexdec(substr($params['bgColor'],4,2)),
+          ))
+          ->setImageType(QrCode::IMAGE_TYPE_PNG);
+        $dataUri = $qrCode->getDataUri();
+        $qrSize = $qrCode->getSize() + 2 * $qrCode->getPadding();
 
-          require "barcode-generator/Utils/QrCode.php";
+        ?>
 
-          $qrCode = new QrCode();
-          $qrCode
-            ->setText($params['txt'])
-            ->setSize($params['size'])
-            ->setPadding($params['margin'])
-            ->setErrorCorrection($params['redondancy'])
-            ->setForegroundColor(array(
-              'r' => hexdec(substr($params['mainColor'],0,2)),
-              'g' => hexdec(substr($params['mainColor'],2,2)),
-              'b' => hexdec(substr($params['mainColor'],4,2)),
-            ))
-            ->setBackgroundColor(array(
-              'r' => hexdec(substr($params['bgColor'],0,2)),
-              'g' => hexdec(substr($params['bgColor'],2,2)),
-              'b' => hexdec(substr($params['bgColor'],4,2)),
-            ))
-            ->setImageType(QrCode::IMAGE_TYPE_PNG);
-          $base64 = $qrCode->generate();
-
-          ?>
+        <section id="output">
           <div class="centered" id="downloadQR">
-            <a href="data:image/png;base64,<?= $base64 ?>" class="button" download="<?= htmlspecialchars($params['txt']); ?>.png"><?= $loc['button_download'] ?></a>
+            <a href="<?= $dataUri ?>" class="button" download="<?= htmlspecialchars($params['txt']); ?>.png"><?= $loc['button_download'] ?></a>
           </div>
 
           <div class="centered" id="showOnlyQR">
-            <a title="<?= $loc['title_showOnlyQR'] ?>" href="data:image/png;base64,<?= $base64 ?>"><img alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode" src="data:image/png;base64,<?= $base64 ?>"></a>
+            <a title="<?= $loc['title_showOnlyQR'] ?>" href="<?= $dataUri ?>"><img width="<?= $qrSize ?>" height="<?= $qrSize ?>" alt='<?= $loc['alt_QR_before'] ?><?= htmlspecialchars($params['txt']); ?><?= $loc['alt_QR_after'] ?>' id="qrCode" src="<?= $dataUri ?>"></a>
           </div>
-
-        <?php } ?>
-
         </section>
 
+      <?php } ?>
+
         <footer>
 
           <section id="info" class="metaText">
diff --git a/locales/en.php b/locales/en.php
index 1dccc9d..f3b6a67 100644
--- a/locales/en.php
+++ b/locales/en.php
@@ -11,16 +11,14 @@ $loc = array(
   'label_mainColor' => "Foreground color",
 
   'placeholder' => "Enter the text to encode in the QR code",
+  'placeholder_pixels' => "automatic",
 
   'help_content' => "
-    You can only encode whatever text you want.<br>
-    Software which decodes these QR codes could suggest to open them with dedicated software, depending on their <a href='https://en.wikipedia.org/wiki/List_of_URI_schemes'>URI scheme</a>.<br><br>
-    For instance, to open a webpage:<br>
-    https://www.example/<br><br>
-    To send an email:<br>
-    mailto:contact@email.example<br><br>
-    To share geographic coordinates:<br>
-    geo:48.867564,2.364057
+    <p>You can encode whatever text you want.</p>
+    <p>Software which decodes these QR codes could suggest to open them with dedicated software, depending on their <a href='https://en.wikipedia.org/wiki/List_of_URI_schemes' hreflang='en' rel='help external noreferrer'>URI scheme</a>.</p>
+    <p>For instance, to open a webpage: <code>https://www.example/</code></p>
+    <p>To send an email: <code>mailto:contact@email.example</code></p>
+    <p>To share geographic coordinates: <code>geo:48.867564,2.364057</code></p>
   ",
   'help_redondancy' => "Redundancy is the duplication of information in the QR code to correct errors during decoding. A higher rate will produce a bigger QR code, but will have a better chance of being decoded correctly.",
   'help_margin' => "Number of pixels in the white bands around the QR code.",
@@ -37,9 +35,9 @@ $loc = array(
   'metaText_qr' => "
     <h3>What's a QR code?</h3>
     A QR code is a 2 dimensional barcode in which text is written in binary. It can be decoded with a device equipped with a photo sensor and an adequate software.
-    <a href='https://en.wikipedia.org/wiki/QR_code'>QR code on Wikipedia</a>.
+    <a href='https://en.wikipedia.org/wiki/QR_code' hreflang='en' rel='help external noreferrer'>QR code on Wikipedia</a>.
   ",
-  'metaText_legal' => "LibreQR " . $libreqrVersion . " is a free software whose <a href='https://code.antopie.org/miraty/libreqr/'>source code</a> is available under the terms of the <abbr title='GNU Affero General Public License version 3 or any later version'><a href='LICENSE.html'>AGPLv3</a>+</abbr>.",
+  'metaText_legal' => "LibreQR " . $libreqrVersion . " is a free software whose <a href='https://code.antopie.org/miraty/libreqr/' rel='external noreferrer'>source code</a> is available under the terms of the <abbr title='GNU Affero General Public License version 3 or any later version'><a href='LICENSE.html' hreflang='en' rel='license'>AGPLv3</a>+</abbr>.",
 
   'opensearch_description' => "Generate QR codes from your search or address bar",
 );
diff --git a/locales/fr.php b/locales/fr.php
index 91a32b6..e127647 100644
--- a/locales/fr.php
+++ b/locales/fr.php
@@ -11,16 +11,14 @@ $loc = array(
   'label_mainColor' => "Couleur de premier plan",
 
   'placeholder' => "Entrez le texte à encoder dans le code QR",
+  'placeholder_pixels' => "automatique",
 
   'help_content' => "
-    Vous pouvez encoder ce que vous voulez sous forme de texte.<br>
-    Les logiciels qui décodent ces codes QR pourraient proposer de les ouvrir avec un logiciel dédié, en fonction de leur <a href='https://fr.wikipedia.org/wiki/Sch%C3%A9ma_d%27URI'>schéma d'URI</a>.<br><br>
-    Par exemple, pour ouvrir une page Web :<br>
-    https://www.example/<br><br>
-    Pour envoyer un mail :<br>
-    mailto:contact@email.example<br><br>
-    Pour partager des coordonnées géographique :<br>
-    geo:48.867564,2.364057
+    <p>Vous pouvez encoder ce que vous voulez sous forme de texte.</p>
+    <p>Les logiciels qui décodent ces codes QR pourraient proposer de les ouvrir avec un logiciel dédié, en fonction de leur <a href='https://fr.wikipedia.org/wiki/Sch%C3%A9ma_d%27URI' hreflang='fr' rel='help external noreferrer'>schéma d'URI</a>.</p>
+    <p>Par exemple, pour ouvrir une page Web : <code>https://www.example/</code></p>
+    <p>Pour envoyer un mail : <code>mailto:contact@email.example</code></p>
+    <p>Pour partager des coordonnées géographique : <code>geo:48.867564,2.364057</code></p>
   ",
   'help_redondancy' => "La redondance est la duplication des informations dans le code QR afin de corriger les erreurs lors du décodage. Un taux plus élevé produira un code QR plus grand, mais aura plus de chance d'être décodé correctement.",
   'help_margin' => "Nombre de pixels des bandes blanches autour du code QR.",
@@ -37,9 +35,9 @@ $loc = array(
   'metaText_qr' => "
     <h3>Qu'est-ce qu'un code QR ?</h3>
     Un code QR est un code-barres en 2 dimensions dans lequel du texte est inscrit en binaire. Il peut être décodé avec un appareil muni d'un capteur photo et d'un logiciel adéquat.
-    <a href='https://fr.wikipedia.org/wiki/Code_QR'>Code QR sur Wikipédia</a>.
+    <a href='https://fr.wikipedia.org/wiki/Code_QR' hreflang='fr' rel='help external noreferrer'>Code QR sur Wikipédia</a>.
   ",
-  'metaText_legal' => "LibreQR " . $libreqrVersion . " est un logiciel libre dont le <a href='https://code.antopie.org/miraty/libreqr/'>code source</a> est disponible selon les termes de l'<abbr title='GNU Affero General Public License version 3 ou toute version ultérieure'><a href='LICENSE.html'>AGPLv3</a>+</abbr>.",
+  'metaText_legal' => "LibreQR " . $libreqrVersion . " est un logiciel libre dont le <a href='https://code.antopie.org/miraty/libreqr/' rel='external noreferrer'>code source</a> est disponible selon les termes de l'<abbr title='GNU Affero General Public License version 3 ou toute version ultérieure'><a href='LICENSE.html' hreflang='en' rel='license'>AGPLv3</a>+</abbr>.",
 
   'opensearch_description' => "Générez des codes QR depuis votre barre de recherche ou d'adresse",
 );
diff --git a/locales/oc.php b/locales/oc.php
index f7cb2c5..7f3c267 100644
--- a/locales/oc.php
+++ b/locales/oc.php
@@ -11,16 +11,14 @@ $loc = array(
   'label_mainColor' => "Color del primièr plan",
 
   'placeholder' => "Dintratz lo tèxt de codar en còdi QR",
+  'placeholder_pixels' => "auto",
 
   'help_content' => "
-    Podètz pas que codar lo tèxt que volètz.<br>
-    Los logicials que deschifran los còdis QR poirián suggerir de los dubrir dins de logicials especials, segon lor <a href='https://en.wikipedia.org/wiki/List_of_URI_schemes'>esquèma URI</a>.<br><br>
-    Per exemple, per dubrir la pagina web :<br>
-    https://www.example/<br><br>
-    Per enviar un corrièl :<br>
-    mailto:contact@email.example<br><br>
-    Per partejar de coordonadas geograficas :<br>
-    geo:48.867564,2.364057
+    <p>Podètz pas que codar lo tèxt que volètz.</p>
+    <p>Los logicials que deschifran los còdis QR poirián suggerir de los dubrir dins de logicials especials, segon lor <a href='https://en.wikipedia.org/wiki/List_of_URI_schemes' hreflang='en' rel='help external noreferrer'>esquèma URI</a>.</p>
+    <p>Per exemple, per dubrir la pagina web : https://www.example/</p>
+    <p>Per enviar un corrièl : mailto:contact@email.example</p>
+    <p>Per partejar de coordonadas geograficas : geo:48.867564,2.364057</p>
   ",
   'help_redondancy' => "La redondància es la duplicacion de las informacions al còdi QR per dire de corregir las errors pendent lo deschiframent. Un taux mai naut produirà un còdi mai grand, mas serà de melhor deschifrar corrèctament.",
   'help_margin' => "Nombre de pixèls de la banda blanca a l’entorn del còdi QR.",
@@ -37,9 +35,9 @@ $loc = array(
   'metaText_qr' => "
     <h3>Qu’es aquò un còdi QR ?</h3>
     Un còdi QR es un còdi de barras en doas dimensions dins lo qual lo tèxt es escrich en binari. Un aparalh equipat d’un capteur optic pòt lo deschifrar, amb l’aplicacion que cal.
-    <a lang='ca' href='https://ca.wikipedia.org/wiki/Codi_QR'>Còdi QR a la Wikipèdia</a>.
+    <a lang='ca' href='https://ca.wikipedia.org/wiki/Codi_QR' hreflang='ca' rel='help external noreferrer'>Còdi QR a la Wikipèdia</a>.
   ",
-  'metaText_legal' => "LibreQR " . $libreqrVersion . " es un logicial liure que son <a href='https://code.antopie.org/miraty/libreqr/'>còdi font</a> es disponible jols tèrmes de la licéncia <abbr title='GNU Affero General Public License version 3 or any later version'><a href='LICENSE.html'>AGPLv3</a>+</abbr>.",
+  'metaText_legal' => "LibreQR " . $libreqrVersion . " es un logicial liure que son <a href='https://code.antopie.org/miraty/libreqr/' rel='external noreferrer'>còdi font</a> es disponible jols tèrmes de la licéncia <abbr title='GNU Affero General Public License version 3 or any later version'><a href='LICENSE.html' hreflang='en' rel='license'>AGPLv3</a>+</abbr>.",
 
   'opensearch_description' => "Generatz de còdis QR a partir de la barra de recèrca o d’adreça",
 );
diff --git a/style.less b/style.less
index 327ab56..81f14da 100755
--- a/style.less
+++ b/style.less
@@ -77,6 +77,14 @@ a {
   @media @dark {
     background-color: @bgHelp-dark;
   }
+
+  & p {
+    margin-top: 0px;
+    margin-bottom: 8px;
+    &:last-child {
+      margin-bottom: 0px;
+    }
+  }
 }
 
 #sideParams {