A!leys Galerie

#!/usr/bin/env node
import { program } from 'commander';
import chalk from 'chalk';
import figlet from 'figlet';
import ora from 'ora';
import { createCanvas, loadImage } from 'canvas';
import { createWriteStream, createReadStream, existsSync, unlinkSync } from 'fs';
import { join, dirname, basename } from 'path';
import { execSync } from 'child_process';

// Constants
const COLORS = ['red', 'green', 'blue', 'yellow', 'magenta', 'cyan', 'white'];
const DIRECTIONS = ['up', 'down', 'left', 'right'];
const MAZE_TYPES = ['random', 'spiral', 'maze'];
const CANVAS_SIZE = 200;
const PROGRESS_BAR_LENGTH = 50;

// Helper to get random element
function randomElement(arr) {
  return arr[Math.floor(Math.random() * arr.length)];
}

// Generate random maze
function generateMaze(type, width, height) {
  const grid = Array(height).fill().map(() => Array(width).fill(1));

  if (type === 'spiral') {
    let x = 0, y = 0;
    const dirs = ['right', 'down', 'left', 'up'];
    let dirIndex = 0;

    for (let i = 0; i < width * height; i++) {
      grid[y][x] = 0;
      let nextX = x, nextY = y;

      if (dirIndex === 0) nextX++;
      else if (dirIndex === 1) nextY++;
      else if (dirIndex === 2) nextX--;
      else nextY--;

      if (nextX < 0 || nextX >= width || nextY < 0 || nextY >= height || grid[nextY][nextX] === 0) {
        dirIndex = (dirIndex + 1) % 4;
        nextX = x + (dirIndex === 0 ? 1 : dirIndex === 2 ? -1 : 0);
        nextY = y + (dirIndex === 1 ? 1 : dirIndex === 3 ? -1 : 0);
      }

      x = nextX;
      y = nextY;
    }
  } else if (type === 'maze') {
    const visited = Array(height).fill().map(() => Array(width).fill(false));
    let x = 1, y = 1;
    let prevX = x, prevY = y;
    grid[y][x] = 0;
    visited[y][x] = true;

    for (let i = 0; i < width * height - 1; i++) {
      const neighbors = [];
      if (x > 0 && !visited[y][x - 1]) neighbors.push([x - 1, y]);
      if (x < width - 1 && !visited[y][x + 1]) neighbors.push([x + 1, y]);
      if (y > 0 && !visited[y - 1][x]) neighbors.push([x, y - 1]);
      if (y < height - 1 && !visited[y + 1][x]) neighbors.push([x, y + 1]);

      if (neighbors.length > 0) {
        const [nextX, nextY] = randomElement(neighbors);
        grid[nextY][nextX] = 0;
        visited[nextY][nextX] = true;
        grid[y + (nextY - prevY)][x + (nextX - prevX)] = 0;
        prevX = x; prevY = y;
        x = nextX; y = nextY;
      } else {
        if (i % 2 === 0) {
          x = prevX; y = prevY;
        } else {
          x = prevX + (Math.random() > 0.5 ? 1 : -1);
          y = prevY + (Math.random() > 0.5 ? 1 : -1);
          if (x < 0 || x >= width || y < 0 || y >= height) {
            x = prevX; y = prevY;
          }
        }
      }
    }
  } else {
    for (let y = 0; y < height; y += 2) {
      for (let x = 0; x < width; x += 2) {
        grid[y][x] = 0;
      }
    }
  }

  return grid;
}

// Solve maze using DFS
function solveMaze(maze) {
  const height = maze.length;
  const width = maze[0].length;
  const solution = [];
  const visited = Array(height).fill().map(() => Array(width).fill(false));
  let path = [];

  function dfs(x, y) {
    if (x < 0 || x >= width || y < 0 || y >= height || maze[y][x] === 1 || visited[y][x]) return false;
    visited[y][x] = true;
    path.push({ x, y });

    if (x === width - 1 && y === height - 1) {
      solution.push([...path]);
      return true;
    }

    const directions = [['right', x + 1, y], ['down', x, y + 1], ['left', x - 1, y], ['up', x, y - 1]];
    const shuffled = [...directions].sort(() => 0.5 - Math.random());

    for (const [dir, nx, ny] of shuffled) {
      if (dfs(nx, ny)) return true;
    }

    path.pop();
    return false;
  }

  dfs(0, 0);
  return solution;
}

// Generate ASCII maze
function generateAsciiMaze(maze) {
  const height = maze.length;
  const width = maze[0].length;
  let ascii = [];

  for (let y = 0; y <= height; y++) {
    let line = '';
    for (let x = 0; x <= width; x++) {
      if (x === 0 || y === 0 || x === width || y === height) {
        line += (x === 0 || x === width) ? '+' : '-';
      } else {
        line += maze[y][x] ? '|' : ' ';
      }
    }
    ascii.push(line);
  }

  return ascii;
}

// Draw progress bar with colors
function drawProgressBar(current, total, color, message = '') {
  const percentage = Math.round((current / total) * 100);
  const completed = Math.round((current / total) * PROGRESS_BAR_LENGTH);
  const remaining = PROGRESS_BAR_LENGTH - completed;

  const bar = chalk[color].bgHex('#222222')('[') +
              chalk[color]('█'.repeat(completed)) +
              chalk.gray('░'.repeat(remaining)) +
              chalk[color](']') +
              chalk[color](` ${percentage}%`);

  const totalLabel = chalk[color](` ${message} `);
  console.log(`\r${bar}${totalLabel}`, { colors: true });
}

// Generate random color
function getRandomColor() {
  return randomElement(COLORS);
}

// Generate rainbow color
function getRainbowColor(index) {
  return COLORS[index % COLORS.length];
}

