<div class="tabs">
  <div class="tab-container">
    <div id="tab1" class="tab"> 
      <a href="#tab1">M/E1</a>
      <div class="tab-content">
             
             <div>
      <p class="info"><span id="studio_status"></span></p>
      <div class="pgm_pvw_bars" id="pgm_pvw_bars" style="display: inline-block;">
        <h1 class="neonText" id="pgm_title">Program</h1>
        <div id="lesboutons_PGM"><h2 class="alerte">Error : not connected to OBS<br/><h3 class="alerte"></h3>
        <form class="alerte" id="connect_form" action="">
          <fieldset style="    line-height: 0.2;">
          <legend>Connection:</legend>
          <label style="display:none"for="ip">IP address :</label>
          <input style="display:none"type="text" name="ip" value="127.0.0.1" placeholder="Ex: 192.168.1.17"><br><br>
          <label style="display:none"for="port">Port :</label>
          <input style="display:none"type="text" name="port" value="4444" placeholder="Ex: 4444"><br><br>
          <label style="display:none"for="password">Password :</label>
          <input style="display:none"type="text" name="password" value="123456" placeholder="Ex: myp@pssw0rd"><br><br>
          <label style="display:none" for="limit">Max amount of scenes ?</label>
          <input style="display:none" type="number" name="limit" value="9" min="0" max="64"><br><br>
          <label style="display:none" for="margin">Margin between buttons ?</label>
          <input style="display:none" type="number" name="margin" value="5" min="0" max="9999"><br><br>
          <label style="display:none" for="nosleep">Nosleep ?</label>
          <input style="display:none" type="checkbox" name="nosleep"><br><br>
          <label style="display:none" for="numpad"></label>
          <input style="display:none" type="checkbox" name="numpad"><br><br>
          <br>
          <input style="padding: 10px;" type="submit" value="Connect to OBS">
          </fieldset>
        </form>
        </h2></div>
        <h1 class="neonText" id="pvw_title">Preview</h1>
        <div id="lesboutons_PVW"></div>
       

        


      </div>
      <div class="transition">
        <div style="display:flex;" ><input onclick="fullscreen(this);" style="height: 35px;clear:both; margin: 0.3rem; border-radius: 10px; background-color: rgb(45,45,45); color: rgb(200,200,200);" type='submit' name='fullscreen' value='fullscreen'/>
        <h1 style="display: flex;align-items: center;">Transition <input class="transition_input" type="number" name="" id="transition_input" value="500" min="0" max="10000"/></h1>
      </div>
        <div id="lesboutons_TRANS">
          <div id="trans_animation_parent">
            <div id="trans_animation_child"></div>
          </div>
        </div>
      </div>


    </div>
   
    <!--<h1 id="debug" style="font-size: 1rem;">debug</h1>-->
    <script type="text/javascript" src="NoSleep.min.js"></script>
    <script type="text/javascript" src="obsvisionmixer.js"></script>





      </div>
    </div>

    <div id="tab2" class="tab">
      <a href="#tab2">PIC 1</a>
      <div class="tab-content">
        <h1 id="pvw_title"></h1>
        <div class="rangeeaux" id="lesboutons_AUX"><p id='enableaux'>PIC 1 -line1</p></div>
        <h1 id="pvw_title"></h1>
        <div class="rangeeaux" id="lesboutons_AUX2"><p id='enableaux'>PIC 1 -line2</p></div>
        
      </div>
    </div> 
    <div id="tab3" class="tab">
      <a href="#tab3">PIC 2</a>
      <div class="tab-content">
        <h1 id="pvw_title"></h1>
        <div class="rangeeaux" id="lesboutons_AUX3"><p id='enableaux'>PIC 2 -line1</p></div>
        <h1 id="pvw_title"></h1>
        <div class="rangeeaux" id="lesboutons_AUX4"><p id='enableaux'>PIC 2 -line2</p></div>

      
      </div> 
    </div> 
    <div id="tab4" class="tab">
      <a href="#tab4">PIC 3</a>
      <div class="tab-content">
      
        <h1 id="pvw_title"></h1>
        <div class="rangeeaux" id="lesboutons_AUX5"><p id='enableaux'>BANNER SELECCION</p></div>
        <h1 id="pvw_title"></h1>
        <div class="rangeeaux" id="lesboutons_AUX6"><p id='enableaux'>BANNER SELECCION2</p></div>
      
      </div> 
    </div>
    <div id="tab5" class="tab">
      <a href="#tab5">KEY</a>
      <div class="tab-content">
      
        <h1 id="pvw_title"></h1>
        <div class="rangeeaux" id="lesboutons_AUX7"><p id='enableaux'>BANNER SELECCION</p></div>
   
      
      </div> 
    </div>
    <div id="tab6" class="tab">
      <a href="#tab6">AUX1</a>
      <div class="tab-content">
     
        <h1 id="pvw_title"></h1>
        <div class="rangeeaux" id="lesboutons_AUX8"><p id='enableaux'>BANNER SELECCION2</p></div>
      
      </div> 
    </div>
    
  </div>
</div>