pinokiod 2.15.19 → 2.15.21

package/server/public/style.css

@@ -53,6 +53,40 @@
   */
   --dark-btn-color: whitesmoke;
 }
+.type-tabs {
+  display: flex;
+  padding: 20px 20px 0;
+  /*
+  background: rgba(0,0,0,0.05);
+  */
+}
+.type-tab {
+  display: flex;
+  align-items: center;
+  padding: 10px 20px;
+  text-decoration: none;
+  color: black;
+  margin-right: 10px;
+}
+.type-tab.selected {
+  background: rgba(0,0,100,0.04);
+}
+body.dark .type-tab {
+  background: none;
+  color: white;
+}
+body.dark .type-tab.selected {
+  background: rgba(255,255,255,0.03);
+}
+body.dark .type-tabs {
+/*
+  background: rgba(255,255,255,0.05);
+  */
+}
+.type-tab img {
+  height: 20px;
+  margin-right: 5px;
+}
 .navheader {
   padding: 15px 10px;
 }
@@ -920,7 +954,10 @@ body.dark .line:hover {
 .line {
   text-decoration: none;
   display: block;
+  /*
   padding: 15px 15px;
+  */
+  padding: 10px;
   border-bottom: 1px solid var(--light-thin);
 }
 .thick.line {
@@ -968,8 +1005,12 @@ body.dark .line i {
   text-align: center;
 }
 .line img {
+/*
   width: 60px;
   height: 60px;
+  */
+  width: 40px;
+  height: 40px;
   border-radius: 10px;
 }
 body.dark .line .btn {
@@ -1468,8 +1509,16 @@ body.dark .btn2 {
 body.dark .btn2:hover {
   background: rgba(255,255,255,0.06);
 }
+/*
+body.dark .browser-options {
+  background: rgba(255,255,255,0.05);
+}
+*/
 .browser-options {
   padding: 10px;
+  /*
+  background: rgba(0,0,0,0.05);
+  */
 }
 .btn2 {
   background: none;
@@ -1530,7 +1579,7 @@ body.dark .header-label {
   font-weight: bold;
   text-transform: uppercase;
   top: 0;
-  padding: 10px;
+  padding: 25px 15px 15px;
   /*
   border-top: 2px solid rgba(0,0,0,0.04);
   */
@@ -1542,7 +1591,11 @@ nav.error-message {
   color: rgba(0,0,0,0.7);
   font-weight: bold;
 }
-.not-running-apps {
+.not-running-apps, .running-apps {
+  background: rgba(0,0,100,0.04);
+}
+body.dark .not-running-apps, body.dark .running-apps {
+  background: rgba(255,255,255,0.03);
 }
 .running-apps .line img {
   border: 4px solid #8fd400;

package/server/views/env_editor.ejs

@@ -123,9 +123,16 @@ body.dark .env-item label {
   font-weight: bold;
   font-size: 18px;
 }
+.env-item.highlighted {
+  border: 5px solid red;
+}
 .env-item {
+/*
   padding-top: 10px;
   padding-bottom: 30px;
+  */
+  padding: 10px;
+  margin-bottom: 20px;
 }
 body.dark .comment {
   border-left: 2px solid white;
@@ -178,8 +185,6 @@ body {
 }
 h1 {
   font-size: 50px;
-  font-family: georgia;
-  font-style: italic;
   padding-bottom: 20px;
 }
 footer {
@@ -208,6 +213,12 @@ footer .btn.go-home {
 #editor {
   height: auto;
 }
+.env-title {
+  font-weight: bold;
+}
+.env-description {
+  margin-bottom: 10px;
+}
 </style>
 <script>
 document.addEventListener("DOMContentLoaded", async () => {
@@ -294,7 +305,7 @@ document.addEventListener("DOMContentLoaded", async () => {
         </h1>
       </header>
     <% } %>
-    <div id='editor' class='<%=init ? "hidden" : ''%>'>
+    <div id='editor' class='<%=init && !requires_instantiation ? "hidden" : ''%>'>
       <!--
       <h1>Configure</h1>
       -->
@@ -302,10 +313,23 @@ document.addEventListener("DOMContentLoaded", async () => {
         <% if (item.type === "comment") { %>
           <div class='comment'><%=item.val.replaceAll(/^[ #]+/g, "")%></div>
         <% } else { %>
-          <div class='env-item'>
-            <label for="<%=item.key%>"><%=item.key%></label>
-            <input id="<%=item.key%>" type="text" value="<%=item.val%>">
-          </div>
+          <% if(pre_items[item.key]) { %>
+            <div class='env-item highlighted'>
+              <label for="<%=item.key%>"><%=item.key%></label>
+              <% if (pre_items[item.key].title) { %>
+                <div class='env-title'><%=pre_items[item.key].title%></div>
+              <% } %>
+              <% if (pre_items[item.key].description) { %>
+                <div class='env-description'><%=pre_items[item.key].description%></div>
+              <% } %>
+              <input id="<%=item.key%>" type="text" value="<%=item.val%>">
+            </div>
+          <% } else { %>
+            <div class='env-item'>
+              <label for="<%=item.key%>"><%=item.key%></label>
+              <input id="<%=item.key%>" type="text" value="<%=item.val%>">
+            </div>
+          <% } %>
         <% } %>
       <% }) %>
     </div>

package/server/views/fullscreen_editor.ejs

@@ -495,6 +495,12 @@ document.addEventListener("DOMContentLoaded", async () => {
                     }
                   })
                 }
+              <% if (locals.prev) { %>
+                n.Noty({
+                  text: '[Notice] finished',
+                  type: 'success'
+                })
+              <% } %>
               /*
                 n.Noty({
                   text: '[Notice] finished',
@@ -740,6 +746,9 @@ const reloadMemory = async () => {
   <header class='navheader'>
   <% if (!install_required) { %>
     <div class='runner'>
+      <% if (locals.prev) { %>
+        <a class='btn' href="<%=prev%>"><i class="fa-solid fa-arrow-left"></i> Back</a>
+      <% } %>
       <div class='btn run <%= mod && runnable ? "" : "hidden" %>'>
         <span class='play'><i class="fa-solid fa-play"></i> Start</span>
         <span class='starting hidden'><i class="fa-solid fa-circle-notch fa-spin"></i> Starting...</span>

package/server/views/index.ejs

@@ -70,10 +70,12 @@ header .runner {
   padding-top: 5px;
 }
 .browser-options-row {
+/*
   border-top: 1px solid rgba(0,0,0,0.1);
   border-bottom: 1px solid rgba(0,0,0,0.1);
+  */
   display: flex;
-  padding: 20px 0;
+  padding: 10px;
   align-items: flex-start;
 }
 .browser-options-row h3 {
@@ -117,10 +119,12 @@ body.dark .btn {
 body.dark .badge {
   background: rgba(255,255,255,0.1);
 }
+/*
 body.dark .browser-options-row {
   border-top: 1px solid rgba(255,255,255,0.05);
   border-bottom: 1px solid rgba(255,255,255,0.05);
 }
+*/
 @media only screen and (max-width: 480px) {
   .btn2 {
     padding: 5px;
@@ -288,6 +292,17 @@ body.dark .browser-options-row {
       </div>
     </div>
   <% } %>
+  <!--
+  <div class='type-tabs'>
+    <% if (mode === "task") { %>
+      <a class='type-tab' href="/"><img src='/pinokio-<%=theme=='dark' ? 'white' : 'black'%>.png'> Apps</a>
+      <a class='type-tab selected' href="/?mode=task"> <img src='/<%=theme=='dark' ? 'term-dark.png' : 'term-white.png'%>'> Tasks</a>
+    <% } else { %>
+      <a class='type-tab selected' href="/"><img src='/pinokio-<%=theme=='dark' ? 'white' : 'black'%>.png'> Apps</a>
+      <a class='type-tab' href="/?mode=task"> <img src='/<%=theme=='dark' ? 'term-dark.png' : 'term-white.png'%>'> Tasks</a>
+    <% } %>
+  </div>
+  -->
   <% if (running.length > 0) { %>
     <div class='running-apps'>
       <div class='header-label'>Running</div>
@@ -297,9 +312,16 @@ body.dark .browser-options-row {
             <% if (item.icon) { %>
               <img src="<%=item.icon%>">
             <% } else { %>
+              <% if (theme === 'dark') { %>
+                <img src="/pinokio-white.png">
+              <% } else { %>
+                <img src="/pinokio-black.png">
+              <% } %>
+              <!--
               <div class='avatar'>
                 <i class="fa-regular fa-circle-dot"></i>
               </div>
+              -->
             <% } %>
             <div class='col'>
               <div class='uri'><i class="fa-regular fa-folder"></i><%=item.url%></div>
@@ -351,9 +373,16 @@ body.dark .browser-options-row {
             <% if (item.icon) { %>
               <img src="<%=item.icon%>">
             <% } else { %>
+            <!--
               <div class='avatar'>
                 <i class="fa-regular fa-circle-dot"></i>
               </div>
+              -->
+              <% if (theme === 'dark') { %>
+                <img src="/pinokio-white.png">
+              <% } else { %>
+                <img src="/pinokio-black.png">
+              <% } %>
             <% } %>
             <div class='col'>
               <div class='uri'><i class="fa-regular fa-folder"></i><%=item.url%></div>

package/server/views/pre.ejs

@@ -55,6 +55,9 @@ h1 {
   margin: 10px 0;
 
 }
+.item .title {
+  font-weight: bold;
+}
 .item .btn {
   width: 50px;
   text-align: center;
@@ -78,6 +81,22 @@ footer a.btn {
 .e {
   padding: 5px 0;
 }
+.env {
+  padding: 10px;
+  border-left: 2px solid black;
+  margin-top: 10px;
+}
+.env label {
+  font-weight: bold;
+  font-size: 12px;
+  display: block;
+  margin-bottom: 5px;
+}
+.env input[type=text] {
+  padding: 5px;
+  box-sizing: border-box;
+  width: 100%;
+}
 </style>
 </head>
 <body class='columns <%=theme%>'>
@@ -91,14 +110,29 @@ footer a.btn {
     </div>
     <div class='items'>
       <% items.forEach((item) => { %>
-        <div class='item'>
-          <img src="<%=item.icon%>">
+        <% if (item.href) { %>
+          <div class='item'>
+            <% if (item.icon) { %>
+              <img src="<%=item.icon%>">
+            <% } %>
+            <div class='col'>
+              <div class='title'><%=item.title%></div>
+              <div class='description'><%=item.description%></div>
+            </div>
+            <a target="_blank" features="browser" href='<%=item.href%>' class='btn'>Get</a>
+          </div>
+        <% } else if (item.env) { %>
+        <!--
           <div class='col'>
             <div class='title'><%=item.title%></div>
             <div class='description'><%=item.description%></div>
+            <div class='env'>
+              <label><%=item.env%></label>
+              <input type='text' value="<%=env[item.env] ? env[item.env] : ''%>" />
+            </div>
           </div>
-          <a target="_blank" features="browser" href='<%=item.href%>' class='btn'>Get</a>
-        </div>
+          -->
+        <% } %>
       <% }) %>
     </div>
     <footer>

package/server/views/proxy.ejs

@@ -143,8 +143,6 @@ body.dark .browser-options-row {
   margin-top: 10px;
 }
 .header-label {
-  font-family: Georgia;
-  font-style: italic;
   font-size: 50px;
   letter-spacing: -1px;
   padding: 50px;
@@ -255,7 +253,15 @@ body.dark .browser-options-row {
       <% apps.forEach((item) => { %>
         <a class='line align-top' href="<%=item.link%>">
           <h3>
-            <img class='icon' src="<%=item.icon%>">
+            <% if (item.icon) { %>
+              <img class='icon' src="<%=item.icon%>">
+            <% } else { %>
+              <% if (theme === 'dark') { %>
+                <img class='icon' src="/pinokio-white.png">
+              <% } else { %>
+                <img class='icon' src="/pinokio-black.png">
+              <% } %>
+            <% } %>
             <div class='col'>
               <div class='title'><%=item.name%></div>
               <div class='description'><%=item.description%></div>

package/server/views/required_env_editor.ejs

@@ -0,0 +1,275 @@
+<html class='columns'>
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<script src="/hotkeys.min.js"></script>
+<script src="/ace/ace.js"></script>
+<script src="/noty.js"></script>
+<script src="/notyq.js"></script>
+<script src="/xterm.js"></script>
+<script src="/xterm-addon-fit.js"></script>
+<script src="/xterm-addon-web-links.js"></script>
+<script src="/xterm-theme.js"></script>
+<script src="/xterm-addon-search.js"></script>
+<script src="/xterm-addon-search-bar.js"></script>
+<script src="/sweetalert2.js"></script>
+<script src="/Socket.js"></script>
+<script src="/common.js"></script>
+<script src="/he.js"></script>
+<script src="/opener.js"></script>
+<script src="/nav.js"></script>
+<script src="/autoexpand.js"></script>
+<script src="/modalinput.js"></script>
+<script src="/simplemodal.js"></script>
+<script src="/waitmodal.js"></script>
+<script src="/notifyinput.js"></script>
+<script src="/report.js"></script>
+<link href="/xterm.min.css" rel="stylesheet" />
+<link href="/css/fontawesome.min.css" rel="stylesheet">
+<link href="/css/solid.min.css" rel="stylesheet">
+<link href="/css/regular.min.css" rel="stylesheet">
+<link href="/css/brands.min.css" rel="stylesheet">
+<link href="/style.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+body.frozen {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+#table > table {
+  border-left: 2px solid black;
+  padding-left: 5px;
+  margin: 10px 0;
+}
+.highlight {
+  background: yellow;
+  width: 100px;
+}
+th {
+  background: rgba(0,0,0,0.1);
+  padding: 10px;
+  font-size: 12px;
+}
+td {
+  font-size: 12px;
+  padding: 10px;
+}
+td.val {
+  background: rgba(0,0,0,0.06);
+}
+td.key {
+  background: rgba(0,0,0,0.1);
+}
+.button {
+  cursor: pointer; 
+  background: rgba(0,0,0,0.8);
+  color: white;
+  padding: 5px 10px;
+  border-radius: 4px;
+}
+.button:hover {
+  
+}
+main {
+  width: 100%;
+  box-sizing: border-box;
+  max-width: 600px;
+  padding: 20px;
+  margin: 0 auto;
+}
+
+header .btn {
+  font-family: Sans-serif;
+  display: block;
+  margin-left: 10px;
+  font-style: normal;
+  font-size: 12px;
+  font-weight: normal;
+  padding: 5px 10px;
+}
+.disabled {
+  opacity: 0.7;
+}
+body.dark .env-item input[type=text] {
+  background: white;
+}
+.env-item input[type=text] {
+  width: 100%;
+  padding: 10px;
+  box-sizing: border-box;
+  border: none;
+  background: rgba(0,0,100, 0.1);
+}
+body.dark .env-item label {
+  color: cornflowerblue;
+}
+.env-item label {
+  color: royalblue;
+  display: block;
+  margin-bottom: 5px;
+  font-weight: bold;
+  font-size: 18px;
+}
+.env-item.highlighted {
+  border: 5px solid red;
+}
+.env-item {
+/*
+  padding-top: 10px;
+  padding-bottom: 30px;
+  */
+  padding: 10px;
+  margin-bottom: 20px;
+}
+body.dark .comment {
+  border-left: 2px solid white;
+}
+.comment {
+  opacity: 0.8;
+  border-left: 2px solid black;
+  padding-left: 10px;
+}
+#save {
+  background: royalblue;
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+}
+a#customize {
+  text-decoration: underline;
+  cursor: pointer;
+}
+.e {
+  padding: 10px 0;
+}
+#editor {
+  padding: 20px 0;
+}
+.center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+body {
+  display: block;
+}
+.card {
+  display: flex;
+  padding: 10px 0;
+  box-sizing: border-box;
+}
+.card img {
+  width: 100px;
+  border-radius: 10px;
+}
+.card .description {
+  opacity: 0.8;
+}
+.card .title {
+  font-weight: bold;
+  font-size: 30px;
+  letter-spacing: -1px;
+}
+.card .col {
+  padding-left: 10px;
+}
+h1 {
+  text-align: center;
+  font-size: 50px;
+  padding-bottom: 20px;
+}
+footer {
+  background: none;
+  padding: 0;
+  text-align: right;
+  display: flex;
+  margin: 10px 0 20px 0;
+}
+footer .btn {
+  margin-left: 10px;
+  display: inline-block;
+  -webkit-appearance: button;
+  -moz-appearance: button;
+  appearance: button;
+
+}
+footer .btn.go-home {
+  margin-left: 0px;
+}
+.btn.home-button {
+  background: none !important;
+  margin: 0 !important;
+  font-size: 16px !important;
+}
+#editor {
+  height: auto;
+}
+.env-title {
+  font-weight: bold;
+}
+.env-description {
+  margin-bottom: 10px;
+}
+.subtitle {
+  text-align: center;
+}
+</style>
+<script>
+document.addEventListener("DOMContentLoaded", async () => {
+  const n = new N()
+  document.querySelector("#save").addEventListener("click", async (e) => {
+    // save
+    const vals = {}
+    const els = document.querySelectorAll(".env-item")
+    for(let el of els) {
+      let input = el.querySelector("input[type=text]")
+      vals[input.id] = input.value
+    }
+    console.log("vals", vals)
+    let res = await fetch("/env", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        filepath: "<%=filepath%>",
+        vals
+      })
+    }).then((res) => {
+      return res.json()
+    })
+    console.log("res" ,res)
+    location.href = location.href
+  })
+})
+</script>
+</head>
+<body class='<%=theme%> center'>
+  <main>
+    <div>
+      <h1><%=filename%></h1>
+      <div class='subtitle'>Please enter the required values to continue.</div>
+    </div>
+    <div id='editor'>
+      <% items.forEach((item) => { %>
+        <div class='env-item'>
+          <label for="<%=item.env%>"><%=item.env%></label>
+          <% if (item.title) { %>
+            <div class='env-title'><%=item.title%></div>
+          <% } %>
+          <% if (item.description) { %>
+            <div class='env-description'><%=item.description%></div>
+          <% } %>
+          <input id="<%=item.env%>" type="text" value="<%=item.val%>">
+        </div>
+      <% }) %>
+      <div id='save' class='btn'>
+        <span class='save'><i class="fa-solid fa-check"></i> Done</span>
+      </div>
+    </div>
+  </main>
+</body>
+</html>

package/server/views/settings.ejs

@@ -66,10 +66,8 @@
   padding: 20px 0;
 }
 .titleview h1 {
-  font-style: italic;
   word-break: break-word;
   font-size: 50px;
-  font-family: Georgia;
   letter-spacing: -1px;
 }
 .item > .d {

package/server/views/share_editor.ejs

@@ -206,8 +206,6 @@ body.dark .cloudflare-running {
 }
 h1 {
   font-size: 50px;
-  font-family: georgia;
-  font-style: italic;
   padding-bottom: 10px;
 }