pinokiod 3.40.0 → 3.42.0

package/server/views/network.ejs

@@ -156,10 +156,7 @@ a.ln:hover {
   color: red !important;
 }
 .line.align-top h3 {
-/*
   align-items: flex-start;
-  */
-  align-items: center;
 }
 .line a:hover {
   color: red;
@@ -177,7 +174,6 @@ a.ln:hover {
 .header-label {
   padding: 0;
   font-size: 30px;
-  font-weight: lighter;
   /*
   text-align: center;
   */
@@ -243,7 +239,7 @@ a.ln:hover {
   margin-right: 10px;
   padding-top: 5px;
   padding-bottom: 0 !important;
-  text-decoration: underline;
+  text-decoration: none;
   color: royalblue;
   cursor: pointer;
 }
@@ -285,16 +281,11 @@ td:first-child, th:first-child {
 
 body.dark .config {
   color: white;
-  background: rgba(255,255,255,0.04);
 }
 .config {
-/*
-  background: rgba(0,0,0,0.9);
-  */
   color: black;
-  text-align: left;
-  padding: 40px;
-  background: rgba(0,0,0,0.04);
+  padding: 30px;
+  margin: 10px 0;
 }
 .config-header {
 }
@@ -309,6 +300,8 @@ body.dark .config .btn {
   font-size: 16px;
   font-weight: bold;
   width: 100px;
+  /*
+  */
   background: royalblue;
   flex-shrink: 0;
 }
@@ -325,7 +318,9 @@ body.dark .config-row input[type=text] {
   background: white;
 }
 .config-row input[type=text] {
-  padding: 5px 10px;
+  padding: 5px 15px;
+  border-top-left-radius: 30px;
+  border-bottom-left-radius: 30px;
 }
 .app-btns .btn {
   border-radius: 4px;
@@ -363,9 +358,11 @@ body.dark .config-row input[type=text] {
   background-color: #ccc;
   -webkit-transition: .4s;
   transition: .4s;
+  border-radius: 50px;
 }
 
 .slider:before {
+  border-radius: 50px;
   position: absolute;
   content: "";
   height: 30px;
@@ -380,6 +377,7 @@ body.dark .config-row input[type=text] {
 input:checked + .slider {
 /*
   background-color: #2196F3;
+  background: black;
   */
   background-color: royalblue;
 }
@@ -453,14 +451,6 @@ body.dark .desc {
   background: none !important;
   padding: 0 !important;
 }
-.grid-1, .grid-2, .grid-3 {
-  background: rgba(0,0,0,0.04);
-  margin-top: 5px;
-}
-body.dark .grid-1, body.dark .grid-2, body.dark .grid-3 {
-  background: rgba(255,255,255,0.03);
-  margin-top: 5px;
-}
 main {
   display: flex;
 }
@@ -468,7 +458,6 @@ aside {
   width: 200px;
   display: block;
   flex-shrink: 0;
-  border-right: 1px solid rgba(0,0,0,0.04);
 }
 aside .tab i {
   width: 20px;
@@ -482,7 +471,9 @@ body.dark aside .tab:hover, aside .tab:hover {
   opacity: 1;
 }
 aside .tab {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 5px;
   color: black;
   text-decoration: none;
   padding: 10px;
@@ -687,6 +678,7 @@ body.dark .context-menu-wrapper {
   flex-shrink: 0;
 }
 body.dark .section-header {
+  background: rgba(255,255,255,0.04);
 /*
   border-bottom: 1px solid rgba(255,255,255,0.07);
   */
@@ -697,17 +689,18 @@ body.dark .section-header {
   */
   font-weight: normal;
   font-size: 14px;
-  padding: 15px 5px;
+  padding: 30px 5px;
   /*
   margin: 0 0 15px;
   */
+  background: rgba(0,0,0,0.04);
 }
 .section-header h2 {
   font-size: 20px;
   font-weight: lighter;
 }
 .section-header .section {
-  padding: 0;
+  box-sizing: border-box;
 }
 .section-header .section div {
   font-weight: normal;
@@ -724,6 +717,9 @@ body.dark .section-header {
   min-width: 0;
   word-wrap: break-word;
 }
+body.dark .btn {
+  background: rgba(255,255,255,0.05);
+}
 /*
 body.dark .btn {
   background: rgba(255,255,255,0.05) !important;
@@ -780,15 +776,20 @@ body.dark .open-menu, body.dark .browse {
 }
 .section {
   display: block;
+  min-width: 0;
 }
-.section h2 {
-  margin: 0;
+.line {
+  padding: 10px;
 }
 .line.align-top h3 .col .btn {
   box-sizing: border-box;
   margin-top: 5px;
   width: 100%;
 }
+.c {
+  flex-grow: 1;
+  min-width: 0;
+}
 .desc {
   font-size: 14px;
   color: rgba(0, 0, 0, 0.7);
@@ -806,22 +807,31 @@ body.dark .open-menu, body.dark .browse {
   display: grid;
   grid-template-columns: repeat(3, 1fr); /* Three equal columns */
   gap: 1rem; /* Optional spacing between columns */
-  padding: 10px;
+  padding: 5px 0;
 }
 .section-header .grid-1, .section-header .grid-2, .section-header .grid-3 {
   background: none !important;
   padding: 0 !important;
 }
-.grid-1, .grid-2, .grid-3 {
-  background: rgba(0,0,0,0.04);
-  margin-top: 5px;
+.section-header .section {
+  text-align: center;
+  padding: 0 10px;
 }
-body.dark .grid-1, body.dark .grid-2, body.dark .grid-3 {
-  background: rgba(255,255,255,0.03);
-  margin-top: 5px;
+.section-header .section h2 {
+  margin: 0;
+  font-weight: bold;
+  text-align: center;
+}
+.section-header .section h2 i {
+  font-size: 30px;
+  width: 100%;
+  display: block;
+  text-align: center;
+  padding: 10px;
 }
 main {
   display: flex;
+  min-width: 0;
 }
 .help {
 padding:30px;
@@ -832,7 +842,6 @@ aside {
   width: 200px;
   display: block;
   flex-shrink: 0;
-  border-right: 1px solid rgba(0,0,0,0.04);
 }
 aside .tab i {
   width: 20px;
@@ -846,7 +855,9 @@ body.dark aside .tab:hover, aside .tab:hover {
   opacity: 1;
 }
 aside .tab {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: 5px;
   color: black;
   text-decoration: none;
   padding: 10px;
@@ -871,6 +882,11 @@ aside .selected {
   opacity: 1;
 }
 */
+.loader {
+  padding: 50px;
+  text-align: center;
+  font-size: 40px;
+}
 .submenu .tab {
   padding: 0;
 }
@@ -901,14 +917,28 @@ body.dark .net {
   justify-content: center;
   align-items: center;
 }
+body.dark .troubleshoot {
+  color: rgba(255,255,255,0.5);
+}
+.troubleshoot {
+  color: rgba(0,0,0,0.5);
+}
+.network-name.expanded .btn {
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
 .network-name {
   display: flex;
 }
 .network-name .btn {
-  border-radius: 0;
+  border-top-left-radius: 30px;
+  border-bottom-left-radius: 30px;
+  border-top-right-radius: 30px;
+  border-bottom-right-radius: 30px;
 }
 .network-name input[type=text] {
-  border-radius: 0;
   border: none;
   background: rgba(0,0,0,0.1);
 }
@@ -923,6 +953,46 @@ body.dark .net {
   color: silver !important;
 }
 
+@media only screen and (max-width: 800px) {
+  body {
+    display: flex !important;
+    flex-direction: row !important;
+  }
+}
+@media only screen and (max-width: 600px) {
+  aside {
+    width: unset;
+    flex-shrink: unset;
+  }
+  aside {
+    padding: 0 10px;
+  }
+  aside .tab i {
+    width: 100%;
+  }
+  aside .tab .caption {
+    display: none;
+  }
+  aside .tab {
+    margin: 0;
+    padding: 10px;
+    border-left: none;
+  }
+  aside .btn-tab {
+    flex-direction: column;
+    padding: 10px 0;
+  }
+  aside .btn-tab .btn {
+    display: flex;
+    justify-content: center;
+  }
+  aside .btn-tab .btn .caption {
+    display: none; 
+  }
+  header .flexible {
+    min-width: unset;
+  }
+}
 
 @media only screen and (max-width: 480px) {
   .btn2 {
@@ -936,6 +1006,8 @@ body.dark .net {
   }
 }
 </style>
+<script src="/popper.min.js"></script>
+<script src="/tippy-bundle.umd.min.js"></script>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/common.js"></script>
@@ -946,26 +1018,49 @@ body.dark .net {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
-<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
-<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
-<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
-<div class='url-bar'>
-  <% if (current_urls.https) { %>
-    <a class='https-url' target="_blank" href="<%=current_urls.https%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.https%></a>
-  <% } %>
-  <% if (current_urls.http) { %>
-    <a class='http-url' target="_blank" href="<%=current_urls.http%>"><i class="fa-solid fa-square-arrow-up-right"></i> <%=current_urls.http%></a>
-  <% } %>
-</div>
+<button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
+<button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
+<button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
+<button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
-<a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
-<div class='nav-btns'>
-  <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
-  <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
-  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
-  <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-  <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
+<a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+  <div><i class="fa-solid fa-table-columns"></i></div>
+</a>
+<a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+  <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
+</a>
+<div class="dropdown-content" id="dropdown-content">
+  <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+    <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+  </button>
+  <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+    <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+  </button>
+</div>
+<!--
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-regular fa-window-restore"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+      <div><i class="fa-solid fa-table-columns"></i><div>split columns</div></div>
+    </a>
+    <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+      <div><i class="fa-solid fa-table-columns fa-rotate-270"></i><div>split rows</div></div>
+    </a>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
 </div>
+-->
+<button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
+  <div><i class="fa-solid fa-xmark"></i></div>
+</button>
 </h1>
 </header>
     <!--
@@ -978,23 +1073,6 @@ body.dark .net {
 </form>
     -->
 <main>
-  <aside>
-    <div class='btn-tab'>
-      <a href="/init" class='btn'><i class="fa-solid fa-plus"></i> Create</a>
-      <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i> Discover</a>
-    </div>
-    <a href="/" class='tab'><i class='fas fa-laptop-code'></i> Local</a>
-    <a href="/network" class='tab selected'><i class="fa-solid fa-wifi"></i> Network</a>
-    <% if (list.length > 0) { %>
-      <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
-      <% list.forEach(({ host, name, platform, processes }, index) => { %>
-      <!--
-        <a href="http://<%=host%>:42000" class='submenu tab' target="_blank"><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
-        -->
-        <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
-      <% }) %>
-    <% } %>
-  </aside>
   <div class='c'>
   <div class='container'>
     <div class='config'>
@@ -1024,7 +1102,7 @@ body.dark .net {
             <div id='advanced-label' class='link-label label'>Advanced</div>
             <div id='reset-label' class='btn'>Reset</div>
             -->
-          <div>
+          <div class='troubleshoot'>
             Not working properly?  <span id='reset-label' class='link-label label'>Try reinstalling the Network Module & Certificates</span>
           </div>
         </div>
@@ -1034,18 +1112,6 @@ body.dark .net {
     </div>
   </div>
   <div class='container'>
-    <div class="section-header">
-      <h3>
-        <div class="col">
-          <div class="grid-1">
-            <div class="section">
-              <h2>Servers running on this machine</h2>
-              <div>Pinokio automatically creates a proxy that makes all your local servers accessible from other machines on the same network.</div>
-            </div>
-          </div>
-        </div>
-      </h3>
-    </div>
     <div class='running-apps'>
       <div class='section-header'>
         <h3>
@@ -1053,25 +1119,32 @@ body.dark .net {
           <div class='col'>
             <div class='grid-3'>
               <div class='section'>
-                <h2><i class='fas fa-laptop-code'></i> Local</h2>
-                <div>These urls work on this machine only.</div>
+                <h2><i class='fas fa-laptop-code'></i> This machine</h2>
+                <div>Use these URLs on this machine.</div>
               </div>
               <div class='section'>
-                <h2><i class="fa-solid fa-wifi"></i> Network</h2><div>These urls work on any machine on the same local network.</div>
+                <h2><i class="fa-solid fa-wifi"></i> Local network</h2><div>Use these URLs from other machines on the same local network.</div>
               </div>
               <div class='section'>
-                <h2><i class="fa-solid fa-podcast"></i> Peer</h2><div>These urls work on other pinokio peers on the same local network <a class='explain' data-type='peer'>How to start a peer</a></div>
+                <h2><i class="fa-solid fa-podcast"></i> Local HTTPS network</h2><div>Use these URLs from other pinokio peers on the same local network <a class='explain' data-type='peer'>How to start a peer</a></div>
               </div>
             </div>
           </div>
         </h3>
       </div>
+      <% if (requirements_pending || peer_active && processes.length === 0) { %>
+        <div class='loader'>
+        <i class="fa-solid fa-circle-notch fa-spin"></i>
+        </div>
+      <% } %>
       <% processes.forEach((item, index) => { %>
         <div class='line align-top' data-index="<%=index%>" data-name="<%=item.name%>" data-title="<%=item.name%>" data-description="<%=item.internal_router.join(' ')%> <%=item.port%>">
           <h3>
             <div class='item-icon'>
               <% if (item.icon) { %>
-                <img src="<%=item.icon%>">
+                <div class='placeholder-icon'>
+                  <img src="<%=item.icon%>">
+                </div>
               <% } else { %>
                 <div class='placeholder-icon'>
                   <i class="fa-solid fa-database"></i>
@@ -1099,12 +1172,68 @@ body.dark .net {
                 </div>
               </div>
             </div>
-          </div>
-        </h3>
+          </h3>
+        </div>
+      <% }) %>
+      <% static_routes.forEach((route, index) => { %>
+        <div class='line align-top' data-index="<%=processes.length+index%>" data-name="<%=route.name%>" data-title="<%=route.name%>" data-description="<%=route.internal_router.join(' ')%>">
+          <h3>
+            <div class='item-icon'>
+              <div class='placeholder-icon'>
+                <i class="fa-solid fa-database"></i>
+              </div>
+            </div>
+            <div class='col'>
+              <div class='title'><i class="fa-solid fa-circle"></i><span><%=route.name%></span></div>
+              <div class='grid-3'>
+                <div class='section'>
+                  <% route.internal_router.forEach((domain) => { %>
+                    <% if (domain.endsWith(".localhost")) { %>
+                      <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
+                    <% } else { %>
+                      <a class='net' target="_blank" href="http://<%=domain%>">http://<%=domain%></a>
+                    <% } %>
+                  <% }) %>
+                </div>
+                <div class='section'>
+                  <% if (route.external_ip) { %>
+                    <a class='net' target="_blank" href="http://<%=route.external_ip%>">http://<%=route.external_ip%></a>
+                  <% } %>
+                </div>
+                <div class='section'>
+                  <% route.external_router.forEach((domain) => { %>
+                    <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
+                  <% }) %>
+                </div>
+              </div>
+            </div>
+          </h3>
+        </div>
       <% }) %>
     </div>
   </div>
   </div>
+  <aside>
+    <div class='btn-tab'>
+      <a href="/init" class='btn'><i class="fa-solid fa-plus"></i><div class='caption'>Create</div></a>
+      <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i><div class='caption'>Discover</div></a>
+    </div>
+    <a href="/" class='tab'><i class='fas fa-laptop-code'></i><div class='caption'>This machine</div></a>
+    <a href="/network" class='tab selected'><i class="fa-solid fa-wifi"></i><div class='caption'>Local network</div></a>
+    <% if (list.length > 0) { %>
+      <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
+      <% list.forEach(({ host, name, platform, processes }, index) => { %>
+        <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i><div class='caption'><%=name%> (<%=current_host === host ? 'this machine' : host%>)</div></a>
+      <% }) %>
+    <% } %>
+    <a href="/connect" class='tab'><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
+    <a class='tab' href="<%=portal%>" target="_blank"><i class="fa-solid fa-question"></i><div class='caption'>Help</div></a>
+    <a class='tab' id='genlog'><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
+    <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
+    <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
+    <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+    <a class='tab' href="/?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
+  </aside>
 </main>
 <script>
 document.querySelector("#reset-label").addEventListener("click", async (e) => {
@@ -1171,17 +1300,23 @@ document.querySelector("#advanced-label").addEventListener("click", (e) => {
 if (document.querySelector("#active").checked) {
   console.log("checked")
   document.querySelector("#network_name").classList.remove("hidden")
+  document.querySelector(".network-name").classList.add("expanded")
 } else {
   console.log("not checked")
   document.querySelector("#network_name").classList.add("hidden")
+  document.querySelector(".network-name").classList.remove("expanded")
 }
 document.querySelector("#active").addEventListener("change", (e)=> {
   console.log(e.target.checked)
   if (e.target.checked) {
     document.querySelector("#network_name").classList.remove("hidden")
+    document.querySelector(".network-name").classList.add("expanded")
+    document.querySelector("#name").classList.remove("hidden")
     document.querySelector("#active-label").innerHTML = "On"
   } else {
     document.querySelector("#network_name").classList.add("hidden")
+    document.querySelector(".network-name").classList.remove("expanded")
+    document.querySelector("#name").classList.add("hidden")
     document.querySelector("#active-label").innerHTML = "Off"
   }
 })
@@ -1270,6 +1405,7 @@ document.querySelector("main").addEventListener("click", async (e) => {
       return res.json()
     })
     if (r.success) {
+      document.querySelector("#network_name").classList.add("hidden")
       //alert("Successfully updated the pinokio home to " + val)
       document.querySelector(".loading").classList.remove("hidden")
       document.querySelector(".save").classList.add("hidden")

package/server/views/network2.ejs

@@ -419,11 +419,10 @@ table h3 {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
-<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
-<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
-<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
+<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div></button>
+<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div></button>
+<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <div class='flexible'></div>
-<a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
 <div class='nav-btns'>
   <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
   <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>

package/server/views/old_network.ejs

@@ -402,9 +402,9 @@ input:checked + .slider:before {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
-<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
-<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
-<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
+<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div></button>
+<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div></button>
+<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div></button>
 <a class='btn2 create-new' id='create-new-folder'><div><i class="fa-solid fa-folder-plus"></i></div><div>Create</div></a>
 <a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
 <div class='flexible'></div>