Clippit guide (kinda)

Just insert this html in your site
    <!-- ClippitJS code -->
    <style>
        #skrep { /* Скрепыш */
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: url('https://lampik499site.neocities.org/Clippit.png');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: grab;
    top: 50px;
    left: 50px;
  }

  #cloud { /* Облачко */
    position: absolute;
    max-width: 300px;
    min-height: 100px;
    background: #c300ff;
    border-radius: 15px;
    padding: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.2s;
  }

  #scene { /* Область сценки */
    min-height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

#repeatText {
  color: black;
  white-space: pre-line; /* чтобы переносы работали */
}
    </style>
<!-- Скрепыш -->
<div id="skrep"></div>

<!-- Облачко -->
<div id="cloud">
  <div id="scene">
    <!-- Тут будет содержимое сценки -->
  </div>
  <div id="buttons">
    <!-- Кнопки сцен -->
  </div>
</div>
<script>
const skrep = document.getElementById('skrep');
const cloud = document.getElementById('cloud');
const sceneContainer = document.getElementById('scene');
const buttonsContainer = document.getElementById('buttons');

let isDragging = false;
let offsetX, offsetY;

// Перетаскивание Скрепыша
skrep.addEventListener('mousedown', (e) => {
  isDragging = true;
  offsetX = e.clientX - skrep.offsetLeft;
  offsetY = e.clientY - skrep.offsetTop;
});
document.addEventListener('mouseup', () => { isDragging = false; });
document.addEventListener('mousemove', (e) => {
  if (isDragging) {
    skrep.style.left = (e.clientX - offsetX) + 'px';
    skrep.style.top = (e.clientY - offsetY) + 'px';
    // Облачко двигается за Скрепышом
    cloud.style.left = skrep.style.left;
    cloud.style.top = (parseFloat(skrep.style.top) + 100) + 'px'; // чуть ниже скрепыша
  }
});

// Изначально позиция облачка
cloud.style.position = 'absolute';
cloud.style.left = skrep.style.left;
cloud.style.top = (parseFloat(skrep.style.top) + 100) + 'px';

// --- Сценки ---
let currentScene = 'menu';

function showMenu() {
  sceneContainer.innerHTML = `
    Hello! I am ClippitJS! I made by Lampik499! You can drag me or click some of those buttons:
    <br>
    <button id="btnColor">Color</button>
    <button id="btnRepeat">Repeat after me!</button>
    <button id="btnEyes">Eyes</button>
    <br>Do you need some help?
  `;
  document.getElementById('btnColor').onclick = showColorScene;
  document.getElementById('btnRepeat').onclick = showRepeatScene;
  document.getElementById('btnEyes').onclick = showEyesScene;
}

function showColorScene() {
  sceneContainer.innerHTML = `
    <div style="width: 16px; height: 16px; background-color: #000; border: 1px solid #000;"></div>
    <input type="text" id="colorInput" placeholder="#RRGGBB" />
    <button id="colorBtn">Изменить цвет</button>
    <button id="backBtn">Обратно</button>
  `;
  document.getElementById('colorBtn').onclick = () => {
    const color = document.getElementById('colorInput').value;
    const square = sceneContainer.querySelector('div');
    square.style.backgroundColor = color;
  };
  document.getElementById('backBtn').onclick = showMenu;
}

function showRepeatScene() {
  sceneContainer.innerHTML = `
    <input type="text" id="repeatInput" placeholder="Ваш текст" />
    <button id="sayBtn">Сказать</button>
    <div id="repeatContainer" style="margin-top:10px; font-weight: bold; border:1px solid #ccc; padding:5px; min-height:50px;"></div>
    <button id="backBtn">Обратно</button>
  `;

  document.getElementById('sayBtn').onclick = () => {
    const text = document.getElementById('repeatInput').value;
    // Заменить содержимое на новый текст (или добавить с переносом)
    document.getElementById('repeatContainer').innerHTML = `<div style="margin-top:3px;">${text}</div>`;
  };
  document.getElementById('backBtn').onclick = showMenu;
}

function showEyesScene() {
  sceneContainer.innerHTML = `
    <canvas id="eyesCanvas" width="300" height="150" style="border:1px solid #ccc;"></canvas>
    <button id="backBtn">Обратно</button>
  `;
  const canvas = document.getElementById('eyesCanvas');
  const ctx = canvas.getContext('2d');

  let mouseX = 150, mouseY = 75;

  document.getElementById('backBtn').onclick = showMenu;

  document.addEventListener('mousemove', (e) => {
    const rect = canvas.getBoundingClientRect();
    mouseX = e.clientX - rect.left;
    mouseY = e.clientY - rect.top;
  });

function drawEyes() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Центры глаз
  const leftEyeX = 80;
  const rightEyeX = 220;
  const eyeY = 75;
  const eyeRadius = 20;
  const pupilRadius = 7;

  // Функция для рисования глаза
  function drawEye(cx, cy, mouseX, mouseY) {
    ctx.beginPath();
    ctx.arc(cx, cy, eyeRadius, 0, Math.PI * 2);
    ctx.fillStyle = 'white';
    ctx.fill();
    ctx.strokeStyle = 'black';
    ctx.stroke();

    // Вычисляем смещение зрачка внутри глаза
    const maxOffset = eyeRadius - pupilRadius;
    const dx = mouseX - cx;
    const dy = mouseY - cy;
    const angle = Math.atan2(dy, dx);
    const distance = Math.min(maxOffset, Math.hypot(dx, dy));
    const pupilX = cx + Math.cos(angle) * distance;
    const pupilY = cy + Math.sin(angle) * distance;

    ctx.beginPath();
    ctx.arc(pupilX, pupilY, pupilRadius, 0, Math.PI * 2);
    ctx.fillStyle = 'black';
    ctx.fill();
  }

  // Рисуем глаза
  drawEye(leftEyeX, eyeY, mouseX, mouseY);
  drawEye(rightEyeX, eyeY, mouseX, mouseY);

  // Запускаем еще раз для анимации
  requestAnimationFrame(drawEyes);
}

  drawEyes();
}

// Изначально показываем меню
showMenu();

</script>