[html]<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>🎁 Гора подарков — ФРГП</title>
<style>
/* ===== Ваши стили (оставьте как есть) ===== */
.container {
max-width: 1300px;
margin: 0 auto;
background: rgba(255,248,225,0.95);
border-radius: 48px;
padding: 20px 30px 40px;
box-shadow: 0 20px 40px rgba(0,0,0,0.3);
}
h1 {
text-align: center;
font-size: 2.5rem;
color: #c53a1f;
text-shadow: 2px 2px 0 #ffd966;
margin: 0 0 10px;
}
.subtitle {
text-align: center;
color: #2d4a22;
font-weight: bold;
margin-bottom: 30px;
}
.form-card {
background: #fffaf0;
border-radius: 32px;
padding: 20px 25px;
margin-bottom: 40px;
box-shadow: 0 8px 18px rgba(0,0,0,0.1);
border: 1px solid #ffcd94;
}
.form-card h2 {
margin-top: 0;
color: #b34e1a;
}
.form-card input, .form-card textarea {
width: 100%;
padding: 12px 15px;
margin: 8px 0;
border: 1px solid #ffc285;
border-radius: 60px;
font-size: 1rem;
background: white;
}
.form-card textarea {
border-radius: 24px;
resize: vertical;
}
.form-card button {
background: #e67e22;
color: white;
border: none;
padding: 12px 24px;
font-size: 1.2rem;
border-radius: 60px;
cursor: pointer;
transition: 0.2s;
margin-top: 10px;
width: 100%;
font-weight: bold;
}
.form-card button:hover { background: #d35400; transform: scale(0.98); }
.gift-mountain {
position: relative;
background: #f5e5c8;
min-height: 550px;
border-radius: 80px 80px 60px 60px;
margin-top: 20px;
box-shadow: inset 0 0 0 3px #ffe2b5, 0 12px 20px rgba(0,0,0,0.2);
overflow: hidden;
border: 1px solid #ccaa7b;
}
.gift-box {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
cursor: pointer;
transition: all 0.2s ease;
filter: drop-shadow(4px 6px 8px rgba(0,0,0,0.2));
border-radius: 20px;
}
.gift-box:hover {
transform: scale(1.1) rotate(0deg) !important;
z-index: 100;
filter: drop-shadow(0 0 8px gold);
}
.empty-mountain { text-align: center; padding: 120px 20px; font-size: 1.4rem; color: #ad8b62; }
.admin-link { text-align: center; margin-top: 30px; }
.admin-link a { color: #4a2a10; background: #ffefcf; padding: 8px 20px; border-radius: 40px; text-decoration: none; font-size: 0.9rem; }
@media (max-width: 700px) {
.container { padding: 15px; }
.gift-mountain { min-height: 400px; }
.gift-box { font-size: 1.8rem; width: 60px; height: 60px; }
}
</style>
</head>
<body>
<div class="container">
<h1>🎄 Гора подарков 🎁</h1>
<p class="subtitle">Каждый день дари подарок сообществу – добавляй ссылки на свои посты!</p>
<div class="form-card">
<h2>Добавить подарок</h2>
<form id="giftForm">
<input type="text" name="nickname" placeholder="Твой никнейм" required>
<textarea name="wish" rows="2" placeholder="Текст пожелания (что написано на открытке?)" required></textarea>
<input type="url" name="post_link" id="post_link" placeholder="Ссылка на пост">
<button type="submit">🎁 Положить подарок</button>
</form>
<div id="formMessage"></div>
</div>
<div class="gift-mountain" id="giftMountain">
<div class="empty-mountain">Загрузка горы подарков... 🎄</div>
</div>
<div class="admin-link"><a href="#" id="adminLink">📊 Админ-панель (для организаторов)</a></div>
</div>
<script>
// ⚠️ СЮДА ВСТАВЬТЕ URL ВАШЕГО GOOGLE APPS SCRIPT! ⚠️
const SCRIPT_URL = 'https://script.google.com/macros/s/AKfycbzVw2vDOSCB2UclEjzBlcBsHiMms6P_ExVMsfY1aS4TA6y4_bjzRpf1esPbounvHBJFnA/exec';
// --- Массив ссылок на ваши картинки подарков ---
const giftImages = [
'https://i.pinimg.com/1200x/df/12/42/df12423f952b5c0d2ae2d3308feb20c7.jpg', // Замените на реальные ссылки
'https://i.pinimg.com/736x/34/9c/e0/349ce0bbfeba6038dd1820788d759171.jpg',
'https://i.pinimg.com/736x/1d/06/47/1d0647dfee7834c4770268d03af24fc5.jpg'
// Добавьте сколько угодно
];
// --- Функция для загрузки подарков (без изменений) ---
async function loadGifts() {
try {
const response = await fetch(`${SCRIPT_URL}?action=get`);
const gifts = await response.json();
const mountain = document.getElementById('giftMountain');
if (!gifts.length) {
mountain.innerHTML = '<div class="empty-mountain">Гора пока пуста... Добавьте первый подарок!</div>';
return;
}
mountain.innerHTML = '';
gifts.forEach(gift => {
const giftBox = document.createElement('div');
giftBox.className = 'gift-box';
const rotate = Math.floor(Math.random() * 30) - 15;
const top = Math.floor(Math.random() * 70) + 15;
const left = 20 + Math.random() * 60;
const size = Math.floor(Math.random() * 70) + 60;
const randomImg = giftImages[Math.floor(Math.random() * giftImages.length)];
giftBox.style.cssText = `
top: ${top}%;
left: ${left}%;
width: ${size}px;
height: ${size}px;
transform: rotate(${rotate}deg);
`;
giftBox.innerHTML = `<img src="${randomImg}" style="width:100%; height:100%; object-fit:contain;" alt="подарок">`;
giftBox.title = `🎁 ${gift.Nickname}\n📝 ${gift.Wish}\n🔗 Пост: ${gift.PostLink || 'без ссылки'}`;
mountain.appendChild(giftBox);
});
} catch (error) {
console.error('Ошибка загрузки подарков:', error);
}
}
// --- НОВАЯ ФУНКЦИЯ: Отправка сообщения в тему форума ---
async function postToForum(giftData) {
// Формируем текст сообщения для форума
const forumMessage = `🎁 **Новый подарок от ${giftData.nickname}**\n📝 **Пожелание:** ${giftData.wish}\n🔗 **Ссылка на пост:** ${giftData.post_link || 'не указана'}`;
// Ищем форму быстрого ответа на странице форума
// Проверяем несколько возможных вариантов ID формы
let replyForm = document.getElementById('quick_reply_form');
if (!replyForm) replyForm = document.getElementById('quick_reply');
if (!replyForm) {
console.error('Форма ответа не найдена на этой странице.');
return { success: false, error: 'Форма ответа не найдена' };
}
// Находим поле для ввода сообщения
const messageField = replyForm.querySelector('textarea[name="message"]');
if (!messageField) {
console.error('Поле для ввода сообщения не найдено.');
return { success: false, error: 'Поле для ввода сообщения не найдено' };
}
// Сохраняем исходные значения полей, чтобы потом восстановить (опционально)
const originalMessage = messageField.value;
// Заполняем поле сообщения
messageField.value = forumMessage;
// Собираем данные формы для отправки через AJAX
const formData = new FormData(replyForm);
// Отправляем AJAX-запрос
try {
const response = await fetch(replyForm.action || window.location.href, {
method: 'POST',
body: formData,
// Важно: не устанавливаем 'Content-Type', браузер сам установит его с правильной границей для FormData
});
if (response.ok) {
// Очищаем поле сообщения после успешной отправки (или оставляем как есть)
messageField.value = originalMessage;
return { success: true };
} else {
return { success: false, error: `Ошибка HTTP: ${response.status}` };
}
} catch (error) {
console.error('Ошибка при отправке сообщения в форум:', error);
return { success: false, error: error.message };
}
}
// --- Отправка нового подарка (модифицированная) ---
document.getElementById('giftForm').addEventListener('submit', async (e) => {
e.preventDefault();
const form = e.target;
const formData = {
nickname: form.nickname.value.trim(),
wish: form.wish.value.trim(),
post_link: form.post_link.value.trim()
};
const messageDiv = document.getElementById('formMessage');
if (!formData.nickname || !formData.wish) {
messageDiv.innerHTML = '<p style="color: red;">Ник и пожелание обязательны!</p>';
return;
}
messageDiv.innerHTML = '<p style="color: green;">Отправляем подарок...</p>';
// 1. Сначала отправляем данные в Google Sheets
try {
await fetch(SCRIPT_URL, {
method: 'POST',
mode: 'no-cors', // Обход CORS для простоты
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(formData)
});
// 2. Затем пытаемся отправить сообщение в форум
const forumResult = await postToForum(formData);
if (forumResult.success) {
messageDiv.innerHTML = '<p style="color: green;">🎉 Подарок успешно добавлен и сообщение опубликовано в теме! Страница обновится...</p>';
} else {
messageDiv.innerHTML = `<p style="color: orange;">⚠️ Подарок добавлен, но не удалось опубликовать сообщение в теме: ${forumResult.error}</p>`;
}
form.reset();
setTimeout(() => location.reload(), 2000);
} catch (error) {
console.error('Ошибка:', error);
messageDiv.innerHTML = '<p style="color: red;">Ошибка отправки. Попробуйте позже.</p>';
}
});
// Админ-панель (простая ссылка на таблицу)
document.getElementById('adminLink').addEventListener('click', (e) => {
e.preventDefault();
const tableId = SCRIPT_URL.match(/\/d\/([a-zA-Z0-9_-]+)/);
if (tableId) window.open(`https://docs.google.com/spreadsheets/d/${tableId[1]}/edit`, '_blank');
else alert('Ссылка на таблицу администратора не найдена.');
});
loadGifts();
</script>
</body>
</html>[/html]
