Example GUI configuration for NetJets Client

index.html

<navbar>
  <nav-item img="img/lighting.png" url="/" />
</navbar>
<page title="Lighting" url="/" default>
  <row>
    <column width="7" mobile-width="12" class="quasar">
      <row>
        <column width="6">
          <h2>Wash</h2>
          <on-off id="1" default="off" />
        </column>
        <column width="6"><intensity-slider id="1" default="0" /></column>
      </row>
      <row>
        <color-slider id="1" default="0" />
        <white-slider id="1" default="0" />
      </row>
    </column>
    <column width="5" mobile-width="12" class="panel">
      <row>
        <column width="6">
          <scene-button script="1">Diamond</scene-button>
          <scene-button script="2">Theater</scene-button>
          <scene-button script="3">Office</scene-button>
          <scene-button script="4">Horizon</scene-button>
          <scene-button script="5">Sunrise</scene-button>
        </column>
        <column width="6">
          <scene-button script="6">Crystal</scene-button>
          <scene-button script="6">Event</scene-button>
          <scene-button script="6">Platinum</scene-button>
          <scene-button script="6">Aurora</scene-button>
          <scene-button script="6">Sunset</scene-button>
        </column>
      </row>
    </column>
  </row>
</page>
<style>
  .quasar, .panel {
    background-color: #555;
    border-radius: 4px;
  }
</style>