diff --git a/chata/index.html b/chata/index.html
index 197321f..2b4e947 100644
--- a/chata/index.html
+++ b/chata/index.html
@@ -1,231 +1,129 @@
-<html>
-    <head>
-        <meta charset="utf-8">
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-        <title>WiFi test</title>
-        <style>
-          button:disabled {
-            background: #ccc;
-          }
-          input:disabled {
-            background: #ccc;
-          }
-          .slidecontainer {
-            width: 100%; /* Width of the outside container */
-          }
-          .slider {
-            -webkit-appearance: none;
-            width: 100%;
-            height: 50px;
-            border-radius: 5px;  
-            background: #00FF00;
-            outline: none;
-            opacity: 0.7;
-            -webkit-transition: .2s;
-            transition: opacity .2s;
-          }
-          .slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            appearance: none;
-            width: 25px;
-            height: 50px;
-            background: #A000A0;
-            cursor: pointer;
-          }
-          .slider::-moz-range-thumb {
-            width: 25px;
-            height: 50px;
-            background: #A000A0;
-            cursor: pointer;
-          }
-          .button {
-            background-color: #00F0F0;
-            border: none;
-            color: black;
-            padding: 15px 32px;
-            text-align: center;
-            text-decoration: none;
-            display: inline-block;
-            font-size: 32px;
-            border: 2px solid #4CAF50;
-          }
-          .row {
-              display : flex;
-              align-items : center;
-              margin-bottom: 15px;
-          }
-          .color-box {
-            width: 200px;
-            height:100px;
-            background-color: #F0F0F0;
-          }
-          #potProgress {
-            width: 100%;
-            background-color: #F0F0F0;
-          }
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>MQTT</title>
+  <style>
+    body {background:rgb(255,255,196);}
+    .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
+    textarea.emscripten { font-family: monospace; font-size: 18px; width: 100%; overflow-x: scroll;
+      white-space: pre; background: black; color: rgb(0,255,0);}
+    .button {
+      background-color: #04AA6D;  border: none; color: white; padding: 15px 32px; text-align: center;
+      text-decoration: none; display: inline-block; font-size: 48px; width: 100%; }
+  </style>
+  <script src="https://unpkg.com/mqtt/dist/mqtt.min.js"></script>
+</head>
+  <body>
+    <h1>Dálkové ovládání chaty.</h1>
+    <table>
+    <tr>
+      <td><div><label for="pass">Password : </label><input type="password" id="pass" name="password" minlength="8" required /><div>
+      </td><td><button class="button" id="ConnButton" onClick="Connection();">Connect</button></td>
+    <tr>
+    <tr>
+      <td><button class="button" id="MainButton" onClick="chPower(Main);" disabled>Hlavní vypínač</button></td>
+      <td><button class="button" id="RefrButton" onClick="chPower(Refr);" disabled>Lednice</button></td>
+    </tr>
+    <tr>
+    <td colspan=2><textarea class="emscripten" id="output" rows="10" spellcheck="false"></textarea></td>
+    </tr>
+    </table>
+    <script>
+    const onColor = '#00ff00';
+    const ofColor = '#ff0000';
+    const TopElem = 'chata/';
+    const InpTops = TopElem + 'status/';
+    const OutTops = TopElem + 'command/';
+    const ConnBtn = document.getElementById('ConnButton');
+    const TextOut = document.getElementById('output');
+    const url = 'wss://8d84362aa39a41c38a465a2edd8bcae4.s1.eu.hivemq.cloud:8884/mqtt'
+    // Create an MQTT client instance
+    const options = {
+      // Clean session
+      clean: true,
+      connectTimeout: 4000,
+      // Authentication
+      clientId: 'js-' + Date.now().toString(16) + '-client',
+      username: 'Kizarm',
+      password: '********',
+    }
+    var Connected  = false;
+    var Main = {status:false, btn:document.getElementById('MainButton'), tstr:'mainpw'};
+    var Refr = {status:false, btn:document.getElementById('RefrButton'), tstr:'refrig'};
+    var client;
+    function ManagePwd () {
+      const pass = localStorage.getItem('mqtt_password');
+      if  (!pass)  localStorage.setItem('mqtt_password', document.getElementById('pass').value);
+      else  document.getElementById('pass').value = pass;
+    };
 
