From 6e7dacc1e07f7deb7edf7c115b9a2a59948d7d8e Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Mon, 17 Oct 2022 13:48:01 -0400
Subject: [PATCH] Improved dynamic loading of CSS and JS files!

---
 app/index.html                       |  93 ++++++--------
 app/index_development_internal.html  |   2 +-
 app/index_development_localhost.html |   2 +-
 app/index_onsite_5000.html           |   2 +-
 app/index_primary.html               | 177 +++++++++++++++++++++++++++
 config.json                          |   8 ++
 config.json.default                  |  12 +-
 index.js                             |   2 +
 8 files changed, 235 insertions(+), 63 deletions(-)
 create mode 100644 app/index_primary.html

diff --git a/app/index.html b/app/index.html
index ebdfd99..49773a2 100644
--- a/app/index.html
+++ b/app/index.html
@@ -4,79 +4,64 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-        <title>One Sky IT's Aether App (default)</title>
+        <title>One Sky IT's Aether App</title>
 
         <link rel="shortcut icon" type="image/png" href="img/favicon.ico">
 
         <!-- Cascading Style Sheets (CSS) start -->
         <link rel="preconnect" href="https://fonts.gstatic.com">
-
         <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
-
         <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
-
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
-
-        <!-- One Sky IT default custom Cascading Style Sheets (CSS) -->
-
-        <!-- One Sky IT site custom Cascading Style Sheets (CSS) -->
-        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_css_variables.css">
-        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_css_variables.css"> -->
-        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_utilities.css">
-        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_utilities.css"> -->
-        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_elements.css">
-        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_elements.css"> -->
-        <!-- <link rel="stylesheet" href="https://lci.oneskyit.com/static/css/aether_system.css"> -->
-        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/css/aether_system.css"> -->
-        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_modules_core.css">
-        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_modules_core.css"> -->
-
-        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_layout_v5_root.css">
-        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_layout_v5_root.css"> -->
-        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_layout_v5_system.css">
-        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_layout_v5_system.css"> -->
-
-        <link href="https://lci.oneskyit.com/static/svelte/build/bundle.css" rel="stylesheet">
-        <!-- <link href="http://dev-app.oneskyit.local:5000/static/svelte/build/bundle.css" rel="stylesheet"> -->
-        <link href="https://lci.oneskyit.com/static/svelte/build/reloading.css" rel="stylesheet">
-        <!-- <link href="http://dev-app.oneskyit.local:5000/static/svelte/build/reloading.css" rel="stylesheet"> -->
-
-        <link href="https://lci.oneskyit.com/static/svelte/build/event.css" rel="stylesheet">
-        <!-- <link href="http://dev-app.oneskyit.local:5000/static/svelte/build/event.css" rel="stylesheet"> -->
-        <link href="https://lci.oneskyit.com/static/svelte/build/event_launcher.css" rel="stylesheet">
-        <!-- <link href="http://dev-app.oneskyit.local:5000/static/svelte/build/event_launcher.css" rel="stylesheet"> -->
-
-        <link rel="stylesheet" href="css/aether_app_native_v3.css">
-
-        <style>
-        </style>
         <!-- Cascading Style Sheets (CSS) end -->
 
         <!-- JavaScript (JS) start -->
         <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.2/axios.min.js" integrity="sha512-bHeT+z+n8rh9CKrSrbyfbINxu7gsBmSHlDCb3gUF1BjmjDzKhoKspyB71k0CIRBSjE5IVQiMMVBgCWjF60qsvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
         <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
-
         <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.js" integrity="sha512-WL6WGKMPBiM9PnHRYIn5YEtq0Z8XP4fkVb4qy7PP4vhmYQErJ/dySyXuFIMDf1eEYCXCrQrMJfkNwKc9gsjTjA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
         <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js" integrity="sha512-bwD3VD/j6ypSSnyjuaURidZksoVx3L1RPvTkleC48SbHCZsemT3VKMD39KknPnH728LLXVMTisESIBOAb5/W0Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
         <script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js" integrity="sha512-+BMamP0e7wn39JGL8nKAZ3yAQT2dL5oaXWr4ZYlTGkKOaoXM/Yj7c4oy50Ngz5yoUutAG17flueD4F6QpTlPng==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-
-        <!-- <script src="https://static.oneskyit.com/js/utilities.js"></script> -->
+        <!-- JavaScript (JS) end -->
 
         <script>
         const native_app = require('./js/aether_app_native_v4');
         let native_app_config = native_app.load_config();
         console.log('Native App Config:', native_app_config);
 
