pinokiod 3.41.0 → 3.42.0

package/server/views/connect.ejs

@@ -19,12 +19,14 @@ html {
   height: 100%;
   overflow: hidden;
 }
+/*
 body {
   height: 100%;
   overflow: auto;
   display: flex;
   flex-direction: column;
 }
+*/
 .line2 {
   display: flex;
   align-items: center;
@@ -60,16 +62,6 @@ body {
   display: flex;
   align-items: center;
 }
-.btn {
-  margin: 5px;
-  width: 100px;
-  text-align: center;
-  padding: 10px;
-  background: black;
-  color: white;
-  text-decoration: none;
-  font-weight: normal;
-}
 .item {
   display: flex;
   align-items: flex-start;
@@ -102,7 +94,9 @@ body {
 main {
   flex-grow: 1;
   display: flex;
+  /*
   flex-direction: column;
+  */
 }
 .setup-items {
   display: flex;
@@ -137,7 +131,6 @@ body.dark .card {
   color: royalblue !important;
 }
 .card .desc {
-  opacity: 0.7;
 }
 .card h3 {
   margin: 0;
@@ -156,12 +149,9 @@ body.dark .config {
   color: white;
 }
 .config {
-/*
-  background: rgba(0,0,0,0.9);
-  */
   color: black;
   padding: 30px;
-  text-align: left;
+  margin: 10px 0;
 }
 .config-header {
 }
@@ -188,14 +178,17 @@ body.dark .config {
 }
 .header-label {
   padding: 0;
-  font-size: 50px;
-  letter-spacing: -2px;
-  font-weight: lighter;
+  font-size: 30px;
   /*
   text-align: center;
   */
   text-transform: capitalize;
 }
+body.dark .container {
+  color: white;
+}
+.container {
+}
 .dark .container-row {
   background: rgba(255, 255, 255, 0.04);
 }
@@ -217,7 +210,583 @@ body.dark .config {
   padding: 10px 0;
   opacity: 0.7;
 }
+.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;
+}
+header .runner {
+  padding: 10px 0 0;
+}
+.proxy {
+  padding: 0 10px;
+  text-align: right;
+}
+.proxy a {
+  text-decoration: none;
+  display: inline-block;
+  padding: 5px 10px;
+  border-radius: 2px;
+  background: black;
+  color: white;
+}
+.browser-options-btns {
+  display: flex;
+  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: 10px;
+  align-items: flex-start;
+}
+.browser-options-row h3 {
+  margin: 0;
+  font-size: 14px;
+  margin-bottom: 3px;
+}
+.browser-options-row .btn.disabled {
+  opacity: 0.7;
+}
+.browser-options-row .btn {
+  font-weight: bold;
+  width: 100px;
+  text-align: center;
+  display: block;
+  margin-right: 10px;
+  flex-shrink: 0;
+  padding: 5px;
+}
+.badge {
+  font-size: 12px;
+  padding: 5px 10px;
+  background: rgba(0,0,100,0.1);
+  border-radius: 5px;
+  display: inline-block;
+  margin-top: 5px;
+}
+a.badge {
+  color: royalblue;
+  text-decoration: none;
+  cursor: pointer;
+}
+.badge a {
+  color: royalblue;
+  text-decoration: none;
+}
+body.dark .btn {
+  color: white;
+  background: rgba(255,255,255,0.05) !important;
+}
+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);
+}
+*/
+body.dark .context-menu-wrapper {
+  background: rgba(0,0,0,0.9);
+  color: white;
+}
+.context-menu-wrapper {
+  background: rgba(0,0,0,0.06) !important;
+}
+.context-menu {
+ /* 
+  max-height: 10000px;
+  overflow: hidden;
+  transition: max-height 1s ease-in-out;
+  */
+  display: flex;
+  margin: 0 5px 0 0;
+}
+.context-menu .btn:hover {
+  color: cornflowerblue !important;
+}
+.context-menu .btn {
+  background: none !important;
+  border: none !important;
+  display: block;
+  width: 80px;
+  padding: 6px 10px !important;
+  text-align: left;
+  color: black;
+}
+.blank {
+  width: 50px;
+  height: 50px;
+  flex-shrink: 0;
+}
+body.dark .section-header {
+/*
+  border-bottom: 1px solid rgba(255,255,255,0.07);
+  */
+}
+.section-header {
+/*
+  border-bottom: 1px solid rgba(0, 0, 0,0.04);
+  */
+  font-weight: normal;
+  font-size: 14px;
+  padding: 15px 5px;
+  /*
+  margin: 0 0 15px;
+  */
+}
+.section-header h2 {
+  font-size: 20px;
+  font-weight: lighter;
+}
+.section-header .section {
+  padding: 0;
+}
+.section-header .section div {
+  font-weight: normal;
+  opacity: 0.6;
+  font-size: 14px;
+}
+.section-header h3 {
+  display: flex;
+  margin: 0;
+}
+.section-header .col {
+  padding-left: 10px;
+  flex-grow: 1;
+  min-width: 0;
+  word-wrap: break-word;
+}
+.tab .btn {
+  color: black;
+  background: none !important;
+}
+body.dark .tab .btn {
+  background: none !important;
+}
+.app-btns .btn {
+  border-radius: 4px;
+  padding: 8px 10px;
+  width: 70px;
+  /*
+  padding: 6px 10px;
+  */
+  text-align: center;
+}
+body.dark .context-menu .btn {
+  color: white;
+}
+.context-menu.collapsed {
+/*
+  max-height: 0; 
+  */
+  display: none;
+}
+body.dark .open-menu, body.dark .browse {
+  border: none !important;
+  /*
+  background: black !important;
+  */
+  color: white !important;
+}
+.open-menu:hover, .browse:hover, body.dark .open-menu:hover, body.dark .browse:hover {
+  color: royalblue !important;
+}
+.open-menu, .browse {
+  width: 80px;
+  border-radius: 0 !important;
+  background: rgba(0,0,0,0.04) !important;
+  color: black !important;
+  /*
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  */
+}
+.open-menu.selected {
+  border: none !important;
+  /*
+  background: none !important;
+  */
+}
+.open-menu.selected span {
+  display: none;
+}
+.sections {
+  display: flex;
+}
+.section {
+  display: block;
+}
+.section h2 {
+  margin: 0;
+}
+.line.align-top h3 .col .btn {
+  box-sizing: border-box;
+  margin-top: 5px;
+  width: 100%;
+}
+.desc {
+  font-size: 14px;
+  padding: 5px 0;
+  font-weight: normal;
+}
+.section-container {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* Three equal columns */
+  gap: 1rem; /* Optional spacing between columns */
+}
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr); /* Three equal columns */
+  gap: 1rem; /* Optional spacing between columns */
+}
+.grid-1 {
+  padding: 10px;
+}
+.grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr); /* Three equal columns */
+  gap: 1rem; /* Optional spacing between columns */
+  padding: 10px;
+}
+.section-header .grid-1, .section-header .grid-2, .section-header .grid-3 {
+  background: none !important;
+  padding: 0 !important;
+}
+.grid-1, .grid-2, .grid-3 {
+  background: rgba(0,0,0,0.04);
+  margin-top: 5px;
+}
+body.dark .grid-1, body.dark .grid-2, body.dark .grid-3 {
+  background: rgba(255,255,255,0.03);
+  margin-top: 5px;
+}
+main {
+  display: flex;
+}
+aside {
+  width: 200px;
+  display: block;
+  flex-shrink: 0;
+}
+aside .tab i {
+  width: 20px;
+  text-align: center;
+}
+body.dark aside .tab {
+  color: white;
+}
+body.dark aside .tab:hover, aside .tab:hover {
+  color: royalblue !important;
+  opacity: 1;
+}
+aside .tab {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: black;
+  text-decoration: none;
+  padding: 10px;
+  font-size: 12px;
+  opacity: 0.5;
+  border-left: 10px solid transparent;
+}
+body.dark aside .tab.selected {
+  color: white;
+}
+aside .selected {
+  font-weight: bold;
+  opacity: 1;
+}
+/*
+body.dark aside .selected {
+  border-left: 10px solid white;
+}
+aside .selected {
+  border-left: 10px solid black;
+  font-weight: bold;
+  opacity: 1;
+}
+*/
+.tab-content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+.tab:hover {
+  color: royalblue;
+}
+.tab-content .tab {
+  text-decoration: none;
+  display: flex;
+  font-size: 14px;
+  font-weight: bold;
+  color: black;
+  overflow: hidden;
+  box-sizing: border-box;
+  align-items: center;
+  gap: 5px;
+  background: rgba(0,0,0,0.04);
+  border-radius: 5px;
+}
+.tab .desc {
+  flex-grow: 1;
+  text-align: right;
+}
+body.dark aside .tab {
+  background: none;
+}
+body.dark .tab {
+  color: white;
+  background: rgba(255,255,255,0.03);
+}
+.tab h2 {
+  margin: 0;
+  font-size: 14px;
+}
+.tab .col {
+  flex-grow: 1;
+  margin-left: 10px;
+}
+.tab .emoji {
+  width: 30px;
+  height: 30px;
+  font-size: 20px;
+  box-sizing: border-box;
+  text-align:center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.tab i.img {
+  height: 30px;
+  width: 30px;
+  display: flex;
+  justify-content: center;
+  font-size: 20px;
+  align-items: center;
+  border-radius: 3px;
+}
+.tab .profile img, .tab .profile i {
+  height: 30px;
+  width: 30px;
+  font-size: 30px;
+  border-radius: 3px;
+}
+.menu-container {
+  max-width: 800px;
+  padding: 20px;
+  align-items: flex-start;
+}
+.menu-container {
+  display: flex;
+  box-sizing: border-box;
+}
+.submenu .tab {
+  padding: 0;
+}
+body.dark .net:hover, .net:hover {
+  color: royalblue;
+}
+body.dark .net {
+/*
+  border-left: 3px solid white;
+  */
+  color: rgba(255,255,255,0.7);
+}
+.net {
+  color: rgba(0,0,0,0.7);
+  width: auto;
+  margin: 3px 0;
+  /*
+  padding-left: 5px;
+  border-left: 3px solid black;
+  */
+  font-size: 12px;
+  text-decoration: none;
+  display: block;
+  background: none;
+}
+.net .mark {
+  background: rgba(0,0,0,0.9);
+  border-radius: 3px;
+  color: white;
+  width: 40px;
+  display: inline-block;
+  text-align: center;
+  margin-right: 5px;
+  padding: 2px 8px;
+  font-size: 12px;
+}
+body.dark .net .mark {
+  background: white;
+  color: black;
+}
+.placeholder-icon {
+  font-size: 40px;
+  width: 50px;
+  height: 50px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.launch-btns .btn {
+  text-transform: capitalize;
+}
+.launch-btns {
+  display: flex;
+}
+.launch-btns .btn.launch{
+  width: 150px !important;
+  text-align: center !important;
+}
+.installed-apps .title i {
+  color: silver !important;
+}
+.tab.connected p {
+  margin: 0;
+}
+.tab.connected {
+  display: block;
+}
+.tab.connected .tab {
+  border-radius: 0;
+}
+.tab.connected .tab {
+  background: none;
+}
+td.bold {
+  font-weight: bold;
+  width: 100px;
+}
+/*
+.tab.connected .desc, .tab.connected i, .tab.connected h2{
+  color: #78b61a;
+}
+body.dark .tab.connected .desc, body.dark .tab.connected i, body.dark .tab.connected h2{
+  color: greenyellow;
+}
+*/
+.profile {
+  width: 100%;
+  padding: 10px;
+  display: flex;
+  gap: 10px;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+.profile-column {
+  flex-grow: 1;
+}
+.profile-column table {
+  width: 100%;
+}
+body.dark .profile td {
+  background: rgba(255,255,255,0.04);
+}
+.profile td {
+  min-width: 100px;
+  vertical-align: top;
+  font-size: 14px;
+  padding:6px 10px;
+  white-space: pre-wrap;
+  background: rgba(0,0,0,0.04);
+}
+.app-icon {
+  width: 25px;
+  padding: 5px;
+}
+
+@media only screen and (max-width: 800px) {
+  body {
+    display: flex !important;
+    flex-direction: row !important;
+  }
+}
+@media only screen and (max-width: 600px) {
+  aside {
+    width: unset;
+    flex-shrink: unset;
+  }
+  aside {
+    padding: 0 10px;
+  }
+  aside .tab i {
+    width: 100%;
+  }
+  aside .tab .caption {
+    display: none;
+  }
+  aside .tab {
+    margin: 0;
+    padding: 10px;
+    border-left: none;
+  }
+  aside .btn-tab {
+    flex-direction: column;
+    padding: 10px 0;
+  }
+  aside .btn-tab .btn {
+    display: flex;
+    justify-content: center;
+  }
+  aside .btn-tab .btn .caption {
+    display: none; 
+  }
+  header .flexible {
+    min-width: unset;
+  }
+}
+
+@media only screen and (max-width: 480px) {
+  .btn2 {
+    padding: 5px;
+    font-size: 11px;
+  }
+  .nav-btns {
+    flex-grow: 1;
+    justify-content: center;
+    padding: 0;
+  }
+}
 </style>
+<script src="/popper.min.js"></script>
+<script src="/tippy-bundle.umd.min.js"></script>
 <script src="/hotkeys.min.js"></script>
 <script src="/sweetalert2.js"></script>
 <script src="/common.js"></script>
@@ -228,48 +797,139 @@ body.dark .config {
 <header class='navheader grabbable'>
 <h1>
 <a class='home' href="/"><img class='icon' src="/pinokio-black.png"></a>
-<button class='btn2' id='back'><div><i class="fa-solid fa-chevron-left"></i></div><div>Prev</div></button>
-<button class='btn2' id='forward'><div><i class="fa-solid fa-chevron-right"></i></div><div>Next</div></button>
-<button class='btn2' id='refresh-page'><div><i class="fa-solid fa-rotate-right"></i></div><div>Refresh</div></button>
+<button class='btn2' id='back' data-tippy-content="back"><div><i class="fa-solid fa-chevron-left"></i></div></button>
+<button class='btn2' id='forward' data-tippy-content="forward"><div><i class="fa-solid fa-chevron-right"></i></div></button>
+<button class='btn2' id='refresh-page' data-tippy-content="refresh"><div><i class="fa-solid fa-rotate-right"></i></div></button>
+<button class='btn2' id='screenshot' data-tippy-content="take a screenshot"><i class="fa-solid fa-camera"></i></button>
 <div class='flexible'></div>
-<a href="/connect" class='btn2'><div><i class="fa-solid fa-circle-user"></i></div><div>Connect</div></a>
-<div class='nav-btns'>
-  <a class='btn2' href="<%=portal%>" target="_blank"><div><i class="fa-solid fa-question"></i></div><div>Help</div></a>
-  <button class='btn2' id='genlog'><div><i class="fa-solid fa-laptop-code"></i></div><div>Logs</div></button>
-  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><div><i class="fa-solid fa-download"></i></div><div>Download logs</div></a>
-  <a class='btn2' href="/?mode=settings"><div><i class="fa-solid fa-gear"></i></div><div>Settings</div></a>
-  <button id='new-window' title='open a new window' class='btn2' data-agent="<%=agent%>"><div><i class="fa-solid fa-plus"></i></div><div>Window</div></button>
+<a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+  <div><i class="fa-solid fa-table-columns"></i></div>
+</a>
+<a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+  <div><i class="fa-solid fa-table-columns fa-rotate-270"></i></div>
+</a>
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-solid fa-plus"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
 </div>
-</h1>
+<!--
+<div class="dropdown btn2">
+  <button class='btn2' id='window-management'>
+    <div><i class="fa-regular fa-window-restore"></i></div>
+  </button>
+  <div class="dropdown-content" id="dropdown-content">
+    <button class='btn2' id='clone-win' data-tippy-content="clone this window">
+      <div><i class="fa-solid fa-clone"></i><div>clone this window</div></div>
+    </button>
+    <a class='btn2' href="/columns" data-tippy-content="split into 2 columns">
+      <div><i class="fa-solid fa-table-columns"></i><div>split columns</div></div>
+    </a>
+    <a class='btn2' href="/rows" data-tippy-content="split into 2 rows">
+      <div><i class="fa-solid fa-table-columns fa-rotate-270"></i><div>split rows</div></div>
+    </a>
+    <button id='new-window' data-tippy-content="open a new window" title='open a new window' class='btn2' data-agent="<%=agent%>">
+      <div><i class="fa-solid fa-plus"></i><div>new window</div></div>
+    </button>
+  </div>
+</div>
+-->
+<button class='btn2 hidden' id='close-window' data-tippy-content='close this section'>
+  <div><i class="fa-solid fa-xmark"></i></div>
+</button>
 </h1>
 </header>
 <main>
+<div class='container'>
   <div class='config'>
     <div class='config-header'>
-      <div class='header-label'><i class='fa-solid fa-circle-user'></i> Connect</div>
-      <div class='desc'>Authenticate 3rd party services with Pinokio.</div>
+      <div class='header-label'><i class="fa-solid fa-plug"></i> Login</div>
+      <div class='desc'>Log into localhost apps with 3rd party services.</div>
     </div>
   </div>
-  <div class='container'>
-    <div class='container-row'>
-    <% items.forEach((item) => { %>
-      <a class='card' href="<%=item.url%>">
-        <i class="<%=item.icon%>"></i>
-        <div class='col'>
-          <h3><%=item.title%></h3>
-          <div class='desc'><%=item.description%></div>
-        </div>
-      </a>
-    <% }) %>
+  <div class='menu-container'>
+    <div class='tab-content'>
+      <% items.forEach((item) => { %>
+        <% if (item.profile) { %>
+          <a href="<%=item.url%>" class="tab connected" target="_blank">
+            <div class='tab'>
+              <% if (item.image) { %>
+                <img class="app-icon" src="<%=item.image%>"/>
+              <% } else if (item.icon) { %>
+                <i class="<%=item.icon%> img"></i>
+              <% } else if (item.emoji) { %>
+                <div class='emoji'><%=item.emoji%></div>
+              <% } %>
+              <h2><%=item.title%></h2>
+              <div class="desc"><%-item.description%></div>
+              <div class="btn">
+                <i class="fa-solid fa-angle-right"></i>
+              </div>
+            </div>
+            <div class="profile">
+              <% if (item.profile.image) { %>
+                <img src="<%=item.profile.image%>">
+              <% } else if (item.profile.icon) { %>
+                <i class="<%=item.profile.icon%>"></i>
+              <% }  %>
+              <div class='profile-column'>
+                <table>
+                <% item.profile.items.forEach((row) => { %>
+                  <tr><td class='bold'><%=row.key%></td><td><%=row.val%></td></tr>
+                <% }) %>
+                </table>
+              </div>
+            </div>
+          </a>
+        <% } else { %>
+          <a href="<%=item.url%>" class="tab" target="_blank">
+            <% if (item.image) { %>
+              <img class="icon" src="<%=item.image%>"/>
+            <% } else if (item.icon) { %>
+              <i class="<%=item.icon%> img"></i>
+            <% } else if (item.emoji) { %>
+              <div class='emoji'><%=item.emoji%></div>
+            <% } %>
+            <h2><%=item.title%></h2>
+            <div class="desc"><%=item.description%></div>
+            <div class="btn">
+              <i class="fa-solid fa-angle-right"></i>
+            </div>
+          </a>
+        <% } %>
+      <% }) %>
     </div>
-      <!--
-      <div class='config-row' id='network_name'>
-        <div class='label'>Network Name</div>
-        <input id='name' type='text' value="name">
-      </div>
-      <button class='btn save'>Save</button>
-      -->
   </div>
+</div>
+<aside>
+  <div class='btn-tab'>
+    <a href="/init" class='btn'><i class="fa-solid fa-plus"></i><div class='caption'>Create</div></a>
+    <a class='btn' id='explore' href="/?mode=explore"><i class="fa-solid fa-globe"></i><div class='caption'>Discover</div></a>
+  </div>
+  <a href="/" class='tab'><i class='fas fa-laptop-code'></i><div class='caption'>This machine</div></a>
+  <a href="/network" class='tab'><i class="fa-solid fa-wifi"></i><div class='caption'>Local network</div></a>
+  <% if (list.length > 0) { %>
+    <% let brands = { win32: "windows", darwin: "apple", linux: "Linux" } %>
+    <% list.forEach(({ host, name, platform, processes }, index) => { %>
+      <a href="/net/<%=name%>" class='submenu tab'><i class="fa-brands fa-<%=brands[platform]%>"></i><div class='caption'><%=name%> (<%=current_host === host ? 'this machine' : host%>)</div></a>
+    <% }) %>
+  <% } %>
+  <a href="/connect" class='tab selected'><i class="fa-solid fa-plug"></i><div class='caption'>Login</div></a>
+  <a class='tab' href="<%=portal%>" target="_blank"><i class="fa-solid fa-question"></i><div class='caption'>Help</div></a>
+  <a class='tab' id='genlog'><i class="fa-solid fa-laptop-code"></i><div class='caption'>Logs</div></a>
+  <a id='downloadlogs' download class='hidden btn2' href="/pinokio/logs.zip"><i class="fa-solid fa-download"></i><div class='caption'>Download logs</div></a>
+  <a class='tab' href="/screenshots"><i class="fa-solid fa-camera"></i><div class='caption'>Screenshots</div></a>
+  <a class='tab' href="/tools"><i class="fa-solid fa-toolbox"></i><div class='caption'>Installed Tools</div></a>
+  <a class='tab' href="/?mode=settings"><i class="fa-solid fa-gear"></i><div class='caption'>Settings</div></a>
+</aside>
 </main>
 </body>
 </html>