diff options
| -rw-r--r-- | artifacts/layout.html | 28 | ||||
| -rw-r--r-- | artifacts/ui-demo.html | 117 |
2 files changed, 145 insertions, 0 deletions
diff --git a/artifacts/layout.html b/artifacts/layout.html new file mode 100644 index 0000000..a06d6d0 --- /dev/null +++ b/artifacts/layout.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> + <body> + <ul> + <li>/: root, filter, search</li> + <li>/parts: raw parts table</li> + <li>/parts.csv: CSV download of parts table</li> + <li>/cars: raw cars table</li> + <li>/cars.csv: CSV download of cars table</li> + <li>/suggestions: suggestion input form and appoval list</li> + <li> + /login: all the logins + <ul> + <li>/login/facebook</li> + <li>/login/google</li> + <li>/login/microsoft</li> + <li>/login/gitea</li> + </ul> + </li> + <li>/api/v1: JSON API</li> + <ul> + <li>/api/v1/parts</li> + <li>/api/v1/cars</li> + <li>/api/v1/suggestions</li> + </ul> + </ul> + </body> +</html> diff --git a/artifacts/ui-demo.html b/artifacts/ui-demo.html new file mode 100644 index 0000000..1f85f8f --- /dev/null +++ b/artifacts/ui-demo.html @@ -0,0 +1,117 @@ +<!DOCTYPE html> +<html> + <head> + <style> + body { + margin: 0; + padding: 0; + } + nav { + background-color: cadetblue; + margin: 0; + padding: 0; + height: 3em; + } + nav ul { + margin: 0; + padding: 0; + list-style-type: none; + overflow: hidden; + } + .navItem { + float: left; + display: block; + padding: 14px 14px; + } + .navItem a { + color: white; + } + nav input { + right: 100%; + } + + .sidebar { + background-color: cadetblue; + position: fixed; + top: 3em; + left: -250px; + width: 250px; + height: 100%; + transition: 0.25s; + } + #menu:target .sidebar { + left: 0; + } + + .menuTogglePrimary a.closeMenu { + display: none; + } + #menu:target .menuTogglePrimary a.closeMenu { + display: block; + } + + #menu:target .menuTogglePrimary a.openMenu { + display: none; + } + + .content { + transition: margin-left 0.25s; + } + #menu:target .content { + margin-left: 250px; + } + </style> + </head> + <body id="menu"> + <nav> + <div class="menuContainer"> + <ul> + <li class="navItem"> + <div class="menuTogglePrimary"> + <a class="openMenu" href="#menu" + ><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="#" + ><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> + + <div class="sidebar"> + <ul> + <li> + <a href="#menu">Hudson</a> + <ul> + <li><a href="#menu">Hornet</a></li> + </ul> + </li> + <li><a href="#menu">Essex</a></li> + <li><a href="#menu">Terraplane</a></li> + </ul> + </div> + </li> + <li class="navItem"><a href="#">Catalog</a></li> + <li class="navItem"><a href="#">Parts List</a></li> + <li class="navItem"><a href="#">Cars List</a></li> + <li class="navItem"><a href="#">Suggestions</a></li> + <li class="navItem"><a href="#">About</a></li> + <li class="navItem"><a href="#">Login</a></li> + </ul> + </div> + </nav> + + <div class="content"> + <input type="search" placeholder="search" /> + <p>this is the datas</p> + </div> + </body> +</html> |