<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .p_m_container {
      width: 100%;
      height: 800px;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }

    .tab-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
    }

    .tab-wrapper .tab-radio {
      display: none;
    }

    .tab-handler {
      cursor: pointer;
      position: relative;
      z-index: 2;
      display: block;
      float: left;
      height: 30px;
      padding: 0 20px;
      background-color: #18427394;
      font-size: 16px;
      line-height: 30px;
      transition: 0.3s;
      transform: scale(0.9);
      margin-left: 15px;
    }

    .tab-radio:checked + .tab-handler {
      color: #fff;
      background-color: #e74c3c;
      transform: scale(1);
    }

    .tab-radio:checked + .tab-handler + .tab-content {
      visibility: visible;
      opacity: 1;
      transform: scale(1);
    }

    .tab-wrapper .tab-content {
      visibility: hidden;
      position: absolute;
      top: 30px;
      left: 0;
      right: 0;
      width: 100%;
      color: #999;
      background-color: #fff1ee;
      bottom: 0;
      font-size: 14px;
      line-height: 1.618em;
      opacity: 0;
      transition: transform 0.5s, opacity 0.7s;
      transform: translateY(20px);
      overflow-y: auto;
    }
  </style>
  <body>
    <div class="p_m_container">
      <div class="tab-wrapper">
        <!--tab section 1-->
        <input
          type="radio"
          name="tab-radio"
          class="tab-radio"
          id="tab-radio-1"
          checked
        />
        <label for="tab-radio-1" class="tab-handler tab-handler-1"
          >tava</label
        >

        <div class="tab-content tab-content-1">
          
           
<pre id="log"></pre>
        </div>
       
        <!--tab section 2-->
        <input
          type="radio"
          name="tab-radio"
          class="tab-radio"
          id="tab-radio-2"
        />
        <label for="tab-radio-2" class="tab-handler tab-handler-2"
          >tafvab</label
        >
        <div class="tab-content tab-content-2">2222222</div>
        <!--tab section 3-->
        <input
          type="radio"
          name="tab-radio"
          class="tab-radio"
          id="tab-radio-3"
        />
        <label for="tab-radio-3" class="tab-handler tab-handler-3"
          >tabdddda</label
        >
        <div class="tab-content tab-content-3">333333333333</div>
      
      
        
      </div>
    </div>
  </body>
</html>




<script>
  // helper function: log message to screen
  function log(msg) {
    document.getElementById('log').textContent += msg + '\n';
  }

  // setup websocket with callbacks
  var ws = new WebSocket('ws://192.168.180.206:9988/');
  ws.onopen = function() {
    log('CONNECT');
  };
  ws.onclose = function() {
    log('DISCONNECT');
  };
  ws.onmessage = function(event) {
    log('MESSAGE: ' + event.data);
  };
</script>