DmitrMakeev commited on
Commit
bf20b94
1 Parent(s): 8e7c380

Update bas_vk_tab.html

Browse files
Files changed (1) hide show
  1. bas_vk_tab.html +170 -1
bas_vk_tab.html CHANGED
@@ -1,3 +1,169 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <body>
2
  <div id="header">
3
  <h1>WhatsMasterCRM</h1>
@@ -213,4 +379,7 @@
213
  });
214
  });
215
  </script>
216
- </body>
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="ru">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>WhatsMasterCRM</title>
7
+
8
+
9
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
10
+ <script src="https://unpkg.com/@vkontakte/vk-bridge/dist/browser.min.js"></script>
11
+ <script type="text/javascript" src="https://vk.com/js/api/openapi.js?169"></script>
12
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11/dist/sweetalert2.min.css">
13
+ <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
14
+ <script type="text/javascript" src="https://oss.sheetjs.com/sheetjs/xlsx.full.min.js"></script>
15
+
16
+
17
+
18
+ <!-- Подключение стилей Notyf -->
19
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/notyf/notyf.min.css">
20
+
21
+ <!-- Подключение скрипта Notyf -->
22
+ <script src="https://cdn.jsdelivr.net/npm/notyf/notyf.min.js"></script>
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+ <link href="https://unpkg.com/tabulator-tables@6.2.1/dist/css/tabulator.min.css" rel="stylesheet">
34
+ <script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.2.1/dist/js/tabulator.min.js"></script>
35
+
36
+
37
+
38
+ <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
39
+ <style>
40
+ body {
41
+ font-family: Arial, sans-serif;
42
+ text-align: center;
43
+ background-color: #f0f0f0;
44
+ margin: 0;
45
+ padding: 0;
46
+ }
47
+ h1 {
48
+ background-color: #4CAF50;
49
+ color: white;
50
+ padding: 20px;
51
+ margin: 0;
52
+ border-bottom: 2px solid #388E3C;
53
+ font-size: 28px;
54
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
55
+ }
56
+ button, #filter-clear, #download-json, #take-for-yourself {
57
+ color: white;
58
+ background-color: #4CAF50;
59
+ border: none;
60
+ cursor: pointer;
61
+ padding: 10px 20px;
62
+ font-size: 16px;
63
+ border-radius: 5px;
64
+ margin: 5px;
65
+ transition: background-color 0.3s ease;
66
+ }
67
+ button:hover, #filter-clear:hover, #download-json:hover, #take-for-yourself:hover {
68
+ background-color: #388E3C;
69
+ }
70
+ #filter-field, #filter-type, #filter-value, #filter-field2, #filter-value2 {
71
+ padding: 10px;
72
+ font-size: 16px;
73
+ margin: 5px;
74
+ border-radius: 5px;
75
+ border: 1px solid #ccc;
76
+ background-color: #f0f0f0;
77
+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
78
+ }
79
+ #filter-field:focus, #filter-type:focus, #filter-value:focus, #filter-field2:focus, #filter-value2:focus {
80
+ border-color: #4CAF50;
81
+ box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
82
+ }
83
+ #filter-field option, #filter-type option, #filter-field2 option {
84
+ background-color: #f0f0f0;
85
+ color: #333;
86
+ }
87
+ #filter-field:hover, #filter-type:hover, #filter-value:hover, #filter-field2:hover, #filter-value2:hover {
88
+ border-color: #4CAF50;
89
+ }
90
+ #mediaContainer {
91
+ margin-top: 20px;
92
+ display: flex;
93
+ justify-content: center;
94
+ align-items: center;
95
+ flex-direction: column;
96
+ max-width: 100%;
97
+ height: auto;
98
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
99
+ border-radius: 10px;
100
+ padding: 20px;
101
+ background-color: white;
102
+ }
103
+ #mediaContainer img, #mediaContainer video {
104
+ max-width: 100%;
105
+ height: auto;
106
+ object-fit: contain;
107
+ border-radius: 10px;
108
+ }
109
+ #imageUrl {
110
+ margin-top: 20px;
111
+ font-size: 16px;
112
+ color: #333;
113
+ cursor: pointer;
114
+ text-decoration: underline;
115
+ transition: color 0.3s ease;
116
+ }
117
+ #imageUrl:hover {
118
+ color: #4CAF50;
119
+ }
120
+ #progressBarContainer {
121
+ width: 80%;
122
+ margin: 20px auto;
123
+ background-color: #ddd;
124
+ border-radius: 13px;
125
+ padding: 3px;
126
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
127
+ }
128
+ #progressBar {
129
+ width: 0%;
130
+ height: 20px;
131
+ background-color: #4CAF50;
132
+ border-radius: 10px;
133
+ text-align: center;
134
+ line-height: 20px;
135
+ color: white;
136
+ transition: width 0.3s ease;
137
+ }
138
+ .swal-button-custom {
139
+ background-color: #4CAF50;
140
+ font-size: 16px;
141
+ padding: 10px 20px;
142
+ }
143
+ .swal-title-custom {
144
+ font-size: 24px;
145
+ color: #333;
146
+ }
147
+ .swal-content-custom {
148
+ font-size: 16px;
149
+ color: #666;
150
+ }
151
+ /* Переопределение стилей Notyf */
152
+ .notyf__toast {
153
+ background-color: #4CAF50 !important; /* Зеленый фон */
154
+ color: #ffffff !important; /* Белый текст */
155
+ font-size: 16px;
156
+ }
157
+ .notyf__toast--success {
158
+ background-color: #4CAF50 !important; /* Зеленый фон для успешного уведомления */
159
+ }
160
+ .notyf__toast--error {
161
+ background-color: #d9534f !important; /* Красный фон для ошибок (по желанию) */
162
+ }
163
+ </style>
164
+ </head>
165
+
166
+
167
  <body>
168
  <div id="header">
169
  <h1>WhatsMasterCRM</h1>
 
379
  });
380
  });
381
  </script>
382
+ </body>
383
+
384
+
385
+ </html>