# HTML Apps

# Keypad

<p>
<textarea id="tbInput" rows="10" cols="80" onclick="input(e);" >
  
</textarea>
</p>
  
<div id="VirtualKey">
<input id="btn1" type="button" value="✖" onclick="input(e);"> 
<input id="btn2" type="button" value="⨁" onclick="input(e);"> 
<input id="btn3" type="button" value="⨂" onclick="input(e);"> 
<input id="btn4" type="button" value="→" onclick="input(e);"> 
<input id="btn5" type="button" value="∈" onclick="input(e);"> 
<input id="btn6" type="button" value="∉" onclick="input(e);"> 
<input id="btn10" type="button"  value="⊂" onclick="input(e);">
<input id="btn10" type="button"  value="⚲" onclick="input(e);"> 
<input id="btn10" type="button"  value="𖤘" onclick="input(e);"> 
<br> 
<input id="btn10" type="button"  value="𝄃𝄃𝄂𝄀𝄁𝄃𝄂" onclick="input(e);"> 
<br> 
<input id="btn8" type="button" value="👶" onclick="input(e);"> 
<input id="btn8" type="button" value="👶🏽" onclick="input(e);"> 
<input id="btn8" type="button" value="👧🏻" onclick="input(e);"> 
<input id="btn8" type="button" value="🧕" onclick="input(e);"> 
<input id="btn8" type="button" value="🧕🏾" onclick="input(e);"> 
<input id="btn8" type="button" value="👩🏽‍🦱" onclick="input(e);"> 
<input id="btn8" type="button" value="👨" onclick="input(e);"> 
<input id="btn8" type="button" value="🧑🏾‍🦱" onclick="input(e);"> 
<input id="btn8" type="button" value="🧔🏽‍♂️" onclick="input(e);"> 
<br> 
<input id="btn7" type="button" value="🫆" onclick="input(e);"> 
<input id="btn7" type="button" value="🔐" onclick="input(e);"> 
<input id="btn9" type="button" value="🔑" onclick="input(e);"> 
<input id="btn9" type="button" value="🗝" onclick="input(e);"> 
<input id="btn9" type="button" value="⭔" onclick="input(e);"> 
<input id="btn9" type="button" value="⛓️" onclick="input(e);"> 
<br> 
<input id="btn9" type="button" value="Construct!" onclick="input(e);"> 
</div>
<br> 
<br>
<!--
<p>
<textarea id="tbOutput" rows="10" cols="80" onclick="input(e);" >
 <!-- 
</textarea>
</p>
<!--
 -->

# Simple

<p>
<textarea id="tbInput" rows="10" cols="80" onclick="input(e);" >
  
</textarea>
</p>
  
<div id="VirtualKey">
<input id="btn1" type="button" value="✖" onclick="input(e);"> 
<input id="btn2" type="button" value="⨁" onclick="input(e);"> 
<input id="btn3" type="button" value="⨂" onclick="input(e);"> 
<input id="btn4" type="button" value="→" onclick="input(e);"> 
<input id="btn5" type="button" value="∈" onclick="input(e);"> 
<input id="btn6" type="button" value="∉" onclick="input(e);"> 
<input id="btn10" type="button"  value="⊂" onclick="input(e);">
<input id="btn10" type="button"  value="⚲" onclick="input(e);"> 
<input id="btn10" type="button"  value="𖤘" onclick="input(e);"> 
<br> 
<input id="btn10" type="button"  value="𝄃𝄃𝄂𝄀𝄁𝄃𝄂" onclick="input(e);"> 
<br> 
<input id="btn8" type="button" value="👶" onclick="input(e);"> 
<input id="btn8" type="button" value="👶🏽" onclick="input(e);"> 
<input id="btn8" type="button" value="👧🏻" onclick="input(e);"> 
<input id="btn8" type="button" value="🧕" onclick="input(e);"> 
<input id="btn8" type="button" value="🧕🏾" onclick="input(e);"> 
<input id="btn8" type="button" value="👩🏽‍🦱" onclick="input(e);"> 
<input id="btn8" type="button" value="👨" onclick="input(e);"> 
<input id="btn8" type="button" value="🧑🏾‍🦱" onclick="input(e);"> 
<input id="btn8" type="button" value="🧔🏽‍♂️" onclick="input(e);"> 
<br> 
<input id="btn7" type="button" value="🫆" onclick="input(e);"> 
<input id="btn7" type="button" value="🔐" onclick="input(e);"> 
<input id="btn9" type="button" value="🔑" onclick="input(e);"> 
<input id="btn9" type="button" value="🗝" onclick="input(e);"> 
<input id="btn9" type="button" value="⭔" onclick="input(e);"> 
<input id="btn9" type="button" value="⛓️" onclick="input(e);"> 
<br> 
<input id="btn9" type="button" value="Construct!" onclick="input(e);"> 
</div>
<br> 
<br>

