[html]<!-- ====================== Ёлка с поздравлениями ====================== -->
<div id="christmas-container">
  <div id="tree-wrapper"></div>
  <div id="gift-form">
    <input type="text" id="username" placeholder="Ваш ник">
    <textarea id="message" rows="3" placeholder="Ваше поздравление"></textarea>
    <select id="icon-select">
      <option value="https://forumstatic.ru/files/001a/fc/23/70482.png">Подарок 1</option>
      <option value="https://forumstatic.ru/files/001a/fc/23/70483.png">Подарок 2</option>
      <option value="https://forumstatic.ru/files/001a/fc/23/70484.png">Подарок 3</option>
    </select>
    <button id="send-gift" title="Отправить подарок"></button>
  </div>
</div>

<!-- ====================== Стили ====================== -->
<style>
#christmas-container {
  display: flex;
  justify-content: flex-start; /* Ёлка слева, форма справа */
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap; /* На маленьких экранах форма под ёлкой */
  margin-top: 20px;
  position: relative;
  z-index: 1;
}

#tree-wrapper {
  position: relative;
  width: 600px;
  height: 800px;
  background: url("https://forumstatic.ru/files/0013/65/ed/19383.jpg") no-repeat center top;
  background-size: contain;
  z-index: 1; /* Ёлка на нижнем уровне */
}

#gift-form {
  width: 300px;
  background: rgba(255,255,255,0.95);
  padding: 10px 15px;
  border-radius: 10px;
  box-shadow: 0 0 6px rgba(0,0,0,0.2);
  display: flex;
  flex-direction: column;
  gap: 5px;
  z-index: 2; /* Форма выше ёлки */
}

#gift-form input, #gift-form textarea, #gift-form select {
  width: 100%;
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #aaa;
  font-size: 13px;
}

#gift-form button {
  width: 40px;
  height: 40px;
  margin-top: 5px;
  border: none;
  cursor: pointer;
  background: url(https://forumstatic.ru/files/001a/fc/23/70482.png) no-repeat center;
  background-size: 28px;
}

.gift {
  position: absolute;
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: transform 0.2s;
  z-index: 50;
}

.gift:hover { transform: scale(1.3); z-index: 150; }

.gift-note {
  display: none;
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255,255,255,0.95);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.gift:hover .gift-note { display: block; }
</style>

<!-- ====================== Скрипты RusFF ====================== -->
<script>
var temaID = 1514; // <-- сюда вставьте ID вашей темы
</script>
<script type="text/javascript" src="https://forumstatic.ru/files/0014/cc/0a/58042.js"></script>
<script type="text/javascript" src="https://forumstatic.ru/files/0014/cc/0a/54653.js"></script>
<script type="text/javascript" src="https://forumstatic.ru/files/0013/65/ed/76531.js"></script>

<!-- ====================== JS логика подарков ====================== -->
<script>
const tree = document.getElementById('tree-wrapper');
const sendButton = document.getElementById('send-gift');

// Загрузка подарков из темы
async function loadGifts() {
  if (typeof Christmas_Tree.getGifts !== 'function') return;
  const gifts = await Christmas_Tree.getGifts();
  tree.innerHTML = '';
  gifts.forEach(g => {
    const el = document.createElement('div');
    el.className = 'gift';
    el.style.left = g.x + 'px';
    el.style.top = g.y + 'px';
    el.innerHTML = `
      <img src="${g.icon}" width="32" height="32">
      <div class="gift-note">🎁 ${g.user}: ${g.msg}</div>
    `;
    tree.appendChild(el);
  });
}

// Рандомная позиция подарка
function getRandomPosition() {
  return {
    x: Math.random() * (tree.clientWidth - 32),
    y: Math.random() * (tree.clientHeight - 32)
  };
}

// Отправка подарка
sendButton.addEventListener('click', async () => {
  const name = document.getElementById('username').value.trim();
  const msg = document.getElementById('message').value.trim();
  const icon = document.getElementById('icon-select').value;

  if (!name || !msg) return alert('Введите ник и поздравление!');

  const pos = getRandomPosition();

  if (typeof Christmas_Tree.sendGift === 'function') {
    await Christmas_Tree.sendGift(name, msg, icon, pos.x, pos.y);
    document.getElementById('message').value = '';
    loadGifts();
  } else {
    alert('Скрипт ёлки не подключен!');
  }
});

// Первичная загрузка при открытии темы
loadGifts();
</script>[/html]

