basic menu, colors, else

html/index.html

@@ -23,6 +23,7 @@
         *{
             font-family: 'Comfortaa', cursive;
             font-size: 1rem;
+            transition: background-color 1000ms linear;
         }
     </style>
 </head>

index.js

@@ -1,16 +1,16 @@
 import { Stear, SWindow } from "./stear/main.js";
 import {applyScrollBarCss1} from "./stear/extra/Style/scrollBar1.js"
 import start from "./pages/start.jsx";
-
+import * as color from "./js/color.js"
 
 var stear = new Stear(document.querySelector("#stear"));
 
 stear.style({
-    backgroundColor: "#dde",
+    backgroundColor: color.bg(),
     fontFamily: "Helvetica Neue",
     fontWeight: "lighter",
     fontSize: "0.9em",
-    color: "#2a2a2a",
+    color: color.text(),
 });
 
 applyScrollBarCss1();
@@ -22,3 +22,5 @@ Stear.addLanguageFile({
     
 }, "de");
 Stear.lang = "de";
+
+window.stear = stear;

js/color.js

@@ -0,0 +1,36 @@
+let dark = true;
+
+export const text = () =>{
+    return "#2a2a2a";
+}
+export const bg = () =>{
+    if(dark) return "#4b6584";
+    else return "#d1d8e0";
+}
+export const mainBar = () =>{
+    if(dark) return "#3867d6";
+    else return "#45aaf2";
+}
+export const modeInUse = () =>{
+    if(dark) return "#27ae60";
+    else return "#2ecc71";
+}
+export const modeNotInUse = () =>{
+    if(dark) return "#c0392b";
+    else return "#e74c3c";
+}
+export const floatingBtn = () =>{
+    return mainBar();
+}
+export const floatingMenu = ()=>{
+    return bg();
+}
+export const cancleBtn = () =>{
+    if(dark) return "#eb3b5a";
+    else return "#fc5c65";
+}
+
+export const setMode = (m)=> {
+    if(m==-1) dark = !dark;
+    else dark = m;
+}

pages/elems/mode.jsx

@@ -0,0 +1,26 @@
+import { SFrame, Stear, s } from "../../stear/main";
+import * as color from "../../js/color.js";
+
+export const LightMode = new SFrame({
+    call: (stear, { find, resolve, render, call, event }, args) => {
+
+        return <div style={{
+            position: "fixed",
+            height: "4rem",
+            width: "4rem",
+            right: "0.5rem",
+            bottom: "0.5rem",
+            zIndex: "1000",
+            fontSize: "4rem",
+            lineHeight: "3.35rem",
+            textAlign: "center",
+            cursor: "pointer",
+            borderRadius: "2rem",
+            backgroundColor: color.floatingBtn,
+            userSelect: "none",
+        }} event={{pointerdown:()=>{color.setMode(-1);stear.rerenderGlobal()}}}>
+            ☼
+        </div>
+
+    }
+});

pages/led/system.jsx

@@ -0,0 +1,13 @@
+import { bg } from "../../js/color";
+import { SWindow, s } from "../../stear/main";
+
+
+export default new SWindow({
+    call: async (stear,{find, resolve, close, render, call, event, include},args)=>{
+        call(connect,{},false);
+        return <div>
+            system Main
+        </div>;
+    },
+    backgroundColor: "transparent"
+})

pages/menu.jsx

@@ -1,5 +1,7 @@
+import * as color from "../js/color.js";
 import { Stear, SWindow, _, s } from "../stear/main.js";
 import { fadein } from "../stear/utils.js";
+import remote from "./remote/remote.jsx";
 
 const pool = Stear.addLanguagePool("home");
 const connected = pool.add("conncted", "Connected to: {}");