-        // BEGIN: Environment constants set by server when rendering HTML
+        let native_app_js_css_base_url = native_app_config.native_app_js_css_base_url;
+
         document.aether = {
             name: 'Aether Native App (Electron and Svelte)'
         };
+        </script>
 
+
+
+        <!-- One Sky IT Cascading Style Sheets (CSS) -->
+        <script>document.write(`<link rel="stylesheet" href="${native_app_js_css_base_url}/static/svelte/build/aether_css_variables.css" />`);</script>
+        <script>document.write(`<link rel="stylesheet" href="${native_app_js_css_base_url}/static/svelte/build/aether_utilities.css" />`);</script>
+        <script>document.write(`<link rel="stylesheet" href="${native_app_js_css_base_url}/static/svelte/build/aether_elements.css" />`);</script>
+        <script>document.write(`<link rel="stylesheet" href="${native_app_js_css_base_url}/static/svelte/build/aether_modules_core.css" />`);</script>
+        <script>document.write(`<link rel="stylesheet" href="${native_app_js_css_base_url}/static/svelte/build/aether_elements.css" />`);</script>
+
+        <script>document.write(`<link rel="stylesheet" href="${native_app_js_css_base_url}/static/svelte/build/aether_layout_v5_root.css" />`);</script>
+        <script>document.write(`<link rel="stylesheet" href="${native_app_js_css_base_url}/static/svelte/build/aether_layout_v5_system.css" />`);</script>
+
+        <script>document.write(`<link rel="stylesheet" href="${native_app_js_css_base_url}/static/svelte/build/bundle.css" />`);</script>
+        <script>document.write(`<link rel="stylesheet" href="${native_app_js_css_base_url}/static/svelte/build/reloading.css" />`);</script>
+
+        <script>document.write(`<link rel="stylesheet" href="${native_app_js_css_base_url}/static/svelte/build/event.css" />`);</script>
+        <script>document.write(`<link rel="stylesheet" href="${native_app_js_css_base_url}/static/svelte/build/event_launcher.css" />`);</script>
+
+        <link rel="stylesheet" href="css/aether_app_native_v3.css">
+
+        <style>
+        </style>
+
+
+        <script>
+        // BEGIN: Environment constants set by server when rendering HTML
         // Environment options: development_local, development_remote, production_local, production_remote,
-
         // END: Environment constants set by server when rendering HTML
 
         // BEGIN: Content constants set by server when rendering HTML
@@ -99,8 +84,6 @@
 
         let page = {}
         page['page_for'] = { 'event': native_app_config.event_id, 'event_device': native_app_config.event_device_id, 'event_location': native_app_config.event_location_id, "event_session": native_app_config.event_session_id }; // Simple key value like object;
-        // page['current_url_root'] = 'http://dev-app.oneskyit.local:5000/';
-        // page['current_url_full_path'] = '/event/pjrcghqwert/launcher/x7uFNCMEdOI?';
         document.aether.page = page;
 
         document.aether.client = {"account_id": native_app_config.account_id, "site_id": native_app_config.site_id, "site_domain_id": native_app_config.site_domain_id, "person_id": null, "user_id": null, "order_cart_id_random": null, "super_check": false, "manager_check": false, "administrator_check": false, "support_check": false, "assistant_check": false, "trusted_check": false, "verified_check": false, "provisional_check": false, "public_check": false, "user_check": false, "logged_in_check": false, "person_check": false, "authenticated_check": false, "anonymous_check": true, "person_group": null, "user_group": null, "orders_closed_count": 0, "order_count": 0, "app_mode": "native"};
@@ -119,13 +102,16 @@
 
         /* ***** **** *** ** * ### * ** *** **** ***** */
 
+        let svelte_bundle_js = document.createElement('script');
+        svelte_bundle_js.setAttribute('src', `${native_app_js_css_base_url}/static/svelte/build/bundle.js`);
+        document.head.appendChild(svelte_bundle_js);
         </script>
 
+        <!-- <script>document.write(`<script src="${native_app_js_css_base_url}/static/svelte/build/bundle.js" crossorigin />`);</script> -->
         <!-- <script defer src="svelte/build/bundle.js" crossorigin></script> -->
+        <!-- <script defer src="https://demo.oneskyit.com/static/svelte/build/bundle.js" crossorigin></script> -->
         <!-- <script defer src="https://lci.oneskyit.com/static/svelte/build/bundle.js" crossorigin></script> -->
-        <script defer src="https://lci.oneskyit.com/static/svelte/build/bundle.js" crossorigin></script>
         <!-- JavaScript (JS) end -->
-
     </head>
 
     <body id="Body-Container" class="body_container">
@@ -160,18 +146,13 @@
 
     </body>
 <!-- JavaScript (JS) start -->
