diff options
Diffstat (limited to 'artifacts/ui-demo.html')
| -rw-r--r-- | artifacts/ui-demo.html | 210 |
1 files changed, 0 insertions, 210 deletions
diff --git a/artifacts/ui-demo.html b/artifacts/ui-demo.html deleted file mode 100644 index 09dc9cb..0000000 --- a/artifacts/ui-demo.html +++ /dev/null @@ -1,210 +0,0 @@ -<!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> |