|
<!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/[email protected]/dist/css/tabulator.min.css" rel="stylesheet"> |
|
<script src="https://unpkg.com/[email protected]/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(''); |
|
}); |
|
|
|
|
|
$('#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 + '%'); |
|
} |
|
|
|
|
|
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> |
|
|
