pinokiod 3.24.0 → 3.25.0

package/server/views/app.ejs

@@ -178,7 +178,10 @@ body.dark .header-item.btn {
   color: var(--dark-color);
 }
 .header-item.btn {
+/*
   padding: 5px 8px;
+  */
+  padding: 7px;
   background: none !important;
   color: var(--light-color);
 }
@@ -615,7 +618,17 @@ nav .logo {
   font-size: 20px;
   padding: 10px 30px;
 }
+.error-message > div {
+  width: 500px;
+}
 .error-message {
+  width: 100%;
+  background: royalblue !important;
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  /*
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -628,6 +641,7 @@ nav .logo {
   line-height: 40px;
   color: black;
   letter-spacing: -2px;
+  */
 }
 body.dark #location {
   color: white;
@@ -752,11 +766,15 @@ body.dark .submenu {
   overflow: auto;
   display: flex;
   flex-grow: 1;
+  /*
   border-top: 1px solid rgba(0, 0,0 ,0.04);
+  */
 }
+/*
 body.dark .appcanvas {
   border-top: 1px solid rgba(255,255,255,0.04);
 }
+*/
 .filler {
   display: none;
 }
@@ -792,19 +810,34 @@ body.dark .top-menu .btn2.selected {
   color: white;
 }
 body.minimized #collapse {
+/*
   background: none !important;
+  */
+  border: none !important;
 }
 body.dark #collapse {
+  border-bottom: 4px solid white;
+  /*
   background: rgba(255,255,255,0.07);
+  */
 }
 #collapse {
+  border-bottom: 4px solid black;
+/*
   background: rgba(0,0,0,0.04);
+  */
 }
 body.dark .mode-selector .btn2.selected {
+/*
   background: rgba(255,255,255,0.07);
+  */
+  border-bottom: 4px solid white;
 }
 .mode-selector .btn2.selected {
+  border-bottom: 4px solid black;
+  /*
   background: rgba(0,0,0,0.04);
+  */
 }
 .mode-selector {
   display: flex;
@@ -1024,9 +1057,12 @@ body.dark .mode-selector .btn2.selected {
         <% } %>
       </div>
     <% } %>
