pinokiod 1.3.4 → 1.3.6

package/server/views/browser.ejs

@@ -1,5 +1,6 @@
 <html>
 <head>
+<title><%=config.title%></title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 <link href="/css/fontawesome.min.css" rel="stylesheet">
@@ -281,6 +282,10 @@ body.dark .grid-btns {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-template-rows: repeat(2, 1fr);
+  /*
+  grid-template-columns: repeat(3, 1fr);
+  grid-template-rows: repeat(1, 1fr);
+  */
   box-sizing: border-box;
 }
 .grid-btns .btn2 {
@@ -518,12 +523,23 @@ body.dark .loader-container {
     <i class="fa-solid fa-plus"></i>
   </div>
   <div class='flexible'></div>
+  <!--
   <div class='grid-btns'>
     <a class='btn2' href="/?mode=explore" id='explore'><div><i class="fa-solid fa-globe"></i></div><div>Discover</div></a>
     <a class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Report Bug</div></a>
     <a class='btn2' href='https://discord.gg/TQdNwadtE4' target="_blank"><div><i class="fa-brands fa-discord"></i></div><div>Discord</div></a>
     <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>
   </div>
+  -->
+  <div class='grid-btns'>
+    <button class='btn2' id='clone-tab'><div><i class='fa-regular fa-copy'></i></div><div>Clone</div></button>
+    <a class='btn2' id='open-browser' target="_blank" href="" features="browser"><div><i class="fa-solid fa-square-arrow-up-right"></i></div><div>Popout</div></a>
+    <button class='btn2' id='reload'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
+    <!--
+    <a class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Help</div></a>
+    -->
+    <a class='btn2' href="/?mode=help"><div><i class="fa-regular fa-face-smile"></i></div><div>Help</div></a>
+  </div>
   <div class='footer'>
     <a class='header-item logo' href="/"><i class="fa-solid fa-house"></i></a>
     <a class='header-item logo' href="/?mode=settings"><i class="fa-solid fa-gear"></i></a>
@@ -542,9 +558,11 @@ body.dark .loader-container {
         <button class='btn2' id='back'><i class="fa-solid fa-chevron-left"></i></button>
         <button class='btn2' id='forward'><i class="fa-solid fa-chevron-right"></i></button>
       <% } %>
+      <!--
       <button class='btn2' id='clone-tab'><i class='fa-regular fa-copy'></i> Clone</button>
       <a class='btn2' id='open-browser' target="_blank" href="" features="browser"><i class="fa-solid fa-square-arrow-up-right"></i> Popout</a>
       <button class='btn2' id='reload'><i class="fa-solid fa-rotate-right"></i> Refresh</button>
+      -->
       <!--
       <button class='btn2 logo' id='reload'><i class="fa-solid fa-rotate-right"></i></button>
       -->
@@ -667,7 +685,7 @@ const renderSelection = (e, force) => {
   console.log("# 1")
   if (location.hash && location.hash.length > 0) {
     console.log("# 2")
-    document.querySelector(".bar").classList.remove("hidden")
+//    document.querySelector(".bar").classList.remove("hidden")
     //let id = getTarget(location.hash.slice(1))
     let id = location.hash.slice(1)
 
@@ -967,7 +985,7 @@ console.log("loaded before", loaded)
 renderSelection()
 //renderCursor()
 console.log("loaded after", loaded)
-Reporter()
+//Reporter()
 document.querySelector("#reload").addEventListener("click", (e) => {
 /*
   // get selected

package/server/views/help.ejs

@@ -0,0 +1,330 @@
+<html>
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+<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="/markdown.css" rel="stylesheet"/>
+<link href="/noty.css" rel="stylesheet"/>
+<link href="/style.css" rel="stylesheet"/>
+<% if (agent === "electron") { %>
+  <link href="/electron.css" rel="stylesheet"/>
+<% } %>
+<style>
+.line2 {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  background: rgba(0,0,100,0.04);
+}
+.line2 a {
+  text-decoration: none;
+  color: black;
+}
+.status {
+  padding: 10px;
+  margin: 10px;
+  border-radius: 10px;
+}
+.status.offline {
+  background: silver;
+}
+.status.online {
+  background: yellowgreen;
+}
+.switch {
+  padding: 10px;
+  margin: 10px 0;
+}
+.switch[data-online=true] {
+  color: yellowgreen;
+}
+.button {
+  padding: 10px;
+}
+.on, .off {
+  display: flex;
+  align-items: center;
+}
+.btn {
+  margin-right: 5px;
+  font-weight: normal;
+}
+.items {
+  max-width: 600px;
+  margin: 50px auto;
+}
+.item {
+  margin: 0;
+  /*
+  border-top: 1px solid rgba(255,255,255,0.1);
+  border-bottom: 1px solid rgba(255,255,255,0.1);
+  */
+  padding: 20px 0;
+}
+.titleview h1 {
+  word-break: break-word;
+  font-size: 40px;
+  text-transform: uppercase;
+  letter-spacing: -1px;
+}
+.item > .d {
+  padding-bottom: 10px;
+}
+.item button {
+  padding: 10px 20px;
+}
+.item label {
+  display: block;
+  text-transform: capitalize;
+  font-size: 30px;
+  font-weight: bold;
+  padding-bottom: 5px;
+  letter-spacing: -1px;
+}
+.item .explanation {
+  padding-top: 5px;
+  color: brown;
+  font-size: 12px;
+  font-weight: bold;
+  font-family: verdana;
+}
+body.dark .item input[type=text] {
+  background: rgba(255,255,255,0.1);
+  color: white;
+}
+body.dark .item select {
+  color: white;
+  background: rgba(255,255,255,0.1);
+}
+.item input[type=text] {
+  padding: 10px;
+  flex-grow: 1;
+  border: none;
+  background: rgba(0,0,0,0.05);
+  width: 100%;
+}
+.item select {
+  -webkit-appearance: none;
+  -moz-appearance:    none;
+  appearance:         none;
+
+  background: rgba(0,0,0,0.05);
+  padding: 10px;
+  box-sizing: border-box;
+  width: 100%;
+  border: none;
+}
+.item img {
+  width: 100px;
+}
+.item .title {
+  text-decoration: none;
+  color: royalblue;
+}
+.item .col {
+  padding: 10px;
+}
+.item .col > * {
+  margin: 5px 0;
+}
+.item .stat {
+  color: rgba(0,0,0,0.8);
+  display: flex;
+}
+.item .stat > * {
+  margin-right: 15px;
+}
+.timestamp {
+  color: rgba(0,0,0,0.5);
+}
+.loading {
+  padding: 10px 20px;
+  text-align: center;
+}
+body.light {
+/*
+  background: var(--light-nav-bg);
+  */
+}
+/*
+form {
+  text-align: center;
+}
+body.dark header .btn2 {
+  color: var(--light-link-color); 
+}
+header .btn2 {
+  color: var(--light-color); 
+}
+*/
+/*
+body.dark header .home {
+  color: var(--light-link-color); 
+}
+*/
+header .home {
+  color: var(--light-color); 
+  padding: 10px;
+}
+body.dark hr {
+  background: white;
+}
+hr {
+  opacity: 0.03;
+  background: black;
+  margin: 10px 0;
+  height: 1px;
+  border: none;
+}
+.reset-cache-loading {
+  padding: 10px;
+  background: rgba(0,0,0,0.1);
+  margin-bottom: 10px;
+  text-align: center;
+}
+.reset-bin-loading {
+  padding: 10px;
+  background: rgba(0,0,0,0.1);
+  margin-bottom: 10px;
+  text-align: center;
+}
+.footer {
+  margin-top: 10px;
+}
+a.link {
+  color: royalblue;
+}
+.item .tile h2 {
+  margin: 0;
+  font-size: 18px;
+}
+body.dark .item .tile h2 a {
+  color: white;
+}
+body.dark .item .tile .badge {
+  background: white;
+  color: black;
+}
+.item .tile h2 a {
+  color: black;
+}
+.item .tile .badge {
+  background: black;
+  color: white;
+  padding: 4px 8px;
+  border-radius: 2px;
+  display: inline-block;
+  font-size: 12px;
+  vertical-align: middle;
+}
+.item .tile div {
+  padding: 5px 0;
+}
+.item .tile {
+  color: gray;
+  display: block;
+  padding: 10px 0;
+}
+</style>
+<script src="/hotkeys.min.js"></script>
+<script src="/sweetalert2.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="/sweetalert2.js"></script>
+<script src="/install.js"></script>
+<script src="/timeago.min.js"></script>
+<script src="/common.js"></script>
+<script src="/opener.js"></script>
+<script src="/nav.js"></script>
+<script src="/report.js"></script>
+</head>
+<body class='<%=theme%>'>
+<header class='grabbable'>
+<h1>
+<a class='home' href="/"><i class="fa-solid fa-house"></i></a>
+<div class='flexible'></div>
+</h1>
+</header>
+<main>
+<div class='container'>
+<div class='titleview'>
+  <h1>Community</h1>
+  <hr>
+  <div class='item'>
+    <label><i class="fa-brands fa-discord"></i> Discord</label>
+    <div>
+      Having issues? Generate a logs.zip file, and share it in <a class='link' href="https://discord.gg/TQdNwadtE4" target="_blank">Pinokio Discord</a>
+      <div class='footer'>
+        <div id='genlog' class='btn'>Generate logs.zip</div>
+        <a id='downloadlogs' download class='hidden btn' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i> Download logs.zip</a>
+      </div>
+    </div>
+  </div>
+  <hr>
+  <div class='item'>
+    <label><i class="fa-brands fa-x-twitter"></i></label>
+    <div>
+      Pinokio dev on X:
+      <div class='footer'>
+        <a class='btn' href='https://x.com/cocktailpeanut' target="_blank"><i class="fa-brands fa-x-twitter"></i> @cocktailpeanut</a>
+      </div>
+    </div>
+  </div>
+  <hr>
+  <div class='item'>
+    <label><i class="fa-brands fa-github"></i> Community Docs</label>
+    <div>Community documents (Github repositories tagged with <b>pinokio-community</b> will show up here)</div>
+    <br>
+    <div class='community'></div>
+  </div>
+  <hr/>
+</div>
+</div>
+</main>
+<script>
+document.addEventListener("DOMContentLoaded", async () => {
+  //Reporter()
+
+  document.querySelector("#genlog").addEventListener("click", (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    e.target.innerHTML = '<i class="fa-solid fa-circle-notch fa-spin"></i>'
+    fetch("/pinokio/log", {
+      method: "post",
+    }).then((res) => {
+      console.log("RES", res)
+      let btn = document.querySelector("#genlog")
+      let btn2 = document.querySelector("#downloadlogs")
+      btn2.classList.remove("hidden") 
+      btn.innerHTML = '<i class="fa-solid fa-circle-check"></i> Generated!'
+      //btn.classList.add("hidden")
+    })
+  })
+
+  fetch("https://api.github.com/search/repositories?q=topic:pinokio-community&sort=stargazers_count&direction=desc").then((res) => {
+    return res.json()
+  }).then((res) => {
+    let html = res.items.map((item) => {
+      return `<div class='tile'>
+        <h2>
+          <span class='badge'><i class="fa-solid fa-star"></i> ${item.stargazers_count}</span> 
+          <a target="_blank" href="${item.html_url}">${item.name}</a>
+        </h2>
+        <div>${item.description ? item.description : ''}</div>
+      </div>`
+    }).join("")
+    document.querySelector(".community").innerHTML = html
+    
+  })
+})
+</script>
+</body>
+</html>

package/server/views/index.ejs

@@ -1,5 +1,6 @@
 <html>
 <head>
+<title>Pinokio</title>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
 <link href="/xterm.min.css" rel="stylesheet" />
@@ -123,12 +124,17 @@ header .runner {
       <a class='btn2' data-filepath="<%=filepath%>"><div><i class="fa-regular fa-folder-open"></i></div><div>Files</div></a>
     <% } %>
     <a id='wifi' data-proxy="<%=proxy.proxy%>" class='btn2'><div><i class="fa-solid fa-wifi"></i></div><div>WiFi</div></a>
+    <!--
     <a class='btn2' id='report'><div><i class="fa-solid fa-bug"></i></div><div>Report Bug</div></a>
     <a class='btn2' href='https://discord.gg/TQdNwadtE4' target="_blank"><div><i class="fa-brands fa-discord"></i></div><div>Discord</div></a>
     <a class='btn2' href='https://twitter.com/cocktailpeanut' target="_blank"><div><i class="fa-brands fa-twitter"></i></div><div>Twitter</div></a>
-    <!--<a class='btn2' href='https://dev.pinokio.computer' target="_blank"><div><i class="fa-solid fa-shapes"></i></div><div>Develop</div></a>-->
     <a class='btn2' href='https://dev.pinokio.computer' target="_blank"><div><i class="fa-solid fa-laptop-code"></i></div><div>Develop</div></a>
+    -->
     <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
+    <!--
+    <a class='btn2' id='report'><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
+    -->
+    <a class='btn2' href="/?mode=help"><div><i class="fa-regular fa-face-smile"></i></div><div>Help</div></a>
   </div>
   <button id='new-window' title='open a new window'><i class="fa-solid fa-plus"></i></button>
 <% } %>

package/server/views/settings.ejs

@@ -305,8 +305,8 @@ hr {
         </div>
       </div>
       <div class='item'>
-        <label><i class="fa-solid fa-folder-open"></i> cache</label>
-        <div class='d'>Reset the cache folder and start fresh from scratch</div>
+        <label><i class="fa-solid fa-folder-open"></i> server cache</label>
+        <div class='d'>Reset the pinokio server cache folder and start fresh from scratch</div>
         <div class='reset-cache-loading hidden'>
           <i class="fa-solid fa-circle-notch fa-spin"></i> Stand by. Do not close this window..
         </div>
@@ -315,6 +315,18 @@ hr {
           <button class='red btn' id='del-cache'><i class="fa-solid fa-trash-can"></i> Reset</button>
         </div>
       </div>
+      <% if (agent === "electron") { %>
+        <div class='item'>
+          <label><i class="fa-solid fa-folder-open"></i> browser cache</label>
+          <div class='d'>Reset the pinokio browser cache</div>
+          <div class='reset-browser-cache-loading hidden'>
+            <i class="fa-solid fa-circle-notch fa-spin"></i> Stand by. Do not close this window..
+          </div>
+          <div>
+            <button class='red btn' id='del-browser-cache'><i class="fa-solid fa-trash-can"></i> Reset Browser Cache</button>
+          </div>
+        </div>
+      <% } %>
       <div class='item'>
         <label><i class="fa-solid fa-folder-open"></i> drive</label>
         <div class='d'>Shared virtual drives</div>
@@ -382,6 +394,32 @@ document.addEventListener("DOMContentLoaded", async () => {
       }
     })
   <% } %>
+  <% if (agent === "electron") { %>
+    document.querySelector("#del-browser-cache").addEventListener("click", async (e) => {
+      console.log("del-browser-cache")
+      let proceed = confirm("Are you sure you wish to delete the browser cache? This will remove all cookies and site data")
+      if (proceed) {
+        document.querySelector(".reset-browser-cache-loading").classList.remove("hidden")
+        document.querySelector("#del-browser-cache").classList.add("hidden")
+        let res = await fetch("/pinokio/delete", {
+          method: "post",
+          headers: {
+            "Content-Type": "application/json"
+          },
+          body: JSON.stringify({ type: "browser-cache" })
+        }).then((res) => {
+          return res.json()
+        })
+        console.log(res)
+        document.querySelector(".reset-browser-cache-loading").classList.add("hidden")
+        if (res.error) {
+          alert(res.error)
+        } else {
+          location.href = location.href
+        }
+      }
+    })
+  <% } %>
   document.querySelector("form").addEventListener("submit", async (e) => {
     e.preventDefault()
     e.stopPropagation()