Add skeuomorphic modern style support

AGENTS.md

@@ -0,0 +1,80 @@
+# CLAUDE.md
+
+This file provides guidance to AI coding agents when working with code in this repository.
+
+## Project Overview
+
+Lutris Year in Review is a Python script that generates a static HTML playtime report from a Lutris gaming platform SQLite database. The report displays game playtime statistics with interactive Chart.js visualizations.
+
+## Commands
+
+Generate report with defaults:
+```bash
+python generate_report.py
+```
+
+Generate report with modern style:
+```bash
+python generate_report.py --style glassmorphism --output report.html
+python generate_report.py --style brutalism --output report.html
+python generate_report.py --style skeuo --output report.html
+python generate_report.py --style neumorphism --output report.html
+python generate_report.py --style material --output report.html
+python generate_report.py --style flat --output report.html
+python generate_report.py --style synthwave --output report.html
+python generate_report.py --style vaporwave --output report.html
+python generate_report.py --style terminal --output report.html
+python generate_report.py --style highcontrast --output report.html
+```
+
+Generate report with legacy Platinum template:
+```bash
+python generate_report.py --template templates/platinum.html --output report.html
+```
+
+All options:
+```bash
+python generate_report.py --db pga.db --output report.html --top 10 --background background.png --style glassmorphism
+```
+
+## Architecture
+
+**Report generator (`generate_report.py`):**
+- Reads Lutris SQLite database (`pga.db`) containing games, categories, and playtime data
+- Embeds all data (games JSON, background image as base64) directly into a self-contained HTML file
+- Loads HTML template from `templates/` folder (default: `templates/platinum.html`)
+
+**HTML templates (`templates/`):**
+- **modern.html**: Unified template for modern styles (brutalism, glassmorphism, skeuo, neumorphism, material, flat, synthwave, vaporwave, terminal, highcontrast)
+- **platinum.html**: Legacy Mac OS 9 Platinum visual style (separate template due to unique structure)
+- All templates use Chart.js doughnut charts and dynamic JavaScript filtering
+- Placeholder tokens like `__ALL_GAMES__`, `__BACKGROUND_IMAGE__` are replaced at generation time
+- Modern templates support light/dark/auto theme toggle button
+
+**Style system (`styles.py`):**
+- CSS definitions for each modern style (brutalism, glassmorphism, skeuo, neumorphism, material, flat, synthwave, vaporwave, terminal, highcontrast)
+- Theme configurations (colors, fonts, chart options) injected via `__THEME_CSS__`
+- Use `--style` argument to select a modern style instead of `--template`
+
+**Javascript (`templates/script.js`):**
+- A single common script is used for each modern style (brutalism, glassmorphism, skeuo, neumorphism, material, flat, synthwave, vaporwave, terminal, highcontrast)
+- Theme configurations (colors, fonts, chart options) injected via `__THEME_CONFIG__`
+- Data inserted via `__ALL_GAMES__` and `__TOP_N__`
+
+**Database schema (`schema.py`):**
+- Reference file documenting Lutris database structure
+- Key tables: `games` (with `playtime`, `service` fields), `categories`, `games_categories` (many-to-many join)
+
+**Generated output (`report.html`):**
+- Fully static, can be hosted on any web server
+- Client-side filtering by service (Steam, GOG, itch.io, local)
+- Expandable "Others" row in games table
+- Light/dark/auto theme toggle button with persistent preference
+- Responsive design for mobile and desktop
+
+## Key Data Relationships
+
+- Games have a `service` field (steam, gog, itchio, humblebundle, or NULL for local)
+- Games link to categories via `games_categories` join table
+- Categories like `.hidden` and `favorite` are filtered out in the report display
+- `playtime` is cumulative hours (REAL), not per-session data

CLAUDE.md

