function my_colors_palette_full_shortcode() {
  ob_start();
  ?>
  <div class="my-palette-wrapper">
    <h2>Цветовая палитра и подборщик</h2>
    <p>Кликните на цветовом круге, чтобы выбрать оттенок. Ниже — готовые палитры в сетке.</p>

    <!-- Блок выбора цвета -->
    <div class="color-picker-block">
      <div class="color-wheel-container">
        <canvas id="colorWheel" width="300" height="300"></canvas>
        <div class="selected-color-display">
          <span class="label">Выбранный цвет:</span>
          <div class="swatch" id="selectedSwatch"></div>

          <div class="color-values">
            <div class="value-row">
              <label>HEX:</label>
              <input type="text" id="hexInput" value="#FFFFFF" readonly>
            </div>
            <div class="value-row">
              <label>RGBA:</label>
              <input type="text" id="rgbaInput" value="rgba(255,255,255,1)" readonly>
            </div>
          </div>

          <div class="alpha-control">
            <label>Прозрачность (α):</label>
            <input type="range" id="alphaRange" min="0" max="1" step="0.01" value="1">
            <span id="alphaValue">1.00</span>
          </div>

          <button id="copyRgbBtn" class="copy-btn">Копировать RGBA</button>
        </div>
      </div>
    </div>

    <!-- Сетка готовых цветов -->
    <div class="colors-grid" id="colorsGrid"></div>
  </div>

  <style>
    .my-palette-wrapper {
      max-width: 1200px;
      margin: 30px auto;
      padding: 0 15px;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    }
    .color-picker-block { margin-bottom: 40px; }
    .color-wheel-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 15px;
    }
    #colorWheel {
      border-radius: 50%;
      box-shadow: 0 4px 12px rgba(0,0,0,.15);
    }
    .selected-color-display {
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 8px 12px;
      align-items: center;
      background: #fff;
      padding: 14px 16px;
      border: 1px solid #ddd;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,.08);
    }
    @media (max-width: 600px) {
      .selected-color-display { grid-template-columns: 1fr; text-align: center; }
      .swatch { margin: 0 auto; }
    }
    .swatch {
      width: 36px; height: 36px; border-radius: 6px;
      box-shadow: inset 0 2px 4px rgba(0,0,0,.2);
    }
    .value-row { display: flex; align-items: center; gap: 8px; }
    .value-row label { min-width: 42px; font-size: 13px; color: #444; }
    #hexInput, #rgbaInput {
      border: 1px solid #ccc; padding: 6px 10px; border-radius: 4px;
      font-family: monospace; font-size: 13px; width: 110px; text-align: center;
    }
    .alpha-control {
      display: flex; align-items: center; gap: 8px; margin-top: 8px;
    }
    .alpha-control label { font-size: 13px; color: #444; }
    #alphaRange { width: 100px; cursor: pointer; }
    #alphaValue { width: 40px; text-align: right; font-family: monospace; }

    .copy-btn {
      cursor: pointer; border: none; background: #333; color: #fff;
      padding: 8px 14px; border-radius: 4px; font-size: 13px;
      transition: background .2s; grid-column: 1 / -1; justify-self: start;
    }
    .copy-btn:hover { background: #000; }
    .copy-btn.copied { background: #27ae60; }

    /* Сетка */
    .colors-grid {
      display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
      gap: 14px; margin-top: 20px;
    }
    .color-card {
      border-radius: 8px; overflow: hidden; box-shadow: 0 2px 6px rgba(0,0,0,.08);
      position: relative; aspect-ratio: 1; background: #f5f5f5;
    }
    .color-preview { width: 100%; height: 100%; }
    .color-info {
      position: absolute; bottom: 0; left: 0; right: 0;
      background: rgba(255,255,255,.92); padding: 8px 10px;
      text-align: center; font-size: 13px; line-height: 1.3;
    }
    .color-name { font-weight: 600; color: #222; display: block; }
    .color-hex { font-family: monospace; font-weight: 700; color: #005fcc; }
    .color-card .copy-btn { margin-top: 6px; width: 100%; padding: 4px 10px; font-size: 11px; }
  </style>

  <script>
    (function() {
      // --- Инициализация колеса ---
      const canvas = document.getElementById('colorWheel');
      const ctx = canvas.getContext('2d');
      const radius = canvas.width / 2;

      function drawWheel() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        for (let y = 0; y < canvas.height; y++) {
          for (let x = 0; x < canvas.width; x++) {
            const dx = x - radius;
            const dy = y - radius;
            const dist = Math.sqrt(dx*dx + dy*dy);
            if (dist <= radius) {
              const angle = Math.atan2(dy, dx);
              const hue = ((angle + Math.PI) / (Math.PI * 2)) * 360;
              const saturation = (dist / radius) * 100;
              ctx.fillStyle = `hsl(${hue}, ${saturation}%, 50%)`;
              ctx.fillRect(x, y, 1, 1);
            }
          }
        }
      }
      drawWheel();

      // --- Элементы UI ---
      const swatch = document.getElementById('selectedSwatch');
      const hexInput = document.getElementById('hexInput');
      const rgbaInput = document.getElementById('rgbaInput');
      const alphaRange = document.getElementById('alphaRange');
      const alphaValue = document.getElementById('alphaValue');
      const copyRgbBtn = document.getElementById('copyRgbBtn');

      let currentRgb = { r: 255, g: 255, b: 255 };
      let currentAlpha = 1;

      function updateDisplay() {
        const hex = rgbToHex(currentRgb.r, currentRgb.g, currentRgb.b);
        hexInput.value = hex.toUpperCase();
        rgbaInput.value = `rgba(${currentRgb.r}, ${currentRgb.g}, ${currentRgb.b}, ${currentAlpha.toFixed(2)})`;
        swatch.style.backgroundColor = rgbaInput.value;
        alphaValue.textContent = currentAlpha.toFixed(2);
      }

      alphaRange.addEventListener('input', (e) => {
        currentAlpha = parseFloat(e.target.value);
        updateDisplay();
      });

      canvas.addEventListener('mousedown', handleColorSelect);
      canvas.addEventListener('mousemove', (e) => { if (e.buttons === 1) handleColorSelect(e); });
      canvas.addEventListener('touchstart', (e) => {
        const touch = e.touches[0];
        handleColorSelect({ clientX: touch.clientX, clientY: touch.clientY });
      }, { passive: false });

      function handleColorSelect(e) {
        const rect = canvas.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;
        const dx = x - radius;
        const dy = y - radius;
        const dist = Math.sqrt(dx*dx + dy*dy);

        if (dist > radius) return;

        const angle = Math.atan2(dy, dx);
        const hue = ((angle + Math.PI) / (Math.PI * 2)) * 360;
        const saturation = (dist / radius) * 100;

        const rgb = hslToRgb(hue, saturation, 50);
        currentRgb = rgb;
        updateDisplay();
      }

      copyRgbBtn.addEventListener('click', () => {
        const text = rgbaInput.value;
        copyToClipboard(text, copyRgbBtn);
      });

      // --- Сетка готовых цветов ---
      const grid = document.getElementById('colorsGrid');
      const colors = [
        { name: 'Красный', hex: '#FF4757' },
        { name: 'Оранжевый', hex: '#F9844A' },
        { name: 'Жёлтый', hex: '#F1C40F' },
        { name: 'Зелёный', hex: '#2ED573' },
        { name: 'Бирюзовый', hex: '#1E90FF' },
        { name: 'Синий', hex: '#2F3542' },
        { name: 'Фиолетовый', hex: '#A333C8' },
        { name: 'Розовый', hex: '#ED4C67' },
        { name: 'Коричневый', hex: '#835E36' },
        { name: 'Серый', hex: '#95A5A6' }
      ];

      colors.forEach(c => {
        // HEX → RGB для кнопки
        const r = parseInt(c.hex.slice(1,3), 16);
        const g = parseInt(c.hex.slice(3,5), 16);
        const b = parseInt(c.hex.slice(5,7), 16);

        const card = document.createElement('div');
        card.className = 'color-card';
        card.innerHTML = `
          <div class="color-preview" style="background-color:${c.hex}"></div>
          <div class="color-info">
            <span class="color-name">${c.name}</span>
            <span class="color-hex">${c.hex}</span>
            <button class="copy-btn" data-hex="${c.hex}" data-rgba="rgba(${r},${g},${b},1)" type="button">Копировать</button>
          </div>
        `;
        grid.appendChild(card);
      });

      document.querySelectorAll('.copy-btn[data-hex]').forEach(btn => {
        btn.addEventListener('click', function() {
          const isRgb = this.hasAttribute('data-rgba');
          const text = isRgb ? this.getAttribute('data-rgba') : this.getAttribute('data-hex');
          copyToClipboard(text, this);
        });
      });

      function copyToClipboard(text, btn) {
        navigator.clipboard.writeText(text).then(() => {
          const original = btn.innerText;
          btn.classList.add('copied');
          btn.innerText = 'Скопировано';
          setTimeout(() => {
            btn.classList.remove('copied');
            btn.innerText = original;
          }, 2000);
        }).catch(err => console.error('Copy failed', err));
      }

      function hslToRgb(h, s, l) {
        s /= 100; l /= 100;
        const c = (1 - Math.abs(2 * l - 1)) * s;
        const x = c * (1 - Math.abs((h / 60) % 2 - 1));
        const m = l - c / 2;
        let r = 0, g = 0, b = 0;
        if (h >= 0 && h < 60) { r = c; g = x; }
        else if (h < 120) { r = x; g = c; }
        else if (h < 180) { g = c; b = x; }
        else if (h < 240) { g = x; b = c; }
        else if (h < 300) { b = c; r = x; }
        else { b = x; r = c; }
        return {
          r: Math.round((r + m) * 255),
          g: Math.round((g + m) * 255),
          b: Math.round((b + m) * 255)
        };
      }

      function rgbToHex(r, g, b) {
        return '#' + [r, g, b].map(x => {
          const hex = x.toString(16);
          return hex.length === 1 ? '0' + hex : hex;
        }).join('').toUpperCase();
      }
    })();
  </script>
  <?php
  return ob_get_clean();
}
add_shortcode('my_colors_palette_full', 'my_colors_palette_full_shortcode');