init

2026-01-04 07:58:23 -06:00
parent b50468eb5a
commit 6a435ac11a
122 changed files with 13995 additions and 19 deletions
--- a/ui/mobile/apps/Market/Market.js
+++ b/ui/mobile/apps/Market/Market.js
@@ -0,0 +1,105 @@
+import "./MarketSidebar.js"
+import "./MarketGrid.js"
+
+css(`
+    market- {
+        font-family: 'Bona';
+    }
+
+    market- input::placeholder {
+        font-family: 'Bona Nova';
+        font-size: 0.9em;
+        color: var(--accent);
+    }
+
+    input[type="checkbox"] {
+        appearance: none;        /* remove default style */
+        -webkit-appearance: none;
+        width: 1em;
+        height: 1em;
+        border: 1px solid var(--accent);
+    }
+
+    input[type="checkbox"]:checked {
+        background-color: var(--red);
+    }
+`)
+
+class Market extends Shadow {
+
+    listings = [
+        {
+            title: "Shield Lapel Pin",
+            stars: "5",
+            reviews: 1,
+            price: "$12",
+            company: "Hyperia",
+            type: "new",
+            image: "/db/images/1",
+            madeIn: "America"
+        }
+    ]
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                MarketSidebar()
+
+                MarketGrid(this.listings)
+            })
+            .width(100, "%")
+            .x(0).y(13, vh)
+
+            HStack(() => {
+                input("Search for products... (Coming Soon!)", "45vw")
+                    .attr({
+                        "type": "text",
+                        "disabled": "true"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("0.5px solid var(--divider)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .opacity(0.5)
+                    .borderRadius(10, px)
+                    .background("grey")
+                    .cursor("not-allowed")
+
+                button("+ Add Item")
+                    .width(7, em)
+                    .marginLeft(1, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("0.5px solid var(--accent2)")
+                    .color("var(--accent)")
+                    .fontFamily("Bona Nova")
+                    .onHover(function (hovering) {
+                        if(hovering) {
+                            this.style.background = "var(--green)"
+
+                        } else {
+                            this.style.background = "transparent"
+
+                        }
+                    })
+                    .onClick((clicking) => {
+                        console.log(this, "clicked")
+                    })
+
+            })
+            .x(55, vw).y(4, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
+
+    connectedCallback() {
+        // Optional additional logic
+    }
+}
+
+register(Market)