<!--
<p>
<textarea id="tbOutput" rows="10" cols="80" onclick="input(e);" >
  
</textarea>
</p>
-->

# junk

<div id="app">
  <div class="card">
    <header>
      <h1>Unicode Keypad</h1>
      <p>Click symbols to insert them into the text area</p>
    </header>
    <div class="textarea-wrapper">
      <textarea id="symbol-input" aria-label="Symbol Input" placeholder="Symbols will appear here..."></textarea>
    </div>
    <div class="keypad" id="keypad-container">
      <!-- Row 1: Math & Symbols -->
      <div class="row">
        <button class="key" data-char="×" aria-label="Multiplication Sign">×</button>
        <button class="key" data-char="⨁" aria-label="Circled Plus">⨁</button>
        <button class="key" data-char="⨂" aria-label="Circled Times">⨂</button>
        <button class="key" data-char="→" aria-label="Rightwards Arrow">→</button>
        <button class="key" data-char="∈" aria-label="Element Of">∈</button>
        <button class="key" data-char="∉" aria-label="Not An Element Of">∉</button>
        <button class="key" data-char="⊂" aria-label="Subset Of">⊂</button>
        <button class="key" data-char="⚲" aria-label="Neptune">⚲</button>
        <button class="key" data-char="𖤘" aria-label="Black Heart Suit">𖤘</button>
      </div>
      <!-- Row 2: Music (Full Width) -->
      <div class="row">
        <button class="key key-full" data-char="𝄃𝄃𝄂𝄀𝄁𝄃𝄂" aria-label="Music Symbols">𝄃𝄃𝄂𝄀𝄁𝄃𝄂</button>
      </div>
     <!-- Row 3: People Emojis -->
      <div class="row">
        <button class="key" data-char="👨" aria-label="Man">👨</button>
        <button class="key" data-char="👩" aria-label="Woman">👩</button>
        <button class="key" data-char="👴" aria-label="Old Man">👴</button>
        <button class="key" data-char="👵" aria-label="Old Woman">👵</button>
        <button class="key" data-char="👶" aria-label="Baby">👶</button>
        <button class="key" data-char="👧" aria-label="Girl">👧</button>
        <button class="key" data-char="👦" aria-label="Boy">👦</button>
        <button class="key" data-char="👮" aria-label="Police Officer">👮</button>
        <button class="key" data-char="👷" aria-label="Construction Worker">👷</button>
      </div>
      <!-- Row 4: Locks & Chains -->
      <div class="row">
        <button class="key" data-char="🔒" aria-label="Locked">🔒</button>
        <button class="key" data-char="🔓" aria-label="Unlocked">🔓</button>
        <button class="key" data-char="🔑" aria-label="Key">🔑</button>
        <button class="key" data-char="🔐" aria-label="Locked With Key">🔐</button>
        <button class="key" data-char="⭔" aria-label="Chess Pawn">⭔</button>
        <button class="key" data-char="⛓" aria-label="Chains">⛓</button>
      </div>
      <!-- Row 5: Action -->
      <div class="row">
        <button id="construct-btn" class="key key-construct" aria-label="Construct and Validate">Construct!</button>
      </div>
    </div>
  </div>

  <div id="notification" class="toast" role="alert" aria-live="polite"></div>
</div>