Working on adding alternate key values for number keys.

app/templates/tools/keyboard.html

@@ -2,16 +2,16 @@
 
 <div class="keyboard d-none d-md-none d-lg-block">
     <div class="row mb-3 justify-content-center g-0">
-        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="1" class="btn btn-lg btn-light border keyboard-key">1</a></div>
-        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="2" class="btn btn-lg btn-light border keyboard-key">2</a></div>
-        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="3" class="btn btn-lg btn-light border keyboard-key">3</a></div>
-        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="4" class="btn btn-lg btn-light border keyboard-key">4</a></div>
-        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="5" class="btn btn-lg btn-light border keyboard-key">5</a></div>
-        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="6" class="btn btn-lg btn-light border keyboard-key">6</a></div>
-        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="7" class="btn btn-lg btn-light border keyboard-key">7</a></div>
-        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="8" class="btn btn-lg btn-light border keyboard-key">8</a></div>
-        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="9" class="btn btn-lg btn-light border keyboard-key">9</a></div>
-        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="0" class="btn btn-lg btn-light border keyboard-key">0</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="1" data-alt-value="!" class="btn btn-lg btn-light border keyboard-key">1</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="2" data-alt-value="@" class="btn btn-lg btn-light border keyboard-key">2</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="3" data-alt-value="#" class="btn btn-lg btn-light border keyboard-key">3</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="4" data-alt-value="$" class="btn btn-lg btn-light border keyboard-key">4</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="5" data-alt-value="%" class="btn btn-lg btn-light border keyboard-key">5</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="6" data-alt-value="^" class="btn btn-lg btn-light border keyboard-key">6</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="7" data-alt-value="&" class="btn btn-lg btn-light border keyboard-key">7</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="8" data-alt-value="*" class="btn btn-lg btn-light border keyboard-key">8</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="9" data-alt-value="(" class="btn btn-lg btn-light border keyboard-key">9</a></div>
+        <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="0" data-alt-value=")" class="btn btn-lg btn-light border keyboard-key">0</a></div>
     </div>
     <div class="row mb-3 justify-content-center g-0">
         <div class="col-1 d-grid gap-2 mx-auto"><a href="#!" data-value="q" class="btn btn-lg btn-light border keyboard-key">q</a></div>