---
layout: page
---

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
<script src="{{ "/js/demo.js" | prepend: site.baseurl | prepend: site.url }}"></script>
<script src="{{ "/js/userale-local.js" | prepend: site.baseurl | prepend: site.url }}"></script>

<div class="ui container">

  <div class="ui large header">UserAle.js Demo!  Click around and see the logs you produce.</div>

  <div class="ui padded grid">

    <div class="six wide column">
      <div class="ui row segment">
        <div class="ui two column grid">
          <div class="column">
            <button class="ui brown fluid button">Button</button>
          </div>
          <div class="column">
            <button class="ui brown fluid button">Button</button>
          </div>
          <div class="column">
            <div class="ui checkbox">
              <input type="checkbox">
              <label>Checkbox</label>
            </div>
          </div>
          <div class="column">
            <div class="ui fluid selection dropdown">
              <input type="hidden">
              <i class="dropdown icon"></i>
              <div class="default text">Dropdown</div>
              <div class="menu">
                <div class="item" data-value="1">Option 1</div>
                <div class="item" data-value="2">Option 2</div>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="ui radio checkbox">
              <input type="radio" name="demo-checkbox">
              <label>Yes</label>
            </div>
          </div>
          <div class="column">
            <div class="ui radio checkbox">
              <input type="radio" name="demo-checkbox">
              <label>No</label>
            </div>
          </div>
        </div>
      </div>

      <div class="ui row segment">
        <div class="ui fluid input">
          <input type="text" placeholder="Text Input">
        </div>
        <div class="ui divider"></div>
        <div class="ui large star rating"></div>
      </div>

      <div class="ui row segment">
        <div class="ui fluid vertical secondary accordion menu">
          <div class="item">
            <a class="active title">
              <i class="dropdown icon"></i>
              Size
            </a>
            <div class="active content">
              <div class="ui form">
                <div class="grouped fields">
                  <div class="field">
                    <div class="ui radio checkbox">
                      <input type="radio" name="size" value="small">
                      <label>Small</label>
                    </div>
                  </div>
                  <div class="field">
                    <div class="ui radio checkbox">
                      <input type="radio" name="size" value="medium">
                      <label>Medium</label>
                    </div>
                  </div>
                  <div class="field">
                    <div class="ui radio checkbox">
                      <input type="radio" name="size" value="large">
                      <label>Large</label>
                    </div>
                  </div>
                  <div class="field">
                    <div class="ui radio checkbox">
                      <input type="radio" name="size" value="x-large">
                      <label>X-Large</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item">
            <a class="title">
              <i class="dropdown icon"></i>
              Colors
            </a>
            <div class="content">
              <div class="ui form">
                <div class="grouped fields">
                  <div class="field">
                    <div class="ui checkbox">
                      <input type="checkbox" name="small">
                      <label>Red</label>
                    </div>
                  </div>
                  <div class="field">
                    <div class="ui checkbox">
                      <input type="checkbox" name="medium">
                      <label>Orange</label>
                    </div>
                  </div>
                  <div class="field">
                    <div class="ui checkbox">
                      <input type="checkbox" name="large">
                      <label>Green</label>
                    </div>
                  </div>
                  <div class="field">
                    <div class="ui checkbox">
                      <input type="checkbox" name="x-large">
                      <label>Blue</label>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="ui row segment">
        <div id="map-example"></div>
      </div>

    </div>

    <div id="logs-context" class="ten wide column">
      <div id="logs" class="ui sticky segment">
        <div class="ui header">Logs</div>
        <div id="log-feed" class="ui feed basic segment">

        </div>
      </div>
    </div>

  </div>

</div>