Screenshot + LESS-Migration: style.css → style.less, Build-Skript, Doku-Update
This commit is contained in:
2
.gitignore
vendored
2
.gitignore
vendored
@@ -2,3 +2,5 @@ cache/
|
|||||||
__pycache__/
|
__pycache__/
|
||||||
*.pyc
|
*.pyc
|
||||||
lara-chess/
|
lara-chess/
|
||||||
|
node_modules/
|
||||||
|
package-lock.json
|
||||||
|
|||||||
@@ -2,6 +2,8 @@
|
|||||||
|
|
||||||
Live-Überwachung von Lara Kiesewetters Partien bei der **ODJM (Offene Deutsche Jugendmeisterschaft)** 2026. Die App lädt automatisch PGN-Daten von der Deutschen Schachjugend, zeigt das aktuelle Spielbrett an und listet alle Partien von Lara.
|
Live-Überwachung von Lara Kiesewetters Partien bei der **ODJM (Offene Deutsche Jugendmeisterschaft)** 2026. Die App lädt automatisch PGN-Daten von der Deutschen Schachjugend, zeigt das aktuelle Spielbrett an und listet alle Partien von Lara.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
- **Live-Brett** – Visuelle Darstellung der aktuellen Partie mit chessboard.js
|
- **Live-Brett** – Visuelle Darstellung der aktuellen Partie mit chessboard.js
|
||||||
|
|||||||
29
build-less.js
Normal file
29
build-less.js
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
const less = require('less');
|
||||||
|
const fs = require('fs');
|
||||||
|
const path = require('path');
|
||||||
|
|
||||||
|
const src = path.join(__dirname, 'style.less');
|
||||||
|
const dest = path.join(__dirname, 'style.css');
|
||||||
|
|
||||||
|
fs.readFile(src, 'utf8', (err, data) => {
|
||||||
|
if (err) {
|
||||||
|
console.error('[LESS] Fehler beim Lesen:', err.message);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
less.render(data, {
|
||||||
|
filename: src,
|
||||||
|
compress: false,
|
||||||
|
sourceMap: false,
|
||||||
|
}).then(output => {
|
||||||
|
fs.writeFile(dest, output.css, 'utf8', err => {
|
||||||
|
if (err) {
|
||||||
|
console.error('[LESS] Fehler beim Schreiben:', err.message);
|
||||||
|
process.exit(1);
|
||||||
|
}
|
||||||
|
console.log('[LESS] style.less → style.css erfolgreich kompiliert');
|
||||||
|
});
|
||||||
|
}).catch(err => {
|
||||||
|
console.error('[LESS] Kompilierungsfehler:', err.message);
|
||||||
|
process.exit(1);
|
||||||
|
});
|
||||||
|
});
|
||||||
13
eslint.config.mjs
Normal file
13
eslint.config.mjs
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
import js from "@eslint/js";
|
||||||
|
import globals from "globals";
|
||||||
|
import json from "@eslint/json";
|
||||||
|
import markdown from "@eslint/markdown";
|
||||||
|
import css from "@eslint/css";
|
||||||
|
import { defineConfig } from "eslint/config";
|
||||||
|
|
||||||
|
export default defineConfig([
|
||||||
|
{ files: ["**/*.{js,mjs,cjs}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },
|
||||||
|
{ files: ["**/*.json"], plugins: { json }, language: "json/json", extends: ["json/recommended"] },
|
||||||
|
{ files: ["**/*.md"], plugins: { markdown }, language: "markdown/commonmark", extends: ["markdown/recommended"] },
|
||||||
|
{ files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
|
||||||
|
]);
|
||||||
14
package.json
Normal file
14
package.json
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"scripts": {
|
||||||
|
"build:css": "node build-less.js"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@eslint/css": "^1.2.0",
|
||||||
|
"@eslint/js": "^10.0.1",
|
||||||
|
"@eslint/json": "^1.2.0",
|
||||||
|
"@eslint/markdown": "^8.0.2",
|
||||||
|
"eslint": "^10.4.0",
|
||||||
|
"globals": "^17.6.0",
|
||||||
|
"less": "^4.6.4"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
screenshot.png
Normal file
BIN
screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 323 KiB |
13
server.py
13
server.py
@@ -7,6 +7,7 @@ Serviert statische Dateien direkt.
|
|||||||
import http.server
|
import http.server
|
||||||
import socketserver
|
import socketserver
|
||||||
import os
|
import os
|
||||||
|
import subprocess
|
||||||
|
|
||||||
PORT = int(os.environ.get("PORT", 8111))
|
PORT = int(os.environ.get("PORT", 8111))
|
||||||
|
|
||||||
@@ -21,6 +22,7 @@ class StaticHandler(http.server.BaseHTTPRequestHandler):
|
|||||||
content_types = {
|
content_types = {
|
||||||
".html": "text/html",
|
".html": "text/html",
|
||||||
".css": "text/css",
|
".css": "text/css",
|
||||||
|
".less": "text/css",
|
||||||
".js": "application/javascript",
|
".js": "application/javascript",
|
||||||
".json": "application/json",
|
".json": "application/json",
|
||||||
".png": "image/png",
|
".png": "image/png",
|
||||||
@@ -46,6 +48,17 @@ class StaticHandler(http.server.BaseHTTPRequestHandler):
|
|||||||
print(f"[{self.log_date_time_string()}] {args[0]}")
|
print(f"[{self.log_date_time_string()}] {args[0]}")
|
||||||
|
|
||||||
def main():
|
def main():
|
||||||
|
# LESS → CSS beim Serverstart kompilieren
|
||||||
|
print("[BUILD] Kompiliere style.less -> style.css ...")
|
||||||
|
try:
|
||||||
|
result = subprocess.run(["node", "build-less.js"], capture_output=True, text=True, cwd=os.path.dirname(os.path.abspath(__file__)))
|
||||||
|
if result.returncode == 0:
|
||||||
|
print(f"[BUILD] {result.stdout.strip()}")
|
||||||
|
else:
|
||||||
|
print(f"[BUILD] FEHLER: {result.stderr.strip()}")
|
||||||
|
except FileNotFoundError:
|
||||||
|
print("[BUILD] node nicht gefunden – überspringe LESS-Kompilierung")
|
||||||
|
|
||||||
print("=" * 50)
|
print("=" * 50)
|
||||||
print(" [TROPHY] Lara Kiesewetter – Live Schachturnier")
|
print(" [TROPHY] Lara Kiesewetter – Live Schachturnier")
|
||||||
print("=" * 50)
|
print("=" * 50)
|
||||||
|
|||||||
592
style.css
592
style.css
@@ -1,442 +1,390 @@
|
|||||||
* {
|
* {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||||
color: #e0e0e0;
|
color: #e0e0e0;
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
header {
|
header {
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
padding: 16px 24px;
|
padding: 16px 24px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
border-bottom: 2px solid #e94560;
|
border-bottom: 2px solid #e94560;
|
||||||
}
|
}
|
||||||
|
|
||||||
header h1 {
|
header h1 {
|
||||||
font-size: 1.5rem;
|
font-size: 1.5rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
text-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
|
text-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
|
||||||
}
|
}
|
||||||
|
|
||||||
#status-bar {
|
#status-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 16px;
|
gap: 16px;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
|
#last-update,
|
||||||
#last-update, #refresh-timer {
|
#refresh-timer {
|
||||||
font-family: 'Courier New', monospace;
|
font-family: 'Courier New', monospace;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
color: #4ade80;
|
color: #4ade80;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
padding: 4px 10px;
|
padding: 4px 10px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
border: 1px solid rgba(74, 222, 128, 0.2);
|
border: 1px solid rgba(74, 222, 128, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
#refresh-btn {
|
#refresh-btn {
|
||||||
background: #e94560;
|
background: #e94560;
|
||||||
border: none;
|
border: none;
|
||||||
color: white;
|
color: white;
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
transition: transform 0.3s, background 0.3s;
|
transition: transform 0.3s, background 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#refresh-btn:hover {
|
#refresh-btn:hover {
|
||||||
background: #ff6b6b;
|
background: #ff6b6b;
|
||||||
transform: rotate(180deg);
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
#main-content {
|
#main-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 24px;
|
gap: 24px;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
max-width: 1400px;
|
max-width: 1400px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Board Section */
|
/* Board Section */
|
||||||
#board-section {
|
#board-section {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-info {
|
.player-info {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
background: rgba(0, 0, 0, 0.3);
|
background: rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
border: 2px solid transparent;
|
border: 2px solid transparent;
|
||||||
transition: border-color 0.3s, box-shadow 0.3s;
|
transition: border-color 0.3s, box-shadow 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-info.active {
|
.player-info.active {
|
||||||
border-color: #e94560;
|
border-color: #e94560;
|
||||||
box-shadow: 0 0 15px rgba(233, 69, 96, 0.3);
|
box-shadow: 0 0 15px rgba(233, 69, 96, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-avatar {
|
.player-avatar {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
width: 48px;
|
width: 48px;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-details {
|
.player-details {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 2px;
|
gap: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-name {
|
.player-name {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-elo {
|
.player-elo {
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.player-clock {
|
.player-clock {
|
||||||
font-family: 'Courier New', monospace;
|
font-family: 'Courier New', monospace;
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background: rgba(0, 0, 0, 0.5);
|
background: rgba(0, 0, 0, 0.5);
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
min-width: 100px;
|
min-width: 100px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #4ade80;
|
color: #4ade80;
|
||||||
}
|
}
|
||||||
|
|
||||||
#board {
|
#board {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#pgn-panel {
|
#pgn-panel {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 500px;
|
max-width: 500px;
|
||||||
background: rgba(0, 0, 0, 0.3);
|
background: rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
padding: 12px 16px;
|
padding: 12px 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pgn-header {
|
.pgn-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
color: #e94560;
|
color: #e94560;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#copy-pgn-btn {
|
#copy-pgn-btn {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
border: none;
|
border: none;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
width: 32px;
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#copy-pgn-btn:hover {
|
#copy-pgn-btn:hover {
|
||||||
background: rgba(255, 255, 255, 0.2);
|
background: rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
#pgn-text {
|
#pgn-text {
|
||||||
font-family: 'Courier New', monospace;
|
font-family: 'Courier New', monospace;
|
||||||
font-size: 0.78rem;
|
font-size: 0.78rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
max-height: 160px;
|
max-height: 160px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
padding: 8px;
|
padding: 8px;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
user-select: text;
|
user-select: text;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Info Section */
|
/* Info Section */
|
||||||
#info-section {
|
#info-section {
|
||||||
flex: 0 0 380px;
|
flex: 0 0 380px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#game-info h2 {
|
#game-info h2 {
|
||||||
font-size: 1.3rem;
|
font-size: 1.3rem;
|
||||||
color: #e94560;
|
color: #e94560;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#result-info {
|
#result-info {
|
||||||
font-size: 1.1rem;
|
font-size: 1.1rem;
|
||||||
padding: 8px 12px;
|
padding: 8px 12px;
|
||||||
background: rgba(0, 0, 0, 0.3);
|
background: rgba(0, 0, 0, 0.3);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
#moves-panel,
|
||||||
#moves-panel, #all-games-panel, #standings-panel {
|
#all-games-panel,
|
||||||
background: rgba(0, 0, 0, 0.3);
|
#standings-panel {
|
||||||
border-radius: 12px;
|
background: rgba(0, 0, 0, 0.3);
|
||||||
padding: 16px;
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
}
|
}
|
||||||
|
#moves-panel h3,
|
||||||
#moves-panel h3, #all-games-panel h3, #standings-panel h3 {
|
#all-games-panel h3,
|
||||||
margin-bottom: 12px;
|
#standings-panel h3 {
|
||||||
color: #e94560;
|
margin-bottom: 12px;
|
||||||
font-size: 1rem;
|
color: #e94560;
|
||||||
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#standings-content {
|
#standings-content {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
line-height: 1.6;
|
line-height: 1.6;
|
||||||
}
|
}
|
||||||
|
|
||||||
#standings-content .standings-loading {
|
#standings-content .standings-loading {
|
||||||
color: #888;
|
color: #888;
|
||||||
font-style: italic;
|
font-style: italic;
|
||||||
}
|
}
|
||||||
|
|
||||||
.standings-row {
|
.standings-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
}
|
}
|
||||||
|
|
||||||
.standings-row:last-child {
|
.standings-row:last-child {
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.standings-label {
|
.standings-label {
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
.standings-value {
|
.standings-value {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.standings-rank {
|
.standings-rank {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #e94560;
|
color: #e94560;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.standings-rank-label {
|
.standings-rank-label {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: #888;
|
color: #888;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.standings-header {
|
.standings-header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
color: #ffd700;
|
color: #ffd700;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#moves-list {
|
#moves-list {
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
font-family: 'Courier New', monospace;
|
font-family: 'Courier New', monospace;
|
||||||
font-size: 0.95rem;
|
font-size: 0.95rem;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
gap: 4px;
|
gap: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#moves-list .move-number {
|
#moves-list .move-number {
|
||||||
color: #888;
|
color: #888;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#moves-list .move {
|
#moves-list .move {
|
||||||
color: #e0e0e0;
|
color: #e0e0e0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
#moves-list .move:hover {
|
#moves-list .move:hover {
|
||||||
background: rgba(233, 69, 96, 0.3);
|
background: rgba(233, 69, 96, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
#moves-list .move.current {
|
#moves-list .move.current {
|
||||||
background: #e94560;
|
background: #e94560;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
#moves-list .lara-move {
|
#moves-list .lara-move {
|
||||||
color: #ffd700;
|
color: #ffd700;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
#moves-list .opp-move {
|
#moves-list .opp-move {
|
||||||
color: #aaa;
|
color: #aaa;
|
||||||
}
|
}
|
||||||
|
|
||||||
#all-games-list {
|
#all-games-list {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-entry {
|
.game-entry {
|
||||||
padding: 10px 12px;
|
padding: 10px 12px;
|
||||||
background: rgba(255, 255, 255, 0.05);
|
background: rgba(255, 255, 255, 0.05);
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: background 0.2s;
|
transition: background 0.2s;
|
||||||
border-left: 3px solid transparent;
|
border-left: 3px solid transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-entry:hover {
|
.game-entry:hover {
|
||||||
background: rgba(255, 255, 255, 0.1);
|
background: rgba(255, 255, 255, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-entry.active {
|
.game-entry.active {
|
||||||
border-left-color: #e94560;
|
border-left-color: #e94560;
|
||||||
background: rgba(233, 69, 96, 0.15);
|
background: rgba(233, 69, 96, 0.15);
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-entry .game-round {
|
.game-entry .game-round {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #e94560;
|
color: #e94560;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-entry .game-players {
|
.game-entry .game-players {
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
color: #ccc;
|
color: #ccc;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.game-entry .game-result {
|
.game-entry .game-result {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
color: #888;
|
color: #888;
|
||||||
margin-top: 2px;
|
margin-top: 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Overlays */
|
/* Overlays */
|
||||||
#loading-overlay, #error-overlay {
|
#loading-overlay,
|
||||||
position: fixed;
|
#error-overlay {
|
||||||
top: 0;
|
position: fixed;
|
||||||
left: 0;
|
top: 0;
|
||||||
width: 100%;
|
left: 0;
|
||||||
height: 100%;
|
width: 100%;
|
||||||
background: rgba(26, 26, 46, 0.95);
|
height: 100%;
|
||||||
display: flex;
|
background: rgba(26, 26, 46, 0.95);
|
||||||
flex-direction: column;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
justify-content: center;
|
align-items: center;
|
||||||
z-index: 1000;
|
justify-content: center;
|
||||||
gap: 16px;
|
z-index: 1000;
|
||||||
|
gap: 16px;
|
||||||
}
|
}
|
||||||
|
#loading-overlay p,
|
||||||
#loading-overlay p, #error-overlay p {
|
#error-overlay p {
|
||||||
font-size: 1.2rem;
|
font-size: 1.2rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
#error-overlay button {
|
#error-overlay button {
|
||||||
padding: 10px 24px;
|
padding: 10px 24px;
|
||||||
background: #e94560;
|
background: #e94560;
|
||||||
color: white;
|
color: white;
|
||||||
border: none;
|
border: none;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.spinner {
|
.spinner {
|
||||||
width: 50px;
|
width: 50px;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
border: 4px solid rgba(233, 69, 96, 0.3);
|
border: 4px solid rgba(233, 69, 96, 0.3);
|
||||||
border-top-color: #e94560;
|
border-top-color: #e94560;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
animation: spin 0.8s linear infinite;
|
animation: spin 0.8s linear infinite;
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes spin {
|
@keyframes spin {
|
||||||
to { transform: rotate(360deg); }
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Scrollbar */
|
/* Scrollbar */
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
width: 6px;
|
width: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-track {
|
::-webkit-scrollbar-track {
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
::-webkit-scrollbar-thumb {
|
::-webkit-scrollbar-thumb {
|
||||||
background: #e94560;
|
background: #e94560;
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive */
|
/* Responsive */
|
||||||
@media (max-width: 900px) {
|
@media (max-width: 900px) {
|
||||||
#main-content {
|
#main-content {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
#info-section {
|
||||||
#info-section {
|
flex: none;
|
||||||
flex: none;
|
width: 100%;
|
||||||
width: 100%;
|
max-width: 500px;
|
||||||
max-width: 500px;
|
}
|
||||||
}
|
header h1 {
|
||||||
|
font-size: 1.2rem;
|
||||||
header h1 {
|
}
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
454
style.less
Normal file
454
style.less
Normal file
@@ -0,0 +1,454 @@
|
|||||||
|
// Farbvariablen
|
||||||
|
@primary: #e94560;
|
||||||
|
@primary-glow: rgba(233, 69, 96, 0.3);
|
||||||
|
@bg-dark: rgba(0, 0, 0, 0.3);
|
||||||
|
@bg-darker: rgba(0, 0, 0, 0.4);
|
||||||
|
@text-muted: #aaa;
|
||||||
|
@text-light: #e0e0e0;
|
||||||
|
@text-white: #fff;
|
||||||
|
@accent-green: #4ade80;
|
||||||
|
@gold: #ffd700;
|
||||||
|
@font-mono: 'Courier New', monospace;
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
|
||||||
|
color: @text-light;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
header {
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
padding: 16px 24px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 12px;
|
||||||
|
border-bottom: 2px solid @primary;
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
color: @text-white;
|
||||||
|
text-shadow: 0 0 10px rgba(233, 69, 96, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#status-bar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 16px;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: @text-muted;
|
||||||
|
}
|
||||||
|
|
||||||
|
#last-update, #refresh-timer {
|
||||||
|
font-family: @font-mono;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: @accent-green;
|
||||||
|
background: @bg-darker;
|
||||||
|
padding: 4px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid rgba(74, 222, 128, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#refresh-btn {
|
||||||
|
background: @primary;
|
||||||
|
border: none;
|
||||||
|
color: white;
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
transition: transform 0.3s, background 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #ff6b6b;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#main-content {
|
||||||
|
display: flex;
|
||||||
|
gap: 24px;
|
||||||
|
padding: 24px;
|
||||||
|
max-width: 1400px;
|
||||||
|
margin: 0 auto;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Board Section */
|
||||||
|
#board-section {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-info {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
background: @bg-dark;
|
||||||
|
border-radius: 12px;
|
||||||
|
border: 2px solid transparent;
|
||||||
|
transition: border-color 0.3s, box-shadow 0.3s;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-color: @primary;
|
||||||
|
box-shadow: 0 0 15px @primary-glow;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-avatar {
|
||||||
|
font-size: 2rem;
|
||||||
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 50%;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-details {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-name {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.1rem;
|
||||||
|
color: @text-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-elo {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: @text-muted;
|
||||||
|
}
|
||||||
|
|
||||||
|
.player-clock {
|
||||||
|
font-family: @font-mono;
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: bold;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
padding: 6px 12px;
|
||||||
|
border-radius: 8px;
|
||||||
|
min-width: 100px;
|
||||||
|
text-align: center;
|
||||||
|
color: @accent-green;
|
||||||
|
}
|
||||||
|
|
||||||
|
#board {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pgn-panel {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
background: @bg-dark;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 12px 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pgn-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: @primary;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 0.9rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#copy-pgn-btn {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border: none;
|
||||||
|
color: #ccc;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: background 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#pgn-text {
|
||||||
|
font-family: @font-mono;
|
||||||
|
font-size: 0.78rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
color: @text-muted;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-all;
|
||||||
|
max-height: 160px;
|
||||||
|
overflow-y: auto;
|
||||||
|
padding: 8px;
|
||||||
|
background: @bg-darker;
|
||||||
|
border-radius: 6px;
|
||||||
|
user-select: text;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Info Section */
|
||||||
|
#info-section {
|
||||||
|
flex: 0 0 380px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#game-info h2 {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
color: @primary;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#result-info {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
padding: 8px 12px;
|
||||||
|
background: @bg-dark;
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#moves-panel, #all-games-panel, #standings-panel {
|
||||||
|
background: @bg-dark;
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 16px;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
margin-bottom: 12px;
|
||||||
|
color: @primary;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#standings-content {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
|
||||||
|
.standings-loading {
|
||||||
|
color: #888;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.standings-row {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 6px 0;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.standings-label {
|
||||||
|
color: @text-muted;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standings-value {
|
||||||
|
color: @text-white;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standings-rank {
|
||||||
|
font-size: 2rem;
|
||||||
|
font-weight: bold;
|
||||||
|
color: @primary;
|
||||||
|
text-align: center;
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standings-rank-label {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #888;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.standings-header {
|
||||||
|
text-align: center;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: @gold;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#moves-list {
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: auto;
|
||||||
|
font-family: @font-mono;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.8;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 4px;
|
||||||
|
|
||||||
|
.move-number {
|
||||||
|
color: #888;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.move {
|
||||||
|
color: @text-light;
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: @primary-glow;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.current {
|
||||||
|
background: @primary;
|
||||||
|
color: @text-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.lara-move {
|
||||||
|
color: @gold;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.opp-move {
|
||||||
|
color: @text-muted;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#all-games-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-entry {
|
||||||
|
padding: 10px 12px;
|
||||||
|
background: rgba(255, 255, 255, 0.05);
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: background 0.2s;
|
||||||
|
border-left: 3px solid transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
border-left-color: @primary;
|
||||||
|
background: rgba(233, 69, 96, 0.15);
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-round {
|
||||||
|
font-weight: bold;
|
||||||
|
color: @primary;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-players {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
color: #ccc;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.game-result {
|
||||||
|
font-size: 0.8rem;
|
||||||
|
color: #888;
|
||||||
|
margin-top: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Overlays */
|
||||||
|
#loading-overlay, #error-overlay {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(26, 26, 46, 0.95);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 1000;
|
||||||
|
gap: 16px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#error-overlay button {
|
||||||
|
padding: 10px 24px;
|
||||||
|
background: @primary;
|
||||||
|
color: white;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.spinner {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border: 4px solid @primary-glow;
|
||||||
|
border-top-color: @primary;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: spin 0.8s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to { transform: rotate(360deg); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollbar */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background: @primary;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Responsive */
|
||||||
|
@media (max-width: 900px) {
|
||||||
|
#main-content {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#info-section {
|
||||||
|
flex: none;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
header h1 {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user