Codemo Digital Nomad v.0.9.0

README.md

@@ -1,13 +1,18 @@
-# Github Repository Web File Browser
-
-
 [![HTML CSS JS](html-css-javascript.svg)](https://github.com/gigamaster/codemo) [![CODEMO powered-by-electricity](http://ForTheBadge.com/images/badges/powered-by-electricity.svg)](https://github.com/gigamaster/codemo)  
 
+-----
+
+<h1 align="center">
+<br />
+<br />
+///// — CODEMO DIGITAL NOMAD — \\\\\
+<br /><br />
+</h1>
 
-### /////////////////////////// — CODEMO
 
-GitHub repository web file browser to preview, edit and download individual files   
-or a directory as a zip archive to your own (local) computer.
+GitHub repository with Web apps, code playground, vector graphic creator and editor,  
+file browser to preview, edit and download individual files or a directory as a zip archive  
+to a (local) computer.
 
 
 [![HCodemo Screenshot](codemo-screen.jpg)](https://gigamaster.github.io/codemo/)
@@ -16,21 +21,41 @@ or a directory as a zip archive to your own (local) computer.
 
 --- 
 
-
-| Web App                            | Description  |
-|------------------------------------|--------------|
-| ![dpaint]([dpaint-img])                | [dpaint][dpaint]  Image editor modeled after the legendary Deluxe Paint by Steffest  |
-| ![drawio]([drawio-img])                | [drawio][drawio]  Diagram editor or whiteboard by JGraph Ltd and draw.io AG |
-| ![encrypt]([encrypt-img])              | [encrypt][encrypt]  Static HTML Encryption for public host |
-| ![erd-editor]([erd-editor-img])        | [erd-editor][erd-editor]  Entity-Relationship Diagram Editor by SeungHwan-Lee @dineug |
-| ![godsvg]([godsvg-img])                | [godsvg][godsvg]  Editor for Scalable Vector Graphics (SVG) by @MewPurPur  |
-| ![grapesjs]([grapesjs-img])            | [grapesjs][grapesjs]  WYSIWYG eeb page builder |
-| ![livecodes]([livecodes-img])          | [livecodes][livecodes]  Live code playground |
-| ![mermaid]([mermaid-img])              | [mermaid-editor][mermaid]  Charts and diagrams editor |
-| ![tldraw]([tldraw-img])                | [tldraw][tldraw]  Canvas and whiteboard draw |
-| ![voxel-builder]([voxel-builder-img])  | [voxel-builder][voxel-builder]  Voxel-based 3D Modeling Application  nimadez |
-| ![vvvebjs]([vvvebjs-img])              | [vvvebjs][vvvebjs]  Drag and drop web page builder givanz|
-
+<h2 align="center">
+<br />
+<br />
+///// — WEB APPLICATIONS — \\\\\
+<br /><br />
+</h2>
+
+<table>
+<tr><th width="30%">Web App</th><th>Description</th></tr>
+<tr><td width=""></td><td></td></tr>
+<img src="app/web-app/dpaint.webp" width="30%" height="auto" alt="dpaint">                | [dpaint][dpaint]  Image editor modeled after the legendary Deluxe Paint by Steffest  |
+| ![drawio](app/web-app/drawio.webp)                | [drawio][drawio]  Diagram editor or whiteboard by JGraph Ltd and draw.io AG |
+| ![encrypt](app/web-app/encrypt.webp)               | [encrypt][encrypt]  Static HTML Encryption for public host |
+| ![erd-editor](app/web-app/erd-editor.webp)         | [erd-editor][erd-editor]  Entity-Relationship Diagram Editor by SeungHwan-Lee @dineug |
+| ![godsvg](app/web-app/godsvg.webp)                | [godsvg][godsvg]  Editor for Scalable Vector Graphics (SVG) by @MewPurPur  |
+| ![grapesjs](app/web-app/grapesjs.webp)            | [grapesjs][grapesjs]  WYSIWYG eeb page builder |
+| ![livecodes](app/web-app/livecodes.webp)          | [livecodes][livecodes]  Live code playground |
+| ![mermaid](app/web-app/mermaid.webp)              | [mermaid-editor][mermaid]  Charts and diagrams editor |
+| ![tldraw](app/web-app/tldraw.webp)                 | [tldraw][tldraw]  Canvas and whiteboard draw |
+| ![voxel-builder](app/web-app/voxel-builder.webp)   | [voxel-builder][voxel-builder]  Voxel-based 3D Modeling Application  nimadez |
+| ![vvvebjs](app/web-app/vvvebjs.webp)              | [vvvebjs][vvvebjs]  Drag and drop web page builder givanz|
+
+
+## Install on desktops and laptops
+
+You must be using a modern browser. Desktop installation is currently supported by Google Chrome and Microsoft Edge on Linux, Windows, macOS, and Chromebooks. Click the button in the Address bar to get a pop up asking to install Codemo. Once Codemo is installed, it will:
+
+- Have an icon in the launcher, home screen, start menu, or launchpad.
+- Appear as a result when a user searches for the app on their device.
+- Have a separate window within the operating system.
+- Have support for specific capabilities.
+
+**Install, manage, or uninstall apps...**  
+- [Chrome - Use web apps](https://support.google.com/chrome/answer/9658361?hl=en&co=GENIE.Platform%3DDesktop)
+- [Microsoft Edge](https://support.microsoft.com/en-us/topic/install-manage-or-uninstall-apps-in-microsoft-edge-0c156575-a94a-45e4-a54f-3a84846f6113)
 
 ### 1. Live Code
 
@@ -104,25 +129,25 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.   
 
 [web]: https://gigamaster.github.io/codemo/web-app/
-[dpaint-img]: https://gigamaster.github.io/codemo/web-app/dpaint.webp
+[dpaint-img]: ./app/web-app/dpaint.webp
 [dpaint]: https://gigamaster.github.io/codemo/web-app/dpaint/
-[drawio-img]: https://gigamaster.github.io/codemo/web-app/drawio.webp
+[drawio-img]: ./app/web-app/drawio.webp
 [drawio]: https://gigamaster.github.io/codemo/web-app/drawio/
-[encrypt-img]: https://gigamaster.github.io/codemo/web-app/encrypt.webp
+[encrypt-img]: ./app/web-app/encrypt.webp
 [encrypt]: https://gigamaster.github.io/codemo/web-app/encrypt/
-[erd-editor-img]: https://gigamaster.github.io/codemo/web-app/erd-editor.webp
+[erd-editor-img]: ./app/web-app/erd-editor.webp
 [erd-editor]: https://gigamaster.github.io/codemo/web-app/erd-editor/
-[godsvg-img]: https://gigamaster.github.io/codemo/web-app/godsvg.webp
+[godsvg-img]: ./app/web-app/godsvg.webp
 [godsvg]: https://gigamaster.github.io/codemo/web-app/godsvg/
-[grapesjs-img]: https://gigamaster.github.io/codemo/web-app/grapesjs.webp
+[grapesjs-img]: ./app/web-app/grapesjs.webp
 [grapesjs]: https://gigamaster.github.io/codemo/web-app/grapesjs/
-[livecodes-img]: https://gigamaster.github.io/codemo/web-app/livecodes.webp
+[livecodes-img]: ./app/web-app/livecodes.webp
 [livecodes]: https://gigamaster.github.io/codemo/web-app/livecodes/
-[mermaid-img]: https://gigamaster.github.io/codemo/web-app/mermaid-editor.webp
+[mermaid-img]: ./app/web-app/mermaid-editor.webp
 [mermaid]: https://gigamaster.github.io/codemo/web-app/mermaid-editor/
-[tldraw-img]: https://gigamaster.github.io/codemo/web-app/tldraw.webp
+[tldraw-img]: ./app/web-app/tldraw.webp
 [tldraw]: https://gigamaster.github.io/codemo/web-app/tldraw/
-[voxel-builder-img]: https://gigamaster.github.io/codemo/web-app/voxel-builder.webp
+[voxel-builder-img]: ./app/web-app/voxel-builder.webp
 [voxel-builder]: https://gigamaster.github.io/codemo/web-app/voxel-builder/
-[vvvebjs-img]: https://gigamaster.github.io/codemo/web-app/vvvebjs.webp
+[vvvebjs-img]: ./app/web-app/vvvebjs.webp
 [vvvebjs]: https://gigamaster.github.io/codemo/web-app/vvvebjs/

app/asset/app.js

@@ -193,7 +193,7 @@ document.addEventListener('alpine:init', () => {
 
 /*
   Usage Example:
-  openWithSelfMain('https://example.com','XOOPSCube','960','540');
+  openWithSelfMain('https://example.com','Example Title','960','540');
   Location = null is useless because modern browsers now prevent, by default, 
   hiding the address bar for security reasons (phishing)
 */

app/asset/css/style.css

@@ -134,8 +134,8 @@ h1,h2,h3,h4,h5,h6{font-weight:600;}
 h5,h6 {font-weight:200;text-transform: uppercase;}
 a.download{cursor:pointer;}
 .loader {width:27vmin;height:27vmin;}
-
-.bg-key{background: var(--key-gradient);}
+.cursor-pointer{cursor: pointer;}
+.key-bg{background: var(--key-gradient);}
 .key {
 align-items: center;
 background: var(--key-gradient);
@@ -177,6 +177,9 @@ vertical-align:-.175em;}
 .icon-alert{
 --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1' d='m21.73 18l-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01'/%3E%3C/svg%3E");
 }
+.icon-app{
+--svg:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Crect width='9' height='9' x='2' y='2' fill='%23000' rx='1'/%3E%3Crect width='9' height='9' x='2' y='13' fill='%23000' opacity='0.5' rx='1'/%3E%3Crect width='9' height='9' x='13' y='2' fill='%23000' opacity='0.5' rx='1'/%3E%3Crect width='9' height='9' x='13' y='13' fill='%23000' opacity='0.5' rx='1'/%3E%3C/svg%3E");
+}
 .icon-bookmark{
 --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-linejoin='round' stroke-width='1' d='M6 20V5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v15l-6-3z'/%3E%3C/svg%3E");
 }
@@ -364,6 +367,7 @@ vertical-align:-.175em;}
 .max-h-96{max-height: 24rem;} /* 384px */
 .max-w-xs{max-width:18rem}
 .max-w-xl{max-width: 36rem;} /* 576px */
+.max-w-5xl{max-width: 64rem;} /* 1024px */
 .w-3\/4 {width: 75%;}
 .w-4{width:1rem}
 .w-5{width:1.25rem}
@@ -417,9 +421,10 @@ vertical-align:-.175em;}
 .font-normal{font-weight:400}
 .uppercase{text-transform:uppercase}
 .tracking-wider{letter-spacing:.05em}
-.text-center{text-align:center}
 .text-base{font-size:1rem;line-height:1.5rem} /* no */
 .text-sm{font-size:.875rem;line-height:1.25rem}
+.text-center{text-align:center}
+.text-right{text-align: right;}
 .time,.size{font-size:.75rem;text-align:center}
 .text-xs{font-size:.75rem;line-height:1rem}
 .text-lg{font-size: 1.125rem;line-height:1.75rem;}

app/asset/favicon/site.webmanifest

@@ -1,6 +1,6 @@
 {
-    "name": "Codemo",
     "short_name": "Codemo",
+    "name": "Codemo Digital Nomad",
     "icons": [
         {
             "src": "https://gigamaster.github.io/codemo/asset/favicon/android-chrome-192x192.png",

app/asset/modal-content.html

@@ -0,0 +1,3 @@
+<h2>Modal content fetch</h2>
+<p>paragraph</p>
+