Adminator/geograsim
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tag-Zeitstrahl: 23 Stunden-Trennlinien + stuendliche Beschriftung + dunklere Nachtzeiten (00-01/20-24)

Browse Source 
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Thomas
2026-08-23 21:48:33 +02:00
parent 74736a33aa
commit 193c6dcc8f
1 changed files with 13 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
App/teacher.html
+13 -5
View File
@@ -2115,9 +2115,11 @@ function _tsInjectCss(){
+'.ts-reset{font-size:.66rem;padding:.2rem .5rem;border:1px solid rgba(0,0,0,.15);border-radius:6px;background:#fff;color:#4a7c8a;cursor:pointer;font-weight:600}'
+'.ts-reset:hover{background:#f0f8fa}'
+'.ts-slider{position:relative;height:34px;margin:0 10px}'
+'.ts-track{position:absolute;left:0;right:0;top:15px;height:5px;border-radius:3px;background:#e3e0d5}'
+'.ts-range{position:absolute;top:15px;height:5px;border-radius:3px;background:#4a7c8a}'
+'.ts-slider input[type=range]{position:absolute;left:0;width:100%;top:0;height:34px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none}'
+'.ts-bg{position:absolute;left:0;right:0;top:6px;height:22px;border-radius:5px;background:#eeece3;overflow:hidden;z-index:0}'
+'.ts-night{position:absolute;top:0;height:100%;background:rgba(31,75,55,.17)}' /* Nachtzeiten dunkler */
+'.ts-div{position:absolute;top:0;height:100%;width:1px;background:rgba(0,0,0,.10)}' /* stündliche Trennlinie */
+'.ts-range{position:absolute;top:6px;height:22px;border-radius:4px;background:rgba(74,124,138,.30);border:1px solid #4a7c8a;z-index:1;box-sizing:border-box}'
+'.ts-slider input[type=range]{position:absolute;left:0;width:100%;top:0;height:34px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;z-index:2}'
+'.ts-slider input[type=range]::-webkit-slider-thumb{pointer-events:auto;-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:#4a7c8a;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer;margin-top:0}'
+'.ts-slider input[type=range]::-moz-range-thumb{pointer-events:auto;width:20px;height:20px;border-radius:50%;background:#4a7c8a;border:3px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:pointer}'
+'.ts-slider input[type=range]::-webkit-slider-runnable-track{background:none;height:34px}'
@@ -2260,14 +2262,20 @@ async function renderLiveSummary() {
// (erste bis letzte Aktivität). onchange committet + rendert neu, oninput nur Visual.
_tsInjectCss();
var _isAuto = (_liveWin.from==null && _liveWin.to==null);
var _ticks=''; for (var _h=0;_h<=24;_h+=3){ _ticks += '<span style="left:'+(_h/24*100)+'%">'+_pad2(_h)+'</span>'; }
// Hintergrund: dunklere Nachtzeiten (00–01 und 20–24, um Mitternacht = ein Bereich)
// + 23 stündliche Trennlinien.
var _bg = '<span class="ts-night" style="left:0;width:'+(1/24*100)+'%"></span>'
+ '<span class="ts-night" style="left:'+(20/24*100)+'%;width:'+(4/24*100)+'%"></span>';
for (var _d=1; _d<24; _d++){ _bg += '<span class="ts-div" style="left:'+(_d/24*100)+'%"></span>'; }
// Stündliche Beschriftung 0–24.
var _ticks=''; for (var _h=0;_h<=24;_h++){ _ticks += '<span style="left:'+(_h/24*100)+'%">'+_pad2(_h)+'</span>'; }
html += '<div class="ts-wrap">'
+ '<div class="ts-head">🕒 Zeitraum <b id="tsLbl">'+_pad2(fromH)+':00 – '+_pad2(toH)+':00</b>'
+ (_isAuto ? '<span style="color:#8a8a8a;font-size:.66rem">Auto: erste – letzte Aktivität</span>'
: '<button class="ts-reset" onclick="_tsReset()">↺ ganzer Zeitraum</button>')
+ '</div>'
+ '<div class="ts-slider">'
+ '<div class="ts-track"></div>'
+ '<div class="ts-bg">'+_bg+'</div>'
+ '<div class="ts-range" id="tsRange" style="left:'+(fromH/24*100)+'%;width:'+((toH-fromH)/24*100)+'%"></div>'
+ '<input type="range" id="tsFrom" min="0" max="24" step="1" value="'+fromH+'" aria-label="Von" oninput="_tsVisual()" onchange="_tsCommit()">'
+ '<input type="range" id="tsTo" min="0" max="24" step="1" value="'+toH+'" aria-label="Bis" oninput="_tsVisual()" onchange="_tsCommit()">'