path: root/artifacts/ui-demo.html



<!DOCTYPE html>
<html>
  <head>
    <style>
      :root {
        --balboa: #195970;
      }

      body {
        margin: 0;
        padding: 0;
      }

      .model::before {
        content: "➥";
      }

      .topbar {
        background-color: var(--balboa);
        box-shadow: 0 0 0.5em black;
        position: relative;
        height: 3em;
        z-index: 1;
      }

      .topbar ul {
        margin: 0;
        padding: 0;
        overflow: hidden;
      }

      .topbar li {
        float: left;
        display: block;
        padding: 14px 14px;
      }

      .topbar li.right {
        float: right;
      }

      .topbar li a {
        color: white;
        text-decoration: none;
      }

      .sidebar {
        background-color: var(--balboa);
        box-shadow: inset -0.5em 0 0.5em -0.5em black;
        z-index: -1;
        position: fixed;
        top: 3em;
        left: 0;
        width: 20%;
        height: 100%;
        transition: 0.25s;
      }

      .sidebar button {
        display: block;
        background: none;
        border: 0 none;
        cursor: pointer;
        color: white;
      }

      .model {
        margin-left: 20px;
      }

      .model::before {
        content: "➥";
      }

      #hidden:target .sidebar {
        left: -20%;
      }

      .menuToggle a.openMenu {
        display: none;
      }

      #hidden:target .menuToggle a.closeMenu {
        display: none;
      }

      #hidden:target .menuToggle a.openMenu {
        display: block;
      }

      #hidden:target section {
        margin-left: 0;
      }

      .catalogTable {
        width: 100%;
        border-collapse: collapse;
      }
      .catalogTable td,
      .catalogTable th {
        padding: 0.5em;
      }

      .catalogTable tr:nth-child(even) {
        background-color: #f2f2f2;
      }
      .catalogTable tr:hover {
        background-color: #ddd;
      }
      .catalogTable th {
        padding-top: 12px;
        padding-bottom: 12px;
        text-align: left;
        background-color: var(--balboa);
        color: white;
      }

      input[type="search"] {
        text-align: center;
        width: 100%;
      }

      section {
        margin-left: 20%;
        transition: margin-left 0.25s;
        padding-top: 2em;
        padding-left: 2em;
        padding-right: 2em;
      }
    </style>
  </head>
  <body id="hidden">
    <nav class="topbar">
      <ul>
        <li>
          <div class="menuToggle">
            <a class="openMenu" href="#"
              ><span
                ><svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
                  <path
                    fill="currentColor"
                    d="M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z"
                  /></svg></span
            ></a>
            <a class="closeMenu" href="#hidden"
              ><span
                ><svg style="width: 24px; height: 24px" viewBox="0 0 24 24">
                  <path
                    fill="currentColor"
                    d="M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61M3,6H16V8H3V6M3,13V11H13V13H3M3,18V16H16V18H3Z"
                  /></svg></span
            ></a>
          </div>
        </li>
        <li><a href="#">Index</a></li>
        <li><a href="#">Parts</a></li>
        <li><a href="#">Cars</a></li>
        <li><a href="#">Suggestions</a></li>
        <li><a href="#">About</a></li>
        <li class="right"><a href="#">Login</a></li>
      </ul>
    </nav>

    <nav class="sidebar">
      {{#each makes}}
      <form action="/parts">
        {{#if (eq this ../selected_make)}}
        <button disabled class="make">
          {{ this }}
        </button>
        <input type="hidden" name="make" value="{{ ../selected_make }}" />
        {{#each ../models}}
        {{#if (eq this ../../selected_model)}}
        <button disabled class="model">{{ this }}</button>
        {{else}}
        <button class="model" name="model" value="{{ this }}">
          {{ this }}
        </button>
        {{/if}}
        {{else}}
        <button disabled class="model">(No models found)</button>
        {{/each}}
        {{else}}
        <button class="make" name="make" value="{{ this }}">{{ this }}</button>
        {{/if}}
      </form>
      {{else}}
      No makes found.
      {{/each}}
    </nav>

    <section>
      <form>
        <input autofocus type="search" placeholder="hit enter to search" />
      </form>
    </section>

    <section>
      <table class="catalogTable">
        <tbody>
          {{#each parts}}
          <tr>
            <td>{{ this }}</td>
          </tr>
          {{/each}}
        </tbody>
      </table>
    </section>
  </body>
</html>