Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

--- tools:rhythmustrainer-einfach [10/08/2025 15:58] – angelegt Eric Weber
+++ tools:rhythmustrainer-einfach [12/08/2025 20:59] (aktuell) – Eric Weber
@@ Zeile 6: / Zeile 6: @@
     <title>Rhythmus-Trainer</title>
     <style>
-        body {
+        .rhythm-trainer {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
             color: #333;
+            box-sizing: border-box;
         }
-        .container {
+        .rhythm-trainer * {
-            background: white;
+            box-sizing: border-box;
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: 0 15px 35px rgba(0,0,0,0.1);
-            backdrop-filter: blur(10px);
         }
-        h1 {
+        .rhythm-trainer h1 {
             text-align: center;
             color: #4a5568;
-            margin-bottom: 30px;
+            margin: 0 0 30px 0;
             font-size: 2.5em;
             background: linear-gradient(45deg, #667eea, #764ba2);
@@ Zeile 35: / Zeile 30: @@
         }
-        .controls {
+        .rhythm-trainer .controls {
             display: flex;
             gap: 15px;
@@ Zeile 43: / Zeile 38: @@
         }
-        button {
+        .rhythm-trainer button {
             padding: 12px 24px;
             font-size: 16px;
@@ Zeile 55: / Zeile 50: @@
         }
-        .primary-btn {
+        .rhythm-trainer .primary-btn {
             background: linear-gradient(45deg, #667eea, #764ba2);
             color: white;
@@ Zeile 61: / Zeile 56: @@
         }
-        .primary-btn:hover {
+        .rhythm-trainer .primary-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
         }
-        .secondary-btn {
+        .rhythm-trainer .secondary-btn {
             background: linear-gradient(45deg, #48bb78, #38a169);
             color: white;
@@ Zeile 72: / Zeile 67: @@
         }
-        .secondary-btn:hover {
+        .rhythm-trainer .secondary-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(72, 187, 120, 0.6);
         }
-        .show-btn {
+        .rhythm-trainer .show-btn {
             background: linear-gradient(45deg, #ed8936, #dd6b20);
             color: white;
@@ Zeile 83: / Zeile 78: @@
         }
-        .show-btn:hover {
+        .rhythm-trainer .show-btn:hover {
             transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(237, 137, 54, 0.6);
         }
-        button:disabled {
+        .rhythm-trainer button:disabled {
             opacity: 0.5;
             cursor: not-allowed;
@@ Zeile 94: / Zeile 89: @@
         }
-        .rhythm-display {
+        .rhythm-trainer .rhythm-display {
             background: #f7fafc;
             border: 3px solid #e2e8f0;
@@ Zeile 109: / Zeile 104: @@
         }
-        .rhythm-display::before {
+        .rhythm-trainer .rhythm-display::before {
             content: '';
             position: absolute;
@@ Zeile 120: / Zeile 115: @@
         }
-        .rhythm-display.playing::before {
+        .rhythm-trainer .rhythm-display.playing::before {
             left: 100%;
         }
-        .rhythm-notation {
+        .rhythm-trainer .rhythm-notation {
             font-size: 3em;
             font-family: 'Courier New', monospace;
@@ Zeile 133: / Zeile 128: @@
         }
-        .beat-indicator {
+        .rhythm-trainer .beat-indicator {
             display: flex;
             justify-content: center;
@@ Zeile 140: / Zeile 135: @@
         }
-        .beat {
+        .rhythm-trainer .beat {
             width: 60px;
             height: 60px;
@@ Zeile 155: / Zeile 150: @@
         }
-        .beat.active {
+        .rhythm-trainer .beat.active {
             background: linear-gradient(45deg, #667eea, #764ba2);
             color: white;
@@ Zeile 162: / Zeile 157: @@
         }
-        .info {
+        .rhythm-trainer .info {
             background: #ebf8ff;
             border-left: 4px solid #3182ce;
@@ Zeile 172: / Zeile 167: @@
         }
-        .tempo-control {
+        .rhythm-trainer .tempo-control {
             display: flex;
             align-items: center;
@@ Zeile 180: / Zeile 175: @@
         }
-        .tempo-control input {
+        .rhythm-trainer .tempo-control input {
             width: 200px;
             height: 8px;
@@ Zeile 188: / Zeile 183: @@
         }
-        .tempo-display {
+        .rhythm-trainer .tempo-display {
             font-weight: bold;
             font-size: 18px;
@@ Zeile 195: / Zeile 190: @@
         }
-        @keyframes pulse {
+        @keyframes rhythm-pulse {
 % { transform: scale(1); }
 % { transform: scale(1.1); }
@@ Zeile 201: / Zeile 196: @@
         }
-        .playing .rhythm-notation {
+        .rhythm-trainer .rhythm-display.playing .rhythm-notation {
-            animation: pulse 0.5s ease-in-out;
+            animation: rhythm-pulse 0.5s ease-in-out;
         }
     </style>
 </head>
 <body>
-    <div class="container">
+    <div class="rhythm-trainer" style="text-align: center">
         <h1>🎵 Rhythmus-Trainer</h1>
+        <h2>Einfach (Viertel- oder Achtelnoten)</h2>
         <div class="info">
@@ Zeile 298: / Zeile 294: @@
                 currentRhythm.push(Math.random() < 0.5 ? 0 : 1);
             }
+            // Reset solution state
             solutionVisible = false;
+            showBtn.textContent = 'Lösung anzeigen';
             playBtn.disabled = false;
             showBtn.disabled = false;
@@ Zeile 308: / Zeile 308: @@
         function rhythmToNotation(rhythm) {
             const notation = rhythm.map(beat => {
-                return beat === 0 ? '♩' : '♫';  // Quarter note or eighth notes
+                return beat === 0 ? '♩' : '♪♪';  // Quarter note or eighth notes
             }).join('  ');
             return notation;