cyberia 3.0.2 → 3.1.3

package/src/client/Underpost.index.js

@@ -0,0 +1,36 @@
+'use strict';
+
+import { Css } from './components/core/Css.js';
+import { Responsive } from './components/core/Responsive.js';
+import { TranslateCore } from './components/core/Translate.js';
+import { LogInUnderpost } from './components/underpost/LogInUnderpost.js';
+import { LogOutUnderpost } from './components/underpost/LogOutUnderpost.js';
+import { SignUpUnderpost } from './components/underpost/SignUpUnderpost.js';
+import { MenuUnderpost } from './components/underpost/MenuUnderpost.js';
+import { RouterUnderpost } from './components/underpost/RoutesUnderpost.js';
+import { TranslateUnderpost } from './components/underpost/TranslateUnderpost.js';
+import { Worker } from './components/core/Worker.js';
+import { UnderpostParams } from './components/underpost/CommonUnderpost.js';
+import { Keyboard } from './components/core/Keyboard.js';
+import { SocketIoUnderpost } from './components/underpost/SocketIoUnderpost.js';
+import { SocketIo } from './components/core/SocketIo.js';
+import { ElementsUnderpost } from './components/underpost/ElementsUnderpost.js';
+import { CssUnderpostDark, CssUnderpostLight } from './components/underpost/CssUnderpost.js';
+
+window.onload = () =>
+  Worker.instance({
+    router: RouterUnderpost,
+    render: async () => {
+      await Css.loadThemes([CssUnderpostDark, CssUnderpostLight]);
+      await TranslateCore.Init();
+      await TranslateUnderpost.Init();
+      await Responsive.Init();
+      await MenuUnderpost.Render();
+      await SocketIo.Init({ channels: ElementsUnderpost.Data });
+      await SocketIoUnderpost.Init();
+      await LogInUnderpost();
+      await LogOutUnderpost();
+      await SignUpUnderpost();
+      await Keyboard.Init({ callBackTime: UnderpostParams.EVENT_CALLBACK_TIME });
+    },
+  });

package/src/client/components/core/AgGrid.js

