File size: 5,896 Bytes
5813704 27648bc 5cc0f97 038f62f 5cc0f97 b17726c 9cc7451 3d44123 27c150c 3d44123 5519a4e 3d44123 71b0971 9421412 dc49f25 3ac90bd ba92d2b 90d842e ba92d2b 87f3a94 dc49f25 87f3a94 5519a4e 22f4202 9421412 3d44123 b17726c 27648bc 5813704 9421412 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tabulator Example</title>
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" 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[type="submit"] {
color: white;
background-color: #4CAF50;
border: none;
cursor: pointer;
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
margin-top: 20px;
transition: background-color 0.3s ease;
}
button[type="submit"]:hover {
background-color: #388E3C;
}
#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;
}
</style>
</head>
<body>
<div id="header">
<h1>База синхронизации с GetCourse</h1>
</div>
<div id="example-table"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
fetch('https://dmtuit-gc-api-ras.hf.space/data_gc_tab_out?api_sys=fasSd345D')
.then(response => response.json())
.then(data => {
var table = new Tabulator("#example-table", {
data: data, // set table data
layout: "fitColumns", // fit columns to width of table
columns: [
{title:"Номер в списке", field:"id"},
{title:"Имя", field:"name"},
{title:"Телефон", field:"phone"},
{title:"Email", field:"email"},
{title:"Ссылка на пользователя в GC", field:"ad_url"},
{title:"Ссылка на VK", field:"vk_id", formatter: function(cell, formatterParams, onRendered) {
var vk_id = cell.getValue();
return `<a href="https://vk.com/id${vk_id}" target="_blank">${vk_id}</a>`;
}},
{title:"Ссылка на Tg", field:"chat_id", formatter: function(cell, formatterParams, onRendered) {
var chatId = cell.getValue();
if (chatId.startsWith('@')) {
chatId = chatId.substring(1); // Удаление символа @ в начале
}
return `<a href="https://t.me/${chatId}" target="_blank">${chatId}</a>`;
}},
{title:"Ссылка на WhatsApp", field:"phone", formatter: function(cell, formatterParams, onRendered) {
var phone = cell.getValue();
return `<a href="https://web.whatsapp.com/send?phone=${phone}" target="_blank">${phone}</a>`;
}},
{title:"Статус WhatsApp", field:"ws_statys"},
{title:"Стутус подписки", field:"ws_stop"},
{title:"Вебинары", field:"web_statys"},
{title:"Прогрес по воронке", field:"fin_progress"},
{title:"Статус покупки", field:"shop_statys_full"},
{title:"utm_source", field:"pr1"},
{title:"utm_medium", field:"pr2"},
{title:"utm_campaign", field:"pr3"},
{title:"utm_term", field:"pr4"},
{title:"utm_content", field:"pr5"}
],
});
})
.catch(error => console.error('Error fetching data:', error));
});
</script>
</body>
</html> |