feat: add ui examples

source/screens/demo/examples/ui/new.njk

@@ -0,0 +1,81 @@
+---
+title: New
+tags:
+  - demoExample
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_new" %}
+
+{% extends "demo/_app.njk" %}
+{% import "demo/macros/_states.njk" as state %}
+
+{% block title %}{{ title }}
+{% endblock %}
+
+{% block links %}
+  {{ super() }}
+  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
+{% endblock %}
+
+{% block head %}
+  {{ super() }}
+{% endblock %}
+
+{% block body %}
+  <div id="top">
+    <h1 class="brand">
+      <a href="#">{{ hippie.brand | upper }}</a>
+    </h1>
+    <nav>
+      <ul>
+        {% for link in new %}
+          <li>
+            <a href="{{ link.href }}">{{ link.text }}</a>
+          </li>
+        {% endfor %}
+      </ul>
+    </nav>
+    <div class="state">
+      <p>{{ state.coord("log")}}
+        /
+        {{ state.date("date")}}
+        /
+        {{ state.time("time")}}</p>
+    </div>
+  </div>
+  <div class="container">
+    <div class="area menu">
+      <nav class="nav_horizontal">
+        <ul>
+          <li>
+            <a href="" class="a_button">Func 1</a>
+          </li>
+          <li>
+            <a href="" class="a_button">Func 2</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+    <div class="area grid">
+      <div class="item">1</div>
+      <div class="item">2</div>
+      <div class="item">3</div>
+      <div class="item">4</div>
+    </div>
+  </div>
+{% endblock %}
+
+{%- block script %}
+  {{ super() }}
+  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
+  <script src="{{ pageBase }}js/app.js"></script>
+  <script>
+    let clock = new Clock('time');
+
+    document.addEventListener('mousemove', (event) => {
+      document.getElementById('log')
+      .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
+    });
+  </script>
+{% endblock %}