finished circle keyboard implementation and update window size

2025-12-05 01:18:54 +01:00
parent ef740ca9dd
commit 3512bf0fac
4 changed files with 187 additions and 127 deletions
--- a/src/app/keyboards/circle-keyboard.component.css
+++ b/src/app/keyboards/circle-keyboard.component.css
@@ -0,0 +1,147 @@
+.circle-keyboard-container {
+  position: relative;
+  width: 400px;
+  height: 400px;
+  margin: 50px auto;
+  background: #f5f5f5;
+}
+
+/* Center Button Container */
+.center-button-container {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 140px;
+  height: 140px;
+  z-index: 1;
+}
+
+/* Center Button Sections */
+.center-section {
+  position: absolute;
+  background: white;
+  font-size: 20px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background 0.2s;
+  border: 2px solid #ddd;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* Top-left: Backspace (triangle) */
+.top-left{
+  top: 0;
+  left: 0;
+  width: 70px;
+  height: 70px;
+  border-radius: 70px 0 0 0;
+}
+
+/* Top-right: Enter*/
+.top-right {
+  top: 0;
+  right: 0;
+  width: 70px;
+  height: 70px;
+  border-radius: 0 70px 0 0;
+}
+
+/* Bottom: Space */
+.bottom-left {
+  bottom: 0;
+  left: 0;
+  width: 70px;
+  height: 70px;
+  border-radius: 0 0 0 70px;
+}
+
+.bottom-left.active {
+  background: #4CAF50 !important;
+  color: white;
+  border-color: #45a049;
+}
+
+.bottom-right {
+    bottom: 0;
+    right: 0;
+    width: 70px;
+    height: 70px;
+    border-radius: 0 0 70px 0;
+}
+
+.middle-left {
+  top: 50%;
+  left: 50%;
+  transform: translate(-100%, -50%); /* Komplett links von der Mitte */
+  width: 30px;  /* Halbe Breite */
+  height: 55px; /* Volle Höhe */
+  border-radius: 35px 0 0 35px; /* Linke Hälfte eines Kreises */
+  z-index: 15; /* Über anderen Buttons */
+}
+
+.middle-right {
+  top: 50%;
+  left: 50%;
+  transform: translate(0%, -50%); /* Direkt rechts von der Mitte */
+  width: 30px;  /* Halbe Breite */
+  height: 55px; /* Volle Höhe */
+  border-radius: 0 35px 35px 0; /* Rechte Hälfte eines Kreises */
+  z-index: 15; /* Über anderen Buttons */
+}
+
+/* 8 Circle Buttons */
+.circle-button {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 70px;
+  height: 70px;
+  margin: -35px 0 0 -35px;
+  border-radius: 50%;
+  border: 2px solid #ddd;
+  background: white;
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+  transition: background 0.2s, border-color 0.2s;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
+  z-index: 1;
+}
+
+.second-ring {
+    width: 50px;
+    height: 50px;
+    font-size: 20px;
+    font-weight: normal;
+    margin: -25px 0 0 -25px;
+}
+
+.third-ring {
+    width: 40px;
+    height: 40px;
+    font-size: 18px;
+    font-weight: normal;
+    margin: -20px 0 0 -20px;
+}
+
+.fourth-ring {
+    width: 30px;
+    height: 30px;
+    font-size: 16px;
+    font-weight: lighter;
+    margin: -20px 0 0 -20px;
+}
+
+.circle-button:hover, .center-section:hover {
+  background: #e8e8e8;
+  border-color: #999;
+}
+
+.circle-button:active, .center-section:active {
+  background: #d0d0d0;
+}