MusikimUnterricht.de

Benutzer-Werkzeuge

Webseiten-Werkzeuge

tools:ur-timer

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Beide Seiten, vorherige ÜberarbeitungVorherige Überarbeitung
tools:ur-timer [12/03/2026 15:46] – Eric Webertools:ur-timer [18/03/2026 19:44] (aktuell) – Eric Weber
Zeile 435: Zeile 435:
  
 .ut-fsbtn { .ut-fsbtn {
-margin-left: auto; +position: absolute; 
-flex-shrink: 0; +top: 10px; 
-width: 32px; +right: 10px; 
-height: 32px;+z-index: 100; 
 +width: 34px; 
 +height: 34px;
 border-radius: 8px; border-radius: 8px;
-border: 1.5px solid rgba(0,0,0,0.10); +border: 1.5px solid rgba(0,0,0,0.12) !important; 
-background: rgba(248,249,252,0.95); +background: rgba(255,255,255,0.92) !important; 
-color: #6b7280;+color: #6b7280 !important;
 font-size: 17px; font-size: 17px;
 line-height: 1; line-height: 1;
 cursor: pointer; cursor: pointer;
-display: flex;+display: flex !important;
 align-items: center; align-items: center;
 justify-content: center; justify-content: center;
-transition: all 0.15s;+transition: background 0.15s, color 0.15s, border-color 0.15s;
 padding: 0; padding: 0;
 +box-shadow: 0 1px 6px rgba(0,0,0,0.10);
 } }
 .ut-fsbtn:hover { .ut-fsbtn:hover {
-background: #fff; +background: #fff !important; 
-color: #16a34a; +color: #16a34a !important; 
-border-color: #16a34a; +border-color: #16a34a !important; 
-box-shadow: 0 2px 8px rgba(22,163,74,0.15);+} 
 +.ut-fsbtn.ut-fs-on { 
 +color: #dc2626 !important; 
 +border-color: #dc2626 !important; 
 +background: #fee2e2 !important; 
 +} 
 +.ut-fsbtn.ut-fs-on:hover { 
 +background: #dc2626 !important; 
 +color: #fff !important;
 } }
  
-/* Vollbild-Modus: body wird gesperrt, Timer liegt direkt auf body */+/* Vollbild-Modus: gesamte App wird auf Vollbild gesetzt */
 body.ut-fs-active { body.ut-fs-active {
 overflow: hidden !important; overflow: hidden !important;
Zeile 465: Zeile 476:
 width: 100% !important; width: 100% !important;
 } }
-#ut-timer.ut-fs-float {+#ut-app.ut-fs-float {
 position: fixed !important; position: fixed !important;
 top: 0 !important; top: 0 !important;
Zeile 474: Zeile 485:
 z-index: 99999 !important; z-index: 99999 !important;
 background: #fff !important; background: #fff !important;
-display: flex !important; +overflow-y: auto !important; 
-flex-direction: column !important; +overflow-x: hidden !important;
-min-height: 0 !important; +
-overflow: hidden !important;+
 } }
-#ut-timer.ut-fs-float .ut-area { +/* Timer-Screen im Vollbild: volle Höhe */ 
-flex: 1 !important; +#ut-app.ut-fs-float #ut-timer { 
-min-height: 0 !important; +height: 100vh !important; 
-height: 0 !important;+height: 100dvh !important;
 } }
-.ut-fsbtn.ut-fs-on { +/* Ergebnis-Screen im Vollbild: immer sichtbar über Timer */ 
-color: #dc2626 !important; +#ut-app.ut-fs-float #ut-result { 
-border-color: #dc2626 !important; +position: fixed !important; 
-background: #fee2e2 !important;+inset: 0 !important; 
 +z-index: 100001 !important; 
 +} 
 +/* Vollbild-Button im Vollbild: über allem */ 
 +#ut-app.ut-fs-float .ut-fsbtn { 
 +position: fixed !important; 
 +top: 10px !important; 
 +right: 10px !important; 
 +z-index: 100002 !important;
 } }
  
