A!leys Galerie

// RPG Maker MZ Crafting System — Ailey's Elegant Imbuement
// Minimalistisches, aber leistungsstarkes Crafting-System mit magischen Imbuement-Features

/**
 * Ailey's Crafting System — Elegant Imbuement
 * Plugin für RPG Maker MZ
 * Version: 1.0
 * Autor: Ailey (KI-Entwicklung)
 *
 * Features:
 * - Crafting von Materialien zu Objekten
 * - Magische Imbuement-Features (z. B. "Rare Elements")
 * - Saubere, moderne UI-Interaktion
 * - Minimalistisches Design mit Fokus auf Funktionalität
 */

// ===============================================
// PLUGIN MANAGEMENT
// ===============================================
function CraftingSystem_AileyImbuement() {
    throw new Error("CraftingSystem_AileyImbuement is a static class and cannot be instantiated.");
}

// ===============================================
// PLUGIN MAIN
// ===============================================
CraftingSystem_AileyImbuement.init = function() {
    // Register crafting commands
    this._registerCommands();

    // Initialize crafting menu
    this._initializeMenu();

    // Load default crafting recipes
    this._loadDefaultRecipes();
};

// ===============================================
// PRIVATE METHODS
// ===============================================

// Register crafting commands for the game menu
CraftingSystem_AileyImbuement._registerCommands = function() {
    // Add "Crafting" to the menu if not already present
    if (!SceneMenu._menuItems.includes("crafting")) {
        SceneMenu._menuItems.push("crafting");
    }
};

// Initialize the crafting menu
CraftingSystem_AileyImbuement._initializeMenu = function() {
    // Create crafting menu scene
    Window_CraftingMenu = class extends Window_Selectable {
        constructor() {
            super(0, 0, Graphics.boxWidth, Graphics.boxHeight);
            this._recipe = null;
            this._imbuementOptions = [];
            this.refresh();
        }

        // Refresh the menu with current crafting options
        refresh() {
            const recipes = CraftingSystem_AileyImbuement._getAvailableRecipes();
            const commands = recipes.map(r => r.name);
            this._list = commands;
            this._maxItems = this._list.length;
            this._recipe = null;
            this.select(0);
            this._imbuementOptions = [];
            this._initializeImbuementOptions();
        }

        // Handle crafting when an option is selected
        onSelect() {
            const index = this._list.indexOf(this._item);
            const recipe = CraftingSystem_AileyImbuement._getAvailableRecipes()[index];
            if (recipe) {
                this._recipe = recipe;
                this._initializeImbuementOptions();
            }
        }

        // Draw the menu
        drawItem(index, rect) {
            const item = this._list[index];
            this.changeTextColor(this.textColor(index));
            this.drawText(item, rect.x, rect.y, rect.width);
        }

        // Handle imbuement options (e.g., choose between rare elements)
        _initializeImbuementOptions() {
            if (!this._recipe) return;

            this._imbuementOptions = this._recipe.imbuementOptions || [];
            if (this._imbuementOptions.length === 0) {
                this._imbuementOptions.push({ name: "No Imbuement", cost: 0 });
            }
        }

        // Handle crafting when imbuement is selected
        _handleImbuementSelection(imbuementIndex) {
            if (!this._recipe) return;

            const imbuement = this._imbuementOptions[imbuementIndex];
            const cost = this._recipe.cost + imbuement.cost;

            // Check if player has enough resources
            if (this._canAfford(cost)) {
                // Craft the item with imbuement
                this._craftItem(imbuement.name);
                this.refresh();
            } else {
                // Show error if not enough resources
                this._showError("Not enough resources!");
            }
        }

        // Check if player can afford the crafting cost
        _canAfford(cost) {
            const gold = $gameVariables.value(1);
            return gold >= cost;
        }

        // Show an error message
        _showError(message) {
            const window = new Window_Popup(message, 1);
            window.setPosition(centerX - window.width / 2, centerY - window.height / 2);
            window.open();
            window.setOpacity(0);
            window.startFadeOut(10);
            window.setFadeOutResult(function() { window.close(); });
        }

        // Craft the item and update player resources
        _craftItem(imbuementName) {
            const gold = $gameVariables.value(1);
            const cost = this._recipe.cost + (imbuementName === "No Imbuement" ? 0 : this._imbuementOptions.find(o => o.name === imbuementName).cost);

            // Update gold
            $gameVariables.setValue(1, gold - cost);

            // Add crafted item to inventory
            $gameParty.addItem(this._recipe.resultItemId, 1);

            // Log crafting action
            console.log(`Crafted: ${this._recipe.name} with ${imbuementName} for ${cost} gold.`);
        }
    };

    // Create crafting menu scene
    Scene_CraftingMenu = class extends Scene_MenuBase {
        constructor() {
            super();
            this._menuWindow = null;
        }

        create() {
            this.createMenuWindow();
            this.addWindow(this._menuWindow);
        }

        createMenuWindow() {
            this._menuWindow = new Window_CraftingMenu();
            this._menuWindow.setHandler('ok', this.onItemOk.bind(this));
            this._menuWindow.setHandler('cancel', this.pop.bind(this));
        }

        onItemOk() {
            if (this._menuWindow._recipe) {
                // If imbuement options exist, show a submenu
                if (this._menuWindow._imbuementOptions.length > 1) {
                    this._showImbuementMenu();
                } else {
                    this._menuWindow._handleImbuementSelection(0);
                }
            }
        }

        _showImbuementMenu() {
            const imbuementWindow = new Window_ImbuementMenu(this._menuWindow._imbuementOptions);
            imbuementWindow.setHandler('ok', () => {
                imbuementWindow._handleSelection(this._menuWindow);
                imbuementWindow.close();
            });
            imbuementWindow.setHandler('cancel', () => imbuementWindow.close());
            this.addWindow(imbuementWindow);
        }
    };

    // Imbuement submenu window
    Window_ImbuementMenu = class extends Window_Selectable {
        constructor(imbuementOptions) {
            super(0, 0, Graphics.boxWidth, Graphics.boxHeight);
            this._imbuementOptions = imbuementOptions;
            this._parentMenu = null;
            this.refresh();
        }

        refresh() {
            this._list = this._imbuementOptions.map(o => o.name);
            this._maxItems = this._list.length;
            this.select(0);
        }

        drawItem(index, rect) {
            const option = this._imbuementOptions[index];
            this.changeTextColor(this.textColor(index));
            this.drawText(option.name, rect.x, rect.y, rect.width);
            this.drawText(`(+${option.cost})`, rect.x + rect.width - 50, rect.y, 50, 'right');
        }

        _handleSelection(parentMenu) {
            parentMenu._handleImbuementSelection(this.index());
        }
    };
};

// ===============================================
// PUBLIC API
// ===============================================

// Add crafting menu to the game menu
SceneMenu.prototype._createCraftingCommand = function() {
    const rect = this._commandWindow.currentItem() ? this._commandWindow.itemRect(0) : this._commandWindow._rect;
    const craftingCommand = new Window_HorizontalCommand(rect.x, rect.y, rect.width);
    craftingCommand.setHandler('ok', this._onCraftingCommand.bind(this));
    craftingCommand.setStandardAccessibility();
    this.addWindow(craftingCommand);
    craftingCommand.activate();
};

SceneMenu.prototype._onCraftingCommand = function() {
    this.pop();
    SceneManager.push(Scene_CraftingMenu);
};

// ===============================================
// CRAFTING RECIPES (DEFAULT)
CraftingSystem_AileyImbuement._getAvailableRecipes = function() {
    return [
        {
            name: "Stone Sword",
            cost: 100,
            resultItemId: 1, // Stone Sword ID
            imbuementOptions: [
                { name: "Rare Element (Frost)", cost: 50 },
                { name: "Rare Element (Fire)", cost: 75 },
                { name: "No Imbuement", cost: 0 }
            ]
        },
        {
            name: "Leather Armor",
            cost: 200,
            resultItemId: 2, // Leather Armor ID
            imbuementOptions: [
                { name: "Rare Element (Shadow)", cost: 100 },
                { name: "No Imbuement", cost: 0 }
            ]
        },
        {
            name: "Potion",
            cost: 50,
            resultItemId: 3, // Potion ID
            imbuementOptions: []
        }
    ];
};

// Load default recipes (can be extended)
CraftingSystem_AileyImbuement._loadDefaultRecipes = function() {
    // Default recipes are already defined in _getAvailableRecipes
    console.log("Crafting System: Default recipes loaded.");
};

// ===============================================
// INITIALIZE THE PLUGIN
// ===============================================
CraftingSystem_AileyImbuement.init();

// Export for Node.js if needed
if (typeof module !== 'undefined' && module.exports) {
    module.exports = CraftingSystem_AileyImbuement;
}

#!/usr/bin/env python3
import sqlite3
import sys
from typing import List, Dict, Optional, Tuple
import curses
import time
from dataclasses import dataclass
import random

# Retrowave Farbschema
NEON_CYAN = 46
NEON_MAGENTA = 51
NEON_YELLOW = 33
NEON_GREEN = 32
NEON_RED = 31
NEON_BLUE = 44
DARK_GRAY = 240
WHITE = 256 + 15
BLACK = 0

@dataclass
class DatabaseTable:
    name: str
    schema: str

class NeonDB:
    def __init__(self, database_path: str):
        self.conn = sqlite3.connect(database_path)
        self.tables: List[DatabaseTable] = []
        self.current_table: Optional[str] = None
        self.offset = 0
        self.limit = 10
        self.column_names: List[str] = []

    def get_tables(self) -> List[str]:
        cursor = self.conn.cursor()
        cursor.execute("SELECT name FROM sqlite_master WHERE type='table';")
        return [row[0] for row in cursor.fetchall()]

    def get_table_schema(self, table_name: str) -> str:
        cursor = self.conn.cursor()
        cursor.execute(f"PRAGMA table_info({table_name});")
        return str(cursor.fetchall())

    def get_table_data(self, table_name: str, offset: int = 0, limit: int = 10) -> Tuple[List[Tuple], List[str]]:
        cursor = self.conn.cursor()
        cursor.execute(f"SELECT * FROM {table_name} LIMIT ? OFFSET ?;", (limit, offset))
        self.column_names = [description[0] for description in cursor.description]
        return cursor.fetchall(), self.column_names

    def get_row_count(self, table_name: str) -> int:
        cursor = self.conn.cursor()
        cursor.execute(f"SELECT COUNT(*) FROM {table_name};")
        return cursor.fetchone()[0]

    def close(self):
        self.conn.close()

