add normal layout keyboard

src/app/app.component.css

@@ -110,3 +110,50 @@ button {
     background-color: #0f0f0f69;
   }
 }
+
+.keyboard {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 20px;
+  background: #f5f5f5;
+  border-radius: 10px;
+}
+
+.keyboard-row {
+  display: flex;
+  gap: 6px;
+  justify-content: center;
+}
+
+.key-button {
+  min-width: 60px;
+  height: 60px;
+  font-size: 20px;
+  font-weight: bold;
+  border: 2px solid #ddd;
+  border-radius: 8px;
+  background: rgb(58, 56, 56);
+  cursor: pointer;
+  transition: all 0.1s;
+}
+
+.key-button:hover {
+  background: #979797;
+  border-color: #999;
+}
+
+.key-button:active {
+  background: #d0d0d0;
+  transform: scale(0.95);
+}
+
+.shift-key.active {
+  background: #4CAF50;
+  color: white;
+  border-color: #45a049;
+}
+
+.space-key {
+  min-width: 300px;
+}

src/app/app.component.html

@@ -16,4 +16,56 @@
     <button type="submit">Greet</button>
   </form>
   <p>{{ greetingMessage }}</p>
+<div class="keyboard">
+  <!-- Row 1: Q W E R T Y U I O P -->
+  <div class="keyboard-row">
+    <button *ngFor="let key of row1" 
+            (click)="sendKey(key)"
+            class="key-button">
+      {{ shiftActive ? key : key.toLowerCase() }}
+    </button>
+  </div>
+
+  <!-- Row 2: A S D F G H J K L -->
+  <div class="keyboard-row">
+    <button *ngFor="let key of row2" 
+            (click)="sendKey(key)"
+            class="key-button">
+      {{ shiftActive ? key : key.toLowerCase() }}
+    </button>
+  </div>
+
+  <!-- Row 3: Z X C V B N M -->
+  <div class="keyboard-row">
+    <button *ngFor="let key of row3" 
+            (click)="sendKey(key)"
+            class="key-button">
+      {{ shiftActive ? key : key.toLowerCase() }}
+    </button>
+  </div>
+
+  <!-- Reihe 4: special keys -->
+  <div class="keyboard-row">
+    <button (click)="toggleShift()" 
+            [class.active]="shiftActive"
+            class="key-button shift-key">
+      ⇧ Shift
+    </button>
+    
+    <button (click)="sendKey('Space')" 
+            class="key-button space-key">
+      Space
+    </button>
+    
+    <button (click)="sendKey('Backspace')" 
+            class="key-button">
+      ⌫ Delete
+    </button>
+    
+    <button (click)="sendKey('Enter')" 
+            class="key-button">
+      ↵ Enter
+    </button>
+  </div>
+</div>
 </main>

src/app/app.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { RouterOutlet } from '@angular/router';
 import { invoke } from "@tauri-apps/api/core";
@@ -10,9 +10,16 @@ import { invoke } from "@tauri-apps/api/core";
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
-export class AppComponent {
+export class AppComponent implements AfterViewInit {
   greetingMessage = "";
 
+  @ViewChild('greetInput') inputElement!: ElementRef;
+
+  ngAfterViewInit() {
+    // Beim Start fokussieren
+    this.inputElement.nativeElement.focus();
+  }
+
   greet(event: SubmitEvent, name: string): void {
     event.preventDefault();
 
@@ -21,4 +28,30 @@ export class AppComponent {
       this.greetingMessage = text;
     });
   }
+
+  // Keyboard Layout
+  row1 = ['Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P'];
+  row2 = ['A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L'];
+  row3 = ['Z', 'X', 'C', 'V', 'B', 'N', 'M'];
+  
+  shiftActive = false;
+
+  toggleShift(): void {
+    this.shiftActive = !this.shiftActive;
+  }
+
+  async sendKey(key: string): Promise<void> {
+    this.inputElement.nativeElement.focus();
+    
+    let finalKey = key;
+    if (key.length === 1) {
+      finalKey = this.shiftActive ? key.toUpperCase() : key.toLowerCase();
+    }
+    
+    await invoke("send_key", { key: finalKey });
+    
+    if (this.shiftActive && key.length === 1) {
+      this.shiftActive = false;
+    }
+  }
 }