pinokiod 3.51.0 → 3.53.0

package/server/views/connect.ejs

@@ -749,6 +749,9 @@ body.dark .profile td {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }

package/server/views/container.ejs

@@ -300,6 +300,7 @@ iframe {
 }
 */
 </style>
+<script src="/window_storage.js"></script>
 <script src="/popper.min.js"></script>
 <script src="/tippy-bundle.umd.min.js"></script>
 <script src="/hotkeys.min.js"></script>
@@ -363,7 +364,7 @@ iframe {
 </button>
 </h1>
 </header>
-<iframe src="<%=src%>"></iframe>
+<iframe class='mainframe' src="<%=src%>"></iframe>
 <script src="/urldropdown.js"></script>
 <script>
 // Initialize URL Dropdown with restore behavior

package/server/views/index.ejs

@@ -333,6 +333,9 @@ body.dark aside .current.selected {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }

package/server/views/init/index.ejs

@@ -1421,6 +1421,9 @@ body.dark .ace-editor {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }

package/server/views/net.ejs

@@ -280,7 +280,7 @@ body.dark .open-menu, body.dark .browse {
 }
 .section-container {
   display: grid;
-  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
+  grid-template-columns: repeat(2, 1fr); /* Three equal columns */
   /*
   grid-template-columns: repeat(3, minmax(0, 1fr));
   */
@@ -445,6 +445,9 @@ body.dark .net .mark {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }
@@ -608,7 +611,9 @@ document.addEventListener('DOMContentLoaded', function() {
           <h3>
             <div class='item-icon'>
               <% if (item.icon) { %>
-                <img src="<%=item.icon%>">
+                <div class='placeholder-icon'>
+                  <img src="<%=item.icon%>" onerror="this.src='/pinokio-black.png'"/>
+                </div>
               <% } else { %>
                 <div class='placeholder-icon'>
                   <i class="fa-solid fa-database"></i>
@@ -619,31 +624,25 @@ document.addEventListener('DOMContentLoaded', function() {
               <div class='title'><i class="fa-solid fa-circle"></i><span><%=item.title || item.name%></span></div>
               <div class='grid-3'>
                 <div class='section'>
-                  <% if (item.internal_router.length > 0) { %>
-                    <% item.internal_router.forEach((domain) => { %>
-                      <a class='net' target="_blank" href="https://<%=domain%>"><span class='mark'>HTTPS</span><span><%=domain%></span></a>
-                    <% }) %>
-                  <% } else { %>
-                    <a class='net' target="_blank" href="http://localhost:<%=item.port%>"><span class='mark'>HTTP</span><span>localhost:<%=item.port%></span></a>
+                  <% item.internal_router.forEach((domain) => { %>
+                    <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
+                  <% }) %>
+                  <a class='net' target="_blank" href="http://localhost:<%=item.port%>">http://localhost:<%=item.port%></a>
+                </div>
+                <div class='section'>
+                  <% if (item.external_ip) { %>
+                    <a class='net' target="_blank" href="http://<%=item.external_ip%>">http://<%=item.external_ip%></a>
                   <% } %>
                 </div>
-                <% if (item.external_router.length > 0) { %>
-                  <div class='section'>
-                    <% item.external_router.forEach((domain) => { %>
-                      <a class='net' target="_blank" href="https://<%=domain%>"><span class='mark'>HTTPS</span><span><%=domain%></span></a>
-                    <% }) %>
-                  </div>
-                <% } else { %>
-                  <div class='section'>
-                    <% if (item.external_ip) { %>
-                      <a class='net' target="_blank" href="http://<%=item.external_ip%>"><span class='mark'>HTTP</span><span><%=item.external_ip%></span></a>
-                    <% } %>
-                  </div>
-                <% } %>
+                <div class='section'>
+                  <% item.external_router.forEach((domain) => { %>
+                    <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
+                  <% }) %>
+                </div>
               </div>
             </div>
-          </div>
-        </h3>
+          </h3>
+        </div>
       <% }) %>
     <% } else { %>
       <div class='section-container'>
@@ -653,7 +652,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <div class='col'>
                 <div class='grid-1'>
                   <div class='section'>
-                    <h2>Online</h2><div>Use these URLs to access the online remote servers.</div>
+                    <h2><i class="fa-solid fa-plug-circle-check"></i> Online</h2><div>Use these URLs to access the online remote servers.</div>
                   </div>
                 </div>
               </div>
@@ -664,7 +663,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <h3>
                 <div class='item-icon'>
                   <% if (item[`${protocol}_icon`]) { %>
-                    <img src="<%=item[`${protocol}_icon`]%>">
+                    <img src="<%=item[`${protocol}_icon`]%>" onerror="this.src='/pinokio-black.png'"/>
                   <% } else { %>
                     <div class='placeholder-icon'>
                       <i class="fa-solid fa-database"></i>
@@ -697,7 +696,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <div class='col'>
                 <div class='grid-1'>
                   <div class='section'>
-                    <h2>Installed</h2><div>Remotely launch the installed apps.</div>
+                    <h2><i class="fa-solid fa-folder-tree"></i> Installed</h2><div>Remotely launch the installed apps.</div>
                   </div>
                 </div>
               </div>
@@ -708,7 +707,7 @@ document.addEventListener('DOMContentLoaded', function() {
               <h3>
                 <div class='item-icon'>
                   <% if (item[`${protocol}_icon`]) { %>
-                    <img src="<%=item[`${protocol}_icon`]%>">
+                    <img src="<%=item[`${protocol}_icon`]%>" onerror="this.src='/pinokio-black.png'"/>
                   <% } else { %>
                     <div class='placeholder-icon'>
                       <i class="fa-solid fa-database"></i>
@@ -734,6 +733,7 @@ document.addEventListener('DOMContentLoaded', function() {
             </h3>
           <% }) %>
         </div>
+        <!--
         <div class='section-col'>
           <div class='section-header'>
             <h3>
@@ -770,6 +770,7 @@ document.addEventListener('DOMContentLoaded', function() {
             </h3>
           <% }) %>
         </div>
+        -->
       </div>
     <% } %>
   </div>
@@ -831,6 +832,7 @@ let filteredCount = list.length
 let filteredBtnsCount = 0
 
 const renderSearch = () => {
+  console.log("renderSearch")
   let target = document.querySelector("form input[type=search]")
   let result
   if (target.value.trim().length === 0) {
@@ -841,6 +843,7 @@ const renderSearch = () => {
     result = search(list, target.value)
   }
   let all = document.querySelectorAll(".line.index")
+  console.log("all", all)
   for(let el of all) {
     el.classList.add("hidden")
     el.classList.remove("selected")

package/server/views/network.ejs

@@ -285,7 +285,7 @@ body.dark .config {
 }
 .config {
   color: black;
-  padding: 30px;
+  padding: 30px 30px 0;
   margin: 10px 0;
 }
 .config-header {
@@ -533,9 +533,14 @@ body.dark .net {
   display: block;
   background: none;
 }
+form.search {
+  padding: 20px;
+}
+/*
 input[type=search] {
   visibility: hidden;
 }
+*/
 .line2 {
   display: flex;
   align-items: center;
@@ -673,9 +678,18 @@ body.dark .context-menu-wrapper {
   text-align: left;
   color: black;
 }
+.section-header2 {
+  display: flex;
+  padding: 10px;
+  background: rgba(0,0,0,0.04);
+  font-weight: bold;
+}
+.section-header2 .col {
+  flex-grow: 1;
+  padding-left: 10px;
+}
 .blank {
   width: 50px;
-  height: 50px;
   flex-shrink: 0;
 }
 body.dark .section-header {
@@ -970,6 +984,9 @@ body.dark .troubleshoot {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }
@@ -1084,22 +1101,13 @@ document.addEventListener('DOMContentLoaded', function() {
 </button>
 </h1>
 </header>
-    <!--
-<form class='search'>
-  <div class='app-btns'>
-    <a class='btn create-new' href="/init"><i class="fa-solid fa-plus"></i> Build</a>
-    <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-magnifying-glass"></i> Discover</a>
-  </div>
-  <input type='search' class="flexible" placeholder='Filter network apps'>
-</form>
-    -->
 <main>
   <div class='c'>
   <div class='container'>
     <div class='config'>
       <div class='config-header'>
         <div class='header-label'><i class='fa-solid fa-wifi'></i> Network Settings</div>
-        <div class='desc'>Instant HTTPS and Peer network for every app on your local network.</div>
+        <div class='desc'>Instantly add HTTPS + CORS + Peer Sharing for every app on your local network.</div>
       </div>
       <div class='config-body'>
         <div class='config-row'>
@@ -1134,68 +1142,11 @@ document.addEventListener('DOMContentLoaded', function() {
   </div>
   <div class='container'>
     <div class='running-apps'>
-      <div class='section-header'>
-        <h3>
-          <div class='blank'></div>
-          <div class='col'>
-            <div class='grid-3'>
-              <div class='section'>
-                <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> 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> 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) { %>
-                <div class='placeholder-icon'>
-                  <img src="<%=item.icon%>">
-                </div>
-              <% } else { %>
-                <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><%=item.title || item.name%></span></div>
-              <div class='grid-3'>
-                <div class='section'>
-                  <% item.internal_router.forEach((domain) => { %>
-                    <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
-                  <% }) %>
-                  <a class='net' target="_blank" href="http://localhost:<%=item.port%>">http://localhost:<%=item.port%></a>
-                </div>
-                <div class='section'>
-                  <% if (item.external_ip) { %>
-                    <a class='net' target="_blank" href="http://<%=item.external_ip%>">http://<%=item.external_ip%></a>
-                  <% } %>
-                </div>
-                <div class='section'>
-                  <% item.external_router.forEach((domain) => { %>
-                    <a class='net' target="_blank" href="https://<%=domain%>">https://<%=domain%></a>
-                  <% }) %>
-                </div>
-              </div>
-            </div>
-          </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>
@@ -1330,12 +1281,13 @@ if (document.querySelector("#active").checked) {
 document.querySelector("#active").addEventListener("change", (e)=> {
   console.log(e.target.checked)
   if (e.target.checked) {
+    document.querySelector("#network_name .label").innerHTML = "Network Name"
     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 .label").innerHTML = "Save Settings"
     document.querySelector(".network-name").classList.remove("expanded")
     document.querySelector("#name").classList.add("hidden")
     document.querySelector("#active-label").innerHTML = "Off"
@@ -1604,6 +1556,7 @@ setInterval(() => {
   })
 }, 2000)
 <% } %>
+
 </script>
 </body>
 </html>

package/server/views/screenshots.ejs

@@ -287,6 +287,9 @@ aside .selected {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }

package/server/views/settings.ejs

@@ -296,6 +296,9 @@ aside .selected {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }

package/server/views/tools.ejs

@@ -778,6 +778,9 @@ aside .selected {
   aside {
     padding: 0 10px;
   }
+  aside .tab.submenu {
+    padding: 10px;
+  }
   aside .tab i {
     width: 100%;
   }