aaaaa

assets/code/apps.js

@@ -1326,16 +1326,39 @@ var app = {
           el.topbar = tk.c("div", document.body, "modernde-topbar");
           el.topbarLeft = tk.c("div", el.topbar, "")
           el.topbarRight = tk.c("div", el.topbar, "")
-          el.taskbar = tk.c("div", document.body, "modernde-taskbar");
+          el.taskbar = tk.c("div", document.body, "modernde-dock");
+          tk.img("./assets/img/systemicons/settings.svg", "", tk.c("div", el.taskbar, "modernde-dock-item"))
+          tk.img("./assets/img/systemicons/settings.svg", "", tk.c("div", el.taskbar, "modernde-dock-item"))
+          tk.img("./assets/img/systemicons/settings.svg", "", tk.c("div", el.taskbar, "modernde-dock-item"))
+          tk.img("./assets/img/systemicons/settings.svg", "", tk.c("div", el.taskbar, "modernde-dock-item"))
+          el.wp = tk.c("img", document.body, "modernde-wallpaper")
+          el.wp.src="/wallpaper/tricirc?4F46E5#581C87"
           const start = tk.cb("modernde-start", "", () => startmenu(), el.topbarLeft);
           var title = tk.c("span", el.topbarLeft, "modernde-title")
           title.innerText = abt.product || "WebDesk or Derivative work (set abt/product in index.html please)"
           start.innerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-command small-icon text-white opacity-80"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg>`;
           tk.cb("time modernde-time", "--:--", () => wd.controls.toggle(), el.topbarRight);
+          el.desktopCards = tk.c("div", document.body, "modernde-deskcardContainer")
+          el.sysstats = tk.c("div", el.desktopCards, "modernde-card mde-sysstatcard")
+          el.sysstats.innerHTML = `
+          <h1>System Status</h1>
+          <div class="statusline">
+            <b>Battery</b>
+            <div class="mde-progress" vtxt="50%" style="--vw: 50%" subtitle="20min to full"></div>
+          </div>
+          <div class="mde-statusline">
+            <b>OPFS Storage</b>
+            <div class="mde-progress" vtxt="50%" style="--vw: 50%" subtitle="Healthy"></div>
+          </div>`
         }, 200)
       }
       desktopgo()
     },
