test: pages marker

Trigger Pages rebuild
Sync gitea-pages index.html with Telegram RSVP
2026-05-19 14:40:10 +05:00 · 2026-05-19 14:36:49 +05:00 · 2026-05-19 14:33:07 +05:00
2 changed files with 276 additions and 88 deletions
--- a/index.html
+++ b/index.html
@ -1,22 +1,55 @@
+<!-- 
+=============================================================================
+КОД ДЛЯ GOOGLE APPS SCRIPT (ВСТАВИТЬ В РАСШИРЕНИЯ -> APPS SCRIPT ТАБЛИЦЫ):
+=============================================================================
+
+function doPost(e) {
+  var lock = LockService.getScriptLock();
+  lock.tryLock(10000);
+  try {
+    var doc = SpreadsheetApp.getActiveSpreadsheet();
+    var sheet = doc.getSheets()[0];
+    var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
+    var nextRow = sheet.getLastRow() + 1;
+    var row = [];
+    for (var i = 0; i < headers.length; i++) {
+      if (headers[i] == 'Timestamp') { row.push(new Date()); } 
+      else { row.push(e.parameter[headers[i]] || ''); }
+    }
+    sheet.getRange(nextRow, 1, 1, row.length).setValues([row]);
+    return ContentService.createTextOutput(JSON.stringify({ 'result': 'success' })).setMimeType(ContentService.MimeType.JSON);
+  } catch (e) {
+    return ContentService.createTextOutput(JSON.stringify({ 'result': 'error', 'error': e })).setMimeType(ContentService.MimeType.JSON);
+  } finally {
+    lock.releaseLock();
+  }
+}
+
+=============================================================================
+КОНЕЦ КОДА ДЛЯ СКИПТА. ДАЛЕЕ ИДЕТ HTML/CSS/JS ДЛЯ ОБНОВЛЕННОГО ЛЕНДИНГА:
+=============================================================================
+-->
+
 <!DOCTYPE html>
 <html lang="ru">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Приглашение на День Рождения! 🎉</title>
+    <title>Приглашение на ДР! 🎉</title>
    <style>
        :root {
-            --bg-color: #0f172a;
-            --card-bg: #1e293b;
-            --accent: #ec4899;
-            --accent-hover: #db2777;
-            --text-main: #f8fafc;
-            --text-muted: #94a3b8;
+            --bg-color: #090514;
+            --card-bg: rgba(30, 27, 46, 0.7);
+            --accent-pink: #ff2a74;
+            --accent-purple: #8a2be2;
+            --text-main: #f3f1f7;
+            --text-muted: #a19da9;
+            --neon-shadow: 0 0 15px rgba(255, 42, 116, 0.4);
        }

        body {
            font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-            background-color: var(--bg-color);
+            background: radial-gradient(circle at center, #1a0f30 0%, var(--bg-color) 100%);
            color: var(--text-main);
            margin: 0;
            padding: 0;
@ -27,129 +60,237 @@
        }

        .container {
-            max-width: 500px;
+            max-width: 480px;
            width: 90%;
-            margin: 20px auto;
+            margin: 30px auto;
            background: var(--card-bg);
-            padding: 30px;
-            border-radius: 20px;
-            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            padding: 35px 25px;
+            border-radius: 24px;
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.1);
            text-align: center;
            box-sizing: border-box;
        }

