Hugging Face's logo

Spaces:
DMTuit
/
gc_api_ras_
Sleeping

App Files Community
DmitrMakeev commited on
Commit
dbe43e4
·
verified ·
1 Parent(s): 326b9e2

Update online.html

Browse files
Files changed (1) hide show
  1. online.html +3 -132
online.html CHANGED
@@ -1,140 +1,11 @@
1
  <!DOCTYPE html>
2
  <html>
3
-
4
- <head>
5
- <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
6
- <meta content="utf-8" http-equiv="encoding">
7
- <style>
8
- .button {
9
- border: none;
10
- color: white;
11
- padding: 16px 32px;
12
- text-align: center;
13
- text-decoration: none;
14
- display: inline-block;
15
- font-size: 16px;
16
- margin: 4px 2px;
17
- transition-duration: 0.4s;
18
- cursor: pointer;
19
- }
20
-
21
- .buttonGreen {
22
- background-color: white;
23
- color: black;
24
- border: 2px solid #4CAF50;
25
- }
26
-
27
- .buttonGreen:hover {
28
- background-color: #4CAF50;
29
- color: white;
30
- }
31
- </style>
32
- </head>
33
-
34
  <body>
35
 
36
- <h1>WhatsApp client browser example</h1>
37
-
38
- <form>
39
- <label for="idInstance">Id Instance:</label><br>
40
- <input required type="text" id="idInstance" name="idInstance"><br>
41
- <label for="apiTokenIsntance">API Token:</label><br>
42
- <input required type="text" id="apiTokenIsntance" name="apiTokenIsntance"><br>
43
- </form>
44
 
45
- <p style="color:blue" id="statusText"></p>
46
- <p style="color:blue" id="resultText"></p>
47
- <p>Press button to get qr code</p>
48
- <div style="display:grid; width: 20%">
49
- <button id="getQrBtn" class="button buttonGreen">Get QR</button>
50
- <button style="display: none" hidden id="logoutQrBtn" class="button buttonGreen">Logout</button>
51
- <img hidden id="img-qr-code" alt="QR-Code" class="sb-qr-wizard-qr-code" aria-hidden="false" src="data:image/png;base64,%QR_DATA%" style="">
52
- </div>
53
- <script type="text/javascript" src="https://unpkg.com/@green-api/whatsapp-api-client/lib/whatsapp-api-client.min.js"></script>
54
- <script>
55
- var intervalId = null
56
- const qrCodeElement = document.getElementById("img-qr-code")
57
- const qrTempalte = qrCodeElement.getAttribute('src');
58
-
59
- document.getElementById("getQrBtn").addEventListener("click", function () {
60
- try {
61
- isAuthed();
62
- clearInterval(intervalId)
63
- updateQRCode()
64
- intervalId = setInterval(updateQRCode, 5000);
65
-
66
- } catch (reason) {
67
- console.error(reason);
68
- document.getElementById("resultText").innerHTML = reason + ". See logs for details";
69
- }
70
- });
71
-
72
- document.getElementById("logoutQrBtn").addEventListener("click", function () {
73
- try {
74
- const restAPI = whatsAppClient.restAPI(({
75
- idInstance: document.getElementById("idInstance").value,
76
- apiTokenInstance: document.getElementById("apiTokenIsntance").value
77
- }))
78
-
79
- restAPI.instance.logout()
80
- .then((data) => {
81
- document.getElementById("resultText").innerHTML = "isLogout=" + data.isLogout
82
- isAuthed();
83
- }).catch((reason) => {
84
- console.error(reason);
85
- document.getElementById("resultText").innerHTML = reason + ". See logs for details";
86
- });
87
- } catch (reason) {
88
- console.error(reason);
89
- document.getElementById("resultText").innerHTML = reason + ". See logs for details";
90
- }
91
- });
92
-
93
- function updateQRCode() {
94
- const restAPI = whatsAppClient.restAPI(({
95
- idInstance: document.getElementById("idInstance").value,
96
- apiTokenInstance: document.getElementById("apiTokenIsntance").value
97
- }))
98
- restAPI.instance.qr()
99
- .then((data) => {
100
- console.log(data);
101
- document.getElementById("resultText").innerHTML = "";
102
- if (data.type === 'qrCode') {
103
- qrCodeElement.hidden = false;
104
- qrCodeElement.setAttribute('src', qrTempalte.replace("%QR_DATA%", data.message))
105
- } else {
106
- qrCodeElement.hidden = true;
107
- clearInterval(intervalId)
108
- isAuthed();
109
- document.getElementById("resultText").innerHTML = data.message
110
- }
111
- }).catch((reason) => {
112
- console.error(reason);
113
- document.getElementById("resultText").innerHTML = reason + ". See logs for details";
114
- });
115
- }
116
-
117
- function isAuthed() {
118
- const restAPI = whatsAppClient.restAPI(({
119
- idInstance: document.getElementById("idInstance").value,
120
- apiTokenInstance: document.getElementById("apiTokenIsntance").value
121
- }))
122
- restAPI.instance.getStateInstance().then(data => {
123
- document.getElementById("statusText").innerHTML = data.stateInstance;
124
-
125
- if (data.stateInstance === 'authorized') {
126
- document.getElementById("getQrBtn").style.display = "none"
127
- document.getElementById("logoutQrBtn").style.display = "block"
128
- } else {
129
- document.getElementById("getQrBtn").style.display = "block"
130
- document.getElementById("logoutQrBtn").style.display = "none"
131
- }
132
-
133
-
134
- })
135
- }
136
- </script>
137
 
138
  </body>
139
-
140
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3
  <body>
4
 
5
+ <h2>HTML Iframes</h2>
6
+ <p>You can also use the CSS height and width properties to specify the size of the iframe:</p>
 
 
 
 
 
 
7
 
8
+ <iframe src="https://qr.green-api.com/waInstance1101761238/88b54820abd5445894bf547dca2fb2f32ee6e70a29004c18ab" style="height:480px;width:780px" title="Iframe Example"></iframe>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
 
10
  </body>
 
11
  </html>