@innovastudio/contentbuilder 1.4.150 → 1.5.0

package/public/contentbuilder/themes/light-red.css

@@ -401,6 +401,28 @@
 .light .is-ui .is-rte-pop.rte-textsetting-options button:focus {
   background: #ffcece;
 }
+.light #_cbhtml .is-rte-pop.rte-icon-options input[type=text],
+.light .is-ui .is-rte-pop.rte-icon-options input[type=text] {
+  color: rgba(0, 0, 0, 0.95);
+  background: rgba(255, 175, 175, 0.4);
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
+}
+.light #_cbhtml .is-rte-pop.rte-icon-options #inpRteIconSearch::placeholder,
+.light .is-ui .is-rte-pop.rte-icon-options #inpRteIconSearch::placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.light #_cbhtml .is-rte-pop.rte-fontfamily-options input[type=text],
+.light .is-ui .is-rte-pop.rte-fontfamily-options input[type=text] {
+  color: rgba(0, 0, 0, 0.95);
+  background: rgba(255, 175, 175, 0.4);
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
+}
+.light #_cbhtml .is-rte-pop.rte-fontfamily-options #inpRteFontSearch::placeholder,
+.light .is-ui .is-rte-pop.rte-fontfamily-options #inpRteFontSearch::placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
 .light #_cbhtml .is-rte-pop.rte-color-picker button,
 .light .is-ui .is-rte-pop.rte-color-picker button {
   color: rgba(0, 0, 0, 0.95);
@@ -678,6 +700,18 @@
 .light .is-ui .is-modal.pickcolor .is-color-preview {
   border: transparent 1px solid;
 }
+.light #_cbhtml .is-modal.snippetwindow,
+.light .is-ui .is-modal.snippetwindow {
+  background-color: #f5f2f2;
+}
+.light #_cbhtml .is-modal.snippetwindow .is-modal-bar,
+.light .is-ui .is-modal.snippetwindow .is-modal-bar {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+.light #_cbhtml .is-modal.snippetwindow .select-styled,
+.light .is-ui .is-modal.snippetwindow .select-styled {
+  border-bottom: 1px solid #bababa38;
+}
 .light #_cbhtml .is-modal.pickcolormore div.is-modal-content > div,
 .light .is-ui .is-modal.pickcolormore div.is-modal-content > div {
   opacity: 0.9;
@@ -752,26 +786,26 @@
 .light .is-ui .is-tool.is-table-tool > button svg {
   fill: #000;
 }
-.light #_cbhtml .is-tool.is-code-tool > button, .light #_cbhtml .is-tool.is-module-tool > button,
+.light #_cbhtml .is-tool.is-code-tool > button, .light #_cbhtml .is-tool.is-module-tool > button, .light #_cbhtml .is-tool.is-svg-tool > button,
 .light .is-ui .is-tool.is-code-tool > button,
-.light .is-ui .is-tool.is-module-tool > button {
+.light .is-ui .is-tool.is-module-tool > button,
+.light .is-ui .is-tool.is-svg-tool > button {
   background: #efeeee;
 }
-.light #_cbhtml .is-tool.is-code-tool > button svg, .light #_cbhtml .is-tool.is-module-tool > button svg,
+.light #_cbhtml .is-tool.is-code-tool > button svg, .light #_cbhtml .is-tool.is-module-tool > button svg, .light #_cbhtml .is-tool.is-svg-tool > button svg,
 .light .is-ui .is-tool.is-code-tool > button svg,
-.light .is-ui .is-tool.is-module-tool > button svg {
+.light .is-ui .is-tool.is-module-tool > button svg,
+.light .is-ui .is-tool.is-svg-tool > button svg {
   fill: #000;
 }
-.light #_cbhtml .is-tool#divLinkTool button, .light #_cbhtml .is-tool#divButtonTool button, .light #_cbhtml .is-tool#divSvgTool button,
+.light #_cbhtml .is-tool#divLinkTool button, .light #_cbhtml .is-tool#divButtonTool button,
 .light .is-ui .is-tool#divLinkTool button,
-.light .is-ui .is-tool#divButtonTool button,
-.light .is-ui .is-tool#divSvgTool button {
+.light .is-ui .is-tool#divButtonTool button {
   background: #efeeee;
 }
-.light #_cbhtml .is-tool#divLinkTool button svg, .light #_cbhtml .is-tool#divButtonTool button svg, .light #_cbhtml .is-tool#divSvgTool button svg,
+.light #_cbhtml .is-tool#divLinkTool button svg, .light #_cbhtml .is-tool#divButtonTool button svg,
 .light .is-ui .is-tool#divLinkTool button svg,
-.light .is-ui .is-tool#divButtonTool button svg,
-.light .is-ui .is-tool#divSvgTool button svg {
+.light .is-ui .is-tool#divButtonTool button svg {
   fill: #000;
 }
 .light #_cbhtml #divImageProgress,
@@ -1018,49 +1052,6 @@
 .light .is-ui .is-selectbox-options > div.selected {
   background: #f9d0d0;
 }
-.light #_cbhtml .is-dropdown .dropdown-toggle,
-.light .is-ui .is-dropdown .dropdown-toggle {
-  color: #000;
-  background: #fbe2e2;
-  box-shadow: none;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle:hover,
-.light .is-ui .is-dropdown .dropdown-toggle:hover {
-  background: #fce6e6;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle svg,
-.light .is-ui .is-dropdown .dropdown-toggle svg {
-  fill: #000;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle::after,
-.light .is-ui .is-dropdown .dropdown-toggle::after {
-  border-top-color: #000;
-  border-bottom-color: transparent;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle.active::after,
-.light .is-ui .is-dropdown .dropdown-toggle.active::after {
-  border-bottom-color: #000;
-  border-top-color: transparent;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu,
-.light .is-ui .is-dropdown .dropdown-menu {
-  border: transparent 1px solid;
-  background-color: #fbe2e2;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu li,
-.light .is-ui .is-dropdown .dropdown-menu li {
-  color: #000;
-  background-color: #fbe2e2;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu li:hover, .light #_cbhtml .is-dropdown .dropdown-menu li:focus,
-.light .is-ui .is-dropdown .dropdown-menu li:hover,
-.light .is-ui .is-dropdown .dropdown-menu li:focus {
-  background: #f9d0d0;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu li.selected,
-.light .is-ui .is-dropdown .dropdown-menu li.selected {
-  background: #f9d0d0;
-}
 .light #_cbhtml .elementstyles .elm-list,
 .light .is-ui .elementstyles .elm-list {
   color: rgba(0, 0, 0, 0.95);
@@ -1275,3 +1266,23 @@
 .light .scroll-darker *::-webkit-scrollbar-thumb {
   background-color: rgba(78, 78, 78, 0.62);
 }
+.light .custom-select .select-styled span {
+  color: #000;
+}
+.light .custom-select input {
+  background: #fbe2e2;
+}
+.light .custom-select .select-options {
+  border: transparent 1px solid;
+  background-color: #fbe2e2;
+  color: #000;
+}
+.light .custom-select .select-options li {
+  color: #000;
+}
+.light .custom-select .select-options li:hover {
+  background-color: #f9d0d0;
+}
+.light .custom-select .select-options li.selected {
+  background-color: #f9d0d0;
+}

package/public/contentbuilder/themes/light-yellow.css

@@ -401,6 +401,28 @@
 .light .is-ui .is-rte-pop.rte-textsetting-options button:focus {
   background: #f6efc7;
 }
+.light #_cbhtml .is-rte-pop.rte-icon-options input[type=text],
+.light .is-ui .is-rte-pop.rte-icon-options input[type=text] {
+  color: rgba(0, 0, 0, 0.95);
+  background: rgba(242, 231, 173, 0.4);
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
+}
+.light #_cbhtml .is-rte-pop.rte-icon-options #inpRteIconSearch::placeholder,
+.light .is-ui .is-rte-pop.rte-icon-options #inpRteIconSearch::placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.light #_cbhtml .is-rte-pop.rte-fontfamily-options input[type=text],
+.light .is-ui .is-rte-pop.rte-fontfamily-options input[type=text] {
+  color: rgba(0, 0, 0, 0.95);
+  background: rgba(242, 231, 173, 0.4);
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
+}
+.light #_cbhtml .is-rte-pop.rte-fontfamily-options #inpRteFontSearch::placeholder,
+.light .is-ui .is-rte-pop.rte-fontfamily-options #inpRteFontSearch::placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
 .light #_cbhtml .is-rte-pop.rte-color-picker button,
 .light .is-ui .is-rte-pop.rte-color-picker button {
   color: rgba(0, 0, 0, 0.95);
@@ -678,6 +700,18 @@
 .light .is-ui .is-modal.pickcolor .is-color-preview {
   border: transparent 1px solid;
 }
+.light #_cbhtml .is-modal.snippetwindow,
+.light .is-ui .is-modal.snippetwindow {
+  background-color: #faf8ef;
+}
+.light #_cbhtml .is-modal.snippetwindow .is-modal-bar,
+.light .is-ui .is-modal.snippetwindow .is-modal-bar {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+.light #_cbhtml .is-modal.snippetwindow .select-styled,
+.light .is-ui .is-modal.snippetwindow .select-styled {
+  border-bottom: 1px solid #bababa38;
+}
 .light #_cbhtml .is-modal.pickcolormore div.is-modal-content > div,
 .light .is-ui .is-modal.pickcolormore div.is-modal-content > div {
   opacity: 0.9;
@@ -752,26 +786,26 @@
 .light .is-ui .is-tool.is-table-tool > button svg {
   fill: #000;
 }
-.light #_cbhtml .is-tool.is-code-tool > button, .light #_cbhtml .is-tool.is-module-tool > button,
+.light #_cbhtml .is-tool.is-code-tool > button, .light #_cbhtml .is-tool.is-module-tool > button, .light #_cbhtml .is-tool.is-svg-tool > button,
 .light .is-ui .is-tool.is-code-tool > button,
-.light .is-ui .is-tool.is-module-tool > button {
+.light .is-ui .is-tool.is-module-tool > button,
+.light .is-ui .is-tool.is-svg-tool > button {
   background: #efefe6;
 }
-.light #_cbhtml .is-tool.is-code-tool > button svg, .light #_cbhtml .is-tool.is-module-tool > button svg,
+.light #_cbhtml .is-tool.is-code-tool > button svg, .light #_cbhtml .is-tool.is-module-tool > button svg, .light #_cbhtml .is-tool.is-svg-tool > button svg,
 .light .is-ui .is-tool.is-code-tool > button svg,
-.light .is-ui .is-tool.is-module-tool > button svg {
+.light .is-ui .is-tool.is-module-tool > button svg,
+.light .is-ui .is-tool.is-svg-tool > button svg {
   fill: #000;
 }
-.light #_cbhtml .is-tool#divLinkTool button, .light #_cbhtml .is-tool#divButtonTool button, .light #_cbhtml .is-tool#divSvgTool button,
+.light #_cbhtml .is-tool#divLinkTool button, .light #_cbhtml .is-tool#divButtonTool button,
 .light .is-ui .is-tool#divLinkTool button,
-.light .is-ui .is-tool#divButtonTool button,
-.light .is-ui .is-tool#divSvgTool button {
+.light .is-ui .is-tool#divButtonTool button {
   background: #efefe6;
 }
-.light #_cbhtml .is-tool#divLinkTool button svg, .light #_cbhtml .is-tool#divButtonTool button svg, .light #_cbhtml .is-tool#divSvgTool button svg,
+.light #_cbhtml .is-tool#divLinkTool button svg, .light #_cbhtml .is-tool#divButtonTool button svg,
 .light .is-ui .is-tool#divLinkTool button svg,
-.light .is-ui .is-tool#divButtonTool button svg,
-.light .is-ui .is-tool#divSvgTool button svg {
+.light .is-ui .is-tool#divButtonTool button svg {
   fill: #000;
 }
 .light #_cbhtml #divImageProgress,
@@ -1018,49 +1052,6 @@
 .light .is-ui .is-selectbox-options > div.selected {
   background: #f0eccf;
 }
-.light #_cbhtml .is-dropdown .dropdown-toggle,
-.light .is-ui .is-dropdown .dropdown-toggle {
-  color: #000;
-  background: #f5f2df;
-  box-shadow: none;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle:hover,
-.light .is-ui .is-dropdown .dropdown-toggle:hover {
-  background: #f6f4e3;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle svg,
-.light .is-ui .is-dropdown .dropdown-toggle svg {
-  fill: #000;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle::after,
-.light .is-ui .is-dropdown .dropdown-toggle::after {
-  border-top-color: #000;
-  border-bottom-color: transparent;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle.active::after,
-.light .is-ui .is-dropdown .dropdown-toggle.active::after {
-  border-bottom-color: #000;
-  border-top-color: transparent;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu,
-.light .is-ui .is-dropdown .dropdown-menu {
-  border: transparent 1px solid;
-  background-color: #f5f2df;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu li,
-.light .is-ui .is-dropdown .dropdown-menu li {
-  color: #000;
-  background-color: #f5f2df;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu li:hover, .light #_cbhtml .is-dropdown .dropdown-menu li:focus,
-.light .is-ui .is-dropdown .dropdown-menu li:hover,
-.light .is-ui .is-dropdown .dropdown-menu li:focus {
-  background: #f0eccf;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu li.selected,
-.light .is-ui .is-dropdown .dropdown-menu li.selected {
-  background: #f0eccf;
-}
 .light #_cbhtml .elementstyles .elm-list,
 .light .is-ui .elementstyles .elm-list {
   color: rgba(0, 0, 0, 0.95);
@@ -1275,3 +1266,23 @@
 .light .scroll-darker *::-webkit-scrollbar-thumb {
   background-color: rgba(78, 78, 78, 0.62);
 }
+.light .custom-select .select-styled span {
+  color: #000;
+}
+.light .custom-select input {
+  background: #f5f2df;
+}
+.light .custom-select .select-options {
+  border: transparent 1px solid;
+  background-color: #f5f2df;
+  color: #000;
+}
+.light .custom-select .select-options li {
+  color: #000;
+}
+.light .custom-select .select-options li:hover {
+  background-color: #f0eccf;
+}
+.light .custom-select .select-options li.selected {
+  background-color: #f0eccf;
+}

package/public/contentbuilder/themes/light-yellow2.css

@@ -401,6 +401,28 @@
 .light .is-ui .is-rte-pop.rte-textsetting-options button:focus {
   background: #ffeb9d;
 }
+.light #_cbhtml .is-rte-pop.rte-icon-options input[type=text],
+.light .is-ui .is-rte-pop.rte-icon-options input[type=text] {
+  color: rgba(0, 0, 0, 0.95);
+  background: rgba(255, 229, 126, 0.4);
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
+}
+.light #_cbhtml .is-rte-pop.rte-icon-options #inpRteIconSearch::placeholder,
+.light .is-ui .is-rte-pop.rte-icon-options #inpRteIconSearch::placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
+.light #_cbhtml .is-rte-pop.rte-fontfamily-options input[type=text],
+.light .is-ui .is-rte-pop.rte-fontfamily-options input[type=text] {
+  color: rgba(0, 0, 0, 0.95);
+  background: rgba(255, 229, 126, 0.4);
+  border: none;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.45);
+}
+.light #_cbhtml .is-rte-pop.rte-fontfamily-options #inpRteFontSearch::placeholder,
+.light .is-ui .is-rte-pop.rte-fontfamily-options #inpRteFontSearch::placeholder {
+  color: rgba(0, 0, 0, 0.6);
+}
 .light #_cbhtml .is-rte-pop.rte-color-picker button,
 .light .is-ui .is-rte-pop.rte-color-picker button {
   color: rgba(0, 0, 0, 0.95);
@@ -678,6 +700,18 @@
 .light .is-ui .is-modal.pickcolor .is-color-preview {
   border: transparent 1px solid;
 }
+.light #_cbhtml .is-modal.snippetwindow,
+.light .is-ui .is-modal.snippetwindow {
+  background-color: #e5e4e2;
+}
+.light #_cbhtml .is-modal.snippetwindow .is-modal-bar,
+.light .is-ui .is-modal.snippetwindow .is-modal-bar {
+  background-color: rgba(255, 255, 255, 0.12);
+}
+.light #_cbhtml .is-modal.snippetwindow .select-styled,
+.light .is-ui .is-modal.snippetwindow .select-styled {
+  border-bottom: 1px solid #bababa38;
+}
 .light #_cbhtml .is-modal.pickcolormore div.is-modal-content > div,
 .light .is-ui .is-modal.pickcolormore div.is-modal-content > div {
   opacity: 0.9;
@@ -752,26 +786,26 @@
 .light .is-ui .is-tool.is-table-tool > button svg {
   fill: #000;
 }
-.light #_cbhtml .is-tool.is-code-tool > button, .light #_cbhtml .is-tool.is-module-tool > button,
+.light #_cbhtml .is-tool.is-code-tool > button, .light #_cbhtml .is-tool.is-module-tool > button, .light #_cbhtml .is-tool.is-svg-tool > button,
 .light .is-ui .is-tool.is-code-tool > button,
-.light .is-ui .is-tool.is-module-tool > button {
+.light .is-ui .is-tool.is-module-tool > button,
+.light .is-ui .is-tool.is-svg-tool > button {
   background: #edece6;
 }
-.light #_cbhtml .is-tool.is-code-tool > button svg, .light #_cbhtml .is-tool.is-module-tool > button svg,
+.light #_cbhtml .is-tool.is-code-tool > button svg, .light #_cbhtml .is-tool.is-module-tool > button svg, .light #_cbhtml .is-tool.is-svg-tool > button svg,
 .light .is-ui .is-tool.is-code-tool > button svg,
-.light .is-ui .is-tool.is-module-tool > button svg {
+.light .is-ui .is-tool.is-module-tool > button svg,
+.light .is-ui .is-tool.is-svg-tool > button svg {
   fill: #000;
 }
-.light #_cbhtml .is-tool#divLinkTool button, .light #_cbhtml .is-tool#divButtonTool button, .light #_cbhtml .is-tool#divSvgTool button,
+.light #_cbhtml .is-tool#divLinkTool button, .light #_cbhtml .is-tool#divButtonTool button,
 .light .is-ui .is-tool#divLinkTool button,
-.light .is-ui .is-tool#divButtonTool button,
-.light .is-ui .is-tool#divSvgTool button {
+.light .is-ui .is-tool#divButtonTool button {
   background: #edece6;
 }
-.light #_cbhtml .is-tool#divLinkTool button svg, .light #_cbhtml .is-tool#divButtonTool button svg, .light #_cbhtml .is-tool#divSvgTool button svg,
+.light #_cbhtml .is-tool#divLinkTool button svg, .light #_cbhtml .is-tool#divButtonTool button svg,
 .light .is-ui .is-tool#divLinkTool button svg,
-.light .is-ui .is-tool#divButtonTool button svg,
-.light .is-ui .is-tool#divSvgTool button svg {
+.light .is-ui .is-tool#divButtonTool button svg {
   fill: #000;
 }
 .light #_cbhtml #divImageProgress,
@@ -1018,49 +1052,6 @@
 .light .is-ui .is-selectbox-options > div.selected {
   background: #f7e7a6;
 }
-.light #_cbhtml .is-dropdown .dropdown-toggle,
-.light .is-ui .is-dropdown .dropdown-toggle {
-  color: #000;
-  background: #f9ecb9;
-  box-shadow: none;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle:hover,
-.light .is-ui .is-dropdown .dropdown-toggle:hover {
-  background: #f9edbe;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle svg,
-.light .is-ui .is-dropdown .dropdown-toggle svg {
-  fill: #000;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle::after,
-.light .is-ui .is-dropdown .dropdown-toggle::after {
-  border-top-color: #000;
-  border-bottom-color: transparent;
-}
-.light #_cbhtml .is-dropdown .dropdown-toggle.active::after,
-.light .is-ui .is-dropdown .dropdown-toggle.active::after {
-  border-bottom-color: #000;
-  border-top-color: transparent;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu,
-.light .is-ui .is-dropdown .dropdown-menu {
-  border: transparent 1px solid;
-  background-color: #f9ecb9;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu li,
-.light .is-ui .is-dropdown .dropdown-menu li {
-  color: #000;
-  background-color: #f9ecb9;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu li:hover, .light #_cbhtml .is-dropdown .dropdown-menu li:focus,
-.light .is-ui .is-dropdown .dropdown-menu li:hover,
-.light .is-ui .is-dropdown .dropdown-menu li:focus {
-  background: #f7e7a6;
-}
-.light #_cbhtml .is-dropdown .dropdown-menu li.selected,
-.light .is-ui .is-dropdown .dropdown-menu li.selected {
-  background: #f7e7a6;
-}
 .light #_cbhtml .elementstyles .elm-list,
 .light .is-ui .elementstyles .elm-list {
   color: rgba(0, 0, 0, 0.95);
@@ -1275,3 +1266,23 @@
 .light .scroll-darker *::-webkit-scrollbar-thumb {
   background-color: rgba(78, 78, 78, 0.62);
 }
+.light .custom-select .select-styled span {
+  color: #000;
+}
+.light .custom-select input {
+  background: #f9ecb9;
+}
+.light .custom-select .select-options {
+  border: transparent 1px solid;
+  background-color: #f9ecb9;
+  color: #000;
+}
+.light .custom-select .select-options li {
+  color: #000;
+}
+.light .custom-select .select-options li:hover {
+  background-color: #f7e7a6;
+}
+.light .custom-select .select-options li.selected {
+  background-color: #f7e7a6;
+}

package/readme.txt

@@ -1,21 +1,106 @@
-ContentBuilder.js 5.3.13
+ContentBuilder.js 5.4
 
-To get started, please see the documentation:
+Note: If you have Source Code package (Super license), please refer to:
 
-https://demo.innovastudio.com/docs/ContentBuilder.pdf
+    readme-sourcecode.txt
 
-For Source Code Package only: please see readme-sourcecode.txt
+    for additional information.
 
-To try the example:
+Documentation:
 
-Copy all files into your localhost and open: 
+    https://demo.innovastudio.com/docs/ContentBuilder.pdf
 
-http://localhost/.../public/example1.html
 
-_____________________________________________
-SUPPORT:
+Getting started
+
+You can choose to run the HTML, PHP or JavaScript project examples:
+
+A. To try the HTML example:
+
+    1. Unzip the project files:
+
+       - ContentBuilder/
+
+    2. Open terminal, go to the project directory and install the required server dependencies.
+       The example is using Node.js server.
+
+        > cd ContentBuilder
+
+        > npm install
+
+            Note: To run this command, you need to have NPM installed.
+            Download & install NPM from https://nodejs.org/en/download/.
+
+    3. Run the server:
+
+        > node server.js
+
+    3. Open from your browser:
+
+        http://localhost:8081/example.html 
+
+
+B. To try the PHP Example, open from your browser:
+
+    http://localhost/.../public/example.php
+ 
+    If you're using Visual Studio Code, you can use the PHP Server extension.
+
+
+C. To try the JavaScript project, install the dependencies and start the project:
+
+        > npm install
+
+        > npm start
 
-Email us at: support@innovastudio.com
+    A browser window will be opened with the example running.
 
+    Note:
+        The code for this project is:
+            
+            src/index.js
 
+        The project is using Node.js server:
+
+            server.js
+
+
+NOTE:
+
+- To use the AI Assistant:
+    1. Obtain the OpenAI API key from https://openai.com.
+    2. Update the .env file with your API key.
+
+            OPENAI_API_KEY=YOUR_API_KEY
+
+       Alternatively, if you're using PHP, update the api/config.php file with your API key:
+
+            $OPENAI_API_KEY = 'YOUR_API_KEY';
+
+- For speech recognition (if dictation is enabled), the browser's built-in
+    speech recognition is used. However, certain browsers may not support this feature.
+    We recommend using Deepgram for browser compatibility and accuracy.
+    Obtain the Deepgram API key from https://deepgram.com and update the .env file with your API key.
+    Then enable the 'speechTranscribeUrl' parameter in the ContentBuilder initialization (src/index.js).
+
+- To use the AI image generation:
+    1. Obtain the API key from https://getimg.ai/tools/api.
+    2. Update the .env file with your API key.
+
+            GETIMG_API_KEY=YOUR_API_KEY
+
+       Alternatively, if you're using PHP, update the 'api/config.php' file with your API key:
+
+            $GETIMG_API_KEY = 'YOUR_API_KEY';
+
+
+- IMPORTANT: 
+
+    Please add your own security to the API endpoints (public/api/)!
+
+
+
+_____________________________________________
+SUPPORT:
 
+Email us at: support@innovastudio.com