[html]<style>
    /* Стили для оформления */
    .christmas-container {
        display: flex;
        gap: 20px;
        max-width: 800px;
        margin: 0 auto;
        border: 1px solid #ccc;
        padding: 20px;
        background-color: #f9f9f9;
        font-family: Arial, sans-serif;
    }
    .tree-area {
        flex: 1;
        position: relative;
        text-align: center;
    }
    .form-area {
        flex: 1;
        padding: 10px;
        background-color: #e8f5e9;
        border-radius: 8px;
    }
    #christmasTree {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
    .gift-icon {
        position: absolute;
        width: 30px; /* Размер иконки подарка */
        height: 30px;
        background-size: contain;
        background-repeat: no-repeat;
        cursor: pointer;
        /* Условные позиции, будут изменены JS */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: opacity 0.3s;
    }
    /* Стили для иконок подарков (вам нужно будет загрузить эти изображения) */
    .gift1 { background-image: url('URL_ИКОНКИ_ПОДАРКА_1.png'); }
    .gift2 { background-image: url('URL_ИКОНКИ_ПОДАРКА_2.png'); }
    .gift3 { background-image: url('URL_ИКОНКИ_ПОДАРКА_3.png'); }
    .gift-icon:hover { opacity: 0.7; }
    .message-tooltip {
        position: absolute;
        background: #333;
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        z-index: 10;
        white-space: nowrap;
        pointer-events: none; /* Чтобы не мешать клику */
        opacity: 0;
        transition: opacity 0.2s;
        transform: translate(15px, -100%);
    }
    .gift-icon:hover .message-tooltip {
        opacity: 1;
    }
</style>

<div class="christmas-container">
    <div class="tree-area">
        <h2>🎄 Наше Рождественское Дерево</h2>
        <img id="christmasTree" src="URL_ВАШЕГО_ИЗОБРАЖЕНИЯ_ЕЛКИ.png" alt="Елка">
        <div id="giftsContainer">
            </div>
    </div>

    <div class="form-area">
        <h2>💌 Отправить Поздравление</h2>
        <form id="giftForm">
            <p>
                <label for="userName">Ваше имя:</label>
                <input type="text" id="userName" required style="width: 90%;">
            </p>
            <p>
                <label for="userMessage">Поздравление:</label>
                <textarea id="userMessage" required maxlength="150" style="width: 90%; height: 60px;"></textarea>
            </p>
            <p>
                <strong>Выберите Подарок:</strong><br>
                <label><input type="radio" name="giftType" value="gift1" required> </label><br>
                <label><input type="radio" name="giftType" value="gift2"> </label><br>
                <label><input type="radio" name="giftType" value="gift3"> </label>
            </p>
            <button type="submit">Повесить Подарок!</button>
            <p id="formStatus" style="color: red; font-weight: bold;"></p>
        </form>
    </div>
</div>

