From 7827a47d29c7a36afe8fab6dfd551ef023d4025c Mon Sep 17 00:00:00 2001
From: schlagmichdoch <schlagmichdoch@users.noreply.github.com>
Date: Wed, 8 Mar 2023 15:18:22 +0100
Subject: [PATCH] increase seo with recommendations from PageSpeed Insights

---
 public/index.html                             | 50 +++++++++----------
 public/robots.txt                             |  2 +
 public/scripts/{qrcode.js => QRCode.min.js}   |  0
 public/styles.css                             | 11 ++--
 public_included_ws_fallback/index.html        | 50 +++++++++----------
 .../scripts/{qrcode.js => QRCode.min.js}      |  0
 .../scripts/robots.txt                        |  2 +
 public_included_ws_fallback/styles.css        | 11 ++--
 8 files changed, 66 insertions(+), 60 deletions(-)
 create mode 100644 public/robots.txt
 rename public/scripts/{qrcode.js => QRCode.min.js} (100%)
 rename public_included_ws_fallback/scripts/{qrcode.js => QRCode.min.js} (100%)
 create mode 100644 public_included_ws_fallback/scripts/robots.txt

diff --git a/public/index.html b/public/index.html
index 759c9a4..2cad0c6 100644
--- a/public/index.html
+++ b/public/index.html
@@ -45,45 +45,45 @@
             </svg>
         </a>
         <div id="theme-wrapper">
-            <a id="theme-auto" class="icon-button selected" title="Adapt to System" >
+            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
                 <svg class="icon">
                     <use xlink:href="#icon-theme-auto" />
                 </svg>
-            </a>
+            </div>
             <div>
-                <a id="theme-light" class="icon-button" title="Always Light" >
+                <div id="theme-light" class="icon-button" title="Always Light" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-light" />
                     </svg>
-                </a>
-                <a id="theme-dark" class="icon-button" title="Always Dark" >
+                </div>
+                <div id="theme-dark" class="icon-button" title="Always Dark" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-dark" />
                     </svg>
-                </a>
+                </div>
             </div>
         </div>
-        <a id="notification" class="icon-button" title="Enable Notifications" hidden>
+        <div id="notification" class="icon-button" title="Enable Notifications" hidden>
             <svg class="icon">
                 <use xlink:href="#notifications" />
             </svg>
-        </a>
-        <a id="install" class="icon-button" title="Install PairDrop" hidden>
+        </div>
+        <div id="install" class="icon-button" title="Install PairDrop" hidden>
             <svg class="icon">
                 <use xlink:href="#homescreen" />
             </svg>
-        </a>
-        <a id="pair-device" class="icon-button" title="Pair Device" hidden>
+        </div>
+        <div id="pair-device" class="icon-button" title="Pair Device" hidden>
             <svg class="icon">
                 <use xlink:href="#pair-device-icon" />
             </svg>
-        </a>
-        <a id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
+        </div>
+        <div id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
             <svg class="icon">
                 <use xlink:href="#clear-pair-devices-icon" />
             </svg>
-        </a>
-        <a id="cancel-paste-mode" class="button" hidden>Done</a>
+        </div>
+        <div id="cancel-paste-mode" class="button" hidden>Done</div>
     </header>
     <!-- Center -->
     <div id="center">
@@ -126,12 +126,12 @@
                     <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
                     <hr>
                     <div id="key-input-container">
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-3" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-4" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-5" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-6" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
                     </div>
                     <div class="font-subheading center text-center">Enter key from another device to continue.</div>
                     <div class="center row-reverse">
@@ -220,7 +220,7 @@
                         <span class="display-name"></span>
                     </div>
                     <div class="row-separator"></div>
-                    <div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
+                    <div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
                     <div class="center row-reverse">
                         <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
                         <button class="button" type="button" title="ESCAPE" close>Cancel</button>
@@ -365,11 +365,11 @@
         </symbol>
     </svg>
     <!-- Scripts -->
