From 68adca35e589b655ae0ef113583ae5f9824fb418 Mon Sep 17 00:00:00 2001 From: Christian Heubaum Date: Fri, 3 Jul 2026 00:34:43 +0200 Subject: [PATCH] =?UTF-8?q?Version=201.5:=20Farbwarnung=20+=20Glockenton?= =?UTF-8?q?=20+=20gro=C3=9Fe=20Header-Zeitanzeige?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Main-Card wird gelb ab 15s Restzeit, BNI-Rot ab 5s - Timer-Text kontrastabhängig (schwarz auf gelb, weiß auf rot) - Fachgebiets-Pille immer in weißer Schrift lesbar - Glockenton bei Ablauf (bell.mp3 als data-URI in HTML eingebettet) - Große Sekundenanzeige rechts oben im Display-Header Co-Authored-By: Claude Opus 4.7 --- index.html | 149 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 144 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 3695e2a..661d0b7 100644 --- a/index.html +++ b/index.html @@ -83,6 +83,28 @@ } #view-display:hover #fullscreen-btn { opacity: 1; } #fullscreen-btn:hover { background: rgba(255,255,255,0.18); color: white; } + #sound-enable-btn { + position: fixed; + top: 20px; right: 50%; + transform: translateX(50%); + z-index: 1000; + background: var(--red, #cf2030); + color: white; + border: none; + border-radius: 999px; + padding: 10px 20px; + font-size: 1rem; + font-weight: 600; + cursor: pointer; + box-shadow: 0 4px 20px rgba(0,0,0,0.35); + display: none; + animation: soundBtnPulse 1.6s ease-in-out infinite; + } + #sound-enable-btn.needed { display: block; } + @keyframes soundBtnPulse { + 0%, 100% { transform: translateX(50%) scale(1); } + 50% { transform: translateX(50%) scale(1.05); } + } .display-header { position: absolute; top: clamp(14px, 2vh, 32px); left: 40px; @@ -106,6 +128,25 @@ letter-spacing: 1px; } + #display-header-timer { + position: absolute; + top: clamp(10px, 1.5vh, 24px); + right: clamp(230px, 17vw, 310px); + font-size: clamp(2.5rem, 7vh, 6.5rem); + font-weight: 800; + color: rgba(255,255,255,0.95); + font-variant-numeric: tabular-nums; + letter-spacing: 4px; + z-index: 10; + line-height: 1; + text-shadow: 0 2px 20px rgba(0,0,0,0.6); + display: none; + pointer-events: none; + } + #display-header-timer.warn { color: #fbbf24; } + #display-header-timer.danger { color: #ef4444; } + #display-header-timer.expired { color: #ef4444; animation: timerBlink 0.5s alternate infinite; } + .progress-indicator { position: absolute; top: clamp(28px, 4vh, 50px); right: 40px; @@ -146,7 +187,10 @@ position: relative; z-index: 1; margin-bottom: clamp(60px, 8vh, 90px); + transition: background 0.4s ease, border-color 0.4s ease; } + .main-card.timer-warn { background: #fbbf24; border-color: rgba(0,0,0,0.15); } + .main-card.timer-danger { background: #cf2030; border-color: rgba(255,255,255,0.25); } .photo-section { flex-shrink: 0; @@ -233,13 +277,14 @@ .display-specialty { display: inline-block; - background: rgba(204,0,0,0.25); - border: 1px solid rgba(204,0,0,0.5); - color: #ff8080; + background: rgba(0,0,0,0.35); + border: 1px solid rgba(255,255,255,0.35); + color: #fff; font-size: clamp(1rem, 2.2vh, 2.4rem); padding: clamp(6px, 1vh, 14px) clamp(12px, 1.8vw, 28px); border-radius: 30px; align-self: flex-start; + text-shadow: 0 1px 2px rgba(0,0,0,0.4); } .visitor-tag { @@ -769,6 +814,26 @@ #display-timer-text.danger { color: #ef4444; } #display-timer-text.expired { color: #ef4444; animation: timerBlink 0.5s alternate infinite; } + /* Kontrast auf farbigem Kartenhintergrund */ + .main-card.timer-warn #display-timer-text, + .main-card.timer-warn #display-timer-text.warn, + .main-card.timer-warn #display-timer-text.danger, + .main-card.timer-warn #display-timer-text.expired { color: #000; text-shadow: none; } + .main-card.timer-danger #display-timer-text, + .main-card.timer-danger #display-timer-text.warn, + .main-card.timer-danger #display-timer-text.danger, + .main-card.timer-danger #display-timer-text.expired { color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.35); } + .main-card.timer-warn .timer-ring-progress, + .main-card.timer-warn .timer-ring-progress.warn, + .main-card.timer-warn .timer-ring-progress.danger, + .main-card.timer-warn .timer-ring-progress.expired { stroke: #000; animation: none; } + .main-card.timer-danger .timer-ring-progress, + .main-card.timer-danger .timer-ring-progress.warn, + .main-card.timer-danger .timer-ring-progress.danger, + .main-card.timer-danger .timer-ring-progress.expired { stroke: #fff; animation: none; } + .main-card.timer-warn .timer-ring-track { stroke: rgba(0,0,0,0.15); } + .main-card.timer-danger .timer-ring-track { stroke: rgba(255,255,255,0.25); } + .queue-timer-btn { font-size: 0.75rem; font-weight: 700; color: var(--muted); @@ -1113,17 +1178,20 @@ +
+
Vorstellungsrunde
⚙ Steuerung
+