-
-<!-- One Sky IT default custom JavaScript (JS) -->
-
-<!-- One Sky IT site custom JavaScript (JS) -->
 <!-- <script>const app = require('./js/app_v3');</script> -->
 <!-- <script src="js/app_v3.js"></script> -->
 <script>
 /* ***** **** *** ** * ### * ** *** **** ***** */
-
 /* ***** **** *** ** * ### * ** *** **** ***** */
 </script>
-
+<!-- JavaScript (JS) end -->
 
 
 </html>
diff --git a/app/index_development_internal.html b/app/index_development_internal.html
index 3a333c8..3ef0766 100644
--- a/app/index_development_internal.html
+++ b/app/index_development_internal.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-        <title>One Sky IT's Aether App (onsite)</title>
+        <title>One Sky IT's Aether App (development internal)</title>
 
         <link rel="shortcut icon" type="image/png" href="img/favicon.ico">
 
diff --git a/app/index_development_localhost.html b/app/index_development_localhost.html
index 4edb515..3d16525 100644
--- a/app/index_development_localhost.html
+++ b/app/index_development_localhost.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-        <title>One Sky IT's Aether App (onsite)</title>
+        <title>One Sky IT's Aether App (development localhost)</title>
 
         <link rel="shortcut icon" type="image/png" href="img/favicon.ico">
 
diff --git a/app/index_onsite_5000.html b/app/index_onsite_5000.html
index 082585b..9a843c7 100644
--- a/app/index_onsite_5000.html
+++ b/app/index_onsite_5000.html
@@ -4,7 +4,7 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-        <title>One Sky IT's Aether App (onsite)</title>
+        <title>One Sky IT's Aether App (onsite :5000)</title>
 
         <link rel="shortcut icon" type="image/png" href="img/favicon.ico">
 