<script>
    // ⚠️ ВАЖНО: Замените это на фактический путь к вашему JSON-файлу
    const JSON_URL = 'https://github.com/desp180/gifts.json.git';

    // Координаты для размещения подарков на елке (нормализованные 0-100)
    // Добавьте больше, чтобы подарки не перекрывались
    const GIFT_POSITIONS = [
        { top: 15, left: 50 },
        { top: 30, left: 35 },
        { top: 30, left: 65 },
        { top: 45, left: 25 },
        { top: 45, left: 75 },
        { top: 60, left: 50 },
        { top: 75, left: 30 },
        { top: 75, left: 70 }
        // Добавьте еще
    ];

    /**
     * Отображает подарки из данных JSON на елке
     * @param {Array} gifts - Массив объектов подарков
     */
    function renderGifts(gifts) {
        const container = document.getElementById('giftsContainer');
        container.innerHTML = ''; // Очистка предыдущих подарков

        gifts.forEach((giftData, index) => {
            if (index >= GIFT_POSITIONS.length) return; // Не размещать больше, чем есть позиций

            const pos = GIFT_POSITIONS[index];
           
            const giftDiv = document.createElement('div');
            giftDiv.className = `gift-icon ${giftData.gift}`;
            giftDiv.style.top = `${pos.top}%`;
            giftDiv.style.left = `${pos.left}%`;
           
            // Всплывающая подсказка с сообщением
            const tooltip = document.createElement('div');
            tooltip.className = 'message-tooltip';
            tooltip.innerHTML = `<strong>${giftData.user}</strong>: ${giftData.message}`;
           
            giftDiv.appendChild(tooltip);

            // Обработчик для отображения подсказки
            giftDiv.onmouseover = () => tooltip.style.opacity = 1;
            giftDiv.onmouseout = () => tooltip.style.opacity = 0;
           
            container.appendChild(giftDiv);
        });
    }

    /**
     * Загружает и отображает данные из JSON
     */
    function fetchAndRenderGifts() {
        fetch(JSON_URL + '?' + new Date().getTime()) // Добавляем timestamp для обхода кэша
            .then(response => {
                if (!response.ok) throw new Error('Ошибка сети или JSON-файл не найден');
                return response.json();
            })
            .then(data => {
                renderGifts(data);
                document.getElementById('formStatus').textContent = 'Подарки успешно загружены.';
            })
            .catch(error => {
                console.error('Ошибка загрузки JSON:', error);
                document.getElementById('formStatus').textContent = 'Не удалось загрузить подарки. Проверьте путь к JSON.';
            });
    }

    // Обработчик отправки формы (СИМУЛЯЦИЯ)
    document.getElementById('giftForm').addEventListener('submit', function(e) {
        e.preventDefault();
       
        const userName = document.getElementById('userName').value.trim();
        const userMessage = document.getElementById('userMessage').value.trim();
        const giftType = document.querySelector('input[name="giftType"]:checked').value;
        const statusElement = document.getElementById('formStatus');

        if (userName === "" || userMessage === "" || !giftType) {
            statusElement.textContent = 'Заполните все поля!';
            return;
        }

        // --- ⚠️ СИМУЛЯЦИЯ ОТПРАВКИ ---
        // В РЕАЛЬНОСТИ ЗДЕСЬ НУЖЕН AJAX-ЗАПРОС К ВАШЕМУ СЕРВЕРНОМУ СКРИПТУ
        // (например, PHP), который обновит файл gifts.json.
        // Браузерный JavaScript НЕ МОЖЕТ напрямую редактировать файлы на сервере.
       
        statusElement.textContent = 'Отправка... (В реальном приложении здесь нужен серверный скрипт для сохранения данных)';
       
        const newGift = {
            user: userName,
            gift: giftType,
            message: userMessage
        };

        // В рамках симуляции: просто отображаем, что "подарок отправлен"
        setTimeout(() => {
            statusElement.textContent = 'Поздравление "отправлено" и будет видно после обновления JSON-файла.';
            // Очистка формы
            document.getElementById('giftForm').reset();
           
            // Для отображения изменений на клиенте без перезагрузки:
            // Попробуем снова загрузить (для этого вам нужно вручную обновить gifts.json)
            fetchAndRenderGifts();
        }, 1500);

    });

    // Первоначальная загрузка подарков при загрузке страницы
    fetchAndRenderGifts();
   
    // Регулярное обновление (чтобы видеть подарки других игроков)
    // Установите интервал, например, раз в 30 секунд
    setInterval(fetchAndRenderGifts, 30000);
</script>[/html]

[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Ёлка с пожеланиями</title>
<style>
body {
  background: #0b1d2a;
  color: white;
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
#tree {
  position: relative;
}
#tree img {
  width: 400px;
}
.gift {
  position: absolute;
  width: 40px;
  transition: transform 0.3s ease;
}
.gift:hover {
  transform: scale(1.2);
}
form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gifts {
  display: flex;
  gap: 10px;
}
.gifts img {
  width: 40px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 6px;
}
.gifts img.selected {
  border-color: gold;
}
</style>
</head>
<body>

<div id="tree">
  <img src="https://i.imgur.com/kX8iD8F.png" alt="Ёлка">
</div>

<form id="giftForm">
  <input type="text" id="name" placeholder="Ваше имя" required>
  <textarea id="message" placeholder="Ваше поздравление" required></textarea>

  <div class="gifts">
    <img src="https://i.imgur.com/Uq2ZbK3.png" data-gift="gift1">
    <img src="https://i.imgur.com/6z5HZSp.png" data-gift="gift2">
    <img src="https://i.imgur.com/gx7Z9Qq.png" data-gift="gift3">
  </div>

  <button type="submit">Отправить подарок</button>
</form>

<script>
const gifts = document.querySelectorAll('.gifts img');
let selectedGift = null;
gifts.forEach(g => g.addEventListener('click', () => {
  gifts.forEach(img => img.classList.remove('selected'));
  g.classList.add('selected');
  selectedGift = g.dataset.gift;
}));

const tree = document.getElementById('tree');
const form = document.getElementById('giftForm');
const apiUrl = 'save_gifts.php';

