@@ -219,11 +234,14 @@
function generateLink() {
const user = document.getElementById('user').value.trim();
const speed = document.getElementById('speed').value;
+ const fontsize = document.getElementById('fontsize').value;
+ const height = document.getElementById('height').value;
const bg = document.getElementById('bg').value.replace('#', '');
const framecolor = document.getElementById('framecolor').value.replace('#', '');
const fix = document.getElementById('fix').value;
const fixdivision = document.getElementById('fixdivision').value;
const showdivision = document.getElementById('showdivision').checked;
+ const showtimes = document.getElementById('showtimes').checked;
// Basis-URL zur ninjiclassic.html im selben Verzeichnis ermitteln
const baseUrl = window.location.href.substring(0, window.location.href.lastIndexOf('/') + 1) + 'ninjiclassic.html';
@@ -231,11 +249,14 @@
const params = new URLSearchParams();
if (user) params.append('user', user);
if (speed && speed !== '240') params.append('speed', speed);
+ if (height) params.append('height', height);
+ if (fontsize) params.append('fontsize', fontsize);
if (bg && bg !== '00ff00') params.append('bg', bg);
if (framecolor && framecolor !== '000000') params.append('framecolor', framecolor);
if (fix) params.append('fix', fix);
if (fixdivision) params.append('fixdivision', fixdivision);
if (showdivision) params.append('showdivision', 'true');
+ if (showtimes) params.append('showtimes', 'false');
const queryString = params.toString();
const finalLink = baseUrl + (queryString ? '?' + queryString : '');
diff --git a/html/ninjiclassic.html b/html/ninjiclassic.html
index c85eddf..65441a9 100644
--- a/html/ninjiclassic.html
+++ b/html/ninjiclassic.html
@@ -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 = `
+
+ |
+ P1: ${item.part1} / P2: ${item.part2}
+ |
+ ${item.totalTime}s
+
+ `;
+ } else {
+ timesHTML = `
+
+ |
+ ${item.totalTime}s
+
+ `;
+ }
+
if (divisionEveryCard) {
const imgPath = `img/${divName}.png`;
@@ -243,12 +276,7 @@
#${item.divisionRank ?? '-'}
${item.player}
-
- |
- P1: ${item.part1} / P2: ${item.part2}
- |
- ${item.totalTime}s
-
+ ${timesHTML}
`;
@@ -258,13 +286,8 @@