Add files via upload

dspasyuk · Jul 24, 2024 · 70c1755 · 70c1755
1 parent 42092ac
commit 70c1755
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 34 deletions.
diff --git a/public/css/default.min.css b/public/css/default.min.css
@@ -33,7 +33,9 @@ SOFTWARE.
   margin-left: 2%;
   margin-right: 1%;
   padding: 10px;
-  border-radius: 10px;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
   font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
   font-size: 95%;
 }

diff --git a/public/css/index.css b/public/css/index.css
@@ -291,7 +291,7 @@ code {
   border-bottom-right-radius: var(--corner);
   border: none !important;
   outline: none !important;
-  color: var(--btn-outline) !important;
+  color: var(--btn-stop) !important;
   background-color: var(--btn-send) !important;
   align-self: stretch;
   text-align: center;
@@ -553,14 +553,73 @@ ul {
   margin: 0 40%;
 }
 
+iframe{
+  border: none;
+}
+
 .renderHTML{
-  background: #ffffff;
+  background: #b9b4d6;
   margin-left: 2%;
   margin-right: 1%;
   color: #000;
-  margin-top: 10px;
-  margin-bottom: 10px;
-  padding: 10px;
-  border: 1px solid black;
-  border-radius: 10px;
+  border-top-right-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
+  margin-bottom: 20px;
 }
+/* tabs */
+.tab {
+  display: inline-block;
+  margin-left: 2%;
+  height: 35px;
+  border:none;
+  margin-bottom:-8px;
+}
+
+/* Style the buttons inside the tab */
+.tab .tablinks {
+  background-color:#0b070f;
+  float: left;
+  border: none;
+  outline: none;
+  width:80px;
+  height: 35px;
+  cursor: pointer;
+  padding: 5px 5px;
+  margin-right:3px;
+  border-top: 1px solid #1f142b;
+  border-right: 1px solid #1f142b;
+  border-left: 1px solid #1f142b;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+  transition: 0.3s;
+  font-size: 14px;
+  color:#9b61d8;
+  z-index: 2;
+}
+
+/* Change background color of buttons on hover */
+.tab .tablinks:hover {
+  background-color: #3f1f64;
+  color: white;
+}
+
+/* Create an active/current tablink class */
+.tab .tablinks.active {
+  background-color: #0c0313;
+  color: #fff;
+}
+
+/* Style the tab content */
+.tabcontent {
+  display: none;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-top: none;
+}
+
+.hide{
+  display: none;
+  height: 0px;
+  margin-bottom: 0;
+}
diff --git a/public/js/webui.js b/public/js/webui.js
@@ -11,6 +11,27 @@ cui.disableHeaderPlugin = function(md) {
     return '';
   };
 }
+cui.openTab = function(button, tabName) {
+  const tabContainer = button.closest('.tab');
+  const codeblock = tabContainer.nextElementSibling.nextElementSibling;
+  const renderHTML = tabContainer.nextElementSibling;
+  const tabButtons = tabContainer.querySelectorAll('.tablinks');
+  for (let i = 0; i < tabButtons.length; i++) {
+    tabButtons[i].classList.remove('active');
+  }
+  button.classList.add("active");
+
+  console.log(tabName)
+  if (tabName === 'codeblock') {
+    codeblock.classList.remove('hide');
+    renderHTML.classList.add('hide');
+  } else if (tabName === 'previewblock') {
+    cui.toggleEscapeHtml(renderHTML, codeblock);
+    codeblock.classList.add('hide');
+    renderHTML.classList.remove('hide');
+
+  }
+}
 
 cui.mcopyplugin =function(md) {
   const defaultFence = md.renderer.rules.fence || function(tokens, idx, options, env, self) {
@@ -21,53 +42,48 @@ cui.mcopyplugin =function(md) {
 
     // Inject the copy button into the existing container
     return `
-      <div class="code-block-wrapper" style="position: relative;">
+      <div class="tab">
+        <button class="tablinks active" onclick="cui.openTab(this, 'codeblock')">code</button>
+        <button class="tablinks" onclick="cui.openTab(this, 'previewblock')">preview</button>
+      </div>
+      <div class="code-block-wrapper renderHTML hide" style="position: relative;"></div>
+      <div class="code-block-wrapper codeblock" style="position: relative;">
         ${originalResult}
         <button class="btn headerbutton" onclick="cui.copyCode(this)" title="Copy code" style="position: absolute; top: 5px; right: 5px; margin-right:2%"><i class="fas fa-copy"></i></button>
-        <button class="btn headerbutton" name = "renderhtml" onclick="cui.toggleEscapeHtml(this)" title="Render HTML" style="position: absolute; top: 5px; right: 35px; margin-right:2%"><i class="fas fa-newspaper"></i></button>
       </div>
     `;
   };
 };
 
 // Method to toggle HTML escaping
-cui.toggleEscapeHtml = function(button) {
-  const codeBlock = button.parentElement.querySelector('code');
-  const preBlock = button.parentElement.querySelector('pre');
+cui.toggleEscapeHtml = function(scrollableElement, codeBlock) {
   const code = codeBlock.textContent;
-  let scrollableElement = button.parentElement.querySelector('.renderHTML');
-
-  if (!scrollableElement) {
-    scrollableElement = document.createElement('div');
-    scrollableElement.className = 'renderHTML';
-    preBlock.insertAdjacentElement('afterend', scrollableElement);
-  }
   scrollableElement.innerHTML = '';
   const iframe = document.createElement('iframe');
   iframe.style.width = '100%';
-  // iframe.style.height = '200px';
+  // iframe.style.height = codeBlock.offsetHeight!=0 ? codeBlock.offsetHeight+"px" : "100%";
   scrollableElement.appendChild(iframe);
 
   const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
   iframeDoc.open();
-  iframeDoc.write(code);
-  iframeDoc.close();
+  const isHTML = /<[^>]+>/.test(code);
+  if (isHTML) {
+    iframeDoc.write(code);
+  } else {
+    iframeDoc.write(`<script>${code}</script>`);
+  }
 
-  // Ensure scripts within the iframe are executed
-  const scripts = iframeDoc.getElementsByTagName('script');
-  Array.from(scripts).forEach(oldScript => {
-    const newScript = iframeDoc.createElement('script');
-    Array.from(oldScript.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value));
-    newScript.appendChild(iframeDoc.createTextNode(oldScript.innerHTML));
-    oldScript.parentNode.replaceChild(newScript, oldScript);
-  });
+  iframeDoc.close();
   iframe.onload = function() {
     iframe.style.height = iframe.contentWindow.document.documentElement.scrollHeight + 'px';
   };
   scrollableElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
 };
 
 
+
+
+
 cui.init = function (iphostname, port, piper, testQs) {
   // Default to escaping HTML
   cui.escapeHtml = true;

diff --git a/server.js b/server.js
@@ -15,8 +15,7 @@ const path = require("path");
 const vdb = require("./db.js");
 const fs = require("fs");
 const downloadModel = require("./modeldownloader.js");
-
-const version = 0.320; //changed public and server and config
+const version = 0.325; //changed public and server and config
 var session = require("express-session");
 const MemoryStore = require("memorystore")(session);
 const memStore = new MemoryStore();

diff --git a/views/login.ejs b/views/login.ejs
@@ -20,7 +20,7 @@
       justify-content: center;
       align-items: center;
       height: 100vh;
-      background-color: #06010b;
+      background-color: #1e1e2e;
     }
 
     .formContent {