def draw_banner(stdscr):
    height, width = stdscr.getmaxyx()
    banner = [
        "  _____ __  __ _____ ____   _____ ____ _____ ____ _____ ____",
        " |_   _|  \\/  |_   _|  _ \\ / ____|  _ \\_   _|  _ \\_   _/ __ \\",
        "   | | | \\/ |  | | | | | | (___ | |_) || | | | | | | | (___ |",
        "   | | | |\\/|  | | | | |_| \\___ \\|  _ < | | | | | | |_   _|",
        "  _| |_| |  | _| |_| |___/____) | |_) || | | |_| | |__| |___ ",
        " |_____|_|  |_____|_____/     |____/ |____/|_|  \\____/\\____|",
        "",
        "  Retrowave SQLite Browser  v1.0  "
    ]

    for i, line in enumerate(banner):
        y = max(0, (height - len(banner)) // 2 + i)
        if y < height:
            stdscr.addstr(y, 0, line, curses.color_pair(NEON_CYAN))

def draw_table_header(stdscr, table_name: str, columns: List[str]):
    height, width = stdscr.getmaxyx()
    header_width = sum(len(col) + 2 for col in columns)
    header_pad = (width - header_width) // 2 if width > header_width else 0

    stdscr.addstr(5, header_pad, f"TABLE: {table_name}", curses.color_pair(NEON_MAGENTA))
    stdscr.addstr(6, header_pad, "=" * (len(f"TABLE: {table_name}") + 2), curses.color_pair(NEON_YELLOW))

    if columns:
        column_line = ""
        for col in columns:
            column_line += f" {col.ljust(10)} |"
        stdscr.addstr(7, header_pad, column_line, curses.color_pair(NEON_GREEN))

        separator = ""
        for col in columns:
            separator += "-" * 12 + "+"
        stdscr.addstr(8, header_pad, separator, curses.color_pair(NEON_YELLOW))

def draw_table_data(stdscr, data: List[Tuple], columns: List[str], offset: int, db: NeonDB):
    height, width = stdscr.getmaxyx()
    header_pad = (width - sum(len(col) + 2 for col in columns)) // 2 if columns else 0

    for i, row in enumerate(data):
        y_pos = 9 + i
        if y_pos < height:
            row_line = ""
            for j, (col, val) in enumerate(zip(columns, row)):
                row_line += f" {str(val).ljust(10)} |"
            stdscr.addstr(y_pos, header_pad, row_line, curses.color_pair(NEON_BLUE))

    if len(data) < 10:
        stdscr.addstr(height - 1, 0, f"End of data (showing {len(data)} rows)", curses.color_pair(DARK_GRAY))
    else:
        stdscr.addstr(height - 1, 0, f"Rows {offset}-{offset + len(data) - 1} of {db.get_row_count(db.current_table)}", curses.color_pair(DARK_GRAY))

def draw_tables_list(stdscr, tables: List[str], selected: int):
    height, width = stdscr.getmaxyx()
    list_pad = (width - 20) // 2

    for i, table in enumerate(tables):
        y_pos = 5 + i
        if y_pos < height:
            if i == selected:
                stdscr.addstr(y_pos, list_pad, f" > {table} < ", curses.color_pair(NEON_RED) | curses.A_REVERSE)
            else:
                stdscr.addstr(y_pos, list_pad, f"  {table}  ", curses.color_pair(NEON_CYAN))

def draw_schema(stdscr, table_name: str, schema: str):
    height, width = stdscr.getmaxyx()
    list_pad = (width - 20) // 2

    stdscr.addstr(3, list_pad, f"Schema for {table_name}:", curses.color_pair(NEON_MAGENTA))
    lines = schema.split('\n')
    for i, line in enumerate(lines):
        y_pos = 4 + i
        if y_pos < height:
            stdscr.addstr(y_pos, list_pad, line, curses.color_pair(DARK_GRAY))

def draw_pagination(stdscr, offset: int, limit: int, total: int):
    height, width = stdscr.getmaxyx()
    stdscr.addstr(height - 2, 0, f"Page: {offset//limit + 1} | Rows: {offset}-{min(offset + limit, total)} of {total}", curses.color_pair(NEON_YELLOW))

def main(stdscr):
    curses.init_pair(NEON_CYAN, BLACK, WHITE)
    curses.init_pair(NEON_MAGENTA, BLACK, 204)
    curses.init_pair(NEON_YELLOW, BLACK, 226)
    curses.init_pair(NEON_GREEN, BLACK, 40)
    curses.init_pair(NEON_RED, BLACK, 196)
    curses.init_pair(NEON_BLUE, BLACK, 45)
    curses.init_pair(DARK_GRAY, BLACK, 240)
    curses.init_pair(WHITE, BLACK, 255)

    stdscr.clear()
    draw_banner(stdscr)
    stdscr.refresh()
    time.sleep(0.5)

    if len(sys.argv) != 2:
        stdscr.addstr(10, 0, "Usage: python neon_db.py <database_file.db>", curses.color_pair(NEON_RED))
        stdscr.refresh()
        time.sleep(1)
        return

    database_path = sys.argv[1]
    db = NeonDB(database_path)
    tables = db.get_tables()
    selected_table = 0
    view_mode = "tables"  # tables, data, schema

    while True:
        stdscr.erase()
        if view_mode == "tables":
            draw_tables_list(stdscr, tables, selected_table)
            draw_pagination(stdscr, 0, 10, len(tables))
        elif view_mode == "schema":
            if selected_table < len(tables):
                table_name = tables[selected_table]
                schema = db.get_table_schema(table_name)
                draw_schema(stdscr, table_name, schema)
        elif view_mode == "data":
            if selected_table < len(tables):
                table_name = tables[selected_table]
                data, columns = db.get_table_data(table_name, db.offset, db.limit)
                draw_table_header(stdscr, table_name, columns)
                draw_table_data(stdscr, data, columns, db.offset, db)
                draw_pagination(stdscr, db.offset, db.limit, db.get_row_count(table_name))

        stdscr.refresh()
        key = stdscr.getch()

        if key == curses.KEY_UP and selected_table > 0:
            selected_table -= 1
        elif key == curses.KEY_DOWN and selected_table < len(tables) - 1:
            selected_table += 1
        elif key == curses.KEY_ENTER or key == 10:
            if view_mode == "tables":
                db.current_table = tables[selected_table]
                db.offset = 0
                view_mode = "data"
            elif view_mode == "data":
                view_mode = "schema"
        elif key == curses.KEY_BACKSPACE or key == 127:
            if view_mode == "schema":
                view_mode = "data"
            elif view_mode == "data":
                view_mode = "tables"
        elif key == ord('q') or key == ord('Q'):
            break
        elif key == ord('r') or key == ord('R'):
            if view_mode == "data":
                db.offset += db.limit
                data, _ = db.get_table_data(db.current_table, db.offset, db.limit)
                if not data:
                    db.offset -= db.limit
        elif key == ord('e') or key == ord('E'):
            if view_mode == "data" and db.offset > 0:
                db.offset = max(0, db.offset - db.limit)
        elif key == ord('s') or key == ord('S'):
            view_mode = "schema"
        elif key == ord('t') or key == ord('T'):
            view_mode = "tables"
        elif key == ord('d') or key == ord('D'):
            view_mode = "data"

    db.close()
    curses.endwin()

if __name__ == "__main__":
    curses.wrapper(main)

```swift
import SwiftUI
import Combine

struct ContentView: View {
    @State private var selectedImage: Image?
    @State private var zoomScale: CGFloat = 1.0
    @State private var offset: CGSize = .zero
    @State private var isDragging = false
    @State private var lastScale: CGFloat = 1.0

    private let photos: [UIImage] = {
        let assets = [
            "1",
            "2",
            "3",
            "4",
            "5",
            "6",
            "7",
            "8",
            "9",
            "10",
            "11",
            "12"
        ]
        return assets.compactMap { UIImage(named: $0) }
    }()

    private let gridLayout = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())]

    var body: some View {
        VStack(spacing: 0) {
            // Header with back button and title
            HStack {
                Button(action: { selectedImage = nil }) {
                    Image(systemName: "chevron.backward")
                        .font(.title2)
                        .foregroundColor(.primary)
                }

                Spacer()

                Text("FocalFlow")
                    .font(.headline)
                    .foregroundColor(.primary)
            }
            .padding(.horizontal, 16)
            .padding(.top, 8)

            // Main photo grid
            GeometryReader { geometry in
                ZStack {
                    // Grid background
                    LazyVGrid(columns: gridLayout) {
                        ForEach(0..<photos.count, id: \.self) { index in
                            Image(uiImage: photos[index])
                                .resizable()
                                .scaledToFill()
                                .frame(width: geometry.size.width / 3, height: geometry.size.height / 2)
                                .clipped()
                                .onTapGesture {
                                    selectedImage = Image(uiImage: photos[index])
                                    zoomScale = 1.0
                                    offset = .zero
                                    isDragging = false
                                }
                        }
                    }

                    // Selected image with zoom
                    if let selectedImage = selectedImage {
                        Image(uiImage: selectedImage)
                            .resizable()
                            .scaledToFill()
                            .frame(width: geometry.size.width, height: geometry.size.height - 100)
                            .offset(offset)
                            .scaleEffect(zoomScale)
                            .animation(
                                Animation.interpolatingSpring(
                                    mass: 0.5,
                                    stiffness: 200,
                                    damping: 20
                                ),
                                value: isDragging ? (offset, zoomScale) : nil
                            )
                            .gesture(
                                MagnificationGesture()
                                    .onMagnified { value in
                                        if value > 1.1 && zoomScale < 5 {
                                            let newScale = min(zoomScale * value, 5)
                                            if !isDragging {
                                                lastScale = zoomScale
                                            }
                                            zoomScale = newScale
                                            isDragging = true
                                        }
                                    }
                            )
                            .gesture(
                                DragGesture()
                                    .onChanged { value in
                                        offset = value.translation
                                        isDragging = true
                                    }
                                    .onEnded { value in
                                        offset = .zero
                                        isDragging = false
                                    }
                            )
                    }
                }
            }

using UnityEngine;
using System.Collections;
using System.Linq;
using UnityEngine.Audio;

[RequireComponent(typeof(AudioSource))]
public class OrganicAudioMixer : MonoBehaviour
{
    [Header("Crossfade Settings")]
    [SerializeField] private float minCrossfadeTime = 0.5f;
    [SerializeField] private float maxCrossfadeTime = 2.0f;
    [SerializeField] private float volumeThreshold = 0.1f;
    [SerializeField] private bool randomizeTiming = true;
    [SerializeField] private float organicJitter = 0.1f;

    [Header("Audio Sources")]
    [SerializeField] private AudioClip[] audioClips;
    [SerializeField] private float[] clipWeights;

    private AudioSource _audioSource;
    private float _currentVolume;
    private bool _isCrossfading;
    private float _crossfadeDuration;
    private float _crossfadeProgress;
    private float _crossfadeTargetVolume;
    private float _nextClipIndex;

    private void Awake()
    {
        _audioSource = GetComponent<AudioSource>();
        _currentVolume = _audioSource.volume;
        _crossfadeDuration = Random.Range(minCrossfadeTime, maxCrossfadeTime);
        _nextClipIndex = Random.Range(0, audioClips.Length);
    }

    private void Update()
    {
        if (!_isCrossfading) return;

        _crossfadeProgress += Time.deltaTime / _crossfadeDuration;

        if (_crossfadeProgress >= 1.0f)
        {
            _audioSource.volume = _crossfadeTargetVolume;
            _currentVolume = _crossfadeTargetVolume;
            _isCrossfading = false;

            // Start next clip
            StartNextClip();
        }
        else
        {
            // Smooth organic interpolation
            float t = Mathf.SmoothStep(0, 1, _crossfadeProgress);
            _audioSource.volume = Mathf.Lerp(_currentVolume, _crossfadeTargetVolume, t);
        }
    }

    private void StartNextClip()
    {
        if (audioClips.Length == 0) return;

        // Organic selection based on time and chaos
        if (randomizeTiming)
        {
            float timeFactor = Mathf.Sin(Time.time * 0.3f) * 0.5f + 0.5f;
            _nextClipIndex = Mathf.FloorToInt(_nextClipIndex + Mathf.Lerp(0.5f, 1.5f, timeFactor) * organicJitter);
            _nextClipIndex = Mathf.Repeat(_nextClipIndex, audioClips.Length);
        }

        AudioClip nextClip = audioClips[_nextClipIndex];
        float targetVolume = Random.Range(0.5f, 1.0f);

        // Weighted selection if weights provided
        if (clipWeights != null && clipWeights.Length == audioClips.Length)
        {
            float[] probabilities = clipWeights.Select(w => w / clipWeights.Sum()).ToArray();
            int[] indices = Enumerable.Range(0, audioClips.Length).ToArray();
            _nextClipIndex = indices.OrderBy(i => Random.value).First(i => i == _nextClipIndex);
        }

        // Natural transition
        _audioSource.Stop();
        _audioSource.clip = nextClip;
        _audioSource.volume = targetVolume;
        _audioSource.Play();

        // Start crossfade to next clip
        _isCrossfading = true;
        _crossfadeDuration = Random.Range(minCrossfadeTime, maxCrossfadeTime);
        _crossfadeProgress = 0;
        _currentVolume = targetVolume;
        _crossfadeTargetVolume = targetVolume;
    }

    public void ToggleOrganicMode(bool isOrganic)
    {
        randomizeTiming = isOrganic;
        organicJitter = isOrganic ? 0.1f : 0;
    }

    public void SetClipVolume(int clipIndex, float volume)
    {
        if (clipIndex >= 0 && clipIndex < audioClips.Length)
        {
            clipWeights[clipIndex] = volume;
            clipWeights = clipWeights.Select(w => Mathf.Clamp(w, 0, 1)).ToArray();
        }
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ailey's Aesthetic Gallery</title>
    <style>
        :root {
            --bg-color: #f5f7fa;
            --accent-color: #6c5ce7;
            --text-color: #333;
            --filter-active: #6c5ce7;
            --filter-inactive: #aaa;
            --shadow-color: rgba(0, 0, 0, 0.1);
            --transition-speed: 0.3s;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem;
        }

        header {
            text-align: center;
            margin-bottom: 3rem;
            padding: 1rem 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
            background: linear-gradient(90deg, #6c5ce7, #a29bfe);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }

        .gallery-controls {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin-bottom: 2rem;
            flex-wrap: wrap;
        }

        .filter-btn {
            padding: 0.5rem 1rem;
            border: none;
            border-radius: 20px;
            background-color: var(--filter-inactive);
            color: var(--text-color);
            cursor: pointer;
            transition: all var(--transition-speed) ease;
            font-weight: 500;
            position: relative;
            overflow: hidden;
        }

        .filter-btn:hover {
            background-color: var(--filter-active);
        }

        .filter-btn.active {
            background-color: var(--filter-active);
            color: white;
        }

        .filter-btn.active::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 100%);
            transform: translateX(-100%);
            animation: shine 1.5s infinite;
        }

        @keyframes shine {
            100% { transform: translateX(100%); }
        }

        .gallery {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            grid-gap: 1.5rem;
        }

        .gallery-item {
            position: relative;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 6px var(--shadow-color);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
            aspect-ratio: 1 / 1;
            background-color: white;
        }

        .gallery-item:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 15px var(--shadow-color);
        }

        .gallery-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
            display: block;
        }

        .gallery-item:hover img {
            transform: scale(1.05);
        }

        .gallery-item .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            opacity: 0;
            transition: opacity var(--transition-speed) ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .gallery-item:hover .overlay {
            opacity: 1;
        }

        .overlay span {
            color: white;
            font-weight: bold;
            font-size: 1.2rem;
        }

        .lightbox {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.9);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity var(--transition-speed) ease;
            pointer-events: none;
        }

        .lightbox.active {
            opacity: 1;
            pointer-events: all;
        }

        .lightbox-img {
            max-width: 80%;
            max-height: 80%;
            border-radius: 8px;
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
            display: block;
        }

        .lightbox-controls {
            position: absolute;
            top: 20px;
            right: 20px;
            display: flex;
            gap: 1rem;
        }

        .close-btn, .prev-btn, .next-btn {
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .close-btn:hover, .prev-btn:hover, .next-btn:hover {
            transform: scale(1.1);
        }

        .lightbox-caption {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: white;
            background: rgba(0, 0, 0, 0.5);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            font-size: 1.1rem;
            text-align: center;
        }

        footer {
            text-align: center;
            margin-top: 3rem;
            padding: 1rem 0;
            color: #666;
            font-size: 0.9rem;
        }

        @media (max-width: 768px) {
            .gallery {
                grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            }

            .gallery-controls {
                gap: 1rem;
            }

            h1 {
                font-size: 2rem;
            }
        }

        @media (max-width: 480px) {
            .gallery {
                grid-template-columns: 1fr;
            }

            .container {
                padding: 1rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>Ailey's Aesthetic Gallery</h1>
            <p>Explore beautiful images with smooth animations and creative filters</p>
        </header>

        <div class="gallery-controls">
            <button class="filter-btn active" data-filter="all">All</button>
            <button class="filter-btn" data-filter="nature">Nature</button>
            <button class="filter-btn" data-filter="architecture">Architecture</button>
            <button class="filter-btn" data-filter="portrait">Portrait</button>
            <button class="filter-btn" data-filter="abstract">Abstract</button>
        </div>

        <div class="gallery">
            <!-- Gallery items will be dynamically inserted here -->
        </div>
    </div>

    <div class="lightbox">
        <span class="lightbox-controls">
            <button class="prev-btn">&lt;</button>
            <button class="close-btn">&times;</button>
            <button class="next-btn">&gt;</button>
        </span>
        <img class="lightbox-img" alt="Image preview">
        <div class="lightbox-caption"></div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Gallery data
            const galleryData = [
                {
                    src: 'https://source.unsplash.com/random/600x600?nature,forest,beautiful',
                    alt: 'Beautiful forest landscape',
                    category: 'nature'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?nature,waterfall,serene',
                    alt: 'Serene waterfall in nature',
                    category: 'nature'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?architecture,modern,city',
                    alt: 'Modern architecture in city',
                    category: 'architecture'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?architecture,skyscraper,urban',
                    alt: 'Skyscraper in urban setting',
                    category: 'architecture'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?portrait,woman,smiling',
                    alt: 'Smiling woman portrait',
                    category: 'portrait'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?portrait,man,creative',
                    alt: 'Creative man portrait',
                    category: 'portrait'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?abstract,colors,art',
                    alt: 'Abstract color art',
                    category: 'abstract'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?abstract,geometric,design',
                    alt: 'Geometric abstract design',
                    category: 'abstract'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?nature,ocean,sunset',
                    alt: 'Ocean sunset landscape',
                    category: 'nature'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?nature,mountain,summit',
                    alt: 'Mountain summit at sunset',
                    category: 'nature'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?architecture,bridge,cityscape',
                    alt: 'City bridge architecture',
                    category: 'architecture'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?architecture,building,night',
                    alt: 'Modern building at night',
                    category: 'architecture'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?portrait,family,happy',
                    alt: 'Happy family portrait',
                    category: 'portrait'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?portrait,artist,painting',
                    alt: 'Artist portrait with painting',
                    category: 'portrait'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?abstract,art,creative',
                    alt: 'Creative abstract art',
                    category: 'abstract'
                },
                {
                    src: 'https://source.unsplash.com/random/600x600?abstract,pattern,design',
                    alt: 'Colorful abstract pattern',
                    category: 'abstract'
                }
            ];

            // DOM elements
            const gallery = document.querySelector('.gallery');
            const filterBtns = document.querySelectorAll('.filter-btn');
            const lightbox = document.querySelector('.lightbox');
            const lightboxImg = document.querySelector('.lightbox-img');
            const lightboxCaption = document.querySelector('.lightbox-caption');
            const closeBtn = document.querySelector('.close-btn');
            const prevBtn = document.querySelector('.prev-btn');
            const nextBtn = document.querySelector('.next-btn');

            let currentIndex = 0;
            let currentFilter = 'all';

            // Initialize gallery
            function initGallery() {
                galleryData.forEach((item, index) => {
                    const galleryItem = document.createElement('div');
                    galleryItem.className = 'gallery-item';
                    galleryItem.dataset.index = index;
                    galleryItem.dataset.category = item.category;

                    galleryItem.innerHTML = `
                        <img src="${item.src}" alt="${item.alt}">
                        <div class="overlay">
                            <span>${item.alt}</span>
                        </div>
                    `;

                    gallery.appendChild(galleryItem);
                });

                // Add click event to all gallery items
                document.querySelectorAll('.gallery-item').forEach(item => {
                    item.addEventListener('click', openLightbox);
                });
            }

            // Filter gallery based on selected filter
            function filterGallery(filter) {
                currentFilter = filter;
                document.querySelectorAll('.gallery-item').forEach(item => {
                    if (filter === 'all' || item.dataset.category === filter) {
                        item.style.display = 'block';
                    } else {
                        item.style.display = 'none';
                    }
                });

                // Update active button
                filterBtns.forEach(btn => {
                    btn.classList.toggle('active', btn.dataset.filter === filter);
                });
            }

            // Open lightbox
            function openLightbox(e) {
                e.preventDefault();
                const clickedItem = e.currentTarget;
                currentIndex = parseInt(clickedItem.dataset.index);

                // Get the image data
                const imgData = galleryData[currentIndex];
                lightboxImg.src = imgData.src;
                lightboxImg.alt = imgData.alt;
                lightboxCaption.textContent = imgData.alt;

                // Show lightbox
                lightbox.classList.add('active');
                document.body.style.overflow = 'hidden';

                // Close when clicking outside the image
                lightbox.addEventListener('click', function(e) {
                    if (e.target === lightbox) {
                        closeLightbox();
                    }
                });
            }

            // Close lightbox
            function closeLightbox() {
                lightbox.classList.remove('active');
                document.body.style.overflow = 'auto';
            }

            // Navigate to previous image
            function prevImage() {
                currentIndex = (currentIndex - 1 + galleryData.length) % galleryData.length;
                updateLightbox();
            }

            // Navigate to next image
            function nextImage() {
                currentIndex = (currentIndex + 1) % galleryData.length;
                updateLightbox();
            }

            // Update lightbox content
            function updateLightbox() {
                const imgData = galleryData[currentIndex];
                lightboxImg.src = imgData.src;
                lightboxImg.alt = imgData.alt;
                lightboxCaption.textContent = imgData.alt;

                // Scroll to clicked item in gallery
                const galleryItem = document.querySelector(`.gallery-item[data-index="${currentIndex}"]`);
                if (galleryItem) {
                    gallery.scrollTo({
                        top: galleryItem.offsetTop - 100,
                        behavior: 'smooth'
                    });
                }
            }

            // Event listeners
            filterBtns.forEach(btn => {
                btn.addEventListener('click', function() {
                    filterGallery(this.dataset.filter);
                });
            });

            closeBtn.addEventListener('click', closeLightbox);
            prevBtn.addEventListener('click', prevImage);
            nextBtn.addEventListener('click', nextImage);

            // Keyboard navigation
            document.addEventListener('keydown', function(e) {
                if (lightbox.classList.contains('active')) {
                    if (e.key === 'Escape') {
                        closeLightbox();
                    } else if (e.key === 'ArrowLeft') {
                        prevImage();
                    } else if (e.key === 'ArrowRight') {
                        nextImage();
                    }
                }
            });

            // Initialize
            initGallery();
            filterGallery('all');
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Interactive World Explorer</title>
    <style>
        :root {
            --primary: #4a6fa5;
            --secondary: #166088;
            --accent: #4fc3f7;
            --light: #f8f9fa;
            --dark: #343a40;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: var(--light);
            color: var(--dark);
            line-height: 1.6;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        header {
            text-align: center;
            margin-bottom: 30px;
            padding: 20px 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }

        h1 {
            color: var(--secondary);
            font-weight: 600;
            margin-bottom: 10px;
        }

        .subtitle {
            color: var(--primary);
            font-style: italic;
        }

        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }

        button {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 10px 15px;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        button:hover {
            background-color: var(--secondary);
            transform: translateY(-2px);
        }

        button.active {
            background-color: var(--accent);
            box-shadow: 0 4px 8px rgba(79, 195, 247, 0.3);
        }

        .world-map {
            position: relative;
            width: 100%;
            height: 600px;
            margin: 0 auto;
            background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/0/04/World_map_with_water_and_land_geography_%28World_Map_with_Natural_Colours%29.svg/2048px-World_map_with_water_and_land_geography_%28World_Map_with_Natural_Colours%29.svg.png');
            background-size: cover;
            background-position: center;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .region {
            position: absolute;
            border: 2px dashed var(--primary);
            transition: all 0.3s ease;
            cursor: pointer;
            z-index: 1;
        }

        .region:hover {
            border-color: var(--accent);
            background-color: rgba(79, 195, 247, 0.1);
        }

        .region.active {
            border-color: var(--accent);
            background-color: rgba(79, 195, 247, 0.2);
        }

        .tooltip {
            position: absolute;
            background-color: white;
            border: 1px solid var(--primary);
            border-radius: 5px;
            padding: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
            pointer-events: none;
            max-width: 250px;
            opacity: 0;
            transition: opacity 0.3s ease;
            z-index: 10;
            font-size: 14px;
        }

        .tooltip.show {
            opacity: 1;
        }

        .stats {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .stat {
            background-color: white;
            padding: 15px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            text-align: center;
            flex: 1;
            min-width: 150px;
        }

        .stat h3 {
            color: var(--secondary);
            margin-bottom: 5px;
        }

        .stat p {
            font-size: 1.2em;
            font-weight: bold;
            color: var(--primary);
        }

        .stat.secondary {
            background-color: rgba(22, 96, 136, 0.1);
        }

        .info-panel {
            background-color: white;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-top: 20px;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        .info-panel h2 {
            color: var(--secondary);
            margin-bottom: 15px;
        }

        .info-panel p {
            margin-bottom: 10px;
            line-height: 1.6;
        }

        .flag {
            width: 20px;
            height: 15px;
            object-fit: cover;
            margin-right: 10px;
        }

        footer {
            text-align: center;
            margin-top: 40px;
            padding: 20px 0;
            color: rgba(0, 0, 0, 0.5);
            font-size: 0.9em;
        }

        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--primary);
            font-size: 1.2em;
            z-index: 20;
        }

        @media (max-width: 768px) {
            .world-map {
                height: 400px;
            }

            .stats {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>World Explorer</h1>
            <p class="subtitle">Discover the world with interactive regions</p>
        </header>

        <div class="controls">
            <button id="view-map">View Map</button>
            <button id="view-stats">View Stats</button>
            <button id="reset">Reset</button>
        </div>

        <div class="world-map" id="worldMap">
            <div class="loading" id="loading">Loading world data...</div>
        </div>

        <div class="stats" id="statsPanel">
            <div class="stat secondary">
                <h3>Total Regions</h3>
                <p id="totalRegions">0</p>
            </div>
            <div class="stat secondary">
                <h3>Explored Regions</h3>
                <p id="exploredRegions">0</p>
            </div>
            <div class="stat secondary">
                <h3>Average Size</h3>
                <p id="averageSize">0 km²</p>
            </div>
        </div>

        <div class="info-panel" id="infoPanel">
            <h2>Region Information</h2>
            <p id="regionInfo">Click on a region to see information</p>
        </div>
    </div>

    <footer>
        <p>Interactive World Explorer • Built with passion for exploration</p>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // DOM Elements
            const worldMap = document.getElementById('worldMap');
            const statsPanel = document.getElementById('statsPanel');
            const infoPanel = document.getElementById('infoPanel');
            const loading = document.getElementById('loading');
            const viewMapBtn = document.getElementById('view-map');
            const viewStatsBtn = document.getElementById('view-stats');
            const resetBtn = document.getElementById('reset');
            const totalRegionsEl = document.getElementById('totalRegions');
            const exploredRegionsEl = document.getElementById('exploredRegions');
            const averageSizeEl = document.getElementById('averageSize');
            const regionInfoEl = document.getElementById('regionInfo');

            // State
            let regions = [];
            let exploredRegions = new Set();
            let activeView = 'map';
            let selectedRegion = null;

            // Sample data for regions (in a real app, this would come from an API)
            const sampleRegions = [
                {
                    id: 'europe',
                    name: 'Europe',
                    center: { x: 0.2, y: 0.5 },
                    size: 10180000,
                    description: 'Europe is a continent located entirely in the Northern Hemisphere and mostly in the Eastern Hemisphere. Comprising the westernmost part of Eurasia, Europe is bordered by the Arctic Ocean to the north, the Atlantic Ocean to the west, and the Mediterranean Sea to the south.',
                    flag: '🇪🇺',
                    population: 746000000,
                    capital: 'Brussels, Strasbourg (de facto)',
                    languages: ['English', 'German', 'French'],
                    funFact: 'Europe has 44 time zones, more than any other continent.'
                },
                {
                    id: 'asia',
                    name: 'Asia',
                    center: { x: 0.7, y: 0.4 },
                    size: 44580000,
                    description: 'Asia is Earth\'s largest and most populous continent, located primarily in the Eastern and Northern Hemispheres. It covers 8.7% of the Earth\'s total surface area and comprises 30% of its land area.',
                    flag: '🇨🇳',
                    population: 4641000000,
                    capital: 'Various (Beijing, Tokyo, etc.)',
                    languages: ['Mandarin', 'Hindi', 'English'],
                    funFact: 'Asia is home to the world\'s tallest mountain, Mount Everest, and the deepest lake, Lake Baikal.'
                },
                {
                    id: 'africa',
                    name: 'Africa',
                    center: { x: 0.4, y: 0.6 },
                    size: 30370000,
                    description: 'Africa is the world\'s second-largest and second-most populous continent. It is bordered by the Mediterranean Sea to the north, the Red Sea to the northeast, the Indian Ocean to the southeast, and the Atlantic Ocean to the west.',
                    flag: '🇿🇦',
                    population: 1340000000,
                    capital: 'Various (Cairo, Addis Ababa, etc.)',
                    languages: ['Arabic', 'Swahili', 'Hausa'],
                    funFact: 'Africa contains 60% of the world\'s arable land.'
                },
                {
                    id: 'north-america',
                    name: 'North America',
                    center: { x: -0.1, y: 0.3 },
                    size: 24709000,
                    description: 'North America is a continent entirely within the Northern Hemisphere and almost all within the Western Hemisphere. It is bordered to the north by the Arctic Ocean, to the east by the Atlantic Ocean, to the west and south by the Pacific Ocean, and to the southeast by South America and the Caribbean Sea.',
                    flag: '🇺🇸',
                    population: 579000000,
                    capital: 'Washington, D.C.',
                    languages: ['English', 'Spanish'],
                    funFact: 'North America has the world\'s largest freshwater lake by surface area.'
                },
                {
                    id: 'south-america',
                    name: 'South America',
                    center: { x: -0.3, y: 0.5 },
                    size: 17840000,
                    description: 'South America is a continent in the Western Hemisphere, mostly in the Southern Hemisphere, with a region in the Northern Hemisphere. It is bordered on the west by the Pacific Ocean and on the north and east by the Atlantic Ocean; North America and the Caribbean Sea lie to the northwest.',
                    flag: '🇧🇷',
                    population: 423000000,
                    capital: 'Brasília',
                    languages: ['Portuguese', 'Spanish'],
                    funFact: 'South America has the world\'s largest rainforest, the Amazon Rainforest.'
                },
                {
                    id: 'australia',
                    name: 'Australia/Oceania',
                    center: { x: 1.2, y: -0.1 },
                    size: 8525989,
                    description: 'Oceania is a geographic region that includes Australasia, Melanesia, Micronesia, and Polynesia. Australia, the largest country in Oceania, is often considered part of the continent of Australia, but the term Oceania is used to include the Pacific islands as well.',
                    flag: '🇦🇺',
                    population: 42000000,
                    capital: 'Canberra',
                    languages: ['English'],
                    funFact: 'Oceania has the world\'s largest coral reef system, the Great Barrier Reef.'
                },
                {
                    id: 'antarctica',
                    name: 'Antarctica',
                    center: { x: -0.2, y: -0.7 },
                    size: 14200000,
                    description: 'Antarctica is Earth\'s southernmost continent. It contains the geographic South Pole and is situated in the Antarctic region of the Southern Hemisphere, almost entirely south of the Antarctic Circle, and is surrounded by the Southern Ocean.',
                    flag: '🇦🇶',
                    population: 1000, // Permanent residents
                    capital: 'None (scientific stations)',
                    languages: ['English, Russian, and others'],
                    funFact: 'Antarctica is the coldest, driest, and windiest continent, and has the highest average elevation of all the continents.'
                }
            ];

            // Initialize the application
            init();

            function init() {
                // Set up event listeners
                setupEventListeners();

                // Load regions (simulated API call)
                loadRegions();

                // Set default view
                setView('map');
            }

            function loadRegions() {
                // Simulate API delay
                setTimeout(() => {
                    regions = sampleRegions;
                    renderRegions();
                    updateStats();
                    loading.style.display = 'none';
                }, 800);
            }

            function renderRegions() {
                worldMap.innerHTML = ''; // Clear loading message

                regions.forEach(region => {
                    // Calculate position based on center coordinates (simplified)
                    const mapWidth = worldMap.offsetWidth;
                    const mapHeight = worldMap.offsetHeight;
                    const x = (region.center.x + 0.5) * mapWidth;
                    const y = (0.5 - region.center.y) * mapHeight; // Flip y-axis

                    // Create region element
                    const regionEl = document.createElement('div');
                    regionEl.className = 'region';
                    regionEl.dataset.id = region.id;
                    regionEl.style.left = `${x}px`;
                    regionEl.style.top = `${y}px`;
                    regionEl.style.width = `${region.size / 1000000}px`; // Simplified size representation
                    regionEl.style.height = `${region.size / 2000000}px`;

                    // Add tooltip
                    const tooltip = document.createElement('div');
                    tooltip.className = 'tooltip';
                    tooltip.innerHTML = `
                        <strong>${region.name}</strong><br>
                        ${region.description.substring(0, 100)}...
                    `;
                    worldMap.appendChild(tooltip);

                    // Store tooltip reference
                    regionEl.tooltip = tooltip;

                    // Add click event
                    regionEl.addEventListener('click', () => handleRegionClick(region));

                    worldMap.appendChild(regionEl);
                });
            }

            function handleRegionClick(region) {
                // Update UI for selected region
                if (selectedRegion) {
                    document.querySelector(`.region[data-id="${selectedRegion.id}"]`).classList.remove('active');
                    selectedRegion.tooltip.classList.remove('show');
                }

                const regionEl = document.querySelector(`.region[data-id="${region.id}"]`);
                regionEl.classList.add('active');
                regionEl.tooltip.classList.add('show');

                selectedRegion = region;
                updateRegionInfo(region);
                markAsExplored(region.id);
            }

            function markAsExplored(regionId) {
                if (!exploredRegions.has(regionId)) {
                    exploredRegions.add(regionId);
                    updateStats();
                }
            }

            function updateRegionInfo(region) {
                regionInfoEl.innerHTML = `
                    <div>
                        <h2>${region.name}</h2>
                        <p>${region.description}</p>
                        <p>Population: ${region.population}</p>
                        <p>Capital: ${region.capital}</p>
                        <p>Languages: ${region.languages.join(', ')}</p>
                        <p>Fun Fact: ${region.funFact}</p>
                    </div>
                `;
            }
        });
    </script>
</body>
</html>
```

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quantum Particle Orchestrator</title>
  <style>
    :root {
      --bg-dark: #0a0a1a;
      --particle-glow: #00f2ff;
      --quantum-pulse: radial-gradient(circle at center, transparent 30%, rgba(0, 242, 255, 0.1) 31%, rgba(0, 242, 255, 0.05) 60%);
      --font-futuristic: 'Arial', sans-serif;
    }

    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: var(--bg-dark);
      color: var(--particle-glow);
      font-family: var(--font-futuristic);
      background-image: var(--quantum-pulse);
      animation: quantumPulse 8s infinite alternate;
      background-size: 200vmax 200vmax;
    }

    #particle-canvas {
      display: block;
      margin: 0 auto;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      touch-action: none;
    }

    #info-panel {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background-color: rgba(10, 10, 26, 0.8);
      padding: 15px 20px;
      border-radius: 10px;
      border: 1px solid var(--particle-glow);
      font-size: 14px;
      max-width: 300px;
      backdrop-filter: blur(5px);
    }

    .quantum-mode {
      font-size: 24px;
      font-weight: bold;
      margin-top: 10px;
    }

    .particle-mode {
      font-size: 18px;
    }

    h1 {
      position: absolute;
      top: 20px;
      left: 20px;
      font-size: 28px;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.7);
      text-shadow: 0 0 10px var(--particle-glow);
    }

    @keyframes quantumPulse {
      0% {
        background-size: 150vmax 150vmax;
      }
      100% {
        background-size: 200vmax 200vmax;
      }
    }
  </style>