@@ -1,79 +1 @@
-# CLAUDE.md
+@AGENTS.md
-
-This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
-
-## Project Overview
-
-Lutris Year in Review is a Python script that generates a static HTML playtime report from a Lutris gaming platform SQLite database. The report displays game playtime statistics with interactive Chart.js visualizations.
-
-## Commands
-
-Generate report with defaults:
-```bash
-python generate_report.py
-```
-
-Generate report with modern style:
-```bash
-python generate_report.py --style glassmorphism --output report.html
-python generate_report.py --style brutalism --output report.html
-python generate_report.py --style neumorphism --output report.html
-python generate_report.py --style material --output report.html
-python generate_report.py --style flat --output report.html
-python generate_report.py --style synthwave --output report.html
-python generate_report.py --style vaporwave --output report.html
-python generate_report.py --style terminal --output report.html
-python generate_report.py --style highcontrast --output report.html
-```
-
-Generate report with legacy Platinum template:
-```bash
-python generate_report.py --template templates/platinum.html --output report.html
-```
-
-All options:
-```bash
-python generate_report.py --db pga.db --output report.html --top 10 --background background.png --style glassmorphism
-```
-
-## Architecture
-
-**Report generator (`generate_report.py`):**
-- Reads Lutris SQLite database (`pga.db`) containing games, categories, and playtime data
-- Embeds all data (games JSON, background image as base64) directly into a self-contained HTML file
-- Loads HTML template from `templates/` folder (default: `templates/platinum.html`)
-
-**HTML templates (`templates/`):**
-- **modern.html**: Unified template for modern styles (brutalism, glassmorphism, neumorphism, material, flat, synthwave, vaporwave, terminal, highcontrast)
-- **platinum.html**: Legacy Mac OS 9 Platinum visual style (separate template due to unique structure)
-- All templates use Chart.js doughnut charts and dynamic JavaScript filtering
-- Placeholder tokens like `__ALL_GAMES__`, `__BACKGROUND_IMAGE__` are replaced at generation time
-- Modern templates support light/dark/auto theme toggle button
-
-**Style system (`styles.py`):**
-- CSS definitions for each modern style (brutalism, glassmorphism, neumorphism, material, flat, synthwave, vaporwave, terminal, highcontrast)
-- Theme configurations (colors, fonts, chart options) injected via `__THEME_CSS__`
-- Use `--style` argument to select a modern style instead of `--template`
-
-**Javascript (`templates/script.js`):**
-- A single common script is used for each modern style (brutalism, glassmorphism, neumorphism, material, flat, synthwave, vaporwave, terminal, highcontrast)
-- Theme configurations (colors, fonts, chart options) injected via `__THEME_CONFIG__`
-- Data inserted via `__ALL_GAMES__` and `__TOP_N__`
-
-**Database schema (`schema.py`):**
-- Reference file documenting Lutris database structure
-- Key tables: `games` (with `playtime`, `service` fields), `categories`, `games_categories` (many-to-many join)
-
-**Generated output (`report.html`):**
-- Fully static, can be hosted on any web server
-- Client-side filtering by service (Steam, GOG, itch.io, local)
-- Expandable "Others" row in games table
-- Light/dark/auto theme toggle button with persistent preference
-- Responsive design for mobile and desktop
-
-## Key Data Relationships
-
-- Games have a `service` field (steam, gog, itchio, humblebundle, or NULL for local)
-- Games link to categories via `games_categories` join table
-- Categories like `.hidden` and `favorite` are filtered out in the report display
-- `playtime` is cumulative hours (REAL), not per-session data

generate_report.py

@@ -27,7 +27,18 @@ from styles import get_theme_css, get_theme_config
 SCRIPT_DIR = Path(__file__).parent
 
 # Modern styles that use the unified template
-MODERN_STYLES = ["brutalism", "glassmorphism", "neumorphism", "material", "flat", "synthwave", "vaporwave", "terminal", "highcontrast"]
+MODERN_STYLES = [
+    "brutalism",
+    "glassmorphism",
+    "skeuo",
+    "neumorphism",
+    "material",
+    "flat",
+    "synthwave",
+    "vaporwave",
+    "terminal",
+    "highcontrast",
+]
 
 
 def load_template(template_file: str) -> str:
@@ -87,14 +98,22 @@ def get_all_games(db_path: str) -> tuple[list[dict], int]:
             "playtime": row[2],
             "service": row[3],
             "runner": row[4],
-            "categories": game_categories.get(row[0], [])
+            "categories": game_categories.get(row[0], []),
         }
         for row in games_rows
     ]
     return games, total_library
 
 
-def generate_report(db_path: str, output_path: str, top_n: int, assets_dir: str, template_file: str, bg_image_path: str = None, style: str = None) -> None:
+def generate_report(
+    db_path: str,
+    output_path: str,
+    top_n: int,
+    assets_dir: str,
+    template_file: str,
+    bg_image_path: str | None = None,
+    style: str | None = None,
+) -> None:
     """Generate the HTML report."""
     all_games, total_library = get_all_games(db_path)
 
