README angepasst

README.md

@@ -0,0 +1,25 @@
+# Ninji Leaderboard Ticker – URL-Parameter
+
+Der Ticker lässt sich flexibel über URL-Parameter anpassen, um ihn perfekt in dein Stream-Overlay (z. B. OBS Studio per Browser-Source) einzubinden.
+
+### Verfügbare Parameter
+
+| Parameter | Beschreibung | Standardwert | Beispiel |
+| :--- | :--- | :--- | :--- |
+| `user` | Twitch- bzw. Spielername, für den die Daten geladen und das Highlight (Fett/Rahmen) aktiviert werden. | `kaizobrothers` | `?user=kaizobrothers` |
+| `speed` | Basis-Geschwindigkeit des Tickers in Sekunden (Referenzwert für 10 Karten). Skaliert automatisch mit der Anzahl der Karten, damit die Laufgeschwindigkeit konstant bleibt. | `20` | `?speed=15` |
+| `bg` | Hintergrundfarbe der Seite (ideal für Chroma-Keying). Akzeptiert Hex-Codes (mit oder ohne `#`). | `00ff00` (Grün) | `?bg=1e1b4b` oder `?bg=000000` |
+| `framecolor` | Farbe des harten Rahmens für das Highlight der Spielerkarte. | `000000` (Schwarz) | `?framecolor=ffffff` |
+| `fix` | Fixiert die Karte des aktuellen Users fest auf einer Seite. Der Rest des Leaderboards scrollt dazwischen durch. | *Keine* (scrollt mit) | `?fix=left` oder `?fix=right` |
+| `fixdivision` | Fixiert die Divisions-Karte fest auf einer Seite. | *Keine* (scrollt mit) | `?fixdivision=left` oder `?fixdivision=right` |
+| `showdivision` | Zeigt das Divisions-Icon zusätzlich bei *jeder einzelnen* Spielerkarte an. | `false` | `?showdivision=true` |
+| `showtimes` | Steuert, ob die Einzeltzeiten (P1 & P2) angezeigt werden (`true`) oder ob nur die Gesamtzeit zu sehen ist (`false`). | `true` | `?showtimes=false` |
+| `fontsize` | Legt die Schriftgröße fest (skaliert Icons automatisch proportional mit). | `0.9rem` | `?fontsize=14px` oder `?fontsize=1rem` |
+| `height` | Steuert den inneren vertikalen Abstand (Padding) der Karten, um die Höhe des Tickers anzupassen. | `6px` | `?height=4px` oder `?height=10px` |
+
+### Kombinationsbeispiel
+
+Ein kompletter Link für ein Overlay mit grünem Hintergrund, fixiertem User links, fixierter Division rechts, ausgeblendeten Zwischenzeiten und angepasster Schriftgröße:
+
+```text
+https://overlay.kaizobrothers.de/ninjiclassic.html?user=kaizobrothers&bg=00ff00&framecolor=000000&fix=left&fixdivision=right&showtimes=false&fontsize=14px

countries.json

@@ -0,0 +1 @@
+{"deadline": "08/14/2026 19:00:00", "users": {"SakayaLive": "at", "RedPandaa_": "ie", "Chambo_": "ca", "Haipeee": "us", "newgasm": "us", "HBRbotinator": "se", "SMokiWuff": "us", "Kapostel": "de", "Berndl_64": "at", "Dennsen86": "de", "NitroSplint": "in", "RayaRoentgen": "de", "Nathanmg": "gb-eng", "Fransen86": "de", "JLoops_": "nl", "SeiphSewell24": "us", "iamtheratio": "us", "Holiday_From_Real": "de", "MSpeedruns": "us", "plagrizr": "us", "Krisbyte": "de", "Flowty83": "ch", "Yuri_Zahard": "ch", "MaxpowerBlue": "ca", "DixyNL": "nl", "Thanatos_ttv": "de", "vipersigns": "bh", "Saphros": "de", "jinrokhzenobi": "de", "P0werjuicer": "de", "DerPlebsident": "ie", "hchris3": "de", "Deathmask666GER": "de", "MTheOrdinaryGamer": "mx", "NoSuperman89": "de", "Ticknaldo": "de", "Namefaker89": "de", "nonprophet__": "us", "Nos4893": "de", "danny_90": "de", "shell_don_koopa": "de", "BotNoUser": "de", "everygamegam3r": "us", "trudenter": "ca", "multimangel": "de", "Heisenknut308": "de", "ShadowsTakeFall": "us", "StelioKonttos": "de", "StefanGose": "de", "DiaxosOfficial": "de", "JohannesKriechhammer": "at", "NotJohnMcDonald": "us", "JoachimTheKante": "de", "ElectricEagle1": "de", "Nayfal": "de", "AGrubica": "at", "nikmik0108": "at", "GussBradyGaming": "us", "Stormsn": "de", "DerJan_85": "de", "Raptor0155": "de", "BigLenko": "de", "Der__Mark__": "de", "AchSteff": "de", "Traviktox": "de", "olllo1000": "de", "Da_phiiil": "de", "sir_vilrin": "us", "TechnoHail": "in", "Paddylein": "de", "silberpappel87": "de", "Sonofsolaire": "gb-eng", "LuckwurstJoe": "de", "IxionXVII": "at", "Azrael_S90": "de", "rinhoo76": "nl", "Pyradante": "de", "DrKrabby": "ca", "sugarfalcon": "au", "DamnD1ngo": "de", "Toppi_TV": "de", "DonPascaletti": "de", "ABG_Armin": "at", "moshok": "de", "macii85": "ch", "X_Cite86": "de", "Teto": "de", "MajorDuke": "ch", "Zorthaz13": "ca", "MrrKessko": "de", "kalyrix": "de", "liluu_pan": "at", "HerrBoesch": "de", "lGiygasl": "de", "Traysir89": "de", "TooOld2BeGaming": "gb-eng", "Quaschynock": "de", "oldskoolotto": "de", "Burol": "de", "Inyu1": "de", "Spaceinvaderin": "de", "x_cloudius_x": "de", "StepsDerSteher": "at", "MesaMitch": "", "SmashleyMF": "us", "gandhiboy_": "de", "budzcee": "us", "Smiddster3": "us", "broke_artist_tv": "pr", "Jole_12": "hr", "dwr1986": "de", "ViperSpielt": "de", "Laffi_1HP": "de", "La_Bella_Rosa": "de", "babooza91": "de", "fanzocker": "de", "AnnaLavellan": "de", "Flash406": "de", "Paddy___W": "de", "eru_the_small": "at", "RoronoaZoro1990": "at", "Arcadeschokolade": "de", "TheDestinOfficial": "us", "Maw1337": "de", "RUC_Rious": "de", "HousemeisterHD": "de", "Oelsardine": "de", "r0bo0": "de", "CrazySkar86": "de", "janb209": "de", "RatzeFatz": "it", "Tsubasa_242": "de", "Cruckel": "us", "AndreTheKey": "de", "marsellluswalllace": "de", "Michael___TV": "de", "MrMoeZockt": "de", "Loeffler11": "de", "Littlebeast_81": "at", "Siegertyp83": "de", "DaveStateGaming_": "us", "whybe": "", "Jlpeazy": "us", "stephness36": "gb-sct", "saftinger": "de", "finalsilent": "de", "Rammstuhl": "at", "jansenMcCloud": "de", "II_Morrison_II": "de", "Dergl": "de", "HerrBlutgraf": "de", "Rubberducky500": "at", "MaMuhle": "de", "doctor8bit": "de", "JaDeKi": "de", "yoshibraut": "de", "jacomile": "de", "Willows_Wanders": "us", "Franzbroetchen86": "de", "seneida": "de", "mahn89": "de", "nemesis8bit": "at", "Falanyeldi": "at", "GrinzA_": "de", "mc_thomas3": "de", "badetuch86": "de", "xKrieger_desLichts": "de", "the_real_sutefan": "de", "doomed2mors": "de", "CyberScouter": "de", "mikeeeeee83": "de", "Kurthose01": "", "Chomper89": "de", "nottjott": "de", "chrischicken1992": "de", "DarkOrchid1986": "de", "griestopf_88": "de", "nels0n1": "de", "cheezy089": "de", "DarK_ComManD": "de", "Lorella_san": "de", "dante77232": "de", "artificial_jan": "de", "filnn": "", "Yogi_Tronimal": "de", "Patsche1312": "de", "pfluecksalami": "de", "Zombomann": "de", "ecopleX": "", "Musikmalin": "de", "1ndUbio": "de", "VuongDucAnh281107": "", "fluxxi1": "de", "tobigbf": "", "Rederr0r": "de", "der_kai01": "de", "Mo__95": "de", "Nezuruic": "de", "BOEMEF": "de", "eeneonee": "de", "snikkels727": "de", "Phirestorm": "ca", "bullrich88": "de", "kaizobrothers": "de", "LazySlothLady": "de", "jdhull37": "us", "xmadnessx.": ""}}

dl_country.py

@@ -0,0 +1,72 @@
+import csv
+import re
+import urllib.request
+import json
+import os
+import time
+
+SPREADSHEET_ID = "1bsO07WG6ymV4UzHZyB0ayrKCn2zv67SpFaeE4Zmghcc"
+GID = "0"
+CSV_URL = f"https://docs.google.com/spreadsheets/d/{SPREADSHEET_ID}/gviz/tq?tqx=out:csv&gid={GID}"
+
+def parse_csv_data(reader):
+    result_data = {}
+    users = {}
+    
+    # 1. Zeile auslesen (für die Deadline in Zelle A1)
+    # next() holt das nächste (hier: das erste) Element aus dem Reader
+    first_row = next(reader, None)
+    if first_row and len(first_row) > 0:
+        result_data['deadline'] = first_row[0].strip()
+        
+    # 2. Den restlichen Reader durchlaufen (ab Zeile 2)
+    for row in reader:
+        # Prüfen, ob die Zeile mindestens 5 Spalten hat (wegen Spalte E) 
+        # und ob Spalte A (Index 0) nicht leer ist
+        if len(row) >= 5 and row[0].strip():
+            users[row[0].strip()] = row[4].strip()
+            
+    result_data['users'] = users
+    return result_data
+
+
+
+def update_data():
+    try:
+        req = urllib.request.Request(CSV_URL, headers={"User-Agent": "Mozilla/5.0"})
+        response = urllib.request.urlopen(req)
+        lines = [line.decode("utf-8") for line in response.readlines()]
+
+        reader = csv.reader(lines)
+        parsed_data = parse_csv_data(reader)
+        with open("countries.json", "w") as f:
+            f.write(json.dumps(parsed_data))
+        return parsed_data
+
+    except Exception as e:
+        return {"success": False, "error": str(e)}
+
+
+def read_data():
+    file_path = "countries.json"
+    max_age_seconds = 60 * 60  # eine Stunde Cache-Dauer
+
+    # Prüfen, ob die Datei existiert und wie alt sie ist
+    if os.path.exists(file_path):
+        # Mtime = Letzte Änderungszeit der Datei in Sekunden seit Epoch
+        file_age = time.time() - os.path.getmtime(file_path)
+
+        if file_age > max_age_seconds:
+            update_data()
+    else:
+        # Falls die Datei noch gar nicht existiert, direkt initial Daten holen
+        update_data()
+
+    # Nach dem potenziellen Update die Datei einlesen
+    with open(file_path, "r", encoding="utf-8") as f:
+        return json.load(f)
+
+
+if __name__ == "__main__":
+    # bindet an 0.0.0.0, damit es im gesamten Netzwerk erreichbar ist
+    read_data()

dl_csv.py

@@ -4,6 +4,8 @@ import urllib.request
 import json
 import os
 import time
+import dl_country
+import dl_twitchstate
 
 SPREADSHEET_ID = "1bsO07WG6ymV4UzHZyB0ayrKCn2zv67SpFaeE4Zmghcc"
 GID = "1669168528"
@@ -57,14 +59,30 @@ def parse_csv_data(reader):
 
     # Zeile 2 (Index 1): Meta Info aus Spalte B (Index 1)
     meta_b2 = rows[1][1] if len(rows[1]) > 1 else ""
-    deadline = rows[1][8] if len(rows[1]) > 8 else ""  # Falls Deadline in Spalte I steht
+#    deadline = rows[1][8] if len(rows[1]) > 8 else ""  # Falls Deadline in Spalte I steht
-
+#    with open("countries.json", "r") as ctries:
+#         countries = json.load(ctries)
+    countries = dl_country.read_data()
+    twitch_state = dl_twitchstate.read_data()
+    deadline = countries["deadline"]
     # Ab Zeile 4 (Index 3): Spieler-Leaderboard
     leaderboard = []
     for row in rows[3:]:
         # Nur wenn ein Spielername in Spalte F (Index 5) existiert
         if len(row) > 5 and row[5].strip():
             player_name = row[5].strip()
+            try:
+              country = countries["users"][player_name]
+            except Exception as e:
+              print(str(e))
+              country = ""
+
+            try:
+              grind_state = twitch_state[player_name]
+            except Exception as e:
+              #print(str(e))
+              grind_state = ""
+
             division = row[0].strip() if len(row) > 0 else ""
             match division:
                case "C":
@@ -96,9 +114,11 @@ def parse_csv_data(reader):
                 "divisionRank": int(rank_div) if rank_div.isdigit() else 0,
                 "overallRank": int(rank_overall_clean) if rank_overall_clean.isdigit() else None,
                 "player": player_name,
+                "flag": f"https://flagcdn.com/80x60/{country}.png",
                 "part1": part1,
                 "part2": part2,
                 "totalTime": total_time,
+                "grindState" : grind_state,
                 "isOnline": online_str in ["on", "online", "true", "1", "ja"],
             })
 

dl_twitchstate.py

@@ -0,0 +1,71 @@
+import csv
+import re
+import urllib.request
+import json
+import os
+import time
+
+SPREADSHEET_ID = "1ESSYHbhnAfJ4PMPKxlg43g4B2stShhIKhpE4eYZuW9E"
+GID = "862418922"
+CSV_URL = f"https://docs.google.com/spreadsheets/d/{SPREADSHEET_ID}/gviz/tq?tqx=out:csv&gid={GID}"
+
+def parse_csv_data(reader):
+    users = {}
+
+    # 1. Zeile auslesen (für die Deadline in Zelle A1)
+    # next() holt das nächste (hier: das erste) Element aus dem Reader
+    first_row = next(reader, None)
+
+    # 2. Den restlichen Reader durchlaufen (ab Zeile 2)
+    for row in reader:
+        # Prüfen, ob die Zeile mindestens 5 Spalten hat (wegen Spalte E) 
+        # und ob Spalte A (Index 0) nicht leer ist
+        if len(row) >= 12 and row[8].strip():
+            if row[9].strip() == "TRUE":
+               users[row[8].strip()] = "https://i.ibb.co/mzVnwcP/Mario.png"
+            if row[10].strip() == "TRUE":
+               users[row[8].strip()] = "https://i.ibb.co/bjh4pyrN/twitch-removebg-preview.png"
+            
+    return users
+
+
+
+def update_data():
+    try:
+        req = urllib.request.Request(CSV_URL, headers={"User-Agent": "Mozilla/5.0"})
+        response = urllib.request.urlopen(req)
+        lines = [line.decode("utf-8") for line in response.readlines()]
+
+        reader = csv.reader(lines)
+        parsed_data = parse_csv_data(reader)
+        with open("twitch_state.json", "w") as f:
+            f.write(json.dumps(parsed_data))
+        return parsed_data
+
+    except Exception as e:
+        return {"success": False, "error": str(e)}
+
+
+def read_data():
+    file_path = "twitch_state.json"
+    max_age_seconds = 60 * 5  # fünf Minuten Cache-Dauer
+
+    # Prüfen, ob die Datei existiert und wie alt sie ist
+    if os.path.exists(file_path):
+        # Mtime = Letzte Änderungszeit der Datei in Sekunden seit Epoch
+        file_age = time.time() - os.path.getmtime(file_path)
+
+        if file_age > max_age_seconds:
+            update_data()
+    else:
+        # Falls die Datei noch gar nicht existiert, direkt initial Daten holen
+        update_data()
+
+    # Nach dem potenziellen Update die Datei einlesen
+    with open(file_path, "r", encoding="utf-8") as f:
+        return json.load(f)
+
+
+if __name__ == "__main__":
+    # bindet an 0.0.0.0, damit es im gesamten Netzwerk erreichbar ist
+    read_data()

html/index.html

@@ -1,276 +1,283 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
-<html lang="de">
+<html lang="de">
-<head>
+<head>
-  <meta charset="UTF-8">
+  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Ninji Leaderboard Ticker</title>
+  <title>Ninji Ticker Link-Generator</title>
-  <style>
+  <style>
-    :root {
+    :root {
-      --bg-color: #0f172a;
+      --bg-color: #0f172a;
-      --card-bg: #1e293b;
+      --card-bg: #1e293b;
-      --text-main: #f8fafc;
+      --text-main: #f8fafc;
-      --text-muted: #94a3b8;
+      --text-muted: #94a3b8;
-      --accent: #38bdf8;
+      --accent: #38bdf8;
-      --gold: #f59e0b;
+      --border-color: #334155;
-      --highlight-bg: #1e1b4b; /* Dunkles Lila/Blau für kaizobrothers */
+    }
-      --highlight-border: #818cf8;
+
-      --border-color: #334155;
+    * {
-    }
+      box-sizing: border-box;
-
+      margin: 0;
-    * {
+      padding: 0;
-      box-sizing: border-box;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      margin: 0;
+    }
-      padding: 0;
+
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    body {
-    }
+      background-color: var(--bg-color);
-
+      color: var(--text-main);
-    body {
+      display: flex;
-      background-color: var(--bg-color);
+      justify-content: center;
-      color: var(--text-main);
+      align-items: center;
-      display: flex;
+      min-height: 100vh;
-      justify-content: center;
+      padding: 20px;
-      align-items: center;
+    }
-      min-height: 100vh;
+
-      overflow: hidden;
+    .generator-container {
-    }
+      background: var(--card-bg);
-
+      border: 1px solid var(--border-color);
-    /* Container für den flachen Ticker */
+      border-radius: 12px;
-    .ticker-wrapper {
+      padding: 30px;
-      width: 100%;
+      width: 100%;
-      background: rgba(15, 23, 42, 0);
+      max-width: 600px;
-      border-top: 1px solid var(--border-color);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
-      border-bottom: 1px solid var(--border-color);
+    }
-      padding: 8px 0; /* Flachere Höhe */
+
-      overflow: hidden;
+    h1 {
-      white-space: nowrap;
+      font-size: 1.5rem;
-      position: relative;
+      margin-bottom: 20px;
-    }
+      color: var(--accent);
-
+      text-align: center;
-    .ticker-wrapper::before,
+    }
-    .ticker-wrapper::after {
+
-      content: '';
+    .form-group {
-      position: absolute;
+      margin-bottom: 16px;
-      top: 0;
+      display: flex;
-      width: 80px;
+      flex-direction: column;
-      height: 100%;
+      gap: 6px;
-      z-index: 2;
+    }
-      pointer-events: none;
+
-    }
+    label {
-
+      font-size: 0.9rem;
-    .ticker-wrapper::before {
+      font-weight: 600;
-      left: 0;
+      color: var(--text-muted);
-      background: linear-gradient(to right, var(--bg-color), transparent);
+    }
-    }
+
-
+    input[type="text"],
-    .ticker-wrapper::after {
+    input[type="number"],
-      right: 0;
+    select {
-      background: linear-gradient(to left, var(--bg-color), transparent);
+      background: #0f172a;
-    }
+      border: 1px solid var(--border-color);
-
+      border-radius: 6px;
-    .ticker-content {
+      padding: 10px;
-      display: inline-flex;
+      color: var(--text-main);
-      gap: 10px;
+      font-size: 0.95rem;
-      animation: marquee 20s linear infinite;
+    }
-    }
+
-
+    input[type="color"] {
-    .ticker-wrapper:hover .ticker-content {
+      -webkit-appearance: none;
-      animation-play-state: paused;
+      border: none;
-    }
+      width: 100%;
-
+      height: 40px;
-    /* Kompakte, flache Karte (Einzeiliges Flex-Layout) */
+      border-radius: 6px;
-    .player-card {
+      cursor: pointer;
-      background: var(--card-bg);
+      background: none;
-      border: 1px solid var(--border-color);
+    }
-      border-radius: 8px;
+
-      padding: 6px 14px;
+    input[type="color"]::-webkit-color-swatch-wrapper {
-      display: flex;
+      padding: 0;
-      align-items: center;
+    }
-      gap: 12px;
+
-      font-size: 0.9rem;
+    input[type="color"]::-webkit-color-swatch {
-      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+      border: 1px solid var(--border-color);
-    }
+      border-radius: 6px;
-
+    }
-    /* Spezielles Highlight für kaizobrothers */
+
-    .player-card.highlight {
+    .checkbox-group {
-      background: var(--highlight-bg);
+      flex-direction: row;
-      border-color: var(--highlight-border);
+      align-items: center;
-      box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
+      gap: 10px;
-    }
+      margin-top: 8px;
-
+    }
-    /* Styling für die Divisions-Karte am Anfang */
+
-    .player-card.division-card {
+    input[type="checkbox"] {
-      background: linear-gradient(135deg, #0284c7, #0369a1);
+      width: 18px;
-      border-color: #38bdf8;
+      height: 18px;
-      box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
+      accent-color: var(--accent);
-      padding: 6px 16px;
+      cursor: pointer;
-      gap: 8px;
+    }
-    }
+
-
+    .checkbox-group label {
-    .division-title {
+      color: var(--text-main);
-      font-size: 0.75rem;
+      cursor: pointer;
-      font-weight: 800;
+    }
-      letter-spacing: 1px;
+
-      color: #bae6fd;
+    .result-section {
-      text-transform: uppercase;
+      margin-top: 25px;
-    }
+      padding-top: 20px;
-
+      border-top: 1px solid var(--border-color);
-    .division-name {
+      display: flex;
-      font-size: 1rem;
+      flex-direction: column;
-      font-weight: 800;
+      gap: 10px;
-      color: #ffffff;
+    }
-    }
+
-
+    .result-box {
-    .rank-badge {
+      background: #0f172a;
-      background: var(--border-color);
+      border: 1px solid var(--border-color);
-      color: var(--accent);
+      border-radius: 6px;
-      font-weight: bold;
+      padding: 12px;
-      font-size: 0.8rem;
+      word-break: break-all;
-      padding: 2px 6px;
+      font-family: monospace;
-      border-radius: 4px;
+      font-size: 0.85rem;
-    }
+      color: var(--accent);
-
+    }
-    .rank-1 { 
+
-      background: var(--gold); 
+    .button-row {
-      color: #000; 
+      display: flex;
-    }
+      gap: 10px;
-
+    }
-    .player-name {
+
-      font-weight: 700;
+    button {
-      color: var(--text-main);
+      flex: 1;
-    }
+      background: var(--accent);
-
+      color: #0f172a;
-    .player-card.highlight .player-name {
+      border: none;
-      color: #a5b4fc; /* Heller Violett-Ton für den Namen */
+      border-radius: 6px;
-    }
+      padding: 12px;
-
+      font-weight: bold;
-    .card-info {
+      cursor: pointer;
-      display: flex;
+      transition: opacity 0.2s;
-      align-items: center;
+    }
-      gap: 8px;
+
-      color: var(--text-muted);
+    button:hover {
-      font-size: 0.85rem;
+      opacity: 0.9;
-    }
+    }
-
+
-    .divider {
+    button.secondary {
-      color: var(--border-color);
+      background: #334155;
-    }
+      color: var(--text-main);
-
+    }
-    .total-time {
+  </style>
-      color: var(--accent);
+</head>
-      font-weight: 700;
+<body>
-    }
+
-
+  <div class="generator-container">
-    .player-card.highlight .total-time {
+    <h1>Ninji Ticker Link-Generator</h1>
-      color: #38bdf8;
+    
-    }
+    <div class="form-group">
-
+      <label for="user">Twitch/Player Username</label>
-    @keyframes marquee {
+      <input type="text" id="user" value="kaizobrothers" oninput="generateLink()">
-      0% { transform: translateX(0); }
+    </div>
-      100% { transform: translateX(-50%); }
+
-    }
+    <div class="form-group">
-  </style>
+      <label for="speed">Speed (Basis-Sekunden für 10 Karten)</label>
-</head>
+      <input type="number" id="speed" value="200" min="5" max="1000" oninput="generateLink()">
-<body>
+    </div>
-
+	
-  <div class="ticker-wrapper">
+    <div class="form-group">
-    <div class="ticker-content" id="ticker"></div>
+      <label for="fontsize">Schriftgröße</label>
-  </div>
+      <input type="number" id="fontsize" value="15" min="5" max="70" oninput="generateLink()">
-
+    </div>
-  <script>
+
-    //
+    <div class="form-group">
-    const urlParams = new URLSearchParams(window.location.search);
+      <label for="height">Höhe des Overlays</label>
-    const currentUser = (urlParams.get('user') || 'dennsen86').toLowerCase(); 
+      <input type="number" id="height" value="12" min="5" max="50" oninput="generateLink()">
-    const SPEED_SECONDS = parseInt(urlParams.get('speed') || '20', 10);
+    </div>
-
+
-
+    <div class="form-group">
-    const API_URL = 'https://api.kaizobrothers.de/ninjiapi/division/user/' + currentUser;
+      <label for="bg">Hintergrundfarbe (Chroma-Key)</label>
-    
+      <input type="color" id="bg" value="#00ff00" oninput="generateLink()">
-    // Intervall für automatische Updates (30 Sekunden)
+    </div>
-    const REFRESH_INTERVAL = 30000; 
+
-
+    <div class="form-group">
-    const ticker = document.getElementById('ticker');
+      <label for="framecolor">Rahmenfarbe (Highlight)</label>
-
+      <input type="color" id="framecolor" value="#000000" oninput="generateLink()">
-    function createCardHTML(item) {
+    </div>
-      const isTopRank = item.overallRank === 1 ? 'rank-1' : '';
+
-      
+    <div class="form-group">
-      // Prüfen, ob der Spieler kaizobrothers ist (Case-Insensitive)
+      <label for="fix">User fixieren</label>
-
+      <select id="fix" onchange="generateLink()">
-      const isUser = item.player && item.player.toLowerCase() === currentUser;
+        <option value="">Nicht fixieren (ganz normal scrollen)</option>
-      const highlightClass = isUser ? 'highlight' : '';
+        <option value="left">Links fixieren</option>
-
+        <option value="right">Rechts fixieren</option>
-      return `
+      </select>
-        <div class="player-card ${highlightClass}">
+    </div>
-          <span class="rank-badge ${isTopRank}">#${item.divisionRank ?? '-'}</span>
+
-          <span class="player-name">${item.player}</span>
+    <div class="form-group">
-          <div class="card-info">
+      <label for="fixdivision">Divisions-Karte fixieren</label>
-            <span class="divider">|</span>
+      <select id="fixdivision" onchange="generateLink()">
-            <span>P1: ${item.part1} / P2: ${item.part2}</span>
+        <option value="">Nicht fixieren (mitscrollen)</option>
-            <span class="divider">|</span>
+        <option value="left">Links fixieren</option>
-            <span class="total-time">${item.totalTime}s</span>
+        <option value="right">Rechts fixieren</option>
-          </div>
+      </select>
-        </div>
+    </div>
-      `;
+
-    }
+    <div class="form-group checkbox-group">
-
+      <input type="checkbox" id="showdivision" onchange="generateLink()">
-    function createDivisionCardHTML(divisionName) {
+      <label for="showdivision">Divisions-Icon bei jeder Karte anzeigen</label>
-      return `
+    </div>
-        <div class="player-card division-card">
+	
-          <span class="division-title">DIVISION</span>
+    <div class="form-group checkbox-group">
-          <span class="division-name">${divisionName}</span>
+      <input type="checkbox" id="showtimes" onchange="generateLink()">
-        </div>
+      <label for="showtimes">Part-Zeiten ausblenden</label>
-      `;
+    </div>
-    }
+
-
+    <div class="result-section">
-    function renderTicker(data) {
+      <label>Generierter Link:</label>
-      if (!data || data.length === 0) {
+      <div class="result-box" id="resultLink"></div>
-        ticker.innerHTML = '<div class="player-card">Keine Daten verfügbar</div>';
+      <div class="button-row">
-        return;
+        <button onclick="copyLink()">Link kopieren</button>
-      }
+        <button class="secondary" onclick="openLink()">Testen (Öffnen)</button>
-      ticker.style.animationDuration = `${SPEED_SECONDS}s`;
+      </div>
-
+    </div>
-      // 1. Name der Division ermitteln (z. B. "Master")
+  </div>
-      const divisionName = data[0]?.division || 'Leaderboard';
+
-
+  <script>
-      // 2. Karten HTML-Strings generieren
+    function generateLink() {
-      const divisionCardHTML = createDivisionCardHTML(divisionName);
+      const user = document.getElementById('user').value.trim();
-      const playerCardsHTML = data.map(item => createCardHTML(item)).join('');
+      const speed = document.getElementById('speed').value;
-
+      const fontsize = document.getElementById('fontsize').value;
-      // 3. Zusammenbauen und verdoppeln für den nahtlosen Loop
+      const height = document.getElementById('height').value;
-      const fullSetHTML = divisionCardHTML + playerCardsHTML;
+      const bg = document.getElementById('bg').value.replace('#', '');
-      ticker.innerHTML = fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML; 
+      const framecolor = document.getElementById('framecolor').value.replace('#', '');
-    }
+      const fix = document.getElementById('fix').value;
-
+      const fixdivision = document.getElementById('fixdivision').value;
-    // Die async-Funktion für den API-Aufruf
+      const showdivision = document.getElementById('showdivision').checked;
-    async function loadApiData() {
+      const showtimes = document.getElementById('showtimes').checked;
-      try {
+
-        const response = await fetch(API_URL);
+      // Basis-URL zur ninjiclassic.html im selben Verzeichnis ermitteln
-        
+      const baseUrl = window.location.href.substring(0, window.location.href.lastIndexOf('/') + 1) + 'ninjiclassic.html';
-        if (!response.ok) {
+      
-          throw new Error(`HTTP-Fehler! Status: ${response.status}`);
+      const params = new URLSearchParams();
-        }
+      if (user) params.append('user', user);
-
+      if (speed && speed !== '240') params.append('speed', speed);
-        const json = await response.json();
+      if (height) params.append('height', height);
-
+      if (fontsize) params.append('fontsize', fontsize);
-        // Da die API direkt das Array [ {...}, {...} ] liefert:
+      if (bg && bg !== '00ff00') params.append('bg', bg);
-        const playersList = Array.isArray(json) ? json : (json.data?.leaderboard || []);
+      if (framecolor && framecolor !== '000000') params.append('framecolor', framecolor);
-        
+      if (fix) params.append('fix', fix);
-        renderTicker(playersList);
+      if (fixdivision) params.append('fixdivision', fixdivision);
-
+      if (showdivision) params.append('showdivision', 'true');
-      } catch (err) {
+      if (showtimes) params.append('showtimes', 'false');
-        console.error("Fehler beim Abrufen der API-Daten:", err);
+
-        ticker.innerHTML = `
+      const queryString = params.toString();
-          <div class="player-card" style="border-color: #ef4444;">
+      const finalLink = baseUrl + (queryString ? '?' + queryString : '');
-            <span style="color: #ef4444;">API nicht erreichbar (${err.message})</span>
+
-          </div>
+      document.getElementById('resultLink').innerText = finalLink;
-        `;
+    }
-      }
+
-    }
+    function copyLink() {
-
+      const linkText = document.getElementById('resultLink').innerText;
-    // 1. Erster Aufruf direkt beim Laden der Seite
+      navigator.clipboard.writeText(linkText).then(() => {
-    loadApiData();
+        alert('Link in die Zwischenablage kopiert!');
-
+      });
-    // 2. Automatischer Re-Fetch im Hintergrund
+    }
-    setInterval(loadApiData, REFRESH_INTERVAL);
+
-  </script>
+    function openLink() {
-</body>
+      const linkText = document.getElementById('resultLink').innerText;
-</html>
+      window.open(linkText, '_blank');
+    }
+
+    // Direkt beim Laden ausführen
+    generateLink();
+  </script>
+</body>
+</html>

html/index_alt.html

@@ -0,0 +1,276 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ninji Leaderboard Ticker</title>
+  <style>
+    :root {
+      --bg-color: #0f172a;
+      --card-bg: #1e293b;
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --accent: #38bdf8;
+      --gold: #f59e0b;
+      --highlight-bg: #1e1b4b; /* Dunkles Lila/Blau für kaizobrothers */
+      --highlight-border: #818cf8;
+      --border-color: #334155;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    body {
+      background-color: var(--bg-color);
+      color: var(--text-main);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      overflow: hidden;
+    }
+
+    /* Container für den flachen Ticker */
+    .ticker-wrapper {
+      width: 100%;
+      background: rgba(15, 23, 42, 0);
+      border-top: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--border-color);
+      padding: 8px 0; /* Flachere Höhe */
+      overflow: hidden;
+      white-space: nowrap;
+      position: relative;
+    }
+
+    .ticker-wrapper::before,
+    .ticker-wrapper::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      width: 80px;
+      height: 100%;
+      z-index: 2;
+      pointer-events: none;
+    }
+
+    .ticker-wrapper::before {
+      left: 0;
+      background: linear-gradient(to right, var(--bg-color), transparent);
+    }
+
+    .ticker-wrapper::after {
+      right: 0;
+      background: linear-gradient(to left, var(--bg-color), transparent);
+    }
+
+    .ticker-content {
+      display: inline-flex;
+      gap: 10px;
+      animation: marquee 20s linear infinite;
+    }
+
+    .ticker-wrapper:hover .ticker-content {
+      animation-play-state: paused;
+    }
+
+    /* Kompakte, flache Karte (Einzeiliges Flex-Layout) */
+    .player-card {
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      padding: 6px 14px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 0.9rem;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    }
+
+    /* Spezielles Highlight für kaizobrothers */
+    .player-card.highlight {
+      background: var(--highlight-bg);
+      border-color: var(--highlight-border);
+      box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
+    }
+
+    /* Styling für die Divisions-Karte am Anfang */
+    .player-card.division-card {
+      background: linear-gradient(135deg, #0284c7, #0369a1);
+      border-color: #38bdf8;
+      box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
+      padding: 6px 16px;
+      gap: 8px;
+    }
+
+    .division-title {
+      font-size: 0.75rem;
+      font-weight: 800;
+      letter-spacing: 1px;
+      color: #bae6fd;
+      text-transform: uppercase;
+    }
+
+    .division-name {
+      font-size: 1rem;
+      font-weight: 800;
+      color: #ffffff;
+    }
+
+    .rank-badge {
+      background: var(--border-color);
+      color: var(--accent);
+      font-weight: bold;
+      font-size: 0.8rem;
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+
+    .rank-1 { 
+      background: var(--gold); 
+      color: #000; 
+    }
+
+    .player-name {
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .player-card.highlight .player-name {
+      color: #a5b4fc; /* Heller Violett-Ton für den Namen */
+    }
+
+    .card-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+    }
+
+    .divider {
+      color: var(--border-color);
+    }
+
+    .total-time {
+      color: var(--accent);
+      font-weight: 700;
+    }
+
+    .player-card.highlight .total-time {
+      color: #38bdf8;
+    }
+
+    @keyframes marquee {
+      0% { transform: translateX(0); }
+      100% { transform: translateX(-50%); }
+    }
+  </style>
+</head>
+<body>
+
+  <div class="ticker-wrapper">
+    <div class="ticker-content" id="ticker"></div>
+  </div>
+
+  <script>
+    //
+    const urlParams = new URLSearchParams(window.location.search);
+    const currentUser = (urlParams.get('user') || 'dennsen86').toLowerCase(); 
+    const SPEED_SECONDS = parseInt(urlParams.get('speed') || '20', 10);
+
+
+    const API_URL = 'https://api.kaizobrothers.de/ninjiapi/division/user/' + currentUser;
+    
+    // Intervall für automatische Updates (30 Sekunden)
+    const REFRESH_INTERVAL = 30000; 
+
+    const ticker = document.getElementById('ticker');
+
+    function createCardHTML(item) {
+      const isTopRank = item.overallRank === 1 ? 'rank-1' : '';
+      
+      // Prüfen, ob der Spieler kaizobrothers ist (Case-Insensitive)
+
+      const isUser = item.player && item.player.toLowerCase() === currentUser;
+      const highlightClass = isUser ? 'highlight' : '';
+
+      return `
+        <div class="player-card ${highlightClass}">
+          <span class="rank-badge ${isTopRank}">#${item.divisionRank ?? '-'}</span>
+          <span class="player-name">${item.player}</span>
+          <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>
+        </div>
+      `;
+    }
+
+    function createDivisionCardHTML(divisionName) {
+      return `
+        <div class="player-card division-card">
+          <span class="division-title">DIVISION</span>
+          <span class="division-name">${divisionName}</span>
+        </div>
+      `;
+    }
+
+    function renderTicker(data) {
+      if (!data || data.length === 0) {
+        ticker.innerHTML = '<div class="player-card">Keine Daten verfügbar</div>';
+        return;
+      }
+      ticker.style.animationDuration = `${SPEED_SECONDS}s`;
+
+      // 1. Name der Division ermitteln (z. B. "Master")
+      const divisionName = data[0]?.division || 'Leaderboard';
+
+      // 2. Karten HTML-Strings generieren
+      const divisionCardHTML = createDivisionCardHTML(divisionName);
+      const playerCardsHTML = data.map(item => createCardHTML(item)).join('');
+
+      // 3. Zusammenbauen und verdoppeln für den nahtlosen Loop
+      const fullSetHTML = divisionCardHTML + playerCardsHTML;
+      ticker.innerHTML = fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML; 
+    }
+
+    // Die async-Funktion für den API-Aufruf
+    async function loadApiData() {
+      try {
+        const response = await fetch(API_URL);
+        
+        if (!response.ok) {
+          throw new Error(`HTTP-Fehler! Status: ${response.status}`);
+        }
+
+        const json = await response.json();
+
+        // Da die API direkt das Array [ {...}, {...} ] liefert:
+        const playersList = Array.isArray(json) ? json : (json.data?.leaderboard || []);
+        
+        renderTicker(playersList);
+
+      } catch (err) {
+        console.error("Fehler beim Abrufen der API-Daten:", err);
+        ticker.innerHTML = `
+          <div class="player-card" style="border-color: #ef4444;">
+            <span style="color: #ef4444;">API nicht erreichbar (${err.message})</span>
+          </div>
+        `;
+      }
+    }
+
+    // 1. Erster Aufruf direkt beim Laden der Seite
+    loadApiData();
+
+    // 2. Automatischer Re-Fetch im Hintergrund
+    setInterval(loadApiData, REFRESH_INTERVAL);
+  </script>
+</body>
+</html>

html/ninjiclassic.html

@@ -0,0 +1,383 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ninji Leaderboard Ticker</title>
+  <style>
+    :root {
+      --bg-color: #00ff00;
+      --card-bg: #1e293b;
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --accent: #38bdf8;
+      --gold: #f59e0b;
+      --border-color: #334155;
+      --frame-color: #000000;
+      --font-size: 0.9rem;       
+      --card-padding-v: 6px;     
+      --card-padding-h: 14px;    
+      --icon-size: 28px;         
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    body {
+      background-color: var(--bg-color);
+      color: var(--text-main);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      overflow: hidden;
+    }
+
+    .ticker-main {
+      display: flex;
+      width: 100%;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 10px; 
+      border-top: 0px solid var(--border-color);
+      border-bottom: 0px solid var(--border-color);
+      background: rgba(15, 23, 42, 0);
+    }
+
+    .fixed-container {
+      flex-shrink: 0;
+      z-index: 10;
+      display: flex;
+      gap: 10px;
+    }
+    
+    .fixed-container:empty {
+      display: none;
+    }
+
+    .ticker-wrapper {
+      flex-grow: 1;
+      overflow: hidden;
+      white-space: nowrap;
+      position: relative;
+    }
+
+    .ticker-content {
+      display: inline-flex;
+      gap: 10px;
+      animation: marquee linear infinite; 
+    }
+
+    .ticker-main:hover .ticker-content {
+      animation-play-state: paused;
+    }
+
+    .player-card {
+      background: var(--card-bg); 
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      padding: var(--card-padding-v) var(--card-padding-h);
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: var(--font-size);
+      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); 
+    }
+
+    .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; }
+    .player-card.division-platin   { background: #0e264d; border-color: #1a458b; }
+    .player-card.division-gold     { background: #594401; border-color: #a17b02; }
+    .player-card.division-silver   { background: #2d2d2d; border-color: #5c5c5c; }
+    .player-card.division-bronze   { background: #2f1a03; border-color: #6b3b07; }
+
+    .player-card.highlight {
+      border-color: var(--frame-color) !important;
+      box-shadow: 0 0 0 3px var(--frame-color) !important;
+    }
+
+    .player-card.division-card {
+      padding: var(--card-padding-v) calc(var(--card-padding-h) + 2px);
+      gap: 8px;
+    }
+
+    .division-title {
+      font-size: calc(var(--font-size) * 0.85);
+      font-weight: 800;
+      letter-spacing: 1px;
+      color: #bae6fd;
+      text-transform: uppercase;
+    }
+
+    .division-name {
+      font-size: var(--font-size);
+      font-weight: 800;
+      color: #ffffff;
+    }
+
+    .division-icon-large {
+      width: var(--icon-size);
+      height: var(--icon-size);
+      object-fit: contain;
+    }
+
+    .division-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .rank-badge {
+      background: var(--border-color);
+      color: var(--accent);
+      font-weight: bold;
+      font-size: var(--font-size);
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+
+    .rank-1 { 
+      background: var(--gold); 
+      color: #000; 
+    }
+
+    .player-name {
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .player-card.highlight .player-name {
+      color: #a5b4fc; 
+    }
+
+    .card-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-muted);
+      font-size: var(--font-size);
+    }
+
+    .divider {
+      color: var(--border-color);
+    }
+
+    .total-time {
+      color: var(--accent);
+      font-weight: 700;
+    }
+
+    .player-card.highlight .total-time {
+      color: #38bdf8;
+    }
+
+    @keyframes marquee {
+      0% { transform: translateX(0); }
+      100% { transform: translateX(-50%); }
+    }
+  </style>
+</head>
+<body>
+
+  <div class="ticker-main">
+    <div class="fixed-container" id="fixed-left"></div>
+    
+    <div class="ticker-wrapper">
+      <div class="ticker-content" id="ticker"></div>
+    </div>
+    
+    <div class="fixed-container" id="fixed-right"></div>
+  </div>
+
+  <script>
+    const urlParams = new URLSearchParams(window.location.search);
+    const currentUser = (urlParams.get('user') || 'dennsen86').toLowerCase(); 
+    const SPEED_SECONDS = parseInt(urlParams.get('speed') || '20', 10);
+    const bgColor = urlParams.get('bg'); 
+    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);
+    }
+
+    if (frameColor) {
+      const formattedFrameColor = frameColor.startsWith('#') ? frameColor : `#${frameColor}`;
+      document.documentElement.style.setProperty('--frame-color', formattedFrameColor);
+    }
+
+    const API_URL = 'https://api.kaizobrothers.de/ninjiapi/division/user/' + currentUser;
+    const REFRESH_INTERVAL = 30000; 
+    const ticker = document.getElementById('ticker');
+    const fixedLeft = document.getElementById('fixed-left');
+    const fixedRight = document.getElementById('fixed-right');
+
+    function createCardHTML(item) {
+      const isTopRank = item.overallRank === 1 ? 'rank-1' : '';
+      const isUser = item.player && item.player.toLowerCase() === currentUser;
+      const highlightClass = isUser ? 'highlight' : '';
+      
+      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`;
+
+        return `
+          <div class="player-card ${highlightClass} ${dynamicBgClass}">
+            <img src="${imgPath}" class="division-icon-large" alt="${item.division}" onerror="this.style.display='none'">
+            <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'">
+            ${timesHTML}
+            <img src="${item.grindState}" class="division-icon-large" alt="" onerror="this.style.display='none'">
+          </div>
+        `;
+      }
+
+      return `
+        <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'">
+          ${timesHTML}
+          <img src="${item.grindState}" class="division-icon-large" alt="" onerror="this.style.display='none'">
+        </div>
+      `;
+    }
+
+    function createDivisionCardHTML(divisionName) {
+      const divName = (divisionName || 'master').toLowerCase();
+      const imgPath = `img/${divName}.png`;
+      const dynamicBgClass = `division-${divName}`; 
+
+      return `
+        <div class="player-card division-card ${dynamicBgClass}">
+          <img src="${imgPath}" class="division-icon-large" alt="${divisionName}" onerror="this.style.display='none'">
+          <div class="division-text">
+            <span class="division-name">${divisionName}</span>
+          </div>
+        </div>
+      `;
+    }
+
+    function renderTicker(data) {
+      if (!data || data.length === 0) {
+        ticker.innerHTML = '<div class="player-card">User nicht gefunden bzw. Keine Daten verfügbar</div>';
+        return;
+      }
+
+      let scrollingData = [...data];
+      let leftContentHTML = '';
+      let rightContentHTML = '';
+
+      if (fixPosition === 'left' || fixPosition === 'right') {
+        const userIndex = scrollingData.findIndex(item => item.player && item.player.toLowerCase() === currentUser);
+        if (userIndex !== -1) {
+          const userData = scrollingData.splice(userIndex, 1)[0];
+          const userHTML = createCardHTML(userData);
+          if (fixPosition === 'left') leftContentHTML += userHTML;
+          if (fixPosition === 'right') rightContentHTML += userHTML;
+        }
+      }
+
+      const divisionName = data[0]?.division || 'Leaderboard';
+      const divisionCardHTML = createDivisionCardHTML(divisionName);
+      
+      let includeDivisionInScroll = true;
+      if (fixDivision === 'left' || fixDivision === 'right') {
+        includeDivisionInScroll = false;
+        if (fixDivision === 'left') leftContentHTML = divisionCardHTML + leftContentHTML;
+        if (fixDivision === 'right') rightContentHTML += divisionCardHTML;
+      }
+
+      fixedLeft.innerHTML = leftContentHTML;
+      fixedRight.innerHTML = rightContentHTML;
+
+      const playerCardsHTML = scrollingData.map(item => createCardHTML(item)).join('');
+      const scrollSetHTML = (includeDivisionInScroll ? divisionCardHTML : '') + playerCardsHTML;
+
+      ticker.innerHTML = scrollSetHTML + scrollSetHTML + scrollSetHTML + scrollSetHTML + scrollSetHTML + scrollSetHTML + scrollSetHTML + scrollSetHTML; 
+
+      const activeCardsCount = scrollingData.length + (includeDivisionInScroll ? 1 : 0);
+      const baselineCards = 10; 
+      const calculatedDuration = SPEED_SECONDS * (Math.max(activeCardsCount, 1) / baselineCards);
+      
+      ticker.style.animationDuration = `${calculatedDuration}s`;
+    }
+
+    async function loadApiData() {
+      try {
+        const response = await fetch(API_URL);
+        
+        if (!response.ok) {
+          throw new Error(`HTTP-Fehler! Status: ${response.status}`);
+        }
+
+        const json = await response.json();
+        const playersList = Array.isArray(json) ? json : (json.data?.leaderboard || []);
+        
+        renderTicker(playersList);
+
+      } catch (err) {
+        console.error("Fehler beim Abrufen der API-Daten:", err);
+        ticker.innerHTML = `
+          <div class="player-card" style="border-color: #ef4444;">
+            <span style="color: #ef4444;">API nicht erreichbar (${err.message})</span>
+          </div>
+        `;
+      }
+    }
+
+    loadApiData();
+    setInterval(loadApiData, REFRESH_INTERVAL);
+  </script>
+</body>
+</html>

html/ninjioverlay.html

@@ -0,0 +1,323 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Ninji Leaderboard Ticker</title>
+  <style>
+    :root {
+      --bg-color: #00ff00;
+      --card-bg: #1e293b;
+      --text-main: #f8fafc;
+      --text-muted: #94a3b8;
+      --accent: #38bdf8;
+      --gold: #f59e0b;
+      --highlight-bg: #1e1b4b; /* Dunkles Lila/Blau für kaizobrothers */
+      --highlight-border: #818cf8;
+      --border-color: #334155;
+    }
+
+    * {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    }
+
+    body {
+      background-color: var(--bg-color);
+      color: var(--text-main);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      overflow: hidden;
+    }
+
+    /* Container für den flachen Ticker */
+    .ticker-wrapper {
+      width: 100%;
+      background: rgba(15, 23, 42, 0);
+      border-top: 1px solid var(--border-color);
+      border-bottom: 1px solid var(--border-color);
+      padding: 8px 0; /* Flachere Höhe */
+      overflow: hidden;
+      white-space: nowrap;
+      position: relative;
+    }
+
+    .ticker-wrapper::before,
+    .ticker-wrapper::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      width: 0px;
+      height: 100%;
+      z-index: 2;
+      pointer-events: none;
+    }
+
+    .ticker-wrapper::before {
+      left: 0;
+      background: linear-gradient(to right, var(--bg-color), transparent);
+    }
+
+    .ticker-wrapper::after {
+      right: 0;
+      background: linear-gradient(to left, var(--bg-color), transparent);
+    }
+
+    .ticker-content {
+      display: inline-flex;
+      gap: 10px;
+      animation: marquee 20s linear infinite;
+    }
+
+    .ticker-wrapper:hover .ticker-content {
+      animation-play-state: paused;
+    }
+
+    /* Kompakte, flache Karte (Einzeiliges Flex-Layout) */
+    .player-card {
+      background: var(--card-bg);
+      border: 1px solid var(--border-color);
+      border-radius: 8px;
+      padding: 6px 14px;
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 0.9rem;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    }
+
+    /* Spezielles Highlight für kaizobrothers */
+    .player-card.highlight {
+      background: var(--highlight-bg);
+      border-color: var(--highlight-border);
+      box-shadow: 0 0 10px rgba(129, 140, 248, 0.4);
+    }
+
+    /* Styling für die Divisions-Karte am Anfang */
+    .player-card.division-card {
+      background: linear-gradient(135deg, #0284c7, #0369a1);
+      border-color: #38bdf8;
+      box-shadow: 0 0 12px rgba(56, 189, 248, 0.3);
+      padding: 6px 16px;
+      gap: 8px;
+    }
+
+    .division-title {
+      font-size: 0.75rem;
+      font-weight: 800;
+      letter-spacing: 1px;
+      color: #bae6fd;
+      text-transform: uppercase;
+    }
+
+    .division-name {
+      font-size: 1rem;
+      font-weight: 800;
+      color: #ffffff;
+    }
+
+    .division-icon-large {
+      width: 28px;
+      height: 28px;
+      object-fit: contain;
+    }
+
+    .division-text {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    .rank-badge {
+      background: var(--border-color);
+      color: var(--accent);
+      font-weight: bold;
+      font-size: 0.8rem;
+      padding: 2px 6px;
+      border-radius: 4px;
+    }
+
+    .rank-1 { 
+      background: var(--gold); 
+      color: #000; 
+    }
+
+    .player-name {
+      font-weight: 700;
+      color: var(--text-main);
+    }
+
+    .player-card.highlight .player-name {
+      color: #a5b4fc; /* Heller Violett-Ton für den Namen */
+    }
+
+    .card-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--text-muted);
+      font-size: 0.85rem;
+    }
+
+    .divider {
+      color: var(--border-color);
+    }
+
+    .total-time {
+      color: var(--accent);
+      font-weight: 700;
+    }
+
+    .player-card.highlight .total-time {
+      color: #38bdf8;
+    }
+
+    @keyframes marquee {
+      0% { transform: translateX(0); }
+      100% { transform: translateX(-50%); }
+    }
+  </style>
+</head>
+<body>
+
+  <div class="ticker-wrapper">
+    <div class="ticker-content" id="ticker"></div>
+  </div>
+
+  <script>
+    //
+    const urlParams = new URLSearchParams(window.location.search);
+    const currentUser = (urlParams.get('user') || 'dennsen86').toLowerCase(); 
+    const SPEED_SECONDS = parseInt(urlParams.get('speed') || '20', 10);
+
+
+    const bgColor = urlParams.get('bg'); // Liest z. B. ?bg=ff0000 oder ?bg=000000
+
+    const divisionEveryCard = urlParams.get('showdivision'); // Liest z. B. ?bg=ff0000 oder ?bg=000000
+
+    if (bgColor) {
+      // Fügt bei Bedarf ein '#' hinzu, falls der Hex-Code ohne übergeben wurde
+      const formattedColor = bgColor.startsWith('#') ? bgColor : `#${bgColor}`;
+    
+      // Überschreibt --bg-color direkt auf :root Level
+      document.documentElement.style.setProperty('--bg-color', formattedColor);
+    }
+
+    const API_URL = 'https://api.kaizobrothers.de/ninjiapi/division/user/' + currentUser;
+    
+    // Intervall für automatische Updates (30 Sekunden)
+    const REFRESH_INTERVAL = 30000; 
+
+    const ticker = document.getElementById('ticker');
+
+    function createCardHTML(item) {
+      const isTopRank = item.overallRank === 1 ? 'rank-1' : '';
+
+      const isUser = item.player && item.player.toLowerCase() === currentUser;
+      const highlightClass = isUser ? 'highlight' : '';
+
+      if (divisionEveryCard) {
+        // 1. Division aus dem Spieler-Objekt 'item' holen und kleinschreiben
+        const divName = (item.division || 'master').toLowerCase();
+        const imgPath = `img/${divName}.png`;
+
+        return `
+          <div class="player-card ${highlightClass}">
+            <img src="${imgPath}" class="division-icon-large" alt="${item.division}" onerror="this.style.display='none'">
+            <span class="rank-badge ${isTopRank}">#${item.divisionRank ?? '-'}</span>
+            <span class="player-name">${item.player}</span>
+            <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>
+          </div>
+        `;
+      }
+
+      return `
+        <div class="player-card ${highlightClass}">
+          <span class="rank-badge ${isTopRank}">#${item.divisionRank ?? '-'}</span>
+          <span class="player-name">${item.player}</span>
+          <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>
+        </div>
+      `;
+    }
+    function createDivisionCardHTML(divisionName) {
+      const divName = (divisionName || 'master').toLowerCase();
+      const imgPath = `img/${divName}.png`;
+
+      return `
+        <div class="player-card division-card">
+          <img src="${imgPath}" class="division-icon-large" alt="${divisionName}" onerror="this.style.display='none'">
+          <div class="division-text">
+            <!-- <span class="division-title">DIVISION</span> -->
+            <span class="division-name">${divisionName}</span>
+          </div>
+        </div>
+      `;
+    }
+
+    function renderTicker(data) {
+      if (!data || data.length === 0) {
+        ticker.innerHTML = '<div class="player-card">Keine Daten verfügbar</div>';
+        return;
+      }
+      ticker.style.animationDuration = `${SPEED_SECONDS}s`;
+
+      // 1. Name der Division ermitteln (z. B. "Master")
+      const divisionName = data[0]?.division || 'Leaderboard';
+
+      // 2. Karten HTML-Strings generieren
+      const divisionCardHTML = createDivisionCardHTML(divisionName);
+      const playerCardsHTML = data.map(item => createCardHTML(item)).join('');
+
+      // 3. Zusammenbauen und verdoppeln für den nahtlosen Loop
+      const fullSetHTML = divisionCardHTML + playerCardsHTML;
+      ticker.innerHTML = fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML + fullSetHTML; 
+    }
+
+    // Die async-Funktion für den API-Aufruf
+    async function loadApiData() {
+      try {
+        const response = await fetch(API_URL);
+        
+        if (!response.ok) {
+          throw new Error(`HTTP-Fehler! Status: ${response.status}`);
+        }
+
+        const json = await response.json();
+
+        // Da die API direkt das Array [ {...}, {...} ] liefert:
+        const playersList = Array.isArray(json) ? json : (json.data?.leaderboard || []);
+        
+        renderTicker(playersList);
+
+      } catch (err) {
+        console.error("Fehler beim Abrufen der API-Daten:", err);
+        ticker.innerHTML = `
+          <div class="player-card" style="border-color: #ef4444;">
+            <span style="color: #ef4444;">API nicht erreichbar (${err.message})</span>
+          </div>
+        `;
+      }
+    }
+
+    // 1. Erster Aufruf direkt beim Laden der Seite
+    loadApiData();
+
+    // 2. Automatischer Re-Fetch im Hintergrund
+    setInterval(loadApiData, REFRESH_INTERVAL);
+  </script>
+</body>
+</html>

twitch_state.json

@@ -0,0 +1 @@
+{"Haipeee": "https://i.ibb.co/mzVnwcP/Mario.png", "Jlpeazy": "https://i.ibb.co/mzVnwcP/Mario.png", "ShadowsTakeFall": "https://i.ibb.co/mzVnwcP/Mario.png"}