</head>
<body>
  <h1>QUANTUM PARTICLE ORCHESTRATOR</h1>
  <canvas id="particle-canvas"></canvas>
  <div id="info-panel">
    <div class="quantum-mode">Quantum Mode: OFF</div>
    <div class="particle-mode">Particles: 0</div>
  </div>

  <script>
    // Quantum Particle Orchestrator v1.0
    // By Ailey — Interactive particle system with quantum fusion and audio feedback

    document.addEventListener('DOMContentLoaded', () => {
      const canvas = document.getElementById('particle-canvas');
      const ctx = canvas.getContext('2d');
      const infoPanel = document.getElementById('info-panel');
      const quantumModeElement = document.querySelector('.quantum-mode');
      const particleCountElement = document.querySelector('.particle-mode');

      // Set canvas to full window size
      function resizeCanvas() {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
      }
      window.addEventListener('resize', resizeCanvas);
      resizeCanvas();

      // Audio context and effects
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
      const masterGain = audioContext.createGain();
      masterGain.gain.value = 0.5;
      masterGain.connect(audioContext.destination);

      const synth = audioContext.createOscillator();
      synth.type = 'sine';
      synth.frequency.value = 440;
      synth.connect(masterGain);

      const particleSound = audioContext.createBufferSource();
      const particleBuffer = audioContext.createBuffer(1, 22050, audioContext.sampleRate);
      const particleData = particleBuffer.getChannelData(0);
      for (let i = 0; i < 22050; i++) {
        particleData[i] = 0.5 * Math.sin(i * 0.1);
      }
      particleSound.buffer = particleBuffer;
      particleSound.connect(masterGain);

      // Quantum particle class
      class QuantumParticle {
        constructor(x, y) {
          this.x = x;
          this.y = y;
          this.size = Math.random() * 4 + 1;
          this.speed = Math.random() * 2 + 0.5;
          this.angle = Math.random() * Math.PI * 2;
          this.velocityX = Math.cos(this.angle) * this.speed;
          this.velocityY = Math.sin(this.angle) * this.speed;
          this.color = `hsl(${Math.random() * 30 + 210}, 100%, 70%)`;
          this.birthTime = Date.now();
          this.decayTime = 5000 + Math.random() * 3000;
          this.isFused = false;
          this.fusionProgress = 0;
          this.fusionTarget = null;
        }

        update(quantumMode) {
          // Normal movement
          this.x += this.velocityX;
          this.y += this.velocityY;

          // Boundary conditions
          if (this.x < 0 || this.x > canvas.width) {
            this.velocityX *= -1;
            this.x = Math.max(0, Math.min(canvas.width, this.x));
          }
          if (this.y < 0 || this.y > canvas.height) {
            this.velocityY *= -1;
            this.y = Math.max(0, Math.min(canvas.height, this.y));
          }

          // Quantum mode fusion behavior
          if (quantumMode) {
            if (!this.isFused && !this.fusionTarget && Math.random() < 0.02) {
              this.findFusionTarget();
            }

            if (this.fusionTarget && this.fusionProgress < 1) {
              this.fusionProgress += 0.05;
              if (this.fusionProgress >= 1) {
                this.completeFusion();
              }
            }
          }
        }

        findFusionTarget() {
          for (let i = 0; i < particles.length; i++) {
            if (i !== this.id && !particles[i].isFused && !particles[i].fusionTarget) {
              const distance = Math.sqrt(Math.pow(this.x - particles[i].x, 2) + Math.pow(this.y - particles[i].y, 2));
              if (distance < 100) {
                this.fusionTarget = i;
                particles[i].fusionTarget = this.id;
                return;
              }
            }
          }
        }

        completeFusion() {
          this.isFused = true;
          if (this.fusionTarget !== null) {
            const target = particles[this.fusionTarget];
            target.isFused = true;
          }

          // Create a new particle at the fusion location
          const fusionX = this.x;
          const fusionY = this.y;
          const newParticle = new QuantumParticle(fusionX, fusionY);
          newParticle.size = this.size + 1.5;
          newParticle.speed = this.speed * 1.2;
          newParticle.color = `hsl(${Math.random() * 20 + 200}, 100%, 60%)`;
          particles.push(newParticle);
          particleCount++;

          // Trigger quantum fusion sound
          synth.frequency.value = 800 + Math.random() * 400;
          synth.start();
          synth.stop(audioContext.currentTime + 0.5);
        }

        draw() {
          // Glowing trail effect
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size * 2, 0, Math.PI * 2);
          ctx.strokeStyle = `rgba(255, 255, 255, 0.1)`;
          ctx.lineWidth = 1;
          ctx.stroke();

          // Main particle with glow
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();

          // Glow effect
          const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.size * 3);
          gradient.addColorStop(0, this.color);
          gradient.addColorStop(1, `rgba(255, 255, 255, 0)`);
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size * 3, 0, Math.PI * 2);
          ctx.fillStyle = gradient;
          ctx.fill();

          // Quantum fusion effect
          if (this.fusionProgress > 0 && this.fusionProgress < 1) {
            const target = particles[this.fusionTarget];
            const connectionX = (this.x + target.x) / 2;
            const connectionY = (this.y + target.y) / 2;
            const connectionDist = Math.sqrt(Math.pow(this.x - target.x, 2) + Math.pow(this.y - target.y, 2));

            // Connection line
            ctx.beginPath();
            ctx.moveTo(this.x, this.y);
            ctx.lineTo(target.x, target.y);
            ctx.strokeStyle = `rgba(255, 255, 255, 0.3)`;
            ctx.lineWidth = 1;
            ctx.stroke();

            // Energy pulse at connection point
            ctx.beginPath();
            ctx.arc(connectionX, connectionY, this.size * this.fusionProgress * 2, 0, Math.PI * 2);
            ctx.fillStyle = `rgba(0, 242, 255, 0.5)`;
            ctx.fill();
          }
        }
      }

      // Mouse interaction
      const mouse = { x: 0, y: 0 };
      canvas.addEventListener('mousemove', (e) => {
        mouse.x = e.clientX;
        mouse.y = e.clientY;
      });

      canvas.addEventListener('click', (e) => {
        // Particle click sound
        particleSound.loop = false;
        particleSound.start();
        particleSound.stop(audioContext.currentTime + 0.2);
      });

      // Quantum mode toggle
      canvas.addEventListener('dblclick', () => {
        quantumMode = !quantumMode;
        quantumModeElement.textContent = `Quantum Mode: ${quantumMode ? 'ON' : 'OFF'}`;

        if (quantumMode) {
          synth.frequency.value = 1200;
          synth.start();
          setTimeout(() => synth.stop(audioContext.currentTime), 500);
        }
      });

      // Main variables
      let particles = [];
      let particleCount = 0;
      let quantumMode = false;
      let lastParticleTime = 0;
      const particleInterval = 1000; // ms

      // Main animation loop
      function animate() {
        // Clear with subtle background
        ctx.fillStyle = `rgba(10, 10, 26, 0.95)`;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        const now = Date.now();

        // Spawn new particles
        if (now - lastParticleTime > particleInterval) {
          const angle = Math.atan2(mouse.y - canvas.height/2, mouse.x - canvas.width/2);
          const distance = Math.sqrt(Math.pow(mouse.x - canvas.width/2, 2) + Math.pow(mouse.y - canvas.height/2, 2));
          const spawnX = canvas.width/2 + Math.cos(angle) * distance;
          const spawnY = canvas.height/2 + Math.sin(angle) * distance;

          particles.push(new QuantumParticle(spawnX, spawnY));
          particleCount++;
          lastParticleTime = now;

          // Particle click sound
          particleSound.loop = false;
          particleSound.start();
          particleSound.stop(audioContext.currentTime + 0.2);
        }

        // Update particles
        for (let i = particles.length - 1; i >= 0; i--) {
          const particle = particles[i];
          particle.update(quantumMode);

          // Remove particles that have decayed
          if (now - particle.birthTime > particle.decayTime && !particle.isFused) {
            particles.splice(i, 1);
            particleCount--;
          }
        }

        // Draw particles (reverse order for proper layering)
        for (let i = particles.length - 1; i >= 0; i--) {
          particles[i].draw();
        }

        // Update particle count in info panel
        particleCountElement.textContent = `Particles: ${particleCount}`;

        requestAnimationFrame(animate);
      }

      // Start animation
      animate();

      // Add mouse position to info panel
      function updateMousePosition() {
        infoPanel.querySelector('.particle-mode').textContent = `Particles: ${particleCount} | Mouse: ${Math.round(mouse.x)}, ${Math.round(mouse.y)}`;
        requestAnimationFrame(updateMousePosition);
      }
      updateMousePosition();
    });
  </script>
  <audio preload="auto">
    <source src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBXaW1hZCg8AHwAAAADAAAwABAAEAF-MiQBFQIBAQAAAP4AAD-7AAABAAgWAhAEAAEAAQACAAEAIABAAEAAQACAAEAIABDACoBAAA=" type="audio/wav">
  </audio>
</body>
</html>

// Ailey's RPG Crafting System for RPG Maker MZ
// Complete Node.js script that can be run directly or used as a plugin

// =============================================
// 1. CORE CRAFTING SYSTEM
// =============================================
class AileyCraftingSystem {
    constructor(game) {
        this.game = game;
        this.recipeDatabase = [];
        this.playerInventory = [];
        this.craftingStation = null;
        this.initialized = false;
    }

    init() {
        if (this.initialized) return;
        this.initialized = true;

        // Create a basic crafting station
        this.craftingStation = {
            name: "Ancient Crafting Table",
            tier: 1,
            maxRecipes: 5,
            recipes: []
        };

        // Initialize with some base recipes
        this.addRecipes([
            {
                name: "Basic Wooden Sword",
                tier: 1,
                materials: [
                    { item: "Wood", amount: 5 },
                    { item: "Iron Ore", amount: 2 }
                ],
                output: { item: "Wooden Sword", amount: 1 },
                description: "A simple sword made from wood and iron."
            },
            {
                name: "Potato Soup",
                tier: 1,
                materials: [
                    { item: "Potato", amount: 3 },
                    { item: "Onion", amount: 1 },
                    { item: "Water", amount: 2 }
                ],
                output: { item: "Potato Soup", amount: 1 },
                description: "A hearty soup that restores 20 HP."
            }
        ]);

        // Add some initial items to inventory
        this.playerInventory = [
            { item: "Wood", amount: 10 },
            { item: "Iron Ore", amount: 5 },
            { item: "Potato", amount: 8 },
            { item: "Onion", amount: 3 }
        ];

        console.log("Ailey's Crafting System initialized successfully!");
    }

    addRecipes(recipes) {
        recipes.forEach(recipe => {
            if (this.recipeDatabase.find(r => r.name === recipe.name)) return;

            // Validate recipe tier against station tier
            if (recipe.tier > this.craftingStation.tier) {
                console.warn(`Recipe "${recipe.name}" requires tier ${recipe.tier}, current station tier is ${this.craftingStation.tier}`);
                return;
            }

            this.recipeDatabase.push(recipe);
            this.craftingStation.recipes.push(recipe);

            if (this.craftingStation.recipes.length > this.craftingStation.maxRecipes) {
                this.craftingStation.recipes.shift(); // Remove oldest recipe when max reached
            }
        });
    }

    canCraft(recipe) {
        return this.playerInventory.every(item => {
            const required = recipe.materials.find(m => m.item === item.item);
            return required ? item.amount >= required.amount : true;
        });
    }

    craft(recipe) {
        if (!this.canCraft(recipe)) {
            console.log("Not enough materials to craft!");
            return false;
        }

        // Consume materials
        this.playerInventory.forEach(item => {
            const required = recipe.materials.find(m => m.item === item.item);
            if (required) {
                item.amount -= required.amount;
            }
        });

        // Add output item (or update if exists)
        const existingOutput = this.playerInventory.find(i => i.item === recipe.output.item);
        if (existingOutput) {
            existingOutput.amount += recipe.output.amount;
        } else {
            this.playerInventory.push({
                item: recipe.output.item,
                amount: recipe.output.amount
            });
        }

        console.log(`Successfully crafted ${recipe.output.item}!`);
        return true;
    }

    displayInventory() {
        console.log("\n=== INVENTORY ===");
        this.playerInventory.forEach(item => {
            console.log(`${item.item}: ${item.amount}`);
        });
    }

    displayAvailableRecipes() {
        console.log("\n=== AVAILABLE RECIPES ===");
        this.recipeDatabase.forEach(recipe => {
            console.log(`[${recipe.tier}] ${recipe.name} - ${recipe.description}`);
        });
    }
}

// =============================================
// 2. GAME SIMULATION FOR DEMO PURPOSES
// =============================================
class GameSimulation {
    constructor() {
        this.actor = {
            name: "Ailey",
            hp: 100,
            maxHp: 100
        };
    }

    useItem(item) {
        if (item.item === "Potato Soup" && item.amount > 0) {
            this.actor.hp = Math.min(this.actor.maxHp, this.actor.hp + 20);
            console.log("Restored 20 HP!");
            return true;
        }
        return false;
    }
}

// =============================================
// 3. MAIN EXECUTION FOR STANDALONE SCRIPT
// =============================================
if (typeof window === 'undefined') {
    // Running as Node.js script
    console.log("Running Ailey's RPG Crafting System Demo...");
    const gameSim = new GameSimulation();
    const craftingSystem = new AileyCraftingSystem(gameSim);

    craftingSystem.init();
    craftingSystem.displayInventory();
    craftingSystem.displayAvailableRecipes();

    // Demo crafting
    console.log("\n--- Crafting Attempt 1 (Should work) ---");
    craftingSystem.craft(craftingSystem.recipeDatabase[0]);
    craftingSystem.displayInventory();

    console.log("\n--- Crafting Attempt 2 (Should work) ---");
    craftingSystem.craft(craftingSystem.recipeDatabase[1]);
    craftingSystem.displayInventory();

    console.log("\n--- Using crafted item ---");
    craftingSystem.useItem({ item: "Potato Soup", amount: 1 });
    console.log(`Actor HP: ${gameSim.actor.hp}/${gameSim.actor.maxHp}`);

    console.log("\nDemo complete!");
} else {
    // This would be the RPG Maker MZ plugin implementation
    console.log("This would be the RPG Maker MZ plugin implementation");
    // Plugin registration would go here in actual RPG Maker
}

<?php
/**
 * Plugin Name: Round XP Badges Generator 🌟
 * Description: Generates cute circular XP badges with emojis for your site!
 * Version: 1.0
 * Author: Ailey
 * License: GPLv2 or later
 * Text Domain: round_xp_badges
 */

if (!defined('ABSPATH')) exit; // Exit if accessed directly

// ======================
// MAIN PLUGIN CLASS
// ======================
class Round_XP_Badges_Generator {
    private $badge_data = [
        'bronze' => ['emoji' => '🥉', 'xp' => 1000],
        'silver' => ['emoji' => '🥈', 'xp' => 5000],
        'gold' => ['emoji' => '🥇', 'xp' => 10000],
        'diamond' => ['emoji' => '💎', 'xp' => 20000],
        'platinum' => ['emoji' => '👑', 'xp' => 50000]
    ];

    public function __construct() {
        // WordPress Hooks
        if (function_exists('add_action')) {
            add_action('wp_enqueue_scripts', [$this, 'enqueue_assets']);
            add_shortcode('xp_badge', [$this, 'xp_badge_shortcode']);
            add_filter('widget_text', [$this, 'auto_insert_badge'], 10, 2);
        }

        // Joomla Hooks (if detected)
        if (class_exists('JApplication')) {
            JFactory::getApplication()->registerEvent('onContentBeforeDisplay', [$this, 'joomla_display_badge']);
        }
    }

    // WordPress Enqueue Scripts
    public function enqueue_assets() {
        wp_enqueue_style('round-badges-style', plugins_url('assets/style.css', __FILE__));
        wp_enqueue_script('round-badges-script', plugins_url('assets/script.js', __FILE__), [], null, true);
    }

    // Main Shortcode Handler
    public function xp_badge_shortcode($atts) {
        $atts = shortcode_atts([
            'level' => 'gold',
            'size' => 'medium',
            'animated' => 'true'
        ], $atts, 'xp_badge');

        $badge = $this->generate_badge_html($atts);
        return $badge;
    }

    // Generate the Badge HTML
    private function generate_badge_html($atts) {
        $level = sanitize_key($atts['level']);
        $size = sanitize_key($atts['size']);
        $animated = sanitize_key($atts['animated']) === 'true';

        if (!isset($this->badge_data[$level])) {
            $level = 'gold'; // Default to gold if invalid
        }

        $data = $this->badge_data[$level];
        $emoji = $data['emoji'];

        $size_class = $size === 'large' ? 'xp-badges-large' :
                     ($size === 'small' ? 'xp-badges-small' : 'xp-badges-medium');

        $animated_class = $animated ? 'xp-badges-animated' : '';

        return sprintf(
            '<div class="xp-badges-container %s %s" data-xp="%d" data-level="%s">
                <div class="xp-badges-badge">
                    %s
                </div>
                <div class="xp-badges-text">%s XP</div>
            </div>',
            $size_class,
            $animated_class,
            $data['xp'],
            $level,
            $emoji,
            number_format($data['xp'])
        );
    }

    // Auto-insert badge in widget text areas (WordPress)
    public function auto_insert_badge($text, $instance) {
        if (stripos($text, '[[xp-badge]]') !== false) {
            $text = str_replace('[[xp-badge]]', '[xp_badge]', $text);
        }
        return $text;
    }

    // Joomla Content Display Hook
    public function joomla_display_badge($context, $article, $params, $limitstart) {
        if (stripos($article->text, '[[xp-badge]]') !== false) {
            $badge_html = $this->generate_badge_html([
                'level' => 'gold',
                'size' => 'medium',
                'animated' => 'true'
            ]);
            $article->text = str_replace('[[xp-badge]]', $badge_html, $article->text);
        }
        return $article;
    }
}

// Initialize the plugin
new Round_XP_Badges_Generator();

// ======================
// ASSETS (would normally be in a separate file)
// ======================
?>
<!-- CSS would normally be in assets/style.css -->
<style>
.xp-badges-container {
    display: inline-block;
    position: relative;
    font-family: 'Segoe UI', sans-serif;
    border-radius: 50%;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    background: #f8f9fa;
    transition: all 0.3s ease;
}

.xp-badges-container.xp-badges-animated {
    animation: pulse 2s infinite;
}

.xp-badges-container.xp-badges-large {
    width: 80px;
    height: 80px;
    padding: 25px;
}

