feat: add ui examples

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

@@ -0,0 +1,109 @@
+---
+title: Drag
+tags:
+  - demoExample
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_drag" %}
+
+{% extends "demo/_app.njk" %}
+
+{% 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="space"></div>
+{% endblock %}
+
+{%- block script %}
+  <script>
+// Get the space element
+const space = document.getElementById('space');
+
+// Create a new div element
+const newDiv = document.createElement('div');
+newDiv.style.position = 'absolute';
+newDiv.style.width = '100px';
+newDiv.style.height = '100px';
+newDiv.style.background = 'cyan';
+newDiv.style.cursor = 'move';
+
+// Add event listeners for dragging
+let isDown = false;
+let offset = [0, 0];
+
+newDiv.addEventListener('mousedown', (event) => {
+  if (event.button === 0) { // Left mouse button
+    isDown = true;
+    offset = [
+      newDiv.offsetLeft - event.clientX,
+      newDiv.offsetTop - event.clientY
+    ];
+  }
+});
+
+document.addEventListener('mouseup', () => {
+  isDown = false;
+});
+
+document.addEventListener('mousemove', (event) => {
+  if (isDown) {
+    const maxX = window.innerWidth - newDiv.offsetWidth;
+    const maxY = window.innerHeight - newDiv.offsetHeight;
+    let x = event.clientX + offset[0];
+    let y = event.clientY + offset[1];
+
+    // Boundary checks
+    if (x < 0) x = 0;
+    if (y < 0) y = 0;
+    if (x > maxX) x = maxX;
+    if (y > maxY) y = maxY;
+
+    newDiv.style.left = `${x}px`;
+    newDiv.style.top = `${y}px`;
+  }
+});
+
+// Save position and size
+const saveData = () => {
+  const data = {
+    x: newDiv.offsetLeft,
+    y: newDiv.offsetTop,
+    width: newDiv.offsetWidth,
+    height: newDiv.offsetHeight
+  };
+  // Save data to local storage or a database
+  localStorage.setItem('divData', JSON.stringify(data));
+};
+
+// Load saved data
+const loadData = () => {
+  const data = localStorage.getItem('divData');
+  if (data) {
+    const parsedData = JSON.parse(data);
+    newDiv.style.left = `${parsedData.x}px`;
+    newDiv.style.top = `${parsedData.y}px`;
+    newDiv.style.width = `${parsedData.width}px`;
+    newDiv.style.height = `${parsedData.height}px`;
+  }
+};
+
+// Add the new div to the space
+space.appendChild(newDiv);
+
+// Call the save function when the user stops dragging
+document.addEventListener('mouseup', saveData);
+
+// Load saved data on page load
+loadData();
+  </script>
+{% endblock %}

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 %}

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

@@ -0,0 +1,50 @@
+---
+title: Settings
+tags:
+  - demoExample
+  - ui
+---
+{% set pageId = page.fileSlug %}
+{% set pageClass = "h_full_view" %}
+{% set bodyClass = "body_ui" %}
+
+{% extends "demo/_app.njk" %}
+
+{% 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="frame" class="frame-flex">
+  <div class="title-bar">
+    <div>title-bar<button class="io_button">menu</button class="io_button"><button class="io_button">search</button class="io_button"></div>
+    <div><button class="io_button">minimize</button class="io_button"><button class="io_button">maximize</button class="io_button"><button class="io_button">close</button class="io_button"></div>
+  </div>
+  <main>
+    <aside class="left">aside
+    <nav>
+      <ul>
+        <li>setting</li>
+        <li>setting</li>
+      </ul>
+    </nav>
+    </aside>
+    <section class="bside">section</section>
+  </main>
+</div>
+{% endblock %}
+
+{%- block script %}
+  {{ super() }}
+  <script src="{{ pageBase }}js/app.js"></script>
+  <script>
+  </script>
+{% endblock %}