Zeile 739: Zeile 756:
 </style> </style>
 <div id="ut-app"> <div id="ut-app">
 +  <!-- Vollbild-Button: schwebt auf allen Screens -->
 +  <button class="ut-fsbtn" id="ut-fsbtn" onclick="utToggleFS()" title="Vollbild">⛶</button>
   <!-- ══ SETUP ══ -->   <!-- ══ SETUP ══ -->
   <div id="ut-setup">   <div id="ut-setup">
Zeile 796: Zeile 815:
         <div class="ut-chip gc"><span>Grün</span><span class="utv utv-pct" id="ut-gcur"><span class="utd utdd" id="utd-gp-h"> </span><span class="utd utdd" id="utd-gp-t">0</span><span class="utd utdd" id="utd-gp-o">0</span><span class="utdd utdpc">%</span></span></div>         <div class="ut-chip gc"><span>Grün</span><span class="utv utv-pct" id="ut-gcur"><span class="utd utdd" id="utd-gp-h"> </span><span class="utd utdd" id="utd-gp-t">0</span><span class="utd utdd" id="utd-gp-o">0</span><span class="utdd utdpc">%</span></span></div>
         <span class="ut-otbadge" id="ut-otbadge" style="display:none">Nachzeit</span>         <span class="ut-otbadge" id="ut-otbadge" style="display:none">Nachzeit</span>
-        <button class="ut-fsbtn" id="ut-fsbtn" onclick="utToggleFS()" title="Vollbild">⛶</button> 
       </div>       </div>
     </div>     </div>