+        /* Главная гифка котика */
+        .cat-gif {
+            width: 130px;
+            height: 130px;
+            border-radius: 50%;
+            object-fit: cover;
+            margin-bottom: 15px;
+            border: 3px solid var(--accent-pink);
+            box-shadow: var(--neon-shadow);
+        }
+
        h1 {
-            font-size: 2.5rem;
-            margin-bottom: 10px;
-            background: linear-gradient(45deg, #f43f5e, #ec4899, #8b5cf6);
+            font-size: 2.3rem;
+            margin: 10px 0;
+            font-weight: 800;
+            background: linear-gradient(45deg, #ff2a74, #ff7a00, #a855f7);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
+            text-shadow: 0 0 30px rgba(255, 42, 116, 0.2);
        }

        .date-place {
            font-size: 1.1rem;
-            color: var(--text-muted);
-            margin-bottom: 30px;
+            color: #c4b5fd;
+            font-weight: 500;
+            margin-bottom: 25px;
+            letter-spacing: 0.5px;
        }

        /* Таймер */
        .countdown {
            display: flex;
            justify-content: center;
-            gap: 15px;
-            margin-bottom: 35px;
+            gap: 12px;
+            margin-bottom: 30px;
        }

        .countdown-item {
-            background: rgba(255, 255, 255, 0.05);
-            padding: 10px 15px;
-            border-radius: 10px;
-            min-width: 60px;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.05);
+            padding: 12px;
+            border-radius: 14px;
+            min-width: 65px;
        }

        .countdown-time {
-            font-size: 1.8rem;
-            font-weight: bold;
-            color: var(--accent);
+            font-size: 1.6rem;
+            font-weight: 700;
+            color: #00f5ff;
+            text-shadow: 0 0 10px rgba(0, 245, 255, 0.3);
        }

        .countdown-label {
-            font-size: 0.8rem;
+            font-size: 0.75rem;
            color: var(--text-muted);
+            margin-top: 2px;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
        }

        /* Форма */
        form {
            display: flex;
            flex-direction: column;
-            gap: 15px;
+            gap: 20px;
            text-align: left;
        }

+        .form-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+
        label {
+            font-size: 0.95rem;
            font-weight: 600;
-            margin-bottom: -5px;
+            color: #e2e0e6;
+            padding-left: 4px;
        }

        input[type="text"] {
-            padding: 12px;
-            border-radius: 8px;
-            border: 1px solid #334155;
-            background: #0f172a;
+            padding: 14px 16px;
+            border-radius: 12px;
+            border: 1px solid rgba(255, 255, 255, 0.12);
+            background: rgba(15, 12, 28, 0.6);
            color: #fff;
            font-size: 1rem;
            width: 100%;
            box-sizing: border-box;
+            transition: all 0.3s;
        }

        input[type="text"]:focus {
-            outline: 2px solid var(--accent);
+            outline: none;
+            border-color: var(--accent-pink);
+            box-shadow: 0 0 0 3px rgba(255, 42, 116, 0.2);
        }

-        .radio-group {
-            display: flex;
-            gap: 20px;
-            margin: 5px 0;
+        /* Кастомные кнопки вместо радио-инпутов */
+        .attendance-options {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
        }

-        .radio-label {
-            display: flex;
-            align-items: center;
-            gap: 8px;
+        .status-btn {
+            position: relative;
+            background: rgba(255, 255, 255, 0.03);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            padding: 16px 10px;
+            border-radius: 14px;
+            text-align: center;
            cursor: pointer;
+            font-weight: 600;
+            font-size: 0.95rem;
+            transition: all 0.25s ease;
+            user-select: none;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            gap: 6px;
        }

-        button {
-            background: var(--accent);
+        .status-btn input[type="radio"] {
+            position: absolute;
+            opacity: 0;
+            width: 0;
+            height: 0;
+        }
+
+        .status-btn:hover {
+            background: rgba(255, 255, 255, 0.06);
+            border-color: rgba(255, 255, 255, 0.2);
+        }
+
+        /* Состояния выбора кнопок */
+        .status-btn.checked-yes {
+            background: linear-gradient(135deg, rgba(255, 42, 116, 0.15), rgba(138, 43, 226, 0.15));
+            border-color: var(--accent-pink);
+            box-shadow: var(--neon-shadow);
+            color: #fff;
+        }
+
+        .status-btn.checked-no {
+            background: rgba(255, 255, 255, 0.05);
+            border-color: var(--text-muted);
+            color: var(--text-muted);
+        }
+
+        /* Главная кнопка отправить */
+        .submit-btn {
+            background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple));
            color: white;
            border: none;
-            padding: 14px;
-            border-radius: 8px;
-            font-size: 1rem;
-            font-weight: bold;
+            padding: 16px;
+            border-radius: 14px;
+            font-size: 1.05rem;
+            font-weight: 700;
            cursor: pointer;
-            transition: background 0.2s;
+            box-shadow: 0 4px 15px rgba(255, 42, 116, 0.3);
+            transition: all 0.3s;
            margin-top: 10px;
+            letter-spacing: 0.5px;
        }

-        button:hover {
-            background: var(--accent-hover);
+        .submit-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(255, 42, 116, 0.5);
+            filter: brightness(1.1);
        }

+        .submit-btn:active:not(:disabled) {
+            transform: translateY(1px);
+        }
+
+        .submit-btn:disabled {
+            background: #2e2a38;
+            color: var(--text-muted);
+            cursor: not-allowed;
+            box-shadow: none;
+        }
+
+        /* Окно успеха */
        #statusMessage {
-            margin-top: 15px;
-            font-weight: 500;
+            margin-top: 20px;
+            padding: 15px;
+            border-radius: 14px;
+            font-weight: 600;
            display: none;
+            animation: fadeIn 0.4s ease forwards;
+        }
+
+        .success-cat {
+            width: 100%;
+            max-height: 180px;
+            object-fit: contain;
+            border-radius: 12px;
+            margin-top: 15px;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
        }
    </style>
 </head>
 <body>

 <div class="container">
-    <h1>День Рождения! 🎂</h1>
-    <div class="date-place">05 июня • Жду именно тебя!</div>
+    <!-- Кот на превьюшке -->
+    <img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExM3N0ZndpNzM5OTZwdG9nZXF6b3YwZ3Zqd3g3ZXkyYWh5ZXNqdXo4ciZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/W79fOy0pKFI89fDU6K/giphy.gif" class="cat-gif" alt="Cat Party">

-    <!-- Таймер обратного отсчета -->
+    <h1>День Рождения! 🎂</h1>
+    <div class="date-place">05 июня в 18:00 • Жду тебя!</div>
+
+    <!-- Таймер -->
    <div class="countdown">
        <div class="countdown-item">
            <div class="countdown-time" id="days">00</div>
@ -165,29 +306,52 @@
        </div>
    </div>

-    <!-- Форма RSVP -->
+    <!-- Форма -->
    <form id="inviteForm">
-        <label for="name">Твое имя и фамилия:</label>
-        <input type="text" id="name" name="name" placeholder="Имя Фамилия" required>
-
-        <label>Придешь?</label>
-        <div class="radio-group">
-            <label class="radio-label">
-                <input type="radio" name="attendance" value="Да, буду обязательно!" checked> Да, буду! 🎉
-            </label>
-            <label class="radio-label">
-                <input type="radio" name="attendance" value="Не смогу"> Не смогу 😔
-            </label>
+        <div class="form-group">
+            <label for="name">Твое имя и фамилия:</label>
+            <input type="text" id="name" name="name" placeholder="Имя Фамилия" required autocomplete="off">
        </div>

-        <button type="submit" id="submitBtn">Отправить ответ</button>
+        <div class="form-group">
+            <label>Придешь на тусу?</label>
+            <div class="attendance-options">
+                <!-- Кнопка ДА -->
+                <label class="status-btn checked-yes" id="labelYes">
+                    <input type="radio" name="attendance" value="Да, буду обязательно!" checked onchange="toggleButtons()">
+                    <span>Да, буду! 🎉</span>
+                </label>
+                <!-- Кнопка НЕТ -->
+                <label class="status-btn" id="labelNo">
+                    <input type="radio" name="attendance" value="Не смогу" onchange="toggleButtons()">
+                    <span>Не смогу 😔</span>
+                </label>
+            </div>
+        </div>
+
+        <button type="submit" class="submit-btn" id="submitBtn">Подтвердить ответ</button>
    </form>

    <div id="statusMessage"></div>
 </div>

 <script>
-    // --- 1. ЛОГИКА ТАЙМЕРА (Нацелен на 5 июня) ---
+    // --- 1. ПЕРЕКЛЮЧЕНИЕ СТИЛЕЙ КНОПОК ---
+    function toggleButtons() {
+        const btnYes = document.getElementById('labelYes');
+        const btnNo = document.getElementById('labelNo');
+        const radioYes = btnYes.querySelector('input');
+
+        if (radioYes.checked) {
+            btnYes.className = 'status-btn checked-yes';
+            btnNo.className = 'status-btn';
+        } else {
+            btnYes.className = 'status-btn';
+            btnNo.className = 'status-btn checked-no';
+        }
+    }
+
+    // --- 2. ЛОГИКА ТАЙМЕРА (Нацелен на 5 июня) ---
    function updateCountdown() {
        const currentYear = new Date().getFullYear();
        let targetDate = new Date(`June 5, ${currentYear} 18:00:00`).getTime();
@ -210,9 +374,9 @@
    setInterval(updateCountdown, 1000);
    updateCountdown();

-    // --- 2. ОТПРАВКА ДАННЫХ В GOOGLE ТАБЛИЦУ ---
-    // ЗАМЕНИТЬ НА СВОЙ URL ПОСЛЕ РАЗВЕРТЫВАНИЯ SCRIPT В GOOGLE ТАБЛИЦАХ:
-    const scriptURL = 'ССЫЛКА_НА_ТВОЙ_APPS_SCRIPT';
+    // --- 3. ОТПРАВКА В TELEGRAM ---
+    const TELEGRAM_BOT_TOKEN = '8961530065:AAGadg5SZ-Y0Yr_UOSzo240gw0w4jHVGwMw';
+    const TELEGRAM_CHAT_ID = '167797666';

    const form = document.getElementById('inviteForm');
    const statusMsg = document.getElementById('statusMessage');
@ -221,29 +385,52 @@
    form.addEventListener('submit', e => {
        e.preventDefault();
        submitBtn.disabled = true;
-        submitBtn.innerText = 'Отправка...';
+        submitBtn.innerText = 'Секундочку, магия котиков...';

-        const formData = new FormData();
-        formData.append('Имя', form.name.value);
-        formData.append('Приду / Нет', form.attendance.value);
+        const selectedAttendance = form.querySelector('input[name="attendance"]:checked').value;
+        const guestName = form.name.value;

-        fetch(scriptURL, { method: 'POST', body: formData })
+        const message = `🎉 Новый ответ на ДР!\n👤 Имя: ${guestName}\n✅ Статус: ${selectedAttendance}`;
+        const tgURL = `https://api.telegram.org/bot${TELEGRAM_BOT_TOKEN}/sendMessage`;
+
+        fetch(tgURL, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                chat_id: TELEGRAM_CHAT_ID,
+                text: message
+            })
+        })
            .then(response => {
+                if (!response.ok) throw new Error('Telegram API error');
+                return response.json();
+            })
+            .then(data => {
+                if (!data.ok) throw new Error(data.description || 'Telegram error');
+                form.style.display = 'none'; // Скрываем форму после успеха
                statusMsg.style.display = 'block';
-                statusMsg.style.color = '#10b981';
-                statusMsg.innerText = 'Ура! Твой ответ успешно записан. До встречи! 🙌';
-                form.reset();
-                submitBtn.innerText = 'Отправлено!';
+                statusMsg.style.background = 'rgba(16, 185, 129, 0.1)';
+                statusMsg.style.border = '1px solid #10b981';
+                statusMsg.style.color = '#34d399';
+                
+                // Победный котик в конце!
+                statusMsg.innerHTML = `
+                    <div>Ответ улетел к имениннику! До встречи! 🙌</div>
+                    <img src="https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExbW9pM3JpOHZpYmE4bW5qMXZ0Nmx3ZXN0Znd5cmR5N3ZpOHlhN2F6eCZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9cw/ICOgUNjpvO0PC/giphy.gif" class="success-cat" alt="Happy Cat">
+                `;
            })
            .catch(error => {
                console.error('Ошибка отправки!', error.message);
                statusMsg.style.display = 'block';
-                statusMsg.style.color = '#ef4444';
-                statusMsg.innerText = 'Что-то пошло не так. Попробуй еще раз.';
+                statusMsg.style.background = 'rgba(239, 68, 68, 0.1)';
+                statusMsg.style.border = '1px solid #ef4444';
+                statusMsg.style.color = '#f87171';
+                statusMsg.innerText = 'Что-то сломалось. Попробуй еще разок!';
                submitBtn.disabled = false;
-                submitBtn.innerText = 'Отправить ответ';
+                submitBtn.innerText = 'Подтвердить ответ';
            });
    });
 </script>
 </body>
 </html>
+
--- a/marker.txt
+++ b/marker.txt
@ -0,0 +1 @@
+MARKER_GITEAPAGES_1779183610
Author	SHA1	Message	Date
popit	757efb2c3b	test: pages marker	2026-05-19 14:40:10 +05:00
popit	72a94218bf	Trigger Pages rebuild	2026-05-19 14:36:49 +05:00
popit	b19defa99a	Sync gitea-pages index.html with Telegram RSVP - Replace static landing with prd.html payload (Telegram bot wired) - Form posts to Telegram sendMessage API instead of Google Apps Script	2026-05-19 14:33:07 +05:00