<!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>