@@ -112,8 +131,12 @@ def generate_report(db_path: str, output_path: str, top_n: int, assets_dir: str,
         background_image = load_asset_as_base64(Path(bg_image_path), "image/png")
         background_image_custom = f"url('{background_image}')"
     else:
-        background_image = load_asset_as_base64(assets_path / "Others" / "stripes.png", "image/png")
+        background_image = load_asset_as_base64(
-        background_image_custom = "none"  # For templates that prefer no default background
+            assets_path / "Others" / "stripes.png", "image/png"
+        )
+        background_image_custom = (
+            "none"  # For templates that prefer no default background
+        )
 
     # Check if using modern unified template
     if style and style in MODERN_STYLES:
@@ -124,7 +147,7 @@ def generate_report(db_path: str, output_path: str, top_n: int, assets_dir: str,
         theme_config = get_theme_config(style)
 
         # Inject javascript
-        javascript = load_script('templates/script.js')
+        javascript = load_script("templates/script.js")
         javascript = javascript.replace("__ALL_GAMES__", json.dumps(all_games))
         javascript = javascript.replace("__TOP_N__", str(top_n))
         javascript = javascript.replace("__THEME_CONFIG__", theme_config)
@@ -137,27 +160,55 @@ def generate_report(db_path: str, output_path: str, top_n: int, assets_dir: str,
     else:
         # Legacy template handling (platinum and others)
         # Load fonts
-        font_charcoal = load_asset_as_base64(assets_path / "Charcoal.ttf", "font/truetype")
+        font_charcoal = load_asset_as_base64(
+            assets_path / "Charcoal.ttf", "font/truetype"
+        )
         font_monaco = load_asset_as_base64(assets_path / "MONACO.TTF", "font/truetype")
 
         # Load images
-        titlebar_bg = load_asset_as_base64(assets_path / "Windows" / "title-1-active.png", "image/png")
+        titlebar_bg = load_asset_as_base64(
-        title_stripes = load_asset_as_base64(assets_path / "Windows" / "title-1-active.png", "image/png")
+            assets_path / "Windows" / "title-1-active.png", "image/png"
-        close_btn = load_asset_as_base64(assets_path / "Windows" / "close-active.png", "image/png")
+        )
-        hide_btn = load_asset_as_base64(assets_path / "Windows" / "maximize-active.png", "image/png")
+        title_stripes = load_asset_as_base64(
-        shade_btn = load_asset_as_base64(assets_path / "Windows" / "shade-active.png", "image/png")
+            assets_path / "Windows" / "title-1-active.png", "image/png"
-        check_off = load_asset_as_base64(assets_path / "Check-Radio" / "check-normal.png", "image/png")
+        )
-        check_on = load_asset_as_base64(assets_path / "Check-Radio" / "check-active.png", "image/png")
+        close_btn = load_asset_as_base64(
+            assets_path / "Windows" / "close-active.png", "image/png"
+        )
+        hide_btn = load_asset_as_base64(
+            assets_path / "Windows" / "maximize-active.png", "image/png"
+        )
+        shade_btn = load_asset_as_base64(
+            assets_path / "Windows" / "shade-active.png", "image/png"
+        )
+        check_off = load_asset_as_base64(
+            assets_path / "Check-Radio" / "check-normal.png", "image/png"
+        )
+        check_on = load_asset_as_base64(
+            assets_path / "Check-Radio" / "check-active.png", "image/png"
+        )
 
         # Load scrollbar images
-        scrollbar_trough_v = load_asset_as_base64(assets_path / "Scrollbars" / "trough-scrollbar-vert.png", "image/png")
+        scrollbar_trough_v = load_asset_as_base64(
-        scrollbar_thumb_v = load_asset_as_base64(assets_path / "Scrollbars" / "slider-vertical.png", "image/png")
+            assets_path / "Scrollbars" / "trough-scrollbar-vert.png", "image/png"
-        scrollbar_up = load_asset_as_base64(assets_path / "Scrollbars" / "stepper-up.png", "image/png")
+        )
-        scrollbar_down = load_asset_as_base64(assets_path / "Scrollbars" / "stepper-down.png", "image/png")
+        scrollbar_thumb_v = load_asset_as_base64(
+            assets_path / "Scrollbars" / "slider-vertical.png", "image/png"
+        )
+        scrollbar_up = load_asset_as_base64(
+            assets_path / "Scrollbars" / "stepper-up.png", "image/png"
+        )
+        scrollbar_down = load_asset_as_base64(
+            assets_path / "Scrollbars" / "stepper-down.png", "image/png"
+        )
 
         # Load tab images
-        tab_active = load_asset_as_base64(assets_path / "Tabs" / "tab-top-active.png", "image/png")
+        tab_active = load_asset_as_base64(
-        tab_inactive = load_asset_as_base64(assets_path / "Tabs" / "tab-top.png", "image/png")
+            assets_path / "Tabs" / "tab-top-active.png", "image/png"
+        )
+        tab_inactive = load_asset_as_base64(
+            assets_path / "Tabs" / "tab-top.png", "image/png"
+        )
 
         html = load_template(template_file)
         html = html.replace("__ALL_GAMES__", json.dumps(all_games))
@@ -195,39 +246,50 @@ def main():
     parser.add_argument(
         "--db",
         default="pga.db",
-        help="Path to the Lutris SQLite database (default: pga.db)"
+        help="Path to the Lutris SQLite database (default: pga.db)",
     )
     parser.add_argument(
         "--output",
         default="report.html",
-        help="Output HTML file path (default: report.html)"
+        help="Output HTML file path (default: report.html)",
     )
     parser.add_argument(
         "--top",
         type=int,
         default=10,
-        help="Number of top games to show individually (default: 10)"
+        help="Number of top games to show individually (default: 10)",
     )
     parser.add_argument(
         "--assets",
         default="templates/Platinum",
-        help="Path to Platinum assets directory (default: templates/Platinum)"
+        help="Path to Platinum assets directory (default: templates/Platinum)",
     )
     parser.add_argument(
         "--background",
         default=None,
-        help="Path to background image for tiling (default: Platinum stripes pattern)"
+        help="Path to background image for tiling (default: Platinum stripes pattern)",
     )
     parser.add_argument(
         "--template",
         default="templates/platinum.html",
-        help="HTML template file to use (default: templates/platinum.html). Ignored if --style is used."
+        help="HTML template file to use (default: templates/platinum.html). Ignored if --style is used.",
     )
     parser.add_argument(
         "--style",
-        choices=["brutalism", "glassmorphism", "neumorphism", "material", "flat", "synthwave", "vaporwave", "terminal", "highcontrast"],
+        choices=[
+            "brutalism",
+            "glassmorphism",
+            "skeuo",
+            "neumorphism",
+            "material",
+            "flat",
+            "synthwave",
+            "vaporwave",
+            "terminal",
+            "highcontrast",
+        ],
         default=None,
-        help="Modern style to use (brutalism, glassmorphism, neumorphism, material, flat, synthwave, vaporwave, terminal, highcontrast). Overrides --template."
+        help="Modern style to use (brutalism, glassmorphism, skeuo, neumorphism, material, flat, synthwave, vaporwave, terminal, highcontrast). Overrides --template.",
     )
 
     args = parser.parse_args()
@@ -244,7 +306,7 @@ def main():
     style = args.style
 
     # If no --style provided, check if --template points to a modern CSS file
-    if not style and args.template.endswith('.css'):
+    if not style and args.template.endswith(".css"):
         template_path = Path(args.template)
         style_name = template_path.stem  # e.g., "brutalism" from "brutalism.css"
         if style_name in MODERN_STYLES:
@@ -264,7 +326,15 @@ def main():
         print(f"Error: Template file not found: {template_path}")
         return 1
 
-    generate_report(args.db, args.output, args.top, args.assets, args.template, args.background, style)
+    generate_report(
+        args.db,
+        args.output,
+        args.top,
+        args.assets,
+        args.template,
+        args.background,
+        style,
+    )
     return 0
 
 

styles.py

@@ -24,9 +24,17 @@ TEMPLATES_DIR = Path(__file__).parent / "templates"
 THEME_CONFIGS = {
     "brutalism": {
         "colors": [
-            "#ff0000", "#0000ff", "#ffff00", "#00ff00", "#ff00ff",
+            "#ff0000",
-            "#00ffff", "#ff8800", "#8800ff", "#0088ff", "#88ff00",
+            "#0000ff",
-            "#888888"
+            "#ffff00",
+            "#00ff00",
+            "#ff00ff",
+            "#00ffff",
+            "#ff8800",
+            "#8800ff",
+            "#0088ff",
+            "#88ff00",
+            "#888888",
         ],
         "fontFamily": "'Courier New', monospace",
         "fontWeight": "bold",
@@ -42,13 +50,21 @@ THEME_CONFIGS = {
         "tooltipBorderColor": "#ffffff",
         "tooltipBorderWidth": 2,
         "tooltipCornerRadius": 0,
-        "uppercaseTooltip": True
+        "uppercaseTooltip": True,
     },
     "glassmorphism": {
         "colors": [
-            "#6366f1", "#8b5cf6", "#ec4899", "#f43f5e", "#f97316",
+            "#6366f1",
-            "#eab308", "#22c55e", "#14b8a6", "#06b6d4", "#3b82f6",
+            "#8b5cf6",
-            "#64748b"
+            "#ec4899",
+            "#f43f5e",
+            "#f97316",
+            "#eab308",
+            "#22c55e",
+            "#14b8a6",
+            "#06b6d4",
+            "#3b82f6",
+            "#64748b",
         ],
         "fontFamily": "'Inter', sans-serif",
         "fontWeight": "normal",
@@ -64,13 +80,51 @@ THEME_CONFIGS = {
         "tooltipBorderColor": "transparent",
         "tooltipBorderWidth": 0,
         "tooltipCornerRadius": 8,
-        "uppercaseTooltip": False
+        "uppercaseTooltip": False,
+    },
+    "skeuo": {
+        "colors": [
+            "#8b4a2c",
+            "#a65d37",
+            "#bf7748",
+            "#d58a60",
+            "#e0a97f",
+            "#6d4f34",
+            "#857153",
+            "#9e8362",
+            "#b58f6c",
+            "#c9a67f",
+            "#7f7f7f",
+        ],
+        "fontFamily": "'Trebuchet MS', 'Lucida Grande', sans-serif",
+        "fontWeight": "600",
+        "pointStyle": "rectRounded",
+        "textColorLight": "#2c2218",
+        "textColorDark": "#f4e7d5",
+        "borderColorLight": "rgba(75, 55, 36, 0.35)",
+        "borderColorDark": "rgba(219, 188, 156, 0.3)",
+        "borderWidth": 2,
+        "tooltipBg": "rgba(46, 33, 23, 0.92)",
+        "tooltipTitleColor": "#f4e7d5",
+        "tooltipBodyColor": "#f4e7d5",
+        "tooltipBorderColor": "#d5a67f",
+        "tooltipBorderWidth": 1,
+        "tooltipCornerRadius": 10,
+        "uppercaseTooltip": False,
     },
     "neumorphism": {
         "colors": [
-            "#6366f1", "#8b5cf6", "#ec4899", "#f43f5e", "#f97316",
+            "#6366f1",
-            "#eab308", "#22c55e", "#14b8a6", "#06b6d4", "#3b82f6",
+            "#8b5cf6",
-            "#64748b"
+            "#ec4899",
+            "#f43f5e",
+            "#f97316",
+            "#eab308",
+            "#22c55e",
+            "#14b8a6",
+            "#06b6d4",
+            "#3b82f6",
+            "#64748b",
         ],
         "fontFamily": "'Inter', sans-serif",
         "fontWeight": "normal",
@@ -86,13 +140,21 @@ THEME_CONFIGS = {
         "tooltipBorderColor": "transparent",
         "tooltipBorderWidth": 0,
         "tooltipCornerRadius": 8,
-        "uppercaseTooltip": False
+        "uppercaseTooltip": False,
     },
     "material": {
         "colors": [
-            "#6200ee", "#03dac6", "#3700b3", "#018786", "#b00020",
+            "#6200ee",
-            "#ff0266", "#aa00ff", "#0091ea", "#00c853", "#ffd600",
+            "#03dac6",
-            "#757575"
+            "#3700b3",
+            "#018786",
+            "#b00020",
+            "#ff0266",
+            "#aa00ff",
+            "#0091ea",
+            "#00c853",
+            "#ffd600",
+            "#757575",
         ],
         "fontFamily": "'Roboto', sans-serif",
         "fontWeight": "normal",
@@ -108,13 +170,21 @@ THEME_CONFIGS = {
         "tooltipBorderColor": "transparent",
         "tooltipBorderWidth": 0,
         "tooltipCornerRadius": 4,
-        "uppercaseTooltip": False
+        "uppercaseTooltip": False,
     },
     "flat": {
         "colors": [
-            "#ffadad", "#ffd6a5", "#fdffb6", "#caffbf", "#9bf6ff",
+            "#ffadad",
-            "#a0c4ff", "#bdb2ff", "#ffc6ff", "#ff9aa2", "#e2f0cb",
+            "#ffd6a5",
-            "#b5ead7"
+            "#fdffb6",
+            "#caffbf",
+            "#9bf6ff",
+            "#a0c4ff",
+            "#bdb2ff",
+            "#ffc6ff",
+            "#ff9aa2",
+            "#e2f0cb",
+            "#b5ead7",
         ],
         "fontFamily": "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif",
         "fontWeight": "500",
@@ -130,13 +200,21 @@ THEME_CONFIGS = {
         "tooltipBorderColor": "transparent",
         "tooltipBorderWidth": 0,
         "tooltipCornerRadius": 12,
-        "uppercaseTooltip": False
+        "uppercaseTooltip": False,
     },
     "synthwave": {
         "colors": [
-            "#ff00ff", "#00ffff", "#ffff00", "#ff0055", "#00ff99",
+            "#ff00ff",
-            "#7a5af8", "#ff8800", "#ff00aa", "#00ccff", "#ccff00",
+            "#00ffff",
-            "#999999"
+            "#ffff00",
+            "#ff0055",
+            "#00ff99",
+            "#7a5af8",
+            "#ff8800",
+            "#ff00aa",
+            "#00ccff",
+            "#ccff00",
+            "#999999",
         ],
         "fontFamily": "'Orbitron', 'Segoe UI', sans-serif",
         "fontWeight": "bold",
@@ -152,13 +230,21 @@ THEME_CONFIGS = {
         "tooltipBorderColor": "#ff00ff",
         "tooltipBorderWidth": 1,
         "tooltipCornerRadius": 0,
-        "uppercaseTooltip": True
+        "uppercaseTooltip": True,
     },
     "vaporwave": {
         "colors": [
-            "#ff71ce", "#01cdfe", "#05ffa1", "#b967ff", "#fffb96",
+            "#ff71ce",
-            "#ff99cc", "#99ccff", "#ccff99", "#ffcc99", "#ffffcc",
+            "#01cdfe",
-            "#e0e0e0"
+            "#05ffa1",
+            "#b967ff",
+            "#fffb96",
+            "#ff99cc",
+            "#99ccff",
+            "#ccff99",
+            "#ffcc99",
+            "#ffffcc",
+            "#e0e0e0",
         ],
         "fontFamily": "'MS PGothic', 'Palatino Linotype', serif",
         "fontWeight": "normal",
@@ -174,13 +260,21 @@ THEME_CONFIGS = {
         "tooltipBorderColor": "#01cdfe",
         "tooltipBorderWidth": 2,
         "tooltipCornerRadius": 4,
-        "uppercaseTooltip": False
+        "uppercaseTooltip": False,
     },
     "terminal": {
         "colors": [
-            "#00ff00", "#00cc00", "#009900", "#006600", "#003300",
+            "#00ff00",
-            "#33ff33", "#66ff66", "#99ff99", "#ccffcc", "#ffffff",
+            "#00cc00",
-            "#888888"
+            "#009900",
+            "#006600",
+            "#003300",
+            "#33ff33",
+            "#66ff66",
+            "#99ff99",
+            "#ccffcc",
+            "#ffffff",
+            "#888888",
         ],
         "fontFamily": "'Courier New', Courier, monospace",
         "fontWeight": "bold",
@@ -196,13 +290,21 @@ THEME_CONFIGS = {
         "tooltipBorderColor": "#00ff00",
         "tooltipBorderWidth": 1,
         "tooltipCornerRadius": 0,
-        "uppercaseTooltip": True
+        "uppercaseTooltip": True,
     },
     "highcontrast": {
         "colors": [
-            "#888888", "#444444", "#cccccc", "#666666", "#aaaaaa",
+            "#888888",
-            "#333333", "#dddddd", "#555555", "#bbbbbb", "#222222",
+            "#444444",
-            "#999999"
+            "#cccccc",
+            "#666666",
+            "#aaaaaa",
+            "#333333",
+            "#dddddd",
+            "#555555",
+            "#bbbbbb",
+            "#222222",
+            "#999999",
         ],
         "fontFamily": "Arial, Helvetica, sans-serif",
         "fontWeight": "900",
@@ -218,8 +320,8 @@ THEME_CONFIGS = {
         "tooltipBorderColor": "#ffffff",
         "tooltipBorderWidth": 3,
         "tooltipCornerRadius": 0,
-        "uppercaseTooltip": True
+        "uppercaseTooltip": True,
-    }
+    },
 }
 
 

templates/skeuo.css

@@ -0,0 +1,628 @@
+/***************************************************************************************************
+ * Copyright (C) 2026 by WallyHackenslacker wallyhackenslacker@noreply.git.hackenslacker.space      *
+ *                                                                                                  *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose with or without *
+ * fee is hereby granted.                                                                           *
+ *                                                                                                  *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS     *
+ * SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE  *
+ * AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES      *
+ * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT,        *
+ * NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE *
+ * OF THIS SOFTWARE.                                                                                *
+ ****************************************************************************************************/
+
+:root {
+    --bg-primary: #efe4d3;
+    --bg-secondary: #e5d6c0;
+    --bg-tertiary: #dcc8aa;
+    --bg-panel: linear-gradient(180deg, #f6ecdf 0%, #e5d6c0 100%);
+    --text-primary: #2c2218;
+    --text-secondary: #5a4732;
+    --text-muted: #7d6750;
+    --border-color: #b79f83;
+    --shadow-color: rgba(40, 28, 15, 0.35);
+    --shine-color: rgba(255, 255, 255, 0.75);
+    --accent-color: #8b4a2c;
+    --accent-hover: #6e3a22;
+    --selection-bg: rgba(139, 74, 44, 0.18);
+    --card-radius: 14px;
+    --bevel-shadow:
+        inset 1px 1px 0 var(--shine-color),
+        inset -1px -1px 0 rgba(120, 90, 60, 0.35),
+        0 8px 18px var(--shadow-color);
+}
+
+[data-theme="dark"] {
+    --bg-primary: #2d2520;
+    --bg-secondary: #392f27;
+    --bg-tertiary: #44382d;
+    --bg-panel: linear-gradient(180deg, #46392d 0%, #2f261f 100%);
+    --text-primary: #f4e7d5;
+    --text-secondary: #d5bea3;
+    --text-muted: #b89f82;
+    --border-color: #6b5642;
+    --shadow-color: rgba(0, 0, 0, 0.6);
+    --shine-color: rgba(255, 232, 205, 0.15);
+    --accent-color: #d58a60;
+    --accent-hover: #e7a07a;
+    --selection-bg: rgba(213, 138, 96, 0.16);
+    --bevel-shadow:
+        inset 1px 1px 0 rgba(255, 236, 214, 0.12),
+        inset -1px -1px 0 rgba(0, 0, 0, 0.35),
+        0 10px 22px var(--shadow-color);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) {
+        --bg-primary: #2d2520;
+        --bg-secondary: #392f27;
+        --bg-tertiary: #44382d;
+        --bg-panel: linear-gradient(180deg, #46392d 0%, #2f261f 100%);
+        --text-primary: #f4e7d5;
+        --text-secondary: #d5bea3;
+        --text-muted: #b89f82;
+        --border-color: #6b5642;
+        --shadow-color: rgba(0, 0, 0, 0.6);
+        --shine-color: rgba(255, 232, 205, 0.15);
+        --accent-color: #d58a60;
+        --accent-hover: #e7a07a;
+        --selection-bg: rgba(213, 138, 96, 0.16);
+        --bevel-shadow:
+            inset 1px 1px 0 rgba(255, 236, 214, 0.12),
+            inset -1px -1px 0 rgba(0, 0, 0, 0.35),
+            0 10px 22px var(--shadow-color);
+    }
+}
+
+* {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: "Trebuchet MS", "Lucida Grande", "Segoe UI", sans-serif;
+    font-size: 14px;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #7c644d;
+    background-image:
+        radial-gradient(circle at 20% 15%, rgba(255, 255, 255, 0.2), transparent 36%),
+        radial-gradient(circle at 82% 80%, rgba(0, 0, 0, 0.28), transparent 38%),
+        url('__BACKGROUND_IMAGE__');
+    background-size: auto, auto, cover;
+    background-position: center;
+    background-attachment: fixed;
+    min-height: 100vh;
+    color: var(--text-primary);
+    line-height: 1.5;
+}
+
+.theme-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    z-index: 1000;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid var(--border-color);
+    background: var(--bg-panel);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 20px;
+    box-shadow: var(--bevel-shadow);
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.theme-toggle:hover {
+    transform: translateY(-1px);
+}
+
+.theme-toggle:active {
+    transform: translateY(1px);
+    box-shadow:
+        inset 1px 1px 0 rgba(100, 72, 45, 0.35),
+        inset -1px -1px 0 rgba(255, 255, 255, 0.45),
+        0 4px 10px var(--shadow-color);
+}
+
+.theme-toggle .icon {
+    transition: transform 0.3s ease;
+}
+
+.theme-toggle .icon-auto {
+    position: relative;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.theme-toggle .icon-auto::before,
+.theme-toggle .icon-auto::after {
+    position: absolute;
+    font-size: 20px;
+    line-height: 1;
+}
+
+.theme-toggle .icon-auto::before {
+    content: "\2600\FE0F";
+    clip-path: inset(0 50% 0 0);
+}
+
+.theme-toggle .icon-auto::after {
+    content: "\1F319";
+    clip-path: inset(0 0 0 50%);
+}
+
+.card {
+    background: var(--bg-panel);
+    border-radius: var(--card-radius);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--bevel-shadow);
+    margin-bottom: 24px;
+    overflow: hidden;
+}
+
+.card-header {
+    padding: 16px 20px;
+    border-bottom: 1px solid var(--border-color);
+    background: linear-gradient(180deg, var(--bg-tertiary) 0%, var(--bg-secondary) 100%);
+    box-shadow: inset 0 1px 0 var(--shine-color);
+}
+
+.card-title {
+    font-size: 16px;
+    font-weight: 700;
+    color: var(--text-primary);
+    letter-spacing: 0.2px;
+    text-shadow: 0 1px 0 var(--shine-color);
+}
+
+.card-content {
+    padding: 20px;
+}
+
+.summaries-content {
+    padding: 0;
+    padding-top: 16px;
+}
+
+.filters {
+    display: flex;
+    justify-content: center;
+    gap: 16px;
+    flex-wrap: wrap;
+}
+
+.filter-label {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+    padding: 8px 16px;
+    border-radius: 999px;
+    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+    border: 1px solid var(--border-color);
+    box-shadow: inset 0 1px 0 var(--shine-color), 0 2px 4px rgba(0, 0, 0, 0.2);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.filter-label:hover {
+    transform: translateY(-1px);
+}
+
+.filter-label input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    width: 18px;
+    height: 18px;
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+    cursor: pointer;
+    position: relative;
+    background: linear-gradient(180deg, #fff3e6 0%, #d7b892 100%);
+    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.6), inset 0 -1px 2px rgba(0, 0, 0, 0.25);
+}
+
+[data-theme="dark"] .filter-label input[type="checkbox"] {
+    background: linear-gradient(180deg, #5b4a3d 0%, #2f261f 100%);
+    box-shadow: inset 0 1px 1px rgba(255, 241, 225, 0.15), inset 0 -1px 2px rgba(0, 0, 0, 0.45);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root:not([data-theme="light"]) .filter-label input[type="checkbox"] {
+        background: linear-gradient(180deg, #5b4a3d 0%, #2f261f 100%);
+        box-shadow: inset 0 1px 1px rgba(255, 241, 225, 0.15), inset 0 -1px 2px rgba(0, 0, 0, 0.45);
+    }
+}
+
+.filter-label input[type="checkbox"]:checked {
+    background: linear-gradient(180deg, var(--accent-color) 0%, var(--accent-hover) 100%);
+    border-color: rgba(0, 0, 0, 0.25);
+}
+
+.filter-label input[type="checkbox"]:checked::after {
+    content: "";
+    position: absolute;
+    left: 5px;
+    top: 2px;
+    width: 4px;
+    height: 8px;
+    border: solid #f8efe3;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+.filter-label .service-name {
+    text-transform: capitalize;
+    font-weight: 600;
+    color: var(--text-primary);
+}
+
+.filter-label .service-count {
+    color: var(--text-muted);
+    font-size: 12px;
+}
+
+.stats {
+    display: flex;
+    justify-content: center;
+    gap: 24px;
+    flex-wrap: wrap;
+}
+
+.stat {
+    text-align: center;
+    padding: 20px 32px;
+    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    box-shadow: inset 0 1px 0 var(--shine-color), 0 4px 12px rgba(0, 0, 0, 0.2);
+    min-width: 140px;
+}
+
+.stat-value {
+    font-size: 28px;
+    font-weight: 700;
+    color: var(--accent-color);
+    font-variant-numeric: tabular-nums;
+    text-shadow: 0 1px 0 var(--shine-color);
+}
+
+.stat-label {
+    font-size: 12px;
+    color: var(--text-muted);
+    margin-top: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.8px;
+}
+
+.charts-wrapper {
+    display: grid;
+    grid-auto-columns: minmax(280px, 450px);
+    grid-template-columns: repeat(auto-fill, minmax(280px, 450px));
+    grid-gap: 24px;
+    justify-content: center;
+}
+
+.chart-container {
+    min-width: 280px;
+    max-width: 450px;
+    padding: 16px;
+    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+    border-radius: 12px;
+    border: 1px solid var(--border-color);
+    box-shadow: inset 0 1px 0 var(--shine-color), 0 6px 14px rgba(0, 0, 0, 0.24);
+}
+
+.chart-title {
+    font-size: 14px;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 12px;
+    color: var(--text-primary);
+    text-shadow: 0 1px 0 var(--shine-color);
+}
+
+@media (max-width: 700px) {
+    .charts-wrapper {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .chart-container {
+        max-width: 100%;
+        width: 100%;
+    }
+}
+
+.tabs {
+    display: flex;
+    gap: 8px;
+    padding: 0 20px;
+    margin-bottom: -1px;
+    position: relative;
+    z-index: 1;
+}
+
+.tab {
+    padding: 12px 24px;
+    cursor: pointer;
+    color: var(--text-secondary);
+    font-weight: 700;
+    border-radius: 12px 12px 0 0;
+    background: linear-gradient(180deg, #d5bea3 0%, #bca084 100%);
+    border: 1px solid var(--border-color);
+    border-bottom: none;
+    box-shadow: inset 0 1px 0 rgba(255, 247, 237, 0.7);
+    transition: transform 0.15s ease, color 0.15s ease;
+}
+
+.tab:hover {
+    color: var(--text-primary);
+}
+
+.tab.active {
+    color: var(--accent-color);
+    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+    transform: translateY(1px);
+}
+
+.tab-content {
+    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%);
+    border: 1px solid var(--border-color);
+    border-radius: 0 12px 12px 12px;
+    padding: 16px;
+    box-shadow: inset 0 1px 0 var(--shine-color);
+}
+
+.tab-panel {
+    display: none;
+}
+
+.tab-panel.active {
+    display: block;
+}
+
+.table-wrapper {
+    overflow-x: auto;
+}
+
+table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 13px;
+}
+
+th {
+    padding: 12px 16px;
+    text-align: left;
+    font-weight: 700;
+    color: var(--text-secondary);
+    border-bottom: 2px solid var(--border-color);
+    text-transform: uppercase;
+    font-size: 11px;
+    letter-spacing: 0.6px;
+}
+
+td {
+    padding: 12px 16px;
+    border-bottom: 1px solid rgba(88, 68, 50, 0.28);
+    color: var(--text-primary);
+}
+
+tr:hover td {
+    background: var(--selection-bg);
+}
+
+tr:last-child td {
+    border-bottom: none;
+}
+
+.time {
+    font-variant-numeric: tabular-nums;
+    font-weight: 600;
+}
+
+.percent {
+    font-variant-numeric: tabular-nums;
+    text-align: right;
+    color: var(--text-muted);
+}
+
+.color-box {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    margin-right: 8px;
+    vertical-align: middle;
+    border-radius: 3px;
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
+}
+
+.service-badge {
+    display: inline-block;
+    font-size: 10px;
+    padding: 2px 8px;
+    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-tertiary) 100%);
+    border-radius: 12px;
+    color: var(--text-muted);
+    margin-left: 8px;
+    text-transform: capitalize;
+    font-weight: 700;
+    border: 1px solid rgba(110, 84, 58, 0.45);
+}
+
+.category-badge {
+    display: inline-block;
+    font-size: 10px;
+    padding: 2px 8px;
+    background: linear-gradient(180deg, #cfa98b 0%, #b17f5f 100%);
+    border-radius: 12px;
+    color: #2d1c12;
+    margin-left: 4px;
+    text-transform: capitalize;
+    font-weight: 700;
+    border: 1px solid rgba(59, 35, 20, 0.25);
+}
+
+[data-theme="dark"] .category-badge {
+    color: #1d130d;
+}
+
+.no-data {
+    text-align: center;
+    padding: 40px;
+    color: var(--text-muted);
+}
+
+.others-row {
+    cursor: pointer;
+}
+
+.others-row td:first-child::before {
+    content: "";
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-left: 6px solid var(--text-muted);
+    border-top: 4px solid transparent;
+    border-bottom: 4px solid transparent;
+    margin-right: 8px;
+    transition: transform 0.2s ease;
+}
+
+.others-row.expanded td:first-child::before {
+    transform: rotate(90deg);
+}
+
+.others-detail {
+    display: none;
+    background: rgba(179, 144, 111, 0.2);
+}
+
+.others-detail.visible {
+    display: table-row;
+}
+
+.others-detail td {
+    padding-left: 32px;
+}
+
+::-webkit-scrollbar {
+    width: 10px;
+    height: 10px;
+}
+
+::-webkit-scrollbar-track {
+    background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-tertiary) 100%);
+    border-radius: 999px;
+    border: 1px solid rgba(112, 84, 55, 0.45);
+}
+
+::-webkit-scrollbar-thumb {
+    background: linear-gradient(180deg, #c89f7d 0%, #936647 100%);
+    border-radius: 999px;
+    border: 1px solid rgba(73, 49, 30, 0.45);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: linear-gradient(180deg, #d5ad8c 0%, #a7724f 100%);
+}
+
+@media (max-width: 600px) {
+    body {
+        padding: 12px;
+    }
+
+    .stats {
+        gap: 12px;
+    }
+
+    .stat {
+        padding: 16px 20px;
+        min-width: 100px;
+    }
+
+    .stat-value {
+        font-size: 22px;
+    }
+
+    .filter-label {
+        padding: 6px 12px;
+        font-size: 13px;
+    }
+
+    .tabs {
+        padding: 0 12px;
+    }
+
+    .tab {
+        padding: 10px 16px;
+        font-size: 13px;
+    }
+
+    .theme-toggle {
+        width: 40px;
+        height: 40px;
+        font-size: 16px;
+    }
+}
+
+.scroll-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    z-index: 1000;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 1px solid var(--border-color);
+    background: var(--bg-panel);
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: var(--bevel-shadow);
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
+}
+
+.scroll-top.visible {
+    opacity: 1;
+    visibility: visible;
+}
+
+.scroll-top:hover {
+    transform: translateY(-2px);
+}
+
+.scroll-top-arrow {
+    width: 0;
+    height: 0;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 10px solid var(--text-primary);
+}
+
+@media (max-width: 600px) {
+    .scroll-top {
+        width: 40px;
+        height: 40px;
+    }
+
+    .scroll-top-arrow {
+        border-left-width: 6px;
+        border-right-width: 6px;
+        border-bottom-width: 8px;
+    }
+}