Light- und Darkmode hinzugefügt
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
Some checks failed
Host-Based Deploy (Java 21 Fix) / build-and-run (push) Has been cancelled
This commit is contained in:
@@ -39,19 +39,16 @@
|
||||
}
|
||||
.game-timer.urgent { color: #e74c3c; }
|
||||
|
||||
.game-level-bar {
|
||||
.level-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
.game-level-dot {
|
||||
width: 10px; height: 10px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-secondary);
|
||||
transition: background 0.3s;
|
||||
.level-display img {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
object-fit: contain;
|
||||
}
|
||||
.game-level-dot.active { background: var(--color-primary); }
|
||||
|
||||
.lock-messages {
|
||||
background: rgba(233,69,96,0.1);
|
||||
@@ -120,19 +117,14 @@
|
||||
#finisherBox h2 { font-size: 1.1rem; margin: 0 0 0.75rem; color: var(--color-primary); }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app" class="container" style="max-width:480px;margin:0 auto;padding:1rem;">
|
||||
<div style="display:flex;align-items:center;gap:0.75rem;margin-bottom:1.25rem;">
|
||||
<button id="btnBack" onclick="goBack()"
|
||||
style="background:none;border:none;color:var(--color-muted);font-size:1.3rem;cursor:pointer;padding:0.2rem 0.4rem;">‹</button>
|
||||
<h1 style="margin:0;font-size:1.15rem;font-weight:700;">🎯 Task Game</h1>
|
||||
</div>
|
||||
<body class="app">
|
||||
<div class="main">
|
||||
<div class="content">
|
||||
<h2 style="margin-bottom:1.25rem;">🎯 Task Game</h2>
|
||||
|
||||
<!-- Level-Anzeige -->
|
||||
<div class="game-level-bar" id="levelBar" style="display:none;">
|
||||
<span style="font-size:0.78rem;color:var(--color-muted);font-weight:600;">Level</span>
|
||||
<div id="levelDots" style="display:flex;gap:0.35rem;"></div>
|
||||
<span id="levelText" style="font-size:0.78rem;color:var(--color-muted);margin-left:auto;"></span>
|
||||
<div class="level-display" id="levelDisplay" style="display:none;">
|
||||
<img id="levelImg" src="" alt="Level">
|
||||
</div>
|
||||
|
||||
<!-- Freigegebene Locks (checkLocks-Meldungen) -->
|
||||
@@ -186,8 +178,11 @@
|
||||
</div>
|
||||
<div id="errorBox" style="display:none;background:rgba(231,76,60,0.1);border:1px solid rgba(231,76,60,0.3);
|
||||
border-radius:10px;padding:1rem;font-size:0.88rem;color:#e74c3c;margin-top:1rem;"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/icons.js"></script>
|
||||
<script src="/js/nav.js"></script>
|
||||
<script>
|
||||
const params = new URLSearchParams(location.search);
|
||||
const lockId = params.get('lockId');
|
||||
@@ -411,13 +406,9 @@
|
||||
// ── Level-Bar ─────────────────────────────────────────────────────────────
|
||||
|
||||
function renderLevelBar(level) {
|
||||
const bar = document.getElementById('levelBar');
|
||||
const dots = document.getElementById('levelDots');
|
||||
dots.innerHTML = [1,2,3,4,5].map(i =>
|
||||
`<div class="game-level-dot${i <= level ? ' active' : ''}"></div>`
|
||||
).join('');
|
||||
document.getElementById('levelText').textContent = 'Level ' + Math.min(level, 5);
|
||||
show('levelBar');
|
||||
const lvl = Math.min(Math.max(level, 1), 5);
|
||||
document.getElementById('levelImg').src = `/img/lvl${lvl}.png`;
|
||||
show('levelDisplay');
|
||||
}
|
||||
|
||||
// ── Timer ─────────────────────────────────────────────────────────────────
|
||||
|
||||
Reference in New Issue
Block a user