-    <script src="scripts/util.js"></script>
+    <script src="scripts/theme.js"></script>
     <script src="scripts/network.js"></script>
     <script src="scripts/ui.js"></script>
-    <script src="scripts/theme.js" async></script>
-    <script src="scripts/qrcode.js" async></script>
+    <script src="scripts/util.js" async></script>
+    <script src="scripts/QRCode.min.js" async></script>
     <script src="scripts/zip.min.js" async></script>
     <script src="scripts/NoSleep.min.js" async></script>
     <!-- Sounds -->
diff --git a/public/robots.txt b/public/robots.txt
new file mode 100644
index 0000000..eb05362
--- /dev/null
+++ b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/public/scripts/qrcode.js b/public/scripts/QRCode.min.js
similarity index 100%
rename from public/scripts/qrcode.js
rename to public/scripts/QRCode.min.js
diff --git a/public/styles.css b/public/styles.css
index fd29f24..337a82c 100644
--- a/public/styles.css
+++ b/public/styles.css
@@ -96,7 +96,8 @@ header > div {
     align-self: flex-start;
     touch-action: manipulation;
 }
-header > div a {
+
+header > div .icon-button {
     height: 40px;
     transition: all 300ms;
 }
@@ -106,7 +107,7 @@ header > div > div {
     flex-direction: column;
 }
 
-header > div:not(:hover) a:not(.selected) {
+header > div:not(:hover) .icon-button:not(.selected) {
     height: 0;
     opacity: 0;
 }
@@ -125,16 +126,16 @@ header > div:hover::before {
     margin-bottom: 8px;
 }
 
-header > div:hover a.selected::before {
+header > div:hover .icon-button.selected::before {
     opacity: 0.1;
 }
 
 @media (pointer: coarse) {
-    header > div:hover a.selected:hover::before {
+    header > div:hover .icon-button.selected:hover::before {
         opacity: 0.2;
     }
 
-    header > div a:not(.selected) {
+    header > div .icon-button:not(.selected) {
         height: 0;
         opacity: 0;
         pointer-events: none;
diff --git a/public_included_ws_fallback/index.html b/public_included_ws_fallback/index.html
index 6cc47b0..29e3ee7 100644
--- a/public_included_ws_fallback/index.html
+++ b/public_included_ws_fallback/index.html
@@ -45,45 +45,45 @@
             </svg>
         </a>
         <div id="theme-wrapper">
-            <a id="theme-auto" class="icon-button selected" title="Adapt to System" >
+            <div id="theme-auto" class="icon-button selected" title="Adapt to System" >
                 <svg class="icon">
                     <use xlink:href="#icon-theme-auto" />
                 </svg>
-            </a>
+            </div>
             <div>
-                <a id="theme-light" class="icon-button" title="Always Light" >
+                <div id="theme-light" class="icon-button" title="Always Light" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-light" />
                     </svg>
-                </a>
-                <a id="theme-dark" class="icon-button" title="Always Dark" >
+                </div>
+                <div id="theme-dark" class="icon-button" title="Always Dark" >
                     <svg class="icon">
                         <use xlink:href="#icon-theme-dark" />
                     </svg>
-                </a>
+                </div>
             </div>
         </div>
-        <a id="notification" class="icon-button" title="Enable Notifications" hidden>
+        <div id="notification" class="icon-button" title="Enable Notifications" hidden>
             <svg class="icon">
                 <use xlink:href="#notifications" />
             </svg>
-        </a>
-        <a id="install" class="icon-button" title="Install PairDrop" hidden>
+        </div>
+        <div id="install" class="icon-button" title="Install PairDrop" hidden>
             <svg class="icon">
                 <use xlink:href="#homescreen" />
             </svg>
-        </a>
-        <a id="pair-device" class="icon-button" title="Pair Device" hidden>
+        </div>
+        <div id="pair-device" class="icon-button" title="Pair Device" hidden>
             <svg class="icon">
                 <use xlink:href="#pair-device-icon" />
             </svg>
-        </a>
-        <a id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
+        </div>
+        <div id="clear-pair-devices" class="icon-button" title="Clear All Paired Devices" hidden>
             <svg class="icon">
                 <use xlink:href="#clear-pair-devices-icon" />
             </svg>
-        </a>
-        <a id="cancel-paste-mode" class="button" hidden>Done</a>
+        </div>
+        <div id="cancel-paste-mode" class="button" hidden>Done</div>
     </header>
     <!-- Center -->
     <div id="center">
@@ -129,12 +129,12 @@
                     <div id="pair-instructions" class="font-subheading center text-center">Input this key on another device<br>or scan the QR-Code.</div>
                     <hr>
                     <div id="key-input-container">
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
-                        <input type="tel" class="textarea center"  maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-1" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" autofocus contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-2" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-3" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-4" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-5" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
+                        <input type="tel" class="textarea center" aria-label="pair-key-6" maxlength="1" autocorrect="off" autocomplete="off" autocapitalize="none" spellcheck="false" contenteditable placeholder="" disabled>
                     </div>
                     <div class="font-subheading center text-center">Enter key from another device to continue.</div>
                     <div class="center row-reverse">
@@ -223,7 +223,7 @@
                         <span class="display-name"></span>
                     </div>
                     <div class="row-separator"></div>
-                    <div id="text-input" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
+                    <div id="text-input" title="Message" class="textarea" role="textbox" autocapitalize="none" spellcheck="false" autofocus contenteditable></div>
                     <div class="center row-reverse">
                         <button class="button" type="submit" title="STR + ENTER" disabled close>Send</button>
                         <button class="button" type="button" title="ESCAPE" close>Cancel</button>
@@ -368,11 +368,11 @@
         </symbol>
     </svg>
     <!-- Scripts -->
-    <script src="scripts/util.js"></script>
+    <script src="scripts/theme.js"></script>
     <script src="scripts/network.js"></script>
     <script src="scripts/ui.js"></script>
-    <script src="scripts/theme.js" async></script>
-    <script src="scripts/qrcode.js" async></script>
+    <script src="scripts/util.js" async></script>
+    <script src="scripts/QRCode.min.js" async></script>
     <script src="scripts/zip.min.js" async></script>
     <script src="scripts/NoSleep.min.js" async></script>
     <!-- Sounds -->
diff --git a/public_included_ws_fallback/scripts/qrcode.js b/public_included_ws_fallback/scripts/QRCode.min.js
similarity index 100%
rename from public_included_ws_fallback/scripts/qrcode.js
rename to public_included_ws_fallback/scripts/QRCode.min.js
diff --git a/public_included_ws_fallback/scripts/robots.txt b/public_included_ws_fallback/scripts/robots.txt
new file mode 100644
index 0000000..eb05362
--- /dev/null
+++ b/public_included_ws_fallback/scripts/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/public_included_ws_fallback/styles.css b/public_included_ws_fallback/styles.css
index e68e226..0b7c5d9 100644
--- a/public_included_ws_fallback/styles.css
+++ b/public_included_ws_fallback/styles.css
@@ -97,7 +97,8 @@ header > div {
     align-self: flex-start;
     touch-action: manipulation;
 }
-header > div a {
+
+header > div .icon-button {
     height: 40px;
     transition: all 300ms;
 }
@@ -107,7 +108,7 @@ header > div > div {
     flex-direction: column;
 }
 
-header > div:not(:hover) a:not(.selected) {
+header > div:not(:hover) .icon-button:not(.selected) {
     height: 0;
     opacity: 0;
 }
@@ -126,16 +127,16 @@ header > div:hover::before {
     margin-bottom: 8px;
 }
 
-header > div:hover a.selected::before {
+header > div:hover .icon-button.selected::before {
     opacity: 0.1;
 }
 
 @media (pointer: coarse) {
-    header > div:hover a.selected:hover::before {
+    header > div:hover .icon-button.selected:hover::before {
         opacity: 0.2;
     }
 
-    header > div a:not(.selected) {
+    header > div .icon-button:not(.selected) {
         height: 0;
         opacity: 0;
         pointer-events: none;