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
Nächste Überarbeitung		Vorherige Überarbeitung
tools:ur-timer [12/03/2026 08:57] – Eric Webertools:ur-timer [18/03/2026 19:44] (aktuell) – Eric Weber
Zeile 1: Zeile 1:
 <html> <html>
- 
-<html lang="de"> 
-<head> 
-<meta charset="UTF-8"> 
-<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
-<title>Unterrichts-Timer</title> 
 <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=Roboto+Mono:wght@400;500;600&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600&family=Roboto+Mono:wght@400;500;600&display=swap" rel="stylesheet">
 <style> <style>
Zeile 75: Zeile 69:
 SETUP SCREEN SETUP SCREEN
 ═══════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════ */
-#ut-setup { padding: 20px 40px; gap: 0; }+#ut-setup { padding: 20px 24px; gap: 0; box-sizing: border-box; }
  
 .ut-hdr { text-align: center; margin-bottom: 20px; } .ut-hdr { text-align: center; margin-bottom: 20px; }
 .ut-hdr h1 { .ut-hdr h1 {
 font-family: ‘Bebas Neue’, sans-serif; font-family: ‘Bebas Neue’, sans-serif;
-font-size: clamp(24px, 3.8vw, 46px);+font-size: clamp(22px, 5%, 46px);
 letter-spacing: 4px; letter-spacing: 4px;
 background: linear-gradient(135deg, #16a34a 15%, #4ade80 52%, #dc2626 100%); background: linear-gradient(135deg, #16a34a 15%, #4ade80 52%, #dc2626 100%);
Zeile 99: Zeile 93:
 grid-template-columns: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr;
 gap: 12px; gap: 12px;
-width: min(800px, 86vw);+width: 100%; 
 +max-width: 800px;
 margin-bottom: 12px; margin-bottom: 12px;
 +box-sizing: border-box;
 } }
  
Zeile 234: Zeile 230:
 display: flex; display: flex;
 gap: 10px; gap: 10px;
-width: min(800px, 86vw);+width: 100%; 
 +max-width: 800px;
 align-items: stretch; align-items: stretch;
 +box-sizing: border-box;
 } }
 .ut-start-btn { .ut-start-btn {
Zeile 241: Zeile 239:
 padding: 15px 40px; padding: 15px 40px;
 border-radius: 12px; border-radius: 12px;
-border: none; +border: none !important; 
-background: linear-gradient(160deg, #22c55e 0%, #16a34a 100%); +background: linear-gradient(160deg, #22c55e 0%, #16a34a 100%) !important; 
-color: #fff;+color: #fff !important;
 font-family: ‘Bebas Neue’, sans-serif; font-family: ‘Bebas Neue’, sans-serif;
 font-size: 18px; font-size: 18px;
 letter-spacing: 3.5px; letter-spacing: 3.5px;
 cursor: pointer; cursor: pointer;
-transition: all 0.16s;+transition: background 0.16s, box-shadow 0.16s, transform 0.16s;
 box-shadow: 0 2px 0 #166534, 0 5px 18px rgba(22,163,74,0.30); box-shadow: 0 2px 0 #166534, 0 5px 18px rgba(22,163,74,0.30);
 text-shadow: 0 1px 2px rgba(0,0,0,0.15); text-shadow: 0 1px 2px rgba(0,0,0,0.15);
Zeile 254: Zeile 252:
 .ut-start-btn:hover:not(:disabled) { .ut-start-btn:hover:not(:disabled) {
 transform: translateY(-1px); transform: translateY(-1px);
 +background: linear-gradient(160deg, #4ade80 0%, #22c55e 100%) !important;
 +color: #fff !important;
 box-shadow: 0 3px 0 #166534, 0 8px 26px rgba(22,163,74,0.35); box-shadow: 0 3px 0 #166534, 0 8px 26px rgba(22,163,74,0.35);
 } }
Zeile 302: Zeile 302:
 display: none; display: none;
 text-align: center; text-align: center;
-width: min(800px, 86vw);+width: 100%; 
 +max-width: 800px;
 } }
 .ut-wait-note.show { display: block; } .ut-wait-note.show { display: block; }
Zeile 322: Zeile 323:
 position: relative; position: relative;
 width: 100%; width: 100%;
 +/* dvh = dynamic viewport height, berücksichtigt iOS Browser-Chrome */
 height: 100vh; height: 100vh;
-min-height: 500px;+height: 100dvh; 
 +min-height: 0; 
 +overflow: hidden; 
 +flex-direction: column;
 } }
  
