<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>WhatsCRM - Автопилот + Tilda + Бизон 365 + GetCurse</title> <!-- Подключение библиотек --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script> <script src="https://vk.com/js/api/openapi.js?169"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css"> <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script> <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet"> <script src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script> <!-- Стили --> <style> body { font-family: Arial, sans-serif; text-align: center; background-color: #f0f0f0; margin: 0; padding: 0; } h1 { background-color: #4CAF50; color: white; padding: 20px; margin: 0; border-bottom: 2px solid #388E3C; font-size: 28px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } button, #filter-clear, #download-json, #take-for-yourself { color: white; background-color: #4CAF50; border: none; cursor: pointer; padding: 10px 20px; font-size: 16px; border-radius: 5px; margin: 5px; transition: background-color 0.3s ease; } button:hover, #filter-clear:hover, #download-json:hover, #take-for-yourself:hover { background-color: #388E3C; } select, input { padding: 10px; font-size: 16px; margin: 5px; border-radius: 5px; border: 1px solid #ccc; background-color: #f0f0f0; transition: border-color 0.3s ease, box-shadow 0.3s ease; } select:focus, input:focus { border-color: #4CAF50; box-shadow: 0 0 5px rgba(76, 175, 80, 0.5); } #filter-field option, #filter-type option, #filter-field2 option { background-color: #f0f0f0; color: #333; } #mediaContainer { margin-top: 20px; display: flex; justify-content: center; align-items: center; flex-direction: column; max-width: 100%; height: auto; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; padding: 20px; background-color: white; } #mediaContainer img, #mediaContainer video { max-width: 100%; height: auto; object-fit: contain; border-radius: 10px; } #imageUrl { margin-top: 20px; font-size: 16px; color: #333; cursor: pointer; text-decoration: underline; transition: color 0.3s ease; } #imageUrl:hover { color: #4CAF50; } #progressBarContainer { width: 80%; margin: 20px auto; background-color: #ddd; border-radius: 13px; padding: 3px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2); } #progressBar { width: 0%; height: 20px; background-color: #4CAF50; border-radius: 10px; text-align: center; line-height: 20px; color: white; transition: width 0.3s ease; } .swal-button-custom { background-color: #4CAF50; font-size: 16px; padding: 10px 20px; } .swal-title-custom { font-size: 24px; color: #333; } .swal-content-custom { font-size: 16px; color: #666; } </style> </head> <body> <header> <h1>WhatsCRM - Автопилот + Tilda + Бизон 365 + GetCurse</h1> </header> <main> <div> <select id="filter-field"> <option value="">Выберите поле</option> <option value="id">Номер в списке</option> <option value="name">Имя</option> <option value="phone">WhatsApp</option> <option value="email">Email</option> <option value="b_mess">Реплики</option> <option value="curator">Куратор</option> <option value="shop_st">Статус покупки</option> <option value="ad_url">Ссылка на пользователя в GC</option> <option value="vk_id">Ссылка на VK</option> <option value="chat_id">Ссылка на Tg</option> <option value="ws_stop">Статус подписки</option> <option value="web_st">Вебинары</option> <option value="fin_prog">Прогресс по воронке</option> <option value="pr1">pr1</option> <option value="pr2">pr2</option> <option value="pr3">pr3</option> <option value="pr4">Канал трафика</option> <option value="pr5">Дата</option> <option value="key_pr">Ключ PR</option> <option value="canal">Канал</option> <option value="data_t">Дата</option> </select> <select id="filter-type"> <option value="=">=</option> <option value="<"><</option> <option value="<="><=</option> <option value=">">></option> <option value=">=">>=</option> <option value="!=">!=</option> <option value="like">like</option> </select> <input id="filter-value" type="text" placeholder="Значение фильтра"> <select id="filter-field2"> <option value="">Выберите поле</option> <option value="id">Номер в списке</option> <option value="name">Имя</option> <option value="phone">WhatsApp</option> <option value="email">Email</option> <option value="b_mess">Реплики</option> <option value="curator">Куратор</option> <option value="shop_st">Статус покупки</option> <option value="ad_url">Ссылка на пользователя в GC</option> <option value="vk_id">Ссылка на VK</option> <option value="chat_id">Ссылка на Tg</option> <option value="ws_stop">Статус подписки</option> <option value="web_st">Вебинары</option> <option value="fin_prog">Прогресс по воронке</option> <option value="pr1">pr1</option> <option value="pr2">pr2</option> <option value="pr3">pr3</option> <option value="pr4">Канал трафика</option> <option value="pr5">Дата</option> <option value="key_pr">Ключ PR</option> <option value="canal">Канал</option> <option value="data_t">Дата</option> </select> <input id="filter-value2" type="text" placeholder="Значение фильтра 2"> <button id="filter-clear">Очистить фильтр</button> <button id="download-json">Скачать JSON</button> <button id="take-for-yourself">Возьми для себя</button> </div> <div id="mediaContainer"> <!-- Место для изображения или видео --> <div id="mediaWrapper"> <!-- Изображение по умолчанию --> <img id="media" src="" alt="Media" style="display: none;"> <!-- Видео по умолчанию --> <video id="mediaVideo" controls style="display: none;"> <source id="mediaSource" src="" type="video/mp4"> Ваш браузер не поддерживает видео. </video> </div> <div id="imageUrl"></div> </div> <div id="progressBarContainer"> <div id="progressBar">0%</div> </div> <!-- Таблица данных --> <div id="data-table"></div> </main> <script> $(document).ready(function() { let data = []; let table = new Tabulator("#data-table", { data: data, layout: "fitColumns", columns: [ { title: "ID", field: "id" }, { title: "Имя", field: "name" }, { title: "WhatsApp", field: "phone" }, { title: "Email", field: "email" }, { title: "Реплики", field: "b_mess" }, { title: "Куратор", field: "curator" }, { title: "Статус покупки", field: "shop_st" }, { title: "Ссылка на пользователя в GC", field: "ad_url" }, { title: "Ссылка на VK", field: "vk_id" }, { title: "Ссылка на Tg", field: "chat_id" }, { title: "Статус подписки", field: "ws_stop" }, { title: "Вебинары", field: "web_st" }, { title: "Прогресс по воронке", field: "fin_prog" }, { title: "pr1", field: "pr1" }, { title: "pr2", field: "pr2" }, { title: "pr3", field: "pr3" }, { title: "Канал трафика", field: "pr4" }, { title: "Дата", field: "pr5" }, { title: "Ключ PR", field: "key_pr" }, { title: "Канал", field: "canal" }, { title: "Дата", field: "data_t" } ] }); // Обработка клика на кнопке "Очистить фильтр" $('#filter-clear').click(function() { $('#filter-field').val(''); $('#filter-type').val('='); $('#filter-value').val(''); $('#filter-field2').val(''); $('#filter-value2').val(''); }); // Обработка клика на кнопке "Скачать JSON" $('#download-json').click(function() { let jsonData = JSON.stringify(data, null, 2); let blob = new Blob([jsonData], { type: "application/json" }); let url = URL.createObjectURL(blob); let a = document.createElement('a'); a.href = url; a.download = 'data.json'; a.click(); URL.revokeObjectURL(url); }); // Обработка клика на кнопке "Возьми для себя" $('#take-for-yourself').click(function() { Swal.fire({ title: 'Вы уверены?', text: 'Вы собираетесь забрать эти данные для себя!', icon: 'warning', showCancelButton: true, confirmButtonText: 'Да, забрать', cancelButtonText: 'Отмена', customClass: { confirmButton: 'swal-button-custom', title: 'swal-title-custom', content: 'swal-content-custom', } }).then((result) => { if (result.isConfirmed) { // Логика для кнопки "Возьми для себя" Swal.fire( 'Выполнено!', 'Данные забраны для себя.', 'success' ); } }); }); // Пример функции для обновления прогресс-бара function updateProgressBar(percentage) { $('#progressBar').css('width', percentage + '%').text(percentage + '%'); } // Обновляем прогресс-бар на 50% как пример updateProgressBar(50); // Пример загрузки изображения $('#imageUrl').click(function() { let imageUrl = prompt('Введите URL изображения'); if (imageUrl) { $('#media').attr('src', imageUrl).show(); $('#mediaVideo').hide(); $('#imageUrl').text(imageUrl); } }); // Пример загрузки видео function loadVideo(videoUrl) { $('#mediaVideo').show(); $('#media').hide(); $('#mediaSource').attr('src', videoUrl); $('#mediaVideo')[0].load(); } }); </script> </body> </html>