Musikunterricht in Thüringen

Benutzer-Werkzeuge

Webseiten-Werkzeuge

tools:intervalltrainer

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige ÜberarbeitungVorherige Überarbeitung
tools:intervalltrainer [22/05/2025 16:49] – angelegt Eric Webertools:intervalltrainer [05/04/2026 15:49] (aktuell) – Eric Weber
Zeile 23: Zeile 23:
         }         }
  
-        .app-container {+        .interval-trainer-app .app-container {
             width: 100%;             width: 100%;
             max-width: 800px;             max-width: 800px;
Zeile 33: Zeile 33:
         }         }
  
-        h1, h2 {+        .interval-trainer-app h1, 
 +        .interval-trainer-app h2 {
             text-align: center;             text-align: center;
             color: #2d3748;             color: #2d3748;
Zeile 40: Zeile 41:
         }         }
  
-        h1 {+        .interval-trainer-app h1 {
             font-size: 2.5rem;             font-size: 2.5rem;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Zeile 49: Zeile 50:
         }         }
  
-        h2 {+        .interval-trainer-app h2 {
             font-size: 1.8rem;             font-size: 1.8rem;
             margin-bottom: 30px;             margin-bottom: 30px;
         }         }
  
-        .settings-section {+        .interval-trainer-app .settings-section {
             margin-bottom: 35px;             margin-bottom: 35px;
             padding: 25px;             padding: 25px;
Zeile 63: Zeile 64:
         }         }
  
-        .settings-section:hover {+        .interval-trainer-app .settings-section:hover {
             box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);             box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
             transform: translateY(-2px);             transform: translateY(-2px);
         }         }
  
-        label {+        .interval-trainer-app label {
             display: block;             display: block;
             margin-bottom: 15px;             margin-bottom: 15px;
Zeile 76: Zeile 77:
         }         }
  
-        .interval-checkboxes {+        .interval-trainer-app .interval-checkboxes {
             display: grid;             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
Zeile 83: Zeile 84:
         }         }
  
-        .interval-checkbox-item {+        .interval-trainer-app .interval-checkbox-item {
             display: flex;             display: flex;
             align-items: center;             align-items: center;
Zeile 93: Zeile 94:
         }         }
  
-        .interval-checkbox-item:hover {+        .interval-trainer-app .interval-checkbox-item:hover {
             background: rgba(102, 126, 234, 0.1);             background: rgba(102, 126, 234, 0.1);
             transform: translateX(5px);             transform: translateX(5px);
         }         }
  
-        .interval-checkbox-item label {+        .interval-trainer-app .interval-checkbox-item label {
             display: flex;             display: flex;
             align-items: center;             align-items: center;
Zeile 108: Zeile 109:
         }         }
  
-        .interval-checkbox-item input[type="checkbox"] {+        .interval-trainer-app .interval-checkbox-item input[type="checkbox"] {
             margin-right: 10px;             margin-right: 10px;
             width: 18px;             width: 18px;
Zeile 115: Zeile 116:
         }         }
  
-        .interval-name {+        .interval-trainer-app .interval-name {
             flex: 1;             flex: 1;
         }         }
  
-        .play-interval-sample {+        .interval-trainer-app .play-interval-sample {
             background: linear-gradient(135deg, #667eea, #764ba2);             background: linear-gradient(135deg, #667eea, #764ba2);
             color: white;             color: white;
Zeile 135: Zeile 136:
         }         }
  
-        .play-interval-sample:hover {+        .interval-trainer-app .play-interval-sample:hover {
             transform: scale(1.1);             transform: scale(1.1);
             box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);             box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
         }         }
  
-        .play-interval-sample:disabled {+        .interval-trainer-app .play-interval-sample:disabled {
             background: #cbd5e0;             background: #cbd5e0;
             cursor: not-allowed;             cursor: not-allowed;
Zeile 147: Zeile 148:
         }         }
  
-        .radio-group {+        .interval-trainer-app .radio-group {
             display: flex;             display: flex;
             flex-wrap: wrap;             flex-wrap: wrap;
Zeile 153: Zeile 154:
         }         }
  
-        .radio-group label {+        .interval-trainer-app .radio-group label {
             display: flex;             display: flex;
             align-items: center;             align-items: center;
Zeile 166: Zeile 167:
         }         }
  
-        .radio-group label:hover {+        .interval-trainer-app .radio-group label:hover {
             background: rgba(102, 126, 234, 0.1);             background: rgba(102, 126, 234, 0.1);
         }         }
  