-    <a id='devtab' data-mode="refresh" target="<%=dev_link%>" href="<%=dev_link%>" class="btn header-item frame-link selected">
-      <div class="tab"><i class="fa-solid fa-code"></i> Dev</div>
-    </a>
+    <%if (type!=='run') { %>
+      <a id='devtab' data-mode="refresh" target="<%=dev_link%>" href="<%=dev_link%>" class="btn header-item frame-link selected">
+        <div class="tab"><i class="fa-solid fa-keyboard"></i> Build</div>
+        <div class='loader'><i class='fa-solid fa-angle-right'></i></div>
+      </a>
+    <% } %>
     <div class="dynamic <%=type==='run' ? '' : 'selected'%>">
       <div class='submenu'>
         <% if (plugin_menu) { %>
@@ -1051,7 +1087,7 @@ body.dark .mode-selector .btn2.selected {
     <% if (type === "browse") { %>
       <div class='nested-menu selected git blue'>
         <div class='btn header-item frame-link reveal'>
-          <div class='tab'><i class="fa-solid fa-clock-rotate-left"></i> Version Control</div>
+          <div class='tab'><i class="fa-solid fa-clock-rotate-left"></i> Version History</div>
           <div class='loader'><i class="fa-solid fa-angle-down"></i><i class="fa-solid fa-angle-up hidden"></i></div>
         </div>
         <div class='submenu' id='git-repos'>
@@ -1124,9 +1160,10 @@ body.dark .mode-selector .btn2.selected {
 </aside>
 <% if (error) { %>
   <div class='error-message'>
-    <h1><i class="fa-solid fa-rotate"></i></h1>
-    <div><%=error%></div>
-    <a class='btn' target="_blank" href="<%=install%>"><i class="fa-solid fa-square-arrow-up-right"></i> Download</a>
+    <div>
+      <h1>Error</h1> 
+      <div><%=error%></div>
+    </div>
   </div>
 <% } else { %>
   <div class='container'>
@@ -1855,7 +1892,6 @@ body.dark .mode-selector .btn2.selected {
     }
   })
   document.querySelector("aside").addEventListener("click", async (e) => {
-    console.log("ASIDE CLICK")
     let target
 
     // 0. handle dropdowns
@@ -2014,7 +2050,6 @@ body.dark .mode-selector .btn2.selected {
     } else {
       target = e.target.closest(".frame-link")
     }
-    console.log( { target })
 
 
 
@@ -2109,7 +2144,6 @@ body.dark .mode-selector .btn2.selected {
           document.querySelectorAll(".frame-link").forEach((el) => {
             el.classList.remove("selected")
           })
-          console.log("SELECTED")
           target.classList.add("selected")
 
           renderSelection(e)
@@ -2342,7 +2376,7 @@ body.dark .mode-selector .btn2.selected {
   }).then((res) => {
     console.log("STATE", res)
     let selection
-    if (res.selected) {
+    if (res && res.selected) {
       selection = document.querySelector(`[href='${res.selected}']`)
     } else {
       selection = document.querySelector("#devtab")

package/server/views/d.ejs

@@ -20,7 +20,9 @@ main {
   width: 100%;
   box-sizing: border-box;
   display: flex;
+  /*
   flex-wrap: wrap;
+  */
   padding: 20px;
   /*
   justify-content: center;
@@ -29,8 +31,8 @@ main {
 .tab-content {
   display: flex;
   flex-wrap: wrap;
-  gap: 5px;
-  padding: 10px 20px;
+  gap: 15px;
+  padding: 10px 0px 0;
 }
 .submenu.tab {
   margin: 10px 0;
@@ -41,7 +43,10 @@ main {
 }
 */
 .tab {
+/*
   min-width: 250px;
+  */
+  width: 100%;
   text-decoration: none;
   display: flex;
   /*
@@ -51,10 +56,9 @@ main {
   font-weight: bold;
   color: black;
   overflow: hidden;
-  margin: 10px;
   box-sizing: border-box;
-  border-radius: 4px;
-  align-items: center;
+  border-radius: 10px;
+  align-items: flex-start;
   padding: 10px 15px;
   /*
   width: 120px;
@@ -70,7 +74,9 @@ body.dark .tab {
   background: rgba(255,255,255,0.03);
 }
 .tab h2 {
+/*
   padding: 5px 2px 10px;
+  */
 /*
   text-align: center;
   */
@@ -88,7 +94,7 @@ body.dark .tab {
   color: black;
   display: flex;
   justify-content: center;
-  font-size: 20px;
+  font-size: 30px;
   align-items: center;
   border-radius: 3px;
 }
@@ -117,39 +123,74 @@ body.dark .tab i {
 }
 */
 .menu-container {
-  border: 3px solid rgba(0,0,0,0.04);
+/*
+  border: 15px solid rgba(0,0,0,0.04);
   background: white;
+  border-radius: 20px;
+  */
 }
+/*
 body.dark .menu-container {
   background: rgba(255,255,255,0.03);
 }
+*/
 .menu-container {
   width: 100%;
   box-sizing: border-box;
   margin: 20px;
 }
 body.dark .tab-header {
+/*
   background: rgba(0,0,0,0.3);
+  */
+  /*
+  border-left: 10px solid white;
+  */
 }
 .tab-header {
+  padding: 0 5px;
+/*
   background: rgba(0,0,0,0.04);
-  padding: 15px;
+  */
+  /*
+  padding: 8px 10px;
+  */
   font-weight: bold;
+  /*
+  border-left: 10px solid black;
+  */
 }
 .container {
   margin: 0;
   padding: 0 !important;
 }
+.subtitle {
+  font-size: 12px;
+  opacity: 0.6;
+  padding: 2px;
+}
 .btns {
   display: flex;
+  padding-top: 10px;
+  gap: 5px;
 }
 body.dark .btn {
   background: rgba(255,255,255,0.08);
+  color: white;
+  border: none;
 }
 .btn {
   padding: 7px 10px;
+  background: none;
+  background: rgba(0,0,0,0.08);
+  color: rgba(0,0,0,0.7);
+  /*
+  border: 1px solid rgba(0,0,0,0.4);
+  */
+  border-radius: 30px;
+  /*
   background: rgba(0,0,0,0.8);
-  border-radius: 0;
+  */
 }
 .btn.run-btn {
   flex-grow: 1;
@@ -159,6 +200,13 @@ body.dark .btn {
   background: royalblue !important;
   */
 }
+.tab-header h3 {
+  margin: 0;
+  font-size: 16px;
+}
+.tab-header h3 i {
+  font-size: 18px;
+}
 </style>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
@@ -171,7 +219,12 @@ body.dark .btn {
   <% dynamic.forEach((item, index) => { %>
     <% if (item.menu) { %>
       <div class='menu-container'>
-        <div class='tab-header'><i class='<%=item.icon%>'></i> <%=item.text%></div>
+        <div class='tab-header'>
+          <h3><i class='<%=item.icon%>'></i> <%=item.title%></h3>
+          <% if (item.subtitle) { %>
+          <div class='subtitle'><%=item.subtitle%></div>
+          <% } %>
+        </div>
         <div class='tab-content'>
           <% item.menu.forEach((i) => { %>
             <div class='tab'>
@@ -182,8 +235,11 @@ body.dark .btn {
               <% } %>
               <div class='col'>
                 <h2><%=i.title%></h1>
+                <% if (i.subtitle) { %>
+                  <div class='subtitle'><%=i.subtitle%></div>
+                <% } %>
                 <div class='btns'>
-                  <a class='run-btn btn' href="<%=i.href%>"><i class="fa-solid fa-play"></i> Run</a>
+                  <a class='run-btn btn' href="<%=i.href%>"><i class="fa-solid <%=i.type === "Start" ? 'fa-play' : 'fa-rocket'%>"></i> <%=i.type%></a>
                   <a class='btn' target="_blank" href="<%=i.link%>"><i class="fa-solid fa-question"></i></a>
                 </div>
               </div>
@@ -196,8 +252,11 @@ body.dark .btn {
         <img src="<%=item.image%>">
         <div class='col'>
           <h2><%=item.title%></h1>
+          <% if (item.subtitle) { %>
+            <div class='subtitle'><%=item.subtitle%></div>
+          <% } %>
           <div class='btns'>
-            <a class='run-btn btn' href="<%=item.href%>"><i class="fa-solid fa-play"></i> Run</a>
+            <a class='run-btn btn' href="<%=item.href%>"><i class="fa-solid <%=item.type === "Start" ? 'fa-play' : 'fa-rocket'%>"></i> <%=item.type%></a>
             <a class='btn' target="_blank" href="<%=item.link%>"><i class="fa-solid fa-question"></i></a>
           </div>
         </div>

package/server/views/index.ejs

@@ -18,6 +18,35 @@
   <link href="/electron.css" rel="stylesheet"/>
 <% } %>
 <style>
+.bubble {
+  position: relative;
+  background: rgba(0,0,0,0.1);
+  color: #333;
+  border-radius: 10px;
+  padding: 10px 15px;
+  font-size: 14px;
+  flex-grow: 1;
+  line-height: 1.4;
+  margin: 0 10px;
+  font-weight: bold;
+}
+/* Left-side tail */
+.bubble::before {
+  content: "";
+  position: absolute;
+  top: 10px; /* Vertical alignment of the tail */
+  left: -20px; /* Positioning outside the bubble */
+  border-width: 10px;
+  border-style: solid;
+  border-color: transparent rgba(0,0,0,0.1) transparent transparent;
+}
+body.dark .bubble {
+  background: rgba(0,0,0,0.4);
+  color: white;
+}
+body.dark .bubble:before {
+  border-color: transparent rgba(0,0,0,0.4) transparent transparent;
+}
 .line2 {
   display: flex;
   align-items: center;
@@ -253,11 +282,33 @@ aside .tab.selected {
   font-weight: bold;
   opacity: 1;
 }
+#suggestion {
+  padding: 20px;
+  display: flex;
+  align-items: center;
+}
+#suggestion img {
+  width: 50px;
+  height: 50px;
+}
+#suggestion h4 {
+  margin: 0;
+}
+/*
+#suggestion .prompt {
+  padding: 10px 15px;
+  margin: 10px 0;
+  border-left: 10px solid rgba(0,0,0,0.1);
+}
+*/
 body.dark aside .current.selected {
 /*
   border-left: 10px solid white;
   */
 }
+.container {
+  margin-right: 20px;
+}
 @media only screen and (max-width: 480px) {
   .btn2 {
     padding: 5px;
@@ -380,7 +431,6 @@ body.dark aside .current.selected {
       <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i> <%=name%> (<%=current_host === host ? 'this machine' : host%>)</a>
     <% }) %>
   <% } %>
-  <div class='tab'><i class="fa-solid fa-code"></i> Dev</div>
 </aside>
 <div class='container'>
 <% if (ishome) { %>
@@ -401,6 +451,13 @@ body.dark aside .current.selected {
   </form>
 <% } %>
 <% if (ishome) { %>
+  <!--
+  <div id='suggestion' class='hidden'>
+    <img src="/pinokio-black.png"/>
+    <div class='bubble prompt'></div>
+    <button id='create-ai' class='btn'>Create</button>
+  </div>
+  -->
   <% if (running.length > 0) { %>
     <div class='running-apps'>
       <% running.forEach((item) => { %>
@@ -758,7 +815,18 @@ const renderSearch = () => {
     }
   }
 
+//  suggest(target.value)
+
 }
+//const suggest = (str) => {
+//  // suggestion
+//  if (str.length > 0) {
+//    document.querySelector("#suggestion").classList.remove("hidden")
+//  } else {
+//    document.querySelector("#suggestion").classList.add("hidden")
+//  }
+//  document.querySelector("#suggestion .prompt").innerHTML = str
+//}
 
 renderSearch()