.xp-badges-container.xp-badges-medium {
    width: 60px;
    height: 60px;
    padding: 15px;
}

.xp-badges-container.xp-badges-small {
    width: 40px;
    height: 40px;
    padding: 10px;
}

.xp-badges-badge {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    color: #2c3e50;
    font-size: 24px;
    background: white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    position: relative;
    z-index: 1;
}

.xp-badges-text {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #6c757d;
    text-align: center;
    white-space: nowrap;
    z-index: 0;
}

/* Level-specific colors */
.xp-badges-container[data-level="bronze"] { background: #cd7f32; }
.xp-badges-container[data-level="silver"] { background: #c0c0c0; }
.xp-badges-container[data-level="gold"] { background: #ffd700; }
.xp-badges-container[data-level="diamond"] { background: #4169e1; }
.xp-badges-container[data-level="platinum"] { background: #e5e4e2; }

/* Animation */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
    50% { transform: scale(1.05); box-shadow: 0 6px 12px rgba(0,0,0,0.3); }
    100% { transform: scale(1); box-shadow: 0 4px 8px rgba(0,0,0,0.2); }
}
</style>

extends CanvasLayer

@export var intensity: float = 0.5
@export var speed_factor: float = 1.0
@export var color_shift: Vector3 = Vector3(0.2, 0.1, 0.0)
@export var glass_mask_intensity: float = 0.3
@export var neumorphic_intensity: float = 0.2
@export var particle_count: int = 200
@export var base_particle_size: float = 0.1

var _time_offset: float = 0.0
var _particles: PoolByteArray
var _shader_material: ShaderMaterial
var _canvas_item: CanvasItem

func _ready() -> void:
	_time_offset = randf()
	_particles = PoolByteArray.new()
	_material = create_material()

	_canvas_item = CanvasItem.new()
	add_child(_canvas_item)
	_canvas_item.material_override = _material

	regenerate_particles()

func _process(delta: float) -> void:
	_time_offset += delta * speed_factor
	_material.set_shader_param("time_offset", _time_offset + intensity * sin(_time_offset * 2.0))
	_material.set_shader_param("glass_mask_intensity", glass_mask_intensity * (0.5 + 0.5 * sin(_time_offset * 1.5)))
	_material.set_shader_param("neumorphic_intensity", neumorphic_intensity * (0.3 + 0.2 * cos(_time_offset * 1.0)))

	if Input.is_action_just_pressed("ui_accept"):
		regenerate_particles()

func create_material() -> ShaderMaterial:
	var material = ShaderMaterial.new()
	material.shader = load("res://glassmorphic_particle_shader.shader")
	material.set_shader_param("particle_count", particle_count)
	material.set_shader_param("base_size", base_particle_size)
	material.set_shader_param("color_shift", color_shift)
	material.set_shader_param("time_offset", _time_offset)
	material.set_shader_param("glass_mask_intensity", glass_mask_intensity)
	material.set_shader_param("neumorphic_intensity", neumorphic_intensity)
	return material

func regenerate_particles() -> void:
	_particles.clear()
	for i in range(particle_count):
		_particles.append((randf_range(-1.0, 1.0), randf_range(-1.0, 1.0), randf_range(0.5, 1.5)))
	_material.set_shader_param("particle_data", _particles)

import SwiftUI
import Charts

struct Mood: Identifiable, Equatable {
    let id = UUID()
    let date: Date
    let mood: MoodType
    var emoji: String { mood.rawValue }
    var color: Color { mood.color }
    var isFav: Bool = false

    static func example(timestamp: Int) -> Mood {
        let moodTypes = MoodType.allCases.shuffled()
        return Mood(date: Date(timeIntervalSince1970: Double(timestamp)),
                    mood: moodTypes[0], isFav: Bool.random())
    }
}

enum MoodType: String, CaseIterable, Identifiable {
    case happy = "😊"
    case relaxed = "😌"
    case nervous = "😬"
    case sad = "😢"
    case angry = "😠"

    var id: String { rawValue }
    var color: Color {
        switch self {
        case .happy: return .orange
        case .relaxed: return .blue
        case .nervous: return .purple
        case .sad: return .teal
        case .angry: return .red
        }
    }

    var desc: String {
        switch self {
        case .happy: return "Feeling cheerful and awesome!"
        case .relaxed: return "Chill vibes only, please."
        case .nervous: return "Why is my heart beating so fast?"
        case .sad: return "Today is a little gray."
        case .angry: return "Red alert! 🚨"
        }
    }
}

class MoodStore: ObservableObject {
    @Published var moods: [Mood] = []

    func addMood() {
        moods.append(.example(timestamp: Int(Date().timeIntervalSince1970)))
    }

    func deleteMood(at offsets: IndexSet) {
        moods.remove(at: offsets.first!)
    }

    var favoriteMoods: [Mood] {
        moods.filter { $0.isFav }
    }

    var groupedByDay: [Date: [Mood]] {
        var result = [Date: [Mood]]()
        for mood in moods {
            let calendar = Calendar.current
            if let day = calendar.startOfDay(for: mood.date) {
                result[day, default: []].append(mood)
            }
        }
        return result
    }
}

struct MoodJoyView: View {
    @StateObject private var store = MoodStore()
    @State private var selectedMood: Mood?
    @State private var showActionSheet = false
    @State private var showMoodSelection = false

    var body: some View {
        NavigationStack {
            List {
                Section("Today's Mood") {
                    Button(action: {
                        showMoodSelection = true
                    }) {
                        HStack {
                            if let mood = selectedMood {
                                mood.emoji
                                    .font(.system(size: 30))
                                    .foregroundColor(mood.color)
                                Text(mood.mood.rawValue)
                                    .font(.headline)
                            } else {
                                Text("Tap to add your mood!")
                                    .foregroundColor(.secondary)
                            }
                        }
                    }
                    .padding()
                    .background(selectedMood == nil ? Color(red: 0.9, green: 0.9, blue: 0.9) : selectedMood!.color.opacity(0.2))
                    .cornerRadius(12)
                }

                Section("Your Mood History") {
                    if moods.isEmpty {
                        Text("No moods yet! Tap above to add one.")
                            .foregroundColor(.secondary)
                    } else {
                        Chart(store.groupedByDay.sorted { $0.key < $1.key }.map { date, moods in
                            moods
                        }.flatMap { $0 }) { mood in
                            BarMark(
                                x: .value("Date", mood.date, unit: .day),
                                y: .value("Mood", 1)
                            )
                            .foregroundStyle(mood.color)
                            .cornerRadius(4)
                            .animation(.easeInOut, value: mood)
                        }
                        .chartXAxis {
                            AxisMarks(values: .automatic)
                        }
                        .chartYAxis {
                            AxisMarks(values: .automatic)
                        }
                        .frame(height: 250)
                    }
                }

                Section("Your Favorite Moods") {
                    if store.favoriteMoods.isEmpty {
                        Text("No favorites yet. Tap a mood to make it favorite!")
                            .foregroundColor(.secondary)
                    } else {
                        ForEach(store.favoriteMoods) { mood in
                            HStack {
                                mood.emoji
                                    .font(.system(size: 20))
                                    .foregroundColor(mood.color)
                                Text(mood.mood.rawValue)
                                    .font(.subheadline)
                                Spacer()
                                Image(systemName: mood.isFav ? "star.fill" : "star")
                                    .foregroundColor(mood.isFav ? .yellow : .gray)
                            }
                            .onTapGesture {
                                withAnimation {
                                    mood.isFav.toggle()
                                }
                            }
                        }
                    }
                }
            }
            .navigationTitle("MoodJoy 🌈")
            .toolbar {
                ToolbarItem(placement: .navigationBarTrailing) {
                    Button(action: { showActionSheet = true }) {
                        Image(systemName: "plus.circle.fill")
                            .font(.system(size: 24))
                    }
                }
            }
            .sheet(isPresented: $showMoodSelection) {
                MoodSelectionView(selectedMood: $selectedMood, onDismiss: { showMoodSelection = false })
            }
            .actionSheet(isPresented: $showActionSheet) {
                ActionSheet(title: Text("Add mood"), message: Text("How do you feel today?"), buttons: [
                    .default(Text("Add manually")) { showMoodSelection = true },
                    .default(Text("Auto-detect")) {
                        let moods = MoodType.allCases.shuffled()
                        selectedMood = Mood(date: Date(), mood: moods[0], isFav: Bool.random())
                        showMoodSelection = false
                    },
                    .cancel()
                ])
            }
        }
        .preferredColorScheme(.light)
        .accentColor(.orange)
        .onAppear {
            store.addMood() // Seed one mood for demo
        }
    }
}

struct MoodSelectionView: View {
    @Binding var selectedMood: Mood?
    var onDismiss: () -> Void

    var body: some View {
        NavigationView {
            List(MoodType.allCases, id: \.rawValue) { moodType in
                Button(action: {
                    selectedMood = Mood(date: Date(), mood: moodType, isFav: selectedMood?.isFav ?? false)
                    onDismiss()
                }) {
                    HStack {
                        moodType.emoji
                            .font(.system(size: 30))
                            .foregroundColor(moodType.color)
                        Text(moodType.rawValue)
                            .font(.headline)
                        Spacer()
                        if let selected = selectedMood, selected.mood == moodType {
                            Image(systemName: "checkmark.circle.fill")
                                .foregroundColor(moodType.color)
                        }
                    }
                }
                .padding()
            }
            .navigationTitle("Choose your mood")
            .navigationBarTitleDisplayMode(.inline)
        }
    }
}

struct MoodJoyView_Previews: PreviewProvider {
    static var previews: some View {
        MoodJoyView()
            .previewDevice("iPhone 15")
    }
}

// Complete Particle Storm Generator for RPG Maker MZ
// Standalone Node.js script with full RPG Maker MZ compatibility
// Features: Dynamic weather systems, interactive particles, realistic storm simulation

const { join } = require('path');
const fs = require('fs').promises;

class ParticleStorm {
  constructor() {
    this.particles = [];
    this.weatherEffects = [];
    this.simulationRunning = false;
    this.frames = 0;
  }

  // RPG Maker MZ Compatible Particle System
  createParticle(x, y, color, speed, duration) {
    const particle = {
      id: this.frames++,
      x,
      y,
      color,
      speed: [speed * (Math.random() * 0.5 + 0.25), speed * (Math.random() * 0.5 + 0.25)],
      size: Math.random() * 5 + 2,
      alpha: Math.random() * 0.7 + 0.3,
      duration,
      age: 0,
      orbitRadius: Math.random() * 10 + 5,
      orbitSpeed: Math.random() * 0.05 + 0.01,
      isWeatherEffect: false
    };

    this.particles.push(particle);
    return particle.id;
  }

  // Dynamic Weather Effects
  startWeatherEffect(type, intensity, duration) {
    const effect = {
      type,
      intensity,
      startTime: Date.now(),
      endTime: Date.now() + duration * 1000,
      particles: [],
      active: true
    };

    this.weatherEffects.push(effect);

    if (type === 'storm') {
      setInterval(() => this.updateStormEffect(effect), 16);
    }

    return effect;
  }

  updateStormEffect(effect) {
    if (effect.active && Date.now() < effect.endTime) {
      const count = Math.floor(effect.intensity * 10);

      for (let i = 0; i < count; i++) {
        this.createParticle(
          Math.random() * 800,
          Math.random() * 600,
          `hsl(${Math.random() * 30 + 180}, 80%, ${Math.random() * 50 + 50}%)`,
          2 + Math.random() * 3,
          1 + Math.random() * 2
        );
      }
    } else {
      effect.active = false;
    }
  }

  // RPG Maker MZ Draw Simulation
  drawParticles(ctx) {
    // Simulate RPG Maker MZ Canvas
    const canvas = {
      width: 800,
      height: 600,
      clear: (color) => {
        ctx.fillStyle = color || 'rgba(0,0,0,0.1)';
        ctx.fillRect(0, 0, 800, 600);
      }
    };

    // Clear with storm background
    canvas.clear('rgba(20, 20, 40, 0.8)');

    // Draw all particles
    this.particles.forEach(particle => {
      if (particle.age < particle.duration) {
        // Update position
        particle.x += particle.speed[0];
        particle.y += particle.speed[1];

        // Add orbit effect
        if (particle.orbitRadius) {
          const angle = (Date.now() / 1000 + particle.id * 0.1) * particle.orbitSpeed;
          const orbitX = Math.sin(angle) * particle.orbitRadius;
          const orbitY = Math.cos(angle) * particle.orbitRadius;

          particle.x += orbitX;
          particle.y += orbitY;
        }

        // Draw particle
        ctx.globalAlpha = particle.alpha * (1 - particle.age / particle.duration);
        ctx.fillStyle = particle.color;
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
        ctx.fill();
      }
    });

    // Clean up dead particles
    this.particles = this.particles.filter(p => p.age < p.duration);
  }

  // Simulation Loop
  startSimulation() {
    if (this.simulationRunning) return;

    this.simulationRunning = true;
    this.lastTime = Date.now();

    const canvas = document.createElement('canvas');
    canvas.width = 800;
    canvas.height = 600;
    document.body.appendChild(canvas);

    const ctx = canvas.getContext('2d');

    function loop() {
      const now = Date.now();
      const delta = now - ParticleStorm.lastTime;
      ParticleStorm.lastTime = now;

      // Update weather effects
      ParticleStorm.weatherEffects.forEach(effect => {
        if (Date.now() < effect.endTime) {
          ParticleStorm.updateStormEffect(effect);
        }
      });

      // Draw everything
      ParticleStorm.drawParticles(ctx);

      if (ParticleStorm.simulationRunning) {
        requestAnimationFrame(loop);
      }
    }

    loop();
  }

  stopSimulation() {
    this.simulationRunning = false;
  }

  // RPG Maker MZ Plugin Export
  exportPlugin() {
    const pluginCode = `
// Particle Storm Generator Plugin for RPG Maker MZ
// Dynamic weather and particle effects

/*:
 * @plugindesc Particle Storm Generator with dynamic weather effects
 * @author Ailey
 * @help Features:
 *  - Dynamic storm effects
 *  - Interactive particles
 *  - Weather system controller
 */

var ParticleStorm = ParticleStorm || function() {
  var particles = [];
  var weatherEffects = [];
  var frames = 0;

  function createParticle(x, y, color, speed, duration) {
    var particle = {
      id: frames++,
      x: x,
      y: y,
      color: color,
      speed: [speed * (Math.random() * 0.5 + 0.25), speed * (Math.random() * 0.5 + 0.25)],
      size: Math.random() * 5 + 2,
      alpha: Math.random() * 0.7 + 0.3,
      duration: duration,
      age: 0,
      orbitRadius: Math.random() * 10 + 5,
      orbitSpeed: Math.random() * 0.05 + 0.01
    };

    particles.push(particle);
    return particle.id;
  }

  function startWeatherEffect(type, intensity, duration) {
    var effect = {
      type: type,
      intensity: intensity,
      startTime: Date.now(),
      endTime: Date.now() + duration * 1000,
      particles: []
    };

    weatherEffects.push(effect);

    if (type === 'storm') {
      setInterval(updateStormEffect, 16, effect);
    }

    return effect;
  }

  function updateStormEffect(effect) {
    if (Date.now() < effect.endTime) {
      var count = Math.floor(effect.intensity * 10);

      for (var i = 0; i < count; i++) {
        createParticle(
          Math.random() * 800,
          Math.random() * 600,
          \`hsl(${Math.random() * 30 + 180}, 80%, ${Math.random() * 50 + 50}%)\`,
          2 + Math.random() * 3,
          1 + Math.random() * 2
        );
      }
    } else {
      weatherEffects = weatherEffects.filter(e => e !== effect);
    }
  }

  function drawParticles(ctx) {
    ctx.clearRect(0, 0, 800, 600);
    ctx.fillStyle = 'rgba(20, 20, 40, 0.8)';
    ctx.fillRect(0, 0, 800, 600);

    particles.forEach(function(particle) {
      if (particle.age < particle.duration) {
        particle.x += particle.speed[0];
        particle.y += particle.speed[1];

        if (particle.orbitRadius) {
          var angle = (Date.now() / 1000 + particle.id * 0.1) * particle.orbitSpeed;
          var orbitX = Math.sin(angle) * particle.orbitRadius;
          var orbitY = Math.cos(angle) * particle.orbitRadius;

          particle.x += orbitX;
          particle.y += orbitY;
        }

        ctx.globalAlpha = particle.alpha * (1 - particle.age / particle.duration);
        ctx.fillStyle = particle.color;
        ctx.beginPath();
        ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
        ctx.fill();
      }
    });

    particles = particles.filter(p => p.age < p.duration);
  }

  return {
    createParticle: createParticle,
    startWeatherEffect: startWeatherEffect,
    drawParticles: drawParticles
  };
}();

if (typeof Scene_Base !== 'undefined') {
  Scene_Base.prototype.update = function() {
    Scene_Base.prototype.update.call(this);
    ParticleStorm.drawParticles(this._renderer._c);
  };
}
    `;

    const outputPath = join(__dirname, 'ParticleStormPlugin.js');
    await fs.writeFile(outputPath, pluginCode);
    console.log(`Plugin exported to ${outputPath}`);
    return outputPath;
  }
}

// Main Execution
const storm = new ParticleStorm();

// Start with a sample storm effect
storm.startWeatherEffect('storm', 1.5, 10);

// Start the simulation
storm.startSimulation();

// Allow exporting to RPG Maker MZ plugin
if (process.argv.includes('--export')) {
  storm.exportPlugin();
}

// Cleanup on exit
process.on('SIGINT', () => {
  storm.stopSimulation();
  process.exit();
});

use rand::Rng;
use std::io;

const CHAR_SETS: [&str; 4] = [
    "23456789BCDFGHJKLMNPQRSTUVWXYZ", // Kein 1, O, 0, l, I, weil Puhle
    "!\"#$%&'()*+,-./:;<=>?@[\\]^_`{|}~",
    "abcdefghijkmnpqrstuvwxyz",       // Kein i, l, weil sie gleich aussehen wenn man mal betrunken ist
    "0123456789"                       // Nur Zahlen, für diejenigen die numbers lieben
];

fn main() {
    println!("AileyPass - Passwortgenerator mit Entropie-Analyse");
    println!("------------------------------------------------");
    println!("Gib die gewünschte Länge ein (8-100):");
    let length = read_positive_int(8, 100);

    println!("\nWähle ein Char-Set (1-4):");
    for (i, set) in CHAR_SETS.iter().enumerate() {
        println!("{}. {}", i + 1, set);
    }
    let set_idx = (read_positive_int(1, 4) - 1) as usize;
    let char_set = CHAR_SETS[set_idx].chars().collect::<Vec<_>>();

    println!("\nGeneriere Passwort...");
    let mut rng = rand::thread_rng();
    let mut password = String::with_capacity(length);
    let mut chars: Vec<char> = char_set.clone();

    for _ in 0..length {
        let idx = rng.gen_range(0..chars.len());
        password.push(chars[idx]);
    }

    let entropy = calculate_entropy(&password, &char_set);
    let entropy_bar = generate_entropy_bar(entropy);

    println!("\nErgebnis:");
    println!("{:-^80}", "");
    println!("Passwort: {}", password);
    println!("Entropie: {:.2} bits", entropy);
    println!("Entropie-Balken: {}", entropy_bar);
    println!("{:-^80}", "");
}

fn read_positive_int(min: u32, max: u32) -> u32 {
    loop {
        let mut input = String::new();
        io::stdin().read_line(&mut input).expect("Fehler beim Lesen");

        match input.trim().parse::<u32>() {
            Ok(num) if num >= min && num <= max => return num,
            Ok(_) => println!("Zahl muss zwischen {} und {} liegen", min, max),
            Err(_) => println!("Bitte eine gültige Zahl eingeben"),
        }
    }
}

fn calculate_entropy(password: &str, char_set: &[char]) -> f64 {
    let set_size = char_set.len() as f64;
    let entropy = password.len() as f64 * set_size.ln() / 2.0;
    entropy
}

fn generate_entropy_bar(entropy: f64) -> String {
    let max_entropy = 256.0; // Theoretisches Maximum für 256 Zeichen-Set
    let bar_length = 50;
    let filled = (entropy / max_entropy * bar_length as f64).round() as u32;
    let filled = std::cmp::min(filled, bar_length);
    let empty = bar_length - filled;

    format!(
        "{}{}",
        "█".repeat(filled as usize),
        "-".repeat(empty)
    )
}

// nebula-cron-scheduler.js
const express = require('express');
const cron = require('node-cron');
const { exec } = require('child_process');
const { join } = require('path');

class NebulaCronScheduler {
  constructor() {
    this.jobs = new Map();
    this.app = express();
    this.setupUI();
    this.setupRoutes();
    this.startServer();
  }

  setupUI() {
    this.app.use(express.static(join(__dirname, 'ui")));
    this.app.set('view engine', 'ejs');
  }

  setupRoutes() {
    this.app.get('/', (req, res) => {
      res.render('index', { jobs: Array.from(this.jobs.values()) });
    });

    this.app.post('/schedule', express.json(), (req, res) => {
      const { name, cronTime, command } = req.body;
      if (!name || !cronTime || !command) {
        return res.status(400).json({ error: 'Missing required fields' });
      }

      const job = cron.schedule(cronTime, () => {
        console.log(`Running job: ${name}`);
        exec(command, (error, stdout, stderr) => {
          if (error) console.error(`Job ${name} error:`, error);
          if (stderr) console.error(`Job ${name} stderr:`, stderr);
          console.log(`Job ${name} output:`, stdout);
        });
      });

      this.jobs.set(name, { cronTime, command, job });
      res.status(201).json({ message: 'Job scheduled' });
    });

    this.app.delete('/delete/:name', (req, res) => {
      const { name } = req.params;
      if (this.jobs.has(name)) {
        this.jobs.get(name).job.stop();
        this.jobs.delete(name);
      }
      res.status(200).json({ message: 'Job removed' });
    });
  }

  startServer() {
    const PORT = process.env.PORT || 3000;
    this.app.listen(PORT, () => {
      console.log(`Nebula Cron Scheduler running on http://localhost:${PORT}`);
    });
  }
}

new NebulaCronScheduler();

// Glassmorphism & Neumorphism UI (served from ui/ directory)
/*
UI Directory Structure:
nebula-cron-scheduler/
  ├── ui/
  │   ├── index.ejs
  │   ├── styles.css
  │   └── script.js
  └── nebula-cron-scheduler.js
*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shimmering Mosaic Memory</title>
    <style>
        :root {
            --primary: #6a11cb;
            --secondary: #2575fc;
            --accent: #f221a9;
            --background: #121212;
            --card-front: #2a2a3a;
            --card-back: #3a3a4a;
            --confetti-color: #f221a9;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: var(--background);
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }

        h1 {
            margin-bottom: 20px;
            text-align: center;
            font-size: 2.5rem;
            color: var(--primary);
            text-shadow: 0 0 10px rgba(106, 17, 203, 0.5);
        }

        .game-container {
            width: 600px;
            max-width: 90%;
            margin-bottom: 30px;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
            margin-bottom: 20px;
        }

        .card {
            perspective: 1000px;
            width: 100px;
            height: 100px;
            position: relative;
            cursor: pointer;
            border-radius: 10px;
            overflow: hidden;
            transition: transform 0.6s;
            background-color: var(--card-back);
        }

        .card.flipped {
            transform: rotateY(180deg);
        }

        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 10px;
            font-size: 1.5rem;
            font-weight: bold;
            color: white;
            box-shadow: 0 5px 15px rgba(0,0,0,0.3);
        }

        .card-back {
            background-color: var(--card-back);
            transform: rotateY(180deg);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            font-size: 1.5rem;
        }

        .card.front-mosaic {
            background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            position: relative;
        }

        .card.front-mosaic::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 10% 20%, var(--primary), transparent 20%),
                        radial-gradient(circle at 90% 80%, var(--accent), transparent 20%);
            background-size: 50px 50px, 50px 50px;
            animation: shimmer 3s infinite alternate;
        }

        .card.back-mosaic {
            background-color: var(--card-back);
            background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
            background-size: 15px 15px;
            position: relative;
            font-size: 1rem;
        }

        .card.back-mosaic::before {
            content: attr(data-value);
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: var(--secondary);
            font-size: 2rem;
            font-weight: bold;
        }

        .score-display {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 20px;
            font-size: 1.2rem;
        }

        .score {
            background-color: rgba(0,0,0,0.3);
            padding: 10px 20px;
            border-radius: 5px;
            text-align: center;
        }

        .btn {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 5px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s;
            margin-top: 10px;
        }

        .btn:hover {
            background-color: var(--secondary);
            transform: translateY(-2px);
        }

        .confetti {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 1000;
        }

        .confetti-piece {
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: var(--confetti-color);
            border-radius: 50%;
            animation: confetti-fall 2s linear;
        }

        @keyframes shimmer {
            0% {
                opacity: 0.5;
                background-position: 0 0;
            }
            100% {
                opacity: 1;
                background-position: 200px 200px;
            }
        }

        @keyframes confetti-fall {
            0% {
                transform: translateY(-100vh) rotate(0deg);
                opacity: 1;
            }
            100% {
                transform: translateY(100vh) rotate(360deg);
                opacity: 0;
            }
        }

        .modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s;
        }

        .modal.active {
            opacity: 1;
            visibility: visible;
        }

        .modal-content {
            background-color: #1e1e1e;
            padding: 30px;
            border-radius: 10px;
            text-align: center;
            max-width: 500px;
            width: 90%;
        }

        .modal h2 {
            margin-bottom: 20px;
            color: var(--primary);
        }

        .modal button {
            background-color: var(--secondary);
            margin-top: 20px;
        }

        .tutorial {
            position: fixed;
            bottom: 20px;
            left: 20px;
            background-color: rgba(0,0,0,0.7);
            padding: 15px;
            border-radius: 5px;
            max-width: 250px;
            z-index: 100;
        }

        .tutorial button {
            background-color: var(--accent);
            margin-top: 10px;
            font-size: 0.9rem;
        }

        @media (max-width: 600px) {
            .grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 5px;
            }

            .card {
                width: 70px;
                height: 70px;
            }

            .game-container {
                width: 90%;
            }
        }
    </style>
</head>
<body>
    <h1>Shimmering Mosaic Memory</h1>

    <div class="score-display">
        <div class="score">Score: <span id="score">0</span></div>
        <div class="score">Pairs: <span id="pairs">0/8</span></div>
    </div>

    <div class="game-container">
        <div class="grid" id="grid"></div>
        <button class="btn" id="reset-btn">Reset Game</button>
    </div>

    <div class="modal" id="win-modal">
        <div class="modal-content">
            <h2>🎉 You Win! 🎉</h2>
            <p>You found all pairs in just <span id="time-taken">0</span> seconds!</p>
            <button id="close-modal">Play Again</button>
        </div>
    </div>

    <div class="tutorial">
        <p>Click on two cards to match them. A shimmering pattern reveals the hidden emoji!</p>
        <button id="close-tutorial">Got it!</button>
    </div>

    <div class="confetti" id="confetti"></div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const grid = document.getElementById('grid');
            const scoreDisplay = document.getElementById('score');
            const pairsDisplay = document.getElementById('pairs');
            const resetBtn = document.getElementById('reset-btn');
            const winModal = document.getElementById('win-modal');
            const closeModal = document.getElementById('close-modal');
            const tutorial = document.getElementById('tutorial');
            const closeTutorial = document.getElementById('close-tutorial');
            const confettiContainer = document.getElementById('confetti');
            const timeTakenDisplay = document.getElementById('time-taken');

            let cards = [];
            let flippedCards = [];
            let score = 0;
            let pairsFound = 0;
            let startTime = null;

            // Emoji set with mosaic visuals
            const emojis = ['🌸', '🐸', '🎭', '🐙', '💫', '🌿', '🐚', '💎', '🌹', '🦑', '💐', '🐢'];
            const emojiPairs = [];

            // Create pairs
            for (let i = 0; i < emojis.length; i += 2) {
                emojiPairs.push(emojis[i]);
                emojiPairs.push(emojis[i + 1]);
            }

            // Shuffle the pairs
            emojiPairs.sort(() => Math.random() - 0.5);

            // Create cards
            emojiPairs.forEach((emoji, index) => {
                const card = document.createElement('div');
                card.className = 'card';
                card.dataset.value = emoji;

                // Front with shimmer effect
                const front = document.createElement('div');
                front.className = 'card-front front-mosaic';
                front.innerHTML = `
                    <div style="position: relative; width: 100%; height: 100%;">
                        <div style="position: absolute; top: 20%; left: 20%; width: 60px; height: 60px; background-color: var(--primary); border-radius: 50%; animation: shimmer 3s infinite alternate;"></div>
                        <div style="position: absolute; top: 30%; right: 20%; width: 60px; height: 60px; background-color: var(--accent); border-radius: 50%; animation: shimmer 3s infinite alternate 0.5s;"></div>
                    </div>
                `;

                // Back with emoji
                const back = document.createElement('div');
                back.className = 'card-back back-mosaic';
                back.innerHTML = `<span>${emoji}</span>`;

                card.appendChild(front);
                card.appendChild(back);
                grid.appendChild(card);
                cards.push(card);
            });

            // Reset game
            function resetGame() {
                cards.forEach(card => {
                    card.classList.remove('flipped');
                    flippedCards = [];
                });

                // Shuffle cards
                cards.sort(() => Math.random() - 0.5);
                grid.innerHTML = '';
                cards.forEach(card => grid.appendChild(card));

                score = 0;
                scoreDisplay.textContent = score;
                pairsFound = 0;
                pairsDisplay.textContent = `${pairsFound}/8`;
                winModal.classList.remove('active');

                if (startTime) {
                    clearInterval(startTime);
                    startTime = null;
                }

                // Clear confetti
                confettiContainer.innerHTML = '';
            }

            // Flip card
            function flipCard(card) {
                if (flippedCards.length === 2 || card.classList.contains('flipped')) return;

                card.classList.add('flipped');
                flippedCards.push(card);

                if (flippedCards.length === 2) {
                    // Check for match
                    if (flippedCards[0].dataset.value === flippedCards[1].dataset.value) {
                        score += 10;
                        scoreDisplay.textContent = score;
                        pairsFound++;
                        pairsDisplay.textContent = `${pairsFound}/8`;

                        if (pairsFound === 8) {
                            // Win condition
                            winModal.classList.add('active');
                            const endTime = new Date();
                            const timeTaken = (endTime - startTime) / 1000;
                            timeTakenDisplay.textContent = timeTaken.toFixed(1);
                            throwConfetti();
                        } else {
                            // Small delay before flipping back
                            setTimeout(() => {
                                flippedCards.forEach(card => card.classList.remove('flipped'));
                                flippedCards = [];
                            }, 1000);
                        }
                    } else {
                        // Mismatch - flip back after delay
                        setTimeout(() => {
                            flippedCards.forEach(card => card.classList.remove('flipped'));
                            flippedCards = [];
                        }, 1000);
                    }
                }
            }

            // Event listeners for cards
            cards.forEach(card => {
                card.addEventListener('click', () => flipCard(card));
            });

            // Reset button
            resetBtn.addEventListener('click', resetGame);

            // Close modal
            closeModal.addEventListener('click', resetGame);

            // Close tutorial
            closeTutorial.addEventListener('click', () => {
                tutorial.style.display = 'none';
            });

            // Throw confetti
            function throwConfetti() {
                const confettiCount = 100;
                for (let i = 0; i < confettiCount; i++) {
                    const piece = document.createElement('div');
                    piece.className = 'confetti-piece';
                    piece.style.left = `${Math.random() * 100}%`;
                    piece.style.animationDelay = `${Math.random() * 2}s`;
                    confettiContainer.appendChild(piece);
                }
            }

            // Start timer
            resetGame();
        });
    </script>
</body>
</html>

#!/usr/bin/env python3
"""
Ailey OCR Screenshot Organizer

Organizes screenshots based on OCR text content with custom folder structure and dark mode support.
"""

import os
import sys
import json
import tempfile
import logging
from pathlib import Path
from typing import Dict, List, Optional, Tuple
from dataclasses import dataclass
import tkinter as tk
from tkinter import ttk, filedialog, messagebox
from PIL import Image, ImageTk, ImageGrab
import pytesseract
import pyperclip
from typing_extensions import Annotated

# Configuration
DEFAULT_CONFIG = {
    "screenshot_dir": "~/screenshots",
    "ocr_language": "eng",
    "theme": "dark",
    "folder_pattern": "{text_line1[:30]}/{text_line2[:30]}",
    "max_characters": 30,
    "sorting_key": "text",
    "case_sensitive": False
}

LOG_FORMAT = "%(asctime)s - %(levelname)s - %(message)s"

@dataclass
class ScreenshotData:
    """Data structure to hold OCR results and metadata"""
    filename: str
    text_lines: List[str]
    first_line: str
    second_line: str
    full_text: str
    folder_path: str

class ThemeManager:
    """Handles dark/light theme switching"""
    def __init__(self, root: tk.Tk):
        self.root = root
        self.themes = {
            "dark": {
                "bg": "#2b2b2b",
                "fg": "#ffffff",
                "button_bg": "#3d3d3d",
                "button_fg": "#ffffff",
                "frame_bg": "#3d3d3d",
                "label_fg": "#ffffff",
                "treeview_bg": "#2b2b2b",
                "treeview_fg": "#ffffff",
                "highlight": "#4d4d4d"
            },
            "light": {
                "bg": "#ffffff",
                "fg": "#000000",
                "button_bg": "#e0e0e0",
                "button_fg": "#000000",
                "frame_bg": "#e0e0e0",
                "label_fg": "#000000",
                "treeview_bg": "#ffffff",
                "treeview_fg": "#000000",
                "highlight": "#c0c0c0"
            }
        }

    def apply_theme(self, theme_name: str):
        """Apply selected theme to all widgets"""
        theme = self.themes.get(theme_name, self.themes["dark"])
        self.root.configure(bg=theme["bg"])

        # Configure all widgets with the theme
        for widget in self.root.winfo_children():
            if isinstance(widget, ttk.Frame):
                widget.configure(style="TFrame")
            elif isinstance(widget, ttk.Button):
                widget.configure(style="TButton")
            elif isinstance(widget, ttk.Label):
                widget.configure(style="TLabel")
            elif isinstance(widget, ttk.Treeview):
                widget.configure(style="Treeview")

        # Configure styles
        style = ttk.Style()
        style.theme_use("clam")
        style.configure("TFrame", background=theme["frame_bg"])
        style.configure("TButton",
                       background=theme["button_bg"],
                       foreground=theme["button_fg"],
                       focuscolor=theme["highlight"])
        style.configure("TLabel",
                       background=theme["bg"],
                       foreground=theme["label_fg"])
        style.configure("Treeview",
                       background=theme["treeview_bg"],
                       foreground=theme["treeview_fg"],
                       fieldbackground=theme["treeview_bg"],
                       rowbackground=theme["treeview_bg"],
                       bordercolor=theme["highlight"])
        style.map("Treeview",
                 background=[("selected", theme["highlight"])],
                 foreground=[("selected", theme["treeview_fg"])])
        style.configure("Dark.TFrame", background=theme["frame_bg"])
        style.configure("Dark.TLabel", background=theme["bg"], foreground=theme["label_fg"])

class ScreenshotOrganizer:
    """Main class for organizing screenshots by OCR content"""
    def __init__(self, root: tk.Tk):
        self.root = root
        self.root.title("Ailey OCR Screenshot Organizer")
        self.root.geometry("800x600")
        self.root.resizable(True, True)

        # Initialize logging
        logging.basicConfig(level=logging.INFO, format=LOG_FORMAT)
        self.logger = logging.getLogger("ScreenshotOrganizer")

        # Configuration management
        self.config_file = Path.home() / ".screenshot_organizer_config.json"
        self.config = self._load_config()
        self.theme_manager = ThemeManager(root)
        self.theme_manager.apply_theme(self.config["theme"])

        # Data storage
        self.screenshots: List[ScreenshotData] = []
        self.current_screenshot_index = -1

        # GUI Setup
        self.setup_ui()

    def setup_ui(self):
        """Set up the user interface"""
        main_frame = ttk.Frame(self.root, padding="10")
        main_frame.pack(fill=tk.BOTH, expand=True)

        # Control frame
        control_frame = ttk.Frame(main_frame)
        control_frame.pack(fill=tk.X, pady=(0, 10))

        # Theme selection
        theme_frame = ttk.Frame(control_frame)
        theme_frame.pack(side=tk.RIGHT, padx=(10, 0))

        ttk.Label(theme_frame, text="Theme:").pack(side=tk.LEFT)
        self.theme_var = tk.StringVar(value=self.config["theme"])
        theme_menu = ttk.OptionMenu(theme_frame, self.theme_var, *["dark", "light"])
        theme_menu.pack(side=tk.LEFT, padx=(0, 5))
        theme_menu.configure(width=8)

        # Mode selection
        mode_frame = ttk.Frame(control_frame)
        mode_frame.pack(side=tk.LEFT)

        ttk.Label(mode_frame, text="Mode:").pack(side=tk.LEFT)
        self.mode_var = tk.StringVar(value="batch")
        mode_menu = ttk.OptionMenu(mode_frame, self.mode_var, "batch", "single")
        mode_menu.pack(side=tk.LEFT, padx=(0, 5))
        mode_menu.configure(width=8)

        # Buttons
        button_frame = ttk.Frame(control_frame)
        button_frame.pack(side=tk.LEFT, padx=(10, 0))

        ttk.Button(button_frame, text="Capture Screenshot", command=self.capture_screenshot).pack(side=tk.LEFT, padx=(0, 5))
        ttk.Button(button_frame, text="Process All", command=self.process_all_screenshots).pack(side=tk.LEFT, padx=(0, 5))
        ttk.Button(button_frame, text="Save Config", command=self.save_config).pack(side=tk.LEFT, padx=(0, 5))

        # Preview frame
        preview_frame = ttk.Frame(main_frame)
        preview_frame.pack(fill=tk.BOTH, expand=True)

        # Treeview for file list
        self.tree = ttk.Treeview(preview_frame, columns=("Filename", "Folder", "First Line", "Second Line"), show="headings")
        self.tree.heading("Filename", text="Filename")
        self.tree.heading("Folder", text="Folder")
        self.tree.heading("First Line", text="First Line")
        self.tree.heading("Second Line", text="Second Line")
        self.tree.column("Filename", width=200)
        self.tree.column("Folder", width=200)
        self.tree.column("First Line", width=200)
        self.tree.column("Second Line", width=200)

        self.tree.pack(fill=tk.BOTH, expand=True, side=tk.LEFT, padx=(0, 10))

        # Scrollbar
        scrollbar = ttk.Scrollbar(preview_frame, orient=tk.VERTICAL, command=self.tree.yview)
        scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
        self.tree.configure(yscrollcommand=scrollbar.set)

        # Preview image
        self.preview_label = ttk.Label(preview_frame)
        self.preview_label.pack(fill=tk.BOTH, expand=True, side=tk.RIGHT)
        self.preview_label.config(borderwidth=2, relief=tk.SOLID)

        # Status bar
        self.status_var = tk.StringVar()
        self.status_var.set("Ready")
        status_bar = ttk.Label(main_frame, textvariable=self.status_var, relief=tk.SUNKEN)
        status_bar.pack(fill=tk.X, pady=(10, 0))

        # Bind treeview selection
        self.tree.bind("<<TreeviewSelect>>", self.on_tree_select)

        # Bind theme change
        self.theme_var.trace_add("write", lambda *args: self.on_theme_change())

    def on_theme_change(self, *args):
        """Handle theme changes"""
        new_theme = self.theme_var.get()
        self.config["theme"] = new_theme
        self.theme_manager.apply_theme(new_theme)

    def on_tree_select(self, event):
        """Handle treeview selection"""
        selected = self.tree.selection()
        if selected:
            index = int(selected[0][1:])  # Extract index from "I001"
            if index < len(self.screenshots):
                self.current_screenshot_index = index
                self.update_preview()

    def update_preview(self):
        """Update the image preview"""
        if self.current_screenshot_index >= 0 and self.current_screenshot_index < len(self.screenshots):
            data = self.screenshots[self.current_screenshot_index]
            if data.filename:
                try:
                    img = Image.open(data.filename)
                    img.thumbnail((300, 300))
                    photo = ImageTk.PhotoImage(img)
                    self.preview_label.config(image=photo)
                    self.preview_label.image = photo
                    self.status_var.set(f"Preview: {data.filename} - {len(data.text_lines)} lines")
                except Exception as e:
                    self.logger.error(f"Error loading preview: {e}")
                    self.preview_label.config(image=None)
                    self.preview_label.image = None
                    self.status_var.set("Error loading preview")
        else:
            self.preview_label.config(image=None)
            self.preview_label.image = None
            self.status_var.set("Select a screenshot to preview")

    def capture_screenshot(self):
        """Capture a screenshot from the screen"""
        try:
            self.status_var.set("Capturing screenshot...")
            self.root.update()

            # Get screen dimensions
            screen = ImageGrab.grab()
            width, height = screen.size

            # Ask for coordinates
            x = self.root.winfo_rootx() + self.root.winfo_width() + 10
            y = self.root.winfo_rooty()

            # Capture the screenshot
            screenshot = ImageGrab.grab(bbox=(x, y, x + width, y + height))

            # Save temporarily
            temp_file = Path(tempfile.mkstemp(suffix=".png")[1])
            screenshot.save(temp_file, "PNG")

            # Process the new screenshot
            self.process_screenshot(temp_file)

        except Exception as e:
            self.logger.error(f"Error capturing screenshot: {e}")
            messagebox.showerror("Error", f"Failed to capture screenshot: {e}")

    def process_screenshot(self, image_path: Path):
        """Process a single screenshot with OCR"""
        try:
            self.status_var.set(f"Processing: {image_path.name}...")
            self.root.update()

            # Perform OCR
            text = pytesseract.image_to_string(image_path, lang=self.config["ocr_language"])

            # Clean and parse text
            lines = [line.strip() for line in text.split("\n") if line.strip()]
            first_line = lines[0] if len(lines) > 0 else ""
            second_line = lines[1] if len(lines) > 1 else ""

            # Truncate lines if needed
            if len(first_line) > self.config["max_characters"]:
                first_line = first_line[:self.config["max_characters"]] + "..."
            if len(second_line) > self.config["max_characters"]:
                second_line = second_line[:self.config["max_characters"]] + "..."

            # Create folder path
            folder_pattern = self.config["folder_pattern"]
            folder_path = folder_pattern.format(
                text_line1=first_line,
                text_line2=second_line
            ).strip("/")

            # Add to data
            data = ScreenshotData(
                filename=str(image_path),
                text_lines=lines,
                first_line=first_line,
                second_line=second_line,
                full_text=text,
                folder_path=folder_path
            )

            self.screenshots.append(data)
            self.current_screenshot_index = len(self.screenshots) - 1

            # Update UI
            self.update_tree()
            self.update_preview()
            self.status_var.set(f"Processed: {image_path.name}")

            # Copy to clipboard if in single mode
            if self.mode_var.get() == "single":
                pyperclip.copy(image_path)
                self.status_var.set(f"Copied to clipboard: {image_path.name}")

        except Exception as e:
            self.logger.error(f"Error processing screenshot {image_path}: {e}")
            messagebox.showerror("Error", f"Failed to process screenshot: {e}")

    def process_all_screenshots(self):
        """Process all screenshots in the configured directory"""
        try:
            self.status_var.set("Processing all screenshots...")
            self.root.update()

            screenshot_dir = Path(self.config["screenshot_dir"]).expanduser()
            if not screenshot_dir.exists():
                screenshot_dir.mkdir(parents=True)

            # Process all PNG files in the directory
            for png_file in screenshot_dir.glob("*.png"):
                if png_file.name.startswith("screenshot_"):
                    self.process_screenshot(png_file)

            self.status_var.set(f"Processed all screenshots in {screenshot_dir}")
            messagebox.showinfo("Success", f"Processed all screenshots in {screenshot_dir}")

        except Exception as e:
            self.logger.error(f"Error processing all screenshots: {e}")
            messagebox.showerror("Error", f"Failed to process all screenshots: {e}")

    def update_tree(self):
        """Update the treeview with current screenshots"""
        self.tree.delete(*self.tree.get_children())
        for i, data in enumerate(self.screenshots):
            self.tree.insert("", "end", iid=f"I{i}", text="",
                           values=(data.filename, data.folder_path, data.first_line, data.second_line))

    def save_config(self):
        """Save current configuration"""
        try:
            self.config_file.write_text(json.dumps(self.config, indent=2))
            self.logger.info(f"Configuration saved to {self.config_file}")
            messagebox.showinfo("Success", f"Configuration saved to {self.config_file}")
        except Exception as e:
            self.logger.error(f"Error saving configuration: {e}")
            messagebox.showerror("Error", f"Failed to save configuration: {e}")

    def _load_config(self) -> Dict:
        """Load configuration from file"""
        if self.config_file.exists():
            try:
                with open(self.config_file, "r") as f:
                    config = json.load(f)
                    # Validate config
                    for key in DEFAULT_CONFIG:
                        if key not in config:
                            config[key] = DEFAULT_CONFIG[key]
                    return config
            except Exception as e:
                self.logger.warning(f"Error loading config: {e}. Using defaults.")
        return DEFAULT_CONFIG.copy()

def main():
    """Main entry point"""
    try:
        # Check if pytesseract is installed
        pytesseract.get_tesseract_version()
    except Exception as e:
        print(f"Error: Tesseract OCR not installed. Please install it from https://github.com/tesseract-ocr/tesseract")
        print(f"Then run: pip install pytesseract")
        sys.exit(1)

    root = tk.Tk()
    app = ScreenshotOrganizer(root)
    root.mainloop()

if __name__ == "__main__":
    main()

```kotlin
// Expression Flow Calculator - Kotlin/Jetpack Compose
// Features: Character-by-character expression flow, interactive history timeline, theming

import androidx.compose.foundation	background
import androidx.compose.foundation	clickable
import androidx.compose.foundation	horizontalScroll
import androidx.compose.foundation	layout	Box
import androidx.compose.foundation	layout	Column
import androidx.compose.foundation	layout	Row
import androidx.compose.foundation	layout	fillMaxSize
import androidx.compose.foundation	layout	fillMaxWidth
import androidx.compose.foundation	layout	padding
import androidx.compose.foundation	layout	size
import androidx.compose.foundation	lazyLVerticalGrid
import androidx.compose.foundation	selection	SelectionContainer
import androidx.compose.foundation	shape	CircleShape
import androidx.compose.foundation	shape	RoundedCornerShape
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.outlined.Autosave
import androidx.compose.material.icons.outlined.DarkMode
import androidx.compose.material.icons.outlined.LightMode
import androidx.compose.material.icons.outlined.Update
import androidx.compose.material3.Button
import androidx.compose.material3.ButtonDefaults
import androidx.compose.material3.CircularProgressIndicator
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.ProvideTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.TextButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import java.util.regex.Pattern

@Composable
fun CalculatorApp() {
    var display by remember { mutableStateOf("0") }
    val history = remember { mutableStateListOf<HistoryEntry>() }
    var theme by remember { mutableStateOf<Theme>(Theme.LIGHT) }
    var isProcessing by remember { mutableStateOf(false) }

    fun calculateResult() {
        val expr = display.trim()
        if (expr.isNotEmpty() && !expr.endsWith('=')) {
            try {
                val result = evaluateExpression(expr)
                display = if (expr.endsWith("=")) {
                    expr.replaceFirst("=$", "= $result")
                } else {
                    "$expr = $result"
                }
                history.add(0, HistoryEntry(expr, result, System.currentTimeMillis()))
                if (history.size > 50) history.removeAt(history.size - 1)
            } catch (e: Exception) {
                display = "Error"
            }
        }
    }

    fun addToExpression(char: Char) {
        if (display == "Error") display = ""
        if (display.endsWith("=")) {
            display = display.removeSuffix("=") + char
        } else {
            display += char
        }
    }

    fun clearDisplay() {
        display = "0"
    }

    fun backspace() {
        if (display.length > 1) {
            if (display.endsWith("=")) {
                display = display.dropLast(2)
            } else {
                display = display.dropLast(1)
            }
        } else {
            display = "0"
        }
    }

    fun historyItemClicked(entry: HistoryEntry) {
        display = entry.expression
    }

    fun evaluateExpression(expr: String): Double {
        return expr.replace("x", "*")
                  .replace("π", Math.PI.toString())
                  .replace("e", Math.E.toString())
                  .toExpression()
                  .evaluate()
    }

    Surface(
        modifier = Modifier.fillMaxSize(),
        color = theme.backgroundColor
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            // Display with character-by-character animation
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .clip(RoundedCornerShape(12.dp))
                    .background(theme.cardColor)
                    .padding(16.dp)
            ) {
                Column {
                    Text(
                        text = "Expression Flow Calculator",
                        color = theme.secondaryText,
                        fontSize = 14.sp,
                        fontWeight = FontWeight.Normal
                    )
                    Text(
                        text = display,
                        color = theme.primaryText,
                        fontSize = 32.sp,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier
                            .animateFlow()
                            .fillMaxWidth()
                            .padding(vertical = 8.dp)
                    )
                }
            }

            // History section
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(vertical = 16.dp)
                    .clip(RoundedCornerShape(8.dp))
                    .background(theme.secondaryBackground)
            ) {
                Column(modifier = Modifier.padding(16.dp)) {
                    Text(
                        text = "History",
                        color = theme.primaryText,
                        fontSize = 18.sp,
                        fontWeight = FontWeight.SemiBold
                    )
                    SelectionContainer {
                        LazyVerticalGrid(
                            rows = LazyVerticalGridInfo(fixedRowHeight = 40.dp),
                            modifier = Modifier.height(200.dp)
                        ) {
                            items(history.size) { index ->
                                val entry = history[index]
                                TextButton(
                                    onClick = { historyItemClicked(entry) },
                                    modifier = Modifier
                                        .fillMaxWidth()
                                        .padding(vertical = 4.dp)
                                ) {
                                    Row(
                                        modifier = Modifier.fillMaxWidth(),
                                        verticalAlignment = Alignment.CenterVertically
                                    ) {
                                        Text(
                                            text = entry.expression,
                                            color = theme.primaryText,
                                            fontSize = 14.sp,
                                            maxLines = 1
                                        )
                                        Spacer(modifier = Modifier.weight(1f))
                                        Text(
                                            text = entry.result,
                                            color = theme.secondaryText,
                                            fontSize = 14.sp
                                        )
                                    }
                                }
                            }
                        }
                    }
                }
            }

            // Keyboard
            Column(modifier = Modifier.fillMaxWidth()) {
                // Row 1: Themes, Back, Clear, =
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = androidx.compose.foundation.layout.Arrangement.SpaceBetween
                ) {
                    IconButton(
                        onClick = { theme = when (theme) {
                            Theme.LIGHT -> Theme.DARK
                            Theme.DARK -> Theme.SUNSET
                            Theme.SUNSET -> Theme.LIGHT
                        } },
                        modifier = Modifier
                            .size(48.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor)
                    ) {
                        Icon(
                            imageVector = when (theme) {
                                Theme.LIGHT -> Icons.Outlined.DarkMode
                                Theme.DARK -> Icons.Outlined.LightMode
                                Theme.SUNSET -> Icons.Outlined.DarkMode
                            },
                            contentDescription = "Theme",
                            tint = theme.iconColor
                        )
                    }

                    Button(
                        onClick = { backspace() },
                        modifier = Modifier
                            .size(48.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) {
                        Icon(Icons.Outlined.Update, contentDescription = "Backspace")
                    }

                    Button(
                        onClick = { clearDisplay() },
                        modifier = Modifier
                            .size(48.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) {
                        Text("C", fontSize = 16.sp)
                    }

                    Button(
                        onClick = {
                            if (!display.endsWith("=")) {
                                addToExpression('=')
                            }
                        },
                        modifier = Modifier
                            .size(96.dp)
                            .clip(RoundedCornerShape(12.dp))
                            .background(if (theme == Theme.SUNSET) Color.Magenta else theme.accentColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = if (theme == Theme.SUNSET) Color.Magenta else theme.accentColor,
                            contentColor = theme.buttonTextColor
                        )
                    ) {
                        Text("=", fontSize = 24.sp)
                    }
                }

                // Row 2: Numbers
                Row(modifier = Modifier.fillMaxWidth()) {
                    Button(
                        onClick = { addToExpression('7') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("7", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('8') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("8", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('9') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("9", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('/') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("/", fontSize = 20.sp) }
                }

                // Row 3: Numbers
                Row(modifier = Modifier.fillMaxWidth()) {
                    Button(
                        onClick = { addToExpression('4') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("4", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('5') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("5", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('6') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("6", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('*') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("*", fontSize = 20.sp) }
                }

                // Row 4: Numbers
                Row(modifier = Modifier.fillMaxWidth()) {
                    Button(
                        onClick = { addToExpression('1') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("1", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('2') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("2", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('3') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("3", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('-') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("-", fontSize = 20.sp) }
                }

                // Row 5: 0, x, π, e
                Row(modifier = Modifier.fillMaxWidth()) {
                    Button(
                        onClick = { addToExpression('0') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("0", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('x') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("×", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('π') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("π", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('e') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("e", fontSize = 20.sp) }
                }

                // Row 6: +, (, ), .
                Row(modifier = Modifier.fillMaxWidth()) {
                    Button(
                        onClick = { addToExpression('+') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("+", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('(') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text("(", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression(')') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text(")", fontSize = 20.sp) }

                    Button(
                        onClick = { addToExpression('.') },
                        modifier = Modifier
                            .weight(1f)
                            .padding(4.dp)
                            .clip(CircleShape)
                            .background(theme.buttonColor),
                        colors = ButtonDefaults.buttonColors(
                            containerColor = theme.buttonColor,
                            contentColor = theme.iconColor
                        )
                    ) { Text(".", fontSize = 20.sp) }
                }
            }
        }
    }
}

// Expression Parser Extension
fun String.toExpression(): Expression {
    val tokens = tokenize()
    return Expression(tokens)
}

fun String.tokenize(): List<Token> {
    val pattern = Pattern.compile("""(-?\d+\.?\d*|[+\-*/()πe])""")
    val matcher = pattern.matcher(this)
    val tokens = mutableListOf<Token>()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pulsing Galaxy Spinners</title>
    <style>
        :root {
            --primary: #4a148c;
            --secondary: #ff4081;
            --accent: #ffeb3b;
            --dark: #1a1a2e;
            --light: #f8f9fa;
        }

        body {
            font-family: 'Segoe UI', system-ui, sans-serif;
            background: linear-gradient(135deg, #1a1a2e, #16213e);
            color: var(--light);
            margin: 0;
            padding: 2rem;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        h1 {
            text-align: center;
            margin-bottom: 2rem;
            color: var(--accent);
            font-weight: 300;
            letter-spacing: 1px;
        }

        .spinner-container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 2rem;
            width: 100%;
            max-width: 1200px;
            margin-bottom: 3rem;
        }

        .spinner {
            width: 100px;
            height: 100px;
            margin: 0 auto;
            border-radius: 50%;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: all 0.3s ease;
        }

        .spinner:hover {
            transform: scale(1.1);
            box-shadow: 0 0 20px rgba(var(--accent), 0.5);
        }

        /* Spinner 1: Pulsing Ring */
        .spinner-1 {
            background: conic-gradient(from 0deg, var(--primary) 0deg, var(--secondary) 30deg, var(--accent) 60deg, var(--primary) 90deg, var(--secondary) 120deg, var(--accent) 150deg, var(--primary) 180deg, var(--secondary) 210deg, var(--accent) 240deg, var(--primary) 270deg, var(--secondary) 300deg, var(--accent) 330deg, var(--primary) 360deg);
        }

        .spinner-1::before {
            content: '';
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: pulse 1.5s infinite;
        }

        /* Spinner 2: Fractal Cube */
        .spinner-2 {
            perspective: 100px;
        }

        .spinner-2::before {
            content: '';
            position: absolute;
            width: 80px;
            height: 80px;
            background: var(--accent);
            border-radius: 10px;
            transform-style: preserve-3d;
            animation: rotate 3s infinite linear;
        }

        .spinner-2::after {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            background: var(--secondary);
            border-radius: 10px;
            transform: translateX(10px) rotateX(45deg);
            transform-style: preserve-3d;
            animation: rotate 4s infinite linear reverse;
        }

        /* Spinner 3: Particle Nebula */
        .spinner-3 {
            background: radial-gradient(circle at center, rgba(74, 20, 140, 0.1) 0%, rgba(22, 33, 62, 0) 70%);
        }

        .spinner-3::before {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            background: var(--primary);
            opacity: 0.7;
            animation: particle 4s infinite;
        }

        /* Spinner 4: Binary Code */
        .spinner-4 {
            background: #000;
            font-family: 'Courier New', monospace;
        }

        .spinner-4::before {
            content: '1010 1100';
            position: absolute;
            color: var(--accent);
            font-size: 12px;
            opacity: 0.5;
            animation: binary 2s infinite;
        }

        /* Spinner 5: Digital Wave */
        .spinner-5 {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
        }

        .spinner-5::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 2px;
            background: var(--accent);
            top: 50%;
            transform: translateY(-50%);
            animation: wave 2s infinite;
        }

        /* Spinner 6: Solar Flare */
        .spinner-6 {
            position: relative;
        }

        .spinner-6::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, transparent 30%, rgba(255, 255, 255, 0.2) 31%, transparent 32%);
            animation: flare 2s infinite;
        }

        /* Spinner 7: Morphing Blob */
        .spinner-7 {
            background: var(--primary);
        }

        .spinner-7::before {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--accent);
            animation: morph 3s infinite;
        }

        /* Spinner 8: Glitch Effect */
        .spinner-8 {
            background: var(--dark);
            position: relative;
        }

        .spinner-8::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: var(--accent);
            border-radius: 50%;
            opacity: 0.3;
            animation: glitch 1s infinite;
        }

        /* Spinner 9: Particle Storm */
        .spinner-9 {
            background: var(--dark);
        }

        .spinner-9::before {
            content: '';
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--secondary);
            animation: particle-storm 2s infinite;
        }

        /* Spinner 10: Hypnotic Spin */
        .spinner-10 {
            position: relative;
        }

        .spinner-10::before {
            content: '';
            position: absolute;
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: var(--primary);
            opacity: 0.7;
            animation: hypnotic 2s infinite;
        }

        /* Spinner 11: Gradient Pulse */
        .spinner-11 {
            background: linear-gradient(45deg, var(--primary), var(--secondary));
        }

        .spinner-11::before {
            content: '';
            position: absolute;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: var(--accent);
            animation: gradient-pulse 2s infinite;
        }

        /* Spinner 12: Fractal Stars */
        .spinner-12 {
            position: relative;
        }

        .spinner-12::before {
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at center, transparent 40%, rgba(255, 255, 255, 0.1) 41%, transparent 42%);
            animation: fractal 3s infinite;
        }

        /* Controls */
        .controls {
            margin-top: 2rem;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
        }

        button {
            padding: 0.5rem 1rem;
            background: var(--primary);
            color: var(--light);
            border: none;
            border-radius: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.9rem;
        }

        button:hover {
            background: var(--secondary);
            transform: translateY(-2px);
        }

        button.active {
            background: var(--accent);
        }

        .spinner-name {
            text-align: center;
            font-size: 0.8rem;
            margin-top: 0.5rem;
            color: rgba(255, 255, 255, 0.7);
        }

        /* Animations */
        @keyframes pulse {
            0% { transform: scale(0.9); opacity: 0.7; }
            50% { transform: scale(1.1); opacity: 1; }
            100% { transform: scale(0.9); opacity: 0.7; }
        }

        @keyframes rotate {
            0% { transform: rotateY(0deg); }
            100% { transform: rotateY(360deg); }
        }

        @keyframes particle {
            0% { transform: translate(0, 0) rotate(0deg); }
            25% { transform: translate(20px, 10px) rotate(180deg); }
            50% { transform: translate(10px, -20px) rotate(360deg); }
            75% { transform: translate(-20px, 10px) rotate(540deg); }
            100% { transform: translate(0, 0) rotate(720deg); }
        }

        @keyframes binary {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(20px); }
        }

        @keyframes wave {
            0% { transform: translateY(-50%) translateX(-100%); }
            50% { transform: translateY(-50%) translateX(100%); }
            100% { transform: translateY(-50%) translateX(-100%); }
        }

        @keyframes flare {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.5); opacity: 1; }
        }

        @keyframes morph {
            0% { border-radius: 50%; }
            50% { border-radius: 20% 80% 60% 40%; }
            100% { border-radius: 50%; }
        }

        @keyframes glitch {
            0% { transform: translate(0, 0); }
            20% { transform: translate(-5px, 5px); }
            40% { transform: translate(5px, -5px); }
            60% { transform: translate(-3px, 3px); }
            80% { transform: translate(3px, -3px); }
            100% { transform: translate(0, 0); }
        }

        @keyframes particle-storm {
            0% { transform: translate(0, 0); }
            25% { transform: translate(20px, 10px); }
            50% { transform: translate(10px, -20px); }
            75% { transform: translate(-20px, 10px); }
            100% { transform: translate(0, 0); }
        }

        @keyframes hypnotic {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @keyframes gradient-pulse {
            0% { transform: scale(0.9); }
            50% { transform: scale(1.1); }
            100% { transform: scale(0.9); }
        }

        @keyframes fractal {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Responsive */
        @media (max-width: 768px) {
            .spinner-container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <h1>Pulsing Galaxy Spinners</h1>

    <div class="spinner-container">
        <div class="spinner spinner-1">
            <div class="spinner-name">Pulsing Ring</div>
        </div>
        <div class="spinner spinner-2">
            <div class="spinner-name">Fractal Cube</div>
        </div>
        <div class="spinner spinner-3">
            <div class="spinner-name">Particle Nebula</div>
        </div>
        <div class="spinner spinner-4">
            <div class="spinner-name">Binary Code</div>
        </div>
        <div class="spinner spinner-5">
            <div class="spinner-name">Digital Wave</div>
        </div>
        <div class="spinner spinner-6">
            <div class="spinner-name">Solar Flare</div>
        </div>
        <div class="spinner spinner-7">
            <div class="spinner-name">Morphing Blob</div>
        </div>
        <div class="spinner spinner-8">
            <div class="spinner-name">Glitch Effect</div>
        </div>
        <div class="spinner spinner-9">
            <div class="spinner-name">Particle Storm</div>
        </div>
        <div class="spinner spinner-10">
            <div class="spinner-name">Hypnotic Spin</div>
        </div>
        <div class="spinner spinner-11">
            <div class="spinner-name">Gradient Pulse</div>
        </div>
        <div class="spinner spinner-12">
            <div class="spinner-name">Fractal Stars</div>
        </div>
    </div>

    <div class="controls">
        <button id="copyAll">Copy All CSS</button>
        <button id="exportJson">Export JSON</button>
        <button id="randomize">Randomize All</button>
        <button id="speedUp">Speed Up</button>
        <button id="speedDown">Speed Down</button>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const spinners = document.querySelectorAll('.spinner');
            const controls = document.querySelectorAll('button');
            let animationSpeed = 1;

            // Speed controls
            document.getElementById('speedUp').addEventListener('click', () => {
                animationSpeed *= 1.5;
                updateAllAnimations();
                document.getElementById('speedUp').classList.add('active');
                document.getElementById('speedDown').classList.remove('active');
            });

            document.getElementById('speedDown').addEventListener('click', () => {
                animationSpeed /= 1.5;
                updateAllAnimations();
                document.getElementById('speedDown').classList.add('active');
                document.getElementById('speedUp').classList.remove('active');
            });

            // Randomize all spinners
            document.getElementById('randomize').addEventListener('click', () => {
                spinners.forEach(spinner => {
                    const randomClass = `spinner-${Math.floor(Math.random() * 12) + 1}`;
                    spinner.className = `spinner ${randomClass}`;
                });
            });

            // Copy all CSS
            document.getElementById('copyAll').addEventListener('click', () => {
                const css = document.querySelector('style').innerText;
                navigator.clipboard.writeText(css).then(() => {
                    alert('CSS copied to clipboard!');
                });
            });

            // Export JSON
            document.getElementById('exportJson').addEventListener('click', () => {
                const spinnerData = Array.from(spinners).map(spinner => ({
                    name: spinner.querySelector('.spinner-name').textContent,
                    class: spinner.className.split(' ')[1]
                }));

                const json = JSON.stringify(spinnerData, null, 2);
                const blob = new Blob([json], { type: 'application/json' });
                const url = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = 'spinners.json';
                a.click();
                URL.revokeObjectURL(url);
            });

            // Update all animations
            function updateAllAnimations() {
                spinners.forEach(spinner => {
                    const speed = animationSpeed;
                    spinner.style.animationDuration = `${speed}s`;
                    spinner.style.animationDelay = `-${speed / 2}s`;
                });
            }
        });
    </script>
</body>
</html>
```

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Skill Showcase</title>
    <style>
        :root {
            --primary: #4a6bff;
            --secondary: #6c5ce7;
            --accent: #00ffcc;
            --dark: #1a1a2e;
            --light: #f5f5f5;
            --transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            color: var(--light);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 2rem;
            overflow-x: hidden;
        }

        .container {
            width: 100%;
            max-width: 800px;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 2.5rem;
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        h1 {
            text-align: center;
            margin-bottom: 2rem;
            font-weight: 600;
            letter-spacing: 1px;
        }

        .skill-cards {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 1.5rem;
        }

        .card {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            padding: 1.5rem;
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: var(--transition);
            position: relative;
            overflow: hidden;
            cursor: pointer;
        }

        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(74, 107, 255, 0.3);
        }

        .card-title {
            font-size: 1.2rem;
            margin-bottom: 1rem;
            font-weight: 500;
            color: var(--primary);
        }

        .skill-bar {
            height: 12px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 1rem;
        }

        .skill-fill {
            height: 100%;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            border-radius: 6px;
            transition: width 0.6s ease-out;
            will-change: width;
        }

        .card-description {
            font-size: 0.9rem;
            opacity: 0.8;
            line-height: 1.5;
        }

        .controls {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
            gap: 1rem;
            flex-wrap: wrap;
        }

        button {
            background: rgba(0, 255, 204, 0.2);
            color: var(--accent);
            border: 1px solid var(--accent);
            padding: 0.6rem 1.2rem;
            border-radius: 8px;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
            font-size: 0.9rem;
        }

        button:hover {
            background: var(--accent);
            color: var(--dark);
            transform: scale(1.05);
        }

        .input-group {
            margin-bottom: 1rem;
        }

        input {
            width: 100%;
            padding: 0.6rem;
            border-radius: 8px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: var(--light);
            font-size: 0.9rem;
        }

        input:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(0, 255, 204, 0.2);
        }

        .close-btn {
            position: absolute;
            top: 10px;
            right: 10px;
            background: none;
            border: none;
            color: rgba(255, 255, 255, 0.5);
            font-size: 1.2rem;
            cursor: pointer;
            transition: color 0.2s;
        }

        .close-btn:hover {
            color: var(--accent);
        }

        @media (max-width: 600px) {
            .skill-cards {
                grid-template-columns: 1fr;
            }
        }

        /* Particle background effect */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="particles" id="particles"></div>

    <div class="container">
        <h1>Skill Showcase</h1>

        <div class="controls">
            <div class="input-group">
                <input type="text" id="newSkill" placeholder="Add new skill (e.g., JavaScript)">
                <button id="addSkillBtn">Add Skill</button>
            </div>
            <div class="input-group">
                <input type="text" id="newDescription" placeholder="Add description (e.g., 5 years experience)">
                <button id="addDescriptionBtn">Add Description</button>
            </div>
            <button id="randomizeBtn">Randomize Skills</button>
            <button id="clearBtn">Clear All</button>
        </div>

        <div class="skill-cards" id="skillCards">
            <!-- Skills will be added here dynamically -->
        </div>
    </div>

    <script>
        // Skill data structure
        const skills = [
            { id: 1, name: 'JavaScript', value: 95, description: '5+ years experience building interactive web applications' },
            { id: 2, name: 'TypeScript', value: 85, description: 'Strong typing and modern JavaScript features' },
            { id: 3, name: 'React', value: 90, description: 'Component-based architecture for building UIs' },
            { id: 4, name: 'Node.js', value: 80, description: 'Server-side JavaScript for scalable applications' },
            { id: 5, name: 'HTML/CSS', value: 98, description: 'Semantic HTML and modern CSS techniques' },
            { id: 6, name: 'Python', value: 75, description: 'Data analysis and backend development' },
            { id: 7, name: 'Git', value: 92, description: 'Version control and collaborative development' },
            { id: 8, name: 'UI/UX Design', value: 88, description: 'User-centered design principles and wireframing' }
        ];

        // DOM elements
        const skillCardsContainer = document.getElementById('skillCards');
        const newSkillInput = document.getElementById('newSkill');
        const newDescriptionInput = document.getElementById('newDescription');
        const addSkillBtn = document.getElementById('addSkillBtn');
        const addDescriptionBtn = document.getElementById('addDescriptionBtn');
        const randomizeBtn = document.getElementById('randomizeBtn');
        const clearBtn = document.getElementById('clearBtn');
        const particlesContainer = document.getElementById('particles');

        // Initialize particles.js for background effect
        function initParticles() {
            if (window.particlesJS) {
                particlesJS('particles', {
                    particles: {
                        number: { value: 80, density: { enable: true, value_area: 800 } },
                        color: { value: '#00ffcc' },
                        shape: { type: 'circle' },
                        opacity: { value: 0.5, random: true },
                        size: { value: 3, random: true },
                        line_linked: { enable: true, distance: 150, color: '#00ffcc', opacity: 0.4, width: 1 },
                        move: {
                            enable: true,
                            speed: 2,
                            direction: 'none',
                            random: true,
                            straight: false,
                            out_mode: 'out'
                        }
                    },
                    interactivity: {
                        detect_on: 'canvas',
                        events: {
                            onhover: { enable: true, mode: 'repulse' },
                            onclick: { enable: true, mode: 'push' },
                            resize: true
                        }
                    },
                    retina_detect: true
                });
            }
        }

        // Render a single skill card
        function renderSkillCard(skill) {
            const card = document.createElement('div');
            card.className = 'card';
            card.innerHTML = `
                <button class="close-btn" data-id="${skill.id}">&times;</button>
                <h3 class="card-title">${skill.name}</h3>
                <div class="skill-bar">
                    <div class="skill-fill" style="width: ${skill.value}%"></div>
                </div>
                <p class="card-description">${skill.description || 'No description available'}</p>
            `;

            // Add click animation
            card.addEventListener('click', () => {
                card.style.transform = 'scale(0.95)';
                setTimeout(() => card.style.transform = 'scale(1)', 150);
            });

            return card;
        }

        // Render all skills
        function renderSkills() {
            skillCardsContainer.innerHTML = '';
            skills.forEach(skill => {
                const card = renderSkillCard(skill);
                skillCardsContainer.appendChild(card);
            });

            // Add event listeners to close buttons
            document.querySelectorAll('.close-btn').forEach(btn => {
                btn.addEventListener('click', (e) => {
                    e.stopPropagation();
                    const id = parseInt(btn.getAttribute('data-id'));
                    removeSkill(id);
                });
            });
        }

        // Add a new skill
        function addSkill() {
            const name = newSkillInput.value.trim();
            const description = newDescriptionInput.value.trim();

            if (!name) {
                alert('Please enter a skill name');
                return;
            }

            // Check if skill already exists
            if (skills.some(skill => skill.name.toLowerCase() === name.toLowerCase())) {
                alert('This skill already exists');
                return;
            }

            const newSkill = {
                id: skills.length > 0 ? Math.max(...skills.map(s => s.id)) + 1 : 1,
                name: name,
                value: Math.floor(Math.random() * 90) + 10, // Random value between 10-100
                description: description || 'No description available'
            };

            skills.push(newSkill);
            renderSkills();
            newSkillInput.value = '';
            newDescriptionInput.value = '';
        }

        // Add description to existing skill
        function addDescription() {
            const name = newSkillInput.value.trim();
            const description = newDescriptionInput.value.trim();

            if (!name || !description) {
                alert('Please enter both skill name and description');
                return;
            }

            const skillIndex = skills.findIndex(skill => skill.name.toLowerCase() === name.toLowerCase());

            if (skillIndex === -1) {
                alert('Skill not found');
                return;
            }

            skills[skillIndex].description = description;
            renderSkills();
            newSkillInput.value = '';
            newDescriptionInput.value = '';
        }

        // Remove a skill
        function removeSkill(id) {
            skills.splice(skills.findIndex(skill => skill.id === id), 1);
            renderSkills();
        }

        // Randomize all skill values
        function randomizeSkills() {
            skills.forEach(skill => {
                skill.value = Math.floor(Math.random() * 90) + 10;
            });
            renderSkills();
        }

        // Clear all skills
        function clearSkills() {
            if (confirm('Are you sure you want to clear all skills?')) {
                skills.length = 0;
                renderSkills();
            }
        }

        // Event listeners
        addSkillBtn.addEventListener('click', addSkill);
        addDescriptionBtn.addEventListener('click', addDescription);
        randomizeBtn.addEventListener('click', randomizeSkills);
        clearBtn.addEventListener('click', clearSkills);

        // Initialize
        renderSkills();
        initParticles();
    </script>

    <!-- Include particles.js library for the background effect -->
    <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Morphing SVG Icons</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background: #121212;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            overflow: hidden;
        }

        #svg-container {
            width: 400px;
            height: 400px;
            position: relative;
        }

        svg {
            width: 100%;
            height: 100%;
            display: block;
        }

        #icon {
            fill: #6559e8;
            transition: fill 0.3s ease;
        }

        .controls {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            justify-content: center;
        }

        button {
            background: #6559e8;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        button:hover {
            background: #4a42d6;
        }

        .particle {
            position: absolute;
            width: 3px;
            height: 3px;
            border-radius: 50%;
            background: rgba(101, 89, 232, 0.6);
            pointer-events: none;
        }

        #particles {
            position: absolute;
            width: 100%;
            height: 100%;
            overflow: hidden;
            pointer-events: none;
        }
    </style>
</head>
<body>
    <div id="svg-container">
        <svg id="svg" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
            <g id="icon">
                <!-- Heart icon (initial state) -->
                <path d="M50,30 C50,20 40,10 30,10 C20,10 10,20 10,30 C10,40 20,50 30,60 C40,50 50,40 50,30 Z"/>
            </g>
        </svg>
        <div id="particles"></div>
    </div>

    <div class="controls">
        <button onclick="morphTo('heart')">Heart</button>
        <button onclick="morphTo('star')">Star</button>
        <button onclick="morphTo('diamond')">Diamond</button>
        <button onclick="morphTo('circle')">Circle</button>
        <button onclick="morphTo('square')">Square</button>
        <button onclick="startParticles()">Particles ON</button>
        <button onclick="stopParticles()">Particles OFF</button>
    </div>

    <script>
        const svg = document.getElementById('svg');
        const icon = document.getElementById('icon');
        const particlesContainer = document.getElementById('particles');
        let particles = [];
        let particleCount = 0;
        let isAnimatingParticles = false;

        // Icon data for morphing
        const iconData = {
            heart: "M50,30 C50,20 40,10 30,10 C20,10 10,20 10,30 C10,40 20,50 30,60 C40,50 50,40 50,30 Z",
            star: "M50,10 L40,30 L20,40 L10,20 L30,20 L20,10 L40,20 L30,10 Z",
            diamond: "M50,10 L90,50 L50,90 L10,50 Z",
            circle: "M50,50 m-40,0 a40,40 0 1,1 80,0 a40,40 0 1,1 -80,0",
            square: "M10,10 L90,10 L90,90 L10,90 Z"
        };

        function morphTo(shape) {
            icon.style.transition = "none";
            icon.setAttribute("d", iconData[shape]);
            void icon.offsetWidth; // Trigger reflow
            icon.style.transition = "fill 0.3s ease";
            // Change color based on shape
            if (shape === 'heart') icon.style.fill = '#6559e8';
            else if (shape === 'star') icon.style.fill = '#f25a4b';
            else if (shape === 'diamond') icon.style.fill = '#ff7675';
            else if (shape === 'circle') icon.style.fill = '#63c2c2';
            else if (shape === 'square') icon.style.fill = '#a8e6cf';
        }

        function createParticle(x, y) {
            const particle = document.createElement('div');
            particle.className = 'particle';
            particle.style.left = `${x}%`;
            particle.style.top = `${y}%`;
            particlesContainer.appendChild(particle);
            particles.push(particle);
            particleCount++;
        }

        function animateParticles() {
            if (!isAnimatingParticles) return;

            for (let i = 0; i < particles.length; i++) {
                const p = particles[i];
                const x = parseInt(p.style.left);
                const y = parseInt(p.style.top);
                const size = 3 + Math.random() * 2;
                p.style.width = `${size}px`;
                p.style.height = `${size}px`;
                p.style.opacity = 0.6 + Math.random() * 0.4;

                // Random movement
                p.style.left = `${x + (Math.random() - 0.5) * 3}%`;
                p.style.top = `${y + (Math.random() - 0.5) * 3}%`;
            }

            if (particleCount < 50) {
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                createParticle(x, y);
            }

            requestAnimationFrame(animateParticles);
        }

        function startParticles() {
            isAnimatingParticles = true;
            if (particles.length === 0) {
                for (let i = 0; i < 30; i++) {
                    const x = Math.random() * 100;
                    const y = Math.random() * 100;
                    createParticle(x, y);
                }
            }
            animateParticles();
        }

        function stopParticles() {
            isAnimatingParticles = false;
            for (let i = 0; i < particles.length; i++) {
                particlesContainer.removeChild(particles[i]);
            }
            particles = [];
            particleCount = 0;
        }

        // Initialize with heart icon
        morphTo('heart');
    </script>
</body>
</html>

// =============================================================================
// Battle Core: Quantum Quirk Generator (v2.0)
// RPG Maker MZ Plugin — Quantum Quirks™: Randomized battle powers with catch!
// =============================================================================
/*:
 * @plugindesc (v2.0) Gives enemies random quantum quirks (power + weakness) per battle.
 * @author Ailey & Quantum Chaos Labs
 * @help
 * QUANTUM QUIRKS™:
 *   Each enemy gets a random "power + weakness" combo per battle.
 *   Example: "Mega Defense: +50% damage reduction, but 30% slower!"
 *
 * INSTRUCTIONS:
 *   1. Install this plugin in RPG Maker MZ.
 *   2. In your event, trigger "Quantum Quirk" on a condition (e.g., battle start).
 *   3. The plugin will auto-generate a quirk for the target enemy.
 *
 * PLUGIN COMMANDS:
 *   QuantumQuirk targetId
 *   Example: QuantumQuirk 1 → Apply quirk to actor 1.
 *
 * SETTINGS:
 *   - `quirkIntensity` (default: 50) — How powerful the quirks are.
 *   - `weirdnessFactor` (default: 25) — How "quirky" they feel (use sparingly).
 *   - `disableQuirks` (default: false) — Disable quirks for testing.
 *
 * FUN FACT: Quirks are generated using a weighted random formula inspired by quantum decoherence.
 * =============================================================================
 */

const quantumQuirks = {
    quirkIntensity: 50,  // % modifier range
    weirdnessFactor: 25, // % chance of super-weird quirks
    disableQuirks: false,
    quirks: [
        { name: "Mega Defense", desc: "50% damage reduction, but 30% slower!" },
        { name: "Laser Vision", desc: "Ignore 20% armor, but your attacks have 10% recoil." },
        { name: "Speedster", desc: "Attacks twice per turn, but half HP on hit." },
        { name: "Invincible", desc: "Cannot be defeated, but cannot attack." },
        { name: "Chaos Trigger", desc: "100% crit chance, but random stat change." },
        { name: "Stun Field", desc: "Immobilizes enemies, but you lose half MP." },
        { name: "Time Warp", desc: "Skip next turn, but take double damage this turn." },
        { name: "Gravity Inversion", desc: "Deal damage based on enemy's defense." },
        { name: "Quirk Overload", desc: "All quirks apply, but your stats are randomized." },
        { name: "Mimicry", desc: "Copy the last used enemy's quirk (if any)." },
        { name: "Paradox Core", desc: "Your quirk flips every turn — power or weakness!" },
        { name: "Eldritch Whisper", desc: "10% chance to confuse any target, but you take confusion too." },
        { name: "Phantom Form", desc: "Cannot be hit, but cannot attack." },
        { name: "Quantum Split", desc: "Your attack hits twice, but with half power each." },
        { name: "Anomaly Field", desc: "All attacks against you deal 50% extra damage." },
    ]
};

function generateQuirk(intensity, weirdness) {
    if (quantumQuirks.disableQuirks) return { name: "None", desc: "No quirk (debug mode)." };

    const baseQuirk = quantumQuirks.quirks[Math.floor(Math.random() * quantumQuirks.quirks.length)];
    const isWeird = Math.random() < (weirdness / 100);

    if (isWeird) {
        const weirdQuirks = [
            { name: "Schrödinger’s Cat", desc: "You're both alive and dead — 50% chance to skip turn." },
            { name: "Black Hole", desc: "Absorb 30% of damage, but your attacks deal half." },
            { name: "Tesseract", desc: "Your next attack cannot miss, but you lose 20% HP." },
            { name: "Infinite Loop", desc: "Your next attack repeats indefinitely (or until interrupted)." },
        ];
        return weirdQuirks[Math.floor(Math.random() * weirdQuirks.length)];
    }

    // Modify the quirk based on intensity
    const modifiedDesc = baseQuirk.desc.replace(/%/g, () => Math.floor(Math.random() * (2 * intensity)) + 10);
    return { ...baseQuirk, desc: modifiedDesc };
}

// RPG Maker MZ Plugin Hooks
function PluginManager_apply(manager) {
    manager.addCommand('QuantumQuirk', args => {
        const targetId = Number(args[0]);
        if (isNaN(targetId)) return;

        const target = SceneManager._scene._map._interpreter._eventId === targetId
            ? $gameParty.members()[targetId - 1]
            : $gameEnemies.enemies()[targetId - 1];

        if (target) {
            const quirk = generateQuirk(quantumQuirks.quirkIntensity, quantumQuirks.weirdnessFactor);
            target._quantumQuirk = quirk;
            target.setMessage(quirk.name + " ✨ " + quirk.desc);
            target._quirkActive = true;
        }
    });
}

// Custom plugin command
PluginManager.registerCommand('QuantumQuirk', args => {
    const targetId = Number(args[0]);
    if (isNaN(targetId)) return;

    const target = SceneManager._scene._map._interpreter._eventId === targetId
        ? $gameParty.members()[targetId - 1]
        : $gameEnemies.enemies()[targetId - 1];

    if (target) {
        const quirk = generateQuirk(quantumQuirks.quirkIntensity, quantumQuirks.weirdnessFactor);
        target._quantumQuirk = quirk;
        target.setMessage(quirk.name + " ✨ " + quirk.desc);
        target._quirkActive = true;
    }
});

// Export for CommonJS
if (typeof module !== 'undefined' && module.exports) {
    module.exports = quantumQuirks;
}

// Export for ES Modules
if (typeof export !== 'undefined') {
    export default quantumQuirks;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Quantum Particle Simulator</title>
  <style>
    :root {
      --bg: rgba(0, 0, 0, 0.7);
      --surface: rgba(255, 255, 255, 0.1);
      --accent: #ff6b9d;
      --border: 1px solid rgba(255, 255, 255, 0.18);
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Courier New', monospace;
      background: radial-gradient(circle at 50% 50%, var(--bg) 0%, #000000 100%);
      color: rgba(255, 255, 255, 0.8);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }

    .container {
      width: 90%;
      max-width: 800px;
      height: 80vh;
      background: var(--surface);
      backdrop-filter: blur(10px);
      border-radius: 20px;
      border: var(--border);
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 20px;
      position: relative;
    }

    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: var(--border);
    }

    h1 {
      font-size: 1.5rem;
      margin: 0;
    }

    .controls {
      display: flex;
      gap: 15px;
      margin-bottom: 20px;
      padding-bottom: 10px;
      border-bottom: var(--border);
    }

    button {
      background: var(--surface);
      border: var(--border);
      color: rgba(255, 255, 255, 0.8);
      border-radius: 5px;
      padding: 8px 12px;
      cursor: pointer;
      transition: all 0.3s;
      font-size: 0.8rem;
    }

    button:hover {
      background: rgba(255, 255, 255, 0.15);
      transform: translateY(-2px);
    }

    .simulation {
      flex: 1;
      position: relative;
      overflow: hidden;
    }

    canvas {
      display: block;
      background: transparent;
      border-radius: 10px;
    }

    .potential {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 1;
    }

    .particle {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 10px var(--accent);
      z-index: 2;
    }

    .stats {
      margin-top: 20px;
      padding-top: 10px;
      border-top: var(--border);
      font-size: 0.9rem;
    }

    .stats-item {
      display: flex;
      justify-content: space-between;
      margin: 5px 0;
    }

    .wavefunction {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 20px;
      background: transparent;
      z-index: 3;
    }

    .grid {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 0;
    }

    .grid line {
      stroke: rgba(255, 255, 255, 0.1);
      stroke-width: 0.5;
    }

    .grid .y-axis line {
      stroke-dasharray: 2 2;
    }

    .grid .x-axis line {
      stroke-dasharray: 5 2;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <h1>Quantum Particle Simulator</h1>
      <div class="reset-btn">
        <button id="resetBtn">Reset</button>
      </div>
    </div>
    <div class="controls">
      <button id="playBtn">Play</button>
      <button id="pauseBtn">Pause</button>
      <button id="stepBtn">Step</button>
      <div class="energy-slider-container">
        <label for="energySlider">Energy Level:</label>
        <input type="range" id="energySlider" min="0.1" max="5" step="0.1" value="1">
      </div>
    </div>
    <div class="simulation">
      <svg class="grid" width="100%" height="100%">
        <defs>
          <pattern id="grid" width="20" height="20" patternUnits="userSpaceOnUse">
            <path d="M 20 0 L 0 0 0 20" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/>
          </pattern>
        </defs>
        <rect width="100%" height="100%" fill="url(#grid)" />
        <g class="x-axis">
          <line x1="0" y1="0" x2="100%" y2="0" />
        </g>
        <g class="y-axis">
          <line x1="0" y1="0" x2="0" y2="100%" />
        </g>
      </svg>
      <svg class="potential" width="100%" height="100%">
        <path id="potentialCurve" d="" stroke="var(--accent)" stroke-width="2" fill="none" />
      </svg>
      <div class="wavefunction">
        <svg width="100%" height="100%">
          <path id="wavefunctionPath" d="" stroke="rgba(255, 255, 255, 0.5)" stroke-width="2" fill="none" />
        </svg>
      </div>
      <div class="particle" id="particle"></div>
    </div>
    <div class="stats">
      <div class="stats-item">
        <span>Energy:</span>
        <span id="energyValue">0.0</span>
      </div>
      <div class="stats-item">
        <span>Amplitude:</span>
        <span id="amplitudeValue">0.0</span>
      </div>
      <div class="stats-item">
        <span>Phase:</span>
        <span id="phaseValue">0.0</span>
      </div>
    </div>
  </div>

  <script>
    // Constants
    const SIM_WIDTH = 800;
    const SIM_HEIGHT = 700;
    const GRID_SIZE = 20;
    const PARTICLE_SIZE = 10;
    const GRAVITY = 0.05;
    const DAMPING = 0.99;
    const POTENTIAL_STRENGTH = 2000;
    const POTENTIAL_FREQUENCY = 0.5;

    // Simulation state
    let simulationRunning = false;
    let animationFrameId = null;
    let time = 0;
    let particle = {
      x: SIM_WIDTH / 2,
      y: SIM_HEIGHT / 2,
      vx: 0,
      vy: 0,
      energy: 1.0,
      amplitude: 0.5,
      phase: 0
    };

    // DOM elements
    const simulationCanvas = document.createElement('canvas');
    simulationCanvas.width = SIM_WIDTH;
    simulationCanvas.height = SIM_HEIGHT;
    simulationCanvas.style.width = '100%';
    simulationCanvas.style.height = '100%';
    simulationCanvas.style.position = 'absolute';
    simulationCanvas.style.top = '0';
    simulationCanvas.style.left = '0';
    simulationCanvas.style.zIndex = '4';
    document.querySelector('.simulation').appendChild(simulationCanvas);

    const ctx = simulationCanvas.getContext('2d');
    const potentialCurve = document.getElementById('potentialCurve');
    const wavefunctionPath = document.getElementById('wavefunctionPath');
    const particleElement = document.getElementById('particle');

    // Initialize simulation
    function init() {
      reset();
      drawPotentialCurve();
      drawWavefunction();
      updateStats();
    }

    // Reset simulation
    function reset() {
      particle.x = SIM_WIDTH / 2;
      particle.y = SIM_HEIGHT / 2;
      particle.vx = 0;
      particle.vy = 0;
      particle.energy = 1.0;
      particle.amplitude = 0.5;
      particle.phase = 0;
      time = 0;
      updateParticleElement();
      updateStats();
    }

    // Update particle position
    function updateParticle() {
      if (!simulationRunning) return;

      // Apply gravity (simulating potential well)
      particle.vy += GRAVITY * (1 - particle.energy * 0.5);

      // Apply damping
      particle.vx *= DAMPING;
      particle.vy *= DAMPING;

      // Update position
      particle.x += particle.vx;
      particle.y += particle.vy;

      // Boundary checks
      if (particle.x < 0) {
        particle.x = 0;
        particle.vx = -particle.vx * 0.8;
      }
      if (particle.x > SIM_WIDTH) {
        particle.x = SIM_WIDTH;
        particle.vx = -particle.vx * 0.8;
      }
      if (particle.y < 0) {
        particle.y = 0;
        particle.vy = -particle.vy * 0.8;
      }
      if (particle.y > SIM_HEIGHT) {
        particle.y = SIM_HEIGHT;
        particle.vy = -particle.vy * 0.8;
      }

      // Calculate energy (simplified)
      const speed = Math.sqrt(particle.vx * particle.vx + particle.vy * particle.vy);
      particle.energy = Math.max(0.1, Math.min(5, 0.5 + speed * 0.1));

      // Update wavefunction parameters
      particle.amplitude = 0.5 + Math.sin(time * 0.3) * 0.3;
      particle.phase = time * 0.5;

      updateParticleElement();
      updateStats();
      drawWavefunction();
      time += 0.05;
    }

    // Draw potential curve
    function drawPotentialCurve() {
      let pathData = `M 0 ${SIM_HEIGHT / 2} `;
      for (let x = 0; x <= SIM_WIDTH; x += 5) {
        const y = SIM_HEIGHT / 2 - Math.sin(x * POTENTIAL_FREQUENCY) * SIM_HEIGHT * 0.3;
        pathData += `L ${x} ${y} `;
      }
      pathData += `L ${SIM_WIDTH} ${SIM_HEIGHT / 2}`;
      potentialCurve.setAttribute('d', pathData);
    }

    // Draw wavefunction
    function drawWavefunction() {
      const pathData = `M 0 ${SIM_HEIGHT / 2 + particle.amplitude * 10} `;
      for (let x = 0; x <= SIM_WIDTH; x += 2) {
        const waveY = SIM_HEIGHT / 2 + Math.sin(x * 0.01 + particle.phase) * particle.amplitude * 10;
        pathData += `L ${x} ${waveY} `;
      }
      pathData += `L ${SIM_WIDTH} ${SIM_HEIGHT / 2 + particle.amplitude * 10}`;
      wavefunctionPath.setAttribute('d', pathData);
    }

    // Update particle element position
    function updateParticleElement() {
      particleElement.style.left = `${particle.x - PARTICLE_SIZE / 2}px`;
      particleElement.style.top = `${particle.y - PARTICLE_SIZE / 2}px`;

      // Draw particle on canvas (visualization)
      ctx.clearRect(0, 0, SIM_WIDTH, SIM_HEIGHT);
      ctx.fillStyle = 'rgba(255, 255, 255, 0.1)';
      ctx.fillRect(0, 0, SIM_WIDTH, SIM_HEIGHT);

      // Draw trail
      ctx.strokeStyle = 'rgba(255, 107, 157, 0.3)';
      ctx.lineWidth = 2;
      ctx.beginPath();
      ctx.moveTo(particle.x, particle.y);
      ctx.lineTo(particle.x - 20, particle.y - 20);
      ctx.stroke();

      // Draw particle
      ctx.beginPath();
      ctx.arc(particle.x, particle.y, PARTICLE_SIZE / 2, 0, Math.PI * 2);
      ctx.fillStyle = 'rgba(255, 107, 157, 0.8)';
      ctx.fill();
      ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
      ctx.lineWidth = 1;
      ctx.stroke();
    }

    // Update stats display
    function updateStats() {
      document.getElementById('energyValue').textContent = particle.energy.toFixed(2);
      document.getElementById('amplitudeValue').textContent = particle.amplitude.toFixed(2);
      document.getElementById('phaseValue').textContent = particle.phase.toFixed(2);
    }

    // Event listeners
    document.getElementById('playBtn').addEventListener('click', () => {
      if (!simulationRunning) {
        simulationRunning = true;
        animate();
      }
    });

    document.getElementById('pauseBtn').addEventListener('click', () => {
      simulationRunning = false;
      if (animationFrameId) {
        cancelAnimationFrame(animationFrameId);
        animationFrameId = null;
      }
    });

    document.getElementById('stepBtn').addEventListener('click', () => {
      if (!simulationRunning) {
        updateParticle();
        drawWavefunction();
        updateStats();
      }
    });

    document.getElementById('resetBtn').addEventListener('click', reset);

    document.getElementById('energySlider').addEventListener('input', (e) => {
      const value = parseFloat(e.target.value);
      particle.energy = value;
      updateStats();
    });

    // Animation loop
    function animate() {
      updateParticle();
      if (simulationRunning) {
        animationFrameId = requestAnimationFrame(animate);
      }
    }

    // Initialize
    init();
  </script>
</body>
</html>

using System;
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Linq;
using UnityEngine;
using UnityEngine.UI;
using System.Text;

/// <summary>
/// Ailey's Dynamic Localization System
/// - Imports translations from CSV files
/// - Supports culture-specific formatting (e.g., German decimal comma)
/// - Includes debug UI to visualize translations
/// - Generates temporary runtime language files automatically
/// </summary>
public class AileyLocalizationSystem : MonoBehaviour
{
    [Header("CSV Configuration")]
    [SerializeField] private string[] supportedLanguages = { "en", "de", "fr" };
    [SerializeField] private TextAsset csvTemplate;

    [Header("UI Debug")]
    [SerializeField] private RectTransform debugContainer;
    [SerializeField] private Text debugText;

    private Dictionary<string, Dictionary<string, string>> _languageData = new Dictionary<string, Dictionary<string, string>>();
    private string _currentLanguage = "en";
    private string _runtimeDataPath;

    [ContextMenu("Generate Runtime Language Files")]
    public void GenerateRuntimeLanguageFiles()
    {
        if (csvTemplate == null)
        {
            Debug.LogError("No CSV template assigned!");
            return;
        }

        // Create runtime data directory
        _runtimeDataPath = Path.Combine(Application.persistentDataPath, "Ailey_Localization");
        Directory.CreateDirectory(_runtimeDataPath);

        // Parse CSV template
        string[] lines = csvTemplate.text.Split(new[] { '\n', '\r' }, StringSplitOptions.RemoveEmptyEntries);

        // First line is header (language codes)
        string[] languageCodes = lines[0].Split(',');
        foreach (var code in languageCodes)
        {
            if (supportedLanguages.Contains(code.Trim()))
            {
                _languageData[code.Trim()] = new Dictionary<string, string>();
            }
        }

        // Process content rows
        for (int i = 1; i < lines.Length; i++)
        {
            string[] values = lines[i].Split(',');
            string key = values[0].Trim();

            for (int j = 1; j < values.Length; j++)
            {
                string langCode = languageCodes[j].Trim();
                if (_languageData.ContainsKey(langCode))
                {
                    _languageData[langCode][key] = values[j].Trim();
                }
            }
        }

        // Generate runtime JSON files for each language
        foreach (var langPair in _languageData)
        {
            string jsonPath = Path.Combine(_runtimeDataPath, $"{langPair.Key}.json");
            string json = JsonUtility.ToJson(new LocalizationData(langPair.Key, langPair.Value), true);
            File.WriteAllText(jsonPath, json);
            Debug.Log($"Generated language file: {jsonPath}");
        }

        InitializeDebugUI();
    }

    [ContextMenu("Set Language to English")]
    public void SetLanguageEnglish() => SetCurrentLanguage("en");

    [ContextMenu("Set Language to German")]
    public void SetLanguageGerman() => SetCurrentLanguage("de");

    [ContextMenu("Set Language to French")]
    public void SetCurrentLanguage(string languageCode)
    {
        if (_languageData.ContainsKey(languageCode))
        {
            _currentLanguage = languageCode;
            UpdateCulture();
            UpdateDebugUI();
            Debug.Log($"Language set to: {languageCode}");
        }
        else
        {
            Debug.LogWarning($"Language {languageCode} not supported!");
        }
    }

    public string GetLocalizedString(string key)
    {
        if (_languageData.TryGetValue(_currentLanguage, out var languageDict))
        {
            if (languageDict.TryGetValue(key, out var value))
            {
                return value;
            }
        }
        return key; // Return key if not found (with original culture)
    }

    public string GetLocalizedString(string key, params object[] formatArgs)
    {
        string raw = GetLocalizedString(key);
        if (formatArgs.Length > 0)
        {
            return string.Format(Culture.CurrentCulture, raw, formatArgs);
        }
        return raw;
    }

    private void UpdateCulture()
    {
        CultureInfo culture;
        if (CultureInfo.TryGetCultureInfo(_currentLanguage, out culture))
        {
            CultureInfo.DefaultThreadCurrentCulture = culture;
            CultureInfo.DefaultThreadCurrentUICulture = culture;
            Debug.Log($"Culture updated to: {culture.Name}");
        }
        else
        {
            Debug.LogWarning($"Culture {_currentLanguage} not found!");
        }
    }

    private void InitializeDebugUI()
    {
        if (debugContainer == null || debugText == null) return;

        debugContainer.gameObject.SetActive(true);
        UpdateDebugUI();
    }

    private void UpdateDebugUI()
    {
        if (debugText == null) return;

        StringBuilder sb = new StringBuilder();
        sb.AppendLine($"CURRENT LANGUAGE: {_currentLanguage}");
        sb.AppendLine("=== TRANSLATIONS ===");

        if (_languageData.TryGetValue(_currentLanguage, out var languageDict))
        {
            sb.AppendLine("Key | English | German | French");
            sb.AppendLine("--------------------------------");

            // Get all keys from all languages for comparison
            var allKeys = _languageData.Keys.Aggregate(
                (IEnumerable<string>)_languageData.First().Value.Keys,
                (first, one) => first.Concat(one.Keys));

            foreach (var key in allKeys.Distinct())
            {
                sb.Append($"{key} | ");
                sb.Append($"\"{GetLocalizedString(key, _currentLanguage == "en" ? "" : "en")}\" | ");
                sb.Append($"\"{GetLocalizedString(key, _currentLanguage == "de" ? "" : "de")}\" | ");
                sb.AppendLine($"\"{GetLocalizedString(key, _currentLanguage == "fr" ? "" : "fr")}\"");
            }
        }

        debugText.text = sb.ToString();
    }

    private void OnDestroy()
    {
        if (debugContainer != null)
        {
            debugContainer.gameObject.SetActive(false);
        }
    }

    [Serializable]
    private class LocalizationData
    {
        public string language;
        public Dictionary<string, string> translations;

        public LocalizationData(string lang, Dictionary<string, string> dict)
        {
            language = lang;
            translations = dict;
        }
    }
}

<?php
/**
 * Plugin Name: Dynamic Related Posts with AI-Powered Thumbnails
 * Description: Shows related posts with semantic analysis and AI-generated thumbnails
 * Version: 1.0
 * Author: Ailey
 * License: GPL2
 */

if (!defined('ABSPATH')) exit; // Exit if accessed directly

// =============================================
// CORE CLASS
// =============================================

class Dynamic_Related_Posts {

    private $post_id;
    private $min_related = 3;
    private $max_related = 6;
    private $post_types = ['post'];
    private $exclude_categories = [];
    private $thumbnail_size = 'medium_large';

    public function __construct() {
        // WordPress Hooks
        if (function_exists('add_action')) {
            add_action('wp_enqueue_scripts', [$this, 'enqueue_scripts']);
            add_action('wp_footer', [$this, 'render_related_posts']);
            add_filter('the_content', [$this, 'inject_related_posts']);
        }

        // Joomla Compatibility Check
        if (!defined('JPATH_BASE')) {
            $this->initialize();
        }
    }

    // =============================================
    // WORDPRESS METHODS
    // =============================================

    public function enqueue_scripts() {
        wp_enqueue_style('dyn-related-posts', plugins_url('assets/style.css', __FILE__));
        wp_enqueue_script('dyn-related-posts', plugins_url('assets/script.js', __FILE__), ['jquery'], null, true);
    }

    public function inject_related_posts($content) {
        if (is_single() && in_array(get_post_type(), $this->post_types)) {
            $related_posts = $this->get_related_posts(get_the_ID());
            if (!empty($related_posts)) {
                $output = $this->generate_related_posts_html($related_posts);
                $content .= '<div class="dyn-related-posts-container">' . $output . '</div>';
            }
        }
        return $content;
    }

    public function render_related_posts() {
        echo '<script>new DynamicRelatedPosts();</script>';
    }

    // =============================================
    // CORE LOGIC
    // =============================================

    private function initialize() {
        $this->post_id = isset($_GET['id']) ? (int)$_GET['id'] : null;
        if ($this->post_id) {
            $this->process_request();
        }
    }

    private function process_request() {
        $related_posts = $this->get_related_posts($this->post_id);
        if (!empty($related_posts)) {
            $this->output_related_posts($related_posts);
        } else {
            echo 'No related posts found.';
        }
    }

    private function get_related_posts($post_id) {
        global $wpdb;

        $post = get_post($post_id);
        if (!$post || !in_array($post->post_type, $this->post_types)) {
            return [];
        }

        $exclude_ids = [$post_id];
        if (!empty($this->exclude_categories)) {
            $exclude_ids = array_merge($exclude_ids, $wpdb->get_col(
                $wpdb->prepare(
                    "SELECT id FROM $wpdb->term_relationships WHERE term_taxonomy_id IN (%s)",
                    implode(',', array_map([$wpdb, 'esc_sql'], $this->exclude_categories))
                )
            ));
        }

        $results = $wpdb->get_results(
            $wpdb->prepare(
                "SELECT p.* FROM $wpdb->posts p
                LEFT JOIN $wpdb->post_meta pm ON p.ID = pm.post_id
                WHERE p.post_type IN (%s)
                AND p.post_status = 'publish'
                AND p.ID NOT IN (%s)
                AND (
                    p.post_content LIKE %s
                    OR p.post_title LIKE %s
                    OR (
                        SELECT GROUP_CONCAT(tag.slug)
                        FROM $wpdb->terms tag
                        JOIN $wpdb->term_relationships tr ON tag.term_id = tr.term_taxonomy_id
                        WHERE tr.object_id = p.ID
                    ) LIKE %s
                )
                ORDER BY (
                    CASE
                        WHEN p.post_content LIKE %s THEN 3
                        WHEN p.post_title LIKE %s THEN 2
                        WHEN (
                            SELECT GROUP_CONCAT(tag.slug)
                            FROM $wpdb->terms tag
                            JOIN $wpdb->term_relationships tr ON tag.term_id = tr.term_taxonomy_id
                            WHERE tr.object_id = p.ID
                        ) LIKE %s THEN 1
                        ELSE 0
                    END
                ) DESC
                LIMIT %d, %d",
                implode("', '", $this->post_types),
                implode(',', array_map([$wpdb, 'esc_sql'], $exclude_ids)),
                '%' . $wpdb->esc_like($post->post_content) . '%',
                '%' . $wpdb->esc_like($post->post_title) . '%',
                '%' . $wpdb->esc_like($post->post_title) . '%',
                '%' . $wpdb->esc_like($post->post_content) . '%',
                '%' . $wpdb->esc_like($post->post_title) . '%',
                '%' . $wpdb->esc_like($post->post_title) . '%',
                $this->min_related,
                $this->max_related - $this->min_related
            )
        );

        return $results;
    }

    private function generate_related_posts_html($posts) {
        $html = '<div class="dyn-related-posts-grid">';
        foreach ($posts as $post) {
            setup_postdata($post);
            $thumbnail = $this->generate_thumbnail($post->ID);
            $html .= '<div class="dyn-related-post-item">
                ' . $thumbnail . '
                <h3><a href="' . get_permalink($post->ID) . '">' . get_the_title($post->ID) . '</a></h3>
                <p>' . wp_trim_words(get_the_excerpt($post->ID), 20) . '</p>
                <a href="' . get_permalink($post->ID) . '" class="read-more">Read More</a>
            </div>';
        }
        $html .= '</div>';
        return $html;
    }

    private function generate_thumbnail($post_id) {
        $post = get_post($post_id);
        if (!$post) return '';

        // Check if we already have a featured image
        $featured = get_post_thumbnail_id($post_id);
        if ($featured) {
            return '<div class="dyn-related-thumbnail featured">' . get_the_post_thumbnail($post_id, $this->thumbnail_size) . '</div>';
        }

        // AI-generated thumbnail (simulated with text-based pattern)
        $text = strtoupper(md5(substr($post->post_title, 0, 10)));
        $colors = ['#4a6fa5', '#166088', '#4a4a4a', '#b8b8b8'];
        $shade = $colors[mt_rand(0, count($colors)-1)];

        return '<div class="dyn-related-thumbnail ai-generated" style="background: linear-gradient(45deg, ' . $shade . ', #333);">
            <div class="ai-pattern" style="background-image: url(\'data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\' width=\'24\' height=\'24\' viewBox=\'0 0 24 24\'><rect width=\'4\' height=\'4\' x=\'0\' y=\'0\' fill=\'rgba(255,255,255,0.3)\'/><rect width=\'4\' height=\'4\' x=\'4\' y=\'0\' fill=\'rgba(255,255,255,0.3)\'/><rect width=\'4\' height=\'4\' x=\'0\' y=\'4\' fill=\'rgba(255,255,255,0.3)\'/><rect width=\'4\' height=\'4\' x=\'4\' y=\'4\' fill=\'rgba(255,255,255,0.3)\'/></svg>\');">
                <span class="ai-text">' . substr($text, 0, 3) . '</span>
            </div>
            <span class="ai-label">AI-Generated</span>
        </div>';
    }

    // =============================================
    // JOOMLA COMPATIBILITY
    // =============================================

    public function onContentAfterDisplay($article) {
        if (strpos($article->text, '</article>') !== false) {
            $related_posts = $this->get_related_posts($article->id);
            if (!empty($related_posts)) {
                $output = $this->generate_related_posts_html($related_posts);
                $article->text .= '<div class="dyn-related-posts-container">' . $output . '</div>';
            }
        }
        return $article;
    }

    private function get_related_posts_joomla($post_id) {
        // Simplified Joomla version - in production you'd use JDatabase
        global $mainframe;
        $db = JFactory::getDbo();

        $query = $db->getQuery(true)
            ->select('a.*')
            ->from('#__content AS a')
            ->where('a.state = 1')
            ->where('a.id != ' . (int)$post_id)
            ->where('a.typealias LIKE "article"')
            ->order('a.ordering DESC');

        $db->setQuery($query);
        return $db->loadObjectList();
    }

    private function generate_related_posts_html_joomla($posts) {
        $html = '<div class="dyn-related-posts-grid">';
        foreach ($posts as $post) {
            $thumbnail = $this->generate_thumbnail($post->id);
            $html .= '<div class="dyn-related-post-item">
                ' . $thumbnail . '
                <h3><a href="' . JRoute::_(ContentHelperRoute::getArticleRoute($post->id, $post->catid)) . '">' . htmlspecialchars($post->title) . '</a></h3>
                <p>' . wp_trim_words(htmlspecialchars($post->introtext), 20) . '</p>
                <a href="' . JRoute::_(ContentHelperRoute::getArticleRoute($post->id, $post->catid)) . '" class="read-more">Read More</a>
            </div>';
        }
        $html .= '</div>';
        return $html;
    }
}

// =============================================
// INITIALIZE
// =============================================

if (function_exists('add_action') && class_exists('Dynamic_Related_Posts')) {
    new Dynamic_Related_Posts();
}

// Joomla Detection
if (!defined('JPATH_BASE') && file_exists(__DIR__ . '/joomla.php')) {
    require_once __DIR__ . '/joomla.php';
    $mainframe = JFactory::getApplication('site');
    JPluginHelper::importPlugin('system');
    $mainframe->registerEvent('onContentAfterDisplay', array('Dynamic_Related_Posts', 'onContentAfterDisplay'));
}