Zeile 352: Zeile 357:
 width: 7ch; width: 7ch;
 flex-shrink: 0; flex-shrink: 0;
 +white-space: nowrap;
 +display: flex !important;
 +flex-direction: row !important;
 +align-items: center;
 } }
 .ut-topinfo { .ut-topinfo {
Zeile 393: Zeile 402:
 /* Jede Ziffer in einer eigenen Box — absolute Pixelbreite */ /* Jede Ziffer in einer eigenen Box — absolute Pixelbreite */
 .utd { .utd {
-display: inline-block;+display: inline-block !important;
 width: 0.62em; width: 0.62em;
 text-align: center; text-align: center;
Zeile 401: Zeile 410:
 /* Ziffern für Prozentwert */ /* Ziffern für Prozentwert */
 .utdd { .utdd {
-display: inline-block;+display: inline-block !important;
 width: 0.62em; width: 0.62em;
 text-align: center; text-align: center;
Zeile 409: Zeile 418:
 /* Prozentzeichen — feste Breite */ /* Prozentzeichen — feste Breite */
 .utdpc { .utdpc {
-display: inline-block;+display: inline-block !important;
 width: 0.7em; width: 0.7em;
 text-align: center; text-align: center;
Zeile 424: Zeile 433:
  
 .ut-chip.gc .utv { color: #16a34a; } .ut-chip.gc .utv { color: #16a34a; }
 +
 +.ut-fsbtn {
 +position: absolute;
 +top: 10px;
 +right: 10px;
 +z-index: 100;
 +width: 34px;
 +height: 34px;
 +border-radius: 8px;
 +border: 1.5px solid rgba(0,0,0,0.12) !important;
 +background: rgba(255,255,255,0.92) !important;
 +color: #6b7280 !important;
 +font-size: 17px;
 +line-height: 1;
 +cursor: pointer;
 +display: flex !important;
 +align-items: center;
 +justify-content: center;
 +transition: background 0.15s, color 0.15s, border-color 0.15s;
 +padding: 0;
 +box-shadow: 0 1px 6px rgba(0,0,0,0.10);
 +}
 +.ut-fsbtn:hover {
 +background: #fff !important;
 +color: #16a34a !important;
 +border-color: #16a34a !important;
 +}
 +.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: gesamte App wird auf Vollbild gesetzt */
 +body.ut-fs-active {
 +overflow: hidden !important;
 +position: fixed !important;
 +width: 100% !important;
 +}
 +#ut-app.ut-fs-float {
 +position: fixed !important;
 +top: 0 !important;
 +left: 0 !important;
 +width: 100% !important;
 +height: 100vh !important;
 +height: 100dvh !important;
 +z-index: 99999 !important;
 +background: #fff !important;
 +overflow-y: auto !important;
 +overflow-x: hidden !important;
 +}
 +/* Timer-Screen im Vollbild: volle Höhe */
 +#ut-app.ut-fs-float #ut-timer {
 +height: 100vh !important;
 +height: 100dvh !important;
 +}
 +/* Ergebnis-Screen im Vollbild: immer sichtbar über Timer */
 +#ut-app.ut-fs-float #ut-result {
 +position: fixed !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;
 +}
  
 .ut-otbadge { .ut-otbadge {
Zeile 450: Zeile 532:
 padding: 10px 14px; padding: 10px 14px;
 min-height: 0; min-height: 0;
 +overflow: hidden;
 } }
 .ut-panel { .ut-panel {
Zeile 493: Zeile 576:
 font-family: ‘Bebas Neue’, sans-serif; font-family: ‘Bebas Neue’, sans-serif;
 line-height: 1; line-height: 1;
-letter-spacing: 2px;+letter-spacing: 0; 
 +display: flex !important; 
 +flex-direction: row !important; 
 +align-items: center; 
 +justify-content: center; 
 +} 
 +/* Einzelne Ziffer im Ring */ 
 +.utrt { 
 +display: inline-block !important; 
 +width: 0.58em; 
 +text-align: center; 
 +font-family: ‘Bebas Neue’, sans-serif; 
 +font-variant-numeric: tabular-nums; 
 +} 
 +/* Doppelpunkt im Ring */ 
 +.utrtc { 
 +display: inline-block !important; 
 +width: 0.28em; 
 +text-align: center; 
 +font-family: ‘Bebas Neue’, sans-serif;
 } }
 .ut-rstat { .ut-rstat {
Zeile 524: Zeile 626:
 } }
 .ut-rcard { .ut-rcard {
-width: min(640px, 92vw);+width: min(640px, 100%);
 background: #fff; background: #fff;
 border: 1.5px solid rgba(0,0,0,0.08); border: 1.5px solid rgba(0,0,0,0.08);
Zeile 534: Zeile 636:
 .ut-rtitle { .ut-rtitle {
 font-family: ‘Bebas Neue’, sans-serif; font-family: ‘Bebas Neue’, sans-serif;
-font-size: clamp(26px, 3.8vw, 42px);+font-size: clamp(26px, 4%, 42px);
 letter-spacing: 4px; letter-spacing: 4px;
 margin-bottom: 4px; margin-bottom: 4px;
Zeile 596: Zeile 698:
 } }
 /* ══════════════════════════════════════════════════ /* ══════════════════════════════════════════════════
-RESPONSIVE — Tablet & Mobile+RESPONSIVE — Container-basiert (kein vw/vh) 
 +Klassen werden per JS auf #ut-app gesetzt
 ═══════════════════════════════════════════════════ */ ═══════════════════════════════════════════════════ */
  
-/* Tablet: schmaler als 700px */ +/* Schmaler Container < 700px */ 
-@media (max-width: 700px) { +#ut-app.ut-sm #ut-setup { padding: 14px 14px; } 
-#ut-setup { padding: 14px 16px; overflow-y: auto; justify-content: flex-start; padding-top: 20px; } +#ut-app.ut-sm .ut-hdr { margin-bottom: 12px; } 
- +#ut-app.ut-sm .ut-hdr h1 { font-size: 28px; letter-spacing: 2px; } 
-.ut-hdr { margin-bottom: 14px; } +#ut-app.ut-sm .ut-hdr p  { font-size: 10px; } 
-.ut-hdr h1 { font-size: clamp(22px, 6vw, 36px); letter-spacing: 2px; } +#ut-app.ut-sm .ut-grid {
-.ut-hdr p  { font-size: 10px; letter-spacing: 1.5px; } +
- +
-.ut-grid {+
 grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
-width: 100%; 
 gap: 10px; gap: 10px;
 margin-bottom: 10px; margin-bottom: 10px;
 } }
 +#ut-app.ut-sm .ut-grid .ut-card:last-child { grid-column: 1 / -1; }
 +#ut-app.ut-sm .ut-btnrow { flex-direction: column; gap: 8px; }
 +#ut-app.ut-sm .ut-start-btn { font-size: 16px; padding: 14px 20px; }
 +#ut-app.ut-sm .ut-now-btn   { justify-content: center; padding: 13px 20px; }
 +#ut-app.ut-sm .ut-topbar { flex-wrap: wrap; padding: 8px 12px; gap: 6px; }
 +#ut-app.ut-sm .ut-topinfo { gap: 8px; width: 100%; justify-content: flex-start; }
 +#ut-app.ut-sm .ut-clock   { font-size: 15px; width: 7.5ch; }
 +#ut-app.ut-sm .ut-chip    { font-size: 9px; gap: 3px; }
 +#ut-app.ut-sm .ut-chip .utv { font-size: 11px; }
 +#ut-app.ut-sm .ut-area { padding: 6px 10px; }
  
-/* Ziel-Karte nimmt alle Spalten ein */ +/* Sehr schmaler Container < 480px */ 
-.ut-grid .ut-card:last-child { grid-column: 1 / -1; } +#ut-app.ut-xs #ut-setup { padding: 10px 10px; } 
- +#ut-app.ut-xs .ut-hdr h1 { font-size: 22px; } 
-.ut-btnrow { width: 100%; flex-direction: column; gap: 8px; } +#ut-app.ut-xs .ut-grid { grid-template-columns: 1fr; gap: 8px; } 
-.ut-start-btn { font-size: 16px; padding: 14px 24px; } +#ut-app.ut-xs .ut-grid .ut-card:last-child { grid-column: 1; } 
-.ut-now-btn   { justify-content: center; padding: 13px 24px; } +#ut-app.ut-xs .ut-grid .ut-card[style*=“flex-direction:row”], 
- +#ut-app.ut-xs .ut-grid .ut-card[style*=“flex-direction: row”] {
-.ut-wait-note { width: 100%; font-size: 10px; } +
- +
-/* Timer-Leiste: zweizeilig auf Hochkant */ +
-.ut-topbar { flex-wrap: wrap; padding: 8px 12px; gap: 6px; } +
-.ut-topinfo { gap: 8px; width: 100%; justify-content: flex-start; } +
-.ut-clock   { font-size: 15px; width: 7.5ch; } +
-.ut-chip    { font-size: 9px; gap: 3px; } +
-.ut-chip .utv { font-size: 11px; } +
-.ut-chip .utv.utv-time { width: 5ch; } +
-.ut-chip .utv.utv-pct  { width: 4ch; } +
- +
-/* Timer-Ringe kleiner */ +
-.ut-area { padding: 6px 10px; } +
-} +
- +
-/* Smartphone Hochkant: schmaler als 480px */ +
-@media (max-width: 480px) { +
-#ut-setup { padding: 12px 12px; } +
- +
-.ut-grid { grid-template-columns: 1fr; gap: 8px; } +
-.ut-grid .ut-card:last-child { grid-column: 1; } +
- +
-/* Ziel-Karte: vertikal stapeln */ +
-.ut-grid .ut-card[style*=“flex-direction:row”], +
-.ut-grid .ut-card[style*=“flex-direction: row”] {+
 flex-direction: column !important; flex-direction: column !important;
 align-items: flex-start !important; align-items: flex-start !important;
 } }
 +#ut-app.ut-xs .ut-card { padding: 14px 14px; }
 +#ut-app.ut-xs .ut-card select { font-size: 15px; }
 +#ut-app.ut-xs .ut-tbtn { font-size: 13px; }
 +#ut-app.ut-xs .ut-start-btn { font-size: 15px; letter-spacing: 2px; }
 +#ut-app.ut-xs .ut-clock { font-size: 14px; }
 +#ut-app.ut-xs .ut-chip  { font-size: 8.5px; }
 +#ut-app.ut-xs .ut-chip .utv { font-size: 11px; }
 +#ut-app.ut-xs .ut-area { flex-direction: column; padding: 6px 12px; }
 +#ut-app.ut-xs .ut-divider { width: 60%; height: 1.5px; }
 +#ut-app.ut-xs .ut-panel { height: auto; flex: 0 0 auto; }
  
-.ut-card { padding: 16px 16px; } +/* Querformat / geringe Höhe */
-.ut-card select { font-size: 15px; padding: 13px 36px 13px 14px; } +
-.ut-tbtn { font-size: 13px; padding: 12px 12px; } +
- +
-.ut-start-btn { font-size: 15px; letter-spacing: 2px; } +
-.ut-now-btn   { font-size: 13px; } +
- +
-/* Topbar: alles kompakter */ +
-.ut-clock { font-size: 15px; } +
-.ut-chip  { font-size: 8.5px; } +
-.ut-chip .utv { font-size: 11px; } +
-.ut-otbadge { font-size: 9px; padding: 2px 8px; } +
- +
-/* Timer-Ringe: stapeln */ +
-.ut-area { flex-direction: column; padding: 6px 12px; gap: 0; } +
-.ut-divider { width: 60%; height: 1.5px; } +
-.ut-panel { height: auto; flex: 0 0 auto; } +
-} +
- +
-/* Querformat erzwingen wenn klein genug */+
 @media (max-height: 420px) { @media (max-height: 420px) {
 #ut-setup { flex-direction: row; flex-wrap: wrap; align-content: center; padding: 8px 16px; overflow-y: auto; } #ut-setup { flex-direction: row; flex-wrap: wrap; align-content: center; padding: 8px 16px; overflow-y: auto; }
Zeile 680: Zeile 755:
  
 </style> </style>
-</head> 
-<body> 
- 
 <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">
     <div class="ut-hdr">     <div class="ut-hdr">
Zeile 692: Zeile 764:
       <p>Konfiguration der Stunde</p>       <p>Konfiguration der Stunde</p>
     </div>     </div>
- +    <div class="ut-grid"> 
-``` +      <div class="ut-card"> 
-<div class="ut-grid"> +        <label>Startzeit</label> 
-  <div class="ut-card"> +        <select id="ut-sel-start"></select> 
-    <label>Startzeit</label> +      </div> 
-    <select id="ut-sel-start"></select> +      <div class="ut-card"> 
-  </div> +        <label>Stundendauer</label> 
- +        <select id="ut-sel-dur"> 
-  <div class="ut-card"> +          <option value="45" selected>45 Minuten</option> 
-    <label>Stundendauer</label> +          <option value="90">90 Minuten</option> 
-    <select id="ut-sel-dur"> +        </select> 
-      <option value="45" selected>45 Minuten</option> +      </div> 
-      <option value="90">90 Minuten</option> +      <div class="ut-card"> 
-    </select> +        <label>Erster aktiver Timer</label> 
-  </div> +        <div class="ut-tchoice"> 
- +          <button class="ut-tbtn green active" id="ut-btn-g" onclick="utSetFirst('green')">● Grün</button> 
-  <div class="ut-card"> +          <button class="ut-tbtn red"          id="ut-btn-r" onclick="utSetFirst('red')">● Rot</button> 
-    <label>Erster aktiver Timer</label> +        </div> 
-    <div class="ut-tchoice"> +      </div> 
-      <button class="ut-tbtn green active" id="ut-btn-g" onclick="utSetFirst('green')">● Grün</button> +      <div class="ut-card" style="grid-column:1/-1;flex-direction:row;align-items:center;gap:20px;padding:22px 22px 20px 22px;"> 
-      <button class="ut-tbtn red"          id="ut-btn-r" onclick="utSetFirst('red')">● Rot</button>+        <div style="flex-shrink:0;min-width:78px;text-align:center;"> 
 +          <div class="ut-goal-val" id="ut-goal-val">75%</div> 
 +          <div class="ut-goal-sub">Ziel Grün</div> 
 +        </div> 
 +        <div style="flex:1;display:flex;flex-direction:column;gap:8px;"> 
 +          <label class="ut-card-label">Ziel: Anteil grüner Timer-Zeit</label> 
 +          <input type="range" id="ut-slider" min="50" max="95" step="5" value="75" oninput="utGoal(this.value)"> 
 +          <div class="ut-rlabels"><span>50%</span><span>95%</span></div> 
 +        </div> 
 +      </div>
     </div>     </div>
-  </div> +    <div class="ut-btnrow"> 
- +      <button class="ut-start-btn" id="ut-sbtn" onclick="utConfirm()">Stunde konfigurieren &amp; warten</button> 
-  <div class="ut-card" style="grid-column:1/-1;flex-direction:row;align-items:center;gap:20px;padding:22px 22px 20px 22px;"> +      <button class="ut-now-btn"   id="ut-nbtn" onclick="utNow()" title="Sofort starten ohne Wartezeit">▶ Sofort starten</button>
-    <div style="flex-shrink:0;min-width:78px;text-align:center;"> +
-      <div class="ut-goal-val" id="ut-goal-val">75%</div> +
-      <div class="ut-goal-sub">Ziel Grün</div>+
     </div>     </div>
-    <div style="flex:1;display:flex;flex-direction:column;gap:8px;"> +    <div class="ut-wait-note" id="ut-wnote"> 
-      <label class="ut-card-label">Ziel: Anteil grüner Timer-Zeit</label> +      Warte auf Startzeit: <span id="ut-wdisp">--:--</span> 
-      <input type="range" id="ut-slider" min="50" max="95" step="5" value="75" oninput="utGoal(this.value)"> +      &nbsp;·&nbsp; 
-      <div class="ut-rlabels"><span>50%</span><span>95%</span></div>+      <button onclick="utNow()">Sofort starten</button>
     </div>     </div>
   </div>   </div>
-</div> 
- 
-<div class="ut-btnrow"> 
-  <button class="ut-start-btn" id="ut-sbtn" onclick="utConfirm()">Stunde konfigurieren &amp; warten</button> 
-  <button class="ut-now-btn"   id="ut-nbtn" onclick="utNow()" title="Sofort starten ohne Wartezeit">▶ Sofort starten</button> 
-</div> 
-<div class="ut-wait-note" id="ut-wnote"> 
-  Warte auf Startzeit: <span id="ut-wdisp">--:--</span> 
-  &nbsp;·&nbsp; 
-  <button onclick="utNow()">Sofort starten</button> 
-</div> 
-``` 
- 
-  </div> 
- 
   <!-- ══ TIMER ══ -->   <!-- ══ TIMER ══ -->
- 
   <div id="ut-timer">   <div id="ut-timer">
     <div class="ut-topbar">     <div class="ut-topbar">
Zeile 755: Zeile 817:
       </div>       </div>
     </div>     </div>
- +    <div class="ut-area"> 
-``` +      <!-- GREEN --> 
-<div class="ut-area"> +      <div class="ut-panel" id="ut-pg"> 
-  <!-- GREEN --> +        <div class="ut-rwrap" onclick="utSwitch('green')"> 
-  <div class="ut-panel" id="ut-pg"> +          <svg id="ut-svg-g" viewBox="0 0 300 300" width="260" height="260"> 
-    <div class="ut-rwrap" onclick="utSwitch('green')"> +            <circle cx="150" cy="150" r="130" fill="rgba(255,255,255,0.75)"/> 
-      <svg id="ut-svg-g" viewBox="0 0 300 300" width="260" height="260"> +            <circle cx="150" cy="150" r="130" fill="none" stroke="#dcfce7" stroke-width="15"/> 
-        <circle cx="150" cy="150" r="130" fill="rgba(255,255,255,0.75)"/> +            <circle id="ut-prog-g" cx="150" cy="150" r="130" fill="none" 
-        <circle cx="150" cy="150" r="130" fill="none" stroke="#dcfce7" stroke-width="15"/> +              stroke="#22c55e" stroke-width="15" stroke-linecap="round" 
-        <circle id="ut-prog-g" cx="150" cy="150" r="130" fill="none" +              stroke-dasharray="816.8" stroke-dashoffset="816.8" 
-          stroke="#22c55e" stroke-width="15" stroke-linecap="round" +              transform="rotate(-90 150 150)"/> 
-          stroke-dasharray="816.8" stroke-dashoffset="816.8" +          </svg> 
-          transform="rotate(-90 150 150)"/> +          <div class="ut-rinner"> 
-      </svg> +            <div class="ut-rlbl" style="color:#16a34a">Grün</div> 
-      <div class="ut-rinner"> +            <div class="ut-rtime" id="ut-tg" style="color:#16a34a"><span class="utrt" id="utrt-g0">0</span><span class="utrt" id="utrt-g1">0</span><span class="utrtc">:</span><span class="utrt" id="utrt-g2">0</span><span class="utrt" id="utrt-g3">0</span></div> 
-        <div class="ut-rlbl" style="color:#16a34a">Grün</div> +            <div class="ut-rstat" id="ut-sg" style="color:#16a34a">Aktiv</div> 
-        <div class="ut-rtime" id="ut-tg" style="color:#16a34a">00:00</div> +          </div> 
-        <div class="ut-rstat" id="ut-sg" style="color:#16a34a">Aktiv</div>+        </div>
       </div>       </div>
-    </div> +      <div class="ut-divider"></div> 
-  </div> +      <!-- RED --> 
- +      <div class="ut-panel" id="ut-pr"> 
-  <div class="ut-divider"></div> +        <div class="ut-rwrap" onclick="utSwitch('red')"> 
- +          <svg id="ut-svg-r" viewBox="0 0 300 300" width="260" height="260"> 
-  <!-- RED --> +            <circle cx="150" cy="150" r="130" fill="rgba(255,255,255,0.75)"/> 
-  <div class="ut-panel" id="ut-pr"> +            <circle cx="150" cy="150" r="130" fill="none" stroke="#fee2e2" stroke-width="15"/> 
-    <div class="ut-rwrap" onclick="utSwitch('red')"> +            <circle id="ut-prog-r" cx="150" cy="150" r="130" fill="none" 
-      <svg id="ut-svg-r" viewBox="0 0 300 300" width="260" height="260"> +              stroke="#ef4444" stroke-width="15" stroke-linecap="round" 
-        <circle cx="150" cy="150" r="130" fill="rgba(255,255,255,0.75)"/> +              stroke-dasharray="816.8" stroke-dashoffset="816.8" 
-        <circle cx="150" cy="150" r="130" fill="none" stroke="#fee2e2" stroke-width="15"/> +              transform="rotate(-90 150 150)"/> 
-        <circle id="ut-prog-r" cx="150" cy="150" r="130" fill="none" +          </svg> 
-          stroke="#ef4444" stroke-width="15" stroke-linecap="round" +          <div class="ut-rinner"> 
-          stroke-dasharray="816.8" stroke-dashoffset="816.8" +            <div class="ut-rlbl" style="color:#dc2626">Rot</div> 
-          transform="rotate(-90 150 150)"/> +            <div class="ut-rtime" id="ut-tr" style="color:#dc2626"><span class="utrt" id="utrt-r0">0</span><span class="utrt" id="utrt-r1">0</span><span class="utrtc">:</span><span class="utrt" id="utrt-r2">0</span><span class="utrt" id="utrt-r3">0</span></div> 
-      </svg> +            <div class="ut-rstat" id="ut-sr" style="color:#dc2626">Pausiert</div> 
-      <div class="ut-rinner"> +          </div> 
-        <div class="ut-rlbl" style="color:#dc2626">Rot</div> +        </div>
-        <div class="ut-rtime" id="ut-tr" style="color:#dc2626">00:00</div> +
-        <div class="ut-rstat" id="ut-sr" style="color:#dc2626">Pausiert</div>+
       </div>       </div>
     </div>     </div>
   </div>   </div>
-</div> 
-``` 
- 
-  </div> 
- 
   <!-- ══ RESULT ══ -->   <!-- ══ RESULT ══ -->
- 
   <div id="ut-result">   <div id="ut-result">
     <div class="ut-rcard">     <div class="ut-rcard">
Zeile 828: Zeile 882:
     </div>     </div>
   </div>   </div>
- 
 </div><!-- #ut-app --> </div><!-- #ut-app -->
 +<script>
 +(function(){
 +'use strict';
 +
 +var cfg = { startH:7, startM:0, duration:45, first:‘green’, goal:75 };
 +var st  = { phase:‘idle’, active:‘green’, gMs:0, rMs:0, last:null,
 +total:0, limit:0, wIv:null, tIv:null, cIv:null };
 +
 +/* ── helpers ── */
 +function pad(n){ return String(n).padStart(2,‘0’); }
 +function berlin(){
 +var d=new Date(), b=new Date(d.toLocaleString(‘en-US’,{timeZone:‘Europe/Berlin’}));
 +return {h:b.getHours(),m:b.getMinutes(),s:b.getSeconds(),date:b};
 +}
 +function mmss(ms){
 +var s=Math.floor(ms/1000), m=Math.floor(s/60);
 +return pad(m)+’:’+pad(s%60);
 +}
 +function el(id){ return document.getElementById(id); }
 +
 +/* ── Init ── */
 +function init(){
 +var sel=el(‘ut-sel-start’);
 +for(var h=7;h<=17;h++){
 +for(var m=0;m<60;m+=5){
 +if(h===17&&m>0) break;
 +var o=document.createElement(‘option’);
 +o.value=h+’:’+m;
 +o.textContent=pad(h)+’:’+pad(m)+’ Uhr’;
 +sel.appendChild(o);
 +}
 +}
 +var now=berlin(), bh=now.h, bm=Math.ceil((now.m+1)/5)*5;
 +if(bm>=60){bm=0;bh++;}
 +if(bh>17){bh=17;bm=0;}
 +sel.value=bh+’:’+bm;
 +startClock();
 +}
 +
 +function startClock(){
 +function tick(){
 +var b=berlin();
 +var hh=pad(b.h), mm=pad(b.m), ss=pad(b.s);
 +el(‘utd-ch0’).textContent=hh[0]; el(‘utd-ch1’).textContent=hh[1];
 +el(‘utd-cm0’).textContent=mm[0]; el(‘utd-cm1’).textContent=mm[1];
 +el(‘utd-cs0’).textContent=ss[0]; el(‘utd-cs1’).textContent=ss[1];
 +}
 +tick();
 +st.cIv=setInterval(tick,500);
 +}
 +
 +/* ── Setup callbacks ── */
 +window.utSetFirst=function(w){
 +cfg.first=w;
 +el(‘ut-btn-g’).classList.toggle(‘active’,w===‘green’);
 +el(‘ut-btn-r’).classList.toggle(‘active’,w===‘red’);
 +};
 +window.utGoal=function(v){
 +cfg.goal=parseInt(v);
 +el(‘ut-goal-val’).textContent=v+’%’;
 +el(‘ut-slider’).value=v;
 +};
 +function applyCfg(){
 +var p=el(‘ut-sel-start’).value.split(’:’).map(Number);
 +cfg.startH=p[0]; cfg.startM=p[1];
 +cfg.duration=parseInt(el(‘ut-sel-dur’).value);
 +st.limit=cfg.duration*60*1000;
 +}
 +window.utConfirm=function(){
 +applyCfg();
 +el(‘ut-sbtn’).disabled=true;
 +el(‘ut-nbtn’).disabled=true;
 +el(‘ut-sbtn’).textContent=‘Warte auf Startzeit…’;
 +el(‘ut-wnote’).classList.add(‘show’);
 +updWait();
 +st.wIv=setInterval(function(){
 +updWait();
 +var n=berlin();
 +if(n.h===cfg.startH&&n.m===cfg.startM&&n.s<3){
 +clearInterval(st.wIv); begin();
 +}
 +},500);
 +};
 +window.utNow=function(){
 +clearInterval(st.wIv);
 +applyCfg();
 +begin();
 +};
 +function updWait(){ el(‘ut-wdisp’).textContent=pad(cfg.startH)+’:’+pad(cfg.startM); }
 +
 +/* ── Begin ── */
 +function begin(){
 +st.phase=‘running’; st.active=cfg.first;
 +st.gMs=0; st.rMs=0; st.total=0;
 +st.last=Date.now();
 +el(‘ut-gtop’).textContent=cfg.goal+’%’;
 +// Verbleibend korrekt initialisieren über Digit-Spans (nicht textContent!)
 +setMmss(‘utd-rem-0’,‘utd-rem-1’,‘utd-rem-2’,‘utd-rem-3’, st.limit);
 +el(‘ut-setup’).style.display=‘none’;
 +el(‘ut-timer’).style.display=‘flex’;
 +panels(); resize();
 +st.tIv=setInterval(tick,100);
 +}
 +
 +/* ── Tick ── */
 +function tick(){
 +if(st.phase===‘done’) return;
 +var now=Date.now(), d=now-st.last; st.last=now;
 +if(st.active===‘green’) st.gMs+=d; else st.rMs+=d;
 +st.total=st.gMs+st.rMs;
 +if(st.phase===‘running’&&st.total>=st.limit){
 +if(st.active===‘green’){ end(); return; }
 +else{ st.phase=‘overtime’; el(‘ut-otbadge’).style.display=‘inline-flex’; }
 +}
 +render();
 +}
 +
 +/* ── Switch ── */
 +window.utSwitch=function(w){
 +if(st.phase===‘done’||st.phase===‘idle’) return;
 +if(st.phase===‘overtime’&&w===‘green’){
 +var now=Date.now(),d=now-st.last; st.last=now;
 +if(st.active===‘red’) st.rMs+=d; else st.gMs+=d;
 +st.total=st.gMs+st.rMs;
 +end(); return;
 +}
 +if(st.active===w) return;
 +st.active=w; st.last=Date.now();
 +panels(); render();
 +};
 +
 +/* ── Digit helpers ── */
 +function setMmss(d0, d1, d2, d3, ms){
 +var s=Math.floor(ms/1000), m=Math.floor(s/60);
 +var mm=pad(m), ss=pad(s%60);
 +el(d0).textContent=mm[0];
 +el(d1).textContent=mm[1];
 +el(d2).textContent=ss[0];
 +el(d3).textContent=ss[1];
 +}
 +function setGreenPct(gp){
 +// Hunderter: ‘1’ bei 100, sonst geschütztes Leerzeichen
 +el(‘utd-gp-h’).textContent = gp === 100 ? ‘1’ : ‘\u2007’;
 +// Zehner: Ziffer wenn >= 10, sonst Leerzeichen
 +el(‘utd-gp-t’).textContent = gp >= 10 ? String(Math.floor(gp / 10) % 10) : ‘\u2007’;
 +// Einer: immer eine Ziffer
 +el(‘utd-gp-o’).textContent = String(gp % 10);
 +}
 +
 +/* ── Render ── */
 +function render(){
 +// Ring-Timer: digit-by-digit
 +setMmss(‘utrt-g0’,‘utrt-g1’,‘utrt-g2’,‘utrt-g3’, st.gMs);
 +setMmss(‘utrt-r0’,‘utrt-r1’,‘utrt-r2’,‘utrt-r3’, st.rMs);
 +
 +setMmss(‘utd-total-0’,‘utd-total-1’,‘utd-total-2’,‘utd-total-3’, st.total);
 +setMmss(‘utd-rem-0’,  ‘utd-rem-1’,  ‘utd-rem-2’,  ‘utd-rem-3’,  Math.max(0,st.limit-st.total));
 +
 +var gp=st.total>0?Math.round(st.gMs/st.total*100):0;
 +setGreenPct(gp);
 +
 +if(st.limit>0){
 +var C=816.8;
 +el(‘ut-prog-g’).style.strokeDashoffset=Math.max(0,C-(st.gMs/st.limit)*C);
 +el(‘ut-prog-r’).style.strokeDashoffset=Math.max(0,C-(st.rMs/st.limit)*C);
 +}
 +}
 +function panels(){
 +el(‘ut-pg’).className=‘ut-panel’+(st.active===‘green’?’ ag’:’’);
 +el(‘ut-pr’).className=‘ut-panel’+(st.active===‘red’?’ ar’:’’);
 +el(‘ut-sg’).textContent=st.active===‘green’?‘Läuft’:‘Pausiert’;
 +el(‘ut-sr’).textContent=st.active===‘red’?‘Läuft’:‘Pausiert’;
 +}
 +
 +/* ── End ── */
 +function end(){
 +st.phase=‘done’; clearInterval(st.tIv); render();
 +var tot=st.total, gp=tot>0?Math.round(st.gMs/tot*100):0, rp=100-gp, ok=gp>=cfg.goal;
 +setTimeout(function(){
 +var gm=(st.gMs/60000).toFixed(1), rm=(st.rMs/60000).toFixed(1);
 +el(‘ut-rtitle’).textContent=ok?‘✓ Ziel erreicht!’:‘✗ Ziel nicht erreicht’;
 +el(‘ut-rtitle’).className=‘ut-rtitle ‘+(ok?‘ok’:‘no’);
 +el(‘ut-pg-pct’).textContent=gp+’%’; el(‘ut-pr-pct’).textContent=rp+’%’;
 +el(‘ut-ag’).textContent=gm+’ min’;  el(‘ut-ar’).textContent=rm+’ min’;
 +el(‘ut-rgoal’).innerHTML=‘Ziel: <strong>’+cfg.goal+’% grüne Zeit</strong>  ·  Ergebnis: <strong>’+gp+’% grün</strong> / <strong>’+rp+’% rot</strong>’;
 +el(‘ut-result’).style.display=‘flex’;
 +setTimeout(function(){ el(‘ut-bg’).style.width=gp+’%’; el(‘ut-br’).style.width=rp+’%’; },80);
 +},350);
 +}
 +
 +/* ── Reset ── */
 +window.utReset=function(){
 +var app=document.getElementById(‘ut-app’);
 +if(app.classList.contains(‘ut-fs-float’)){
 +app.classList.remove(‘ut-fs-float’);
 +el(‘ut-fsbtn’).classList.remove(‘ut-fs-on’);
 +document.body.classList.remove(‘ut-fs-active’);
 +document.body.style.top=’’;
 +window.scrollTo(0,_fsScrollY||0);
 +var btn=el(‘ut-fsbtn’);
 +if(btn){ btn.textContent=‘⛶’; btn.title=‘Vollbild’; }
 +}
 +clearInterval(st.tIv); clearInterval(st.wIv);
 +st={phase:‘idle’,active:‘green’,gMs:0,rMs:0,last:null,total:0,limit:0,wIv:null,tIv:null,cIv:st.cIv};
 +el(‘ut-result’).style.display=‘none’;
 +el(‘ut-timer’).style.display=‘none’;
 +el(‘ut-setup’).style.display=‘flex’;
 +el(‘ut-sbtn’).disabled=false; el(‘ut-nbtn’).disabled=false;
 +el(‘ut-sbtn’).textContent=‘Stunde konfigurieren & warten’;
 +el(‘ut-wnote’).classList.remove(‘show’);
 +el(‘ut-otbadge’).style.display=‘none’;
 +el(‘ut-prog-g’).style.strokeDashoffset=816.8;
 +el(‘ut-prog-r’).style.strokeDashoffset=816.8;
 +};
 +
 +/* ── Vollbild ── */
 +var _fsScrollY = 0;
 +window.utToggleFS = function(){
 +var app  = document.getElementById(‘ut-app’);
 +var btn  = el(‘ut-fsbtn’);
 +var isFS = app.classList.contains(‘ut-fs-float’);
 +
 +if(!isFS){
 +_fsScrollY = window.scrollY;
 +app.classList.add(‘ut-fs-float’);
 +btn.classList.add(‘ut-fs-on’);
 +document.body.classList.add(‘ut-fs-active’);
 +document.body.style.top = ‘-’ + _fsScrollY + ‘px’;
 +btn.textContent = ‘✕’;
 +btn.title = ‘Vollbild beenden’;
 +} else {
 +app.classList.remove(‘ut-fs-float’);
 +btn.classList.remove(‘ut-fs-on’);
 +document.body.classList.remove(‘ut-fs-active’);
 +document.body.style.top = ‘’;
 +window.scrollTo(0, _fsScrollY);
 +btn.textContent = ‘⛶’;
 +btn.title = ‘Vollbild’;
 +}
 +setTimeout(resize, 50);
 +setTimeout(resize, 350);
 +};
 +
 +document.addEventListener(‘keydown’, function(e){
 +if(e.key === ‘Escape’ && document.getElementById(‘ut-app’).classList.contains(‘ut-fs-float’)){
 +utToggleFS();
 +}
 +});
 +window.addEventListener(‘orientationchange’, function(){
 +setTimeout(resize, 100);
 +setTimeout(resize, 400);
 +});
 +function resize(){
 +var app=document.getElementById(‘ut-app’);
 +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);
 +
 +// Breakpoints basierend auf tatsächlicher Container-Breite setzen
 +if(app){
 +app.classList.toggle(‘ut-sm’, w < 700);
 +app.classList.toggle(‘ut-xs’, w < 480);
 +}
 +
 +var area=document.querySelector(’#ut-app .ut-area’);
 +if(!area) return;
 +
 +// Im Vollbild: Fenstergröße nutzen. Sonst: tatsächliche Element-Größe.
 +var topbarH = 0;
 +var tb = document.querySelector(’#ut-app .ut-topbar’);
 +if(tb) topbarH = tb.offsetHeight || 50;
 +
 +var areaH = isFS
 +? (window.innerHeight - topbarH - 10)
 +: (area.clientHeight > 20 ? area.clientHeight : window.innerHeight - topbarH - 60);
 +var areaW = isFS ? window.innerWidth : (area.clientWidth > 0 ? area.clientWidth : w);
 +
 +var sz = Math.max(100, Math.min(areaH - 10, areaW / 2 - 30, 340));
 +[‘ut-svg-g’,‘ut-svg-r’].forEach(function(id){
 +var s=el(id); if(s){s.style.width=sz+‘px’;s.style.height=sz+‘px’;}
 +});
 +var fs=Math.max(20, sz*0.205);
 +document.querySelectorAll(’#ut-app .ut-rtime’).forEach(function(e){e.style.fontSize=fs+‘px’;});
 +}
 +window.addEventListener(‘resize’,resize);
 +// Auch beim Laden direkt auswerten
 +document.addEventListener(‘DOMContentLoaded’, resize);
 +
 +init();
 +resize();
 +})();
 +</script>
  
 <script> <script>
Zeile 982: Zeile 1326:
 /* ── Render ── */ /* ── Render ── */
 function render(){ function render(){
-  el('ut-tg').textContent=mmss(st.gMs); +  // Ring-Timer: digit-by-digit 
-  el('ut-tr').textContent=mmss(st.rMs);+  setMmss('utrt-g0','utrt-g1','utrt-g2','utrt-g3', st.gMs); 
 +  setMmss('utrt-r0','utrt-r1','utrt-r2','utrt-r3', st.rMs);
  
   setMmss('utd-total-0','utd-total-1','utd-total-2','utd-total-3', st.total);   setMmss('utd-total-0','utd-total-1','utd-total-2','utd-total-3', st.total);
Zeile 1022: Zeile 1367:
 /* ── Reset ── */ /* ── Reset ── */
 window.utReset=function(){ window.utReset=function(){
 +  var app=document.getElementById('ut-app');
 +  if(app.classList.contains('ut-fs-float')){
 +    app.classList.remove('ut-fs-float');
 +    el('ut-fsbtn').classList.remove('ut-fs-on');
 +    document.body.classList.remove('ut-fs-active');
 +    document.body.style.top='';
 +    window.scrollTo(0,_fsScrollY||0);
 +    var btn=el('ut-fsbtn');
 +    if(btn){ btn.textContent='⛶'; btn.title='Vollbild'; }
 +  }
   clearInterval(st.tIv); clearInterval(st.wIv);   clearInterval(st.tIv); clearInterval(st.wIv);
   st={phase:'idle',active:'green',gMs:0,rMs:0,last:null,total:0,limit:0,wIv:null,tIv:null,cIv:st.cIv};   st={phase:'idle',active:'green',gMs:0,rMs:0,last:null,total:0,limit:0,wIv:null,tIv:null,cIv:st.cIv};
Zeile 1035: Zeile 1390:
 }; };
  
-/* ── Resize ── */+/* ── Vollbild ── */ 
 +var _fsScrollY = 0; 
 +window.utToggleFS = function(){ 
 +  var app  = document.getElementById('ut-app'); 
 +  var btn  = el('ut-fsbtn'); 
 +  var isFS = app.classList.contains('ut-fs-float'); 
 + 
 +  if(!isFS){ 
 +    _fsScrollY = window.scrollY; 
 +    app.classList.add('ut-fs-float'); 
 +    btn.classList.add('ut-fs-on'); 
 +    document.body.classList.add('ut-fs-active'); 
 +    document.body.style.top = '-' + _fsScrollY + 'px'; 
 +    btn.textContent = '✕'; 
 +    btn.title = 'Vollbild beenden'; 
 +  } else { 
 +    app.classList.remove('ut-fs-float'); 
 +    btn.classList.remove('ut-fs-on'); 
 +    document.body.classList.remove('ut-fs-active'); 
 +    document.body.style.top = ''; 
 +    window.scrollTo(0, _fsScrollY); 
 +    btn.textContent = '⛶'; 
 +    btn.title = 'Vollbild'; 
 +  } 
 +  setTimeout(resize, 50); 
 +  setTimeout(resize, 350); 
 +}; 
 + 
 +document.addEventListener('keydown', function(e){ 
 +  if(e.key === 'Escape' && document.getElementById('ut-app').classList.contains('ut-fs-float')){ 
 +    utToggleFS(); 
 +  } 
 +}); 
 +window.addEventListener('orientationchange', function(){ 
 +  setTimeout(resize, 100); 
 +  setTimeout(resize, 400); 
 +});
 function resize(){ function resize(){
 +  var app=document.getElementById('ut-app');
 +  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);
 +
 +  // Breakpoints basierend auf tatsächlicher Container-Breite setzen
 +  if(app){
 +    app.classList.toggle('ut-sm', w < 700);
 +    app.classList.toggle('ut-xs', w < 480);
 +  }
 +
   var area=document.querySelector('#ut-app .ut-area');   var area=document.querySelector('#ut-app .ut-area');
   if(!area) return;   if(!area) return;
-  var areaH = area.clientHeight > 0 ? area.clientHeight : window.innerHeight - 60; + 
-  var areaW = area.clientWidth  > 0 ? area.clientWidth  : window.innerWidth; +  // Im Vollbild: Fenstergröße nutzen. Sonst: tatsächliche Element-Größe. 
-  var sz=Math.max(150, Math.min(areaH - 20, areaW / 2 - 44, 340));+  var topbarH = 0; 
 +  var tb = document.querySelector('#ut-app .ut-topbar'); 
 +  if(tb) topbarH = tb.offsetHeight || 50; 
 + 
 +  var areaH = isFS 
 +    ? (window.innerHeight - topbarH - 10) 
 +    : (area.clientHeight > 20 ? area.clientHeight : window.innerHeight - topbarH - 60); 
 +  var areaW = isFS ? window.innerWidth : (area.clientWidth > 0 ? area.clientWidth : w); 
 + 
 +  var sz = Math.max(100, Math.min(areaH - 10, areaW / 2 - 30, 340));
   ['ut-svg-g','ut-svg-r'].forEach(function(id){   ['ut-svg-g','ut-svg-r'].forEach(function(id){
     var s=el(id); if(s){s.style.width=sz+'px';s.style.height=sz+'px';}     var s=el(id); if(s){s.style.width=sz+'px';s.style.height=sz+'px';}
   });   });
-  var fs=Math.max(24,sz*0.205);+  var fs=Math.max(20, sz*0.205);
   document.querySelectorAll('#ut-app .ut-rtime').forEach(function(e){e.style.fontSize=fs+'px';});   document.querySelectorAll('#ut-app .ut-rtime').forEach(function(e){e.style.fontSize=fs+'px';});
 } }
 window.addEventListener('resize',resize); window.addEventListener('resize',resize);
 +// Auch beim Laden direkt auswerten
 +document.addEventListener('DOMContentLoaded', resize);
  
 init(); init();
 +resize();
 })(); })();
 </script> </script>
  
-</body> 
 </html> </html>
tools/ur-timer.1773302253.txt.gz · Zuletzt geändert: von Eric Weber