DmitrMakeev commited on
Commit
7a8928a
1 Parent(s): 82924f3

Update online.html

Browse files
Files changed (1) hide show
  1. online.html +78 -28
online.html CHANGED
@@ -1,54 +1,104 @@
1
  <!DOCTYPE html>
2
- <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>WhatsApp QR Code</title>
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
- .buttonGreen {
21
- background-color: white;
22
- color: black;
23
- border: 2px solid #4CAF50;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
24
  }
25
- .buttonGreen:hover {
 
 
 
 
 
 
 
 
 
26
  background-color: #4CAF50;
27
  color: white;
 
 
 
 
 
 
 
 
 
 
 
 
 
28
  }
29
  #qrCode {
30
- display: block;
31
- margin: 20px auto;
 
 
 
32
  }
33
  #statusText {
34
  text-align: center;
35
  color: blue;
 
36
  }
37
  </style>
38
  </head>
39
  <body>
40
 
41
- <h1>WhatsApp QR Code</h1>
42
- <form id="authForm">
43
- <label for="idInstance">Id Instance:</label><br>
44
- <input required type="text" id="idInstance" name="idInstance" value="1101761238"><br>
45
- <label for="apiTokenInstance">API Token:</label><br>
46
- <input required type="text" id="apiTokenInstance" name="apiTokenInstance" value="88b54820abd5445894bf547dca2fb2f32ee6e70a29004c18ab"><br><br>
47
- <button type="submit" class="button buttonGreen">Get QR Code</button>
48
- </form>
49
 
50
- <p id="statusText"></p>
51
- <img id="qrCode" src="" alt="QR Code" hidden>
 
 
 
 
 
 
 
 
 
 
 
 
 
52
 
53
  <script>
54
  document.getElementById("authForm").addEventListener("submit", function(event) {
@@ -64,7 +114,7 @@
64
  .then(data => {
65
  const qrCodeElement = document.getElementById("qrCode");
66
  const statusText = document.getElementById("statusText");
67
-
68
  if (data.type === 'qrCode') {
69
  qrCodeElement.src = `data:image/png;base64,${data.message}`;
70
  qrCodeElement.hidden = false;
 
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>WhatsApp QR Code</title>
7
  <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ margin: 0;
11
+ padding: 0;
12
+ background-color: #f0f0f0;
13
+ }
14
+ .header {
15
+ background-color: #4CAF50;
16
  color: white;
 
17
  text-align: center;
18
+ padding: 15px 0;
19
+ font-size: 24px;
 
 
 
 
20
  }
21
+ .container {
22
+ display: flex;
23
+ justify-content: space-between;
24
+ padding: 20px;
25
+ }
26
+ .form-container, .qr-container {
27
+ flex: 1;
28
+ margin: 10px;
29
+ }
30
+ .form-container {
31
+ display: flex;
32
+ flex-direction: column;
33
+ align-items: flex-start;
34
+ }
35
+ form {
36
+ width: 100%;
37
+ }
38
+ label, input {
39
+ display: block;
40
+ width: 100%;
41
+ margin-bottom: 10px;
42
  }
43
+ input {
44
+ padding: 10px;
45
+ font-size: 16px;
46
+ border: 1px solid #ccc;
47
+ border-radius: 4px;
48
+ }
49
+ .button {
50
+ width: 100%;
51
+ padding: 16px 32px;
52
+ margin-top: 10px;
53
  background-color: #4CAF50;
54
  color: white;
55
+ border: none;
56
+ border-radius: 4px;
57
+ cursor: pointer;
58
+ font-size: 16px;
59
+ transition-duration: 0.4s;
60
+ }
61
+ .button:hover {
62
+ background-color: #45a049;
63
+ }
64
+ .qr-container {
65
+ display: flex;
66
+ flex-direction: column;
67
+ align-items: center;
68
  }
69
  #qrCode {
70
+ margin-top: 20px;
71
+ border: 1px solid #ccc;
72
+ padding: 10px;
73
+ background-color: white;
74
+ border-radius: 8px;
75
  }
76
  #statusText {
77
  text-align: center;
78
  color: blue;
79
+ margin-top: 10px;
80
  }
81
  </style>
82
  </head>
83
  <body>
84
 
85
+ <div class="header">Авторизация</div>
 
 
 
 
 
 
 
86
 
87
+ <div class="container">
88
+ <div class="form-container">
89
+ <form id="authForm">
90
+ <label for="idInstance">Id Instance:</label>
91
+ <input required type="text" id="idInstance" name="idInstance" value="1101761238">
92
+ <label for="apiTokenInstance">API Token:</label>
93
+ <input required type="text" id="apiTokenInstance" name="apiTokenInstance" value="88b54820abd5445894bf547dca2fb2f32ee6e70a29004c18ab">
94
+ <button type="submit" class="button">Get QR Code</button>
95
+ </form>
96
+ </div>
97
+ <div class="qr-container">
98
+ <p id="statusText"></p>
99
+ <img id="qrCode" src="" alt="QR Code" hidden>
100
+ </div>
101
+ </div>
102
 
103
  <script>
104
  document.getElementById("authForm").addEventListener("submit", function(event) {
 
114
  .then(data => {
115
  const qrCodeElement = document.getElementById("qrCode");
116
  const statusText = document.getElementById("statusText");
117
+
118
  if (data.type === 'qrCode') {
119
  qrCodeElement.src = `data:image/png;base64,${data.message}`;
120
  qrCodeElement.hidden = false;