// Main function
async function main() {
  program
    .name('rainbow-progress-puzzle')
    .description('A colorful CLI maze solver with progress bars')
    .version('1.0.0')
    .option('-w, --width <number>', 'Maze width (default: 10)', parseInt)
    .option('-h, --height <number>', 'Maze height (default: 10)', parseInt)
    .option('-t, --type <type>', 'Maze type (random, spiral, maze) (default: random)', String)
    .option('-c, --color <color>', 'Progress bar color (red, green, blue, yellow, magenta, cyan, white, rainbow)', String)
    .option('-s, --speed <number>', 'Animation speed (1-10, default: 5)', parseInt)
    .option('-a, --animate', 'Animate the maze solution')
    .parse(process.argv);

  const options = program.opts();
  const width = options.width || 10;
  const height = options.height || 10;
  const type = options.type || 'random';
  const color = options.color || 'rainbow';
  const speed = Math.max(1, Math.min(10, options.speed || 5));
  const animate = options.animate || false;

  // Validate maze type
  if (!MAZE_TYPES.includes(type)) {
    console.error(chalk.red(`\nInvalid maze type. Choose from: ${MAZE_TYPES.join(', ')}`));
    process.exit(1);
  }

  // Generate maze
  const maze = generateMaze(type, width, height);
  const asciiMaze = generateAsciiMaze(maze);
  const solution = animate ? solveMaze(maze) : [];

  // Display title with figlet
  const title = 'Rainbow Maze Solver';
  figlet(text=title, font='Slant', color='rainbow', function(err, asciiArt) {
    if (err) {
      console.log(chalk.red('Could not generate title.'));
      process.exit(1);
    }
    console.log(chalk[getRandomColor()](asciiArt));
  });

  // Display maze
  console.log('\nMaze:');
  asciiMaze.forEach(line => {
    console.log(chalk[getRandomColor()](line));
  });

  // Solve with progress bar
  const spinner = ora({
    text: `Solving ${title}...`,
    spinner: 'arc',
    color: getRandomColor()
  }).start();

  const totalSteps = animate ? solution.length * speed : 100;
  let currentStep = 0;

  const interval = setInterval(() => {
    currentStep++;

    if (color === 'rainbow') {
      drawProgressBar(currentStep, totalSteps, getRainbowColor(currentStep), `Solving step ${currentStep}/${totalSteps}`);
    } else {
      drawProgressBar(currentStep, totalSteps, color, `Solving step ${currentStep}/${totalSteps}`);
    }

    if (animate && currentStep <= solution.length * speed) {
      const stepIndex = Math.floor((currentStep - 1) / speed);
      const path = solution[stepIndex];
      const x = path[stepIndex % path.length].x;
      const y = path[stepIndex % path.length].y;

      // Clear console (simple approach)
      console.log('\x1B[2J\x1B[0f');

      // Reprint maze with path
      asciiMaze.forEach((line, yIndex) => {
        if (yIndex === y) {
          let modifiedLine = line;
          for (let xIndex = 0; xIndex < line.length; xIndex++) {
            if (line[xIndex] === '+' || line[xIndex] === '-' || line[xIndex] === '|') {
              if (xIndex === x * 2 + 1 || xIndex === x * 2 + 2) {
                modifiedLine = modifiedLine.substring(0, xIndex) + chalk[getRainbowColor(currentStep)](line[xIndex]) + modifiedLine.substring(xIndex + 1);
              }
            }
          }
          console.log(modifiedLine);
        } else {
          console.log(chalk[getRandomColor()](line));
        }
      });

      // Redraw progress bar
      if (color === 'rainbow') {
        drawProgressBar(currentStep, totalSteps, getRainbowColor(currentStep), `Solving step ${currentStep}/${totalSteps}`);
      } else {
        drawProgressBar(currentStep, totalSteps, color, `Solving step ${currentStep}/${totalSteps}`);
      }
    }

    if (currentStep >= totalSteps) {
      clearInterval(interval);
      spinner.stop();
      console.log('\n');
      if (animate) {
        console.log(chalk[getRandomColor()](`Maze solved in ${solution.length} steps!`));
      } else {
        console.log(chalk[getRandomColor()](`Maze solved! (No animation)`));
      }

      // Generate and display ASCII art for solved maze
      const solvedMaze = generateAsciiMaze(maze);
      solvedMaze.forEach((line, y) => {
        if (y === height) {
          let pathLine = line;
          for (let x = 0; x < solution[0].length; x++) {
            const pos = solution[0][x];
            if (pos.x * 2 + 1 < pathLine.length) {
              pathLine = pathLine.substring(0, pos.x * 2 + 1) + chalk[getRainbowColor(currentStep)]('O') + pathLine.substring(pos.x * 2 + 2);
            }
          }
          console.log(chalk[getRainbowColor(currentStep)](pathLine));
        } else {
          console.log(chalk[getRandomColor()](line));
        }
      });

      // Generate and display simple animation if requested
      if (animate) {
        console.log('\nGenerating ASCII animation...');
        const animationFrames = [];

        for (let i = 0; i < solution.length; i++) {
          const frame = [];
          for (let y = 0; y < height + 1; y++) {
            let line = '';
            for (let x = 0; x < width + 1; x++) {
              if (x === 0 || y === 0 || x === width || y === height) {
                line += (x === 0 || x === width) ? '+' : '-';
              } else {
                line += maze[y][x] ? '|' : ' ';
              }
            }
            frame.push(line);
          }

          // Add solution path to frame
          for (let j = 0; j <= i; j++) {
            const pos = solution[i][j];
            const x = pos.x * 2 + 1;
            const y = pos.y;
            if (x < frame[y].length) {
              frame[y] = frame[y].substring(0, x) + 'O' + frame[y].substring(x + 1);
            }
          }

          animationFrames.push(frame);
        }

        // Write animation to file
        const animationFile = 'maze_animation.txt';
        const writeStream = createWriteStream(animationFile);

        writeStream.write('ASCII Maze Animation (save and view with a text editor)\n\n');
        animationFrames.forEach(frame => {
          frame.forEach(line => {
            writeStream.write(line + '\n');
          });
          writeStream.write('\n');
        });

        writeStream.end();

        console.log(chalk[getRandomColor()](`Animation saved to ${animationFile}`));
      }
    }
  }, 100 / speed);
}

// Handle errors
process.on('unhandledRejection', (err) => {
  console.error(chalk.red(`\nUncaught error: ${err}`));
  process.exit(1);
});

