pinokiod 3.23.0 → 3.25.0

package/server/views/env_editor.ejs

@@ -220,6 +220,15 @@ footer .btn.go-home {
 .env-description {
   margin-bottom: 10px;
 }
+.warning {
+  padding: 10px;
+  margin: 10px 0 20px;
+  border-left: 5px solid rgba(0,0,0,0.1);
+}
+.warning a {
+  text-decoration: none;
+  color: royalblue;
+}
 </style>
 <script>
 document.addEventListener("DOMContentLoaded", async () => {
@@ -281,6 +290,9 @@ document.addEventListener("DOMContentLoaded", async () => {
             </div>
           </div>
         <% } %>
+        <div class='warning'>
+          This will execute the 3rd party script downloaded from <a href="<%=gitRemote%>" target="_blank"><%=gitRemote%>.</a>
+        </div>
         <footer>
           <a href="/" class='btn go-home'><i class='fa-solid fa-home'></i> home</a>
           <div class='flexible'></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;
@@ -365,21 +416,13 @@ body.dark aside .current.selected {
 </div>
 <% } %>
 </header>
-<% if (ishome) { %>
-  <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>
-    <% if (display.includes("form")) { %>
-      <input type='search' class="flexible" placeholder='Filter local apps'>
-    <% } else { %>
-    <% } %>
-  </form>
-<% } %>
 <main>
 <div id='terminal' class='hidden'></div>
 <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 selected'><i class='fas fa-laptop-code'></i> Local</a>
   <a href="/network" class='tab'><i class="fa-solid fa-wifi"></i> Network</a>
   <% if (list.length > 0) { %>
@@ -388,10 +431,33 @@ 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) { %>
+  <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-globe"></i> Discover</a>
+      -->
+      <!--
+      <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-magnifying-glass"></i> Discover</a>
+      -->
+    </div>
+    <% if (display.includes("form")) { %>
+      <input type='search' class="flexible" placeholder='Search apps'>
+    <% } else { %>
+    <% } %>
+  </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) => { %>
@@ -497,7 +563,10 @@ body.dark aside .current.selected {
               <% } %>
             </div>
             <div class='col'>
-              <div class='title'><%=item.name%></div>
+              <div class='title'>
+                <i class="fa-solid fa-circle"></i>
+                <span><%=item.name%></span>
+              </div>
               <div class='uri'><%=item.filepath%></div>
               <div class='description'><%=item.description%></div>
               <div class='menu-btns'>
@@ -746,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()