-        .radio-group input[type="radio"] {+        .interval-trainer-app .radio-group input[type="radio"] {
             margin-right: 8px;             margin-right: 8px;
             accent-color: #667eea;             accent-color: #667eea;
         }         }
  
-        button {+        .interval-trainer-app button {
             padding: 12px 24px;             padding: 12px 24px;
             border: none;             border: none;
Zeile 187: Zeile 188:
         }         }
  
-        button:hover {+        .interval-trainer-app button:hover {
             transform: translateY(-2px);             transform: translateY(-2px);
             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);             box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
         }         }
  
-        button:active {+        .interval-trainer-app button:active {
             transform: translateY(0);             transform: translateY(0);
         }         }
  
-        /* Primäre Buttons */ +        .interval-trainer-app .btn-primary {
-        .btn-primary {+
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             color: white;             color: white;
         }         }
  
-        .btn-primary:hover {+        .interval-trainer-app .btn-primary:hover {
             background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);             background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
         }         }
  
-        /* Sekundäre Buttons */ +        .interval-trainer-app .btn-secondary {
-        .btn-secondary {+
             background: linear-gradient(135deg, #718096 0%, #4a5568 100%);             background: linear-gradient(135deg, #718096 0%, #4a5568 100%);
             color: white;             color: white;
         }         }
  
-        .btn-secondary:hover {+        .interval-trainer-app .btn-secondary:hover {
             background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);             background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
         }         }
  
-        /* Disabled Buttons */ +        .interval-trainer-app button:disabled {
-        button:disabled {+
             background: #e2e8f0 !important;             background: #e2e8f0 !important;
             color: #a0aec0 !important;             color: #a0aec0 !important;
Zeile 225: Zeile 223:
         }         }
  
-        /* Antwort-Buttons */ +        .interval-trainer-app .answer-button {
-        .answer-button {+
             background: white;             background: white;
             color: #2d3748;             color: #2d3748;
Zeile 236: Zeile 233:
         }         }
  
-        .answer-button:hover {+        .interval-trainer-app .answer-button:hover {
             border-color: #667eea;             border-color: #667eea;
             background: rgba(102, 126, 234, 0.05);             background: rgba(102, 126, 234, 0.05);
         }         }
  
-        .answer-button.correct {+        .interval-trainer-app .answer-button.correct {
             background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);             background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
             color: white;             color: white;
Zeile 247: Zeile 244:
         }         }
  
-        .answer-button.incorrect {+        .interval-trainer-app .answer-button.incorrect {
             background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);             background: linear-gradient(135deg, #f56565 0%, #e53e3e 100%);
             color: white;             color: white;
Zeile 253: Zeile 250:
         }         }
  
-        .answer-button.revealed-correct {+        .interval-trainer-app .answer-button.revealed-correct {
             background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);             background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
             color: white;             color: white;
Zeile 259: Zeile 256:
         }         }
  
-        .answer-options {+        .interval-trainer-app .answer-options {
             display: flex;             display: flex;
             flex-wrap: wrap;             flex-wrap: wrap;
Zeile 266: Zeile 263:
         }         }
  
-        .test-area {+        .interval-trainer-app .test-area {
             text-align: center;             text-align: center;
             padding: 20px;             padding: 20px;
         }         }
  
-        .feedback {+        .interval-trainer-app .feedback {
             margin: 20px 0;             margin: 20px 0;
             padding: 15px 20px;             padding: 15px 20px;
Zeile 280: Zeile 277:
         }         }
  
-        .feedback.correct {+        .interval-trainer-app .feedback.correct {
             background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);             background: linear-gradient(135deg, #c6f6d5 0%, #9ae6b4 100%);
             color: #22543d;             color: #22543d;
Zeile 286: Zeile 283:
         }         }
  
-        .feedback.incorrect {+        .interval-trainer-app .feedback.incorrect {
             background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);             background: linear-gradient(135deg, #fed7d7 0%, #feb2b2 100%);
             color: #742a2a;             color: #742a2a;
Zeile 292: Zeile 289:
         }         }
  
-        .feedback.revealed {+        .interval-trainer-app .feedback.revealed {
             background: linear-gradient(135deg, #bee3f8 0%, #90cdf4 100%);             background: linear-gradient(135deg, #bee3f8 0%, #90cdf4 100%);
             color: #2a4365;             color: #2a4365;
Zeile 298: Zeile 295:
         }         }
  
-        .progress-area {+        .interval-trainer-app .progress-area {
             background: rgba(255, 255, 255, 0.9);             background: rgba(255, 255, 255, 0.9);
             border-radius: 15px;             border-radius: 15px;
Zeile 306: Zeile 303:
         }         }
  
-        .progress-grid {+        .interval-trainer-app .progress-grid {
             display: grid;             display: grid;
             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));             grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
Zeile 313: Zeile 310:
         }         }
  