// Run the program
main().catch(err => {
  console.error(chalk.red(`\nError: ${err}`));
  process.exit(1);
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Glow Stat Cards - Animated Portfolio Skill Bars</title>
    <style>
        :root {
            --primary: #6c5ce7;
            --secondary: #a29bfe;
            --accent: #fd79a8;
            --dark: #2d3436;
            --light: #f5f6fa;
            --glow: rgba(108, 92, 231, 0.3);
        }

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

        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: var(--dark);
            min-height: 100vh;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow-x: hidden;
        }

        h1 {
            font-size: 2.5rem;
            margin-bottom: 2rem;
            text-align: center;
            background: linear-gradient(90deg, var(--primary), var(--accent));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            animation: float 3s ease-in-out infinite;
        }

        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }

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

        .stat-card {
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(108, 92, 231, 0.2);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
            cursor: pointer;
            border: 2px solid transparent;
        }

        .stat-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
            border-color: var(--primary);
        }

        .stat-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(253, 121, 168, 0.1) 0%, transparent 70%);
            transform: translate(-20%, -20%);
            opacity: 0;
            transition: opacity 0.5s ease;
        }

        .stat-card:hover::before {
            opacity: 1;
        }

        .card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid rgba(108, 92, 231, 0.1);
        }

        .card-title {
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--primary);
            margin: 0;
        }

        .skill-level {
            font-size: 0.9rem;
            color: var(--dark);
            font-weight: 500;
        }

        .progress-container {
            margin: 1rem 0;
            height: 10px;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 5px;
            overflow: hidden;
            position: relative;
        }

        .progress-bar {
            height: 100%;
            background: var(--primary);
            border-radius: 5px;
            width: 0%;
            transition: width 1.5s ease-out, background 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .progress-bar::after {
            content: '';
            position: absolute;
            right: 0;
            top: 50%;
            width: 50%;
            height: 5px;
            background: var(--accent);
            transform: translateY(-50%) rotate(45deg);
            transform-origin: right;
        }

        .progress-label {
            text-align: right;
            font-size: 0.8rem;
            color: var(--dark);
            font-weight: 500;
        }

        .skills-list {
            list-style: none;
            margin-top: 1.5rem;
        }

        .skills-list li {
            padding: 0.3rem 0;
            border-bottom: 1px solid rgba(108, 92, 231, 0.05);
            transition: all 0.2s ease;
        }

        .skills-list li:hover {
            padding-left: 5px;
            color: var(--primary);
        }

        .skills-list li::before {
            content: '•';
            color: var(--accent);
            margin-right: 0.5rem;
            transition: all 0.2s ease;
        }

        .control-panel {
            background: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            border: 1px solid rgba(108, 92, 231, 0.2);
            width: 100%;
            max-width: 600px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 2rem;
            position: relative;
        }

        .control-btn {
            background: transparent;
            border: none;
            color: var(--dark);
            font-size: 1rem;
            font-weight: 500;
            cursor: pointer;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .control-btn:hover {
            background: var(--primary);
            color: white;
            transform: scale(1.05);
        }

        .control-btn.active {
            background: var(--accent);
            color: white;
            transform: scale(1.05);
        }

        .btn-icon {
            margin-right: 0.5rem;
            font-size: 0.8rem;
        }

        .sound-icon {
            font-size: 1.2rem;
            margin-left: 0.5rem;
        }

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

            .control-panel {
                flex-direction: column;
                gap: 1rem;
            }
        }
    </style>
</head>
<body>
    <h1>Glow Stat Cards</h1>

    <div class="cards-container" id="cardsContainer">
        <!-- Cards will be dynamically added here -->
    </div>

    <div class="control-panel">
        <button class="control-btn" id="randomizeBtn">
            <span class="btn-icon">🎲</span> Randomize
        </button>
        <button class="control-btn active" id="playSoundBtn">
            <span class="btn-icon">🔊</span> Sound: ON
        </button>
    </div>

    <audio id="hoverSound" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU..."></audio>
    <audio id="clickSound" src="data:audio/wav;base64,UklGRl9vT19XQVZFZm10IBAAAAABAAEAQB8AAEAfAAABAAgAZGF0YU..."></audio>

    <script>
        // Sample data for the stat cards
        const skillsData = [
            {
                title: "JavaScript",
                level: "Expert",
                progress: 95,
                skills: ["ES6+ Features", "DOM Manipulation", "Async/Await", "Modern Tooling (Webpack, Babel)", "Functional Programming"]
            },
            {
                title: "TypeScript",
                level: "Advanced",
                progress: 88,
                skills: ["Type Safety", "Interfaces", "Generics", "Decorators", "Angular/React Integration"]
            },
            {
                title: "CSS/SCSS",
                level: "Expert",
                progress: 92,
                skills: ["Animations", "Responsive Design", "Flexbox/Grid", "CSS Variables", "Custom Properties & Inheritance"]
            },
            {
                title: "HTML5",
                level: "Advanced",
                progress: 85,
                skills: ["Semantic HTML", "Accessibility", "Web Components", "HTML Templates", "Canvas API"]
            },
            {
                title: "React",
                level: "Expert",
                progress: 90,
                skills: ["Functional Components", "Hooks", "Context API", "React Router", "State Management (Redux, Zustand)"]
            },
            {
                title: "Node.js",
                level: "Advanced",
                progress: 82,
                skills: ["NPM Scripts", "Express.js", "File System", "Streaming", "CLI Applications"]
            },
            {
                title: "Python",
                level: "Intermediate",
                progress: 65,
                skills: ["Data Analysis", "Web Scraping", "Automation", "Django Basics", "Pandas Library"]
            },
            {
                title: "UI/UX Design",
                level: "Advanced",
                progress: 78,
                skills: ["Figma", "Prototyping", "User Research", "Wireframing", "Design Systems"]
            }
        ];

        // Get DOM elements
        const cardsContainer = document.getElementById('cardsContainer');
        const randomizeBtn = document.getElementById('randomizeBtn');
        const playSoundBtn = document.getElementById('playSoundBtn');
        const hoverSound = document.getElementById('hoverSound');
        const clickSound = document.getElementById('clickSound');

        // Sound state
        let soundEnabled = true;

        // Function to play sounds with volume control
        function playSound(sound, volume = 0.5) {
            if (!soundEnabled) return;
            sound.volume = volume;
            sound.currentTime = 0;
            sound.play().catch(e => console.log('Sound play failed:', e));
        }

        // Initialize the stat cards
        function initCards() {
            cardsContainer.innerHTML = '';

            skillsData.forEach((skill, index) => {
                const card = document.createElement('div');
                card.className = 'stat-card';
                card.innerHTML = `
                    <div class="card-header">
                        <h3 class="card-title">${skill.title}</h3>
                        <span class="skill-level">${skill.level}</span>
                    </div>
                    <div class="progress-container">
                        <div class="progress-bar" style="width: ${skill.progress}%"></div>
                        <span class="progress-label">${skill.progress}%</span>
                    </div>
                    <ul class="skills-list">
                        ${skill.skills.map(skill => `<li>${skill}</li>`).join('')}
                    </ul>
                `;
                cardsContainer.appendChild(card);
            });

            // Add event listeners to cards
            document.querySelectorAll('.stat-card').forEach(card => {
                card.addEventListener('mouseenter', () => {
                    playSound(hoverSound, 0.3);
                });

                card.addEventListener('click', () => {
                    playSound(clickSound, 0.5);
                    card.classList.toggle('active');

                    // Visual feedback for click
                    const rect = card.getBoundingClientRect();
                    const size = Math.max(rect.width, rect.height);
                    const circle = document.createElement('div');
                    circle.style.width = `${size}px`;
                    circle.style.height = `${size}px`;
                    circle.style.left = `${rect.left + rect.width / 2}px`;
                    circle.style.top = `${rect.top + rect.height / 2}px`;
                    circle.style.background = 'var(--accent)';
                    circle.style.borderRadius = '50%';
                    circle.style.position = 'fixed';
                    circle.style.zIndex = '1000';
                    circle.style.pointerEvents = 'none';
                    circle.style.transform = 'scale(0)';
                    circle.style.transition = 'transform 0.5s ease-out';
                    document.body.appendChild(circle);

                    setTimeout(() => {
                        circle.style.transform = 'scale(1.5)';
                        setTimeout(() => {
                            circle.remove();
                        }, 200);
                    }, 10);
                });
            });
        }

        // Randomize the progress values
        function randomizeProgress() {
            skillsData.forEach((skill, index) => {
                // Preserve the title and level, just randomize the progress
                const newProgress = Math.floor(Math.random() * 91) + 10; // Between 10% and 100%
                skill.progress = newProgress;

                // Update the UI
                const progressBar = document.querySelector(`.stat-card:nth-child(${index + 1}) .progress-bar`);
                progressBar.style.width = `${newProgress}%`;
                document.querySelector(`.stat-card:nth-child(${index + 1}) .progress-label`).textContent = `${newProgress}%`;
            });
        }

        // Toggle sound on/off
        function toggleSound() {
            soundEnabled = !soundEnabled;
            playSoundBtn.textContent = soundEnabled ? 'Sound: ON' : 'Sound: OFF';
            playSoundBtn.classList.toggle('active', soundEnabled);
        }

        // Event listeners
        randomizeBtn.addEventListener('click', () => {
            playSound(clickSound, 0.5);
            randomizeProgress();
        });

        playSoundBtn.addEventListener('click', toggleSound);

        // Add mouse movement effect to body (for the background glow)
        document.addEventListener('mousemove', (e) => {
            if (soundEnabled) {
                // Play a very subtle sound on mouse movement for visual feedback
                hoverSound.volume = 0.1;
                hoverSound.currentTime = 0;
                hoverSound.play().catch(e => console.log('Mouse movement sound failed:', e));
            }

            // Create a subtle glow effect that follows the mouse
            const glow = document.createElement('div');
            glow.style.position = 'fixed';
            glow.style.width = '20px';
            glow.style.height = '20px';
            glow.style.left = `${e.clientX}px`;
            glow.style.top = `${e.clientY}px`;
            glow.style.background = 'var(--glow)';
            glow.style.borderRadius = '50%';
            glow.style.pointerEvents = 'none';
            glow.style.opacity = '0';
            glow.style.transition = 'opacity 0.5s, transform 0.5s';
            glow.style.transform = 'translate(-50%, -50%) scale(0)';
            document.body.appendChild(glow);

            setTimeout(() => {
                glow.style.opacity = '0.5';
                glow.style.transform = 'translate(-50%, -50%) scale(1)';
                setTimeout(() => {
                    glow.remove();
                }, 500);
            }, 10);
        });

        // Initialize the cards on page load
        initCards();
    </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>Cosmic Quiz Odyssey</title>
    <style>
        :root {
            --bg-dark: #0a0a1a;
            --bg-deep: #1a1a3a;
            --accent-purple: #8a2be2;
            --accent-blue: #4169e1;
            --accent-teal: #20b2aa;
            --accent-orange: #ff7f50;
            --text-light: #e0e0e0;
            --text-primary: #ffffff;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Arial', sans-serif;
        }

        body {
            background-color: var(--bg-dark);
            color: var(--text-light);
            overflow: hidden;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .quiz-container {
            background: linear-gradient(135deg, var(--bg-deep), var(--bg-dark));
            border-radius: 20px;
            padding: 30px;
            width: 90%;
            max-width: 600px;
            box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
            border: 1px solid rgba(138, 43, 226, 0.2);
            position: relative;
            overflow: hidden;
        }

        .title {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.2rem;
            color: var(--text-primary);
            text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
            position: relative;
        }

        .title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 3px;
            background: linear-gradient(to right, var(--accent-purple), var(--accent-teal));
            border-radius: 3px;
        }

        .score-display {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            padding: 10px;
            background-color: rgba(0, 0, 0, 0.3);
            border-radius: 10px;
        }

        .score {
            font-size: 1.1rem;
            font-weight: bold;
            color: var(--accent-blue);
            text-shadow: 0 0 5px var(--accent-blue);
        }

        .progress-container {
            margin-bottom: 20px;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            padding: 5px;
            overflow: hidden;
        }

        .progress-bar {
            height: 10px;
            background-color: var(--accent-purple);
            width: 0%;
            transition: width 0.3s ease;
            border-radius: 5px;
        }

        .question-container {
            margin-bottom: 30px;
            padding: 20px;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            border-left: 4px solid var(--accent-purple);
            animation: fadeIn 0.5s ease;
        }

        .question {
            font-size: 1.3rem;
            margin-bottom: 20px;
            line-height: 1.5;
        }

        .options {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .option {
            padding: 12px;
            background-color: var(--bg-deep);
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.2s ease;
            border: 2px solid transparent;
            font-size: 1.1rem;
        }

        .option:hover {
            background-color: var(--bg-dark);
            transform: translateY(-2px);
        }

        .option.selected {
            background-color: var(--accent-purple);
            color: var(--text-primary);
            border-color: var(--accent-purple);
            transform: translateY(-2px) scale(1.05);
        }

        .option.correct {
            background-color: rgba(32, 178, 170, 0.3);
            color: var(--accent-teal);
            border-color: var(--accent-teal);
            animation: pulse 1s infinite;
        }

        .option.incorrect {
            background-color: rgba(255, 127, 80, 0.3);
            color: var(--accent-orange);
            border-color: var(--accent-orange);
        }

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

        button {
            padding: 10px 20px;
            background-color: var(--accent-blue);
            color: var(--text-primary);
            border: none;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.2s ease;
            font-weight: bold;
        }

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

        button:disabled {
            background-color: rgba(0, 0, 0, 0.3);
            cursor: not-allowed;
            transform: none;
        }

        .feedback {
            margin-top: 20px;
            padding: 15px;
            border-radius: 10px;
            text-align: center;
            font-size: 1.1rem;
            display: none;
        }

        .correct-feedback {
            background-color: rgba(32, 178, 170, 0.3);
            color: var(--accent-teal);
        }

        .incorrect-feedback {
            background-color: rgba(255, 127, 80, 0.3);
            color: var(--accent-orange);
        }

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

        .star {
            position: absolute;
            background-color: white;
            border-radius: 50%;
            animation: twinkle 3s infinite;
        }

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

        .particle {
            position: absolute;
            background-color: var(--accent-purple);
            border-radius: 50%;
            animation: particle 1s linear;
        }

        @keyframes twinkle {
            0%, 100% { opacity: 0.2; }
            50% { opacity: 1; }
        }

        @keyframes particle {
            0% {
                transform: translateX(0) translateY(0);
                opacity: 1;
            }
            100% {
                transform: translateX(var(--dx)) translateY(var(--dy));
                opacity: 0;
            }
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .score-streak {
            display: flex;
            align-items: center;
            gap: 5px;
            margin-left: 20px;
        }

        .streak-icon {
            color: var(--accent-teal);
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <div class="stars" id="stars"></div>
    <div class="particles" id="particles"></div>

    <div class="quiz-container">
        <h1 class="title">Cosmic Quiz Odyssey</h1>

        <div class="score-display">
            <div class="score" id="score">Score: <span id="score-value">0</span></div>
            <div class="score" id="streak">
                <span class="streak-icon">🔥</span>
                <span id="streak-value">0</span>
            </div>
        </div>

        <div class="progress-container">
            <div class="progress-bar" id="progress-bar"></div>
        </div>

        <div class="question-container" id="question-container">
            <div class="question" id="question"></div>
            <div class="options" id="options"></div>
        </div>

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

        <div class="controls">
            <button id="next-btn" disabled>Next Question</button>
            <button id="restart-btn">Restart Quiz</button>
        </div>
    </div>

    <script>
        // Quiz data - space/cosmic themed questions
        const quizData = [
            {
                question: "What is the largest planet in our solar system?",
                options: ["Earth", "Jupiter", "Mars", "Venus"],
                correct: 1
            },
            {
                question: "Which galaxy is our Milky Way expected to collide with in about 4.5 billion years?",
                options: ["Andromeda", "Triangulum", "Large Magellanic Cloud", "Sombrero"],
                correct: 0
            },
            {
                question: "What is the name of the first artificial Earth satellite?",
                options: ["Voyager 1", "Sputnik 1", "Hubble", "Apollo 11"],
                correct: 1
            },
            {
                question: "Which planet has the most moons in our solar system?",
                options: ["Jupiter", "Saturn", "Uranus", "Neptune"],
                correct: 1
            },
            {
                question: "What is the term for the phenomenon where light bends around massive objects like black holes?",
                options: ["Quantum tunneling", "Gravitational lensing", "Hawking radiation", "Neutrino oscillation"],
                correct: 1
            },
            {
                question: "Which space agency launched the Voyager 2 spacecraft?",
                options: ["NASA", "ESA", "Roscosmos", "CNSA"],
                correct: 0
            },
            {
                question: "What is the estimated age of the universe?",
                options: ["4.5 billion years", "13.8 billion years", "20 billion years", "100 billion years"],
                correct: 1
            },
            {
                question: "Which of these is NOT a type of galaxy?",
                options: ["Spiral", "Elliptical", "Irregular", "Quasar"],
                correct: 3
            }
        ];

        // DOM elements
        const questionElement = document.getElementById('question');
        const optionsElement = document.getElementById('options');
        const nextBtn = document.getElementById('next-btn');
        const restartBtn = document.getElementById('restart-btn');
        const scoreValue = document.getElementById('score-value');
        const streakValue = document.getElementById('streak-value');
        const progressBar = document.getElementById('progress-bar');
        const feedbackElement = document.getElementById('feedback');
        const questionContainer = document.getElementById('question-container');
        const starsElement = document.getElementById('stars');
        const particlesElement = document.getElementById('particles');

        // Quiz state
        let currentQuestion = 0;
        let score = 0;
        let streak = 0;
        let maxQuestions = quizData.length;
        let isQuizActive = false;
        let selectedOption = null;

        // Initialize the quiz
        function initQuiz() {
            isQuizActive = true;
            score = 0;
            streak = 0;
            currentQuestion = 0;
            scoreValue.textContent = score;
            streakValue.textContent = streak;
            nextBtn.disabled = false;
            progressBar.style.width = '0%';
            generateQuestion();
            generateStars();
        }

        // Restart the quiz
        function restartQuiz() {
            isQuizActive = true;
            currentQuestion = 0;
            score = 0;
            streak = 0;
            scoreValue.textContent = score;
            streakValue.textContent = streak;
            nextBtn.disabled = false;
            progressBar.style.width = '0%';
            questionContainer.style.display = 'block';
            feedbackElement.style.display = 'none';
            generateQuestion();
            generateStars();
        }

        // Generate a new question
        function generateQuestion() {
            if (currentQuestion >= maxQuestions) {
                endQuiz();
                return;
            }

            const question = quizData[currentQuestion];
            questionElement.textContent = question.question;

            optionsElement.innerHTML = '';
            question.options.forEach((option, index) => {
                const optionElement = document.createElement('div');
                optionElement.className = `option`;
                optionElement.textContent = option;
                optionElement.dataset.index = index;

                if (selectedOption === index) {
                    optionElement.classList.add('selected');
                }

                optionElement.addEventListener('click', () => selectOption(index));
                optionsElement.appendChild(optionElement);
            });

            updateProgress();
        }

        // Select an option
        function selectOption(index) {
            // Remove previous selection
            const options = optionsElement.querySelectorAll('.option');
            options.forEach(opt => opt.classList.remove('selected'));

            // Add new selection
            const selected = options[index];
            selected.classList.add('selected');
            selectedOption = index;

            // Check if correct
            checkAnswer();
        }

        // Check if answer is correct
        function checkAnswer() {
            const question = quizData[currentQuestion];
            const isCorrect = selectedOption === question.correct;

            // Disable options after selection
            const options = optionsElement.querySelectorAll('.option');
            options.forEach(opt => opt.classList.remove('hover'));
            options.forEach((opt, index) => {
                if (index === selectedOption) {
                    if (isCorrect) {
                        opt.classList.add('correct');
                    } else {
                        opt.classList.add('incorrect');
                    }
                } else {
                    // Reveal correct answer
                    if (index === question.correct) {
                        opt.classList.add('correct');
                    } else {
                        opt.classList.add('incorrect');
                    }
                }
            });

            // Update score and streak
            if (isCorrect) {
                score++;
                streak++;
                scoreValue.textContent = score;
                streakValue.textContent = streak;
                showFeedback('Correct! 🌟', 'correct-feedback');
                triggerParticles('purple');
            } else {
                if (streak > 0) {
                    streak--;
                    streakValue.textContent = streak;
                }
                showFeedback('Incorrect! ✖️', 'incorrect-feedback');
                triggerParticles('orange');
            }

            nextBtn.disabled = false;
        }

        // Move to next question
        function nextQuestion() {
            if (currentQuestion < maxQuestions - 1) {
                currentQuestion++;
                selectedOption = null;
                generateQuestion();
                updateProgress();
            }
        }

        // End the quiz
        function endQuiz() {
            isQuizActive = false;
            questionContainer.style.display = 'none';
            feedbackElement.textContent = `Quiz completed! Your final score: ${score}/${maxQuestions}`;
            feedbackElement.className = 'feedback';
            feedbackElement.style.display = 'block';
            nextBtn.disabled = true;
        }

        // Update progress bar
        function updateProgress() {
            const progress = (currentQuestion + 1) / maxQuestions * 100;
            progressBar.style.width = `${progress}%`;
        }

        // Generate random stars for background
        function generateStars() {
            starsElement.innerHTML = '';
            const starCount = 100;

            for (let i = 0; i < starCount; i++) {
                const star = document.createElement('div');
                star.className = 'star';

                const size = Math.random() * 2 + 1;
                const x = Math.random() * 100;
                const y = Math.random() * 100;
                const delay = Math.random() * 2;

                star.style.left = `${x}%`;
                star.style.top = `${y}%`;
                star.style.width = `${size}px`;
                star.style.animation = `twinkle ${3s} infinite`;
            }
        }

        // Trigger particles
        function triggerParticles(color) {
            particlesElement.innerHTML = '';
            const particleCount = 100;

            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.className = 'particle';
                particle.style.backgroundColor = color;
                particle.style.animation = `particle 1s linear`;
                particle.style.left = `${Math.random() * 100}%`;
                particle.style.top = `${Math.random() * 100}%`;
                particle.style.width = `${Math.random() * 2 + 1}px`;
                particle.style.height = `${Math.random() * 2 + 1}px`;
                particlesElement.appendChild(particle);
            }
        }
    </script>
</body>
</html>
```

```php
<?php
/*
Plugin Name: Ailey's Dynamic Login Page Designer
Description: Transforms the default login page into an interactive, animated experience with customizable styles, particle backgrounds, and smooth animations.
Version: 1.0
Author: Ailey
License: GPL-2.0+
Text Domain: ailey-dynamic-login
*/

// Define the plugin path and directory
define('AILEY_DYNAMIC_LOGIN_DIR', plugin_dir_path(__FILE__));
define('AILEY_DYNAMIC_LOGIN_URL', plugin_dir_url(__FILE__));

// Include required files
require_once AILEY_DYNAMIC_LOGIN_DIR . 'includes/class-ailey-login-settings.php';
require_once AILEY_DYNAMIC_LOGIN_DIR . 'includes/class-ailey-login-styles.php';
require_once AILEY_DYNAMIC_LOGIN_DIR . 'includes/class-ailey-login-animations.php';

// Register activation and deactivation hooks
register_activation_hook(__FILE__, 'ailey_dynamic_login_activate');
register_deactivation_hook(__FILE__, 'ailey_dynamic_login_deactivate');

/**
 * Activation hook to set default options
 */
function ailey_dynamic_login_activate() {
    // Add default settings if they don't exist
    if (!get_option('ailey_dynamic_login_settings')) {
        $default_settings = array(
            'enable_animations' => true,
            'particle_background' => true,
            'particle_color' => '#ffffff',
            'particle_size' => 2,
            'particle_speed' => 1,
            'background_image' => '',
            'background_color' => '#1a1a2e',
            'form_background_color' => '#16213e',
            'form_border_radius' => 10,
            'form_box_shadow' => '0 4px 6px rgba(0, 0, 0, 0.1)',
            'login_title' => 'Welcome to Your Space',
            'login_subtitle' => 'Log in to continue',
            'custom_login_message' => '',
            'animate_login_title' => true,
            'animate_login_subtitle' => true,
            'login_title_animation' => 'fadeInDown',
            'login_subtitle_animation' => 'fadeInUp',
            'enable_smooth_scroll' => true,
            'smooth_scroll_duration' => 1000,
            'enable_particle_js' => true,
            'particle_js_settings' => json_encode(array(
                'particles' => array(
                    'number' => array('value' => 80, 'density' => {'enable': true, 'value_area' => 800}),
                    'color' => array('value' => '#ffffff'),
                    'shape' => array('type' => 'circle'),
                    'opacity' => array('value' => 0.5, 'random' => true, 'anim' => {'enable': false, 'speed' => 1, 'opacity' => 0, 'delay' => 0, 'sync' => false}),
                    'size' => array('value' => 2, 'random' => true, 'anim' => {'enable' => false, 'speed' => 40, 'size' => 0, 'delay' => 0, 'sync' => false}),
                    'line_linked' => array('enable' => false),
                    'line_linked_distance' => 150,
                    'move' => array('enable' => true, 'speed' => 2, 'direction' => 'none', 'random' => false, 'straight' => false, 'out_mode' => 'out', 'bounce' => false, 'attract' => array('enable' => false, 'rotateX' => 600, 'rotateY' => 1200)),
                ),
                'interactivity' => array('detect_on' => 'canvas', 'events' => array('onhover' => array('enable' => true, 'mode' => 'grab'), 'onclick' => array('enable' => true, 'mode' => 'push'), 'resize' => true), 'modes' => array('grab' => array('distance' => 140, 'line_linked' => array('opacity' => 1}), 'bubble' => array('distance' => 400, 'size' => 40, 'duration' => 2, 'opacity' => 8, 'speed' => 3), 'repulse' => array('distance' => 200, 'duration' => 0.4), 'push' => array('particles_nb' => 4), 'remove' => array('particles_nb' => 2)),
                'retina_detect' => true,
            ))
        );
        update_option('ailey_dynamic_login_settings', $default_settings);
    }
}

/**
 * Deactivation hook to clean up
 */
function ailey_dynamic_login_deactivate() {
    // Cleanup if needed
}

/**
 * Add custom styles and scripts to the login page
 */
function ailey_dynamic_login_enqueue_scripts() {
    global $pagenow;
    if ($pagenow === 'wp-login.php') {
        $settings = get_option('ailey_dynamic_login_settings');

        // Enqueue CSS
        wp_enqueue_style('ailey-dynamic-login-style', AILEY_DYNAMIC_LOGIN_URL . 'assets/css/style.css', array(), '1.0');

        // Enqueue JS
        wp_enqueue_script('ailey-dynamic-login-script', AILEY_DYNAMIC_LOGIN_URL . 'assets/js/script.js', array('jquery'), '1.0', true);

        // Enqueue particle.js if enabled
        if ($settings['enable_particle_js']) {
            wp_enqueue_script('particles-js', AILEY_DYNAMIC_LOGIN_URL . 'assets/js/particles.min.js', array(), '2.0.0', true);
            wp_enqueue_style('particles-css', AILEY_DYNAMIC_LOGIN_URL . 'assets/css/particles.css', array(), '2.0.0');
        }

        // Localize scripts with settings
        $script_args = array(
            'settings' => $settings,
            'ajax_url' => admin_url('admin-ajax.php'),
            'nonce' => wp_create_nonce('ailey_dynamic_login_nonce')
        );
        wp_localize_script('ailey-dynamic-login-script', 'aileyLoginSettings', $script_args);
    }
}
add_action('wp_enqueue_scripts', 'ailey_dynamic_login_enqueue_scripts');

/**
 * Override the default login page with our custom template
 */
function ailey_dynamic_login_template() {
    if (isset($_GET['action']) && $_GET['action'] === 'lostpassword') {
        return;
    }

    $settings = get_option('ailey_dynamic_login_settings');

    if ($settings['enable_animations'] && $settings['animate_login_title']) {
        $login_title = '<h1 class="ailey-login-title" data-animation="' . esc_attr($settings['login_title_animation']) . '">' . esc_html($settings['login_title']) . '</h1>';
    } else {
        $login_title = '<h1 class="ailey-login-title">' . esc_html($settings['login_title']) . '</h1>';
    }

    if ($settings['enable_animations'] && $settings['animate_login_subtitle']) {
        $login_subtitle = '<p class="ailey-login-subtitle" data-animation="' . esc_attr($settings['login_subtitle_animation']) . '">' . esc_html($settings['login_subtitle']) . '</p>';
    } else {
        $login_subtitle = '<p class="ailey-login-subtitle">' . esc_html($settings['login_subtitle']) . '</p>';
    }

    $custom_message = $settings['custom_login_message'] ? '<p class="ailey-custom-login-message">' . wp_kses_post($settings['custom_login_message']) . '</p>' : '';

    $output = <<<HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{$title}</title>
    <style>
        .ailey-login-container {
            position: relative;
            height: 100vh;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: {$settings['background_color']};
            color: #ffffff;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .ailey-particle-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .ailey-login-box {
            background: {$settings['form_background_color']};
            padding: 40px;
            border-radius: {$settings['form_border_radius']}px;
            box-shadow: {$settings['form_box_shadow']};
            width: 100%;
            max-width: 400px;
            transition: all 0.3s ease;
        }

        .ailey-login-title {
            text-align: center;
            margin-bottom: 15px;
            font-size: 2.2rem;
            color: #ffffff;
        }

        .ailey-login-subtitle {
            text-align: center;
            margin-bottom: 30px;
            font-size: 1.1rem;
            color: #b8b8b8;
        }

        .ailey-custom-login-message {
            text-align: center;
            margin-bottom: 30px;
            font-size: 1rem;
            color: #8a8a8a;
            line-height: 1.5;
        }

        .ailey-login-form {
            width: 100%;
        }

        .ailey-login-form label {
            display: block;
            margin-bottom: 8px;
            font-size: 0.9rem;
            color: #b8b8b8;
        }

        .ailey-login-form input[type="text"],
        .ailey-login-form input[type="password"] {
            width: 100%;
            padding: 12px;
            margin-bottom: 20px;
            border: 1px solid #333;
            border-radius: 4px;
            background: #0a0a1a;
            color: #ffffff;
            font-size: 1rem;
            transition: border-color 0.3s ease;
        }

        .ailey-login-form input[type="text"]:focus,
        .ailey-login-form input[type="password"]:focus {
            border-color: #0073aa;
            outline: none;
        }

        .ailey-login-form input[type="submit"] {
            width: 100%;
            padding: 12px;
            background: #0073aa;
            color: #ffffff;
            border: none;
            border-radius: 4px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s ease;
        }

        .ailey-login-form input[type="submit"]:hover {
            background: #005177;
        }

        .ailey-login-register-link {
            text-align: center;
            margin-top: 20px;
            font-size: 0.9rem;
            color: #b8b8b8;
        }

        .ailey-login-register-link a {
            color: #0073aa;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .ailey-login-register-link a:hover {
            color: #005177;
        }

        .ailey-login-footer {
            text-align: center;
            margin-top: 30px;
            font-size: 0.8rem;
            color: #8a8a8a;
        }
    </style>
</head>
<body class="ailey-login-container">
    <div class="ailey-login-container">
        <div class="ailey-login-content">
            {$login_title}
            {$login_subtitle}
            {$custom_message}
            <form class="ailey-login-form" method="post" action="wp-login.php">
                <p>
                    <label for="user_login">{$label_user}</label>
                    <input type="text" name="log" id="user_login" class="input" value="{$user_login}" size="20" />
                </p>
                <p>
                    <label for="user_pass">{$label_pass}</label>
                    <input class="input" type="password" name="pwd" id="user_pass" size="20" />
                </p>
                <p class="ailey-login-register-link">
                    <a href="{$wp_url}wp-login.php?action=register">{$register}</a>
                </p>
                <p class="ailey-login-footer">
                    {$remember} <label for="rememberme"><input type="checkbox" id="rememberme" name="rememberme" /> {$rememberme}</label>
                    <a href="{$wp_url}wp-login.php?action=lostpassword">{$lostpassword}</a>
                </p>
                <p class="submit">
                    <input type="submit" name="wp-submit" id="wp-submit" class="button" value="{$wp_submit}" />
                    <input type="hidden" name="testcookie" value="1" />
                </p>
            </form>
        </div>
    </div>

    <script>
        // Initialize animations
        document.addEventListener('DOMContentLoaded', function() {
            aileyInitAnimations();
        });
    </script>
</body>
</html>
HTML;

    // Output the custom template
    echo $output;
    exit;
}

/**
 * Filter the login page to use our custom template
 */
add_filter('login_header', 'ailey_dynamic_login_template');

/**
 * Custom admin menu for plugin settings
 */
function ailey_dynamic_login_admin_menu() {
    add_options_page(
        'Ailey Dynamic Login Settings',
        'Dynamic Login',
        'manage_options',
        'ailey-dynamic-login-settings',
        'ailey_dynamic_login_admin_page'
    );
}
add_action('admin_menu', 'ailey_dynamic_login_admin_menu');

/**
 * Admin settings page
 */
function ailey_dynamic_login_admin_page() {
    if (!current_user_can('manage_options')) {
        wp_die(__('You do not have sufficient permissions to access this page.'));
    }

    $settings = get_option('ailey_dynamic_login_settings');

    // Handle form submission
    if (isset($_POST['ailey_dynamic_login_save'])) {
        $new_settings = array();
        $new_settings['enable_animations'] = isset($_POST['enable_animations']) ? true : false;
        $new_settings['particle_background'] = isset($_POST['particle_background']) ? true : false;
        $new_settings['particle_color'] = isset($_POST['particle_color']) ? sanitize_hex_color($_POST['particle_color']) : '#ffffff';
        $new_settings['particle_size'] = isset($_POST['particle_size']) ? intval($_POST['particle_size']) : 2;
        $new_settings['particle_speed'] = isset($_POST['particle_speed']) ? intval($_POST['particle_speed']) : 1;
        $new_settings['background_image'] = isset($_POST['background_image']) ? esc_url_raw($_POST['background_image']) : '';
        $new_settings['background_color'] = isset($_POST['background_color']) ? sanitize_hex_color($_POST['background_color']) : '#1a1a2e';
        $new_settings['form_background_color'] = isset($_POST['form_background_color']) ? sanitize_hex_color($_POST['form_background_color']) : '#16213e';
        $new_settings['form_border_radius'] = isset($_POST['form_border_radius']) ? intval($_POST['form_border_radius']) : 10;
        $new_settings['form_box_shadow'] = isset($_POST['form_box_shadow']) ? sanitize_text_field($_POST['form_box_shadow']) : '0 4px 6px rgba(0, 0, 0, 0.1)';
        $new_settings['login_title'] = isset($_POST['login_title']) ? sanitize_text_field($_POST['login_title']) : 'Welcome to Your Space';
        $new_settings['login_subtitle'] = isset($_POST['login_subtitle']) ? sanitize_text_field($_POST['login_subtitle']) : 'Log in to continue';
        $new_settings['custom_login_message'] = isset($_POST['custom_login_message']) ? wp_kses_post($_POST['custom_login_message']) : '';
        $new_settings['animate_login_title'] = isset($_POST['animate_login_title']) ? true : false;
        $new_settings['animate_login_subtitle'] = isset($_POST['animate_login_subtitle']) ? true : false;
        $new_settings['login_title_animation'] = isset($_POST['login_title_animation']) ? sanitize_text_field($_POST['login_title_animation']) : 'fadeInDown';
        $new_settings['login_subtitle_animation'] = isset($_POST['login_subtitle_animation']) ? sanitize_text_field($_POST['login_subtitle_animation']) : 'fadeInUp';
        $new_settings['enable_smooth_scroll'] = isset($_POST['enable_smooth_scroll']) ? true : false;
        $new_settings['smooth_scroll_duration'] = isset($_POST['smooth_scroll_duration']) ? intval($_POST['smooth_scroll_duration']) : 1000;
        $new

#!/usr/bin/env python3
"""
PixelStory - Transform images into stylized narrative visuals with theme-based pixel art effects.
"""

from __future__ import annotations
from typing import Optional, Tuple, List, Literal
import sys
import os
import argparse
from pathlib import Path
from PIL import Image, ImageFilter, ImageDraw, ImageFont, ImageOps
from PIL.Image import Image as PILImage

# Constant themes with their color palettes and styling
THEMES = {
    "Mystery": {
        "palette": [(0, 0, 25), (45, 45, 60), (85, 85, 105), (120, 120, 150), (150, 150, 180)],
        "filter": ImageFilter.GaussianBlur(radius=2),
        "text_color": (220, 220, 255),
        "font_path": None,
    },
    "Cyberpunk": {
        "palette": [(0, 0, 0), (0, 20, 40), (40, 60, 120), (80, 120, 200), (120, 200, 240)],
        "filter": ImageFilter.EdgeEnhance(more=2),
        "text_color": (255, 255, 0),
        "font_path": None,
    },
    "Retro": {
        "palette": [(150, 0, 0), (0, 150, 0), (0, 0, 150), (255, 150, 0), (150, 0, 255)],
        "filter": ImageFilter.MedianFilter(size=3),
        "text_color": (255, 255, 255),
        "font_path": None,
    },
}

class PixelStoryGenerator:
    """
    Generates stylized pixel art narratives from input images.
    """

    def __init__(self, theme: str = "Mystery"):
        """
        Initialize with a theme.

        Args:
            theme: One of the predefined themes (Mystery, Cyberpunk, Retro)
        """
        if theme not in THEMES:
            raise ValueError(f"Invalid theme. Choose from: {list(THEMES.keys())}")

        self.theme = theme
        self.theme_data = THEMES[theme]
        self._load_font()
        self._setup_palette()

    def _load_font(self) -> None:
        """Load the font for the theme, or use default if not specified."""
        if self.theme_data["font_path"]:
            try:
                self.font = ImageFont.truetype(self.theme_data["font_path"], 36)
            except IOError:
                print(f"Warning: Could not load font {self.theme_data['font_path']}, using default.")
                self.font = ImageFont.load_default()
        else:
            self.font = ImageFont.load_default()

    def _setup_palette(self) -> None:
        """Create a color palette for the theme."""
        self.palette = self.theme_data["palette"]

    def _apply_pixel_art_effect(self, image: PILImage) -> PILImage:
        """
        Apply pixel art effect with color quantization to the palette.

        Args:
            image: Input PIL Image

        Returns:
            Processed PIL Image with pixel art effect
        """
        # Resize for pixel art look
        width, height = image.size
        pixel_size = max(4, min(8, width // 32, height // 32))
        new_width, new_height = width // pixel_size, height // pixel_size
        resized = image.resize((new_width, new_height), Image.NEAREST)

        # Quantize to our palette
        quantized = resized.quantize(
            palette=Image.ADAPTIVE,
            colors=len(self.palette)
        )

        # Recolor to match our theme's palette
        recolored = quantized.convert("RGB")
        for i, color in enumerate(self.palette):
            quantized.putpixel((0, 0), color)
            quantized = quantized.convert("RGB")

        # Upscale back
        final = quantized.resize(
            (width, height),
            Image.NEAREST
        )

        return final

    def _add_narrative_text(self, image: PILImage, caption: str) -> PILImage:
        """
        Add thematic narrative text to the image.

        Args:
            image: Input PIL Image
            caption: Text to add as caption

        Returns:
            Image with text overlay
        """
        draw = ImageDraw.Draw(image)
        text_width, text_height = draw.textbbox((0, 0), caption, font=self.font)[2:]
        margin = 20
        x = (image.width - text_width) // 2
        y = image.height - text_height - margin

        draw.text((x, y), caption, font=self.font, fill=self.theme_data["text_color"])
        return image

    def generate(self, input_path: str, output_path: str, caption: str = "") -> Path:
        """
        Generate the pixel story from input image.

        Args:
            input_path: Path to input image
            output_path: Path to save output image
            caption: Optional caption for the narrative

        Returns:
            Path to the generated image
        """
        try:
            with Image.open(input_path) as img:
                # Convert to RGB if needed
                if img.mode != "RGB":
                    img = img.convert("RGB")

                # Apply theme-specific filter
                filtered = img.filter(self.theme_data["filter"])

                # Apply pixel art effect
                pixel_art = self._apply_pixel_art_effect(filtered)

                # Add caption if provided
                if caption:
                    result = self._add_narrative_text(pixel_art, caption)
                else:
                    result = pixel_art

                # Save result
                output_path = Path(output_path)
                result.save(output_path)
                print(f"Pixel story generated at: {output_path}")
                return output_path

        except Exception as e:
            print(f"Error processing image: {e}")
            sys.exit(1)

def main():
    """Command-line interface for PixelStory."""
    parser = argparse.ArgumentParser(
        description="Transform images into stylized pixel narratives with thematic effects."
    )
    parser.add_argument("input", help="Path to input image")
    parser.add_argument("output", help="Path to save output image")
    parser.add_argument(
        "--theme", choices=THEMES.keys(), default="Mystery",
        help="Theme for the pixel story (default: Mystery)"
    )
    parser.add_argument(
        "--caption", type=str, default="",
        help="Optional caption to add to the image"
    )
    parser.add_argument(
        "--font", type=str, default=None,
        help="Path to custom font file (TTF) for the caption"
    )

    args = parser.parse_args()

    # Update theme data if custom font is provided
    if args.font:
        THEMES[args.theme]["font_path"] = args.font

    generator = PixelStoryGenerator(theme=args.theme)
    generator.generate(
        input_path=args.input,
        output_path=args.output,
        caption=args.caption
    )

if __name__ == "__main__":
    main()