+    desktopEvent: function( ev ){
+      if(ev.type == "windowAdded") {
+
+      }
+    }
   }
 };
 window.installApp = function (appn, appid, appscripts, appico) {

assets/modernde.css

@@ -1,34 +1,193 @@
-.modernde-topbar{
+.modernde-topbar {
     backdrop-filter: blur(16px);
-    padding: .75rem;
-    background-color: rgba(0,0,0,0.2);
-    border-radius: .5rem;
+    padding: 0.75rem;
+    position: absolute;
+    top: 1.5rem;
+    left: 1.5rem;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 0.5rem;
     justify-content: space-between;
     display: flex;
     align-items: center;
     box-sizing: border-box;
-    width: 100%;
+    width: calc(100% - calc(1.5rem * 2));
+}
+
+[class^="modernde"],
+[class^="modernde"] * {
+    text-align: left;
 }
-[class^=modernde] button{
+
+[class^="modernde"] h1 {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+    font-weight: 600;
+    text-align: left;
+    margin-top: 0px;
+    margin-bottom: 0px;
+}
+
+[class^="modernde"] button {
     background-color: transparent !important;
     border: 0px;
     padding: 0px;
     margin: 0px;
     height: min-content;
 }
-.modernde-start, .modernde-start svg{
+
+.modernde-start,
+.modernde-start svg {
     height: 18px;
     width: 18px;
     color: #fff;
-    vertical-align:text-bottom;
+    vertical-align: text-bottom;
 }
-.modernde-topbar .time{
+
+.modernde-topbar .time {
     color: #fff;
 }
-.modernde-topbar > *{
-    opacity: .8;
+
+.modernde-topbar > * {
+    opacity: 0.8;
 }
-.modernde-topbar .modernde-title{
+
+.modernde-topbar .modernde-title {
     margin-left: 8px;
     color: #fff;
-}
+}
+
+.modernde-wallpaper {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 100vw;
+    height: 100vh;
+    object-fit: fill;
+    z-index: -1;
+    -webkit-user-drag: none;
+}
+
+.modernde-dock {
+    position: fixed;
+    bottom: 1rem;
+    left: 50%;
+    transform: translateX(-50%);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    padding: 0.45rem;
+    --tw-bg-opacity: 0.1;
+    background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
+    border-radius: 9999px;
+    display: flex;
+}
+
+.modernde-dock-item {
+    padding: 0.4rem;
+    /* equivalent to p-2 */
+    border-radius: 9999px;
+    /* equivalent to rounded-full */
+    cursor: pointer;
+    transition:
+        color 0.2s,
+        background-color 0.2s;
+    /* equivalent to transition-colors */
+    color: #fff;
+    height: 40px;
+    width: 40px;
+}
+
+.modernde-dock-item * {
+    color: #fff;
+}
+
+.modernde-dock-item img {
+    height: 100%;
+    width: 100%;
+}
+
+.modernde-dock-item:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+    /* equivalent to hover:bg-white with hover:bg-opacity-10 */
+}
+
+.modernde-card {
+    background-color: rgba(255, 255, 255, 0.1);
+    backdrop-filter: blur(16px);
+    border-radius: 0.5rem;
+    color: #ffffff;
+    padding: 1.5rem;
+}
+
+.modernde-deskcardContainer {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1.5rem;
+    /* 6 * 0.25rem */
+    width: calc(100% - 3rem);
+    position: absolute;
+    top: 5.5rem;
+    left: 1.5rem;
+}
+
+@media (min-width: 768px) {
+    /* md breakpoint */
+    .modernde-deskcardContainer {
+        grid-template-columns: repeat(2, 1fr);
+    }
+}
+
+@media (min-width: 1024px) {
+    /* lg breakpoint */
+    .modernde-deskcardContainer {
+        grid-template-columns: repeat(3, 1fr);
+    }
+}
+
+.mde-sysstatcard progress {
+    float: right;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    background-color: rgba(255, 255, 255, 0.2);
+    border: 0px;
+    border-radius: 9999px;
+}
+
+.mde-sysstatcard progress::-moz-progress-bar,
+.mde-sysstatcard progress::-webkit-progress-value {
+    background: rgb(96, 165, 250);
+    border-radius: 9999px;
+}
+
+.mde-progress {
+    float: right;
+    background-color: rgba(255, 255, 255, 0.2);
+    border: 0px;
+    border-radius: 9999px;
+    width: 40%;
+    height: 15px;
+}
+.mde-progress::before {
+    width: var(--vw);
+    display: block;
+    font-size: 0.6em;
+    content: attr(vtxt);
+    padding-right: 5px;
+    height: 15px;
+    text-align: right;
+    background: rgb(96, 165, 250);
+    border-radius: 9999px;
+}
+.mde-progress::after {
+    content: attr(subtitle);
+    font-size: x-small;
+    position: relative;
+    top: -5px;
+    display: inline-block;
+}
+.mde-statusline {
+    display: block;
+    position: relative;
+    top: 10px;
+    margin-bottom: 10px;
+}

index.html

@@ -19,6 +19,12 @@
         <!-- Load the Universal Sentence Encoder. This is required to use the novaOS AI. -->
         <script src="./assets/lib/use.js"></script>
     </head>
+    <style>
+        @font-face {
+          font-family: 'LucideIcons';
+          src: url(https://unpkg.com/lucide-static@latest/font/Lucide.ttf) format('truetype');
+        }
+      </style>
     <script>
         var abt = {
             lastmod: "July 29, 2024",
@@ -46,14 +52,7 @@
     </script>
 
     <body>
-        <div class="topbar">
-            <div class="title">
-                <button class="b1 time" onclick="wd.controls.toggle()">
-                    14:07:10
-                </button>
-            </div>
-        </div>
-        <div id="background"></div>
+
         <!--    <div class="circle"></div>
     <div class="circle2"></div> -->
         <div id="setuparea"></div>