psy4

Sleeping

App Files Files Community

DmitrMakeev commited on Jun 29

Commit

7a8928a

•

1 Parent(s): 82924f3

Update online.html

Browse files

Files changed (1) hide show

online.html +78 -28

online.html CHANGED Viewed

@@ -1,54 +1,104 @@
 <!DOCTYPE html>
-<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WhatsApp QR Code</title>
     <style>
-        .button {
-            border: none;
             color: white;
-            padding: 16px 32px;
             text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 16px;
-            margin: 4px 2px;
-            transition-duration: 0.4s;
-            cursor: pointer;
         }
-        .buttonGreen {
-            background-color: white;
-            color: black;
-            border: 2px solid #4CAF50;
         }
-        .buttonGreen:hover {
             background-color: #4CAF50;
             color: white;
         }
         #qrCode {
-            display: block;
-            margin: 20px auto;
         }
         #statusText {
             text-align: center;
             color: blue;
         }
     </style>
 </head>
 <body>
-    <h1>WhatsApp QR Code</h1>
-    <form id="authForm">
-        <label for="idInstance">Id Instance:</label><br>
-        <input required type="text" id="idInstance" name="idInstance" value="1101761238"><br>
-        <label for="apiTokenInstance">API Token:</label><br>
-        <input required type="text" id="apiTokenInstance" name="apiTokenInstance" value="88b54820abd5445894bf547dca2fb2f32ee6e70a29004c18ab"><br><br>
-        <button type="submit" class="button buttonGreen">Get QR Code</button>
-    </form>
-    <p id="statusText"></p>
-    <img id="qrCode" src="" alt="QR Code" hidden>
     <script>
         document.getElementById("authForm").addEventListener("submit", function(event) {
@@ -64,7 +114,7 @@
                     .then(data => {
                         const qrCodeElement = document.getElementById("qrCode");
                         const statusText = document.getElementById("statusText");
                         if (data.type === 'qrCode') {
                             qrCodeElement.src = `data:image/png;base64,${data.message}`;
                             qrCodeElement.hidden = false;

 <!DOCTYPE html>
+<html lang="ru">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>WhatsApp QR Code</title>
     <style>
+        body {
+            font-family: Arial, sans-serif;
+            margin: 0;
+            padding: 0;
+            background-color: #f0f0f0;
+        }
+        .header {
+            background-color: #4CAF50;
             color: white;
             text-align: center;
+            padding: 15px 0;
+            font-size: 24px;
         }
+        .container {
+            display: flex;
+            justify-content: space-between;
+            padding: 20px;
+        }
+        .form-container, .qr-container {
+            flex: 1;
+            margin: 10px;
+        }
+        .form-container {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+        }
+        form {
+            width: 100%;
+        }
+        label, input {
+            display: block;
+            width: 100%;
+            margin-bottom: 10px;
         }
+        input {
+            padding: 10px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+        }
+        .button {
+            width: 100%;
+            padding: 16px 32px;
+            margin-top: 10px;
             background-color: #4CAF50;
             color: white;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+            transition-duration: 0.4s;
+        }
+        .button:hover {
+            background-color: #45a049;
+        }
+        .qr-container {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
         }
         #qrCode {
+            margin-top: 20px;
+            border: 1px solid #ccc;
+            padding: 10px;
+            background-color: white;
+            border-radius: 8px;
         }
         #statusText {
             text-align: center;
             color: blue;
+            margin-top: 10px;
         }
     </style>
 </head>
 <body>
+    <div class="header">Авторизация</div>
+    <div class="container">
+        <div class="form-container">
+            <form id="authForm">
+                <label for="idInstance">Id Instance:</label>
+                <input required type="text" id="idInstance" name="idInstance" value="1101761238">
+                <label for="apiTokenInstance">API Token:</label>
+                <input required type="text" id="apiTokenInstance" name="apiTokenInstance" value="88b54820abd5445894bf547dca2fb2f32ee6e70a29004c18ab">
+                <button type="submit" class="button">Get QR Code</button>
+            </form>
+        </div>
+        <div class="qr-container">
+            <p id="statusText"></p>
+            <img id="qrCode" src="" alt="QR Code" hidden>
+        </div>
+    </div>
     <script>
         document.getElementById("authForm").addEventListener("submit", function(event) {
                     .then(data => {
                         const qrCodeElement = document.getElementById("qrCode");
                         const statusText = document.getElementById("statusText");
                         if (data.type === 'qrCode') {
                             qrCodeElement.src = `data:image/png;base64,${data.message}`;
                             qrCodeElement.hidden = false;