Web Apps Launcher

gigamaster · Oct 28, 2024 · 6a03b70 · 6a03b70
1 parent 7f44bff
commit 6a03b70
Show file tree

Hide file tree

Showing 30 changed files with 3,374 additions and 3 deletions.
diff --git a/app/asset/app.js b/app/asset/app.js
@@ -92,7 +92,7 @@ document.addEventListener('alpine:init', () => {
     currentIndex: -1,
     init() {
       // Initialize data
-      fetch('./search.json')
+      fetch('https://gigamaster.github.io/codemo/asset/search.json')
         .then(res => res.json())
         .then(data => this.data = data.data);
     },

diff --git a/app/asset/launcher.json b/app/asset/launcher.json
@@ -0,0 +1,132 @@
+[
+  {
+    "id": 1,
+    "url": "https://gigamaster.github.io/codemo/web-app/dpaint/",
+    "name": "DPaint",
+    "author": "Author",
+    "desc": "Web app graphic image editor modeled after the legendary Deluxe Paint",
+    "cat": "Graphics",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/dpaint.webp"
+  },
+  {
+    "id": 2,
+    "url": "https://gigamaster.github.io/codemo/web-app/drawio/",
+    "name": "Draw.io",
+    "author": "Author",
+    "desc": "Web app to make flowcharts, process and network diagrams, org charts, UML, ER.",
+    "cat": "Diagram",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/drawio.webp"
+  },
+  {
+    "id": 3,
+    "url": "https://gigamaster.github.io/codemo/web-app/encrypt/",
+    "name": "Encrypt",
+    "author": "Author",
+    "desc": "Static HTML Encryption for public host",
+    "cat": "Security Privacy",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/encrypt.webp"
+  },
+  {
+    "id": 4,
+    "url": "https://gigamaster.github.io/codemo/web-app/erd-editor/",
+    "name": "ERD-editor",
+    "author": "Author",
+    "desc": "Entity-Relationship Diagram Editor",
+    "cat": "Database",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/erp-editor.webp"
+  },
+  {
+    "id": 5,
+    "url": "https://gigamaster.github.io/codemo/web-app/fuxa-hmi-scada/",
+    "name": "Fuxa",
+    "author": "Author",
+    "desc": "Web app SCADA/HMI/Dashboard to create modern process visualizations with individual designs",
+    "cat": "Dashboard",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/fuxa.webp"
+  },
+  {
+    "id": 6,
+    "url": "https://gigamaster.github.io/codemo/web-app/grapesjs/",
+    "name": "Grapesjs",
+    "author": "Author",
+    "desc": "Web app drag and drop website builder",
+    "cat": "Web Design",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/grapesjs.webp"
+  },
+  {
+    "id": 7,
+    "url": "https://gigamaster.github.io/codemo/web-app/graphite/",
+    "name": "Graphite",
+    "author": "Author",
+    "desc": "Web app to create, compose and edit vector images and graphics",
+    "cat": "Graphics",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/graphite.webp"
+  },
+  {
+    "id": 8,
+    "url": "https://gigamaster.github.io/codemo/web-app/livecodes/",
+    "name": "Livecodes",
+    "author": "Author",
+    "desc": "Web app code editor with support for 90+ languages & frameworks, embedded playgrounds and AI code assistant",
+    "cat": "Code Editor",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/livecodes.webp"
+  },
+  {
+    "id": 9,
+    "url": "https://gigamaster.github.io/codemo/web-app/mermaid-editor/",
+    "name": "Mermaid editor",
+    "author": "Author",
+    "desc": "Web app editor to create and modify complex charts and diagrams",
+    "cat": "Diagram",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/mermaid.webp"
+  },
+  {
+    "id": 10,
+    "url": "https://gigamaster.github.io/codemo/web-app/studio/",
+    "name": "Studio",
+    "author": "Author",
+    "desc": "Web app to create designs and templates for social media",
+    "cat": "Graphics",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/studio.webp"
+  },
+  {
+    "id": 11,
+    "url": "https://gigamaster.github.io/codemo/web-app/tldraw/",
+    "name": "Tldraw",
+    "author": "Author",
+    "desc": "Web app to draw and write on the canvas, add images and video",
+    "cat": "Drawing 2D",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/tldraw.webp"
+  },
+  {
+    "id": 12,
+    "url": "https://gigamaster.github.io/codemo/web-app/voxel-builder/",
+    "name": "Voxel-builder",
+    "author": "Author",
+    "desc": "Web app to create 3D voxel art, modeling art game graphics",
+    "cat": "3D graphics",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/voxel-builder.webp"
+  },
+  {
+    "id": 13,
+    "url": "https://gigamaster.github.io/codemo/web-app/vvvebjs/",
+    "name": "Vvvebjs",
+    "author": "Author",
+    "desc": "Drag and drop web page builder",
+    "cat": "Web Design",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/vvveb.webp"
+  }
+]
diff --git a/app/asset/lib/component.min.js b/app/asset/lib/component.min.js
diff --git a/app/asset/modal-launcher.html b/app/asset/modal-launcher.html
@@ -0,0 +1,53 @@
+<!-- Default layout: grid or list -->
+<div class="mx-auto h-full" x-data="{'layout': 'grid'}">
+<section class="flex flex-wrap" 
+  x-data="alpineInstance()"
+  x-init="fetch('https://gigamaster.github.io/codemo/asset/launcher.json')
+          .then(response => response.json())
+          .then(data => apps = data)"
+  x-bind:class="{'p-2': layout === 'list', 'p-2': layout === 'grid'}"
+>
+<nav class="flex flex-row w-full items-center justify-between px-2">
+  <div>
+    <h1 class="w-full" x-html="intro"><!-- title text --></h1>
+  </div>
+  <div>
+    <button type="button" class="m-1 p-1 transition-colors duration-500 rounded-md text-gray-400 bg-gray-100 hover:text-light hover:bg-primary dark:hover:text-light dark:hover:bg-primary-dark dark:bg-dark" x-on:click="layout = 'list'" x-bind:class="{'bg-primary dark:bg-primary-dark': layout === 'list'}"><i class="icon-layout-list h-6 w-6"></i></button>
+    <button type="button" class="m-1 p-1 transition-colors duration-500 rounded-md text-gray-400 bg-gray-100 hover:text-light hover:bg-primary dark:hover:text-light dark:hover:bg-primary-dark dark:bg-dark" x-on:click="layout = 'grid'" x-bind:class="{'bg-primary dark:bg-primary-dark': layout === 'grid'}"><i class="icon-layout-grid h-6 w-6"></i></button>
+  </div>
+</nav>
+<template x-for="app in apps" :key="app.id">
+  <div class="" x-bind:class="{'w-full p-2': layout === 'list', 'w-1/5 p-2': layout === 'grid'}">
+  <article class="p-1 rounded-md text-gray-400 bg-gray-100 hover:bg-primary hover:text-light dark:bg-dark dark:hover:bg-primary-dark dark:hover:text-light transition-colors duration-500">
+    <div class="flex flex-row">
+      <a :href="app.url" alt="app.name">
+        <img :src="app.image" class="w-48 rounded-md" />        
+        <div class="flex items-center justify-between text-sm" 
+          x-show="layout === 'grid'" 
+          x-cloak
+        >
+          <span class="text-xs"><i :class="app.icon"></i> <span x-text="app.cat"></span></span>
+          <span x-text="app.name"></span>
+        </div>
+      </a>
+      <div 
+        class="flex-1 flex flex-col justify-between ml-4" 
+        x-show="layout === 'list'" 
+        x-cloak
+      >
+      <a x-bind:href="app.url" target="_blank">
+        <h2 class="mb-2 text-xl uppercase" x-text="app.name"></h2>
+        <p x-text="app.desc"></p>
+        <p x-text="app.author"></p>
+        <div class="flex flex-1 justify-between">
+          <div><i :class="app.icon"></i> <span x-text="app.cat"></span></div>
+          <span class="text-sm text-right ml-auto px-2">Open <i>↗</i></span>
+        </div>
+      </a>
+      </div>
+    </div>
+  </article>
+  </div>
+</template>
+</section>
+</div>
diff --git a/app/tools/tasks/index.html b/app/tools/tasks/index.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="x-ua-compatible" content="ie=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000" />
+
+    <title>Codemo Task Manager</title>
+    <meta
+      name="description"
+      content="Codemo Kaban Task Manager"
+    />
+
+    <link rel="preconnect" href="https://api.iconify.design" />
+
+    <link rel="icon" type="image/x-icon" href="images/icon.svg" />
+
+    <link rel="modulepreload" href="scripts/AppCollapsible.js" />
+    <link rel="modulepreload" href="scripts/AppDatePicker.js" />
+    <link rel="modulepreload" href="scripts/AppDraggable.js" />
+    <link rel="modulepreload" href="scripts/AppFlip.js" />
+    <link rel="modulepreload" href="scripts/AppIcon.js" />
+    <link rel="modulepreload" href="scripts/AppSortable.js" />
+    <link rel="modulepreload" href="scripts/TodoApp.js" />
+    <link rel="modulepreload" href="scripts/TodoController.js" />
+    <link rel="modulepreload" href="scripts/TodoCustomList.js" />
+    <link rel="modulepreload" href="scripts/TodoDay.js" />
+    <link rel="modulepreload" href="scripts/TodoFrameCustom.js" />
+    <link rel="modulepreload" href="scripts/TodoFrameDays.js" />
+    <link rel="modulepreload" href="scripts/TodoItem.js" />
+    <link rel="modulepreload" href="scripts/TodoItemInput.js" />
+    <link rel="modulepreload" href="scripts/TodoList.js" />
+    <link rel="modulepreload" href="scripts/TodoLogic.js" />
+    <link rel="modulepreload" href="scripts/util.js" />
+    <link rel="modulepreload" href="scripts/uuid.js" />
+
+    <link rel="stylesheet" href="styles/base.css" />
+    <link rel="stylesheet" href="styles/app-tasks.css" />
+
+    <link rel="manifest" href="manifest.json" />
+    <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
+  </head>
+  <body>
+    <div class="todo-app"></div>
+
+    <script type="module">
+      import { TodoApp } from './scripts/TodoApp.js';
+
+      TodoApp(document.querySelector('.todo-app'));
+    </script>
+  </body>
+</html>
diff --git a/app/tools/tasks/scripts/AppCollapsible.js b/app/tools/tasks/scripts/AppCollapsible.js
@@ -0,0 +1,34 @@
+/**
+ * @param {HTMLElement} el
+ */
+export function AppCollapsible(el) {
+  let show = true;
+
+  setTimeout(() => el.classList.add('-animated'), 200);
+
+  el.addEventListener('collapse', (e) => {
+    if (typeof e.detail === 'boolean') {
+      show = e.detail;
+    }
+
+    update();
+  });
+
+  el.querySelector('.bar > .toggle').addEventListener('click', () => {
+    show = !show;
+    update();
+  });
+
+  update();
+
+  function update() {
+    el.querySelector('.bar > .toggle > .app-icon').classList.toggle(
+      '-r180',
+      show,
+    );
+
+    el.querySelectorAll('.body').forEach((el) => {
+      el.style.height = show ? `${el.children[0].offsetHeight}px` : '0';
+    });
+  }
+}