sandro/ninjiapi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

README angepasst

Browse Source
This commit is contained in:
sandro
2026-08-13 09:35:32 +02:00
parent 1533dd7c55
commit 20521febd5
6 changed files with 104 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
html/ninjiclassic.html
+55 -32
View File
@@ -14,6 +14,10 @@
--gold: #f59e0b;
--border-color: #334155;
--frame-color: #000000;
--font-size: 0.9rem;
--card-padding-v: 6px;
--card-padding-h: 14px;
--icon-size: 28px;
}
* {
@@ -33,7 +37,6 @@
overflow: hidden;
}
/* Haupt-Container, der Ränder und Layout steuert */
.ticker-main {
display: flex;
width: 100%;
@@ -45,7 +48,6 @@
background: rgba(15, 23, 42, 0);
}
/* Container für fixierte Elemente (User oder Division) */
.fixed-container {
flex-shrink: 0;
z-index: 10;
@@ -57,7 +59,6 @@
display: none;
}
/* Der Wrapper für den scrollenden Teil */
.ticker-wrapper {
flex-grow: 1;
overflow: hidden;
@@ -65,8 +66,6 @@
position: relative;
}
/* Verläufe (before & after) wurden hier komplett entfernt, um sauberes Chroma-Keying zu ermöglichen */
.ticker-content {
display: inline-flex;
gap: 10px;
@@ -77,20 +76,18 @@
animation-play-state: paused;
}
/* Kompakte, flache Karte */
.player-card {
background: var(--card-bg);
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 6px 14px;
padding: var(--card-padding-v) var(--card-padding-h);
display: flex;
align-items: center;
gap: 12px;
font-size: 0.9rem;
font-size: var(--font-size);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
/* Farbschemata für die einzelnen Divisionen */
.player-card.division-champion { background: #171717; border-color: #333333; }
.player-card.division-master { background: #480000; border-color: #8b0000; }
.player-card.division-diamant { background: #471830; border-color: #882b5d; }
@@ -99,20 +96,18 @@
.player-card.division-silver { background: #2d2d2d; border-color: #5c5c5c; }
.player-card.division-bronze { background: #2f1a03; border-color: #6b3b07; }
/* Spezielles Highlight für den User mit dynamischer Rahmenfarbe */
.player-card.highlight {
border-color: var(--frame-color) !important;
box-shadow: 0 0 0 3px var(--frame-color) !important;
}
/* Styling für die Divisions-Karte */
.player-card.division-card {
padding: 6px 16px;
padding: var(--card-padding-v) calc(var(--card-padding-h) + 2px);
gap: 8px;
}
.division-title {
font-size: 0.75rem;
font-size: calc(var(--font-size) * 0.85);
font-weight: 800;
letter-spacing: 1px;
color: #bae6fd;
@@ -120,14 +115,14 @@
}
.division-name {
font-size: 1rem;
font-size: var(--font-size);
font-weight: 800;
color: #ffffff;
}
.division-icon-large {
width: 28px;
height: 28px;
width: var(--icon-size);
height: var(--icon-size);
object-fit: contain;
}
@@ -141,7 +136,7 @@
background: var(--border-color);
color: var(--accent);
font-weight: bold;
font-size: 0.8rem;
font-size: var(--font-size);
padding: 2px 6px;
border-radius: 4px;
}
@@ -165,7 +160,7 @@
align-items: center;
gap: 8px;
color: var(--text-muted);
font-size: 0.85rem;
font-size: var(--font-size);
}
.divider {
@@ -207,9 +202,27 @@
const frameColor = urlParams.get('framecolor');
const divisionEveryCard = urlParams.get('showdivision');
// NEU: Parameter zum Steuern der P1/P2-Zeiten (Standard ist true)
const showTimes = urlParams.get('showtimes') !== 'false';
const fixPosition = (urlParams.get('fix') || '').toLowerCase();
const fixDivision = (urlParams.get('fixdivision') || '').toLowerCase();
const fontSizeParam = urlParams.get('fontsize');
const heightParam = urlParams.get('height');
if (fontSizeParam) {
const formattedSize = /^\d+$/.test(fontSizeParam) ? `${fontSizeParam}px` : fontSizeParam;
document.documentElement.style.setProperty('--font-size', formattedSize);
const iconSize = /^\d+$/.test(fontSizeParam) ? `${parseInt(fontSizeParam) * 1.6}px` : '28px';
document.documentElement.style.setProperty('--icon-size', iconSize);
}
if (heightParam) {
const formattedHeight = /^\d+$/.test(heightParam) ? `${heightParam}px` : heightParam;
document.documentElement.style.setProperty('--card-padding-v', formattedHeight);
}
if (bgColor) {
const formattedColor = bgColor.startsWith('#') ? bgColor : `#${bgColor}`;
document.documentElement.style.setProperty('--bg-color', formattedColor);
@@ -234,6 +247,26 @@
const divName = (item.division || 'master').toLowerCase();
const dynamicBgClass = `division-${divName}`;
// Dynamischer HTML-Teil für die Zeiten (abhängig von showTimes)
let timesHTML = '';
if (showTimes) {
timesHTML = `
<div class="card-info">
<span class="divider">|</span>
<span>P1: ${item.part1} / P2: ${item.part2}</span>
<span class="divider">|</span>
<span class="total-time">${item.totalTime}s</span>
</div>
`;
} else {
timesHTML = `
<div class="card-info">
<span class="divider">|</span>
<span class="total-time">${item.totalTime}s</span>
</div>
`;
}
if (divisionEveryCard) {
const imgPath = `img/${divName}.png`;
@@ -243,12 +276,7 @@
<span class="rank-badge ${isTopRank}">#${item.divisionRank ?? '-'}</span>
<span class="player-name">${item.player}</span>
<img src="${item.flag}" class="division-icon-large" alt="" onerror="this.style.display='none'">
<div class="card-info">
<span class="divider">|</span>
<span>P1: ${item.part1} / P2: ${item.part2}</span>
<span class="divider">|</span>
<span class="total-time">${item.totalTime}s</span>
</div>
${timesHTML}
<img src="${item.grindState}" class="division-icon-large" alt="" onerror="this.style.display='none'">
</div>
`;
@@ -258,13 +286,8 @@
<div class="player-card ${highlightClass} ${dynamicBgClass}">
<span class="rank-badge ${isTopRank}">#${item.divisionRank ?? '-'}</span>
<span class="player-name">${item.player}</span>
<img src="${item.flag}" class="division-icon-large" alt="" onerror="this.style.display='none'">
<div class="card-info">
<span class="divider">|</span>
<span>P1: ${item.part1} / P2: ${item.part2}</span>
<span class="divider">|</span>
<span class="total-time">${item.totalTime}s</span>
</div>
<img src="${item.flag}" class="division-icon-large" alt="" onerror="this.style.display='none'">
${timesHTML}
<img src="${item.grindState}" class="division-icon-large" alt="" onerror="this.style.display='none'">
</div>
`;
@@ -357,4 +380,4 @@
setInterval(loadApiData, REFRESH_INTERVAL);
</script>
</body>
</html>
</html>