@@ -13,20 +13,32 @@ const AgGrid = {
   Render: async function (options) {
     let { id, paginationOptions } = options;
     setTimeout(() => {
+      // Normalize rowSelection from deprecated string form to object form (AG Grid v32.2.1+)
+      let gridOptionsOverrides = { ...(options.gridOptions || {}) };
+      if (typeof gridOptionsOverrides.rowSelection === 'string') {
+        const mode = gridOptionsOverrides.rowSelection; // 'single' or 'multiple'
+        gridOptionsOverrides.rowSelection = {
+          mode: mode === 'multiple' ? 'multiRow' : 'singleRow',
+        };
+      }
+
       // Grid Options: Contains all of the grid configurations
       const gridOptions = {
+        // Use legacy CSS theme mode to avoid conflict with Theming API (AG Grid v33+)
+        theme: 'legacy',
         // Row Data: The data to be displayed.
         pagination: false, // Disabled by default, will be handled by the management view
         // paginationPageSize: 100,
         // suppressPaginationPanel: true, // We are using our own custom pagination component
         // rowHeight: 60,
-        enableCellChangeFlash: true,
+        // enableCellChangeFlash was removed in v35; use enableCellChangeFlash on defaultColDef instead
         defaultColDef: {
           editable: false,
           flex: 1,
           minWidth: 50,
           filter: true,
           autoHeight: true,
+          enableCellChangeFlash: true,
         },
         rowClassRules: {
           'row-new-highlight': (params) => {
@@ -76,7 +88,7 @@ const AgGrid = {
               return { field };
             })
           : [],
-        ...options.gridOptions,
+        ...gridOptionsOverrides,
       };
 
       // Your Javascript code to create the grid
@@ -86,8 +98,11 @@ const AgGrid = {
       // myGridElement.style.setProperty('width', '100%');
       ThemeEvents[id] = () => {
         if (s(`.${id}`)) {
-          s(`.${id}`).classList.remove(darkTheme ? this.theme : this.theme + '-dark');
-          s(`.${id}`).classList.add(!darkTheme ? this.theme : this.theme + '-dark');
+          // darkTheme has already been updated by Css.js when this event fires
+          // If darkTheme is true: remove light class, add dark class
+          // If darkTheme is false: remove dark class, add light class
+          s(`.${id}`).classList.remove(this.theme, this.theme + '-dark');
+          s(`.${id}`).classList.add(darkTheme ? this.theme + '-dark' : this.theme);
         } else {
           // console.warn('change theme: grid not found');
           delete ThemeEvents[id];
@@ -112,7 +127,7 @@ const AgGrid = {
       : '';
     return html`
       <div
-        class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
+        class="${id} ${darkTheme ? this.theme + '-dark' : this.theme}"
         style="${options?.style
           ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
           : ''}"

package/src/client/components/core/Alert.js

@@ -49,7 +49,7 @@ const e404 = async () => {
     <br />
     <br />${Translate.Render('page-not-found')} <br />
     <br />
-    <a href="${location.origin}">${Translate.Render('back')}</a>
+    <a target="_top" href="${location.origin}">${Translate.Render('back')}</a>
   </div>`;
 };
 
@@ -68,7 +68,7 @@ const e500 = async () => {
     <br />
     <br />${Translate.Render('page-broken')} <br />
     <br />
-    <a href="${location.origin}">${Translate.Render('back')}</a>
+    <a target="_top" href="${location.origin}">${Translate.Render('back')}</a>
   </div>`;
 };
 

package/src/client/components/core/Content.js

@@ -56,7 +56,7 @@ const attachMarkdownLinkHandlers = (containerSelector) => {
 };
 
 const Content = {
-  Render: async function (options = { idModal: '' }) {
+  Render: async function (options = { idModal: '', titleIcon: '' }) {
     const { idModal } = options;
     setTimeout(async () => {
       try {
@@ -111,11 +111,30 @@ const Content = {
           throw new Error(`no-preview-available`);
         }
 
+        // Use custom titleIcon from options, or extract from the modal's original title HTML, or fall back to default
+        const titleIcon = options.titleIcon
+          ? options.titleIcon
+          : Modal.Data[idModal] &&
+              Modal.Data[idModal].options &&
+              Modal.Data[idModal].options.title &&
+              Modal.Data[idModal].options.title.includes &&
+              Modal.Data[idModal].options.title.includes('<img')
+            ? Modal.Data[idModal].options.title.match(/<img[^>]*>/)?.[0] || html`<i class="inl far fa-file"></i>`
+            : html`<i class="inl far fa-file"></i>`;
+
+        // Preserve the original text wrapper class if present in the modal's stored title
+        const originalTitle = Modal.Data[idModal]?.options?.title || '';
+        const hasCustomTextClass = originalTitle.includes && originalTitle.includes('underpost-text-title-modal');
+        const docTitle = documentObj.title ? documentObj.title : documentObj.location;
+        const titleText = hasCustomTextClass
+          ? `<span class='inl underpost-text-title-modal'>${docTitle}</span>`
+          : docTitle;
+
         htmls(
           `.title-modal-${idModal}`,
           html`${renderViewTitle({
-            icon: html`<i class="inl far fa-file"></i>`,
-            text: `${documentObj.title ? documentObj.title : documentObj.location}`,
+            icon: titleIcon,
+            text: titleText,
           })} `,
         );
         htmls(`.content-render-${idModal}`, ``);

package/src/client/components/core/Docs.js

@@ -12,6 +12,10 @@ const Docs = {
     const docData = this.Data.find((d) => d.type === type);
     const ModalId = `modal-docs-${docData.type}`;
     const { barConfig } = await Themes[Css.currentTheme]();
+    const parentBarMode =
+      Modal.Data['modal-docs'] && Modal.Data['modal-docs'].options.barMode
+        ? Modal.Data['modal-docs'].options.barMode
+        : undefined;
 
     await Modal.Render({
       barConfig,
@@ -20,11 +24,18 @@ const Docs = {
       html: async () => {
         if (docData.renderHtml) return await docData.renderHtml();
         return html`
+          <style>
+            .iframe-${ModalId} {
+              width: 100%;
+              border: none;
+              background: white;
+              display: block;
+            }
+          </style>
           <iframe
             class="in iframe-${ModalId}"
-            style="width: 100%; border: none; background: white; display: block"
             src="${docData.url()}"
-            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox"
+            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox allow-top-navigation"
           >
           </iframe>
         `;
@@ -34,7 +45,7 @@ const Docs = {
       route: 'docs',
       slideMenu: 'modal-menu',
       observer: true,
-      barMode: 'top-bottom-bar',
+      barMode: parentBarMode,
       query: true,
       RouterInstance: Modal.Data['modal-docs'].options.RouterInstance,
     });
@@ -166,6 +177,8 @@ const Docs = {
       icon: html`<i class="fab fa-github"></i>`,
       text: `Last Release`,
       url: function () {
+        const tokenOpts = Docs.Tokens['modal-docs'];
+        if (tokenOpts && tokenOpts.lastReleaseUrl) return tokenOpts.lastReleaseUrl();
         return `https://github.com/underpostnet/pwa-microservices-template-ghpkg/`;
       },
     },
@@ -180,6 +193,8 @@ const Docs = {
       </svg>`,
       text: html`Demo`,
       url: function () {
+        const tokenOpts = Docs.Tokens['modal-docs'];
+        if (tokenOpts && tokenOpts.demoUrl) return tokenOpts.demoUrl();
         return `https://underpostnet.github.io/pwa-microservices-template-ghpkg/`;
       },
     },
@@ -204,6 +219,8 @@ const Docs = {
       icon: html`<img height="20" width="20" class="doc-icon-coverage" />`,
       text: `Coverage report`,
       url: function () {
+        const tokenOpts = Docs.Tokens['modal-docs'];
+        if (tokenOpts && tokenOpts.coverageUrl) return tokenOpts.coverageUrl();
         return `${getProxyPath()}docs/coverage`;
       },
       themeEvent: () => {
@@ -223,7 +240,7 @@ const Docs = {
     },
   ],
   Tokens: {},
-  Init: async function (options) {
+  Init: async function (options = {}) {
     const { idModal } = options;
     this.Tokens[idModal] = options;
     setTimeout(() => {
@@ -284,10 +301,14 @@ const Docs = {
           break;
       }
       tabHref = docData.url();
+      const subMenuIcon =
+        options.subMenuIcon && typeof options.subMenuIcon === 'function'
+          ? options.subMenuIcon(docData.type)
+          : docData.icon;
       docMenuRender += html`
         ${await BtnIcon.Render({
           class: `in wfa main-btn-menu submenu-btn btn-docs btn-docs-${docData.type}`,
-          label: html`<span class="inl menu-btn-icon">${docData.icon}</span
+          label: html`<span class="inl menu-btn-icon">${subMenuIcon}</span
             ><span class="menu-label-text menu-label-text-docs"> ${docData.text} </span>`,
           tabHref,
           tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption(docData.text, 'right')),
@@ -447,7 +468,10 @@ const Docs = {
                   if (s(`.docs-card-container-${item.id}`)) {
                     s(`.docs-card-container-${item.id}`).onclick = () => {
                       if (item.id.match('demo')) {
-                        location.href = 'https://underpostnet.github.io/pwa-microservices-template-ghpkg/';
+                        const demoData = Docs.Data.find((d) => d.type === 'demo');
+                        location.href = demoData
+                          ? demoData.url()
+                          : 'https://underpostnet.github.io/pwa-microservices-template-ghpkg/';
                       } else if (item.id.match('api')) {
                         if (s(`.btn-docs-api`)) s(`.btn-docs-api`).click();
                       } else {

package/src/client/components/core/FileExplorer.js

@@ -544,10 +544,13 @@ const FileExplorer = {
         this.eGui = document.createElement('div');
         const isPublic = params.data.isPublic;
         const toggleId = `toggle-public-${params.data._id}`;
+        const hasGenericFile = !!params.data.hasGenericFile;
+        const hasMdFile = !!params.data.hasMdFile;
+
         this.eGui.innerHTML = html`
           <div class="fl">
             ${await BtnIcon.Render({
-              class: `in fll management-table-btn-mini btn-file-download-${params.data._id}`,
+              class: `in fll management-table-btn-mini btn-file-download-${params.data._id}${!hasGenericFile ? ' btn-disabled' : ''}`,
               label: html` <i class="fas fa-download"></i>`,
               type: 'button',
             })}
@@ -562,10 +565,15 @@ const FileExplorer = {
               type: 'button',
             })}
             ${await BtnIcon.Render({
-              class: `in fll management-table-btn-mini btn-file-copy-content-link-${params.data._id}`,
+              class: `in fll management-table-btn-mini btn-file-copy-content-link-${params.data._id}${!hasGenericFile ? ' btn-disabled' : ''}`,
               label: html`<i class="fas fa-copy"></i>`,
               type: 'button',
             })}
+            ${await BtnIcon.Render({
+              class: `in fll management-table-btn-mini btn-file-copy-md-link-${params.data._id}${!hasMdFile ? ' btn-disabled' : ''}`,
+              label: html`<i class="fas fa-file-code"></i>`,
+              type: 'button',
+            })}
             ${await BtnIcon.Render({
               class: `in fll management-table-btn-mini btn-file-edit-${params.data._id}`,
               label: html`<i class="fas fa-edit"></i>`,
@@ -591,11 +599,46 @@ const FileExplorer = {
               ? getApiBaseUrl({ id: originObj.fileId._id, endpoint: 'file/blob' })
               : undefined;
 
+          const mdBlobUri =
+            originObj && originObj.mdFileId
+              ? getApiBaseUrl({ id: originObj.mdFileId._id, endpoint: 'file/blob' })
+              : undefined;
+
           if (!originObj) {
             s(`.btn-file-view-${params.data._id}`).classList.add('hide');
             s(`.btn-file-copy-content-link-${params.data._id}`).classList.add('hide');
           }
 
+          // Disable download button if no generic file
+          if (!hasGenericFile) {
+            const dlBtn = s(`.btn-file-download-${params.data._id}`);
+            if (dlBtn) {
+              dlBtn.style.opacity = '0.4';
+              dlBtn.style.cursor = 'not-allowed';
+              dlBtn.style.pointerEvents = 'none';
+            }
+          }
+
+          // Disable copy generic file link button if no generic file
+          if (!hasGenericFile) {
+            const copyBtn = s(`.btn-file-copy-content-link-${params.data._id}`);
+            if (copyBtn) {
+              copyBtn.style.opacity = '0.4';
+              copyBtn.style.cursor = 'not-allowed';
+              copyBtn.style.pointerEvents = 'none';
+            }
+          }
+
+          // Disable copy md file link button if no md file
+          if (!hasMdFile) {
+            const mdCopyBtn = s(`.btn-file-copy-md-link-${params.data._id}`);
+            if (mdCopyBtn) {
+              mdCopyBtn.style.opacity = '0.4';
+              mdCopyBtn.style.cursor = 'not-allowed';
+              mdCopyBtn.style.pointerEvents = 'none';
+            }
+          }
+
           EventsUI.onClick(`.btn-file-view-${params.data._id}`, async (e) => {
             e.preventDefault();
             if (location.href !== url) {
@@ -606,6 +649,7 @@ const FileExplorer = {
 
           EventsUI.onClick(`.btn-file-copy-content-link-${params.data._id}`, async (e) => {
             e.preventDefault();
+            if (!hasGenericFile || !blobUri) return;
             await copyData(blobUri);
             NotificationManager.Push({
               html: Translate.Render('success-copy-data'),
@@ -613,10 +657,21 @@ const FileExplorer = {
             });
           });
 
+          EventsUI.onClick(`.btn-file-copy-md-link-${params.data._id}`, async (e) => {
+            e.preventDefault();
+            if (!hasMdFile || !mdBlobUri) return;
+            await copyData(mdBlobUri);
+            NotificationManager.Push({
+              html: Translate.Render('success-copy-data'),
+              status: 'success',
+            });
+          });
+
           EventsUI.onClick(`.btn-file-download-${params.data._id}`, async (e) => {
             e.preventDefault();
+            if (!hasGenericFile) return;
             try {
-              // Use FileService with blob/ prefix for centralized blob fetching
+              // Use FileService with blob/ prefix for blob fetching
               const { data: blobArray, status } = await FileService.get({ id: `blob/${params.data.fileId}` });
               if (status === 'success' && blobArray && blobArray[0]) {
                 downloadFile(blobArray[0], params.data.name);
@@ -721,6 +776,12 @@ const FileExplorer = {
                     documentInstance[docIndex].isPublic = data.isPublic;
                   }
 
+                  // Refresh the isPublic column cell in the grid
+                  const rowNode = AgGrid.grids[gridFileId].getRowNode(params.node.id);
+                  if (rowNode) {
+                    rowNode.setDataValue('isPublic', data.isPublic);
+                  }
+
                   // Update button icon
                   const btnElement = s(`.${toggleId}`);
                   if (btnElement) {
@@ -1347,7 +1408,13 @@ const FileExplorer = {
                     { field: 'name', flex: 2, headerName: 'Title', cellRenderer: LoadFileNameRenderer },
                     { field: 'mdFileName', flex: 1, headerName: 'MD File Name' },
                     { field: 'fileName', flex: 1, headerName: 'Generic File Name' },
-                    { headerName: '', width: 150, cellRenderer: LoadFileActionsRenderer },
+                    {
+                      field: 'isPublic',
+                      headerName: 'Public',
+                      width: 90,
+                      cellDataType: 'boolean',
+                    },
+                    { headerName: '', width: 180, cellRenderer: LoadFileActionsRenderer },
                   ],
                 },
               })}

package/src/client/components/core/Input.js

@@ -101,7 +101,7 @@ const getFileFromFileData = (fileData) => {
 /**
  * Fetch file content from blob endpoint and create File object.
  * Used for metadata-only format files during edit mode.
- * Uses FileService with blob/ prefix for centralized blob fetching.
+ * Uses FileService with blob/ prefix for blob fetching.
  *
  * @async
  * @function getFileFromBlobEndpoint

package/src/client/components/core/Modal.js

@@ -23,6 +23,7 @@ import {
   coreUI,
   sanitizeRoute,
   getQueryParams,
+  setRouterReady,
 } from './Router.js';
 import { NotificationManager } from './NotificationManager.js';
 import { EventsUI } from './EventsUI.js';
@@ -1401,6 +1402,7 @@ const Modal = {
                 }
               });
               setTimeout(window.onresize);
+              setRouterReady();
             });
           })();
           break;
@@ -2422,20 +2424,34 @@ const Modal = {
   },
 };
 
-const renderMenuLabel = ({ img, text, icon }) => {
-  if (!img) return html`<span class="inl menu-btn-icon">${icon}</span> ${text}`;
-  return html`<img class="abs center img-btn-square-menu" src="${getProxyPath()}assets/ui-icons/${img}" />
+const renderMenuLabel = ({ img, src, text, icon }) => {
+  if (!img && !src) return html`<span class="inl menu-btn-icon">${icon}</span> ${text}`;
+  const imgSrc = src ? src : `${getProxyPath()}assets/ui-icons/${img}`;
+  return html`<img class="abs center img-btn-square-menu" src="${imgSrc}" />
     <div class="abs center main-btn-menu-text">${text}</div>`;
 };
 
 const renderViewTitle = (
-  options = { icon: '', img: '', text: '', assetFolder: '', 'ui-icons': '', dim, top, topText: '' },
+  options = {
+    icon: '',
+    img: '',
+    text: '',
+    assetFolder: '',
+    'ui-icon': '',
+    imgClass: '',
+    textClass: '',
+    dim,
+    top,
+    topText: '',
+  },
 ) => {
   if (options.dim === undefined) options.dim = 30;
   const { img, text, icon, dim, top } = options;
   if (!img && !options['ui-icon']) return html`<span class="view-title-icon">${icon}</span> ${text}`;
+  const imgClass = options.imgClass || 'abs img-btn-square-view-title';
+  const textClass = options.textClass || 'in text-btn-square-view-title';
   return html`<img
-      class="abs img-btn-square-view-title"
+      class="${imgClass}"
       style="${renderCssAttr({
         style: {
           width: `${dim}px`,
@@ -2448,7 +2464,7 @@ const renderViewTitle = (
         : img}"
     />
     <div
-      class="in text-btn-square-view-title"
+      class="${textClass}"
       style="${renderCssAttr({
         style: {
           // 'padding-left': `${20 + dim}px`,

package/src/client/components/core/PublicProfile.js

@@ -196,7 +196,7 @@ const PublicProfile = {
       user: { _id: userId, username },
     } = options;
     const idModal = options.idModal || getId();
-    const profileId = `public-profile-${userId}`;
+    const profileId = `public-profile-${username}`;
     const waveAnimationId = `${profileId}-wave`;
     const profileImageClass = `${profileId}-image`;
     const profileContainerId = `${profileId}-container`;
@@ -673,7 +673,7 @@ const PublicProfile = {
             "
           >
             <div
-              class="${profileId}-image-container"
+              class="${profileId}-image-container public-profile-image-container"
               style="
                 position: relative;
                 width: 160px;
@@ -688,7 +688,7 @@ const PublicProfile = {
               "
             >
               <img
-                class="${profileImageClass}"
+                class="${profileImageClass} public-profile-image"
                 style="
                   width: 100%;
                   height: 100%;

package/src/client/components/core/RichText.js

@@ -30,10 +30,9 @@ const RichText = {
     return html` <style>
         .md-container {
           background: white;
-          color: black;
         }
         .md-container button {
-          color: black !important;
+          color: black;
         }
       </style>
       <div class="in md-container"><textarea class="${id}"></textarea></div>`;

package/src/client/components/core/Router.js

@@ -39,6 +39,36 @@ const coreUI = ['modal-menu', 'main-body', 'main-body-top', 'bottom-bar', 'board
  */
 const closeModalRouteChangeEvents = {};
 
+/**
+ * Deferred promise that resolves once the full UI (including deferred slide-menu DOM
+ * setup in Modal) is ready.  Any code that depends on the complete DOM — route handlers,
+ * session callbacks, panel updates, etc. — can simply `await RouterReady` instead of
+ * scattering individual null-checks across every microfrontend.
+ *
+ * Resolved by calling `setRouterReady()`, which should happen exactly once at the end
+ * of Modal's deferred slide-menu `setTimeout` block.
+ * @type {Promise<void>}
+ * @memberof PwaRouter
+ */
+let _routerReadyResolve;
+const RouterReady = new Promise((resolve) => {
+  _routerReadyResolve = resolve;
+});
+
+/**
+ * Signals that the deferred UI setup is complete and the router (and any other
+ * awaiter of `RouterReady`) may safely access the full DOM.
+ * This must be called exactly once – typically at the end of Modal's deferred
+ * slide-menu `setTimeout` block.
+ * @memberof PwaRouter
+ */
+const setRouterReady = () => {
+  if (_routerReadyResolve) {
+    _routerReadyResolve();
+    _routerReadyResolve = undefined;
+  }
+};
+
 /**
  * Determines the base path for the application, often used for routing within a sub-directory.
  * It checks the current URL's pathname and `window.Routes` to return the appropriate proxy path.
@@ -209,7 +239,8 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent() })
  * @param {object} RouterInstance - The router instance configuration, including the `Routes` function.
  * @memberof PwaRouter
  */
-const LoadRouter = function (RouterInstance) {
+const LoadRouter = async function (RouterInstance) {
+  await RouterReady;
   Router(RouterInstance);
   window.onpopstate = (e) => {
     Router({ ...RouterInstance, e });
@@ -466,4 +497,6 @@ export {
   sanitizeRoute,
   queryParamsChangeListeners,
   listenQueryParamsChange,
+  setRouterReady,
+  RouterReady,
 };

package/src/client/components/core/Worker.js

@@ -135,7 +135,7 @@ class PwaWorker {
     const isInstall = await this.status();
     if (!isInstall) await this.install();
     await render();
-    LoadRouter(this.RouterInstance);
+    await LoadRouter(this.RouterInstance);
     LoadingAnimation.removeSplashScreen();
     if (this.devMode()) {
       // const delayLiveReload = 1250;

package/src/client/components/cryptokoyn/CssCryptokoyn.js

@@ -30,6 +30,7 @@ const CssCommonCryptokoyn = async () => {
         --cy-font-retro: 'retro-font';
         --cy-font-retro-title: 'retro-font-title';
         --cy-font-retro-sensitive: 'retro-font-sensitive';
+        --cy-font-retro-cta: 'retro-font-cta';
       }
 
       @font-face {
@@ -44,6 +45,64 @@ const CssCommonCryptokoyn = async () => {
         font-family: 'retro-font-sensitive';
         src: URL('${getProxyPath()}assets/fonts/VT323-Regular.ttf') format('truetype');
       }
+      @font-face {
+        font-family: 'retro-font-cta';
+        src: URL('${getProxyPath()}assets/fonts/PressStart2P-Regular.ttf') format('truetype');
+      }
+
+      /* Landing Page & Object Viewer Styles */
+      .landing-container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100vh;
+        width: 100%;
+        background: #000;
+        color: #fff;
+        text-align: center;
+      }
+
+      .landing-title,
+      h1,
+      h2,
+      h3 {
+        font-family: var(--cy-font-retro-cta);
+        font-size: 5rem;
+        color: #ff0d0d;
+        text-shadow: 2px 2px 0px #9e0808;
+        margin-bottom: 2rem;
+      }
+
+      p {
+        font-family: var(--cy-font-retro);
+      }
+
+      .object-layer-viewer-container {
+        width: 100% !important;
+        font-family: var(--cy-font-retro);
+      }
+
+      .cta-button {
+        font-family: var(--cy-font-retro-cta);
+        font-size: 1.5rem;
+        padding: 1rem 2rem;
+        border: 3px solid #ff0d0d;
+        background: transparent;
+        color: #ff0d0d;
+        cursor: pointer;
+        transition: all 0.3s ease-in-out;
+        text-shadow: 1px 1px 0px #9e0808;
+      }
+
+      .cta-button:hover {
+        background: #ff0d0d;
+        color: #000;
+        box-shadow:
+          0 0 20px #ff0d0d,
+          0 0 40px #ff0d0d;
+        text-shadow: none;
+      }
 
       /* Base typography and smoothing */
 
@@ -86,6 +145,9 @@ const CssCommonCryptokoyn = async () => {
       .main-btn-menu {
         font-size: 20px;
       }
+      .input-container {
+        width: 278px;
+      }
     </style>
 
     <div class="ag-grid-style"></div>`;
@@ -137,7 +199,7 @@ const CssCryptokoynLight = {
           }
           .default-slide-menu-top-bar-fix-title-container-text {
             font-size: 40px !important;
-            color: yellow !important;
+            color: #ffcc00 !important;
           }
         </style>
         ${borderChar(1, `#010101`, ['.default-slide-menu-top-bar-fix-title-container-text'])}