@@ -17,18 +19,23 @@ export default new SWindow({
         let window = 0;
 
         let wins = [
-            include
+            include(remote)
-        ]
+        ];
+        let show = 0;
 
         return <div style={{ display: 'flex', flexDirection: "column", height: "100%", alignItems: "center" }}>
-            <div style={{ backgroundColor: "#99e", width: "100%", height: "5rem", display: "flex",alignItems: "center" }}>
+            <div style={{ backgroundColor: color.mainBar, width: "100%", height: "5rem", display: "flex",alignItems: "center", boxShadow: "rgba(50, 50, 50, 0.2) 0px 8px 24px"}}>
                 <div style={{ display: "flex",  height: "100%", flexDirection: "row", alignItems: "center", gap: "0.5rem", paddingLeft: "0.5rem", width:"100%" }} find="menu">
                     {() => {
                         console.log("rerender");
                         return ["#0f0", "#00f", "#ff0"].map((d, i) => {
 
                             return <div style={
-                                { height: "2rem", width: "2rem", borderRadius: "2rem", backgroundColor: d, border: "5px solid " + (mode == i ? "green" : "red") }
+                                { height: "2rem", 
+                                width: "2rem", 
+                                borderRadius: "2rem", 
+                                backgroundColor: d, 
+                                border: "5px solid " + (mode == i ? color.modeInUse() : color.modeNotInUse()) }
                             } event={{
                                 pointerdown: () => {
                                     mode = i;
@@ -41,9 +48,17 @@ export default new SWindow({
                 <label style={{width:"100%",textAlign:"center",fontSize:"2rem"}}>JuPad</label>
                 <div style={{width:"100%",textAlign:"right",paddingRight:"0.5rem"}} >rigth</div>
             </div>
-            <div style={{ width: "100%", height: "100%" }}>
+            <div style={{ width: "100%", height: "100%", position: "relative"}}>
-
+                    {()=>{
+                        wins[show].opts.render();
+                        return wins[show].render({
+                            style: {
+                                height: "100%",
+                                width: "100%"
+                            }
+                        });
+                    }}
             </div>
         </div>;
-    }, backgroundColor: "#dde"
+    }, backgroundColor: color.bg
 });

pages/remote/connect.jsx

@@ -0,0 +1,51 @@
+import { bg, floatingBtn, floatingMenu, text } from "../../js/color";
+import { SWindow, s, SFrame } from "../../stear/main";
+import { fadein, fadeout,subCancel } from "../../stear/utils";
+
+
+export default new SFrame({
+    call: async (stear, { find, resolve, close, render, call, event, include }, args) => {
+        event.onloaded = ()=>{
+            fadein(find.main,200,true);
+        }        
+        event.onresolve = async () => {
+            await fadeout(find.main);
+        }
+
+        let cancelSub = subCancel(()=>{
+            resolve(false);
+        })
+
+        return <div find="main" style={{ background: "rgba(0,0,0,0.3)", height: "100%", width: "100%", position:"absolute",opacity:0}}>
+            <div style={{
+                minWidth: "75%",
+                minHeight: "75%",
+                backgroundColor: floatingMenu,
+                borderRadius: "4rem",
+                padding: "2rem",
+                top: "50%", left: "50%", 
+                position: "absolute",
+                transform: "translate(-50%,-50%)"
+            }}>
+                <div style={{}}>
+                    <div style={{
+                            fontSize: "3rem",
+                            padding: "0.1rem",
+                            display: "unset",
+                            backgroundColor: text,
+                            backgroundClip: "text",
+                            webkitBackgroundClip: "text",
+                            color: "transparent",
+                            cursor:"pointer",
+                            userSelect: "none",
+                    }}
+                    event={{pointerdown:()=>{
+                        cancelSub();
+                        resolve(false);
+                    }}}>❌</div>
+                
+                </div>
+            </div>
+        </div>;
+    }
+})

pages/remote/remote.jsx

@@ -1,9 +1,17 @@
-import { SWindow } from "../../stear/main";
+import { bg } from "../../js/color";
+import { SWindow, s } from "../../stear/main";
+import connect from "./connect";
 
 
 export default new SWindow({
     call: async (stear,{find, resolve, close, render, call, event, include},args)=>{
         
+        return <div>
+            remote Main
+            <button event={{pointerdown:()=>{
+                call(connect,{},false);
+            }}}> connect</button>
+        </div>;
     },
-    backgroundColor: "#dde"
+    backgroundColor: "transparent"
 })

pages/start.jsx

@@ -1,5 +1,7 @@
+import { bg } from "../js/color.js";
 import { Stear, SWindow, _,s } from "../stear/main.js";
 import { fadein, fadeout, wait } from "../stear/utils.js";
+import { LightMode } from "./elems/mode.jsx";
 import menu from "./menu.jsx";
 
 
@@ -22,6 +24,7 @@ export default new SWindow({call: (stear, { find, resolve, render, call, event }
         await wait(Math.max(1, 1000 - performance.now()));
         await fadeout(find.main);
         call(menu);
+        stear.call(LightMode,{},1000);
         resolve();
     } 
 
@@ -37,4 +40,4 @@ export default new SWindow({call: (stear, { find, resolve, render, call, event }
             animation: `${wobel} 1s ease-in-out 0s infinite`,
         }}/>
     </div>;
-}, preRender: true, backgroundColor:"#dde"});
+}, preRender: true, backgroundColor:bg});

pages/system/led.jsx

@@ -0,0 +1,13 @@
+import { bg } from "../../js/color";
+import { SWindow, s } from "../../stear/main";
+
+
+export default new SWindow({
+    call: async (stear,{find, resolve, close, render, call, event, include},args)=>{
+        call(connect,{},false);
+        return <div>
+            led Main
+        </div>;
+    },
+    backgroundColor: "transparent"
+})