Zeile 1057: Zeile 1075:
 /* ── Reset ── */ /* ── Reset ── */
 window.utReset=function(){ window.utReset=function(){
-// Vollbild beenden falls aktiv +var app=document.getElementById(‘ut-app’); 
-var timer=el(‘ut-timer’); +if(app.classList.contains(‘ut-fs-float’)){ 
-if(timer.classList.contains(‘ut-fs-float’)){ +app.classList.remove(‘ut-fs-float’);
-timer.classList.remove(‘ut-fs-float’);+
 el(‘ut-fsbtn’).classList.remove(‘ut-fs-on’); el(‘ut-fsbtn’).classList.remove(‘ut-fs-on’);
 document.body.classList.remove(‘ut-fs-active’); document.body.classList.remove(‘ut-fs-active’);
Zeile 1084: Zeile 1101:
 var _fsScrollY = 0; var _fsScrollY = 0;
 window.utToggleFS = function(){ window.utToggleFS = function(){
-var timer = el(‘ut-timer’); +var app  = document.getElementById(‘ut-app’); 
-var btn   = el(‘ut-fsbtn’); +var btn  = el(‘ut-fsbtn’); 
-var isFS  = timer.classList.contains(‘ut-fs-float’);+var isFS = app.classList.contains(‘ut-fs-float’);
  
 if(!isFS){ if(!isFS){
-// Vollbild AN 
 _fsScrollY = window.scrollY; _fsScrollY = window.scrollY;
-timer.classList.add(‘ut-fs-float’);+app.classList.add(‘ut-fs-float’);
 btn.classList.add(‘ut-fs-on’); btn.classList.add(‘ut-fs-on’);
 document.body.classList.add(‘ut-fs-active’); document.body.classList.add(‘ut-fs-active’);
Zeile 1098: Zeile 1114:
 btn.title = ‘Vollbild beenden’; btn.title = ‘Vollbild beenden’;
 } else { } else {
-// Vollbild AUS +app.classList.remove(‘ut-fs-float’);
-timer.classList.remove(‘ut-fs-float’);+
 btn.classList.remove(‘ut-fs-on’); btn.classList.remove(‘ut-fs-on’);
 document.body.classList.remove(‘ut-fs-active’); document.body.classList.remove(‘ut-fs-active’);
Zeile 1111: Zeile 1126:
 }; };
  
-// Escape-Taste und Orientierungswechsel 
 document.addEventListener(‘keydown’, function(e){ document.addEventListener(‘keydown’, function(e){
-if(e.key === ‘Escape’ && el(‘ut-timer’).classList.contains(‘ut-fs-float’)){+if(e.key === ‘Escape’ && document.getElementById(‘ut-app’).classList.contains(‘ut-fs-float’)){
 utToggleFS(); utToggleFS();
 } }
Zeile 1123: Zeile 1137:
 function resize(){ function resize(){
 var app=document.getElementById(‘ut-app’); var app=document.getElementById(‘ut-app’);
-var isFS = el(‘ut-timer’) && el(‘ut-timer’).classList.contains(‘ut-fs-float’);+var isFS = document.getElementById(‘ut-app’) && document.getElementById(‘ut-app’).classList.contains(‘ut-fs-float’);
 var w = isFS ? window.innerWidth  : (app ? app.offsetWidth : window.innerWidth); var w = isFS ? window.innerWidth  : (app ? app.offsetWidth : window.innerWidth);
  
Zeile 1353: Zeile 1367:
 /* ── Reset ── */ /* ── Reset ── */
 window.utReset=function(){ window.utReset=function(){
-  // Vollbild beenden falls aktiv +  var app=document.getElementById('ut-app'); 
-  var timer=el('ut-timer'); +  if(app.classList.contains('ut-fs-float')){ 
-  if(timer.classList.contains('ut-fs-float')){ +    app.classList.remove('ut-fs-float');
-    timer.classList.remove('ut-fs-float');+
     el('ut-fsbtn').classList.remove('ut-fs-on');     el('ut-fsbtn').classList.remove('ut-fs-on');
     document.body.classList.remove('ut-fs-active');     document.body.classList.remove('ut-fs-active');
Zeile 1380: Zeile 1393:
 var _fsScrollY = 0; var _fsScrollY = 0;
 window.utToggleFS = function(){ window.utToggleFS = function(){
-  var timer = el('ut-timer'); +  var app  = document.getElementById('ut-app'); 
-  var btn   = el('ut-fsbtn'); +  var btn  = el('ut-fsbtn'); 
-  var isFS  = timer.classList.contains('ut-fs-float');+  var isFS = app.classList.contains('ut-fs-float');
  
   if(!isFS){   if(!isFS){
-    // Vollbild AN 
     _fsScrollY = window.scrollY;     _fsScrollY = window.scrollY;
-    timer.classList.add('ut-fs-float');+    app.classList.add('ut-fs-float');
     btn.classList.add('ut-fs-on');     btn.classList.add('ut-fs-on');
     document.body.classList.add('ut-fs-active');     document.body.classList.add('ut-fs-active');
Zeile 1394: Zeile 1406:
     btn.title = 'Vollbild beenden';     btn.title = 'Vollbild beenden';
   } else {   } else {
-    // Vollbild AUS +    app.classList.remove('ut-fs-float');
-    timer.classList.remove('ut-fs-float');+
     btn.classList.remove('ut-fs-on');     btn.classList.remove('ut-fs-on');
     document.body.classList.remove('ut-fs-active');     document.body.classList.remove('ut-fs-active');
Zeile 1407: Zeile 1418:
 }; };
  
-// Escape-Taste und Orientierungswechsel 
 document.addEventListener('keydown', function(e){ document.addEventListener('keydown', function(e){
-  if(e.key === 'Escape' && el('ut-timer').classList.contains('ut-fs-float')){+  if(e.key === 'Escape' && document.getElementById('ut-app').classList.contains('ut-fs-float')){
     utToggleFS();     utToggleFS();
   }   }
Zeile 1419: Zeile 1429:
 function resize(){ function resize(){
   var app=document.getElementById('ut-app');   var app=document.getElementById('ut-app');
-  var isFS = el('ut-timer') && el('ut-timer').classList.contains('ut-fs-float');+  var isFS = document.getElementById('ut-app') && document.getElementById('ut-app').classList.contains('ut-fs-float');
   var w = isFS ? window.innerWidth  : (app ? app.offsetWidth : window.innerWidth);   var w = isFS ? window.innerWidth  : (app ? app.offsetWidth : window.innerWidth);
  
tools/ur-timer.1773326781.txt.gz · Zuletzt geändert: von Eric Weber