A!leys Galerie

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'));
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Morphing SVG Art Gallery</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Arial', sans-serif;
            background: #0a0a0a;
            color: #ffffff;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
        }

        .container {
            width: 90%;
            max-width: 800px;
            text-align: center;
        }

        .gallery-title {
            font-size: 2.5rem;
            margin-bottom: 1.5rem;
            background: linear-gradient(90deg, #00ff88, #0088ff);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            text-shadow: 0 0 10px rgba(0, 255, 136, 0.5);
        }

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

        button {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid #00ff88;
            color: #00ff88;
            padding: 0.8rem 1.5rem;
            font-size: 1rem;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(5px);
        }

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

        button:active {
            transform: translateY(0);
        }

        .svg-container {
            position: relative;
            width: 100%;
            height: 500px;
            margin: 1rem 0;
            border-radius: 15px;
            overflow: hidden;
            background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%);
            box-shadow: 0 0 50px rgba(0, 255, 136, 0.1);
        }

        .svg-content {
            width: 100%;
            height: 100%;
            transition: opacity 0.8s ease, transform 0.8s ease;
        }

        .info-panel {
            background: rgba(0, 0, 0, 0.7);
            border: 2px solid #00ff88;
            border-radius: 15px;
            padding: 1.5rem;
            margin-top: 1rem;
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
            backdrop-filter: blur(5px);
        }

        .artist-info {
            margin-top: 1rem;
            padding-top: 1rem;
            border-top: 1px solid rgba(0, 255, 136, 0.3);
        }

        .artist-info h3 {
            color: #00ff88;
            margin-bottom: 0.5rem;
        }

        .artist-info p {
            color: #aaa;
            font-size: 0.9rem;
            line-height: 1.5;
        }

        .loading {
            color: #00ff88;
            font-size: 1.2rem;
            margin: 1rem 0;
        }

        .cursor-trail {
            position: absolute;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: rgba(0, 255, 136, 0.2);
            pointer-events: none;
            z-index: 10;
            transform: translate(-50%, -50%);
        }

        .svg-container::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, transparent 0%, rgba(0, 0, 0, 0.3) 100%);
            z-index: 1;
            pointer-events: none;
        }

        @media (max-width: 768px) {
            .gallery-title {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="gallery-title">Morphing Art Gallery</h1>

        <div class="loading">Generating art...</div>

        <div class="controls">
            <button id="prevBtn">Previous</button>
            <button id="nextBtn">Next</button>
            <button id="randomBtn">Random</button>
        </div>

        <div class="svg-container">
            <div class="cursor-trail" id="cursorTrail"></div>
            <svg class="svg-content" id="svgCanvas" viewBox="0 0 800 800" preserveAspectRatio="xMidYMid meet">
                <defs>
                    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
                        <stop offset="0%" style="stop-color:#00ff88;stop-opacity:1" />
                        <stop offset="100%" style="stop-color:#0088ff;stop-opacity:1" />
                    </linearGradient>
                    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
                        <feGaussianBlur stdDeviation="10" result="blur" />
                        <feComposite in="SourceGraphic" in2="blur" operator="over" />
                    </filter>
                </defs>

                <!-- Initial SVG content will be generated by JavaScript -->
                <g id="mainGroup">
                    <!-- Will be populated dynamically -->
                </g>
            </svg>
        </div>

        <div class="info-panel">
            <h2 id="artTitle">Title</h2>
            <p id="artDescription">Description of this artwork...</p>
            <div class="artist-info">
                <h3 id="artistName">Artist</h3>
                <p id="artistBio">About the artist...</p>
            </div>
        </div>
    </div>

    <script>
        // ========== CONFIGURATION ==========
        const ARTWORKS = [
            {
                title: "Neon Morph",
                description: "A fluid exploration of geometric shapes with neon gradients.",
                artist: "Ailey Code",
                bio: "Digital artist specializing in generative SVG and morphing animations. Creating where code meets creativity.",
                initialPaths: [
                    { d: "M 400 200 L 600 400 L 200 400 Z", points: [400, 200, 600, 400, 200, 400] },
                    { d: "M 400 200 L 600 300 L 200 300 Z", points: [400, 200, 600, 300, 200, 300] },
                    { d: "M 400 200 L 600 400 L 200 600 Z", points: [400, 200, 600, 400, 200, 600] },
                    { d: "M 400 200 L 600 200 L 200 600 Z", points: [400, 200, 600, 400, 200, 600] },
                    { d: "M 400 200 L 600 400 L 200 200 Z", points: [400, 200, 600, 400, 200, 200] }
                ],
                colors: ["#00ff88", "#0088ff", "#ff8800", "#ff0088", "#8800ff"],
                morphSpeed: 2000,
                particleDensity: 0.15
            },
            {
                title: "Cosmic Flow",
                description: "Inspired by celestial bodies, this piece captures the dance of the universe.",
                artist: "Ailey Code",
                bio: "Digital artist specializing in generative SVG and morphing animations. Creating where code meets creativity.",
                initialPaths: [
                    { d: "M 300 300 Q 400 200 500 300 Q 400 400 300 300 Z", points: [300, 300, 400, 200, 500, 300, 400, 400, 300, 300] },
                    { d: "M 300 300 Q 500 200 700 300 Q 500 400 300 300 Z", points: [300, 300, 500, 200, 700, 300, 500, 400, 300, 300] },
                    { d: "M 300 300 Q 400 100 500 300 Q 400 500 300 300 Z", points: [300, 300, 400, 100, 500, 300, 400, 500, 300, 300] },
                    { d: "M 300 300 Q 600 200 700 300 Q 600 400 300 300 Z", points: [300, 300, 600, 200, 700, 300, 600, 400, 300, 300] },
                    { d: "M 300 300 Q 500 300 700 300 Q 500 300 300 300 Z", points: [300, 300, 500, 300, 700, 300, 500, 300, 300, 300] }
                ],
                colors: ["#0088ff", "#88ff00", "#ff8800", "#ff0088", "#8800ff"],
                morphSpeed: 3000,
                particleDensity: 0.2
            },
            {
                title: "Fractal Dream",
                description: "A journey through recursive patterns and infinite complexity.",
                artist: "Ailey Code",
                bio: "Digital artist specializing in generative SVG and morphing animations. Creating where code meets creativity.",
                initialPaths: [
                    { d: "M 200 200 L 600 200 L 600 600 L 200 600 Z", points: [200, 200, 600, 200, 600, 600, 200, 600] },
                    { d: "M 200 200 L 600 400 L 400 600 L 200 600 Z", points: [200, 200, 600, 400, 400, 600, 200, 600] },
                    { d: "M 200 200 L 600 600 L 200 600 Z", points: [200, 200, 600, 600, 200, 600] },
                    { d: "M 200 200 L 600 200 L 200 600 Z", points: [200, 200, 600, 200, 200, 600] },
                    { d: "M 200 200 L 600 400 L 200 400 Z", points: [200, 200, 600, 400, 200, 400] }
                ],
                colors: ["#00ff88", "#88ff00", "#ff8800", "#ff0088", "#8800ff"],
                morphSpeed: 1500,
                particleDensity: 0.1
            }
        ];

        // ========== MAIN APP ==========
        class MorphingSVG {
            constructor() {
                this.currentIndex = 0;
                this.isAnimating = false;
                this.Animated = document.getElementById('svgCanvas');
                this.mainGroup = document.getElementById('mainGroup');
                this.gradient = document.getElementById('gradient');
                this.cursorTrail = document.getElementById('cursorTrail');
                this.titleElement = document.getElementById('artTitle');
                this.descriptionElement = document.getElementById('artDescription');
                this.artistNameElement = document.getElementById('artistName');
                this.artistBioElement = document.getElementById('artistBio');
                this.loadingElement = document.getElementById('loading');
                this.prevBtn = document.getElementById('prevBtn');
                this.nextBtn = document.getElementById('nextBtn');
                this.randomBtn = document.getElementById('randomBtn');

                this.setupEventListeners();
                this.loadInitialArtwork();
            }

            setupEventListeners() {
                this.prevBtn.addEventListener('click', () => this.changeArtwork(-1));
                this.nextBtn.addEventListener('click', () => this.changeArtwork(1));
                this.randomBtn.addEventListener('click', () => this.changeArtwork(Math.floor(Math.random() * ARTWORKS.length) - this.currentIndex));

                // Mouse position tracking for cursor trail
                document.addEventListener('mousemove', (e) => {
                    const trail = this.cursorTrail;
                    const x = e.clientX;
                    const y = e.clientY;
                    const container = document.querySelector('.svg-container');
                    const rect = container.getBoundingClientRect();

                    if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) {
                        trail.style.left = `${x}px`;
                        trail.style.top = `${y}px`;
                    }
                });

                // Ensure clicking on SVG doesn't interfere with transitions
                document.getElementById('svgCanvas').addEventListener('click', (e) => {
                    if (!this.isAnimating) {
                        this.changeArtwork(1);
                    }
                });
            }

            loadInitialArtwork() {
                const artwork = ARTWORKS[this.currentIndex];
                this.updateInfoPanel(artwork);
                this.createSVGContent(artwork);
                this.loadingElement.style.display = 'none';
                this.Animated.style.opacity = 1;
            }

            updateInfoPanel(artwork) {
                this.titleElement.textContent = artwork.title;
                this.descriptionElement.textContent = artwork.description;
                this.artistNameElement.textContent = artwork.artist;
                this.artistBioElement.textContent = artwork.bio;
            }

            async changeArtwork(direction) {
                if (this.isAnimating) return;

                this.isAnimating = true;
                const artworkCount = ARTWORKS.length;

                // Calculate new index with wrap-around
                this.currentIndex = (this.currentIndex + direction + artworkCount) % artworkCount;

                // Fade out current content
                this.Animated.style.opacity = 0;
                this.Animated.style.transform = 'scale(0.95)';

                // Wait for fade out
                await new Promise(resolve => setTimeout(resolve, 800));

                // Clear existing content
                this.mainGroup.innerHTML = '';
                this.gradient.removeAttribute('id');
                const newGradient = this.gradient.cloneNode(true);
                newGradient.id = 'gradient';
                this.gradient.parentNode.replaceChild(newGradient, this.gradient);

                // Generate new SVG content
                this.createSVGContent(ARTWORKS[this.currentIndex]);
            }

            createSVGContent(artwork) {
                const mainGroup = this.mainGroup;
                mainGroup.innerHTML = '';
                artwork.initialPaths.forEach((path, index) => {
                    const pathElement = document.createElementNS('http://www.w3.org/2000/svg', 'path');
                    pathElement.setAttribute('d', path.d);
                    pathElement.setAttribute('fill', `rgba(${artwork.colors[index]}, 0.8)`);
                    pathElement.setAttribute('stroke', `rgba(${artwork.colors[index]}, 0.6)`);
                    pathElement.setAttribute('stroke-width', 2);
                    pathElement.setAttribute('stroke-linecap', 'round');
                    pathElement.setAttribute('stroke-linejoin', 'round');
                    mainGroup.appendChild(pathElement);
                });
            }
        }

        new MorphingSVG();
    </script>
</body>
</html>
```