-          #potBar {
-            width: 100%;
-            height: 30px;
-            background-color: #FF0000;
-            text-align: center;
-            line-height: 30px;
-            color: white;
+    ManagePwd ();
+    function Connection() {
+      if (!mqtt) {
+        TextOut.value = 'MQTT not supported !!!\n';
+        return;
+      }
+      options.password = document.getElementById('pass').value;
+      // console.log (options);
+      if (Connected) {
+        Connected = false;
+        client.end()
+        ConnBtn.innerHTML = 'Connect';
+        Main.btn.disabled = true;
+        Refr.btn.disabled = true;
+        TextOut.value = "Disconnected\n"
+      } else {
+        client = mqtt.connect(url, options)
+        client.on('connect', function () {
+          Connected = true;
+          TextOut.value += 'Connected to ' + url + '\n';
+          ConnBtn.innerHTML = 'Disconnect';
+          Main.btn.disabled = false;
+          Refr.btn.disabled = false;
+          // Subscribe to a topic
+          client.subscribe(InpTops + '#', function (err) {
+            if (!err) {
+              // Publish a message to a topic
+              client.publish(OutTops, '???');
+            }
+          })
+        })
+        function ChangeStatus (relay, tmsg) {
+          if (tmsg === '0') {
+            relay.status = false;
+            relay.btn.style.background = ofColor;
+          } else {
+            relay.status = true;
+            relay.btn.style.background = onColor;
           }
-        </style>
-    </head>
-    <body>
-        <h1>WebSocket pwm - adc</h1>
-        <p>
-            Host: <input id="webSocketHost" type="text" value="localhost:1234"/>
-        </p>
-        <p>
-            <button class="button" id="connectButton" onClick="initWebSocket();">Connect</button>
-            <button class="button" id="disconnectButton" onClick="stopWebSocket();" disabled>Disconnect</button>
-            <button class="button" onClick="checkSocket();">State</button>
-        </p>
-        <p id="debugText">DEBUG LINE</p>
-        <p>
-          <div id="potProgress">
-            <div id="potBar">100%</div>
-          </div>
-          <div class="slidecontainer">
-            <input type="range" min="1" max="100" value="0" class="slider" id="led1Range" oninput="sendMessage(0);" disabled>
-            <input type="range" min="1" max="100" value="0" class="slider" id="led2Range" oninput="sendMessage(1);" disabled>
-          </div>
-
-          <div class="row">
-            <div class="color-box" id="in0">0</div>
-            <div class="color-box" id="in1">1</div>
-          </div>
-        </p>
-
-        <script type="text/javascript">
-            function js_get_id () {
-              var host;
-              const locate = window.location;
-              if (locate.protocol == 'file:') host = 'ws://unknown';
-              else if (locate.port) host = 'ws://' + locate.hostname + ':' + (parseInt(locate.port, 10) + 1);
-              else host = 'ws://' + locate.hostname + '/ws';
-              console.log ('host is: ' + host);
-              return host;
-            }
-            const server_id = document.getElementById ('webSocketHost');
-            server_id.value = js_get_id ();
-            var debugText = document.getElementById("debugText");
-            function debug (message) {
-                debugText.innerHTML = message
-            }
-
-            function sendMessage (n) {
-                var nval = 0;
-                switch (n) {
-                  case 0: nval = document.getElementById("led1Range").value; break;
-                  case 1: nval = document.getElementById("led2Range").value; break;
-                  default: return;
-                }
-                if ( websocket != null ) {
-                  var strToSend = n + '/' + nval;
-                  websocket.send (strToSend);
-                }
-            }
-            function setPotValue (val) {
-              potenciometer = document.getElementById ('potBar');
-              const percent = val + '%';
-              potenciometer.style.width = percent;
-              potenciometer.innerHTML   = percent;
-            }
-            function setButValue (id, val) {
-              const mbut = document.getElementById(id);
-              if (val) mbut.style.backgroundColor = '#00FF00';
-              else     mbut.style.backgroundColor = '#F0F0F0';
-            }
-            function setSldValue (id, val) {
-              const msld = document.getElementById(id);
-              msld.value = val;
-            }
-            var websocket = null;
-
-            function initWebSocket() {
-                try {
-                    if (typeof MozWebSocket == 'function')
-                        WebSocket = MozWebSocket;
-                    if ( websocket && websocket.readyState == 1 )
-                        websocket.close();
-                    var wsUri = server_id.value;
-                    websocket = new WebSocket( wsUri );
-                    websocket.onopen = function (evt) {
-                        debug("CONNECTED");
-                        document.getElementById("connectButton").disabled = true;
-                        document.getElementById("disconnectButton").disabled = false;
-                        document.getElementById("led1Range").disabled = false;                        
-                        document.getElementById("led2Range").disabled = false;                        
-                    };
-                    websocket.onclose = function (evt) {
-                        debug("DISCONNECTED");
-                        document.getElementById("connectButton").disabled = false;
-                        document.getElementById("disconnectButton").disabled = true;
-                        document.getElementById("led1Range").disabled = true;
-                        document.getElementById("led2Range").disabled = true;
-                    };
-                    websocket.onmessage = function (evt) {
-                        // console.log (evt.data);
-                        var list = evt.data.split ('/');
-                        if (list.length != 2) return;
-                        var cmd = parseInt (list[0], 10);
-                        var val = parseInt (list[1], 10);
-                        switch (cmd) {
-                          case 0: setPotValue (val); break;
-                          case 1: setButValue ('in0', val); break;
-                          case 3: setButValue ('in1', val); break;
-                          case 4: setSldValue ('led1Range', val); break;
-                          case 5: setSldValue ('led2Range', val); break;
-                          default: break;
-                        }
-                    };
-                    websocket.onerror = function (evt) {
-                        debug('ERROR: ' + evt.data);
-                    };
-                } catch (exception) {
-                    debug('ERROR: ' + exception);
-                }
-            }
-
-            function stopWebSocket() {
-                if (websocket)
-                    websocket.close();
-            }
-
-            function checkSocket() {
-                if (websocket != null) {
-                    var stateStr;
-                    switch (websocket.readyState) {
-                        case 0: {
-                            stateStr = "CONNECTING";
-                            break;
-                        }
-                        case 1: {
-                            stateStr = "OPEN";
-                            break;
-                        }
-                        case 2: {
-                            stateStr = "CLOSING";
-                            break;
-                        }
-                        case 3: {
-                            stateStr = "CLOSED";
-                            break;
-                        }
-                        default: {
-                            stateStr = "UNKNOW";
-                            break;
-                        }
-                    }
-                    debug("WebSocket state = " + websocket.readyState + " ( " + stateStr + " )");
-                } else {
-                    debug("WebSocket is null");
-                }
-            }
-        </script>
-    </body>
+        }
+        // Receive messages
+        client.on('message', function (topic, message) {
+          const tstr = topic.toString();
+          const tmsg = message.toString();
+          // message is Buffer
+          TextOut.value += tstr + ' : ' + tmsg + '\n';
+          if        (tstr === InpTops + Main.tstr) {
+            ChangeStatus (Main, tmsg);
+          } else if (tstr === InpTops + Refr.tstr) {
+            ChangeStatus (Refr, tmsg);
+          }
+        })
+      }
+    }
+    function chPower (relay) {
+      if (relay.status) {
+        relay.status = false;
+        client.publish(OutTops + relay.tstr, '0');
+        TextOut.value += relay.tstr + ' off\n';
+      } else {
+        relay.status = true;
+        client.publish(OutTops + relay.tstr, '1');
+        TextOut.value += relay.tstr + ' on\n';
+      }
+    }
+    </script>
+  </body
 </html>
+
