add ofa.js demo

netbuffer · Nov 8, 2023 · d3c3ac2 · d3c3ac2
1 parent bcde079
commit d3c3ac2
Show file tree

Hide file tree

Showing 7 changed files with 189 additions and 0 deletions.
diff --git a/ofa.js/app-config.js b/ofa.js/app-config.js
@@ -0,0 +1,45 @@
+export const home = "./pages/home.html";
+
+export const loading = () => {
+  const loadingEl = $({
+    tag: "div",
+    css: {
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      zIndex: 1000,
+      left: 0,
+      top: 0,
+    },
+    html: `
+          <div style="transition: all 10s cubic-bezier(0, 0, 0.22, 0.84) 0s; height: 2px;width: 0;background-color: rgb(0, 161, 46);"></div>
+        `,
+  });
+
+  setTimeout(() => (loadingEl[0].style.width = "98%"));
+
+  loadingEl.remove = () => {
+    loadingEl[0].style["transition-duration"] = "0.1s";
+    loadingEl[0].style.width = "100%";
+    setTimeout(() => {
+      $.fn.remove.call(loadingEl);
+    }, 200);
+  };
+
+  return loadingEl;
+};
+
+export const pageAnime = {
+  current: {
+    opacity: 1,
+    transform: "translate(0, 0)",
+  },
+  next: {
+    opacity: 0,
+    transform: "translate(30px, 0)",
+  },
+  previous: {
+    opacity: 0,
+    transform: "translate(-30px, 0)",
+  },
+};
diff --git a/ofa.js/images/logo.svg b/ofa.js/images/logo.svg
diff --git a/ofa.js/index.html b/ofa.js/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>ofa.js app</title>
+    <script src="ofa.4.3.20.min.js"></script>
+    <script src="router.4.3.20.min.js"></script>
+    <style>
+      html {
+        font: 400 1em/1.8 -apple-system, BlinkMacSystemFont, Segoe UI,
+          Microsoft Yahei, Helvetica, Arial, sans-serif, Apple Color Emoji,
+          Segoe UI Emoji;
+        -webkit-font-smoothing: antialiased;
+
+        color: #474747;
+      }
+    </style>
+  </head>
+  <body>
+    <o-router fix-body>
+      <o-app src="./app-config.js"></o-app>
+    </o-router>
+  </body>
+</html>
diff --git a/ofa.js/ofa.4.3.20.min.js b/ofa.js/ofa.4.3.20.min.js
diff --git a/ofa.js/pages/home.html b/ofa.js/pages/home.html
@@ -0,0 +1,59 @@
+<template page>
+  <l-m
+    src="https://kirakiray.github.io/ofa-v4-docs/docs/publics/comps/punch-logo.html"
+  ></l-m>
+  <style>
+    .container {
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+    }
+
+    .logo {
+      margin-top: 100px;
+      width: 100px;
+    }
+
+    .links a {
+      margin: 8px;
+    }
+
+    h2 {
+      margin: 32px 0 16px;
+    }
+  </style>
+  <div class="container">
+    <img src="../images/logo.svg" class="logo" alt="logo" />
+    <h1>Welcome to ofa.js App</h1>
+    <h2>Usage Instructions</h2>
+    <div class="links">
+      <a href="./syntax/text.html" olink>Text Rendering</a>
+    </div>
+    <p>
+      For more usage instructions, please visit
+      <a href="https://ofajs.com/" target="_blank"
+        >the official ofa.js documentation</a
+      >
+    </p>
+    <h2>Official Links</h2>
+    <div class="links">
+      <a href="https://ofajs.com/" target="_blank">Official Website</a>
+      <a href="https://github.com/kirakiray/ofa.js" target="_blank"
+        >ofa.js GitHub Repository</a
+      >
+      <a href="https://github.com/kirakiray/ofa.js/issues" target="_blank"
+        >Submit an Issue</a
+      >
+    </div>
+  </div>
+  <script>
+    export default {
+      ready() {
+        $("title").text = "home";
+      },
+    };
+  </script>
+</template>
diff --git a/ofa.js/pages/syntax/text.html b/ofa.js/pages/syntax/text.html
@@ -0,0 +1,22 @@
+<template page>
+  <style>
+    .container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 100%;
+      font-size: 20px;
+    }
+  </style>
+  <div class="container">Rendered Text: {{txt}}</div>
+  <script>
+    export default {
+      data: {
+        txt: "I am text",
+      },
+      ready() {
+        $("title").text = "txt";
+      },
+    };
+  </script>
+</template>
diff --git a/ofa.js/router.4.3.20.min.js b/ofa.js/router.4.3.20.min.js