diff --git a/app/index_primary.html b/app/index_primary.html
new file mode 100644
index 0000000..e1df786
--- /dev/null
+++ b/app/index_primary.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+        <title>One Sky IT's Aether App (primary)</title>
+
+        <link rel="shortcut icon" type="image/png" href="img/favicon.ico">
+
+        <!-- Cascading Style Sheets (CSS) start -->
+        <link rel="preconnect" href="https://fonts.gstatic.com">
+
+        <link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
+
+        <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
+
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+        <!-- One Sky IT default custom Cascading Style Sheets (CSS) -->
+
+        <!-- One Sky IT site custom Cascading Style Sheets (CSS) -->
+        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_css_variables.css">
+        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_css_variables.css"> -->
+        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_utilities.css">
+        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_utilities.css"> -->
+        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_elements.css">
+        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_elements.css"> -->
+        <!-- <link rel="stylesheet" href="https://lci.oneskyit.com/static/css/aether_system.css"> -->
+        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/css/aether_system.css"> -->
+        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_modules_core.css">
+        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_modules_core.css"> -->
+
+        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_layout_v5_root.css">
+        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_layout_v5_root.css"> -->
+        <link rel="stylesheet" href="https://lci.oneskyit.com/static/svelte/build/aether_layout_v5_system.css">
+        <!-- <link rel="stylesheet" href="http://dev-app.oneskyit.local:5000/static/svelte/build/aether_layout_v5_system.css"> -->
+
+        <link href="https://lci.oneskyit.com/static/svelte/build/bundle.css" rel="stylesheet">
+        <!-- <link href="http://dev-app.oneskyit.local:5000/static/svelte/build/bundle.css" rel="stylesheet"> -->
+        <link href="https://lci.oneskyit.com/static/svelte/build/reloading.css" rel="stylesheet">
+        <!-- <link href="http://dev-app.oneskyit.local:5000/static/svelte/build/reloading.css" rel="stylesheet"> -->
+
+        <link href="https://lci.oneskyit.com/static/svelte/build/event.css" rel="stylesheet">
+        <!-- <link href="http://dev-app.oneskyit.local:5000/static/svelte/build/event.css" rel="stylesheet"> -->
+        <link href="https://lci.oneskyit.com/static/svelte/build/event_launcher.css" rel="stylesheet">
+        <!-- <link href="http://dev-app.oneskyit.local:5000/static/svelte/build/event_launcher.css" rel="stylesheet"> -->
+
+        <link rel="stylesheet" href="css/aether_app_native_v3.css">
+
+        <style>
+        </style>
+        <!-- Cascading Style Sheets (CSS) end -->
+
+        <!-- JavaScript (JS) start -->
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.1.2/axios.min.js" integrity="sha512-bHeT+z+n8rh9CKrSrbyfbINxu7gsBmSHlDCb3gUF1BjmjDzKhoKspyB71k0CIRBSjE5IVQiMMVBgCWjF60qsvA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+        <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.2.0/socket.io.js" integrity="sha512-WL6WGKMPBiM9PnHRYIn5YEtq0Z8XP4fkVb4qy7PP4vhmYQErJ/dySyXuFIMDf1eEYCXCrQrMJfkNwKc9gsjTjA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/dayjs/1.10.7/dayjs.min.js" integrity="sha512-bwD3VD/j6ypSSnyjuaURidZksoVx3L1RPvTkleC48SbHCZsemT3VKMD39KknPnH728LLXVMTisESIBOAb5/W0Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/localforage/1.10.0/localforage.min.js" integrity="sha512-+BMamP0e7wn39JGL8nKAZ3yAQT2dL5oaXWr4ZYlTGkKOaoXM/Yj7c4oy50Ngz5yoUutAG17flueD4F6QpTlPng==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
+        <!-- <script src="https://static.oneskyit.com/js/utilities.js"></script> -->
+
+        <script>
+        const native_app = require('./js/aether_app_native_v4');
+        let native_app_config = native_app.load_config();
+        console.log('Native App Config:', native_app_config);
+
+        // BEGIN: Environment constants set by server when rendering HTML
+        document.aether = {
+            name: 'Aether Native App (Electron and Svelte)'
+        };
+
+        // Environment options: development_local, development_remote, production_local, production_remote,
+
+        // END: Environment constants set by server when rendering HTML
+
+        // BEGIN: Content constants set by server when rendering HTML
+        const page_for = {"event": native_app_config.event_id, "event_device": native_app_config.event_device_id, "event_location": native_app_config.event_location_id, "event_session": native_app_config.event_session_id}; // Simple key value like object
+        console.log('Page For:', page_for);
+        // END: Content constants set by server when rendering HTML
+
+        // BEGIN: Client constants set by server when rendering HTML
+        const client_account_jwt = {}; // Future use
+        const client_person_jwt = {}; // Future use
+        const client_user_jwt = {}; // Future use
+
+        let client_account_id = native_app_config.account_id;
+        console.log(client_account_id);
+
+        // END: Client constants set by server when rendering HTML
+
+        // BEGIN: Other constants set by server when rendering HTML
+        // END: Other constants set by server when rendering HTML
+
+        let page = {}
+        page['page_for'] = { 'event': native_app_config.event_id, 'event_device': native_app_config.event_device_id, 'event_location': native_app_config.event_location_id, "event_session": native_app_config.event_session_id }; // Simple key value like object;
+        // page['current_url_root'] = 'http://dev-app.oneskyit.local:5000/';
+        // page['current_url_full_path'] = '/event/pjrcghqwert/launcher/x7uFNCMEdOI?';
+        document.aether.page = page;
+
+        document.aether.client = {"account_id": native_app_config.account_id, "site_id": native_app_config.site_id, "site_domain_id": native_app_config.site_domain_id, "person_id": null, "user_id": null, "order_cart_id_random": null, "super_check": false, "manager_check": false, "administrator_check": false, "support_check": false, "assistant_check": false, "trusted_check": false, "verified_check": false, "provisional_check": false, "public_check": false, "user_check": false, "logged_in_check": false, "person_check": false, "authenticated_check": false, "anonymous_check": true, "person_group": null, "user_group": null, "orders_closed_count": 0, "order_count": 0, "app_mode": "native"};
+
+        document.aether.cfg = {};
+        document.aether.cfg.app = {"name": "One Sky IT's Aether Native App DEV", "version": "3.5 DEV", "email": null, "env": null, "mode": "native", "local_file_cache_path": native_app_config.local_file_cache_path, "host_file_temp_path": native_app_config.host_file_temp_path};
+        document.aether.cfg.api = {"protocol": native_app_config.api_protocol, "server": native_app_config.api_server, "port": native_app_config.api_port, "path": native_app_config.api_path, "secret_key": native_app_config.api_secret_key, "base_url": null, "temporary_token": {"token": null, "expire_on": null}, "protocol_backup": native_app_config.api_protocol_backup, "server_backup": native_app_config.api_server_backup, "port_backup": native_app_config.api_port_backup, "path_backup": native_app_config.api_path_backup, "secret_key_backup": native_app_config.api_secret_key_backup, "base_url_backup": null, "temporary_token_backup": {"token": null, "expire_on": null}};
+        document.aether.cfg.idb = {"name": native_app_config.idb_name};
+
+        /* ***** **** *** ** * ### * ** *** **** ***** */
+
+        let app_online = false;
+        //let app_use_cached_data = true;
+        window.addEventListener('online', native_app.currently_online);
+        window.addEventListener('offline', native_app.currently_offline);
+
+        /* ***** **** *** ** * ### * ** *** **** ***** */
+
+        </script>
+
+        <!-- <script defer src="svelte/build/bundle.js" crossorigin></script> -->
+        <!-- <script defer src="https://lci.oneskyit.com/static/svelte/build/bundle.js" crossorigin></script> -->
+        <script defer src="https://lci.oneskyit.com/static/svelte/build/bundle.js" crossorigin></script>
+        <!-- JavaScript (JS) end -->
+
+    </head>
+
+    <body id="Body-Container" class="body_container">
+
+<section id="System-Nav-Menu">Site-Nav-Menu</section>
+
+<div id="Site-Container">
+
+    <section id="Site-Header">Site-Header</section>
+
+    <nav id="Site-Nav-Menu">Site-Nav-Menu</nav>
+
+    <section id="Notifications">
+        <section id="System-Notifications">System-Notifications (and Site-Notifications)</section><!-- and what would be Site-Notifications-->
+
+    </section>
+
+    <section id="Main-Body" class="main_template_content svelte_target event_launcher_main Side-Main-Nav-Menu">
+        <section id="Main-Nav-Menu"></section>
+        <main id="Main-Content"></main>
+    </section>
+
+    <section id="Site-Footer">Site-Footer</section>
+
+</div>
+
+<section id="Site-Modals"></section>
+
+<section id="System-Footer">Site-Footer</section>
+
+<section id="System-Debug">System-Debug</section>
+
+    </body>
+<!-- JavaScript (JS) start -->
+
+<!-- One Sky IT default custom JavaScript (JS) -->
+
+<!-- One Sky IT site custom JavaScript (JS) -->
+<!-- <script>const app = require('./js/app_v3');</script> -->
+<!-- <script src="js/app_v3.js"></script> -->
+<script>
+/* ***** **** *** ** * ### * ** *** **** ***** */
+
+/* ***** **** *** ** * ### * ** *** **** ***** */
+</script>
+
+
+
+</html>
diff --git a/config.json b/config.json
index d08d7c6..8a0e85b 100644
--- a/config.json
+++ b/config.json
@@ -1,6 +1,8 @@
 {
   "developer_tools": false,
   "native_app_js_css_option": "default",
+  "native_app_js_css_base_url": "http://demo.oneskyit.local:5000",
+  "native_app_js_css_base_url_bak": "https://demo.oneskyit.com",
 
   "account_id": "_XY7DXtc9MY",
   "event_id": "pjrcghqwert",
@@ -8,6 +10,12 @@
   "event_location_id": "7ReVVemiSM0",
   "event_session_id": null,
 
+  "account_code": "",
+  "event_code": "",
+  "event_device_code": "",
+  "event_location_code": "",
+  "event_session_code": "",
+
   "app_root_path": "[home]/tmp/OSIT/native_app",
 
   "api_secret_key": "dFP6J9DVj9hUgIMn-fNIqg",
diff --git a/config.json.default b/config.json.default
index 515a6e4..a4e63ba 100644
--- a/config.json.default
+++ b/config.json.default
@@ -1,17 +1,21 @@
 {
   "developer_tools": false,
   "native_app_js_css_option": "default",
+  "native_app_js_css_base_url": "https://demo.oneskyit.com",
+  "native_app_js_css_base_url_bak": "https://app.oneskyit.com",
 
   "account_id": "",
-  "account_code": "",
   "event_id": "",
-  "event_code": "",
   "event_device_id": "",
-  "event_device_code": "",
   "event_location_id": "",
-  "event_location_code": "",
   "event_session_id": "",
 
+  "account_code": "",
+  "event_code": "",
+  "event_device_code": "",
+  "event_location_code": "",
+  "event_session_code": "",
+
   "app_root_path": "[home]/OSIT/native_app",
 
   "api_protocol": "https",
diff --git a/index.js b/index.js
index fc80742..bd86fac 100644
--- a/index.js
+++ b/index.js
@@ -84,6 +84,8 @@ function createWindow () {
     // and load the index.html of the app.
     if (config.native_app_js_css_option == '' || config.native_app_js_css_option == 'default') {
         win.loadFile('app/index.html');
+    } else if (config.native_app_js_css_option == 'primary') {
+        win.loadFile('app/index_primary.html');
     } else if (config.native_app_js_css_option == 'development_internal') {
         win.loadFile('app/index_development_internal.html');
     } else if (config.native_app_js_css_option == 'development_localhost') {