form.addEventListener('submit', async (e) => {
  e.preventDefault();
  const name = document.getElementById('name').value.trim();
  const message = document.getElementById('message').value.trim();
  if (!selectedGift) return alert('Выберите подарок!');
 
  const response = await fetch(apiUrl, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ name, message, gift: selectedGift })
  });

  const data = await response.json();
  if (data.status === 'ok') {
    alert('Подарок добавлен!');
    renderGifts();
    form.reset();
    gifts.forEach(g => g.classList.remove('selected'));
    selectedGift = null;
  } else {
    alert('Ошибка при добавлении подарка');
  }
});

async function renderGifts() {
  const res = await fetch(apiUrl);
  const all = await res.json();
  tree.querySelectorAll('.gift').forEach(el => el.remove());
  all.forEach((item, i) => {
    const img = document.createElement('img');
    img.src = document.querySelector(`[data-gift="${item.gift}"]`).src;
    img.className = 'gift';
    img.style.left = (50 + Math.random() * 300) + 'px';
    img.style.top = (100 + Math.random() * 300) + 'px';
    img.title = `${item.name}: ${item.message}`;
    tree.appendChild(img);
  });
}

renderGifts();
</script>

</body>
</html>[/html]

[html]
<div style="display:flex; gap:20px;">
  <div id="tree" style="position:relative; width:400px; height:600px;">
    <img class="tree-img" src="https://i.imgur.com/kX8iD8F.png" style="width:100%;" alt="Ёлка">
  </div>

  <form id="giftForm" style="display:flex; flex-direction:column; gap:10px; width:300px;">
    <input id="name" type="text" placeholder="Ваше имя" required>
    <textarea id="message" rows="4" placeholder="Поздравление" required></textarea>

    <div class="gifts" style="display:flex; gap:10px;">
      <img src="https://i.imgur.com/Uq2ZbK3.png" data-gift="gift1" style="width:44px;cursor:pointer;border:2px solid transparent;border-radius:6px;">
      <img src="https://i.imgur.com/6z5HZSp.png" data-gift="gift2" style="width:44px;cursor:pointer;border:2px solid transparent;border-radius:6px;">
      <img src="https://i.imgur.com/gx7Z9Qq.png" data-gift="gift3" style="width:44px;cursor:pointer;border:2px solid transparent;border-radius:6px;">
    </div>

    <button type="submit" style="padding:10px;border:none;border-radius:6px;background:gold;cursor:pointer;font-weight:bold;">Отправить подарок</button>
  </form>
</div>

<script>
const giftsEls = document.querySelectorAll('.gifts img');
let selectedGift = null;
giftsEls.forEach(el => el.addEventListener('click', () => {
  giftsEls.forEach(i => i.style.borderColor = 'transparent');
  el.style.borderColor = 'gold';
  selectedGift = el.dataset.gift;
}));

const tree = document.getElementById('tree');
const form = document.getElementById('giftForm');
const apiUrl = "proxy.php"; // теперь через proxy

form.addEventListener('submit', async e => {
  e.preventDefault();
  const name = document.getElementById('name').value.trim();
  const message = document.getElementById('message').value.trim();
  if (!selectedGift) return alert('Выберите подарок!');

  const response = await fetch(apiUrl, {
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({name,message,gift:selectedGift})
  });
  const data = await response.json();
  if(data.status==='ok'){
    form.reset();
    giftsEls.forEach(i=>i.style.borderColor='transparent');
    selectedGift = null;
    renderGifts(await fetchGifts());
  } else {
    alert('Ошибка при добавлении подарка');
  }
});

async function fetchGifts(){
  const res = await fetch(apiUrl);
  const json = await res.json();
  return json.record || [];
}

function renderGifts(list){
  tree.querySelectorAll('.gift').forEach(el=>el.remove());
  list.forEach(item=>{
    if(item.system) return; // игнорируем заглушку
    const src = document.querySelector(`[data-gift="${item.gift}"]`)?.src || '';
    if(!src) return;
    const img = document.createElement('img');
    img.src = src;
    img.className = 'gift';
    img.style.position='absolute';
    img.style.left=(item.x||30)+'px';
    img.style.top=(item.y||80)+'px';
    img.title = `${item.name}: ${item.message}`;
    img.style.width='44px';
    tree.appendChild(img);
  });
}

// начальная загрузка и автообновление каждые 6 секунд
(async function init(){
  renderGifts(await fetchGifts());
  setInterval(async()=>renderGifts(await fetchGifts()),6000);
})();
</script>
[/html]