-        .progress-item {+        .interval-trainer-app .progress-item {
             text-align: center;             text-align: center;
             padding: 15px;             padding: 15px;
Zeile 320: Zeile 317:
         }         }
  
-        .progress-value {+        .interval-trainer-app .progress-value {
             font-size: 1.5rem;             font-size: 1.5rem;
             font-weight: 700;             font-weight: 700;
Zeile 327: Zeile 324:
         }         }
  
-        .progress-label {+        .interval-trainer-app .progress-label {
             font-size: 0.9rem;             font-size: 0.9rem;
             color: #4a5568;             color: #4a5568;
Zeile 333: Zeile 330:
         }         }
  
-        .results-area {+        .interval-trainer-app .results-area {
             text-align: center;             text-align: center;
             padding: 30px;             padding: 30px;
Zeile 340: Zeile 337:
         }         }
  
-        .results-score {+        .interval-trainer-app .results-score {
             font-size: 3rem;             font-size: 3rem;
             font-weight: 700;             font-weight: 700;
Zeile 350: Zeile 347:
         }         }
  
-        .hidden {+        .interval-trainer-app .hidden {
             display: none;             display: none;
         }         }
  
-        .task-description {+        .interval-trainer-app .task-description {
             font-size: 1.3rem;             font-size: 1.3rem;
             margin: 20px 0;             margin: 20px 0;
Zeile 361: Zeile 358:
         }         }
  
-        .play-main-button {+        .interval-trainer-app .play-main-button {
             background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);             background: linear-gradient(135deg, #ed8936 0%, #dd6b20 100%);
             color: white;             color: white;
Zeile 369: Zeile 366:
         }         }
  
-        .play-main-button:hover {+        .interval-trainer-app .play-main-button:hover {
             background: linear-gradient(135deg, #dd6b20 0%, #c05621 100%);             background: linear-gradient(135deg, #dd6b20 0%, #c05621 100%);
         }         }
  
-        .question-header {+        .interval-trainer-app .question-header {
             background: rgba(102, 126, 234, 0.1);             background: rgba(102, 126, 234, 0.1);
             padding: 15px;             padding: 15px;
Zeile 380: Zeile 377:
         }         }
  
-        .question-number {+        .interval-trainer-app .question-number {
             font-size: 1.2rem;             font-size: 1.2rem;
             font-weight: 600;             font-weight: 600;
Zeile 391: Zeile 388:
             }             }
  
-            .app-container {+            .interval-trainer-app .app-container {
                 padding: 20px;                 padding: 20px;
                 margin: 10px 0;                 margin: 10px 0;
             }             }
  
-            h1 {+            .interval-trainer-app h1 {
                 font-size: 2rem;                 font-size: 2rem;
             }             }
  
-            .interval-checkboxes {+            .interval-trainer-app .interval-checkboxes {
                 grid-template-columns: 1fr;                 grid-template-columns: 1fr;
             }             }
  
-            .radio-group {+            .interval-trainer-app .radio-group {
                 flex-direction: column;                 flex-direction: column;
             }             }
  
-            .answer-options {+            .interval-trainer-app .answer-options {
                 flex-direction: column;                 flex-direction: column;
                 align-items: center;                 align-items: center;
             }             }
  
-            .answer-button {+            .interval-trainer-app .answer-button {
                 width: 100%;                 width: 100%;
                 max-width: 300px;                 max-width: 300px;
Zeile 518: Zeile 515:
                 <button id="change-settings-button" class="btn-secondary">Einstellungen ändern</button>                 <button id="change-settings-button" class="btn-secondary">Einstellungen ändern</button>
             </div>             </div>
 +        </div>
 +        <div style="text-align: right; margin-top: 16px; font-size: 0.75rem; color: #a0aec0;">
 +            Made with <a href="https://claude.ai" target="_blank" style="color: #667eea; text-decoration: none;">claude.ai</a>
 +            by <a href="https://www.ericweber.de" target="_blank" style="color: #667eea; text-decoration: none;">Eric Weber</a>
         </div>         </div>
     </div>     </div>
tools/intervalltrainer.1747925341.txt.gz · Zuletzt geändert: von Eric Weber