DmitrMakeev commited on
Commit
404def4
·
verified ·
1 Parent(s): facf54e

Update bas_vk.html

Browse files
Files changed (1) hide show
  1. bas_vk.html +185 -1
bas_vk.html CHANGED
@@ -1,3 +1,185 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
  <body>
2
  <div id="header">
3
  <h1>WhatsMasterCRM</h1>
@@ -220,4 +402,6 @@
220
  .catch(error => console.error('Error fetching data:', error));
221
  });
222
  </script>
223
- </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/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
34
+ <script type="text/javascript" src="https://unpkg.com/[email protected]/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
+
48
+ h1 {
49
+ background-color: #4CAF50;
50
+ color: white;
51
+ padding: 20px;
52
+ margin: 0;
53
+ border-bottom: 2px solid #388E3C;
54
+ font-size: 28px;
55
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
56
+ }
57
+
58
+ button, #filter-clear, #download-json, #take-for-yourself {
59
+ color: white;
60
+ background-color: #4CAF50;
61
+ border: none;
62
+ cursor: pointer;
63
+ padding: 10px 20px;
64
+ font-size: 16px;
65
+ border-radius: 5px;
66
+ margin: 5px;
67
+ transition: background-color 0.3s ease;
68
+ }
69
+
70
+ button:hover, #filter-clear:hover, #download-json:hover, #take-for-yourself:hover {
71
+ background-color: #388E3C;
72
+ }
73
+
74
+ #filter-field, #filter-type, #filter-value, #filter-field2, #filter-value2 {
75
+ padding: 10px;
76
+ font-size: 16px;
77
+ margin: 5px;
78
+ border-radius: 5px;
79
+ border: 1px solid #ccc;
80
+ background-color: #f0f0f0;
81
+ transition: border-color 0.3s ease, box-shadow 0.3s ease;
82
+ }
83
+
84
+ #filter-field:focus, #filter-type:focus, #filter-value:focus, #filter-field2:focus, #filter-value2:focus {
85
+ border-color: #4CAF50;
86
+ box-shadow: 0 0 5px rgba(76, 175, 80, 0.5);
87
+ }
88
+
89
+ #filter-field option, #filter-type option, #filter-field2 option {
90
+ background-color: #f0f0f0;
91
+ color: #333;
92
+ }
93
+
94
+ #filter-field:hover, #filter-type:hover, #filter-value:hover, #filter-field2:hover, #filter-value2:hover {
95
+ border-color: #4CAF50;
96
+ }
97
+
98
+ #mediaContainer {
99
+ margin-top: 20px;
100
+ display: flex;
101
+ justify-content: center;
102
+ align-items: center;
103
+ flex-direction: column;
104
+ max-width: 100%;
105
+ height: auto;
106
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
107
+ border-radius: 10px;
108
+ padding: 20px;
109
+ background-color: white;
110
+ }
111
+
112
+ #mediaContainer img, #mediaContainer video {
113
+ max-width: 100%;
114
+ height: auto;
115
+ object-fit: contain;
116
+ border-radius: 10px;
117
+ }
118
+
119
+ #imageUrl {
120
+ margin-top: 20px;
121
+ font-size: 16px;
122
+ color: #333;
123
+ cursor: pointer;
124
+ text-decoration: underline;
125
+ transition: color 0.3s ease;
126
+ }
127
+
128
+ #imageUrl:hover {
129
+ color: #4CAF50;
130
+ }
131
+
132
+ #progressBarContainer {
133
+ width: 80%;
134
+ margin: 20px auto;
135
+ background-color: #ddd;
136
+ border-radius: 13px;
137
+ padding: 3px;
138
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
139
+ }
140
+
141
+ #progressBar {
142
+ width: 0%;
143
+ height: 20px;
144
+ background-color: #4CAF50;
145
+ border-radius: 10px;
146
+ text-align: center;
147
+ line-height: 20px;
148
+ color: white;
149
+ transition: width 0.3s ease;
150
+ }
151
+
152
+ .swal-button-custom {
153
+ background-color: #4CAF50;
154
+ font-size: 16px;
155
+ padding: 10px 20px;
156
+ }
157
+
158
+ .swal-title-custom {
159
+ font-size: 24px;
160
+ color: #333;
161
+ }
162
+
163
+ .swal-content-custom {
164
+ font-size: 16px;
165
+ color: #666;
166
+ }
167
+ /* Переопределение стилей Notyf */
168
+ .notyf__toast {
169
+ background-color: #4CAF50 !important; /* Зеленый фон */
170
+ color: #ffffff !important; /* Белый текст */
171
+ font-size: 16px;
172
+ }
173
+ .notyf__toast--success {
174
+ background-color: #4CAF50 !important; /* Зеленый фон для успешного уведомления */
175
+ }
176
+ .notyf__toast--error {
177
+ background-color: #d9534f !important; /* Красный фон для ошибок (по желанию) */
178
+ }
179
+ </style>
180
+ </head>
181
+
182
+
183
  <body>
184
  <div id="header">
185
  <h1>WhatsMasterCRM</h1>
 
402
  .catch(error => console.error('Error fetching data:', error));
403
  });
404
  </script>
405
+ </body>
406
+
407
+ </html>