Merge pull request #41 from beyluta/templates

July 23rd 2023 Minor stability update
beyluta · Jul 26, 2023 · 9f211c3 · 9f211c3
2 parents e5c0f0e + 279c303
commit 9f211c3
Show file tree

Hide file tree

Showing 31 changed files with 1,686 additions and 198 deletions.
diff --git a/Assets/Templates/availableSpace.html b/Assets/Templates/availableSpace.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="applicationTitle" content="Storage Status" />
+    <meta name="windowSize" content="360 180" />
+    <meta name="windowBorderRadius" content="10" />
+    <meta name="previewSize" content="360 180" />
+    <meta name="windowOpacity" content="200" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+  </head>
+  <body>
+    <span class="drive-wrapper"><i class="fa-solid fa-hard-drive"></i>C:\</span>
+    <div class="wrapper">
+      <span id="gigabytes">250GB</span>
+    </div>
+  </body>
+</html>
+
+<script>
+  function onNativeSpaceAvailableEvent(bytes) {
+    const gigabytes = Math.ceil(bytes / 1000000000).toFixed(0);
+    const terabytes = Math.ceil(bytes / 1000000000000).toFixed(2);
+
+    if (gigabytes > 1000) {
+      document.querySelector("#gigabytes").innerText = `${terabytes}TB`;
+    } else {
+      document.querySelector("#gigabytes").innerText = `${gigabytes}GB`;
+    }
+  }
+</script>
+
+<style>
+  @import url("https://fonts.googleapis.com/css2?family=Jaldi&display=swap");
+
+  :root {
+    --black: #323232;
+    --lightgray: #f1f1f1;
+    --gray: #b9b9b9;
+    --darkgray: #b8b8b8;
+    --blue: #18a8fa;
+    --darkblue: #1393db;
+    --purple: rgb(211, 34, 211);
+    --orange: rgb(255, 102, 0);
+  }
+
+  html,
+  body {
+    background: var(--black);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  i {
+    color: white;
+    font-size: 40px;
+  }
+
+  span {
+    font-family: "Jaldi", sans-serif;
+    font-size: 50px;
+    color: white;
+  }
+
+  .drive-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 10px;
+    font-size: 40px;
+    margin-bottom: -25px;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+  }
+
+  .wrapper > span:nth-child(1)::after {
+    content: "Of Available Space";
+    display: block;
+    text-align: center;
+    margin-top: -20px;
+    color: var(--gray);
+    font-size: 20px;
+  }
+
+  .wrapper > span:nth-child(2) {
+    font-size: 20px;
+    color: var(--lightgray);
+  }
+</style>
diff --git a/Assets/Templates/battery.html b/Assets/Templates/battery.html
@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta name="applicationTitle" content="Laptop Battery" />
+    <meta name="windowSize" content="360 180" />
+    <meta name="windowBorderRadius" content="10" />
+    <meta name="previewSize" content="360 180" />
+    <meta name="windowOpacity" content="200" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
+      integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+  </head>
+  <body>
+    <div class="wrapper">
+      <div class="battery" id="battery-icon">
+        <i class="fa-solid fa-battery-full"></i>
+      </div>
+      <span id="percent">100%</span>
+    </div>
+    <span class="status" id="status">Fully charged</span>
+  </body>
+</html>
+
+<script>
+  function onNativeBatteryLevelEvent(level) {
+    if (Number(level) >= 100) {
+      document.querySelector("#status").innerText = "Fully charged";
+      document.querySelector("#battery-icon").innerHTML =
+        '<i class="fa-solid fa-battery-full"></i>';
+    } else if (Number(level) >= 80) {
+      document.querySelector("#status").innerText = "High";
+      document.querySelector("#battery-icon").innerHTML =
+        '<i class="fa-solid fa-battery-three-quarters"></i>';
+    } else if (Number(level) >= 50) {
+      document.querySelector("#status").innerText = "Medium";
+      document.querySelector("#battery-icon").innerHTML =
+        '<i class="fa-solid fa-battery-half"></i>';
+    } else if (Number(level) >= 20) {
+      document.querySelector("#status").innerText = "Low";
+      document.querySelector("#battery-icon").innerHTML =
+        '<i class="fa-solid fa-battery-quarter"></i>';
+    } else {
+      document.querySelector("#status").innerText = "Very low";
+      document.querySelector("#battery-icon").innerHTML =
+        '<i class="fa-solid fa-battery-empty"></i>';
+    }
+
+    document.querySelector("#percent").innerText = `${level}%`;
+  }
+</script>
+
+<style>
+  @import url("https://fonts.googleapis.com/css2?family=Jaldi&display=swap");
+
+  :root {
+    --black: #323232;
+    --lightgray: #f1f1f1;
+    --gray: #b9b9b9;
+    --darkgray: #b8b8b8;
+    --blue: #18a8fa;
+    --darkblue: #1393db;
+    --purple: rgb(211, 34, 211);
+    --orange: rgb(255, 102, 0);
+  }
+
+  html,
+  body {
+    background: var(--black);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+  }
+
+  i {
+    color: white;
+    font-size: 80px;
+  }
+
+  span {
+    font-family: "Jaldi", sans-serif;
+    font-size: 50px;
+    color: white;
+  }
+
+  .wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 25px;
+  }
+
+  .status {
+    font-size: 24px;
+  }
+</style>
diff --git a/Assets/Templates/codeeditor.html b/Assets/Templates/codeeditor.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="applicationTitle" content="Simple JS Code Editor" />
+    <meta name="windowSize" content="360 350" />
+    <meta name="windowBorderRadius" content="10" />
+    <meta name="previewSize" content="360 180" />
+    <meta name="windowOpacity" content="200" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.css"
+    />
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/mode/javascript/javascript.min.js"
+      integrity="sha512-I6CdJdruzGtvDyvdO4YsiAq+pkWf2efgd1ZUSK2FnM/u2VuRASPC7GowWQrWyjxCZn6CT89s3ddGI+be0Ak9Fg=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/6.65.7/theme/material-darker.min.css"
+      integrity="sha512-2OhXH4Il3n2tHKwLLSDPhrkgnLBC+6lHGGQzSFi3chgVB6DJ/v6+nbx+XYO9CugQyHVF/8D/0k3Hx1eaUK2K9g=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
+      integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    />
+  </head>
+  <body>
+    <div class="header">
+      <div class="btn" onclick="runCode()">
+        Run <i class="fa-solid fa-play"></i>
+      </div>
+      <div class="btn clear" onclick="clearTextarea()">
+        Clear <i class="fa-solid fa-delete-left"></i>
+      </div>
+    </div>
+    <textarea></textarea>
+    <div class="terminal">
+      <div class="terminal-header">
+        <div class="items">Terminal</div>
+      </div>
+      <div class="logs"></div>
+    </div>
+  </body>
+</html>
+
+<script>
+  console.stdlog = console.log.bind(console);
+  console.logs = [];
+  console.log = function () {
+    console.logs.push(`${Array.from(arguments)}\r\n`);
+    console.stdlog.apply(console, arguments);
+  };
+
+  function $(selector) {
+    return document.querySelector(selector);
+  }
+
+  const editor = CodeMirror.fromTextArea($("textarea"), {
+    lineNumbers: true,
+    mode: "javascript",
+    theme: "material-darker",
+  });
+
+  function clearTextarea() {
+    editor.setValue("");
+    $(".logs").innerText = "";
+  }
+
+  function runCode() {
+    eval(editor.getValue());
+    const logs = console.logs.join("").slice(0, -1);
+    $(".logs").innerText = logs;
+    $(".logs").scrollTop = $(".logs").scrollHeight;
+  }
+</script>
+
+<style>
+  html,
+  body {
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    user-select: none;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+  }
+
+  .header {
+    background-color: #0e0e0e;
+    padding: 10px;
+    display: flex;
+    gap: 5px;
+  }
+
+  .header > .btn {
+    background-color: rgb(61, 172, 61);
+    color: #fff;
+    padding: 8px 16px;
+    border-radius: 5px;
+    cursor: pointer;
+    display: inline-block;
+    font-size: 12px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
+    text-transform: uppercase;
+  }
+
+  .header > .clear {
+    background-color: rgb(172, 61, 61);
+  }
+
+  .CodeMirror {
+    height: calc(100vh - 152px);
+  }
+
+  .terminal {
+    width: 100%;
+    height: 100px;
+    max-height: 100px;
+    overflow: hidden;
+    background: #0e0e0e;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .terminal > .terminal-header {
+    background: #080808;
+    height: 30px;
+    width: 100%;
+    display: flex;
+  }
+
+  .terminal > .terminal-header > .items {
+    color: #fff;
+    background-color: #0e0e0e;
+    padding: 5px 10px;
+    font-size: 12px;
+    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+    display: inline-block;
+    border-top-left-radius: 7px;
+    border-top-right-radius: 7px;
+  }
+
+  .terminal > .logs {
+    padding: 2px 10px;
+    font-size: 12px;
+    overflow: auto;
+    color: white;
+  }
+</style>