@homebridge-plugins/homebridge-tado/homebridge-ui/public/index.html

Homebridge plugin for controlling tado° devices.

<link rel="stylesheet" href="css/style.css">

<!-- header -->
<div id="header" style="display:none; height: 50px;" class="w-100 p-0 m-0">
  <div class="row m-0">
    <div class="col-2 pl-1">
      <button type="submit" class="btn btn-elegant back float-left">
        <i class="fa fa-arrow-left" aria-hidden="true"></i>
      </button>
    </div>
    <div class="col-10 pr-1">
      <button id="refreshDevice" type="submit" class="btn btn-primary float-right">
        <i class="fas fa-sync-alt"></i>
      </button>
      <button id="removeDevice" type="submit" class="btn btn-danger float-right">
        <i class="fa fa-trash" aria-hidden="true"></i>
      </button>
    </div>
  </div>
</div>

<!-- header old schema -->
<div id="headerOld" style="display:none; height: 50px;" class="w-100 p-0 m-0">
  <button type="submit" class="btn btn-elegant back float-left">
    <i class="fa fa-arrow-left" aria-hidden="true"></i>
  </button>
</div>

<div id="main" class="card card-body pb-5">

  <!-- not supported version -->
  <div id="notSupported" style="display: none;" class="container text-center">
    <h6 class="m-0 p-0">Custom UI cannot be displayed. The used Config UI X version is not supported!</h6>
  </div>

  <!-- isConfigured -->
  <div id="isConfigured" style="display:none;">
    <button type="submit" class="btn btn-elegant oldConfig" style="position: absolute;">
      <i class="fas fa-cogs" aria-hidden="true"></i>
    </button>
    <img src="images/tado_logo.png" alt="tado meets Homebridge" width="150px" class="center-it tadoLogo">
    <h3 class="text-center"><span style="font-size: 20px">Welcome to</span> <br> <b style="font-weight: 800;">Homebridge
        tado</b></h3>
    <h6 class="text-center">Homebridge plugin for tado devices</h6>
    <div class="container mt-4" style="max-width: 360px;">
      <div class="form-row">
        <div class="col-10">
          <select class="custom-select" id="deviceSelect"></select>
        </div>
        <div class="col-2">
          <button id="editDevice" type="submit" class="btn btn-elegant m-0">
            <i class="fas fa-edit"></i>
          </button>
        </div>
      </div>
      <div class="d-flex justify-content-center mt-4">
        <a href="#" id="addDevice"
          class="d-flex justify-content-center align-items-center btn-primary addBtn text-decoration-none">
          <i class="fas fa-plus text-white"></i>
        </a>
        <a href="#" id="reSync"
          class="d-flex justify-content-center align-items-center btn-secondary addBtn text-decoration-none ml-3">
          <i class="fas fa-sync"></i>
        </a>
      </div>
    </div>
  </div>

  <!-- notConfigured -->
  <div id="notConfigured" style="display:none;">
    <button type="submit" class="btn btn-elegant oldConfig" style="position: absolute;">
      <i class="fas fa-cogs" aria-hidden="true"></i>
    </button>
    <img src="images/tado_logo.png" alt="tado meets Homebridge" width="150px" class="center-it tadoLogo">
    <h3 class="text-center">Welcome to <br> <b style="font-weight: 800;">Homebridge tado</b></h3>
    <h6 class="text-center">Homebridge plugin for tado devices</h6>
    <button id="start" type="submit" class="btn btn-primary center-it mt-3">Start</button>
  </div>

  <!-- configureDevice -->
  <div id="configureDevice" style="display:none;">
    <button type="submit" class="btn btn-elegant back" style="position: absolute;">
      <i class="fa fa-arrow-left" aria-hidden="true"></i>
    </button>
    <img src="images/tado_logo.png" alt="tado meets Homebridge" width="150px" class="center-it mt-4 tadoLogo">
    <h6 class="text-center">To start the process, we need to authenticate with the tado account of the home you want to
      add to Homebridge.<br>Please fill out all marked fields:</h6>
    <div class="container mt-5">
      <div class="form-group">
        <label for="homeUsername">Username<span class="text-danger">*</span></label>
        <input type="text" class="form-control" id="homeUsername" placeholder="your-tado@mail.com">
        <label for="homeTadoApiUrl">tado API URL (optional)</label>
        <input type="text" class="form-control" id="homeTadoApiUrl">
        <label for="homeSkipAuth">Skip Authentication (optional)</label>
        <input type="checkbox" class="form-checkbox" id="homeSkipAuth">
      </div>
      <button id="auth" type="submit" class="btn btn-primary float-right mt-3 mr-0">Next</button>
    </div>
  </div>

  <!-- fetchDevices -->
  <div id="fetchDevices" style="display:none;">
    <img src="images/tado_logo.png" alt="tado meets Homebridge" width="150px" class="center-it mt-2 tadoLogo">
    <h6 class="text-center">Devices are being searched.<br>Please follow the instructions below and be patient for a
      moment.</h6>
    <h6 class="text-center" id="authenticationInstructions" style="display:none;font-weight:bold;"></h6>
    <div id="fetchDevicesBar" class="mt-5"></div>
  </div>

</div>

<!-- Modules -->
<script type="text/javascript" src="js/modules/jquery.min.js"></script>
<script type="text/javascript" src="js/modules/progressbar.min.js"></script>
<script type="text/javascript" src="js/modules/compareVersions.min.js"></script>

<!-- Custom Schema -->
<script type="text/javascript" src="js/schema.js?v=0.0.167"></script>

<!-- Progress Bars -->
<script type="text/javascript" src="js/progressbars.js?v=0.0.167"></script>

<!-- Main -->
<script type="text/javascript" src="js/main.js?v=0.0.167"></script>