add DVORAK keyboard

src/app/app.component.css

@@ -140,7 +140,7 @@ button {
 
 .key-button:hover {
   background: #979797;
-  border-color: #999;
+  border-color: #3d3d3d;
 }
 
 .key-button:active {

src/app/app.component.html

@@ -5,7 +5,7 @@
   </form>
   <p>{{ greetingMessage }}</p>
 <div class="keyboard">
-  <!-- Row 1: Q W E R T Y U I O P -->
+  <!-- Row 1-->
   <div class="keyboard-row">
     <button *ngFor="let key of row1" 
             (click)="sendKey(key)"
@@ -14,7 +14,7 @@
     </button>
   </div>
 
-  <!-- Row 2: A S D F G H J K L -->
+  <!-- Row 2-->
   <div class="keyboard-row">
     <button *ngFor="let key of row2" 
             (click)="sendKey(key)"
@@ -23,7 +23,7 @@
     </button>
   </div>
 
-  <!-- Row 3: Z X C V B N M -->
+  <!-- Row 3-->
   <div class="keyboard-row">
     <button *ngFor="let key of row3" 
             (click)="sendKey(key)"
@@ -55,5 +55,13 @@
       ↵ Enter
     </button>
   </div>
+  
+  <!-- Row 5: Layout switcher -->
+  <div class="keyboard-row">
+    <button (click)="switchLayout()" 
+            class="key-button layout-switch">
+      {{ currentLayout === 'qwerty' ? 'Switch to DVORAK' : 'Switch to QWERTY' }}
+    </button>
+  </div>
 </div>
 </main>

src/app/app.component.ts

@@ -29,16 +29,33 @@ export class AppComponent implements AfterViewInit {
     });
   }
 
-  // Keyboard Layout
+  // Keyboard Layout State
-  row1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
+  currentLayout: 'qwerty' | 'dvorak' = 'qwerty';
-  row2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
+  
-  row3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M'];
+  // QWERTY Layout
+  qwertyRow1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
+  qwertyRow2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
+  qwertyRow3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M', ",", "."];
+  
+  // DVORAK Layout
+  dvorakRow1 = [',', '.', 'P', 'Y', 'F', 'G', 'C', 'R', 'L'];
+  dvorakRow2 = ['A', 'O', 'E', 'U', 'I', 'D', 'H', 'T', 'N', 'S'];
+  dvorakRow3 = ['Q', 'J', 'K', 'X', 'B', 'M', 'W', 'V', 'Z'];
   
   shiftActive = false;
+  
+  // Getters for current layout
+  get row1() { return this.currentLayout === 'qwerty' ? this.qwertyRow1 : this.dvorakRow1; }
+  get row2() { return this.currentLayout === 'qwerty' ? this.qwertyRow2 : this.dvorakRow2; }
+  get row3() { return this.currentLayout === 'qwerty' ? this.qwertyRow3 : this.dvorakRow3; }
 
   toggleShift(): void {
     this.shiftActive = !this.shiftActive;
   }
+  
+  switchLayout(): void {
+    this.currentLayout = this.currentLayout === 'qwerty' ? 'dvorak' : 'qwerty';
+  }
 
   async sendKey(key: string): Promise<void> {
     this.inputElement.nativeElement.focus();