adding qr codes, converting site to quill

.gitignore

@@ -1,7 +1,9 @@
 .DS_Store
 package-lock.json
+node_modules
 _/build
 content
 db/*
 server/db/users.json
 abetaccredited.html
+qrCodes/qr_codes

qrCodes/generateQRCodes.js

@@ -0,0 +1,53 @@
+import QRCode from 'qrcode';
+import { v4 as uuidv4 } from 'uuid';
+import fs from 'fs';
+import { createObjectCsvWriter as createCsvWriter } from 'csv-writer';
+
+// CONFIG
+const totalQRCodes = 50;
+const baseUrl = 'https://hyperia.so/signup?token='; // Replace with your URL
+const outputDir = './qr_codes';
+
+// Ensure output directory exists
+if (!fs.existsSync(outputDir)){
+    fs.mkdirSync(outputDir);
+}
+
+// Create CSV writer
+const csvWriter = createCsvWriter({
+    path: 'tokens.csv',
+    header: [
+        {id: 'index', title: 'Index'},
+        {id: 'token', title: 'Token'},
+        {id: 'url', title: 'URL'},
+        {id: 'used', title: 'Used'}
+    ]
+});
+
+const records = [];
+
+(async () => {
+    for (let i = 0; i < totalQRCodes; i++) {
+        const token = uuidv4();
+        const fullUrl = `${baseUrl}${token}`;
+        const fileName = `${outputDir}/qr_${i + 1}_${token}.png`;
+
+        try {
+            await QRCode.toFile(fileName, fullUrl);
+            console.log(`Generated: ${fileName}`);
+
+            records.push({
+                index: i + 1,
+                token,
+                url: fullUrl,
+                used: 'N'
+            });
+        } catch (err) {
+            console.error(`Error generating QR code ${i + 1}:`, err);
+        }
+    }
+
+    // Save tokens to CSV
+    await csvWriter.writeRecords(records);
+    console.log('All QR codes generated and tokens saved to tokens.csv');
+})();

qrCodes/package.json

@@ -0,0 +1,8 @@
+{
+  "type": "module",
+  "dependencies": {
+    "csv-writer": "^1.6.0",
+    "qrcode": "^1.5.4",
+    "uuid": "^13.0.0"
+  }
+}

qrCodes/readme.md

@@ -0,0 +1,33 @@
+This is a standalone sub-app to generate QR codes for the business cards
+
+1. Run "generateQRCodes.js". This will create a qr_codes folder with all the codes as png images.
+2. Upload all the Images into Figma. They should auto-organize into a grid.
+3. Make QR Codes Transparent
+- Select all the images
+- go to the "Appearance" section in the right sidebar
+- click the droplet ("Apply blend mode")
+- select "Darken" from the menu
+4. Make QR Codes the Right Size
+- Change the width (and height) of each image to 538
+5. Frame All Images
+- Search "Batch wrap in Frame" in Figma plugins
+- Select "Multiple Wrapper" plugin
+- Wrap each image in a frame
+6. Add Backgrounds
+- Go to "Layout" section in right sidebar, select the "vertical" option (the icon with the 2 rectangles and arrow pointing down)
+- Center the images using the alignment tool (right below width and height inputs)
+- Change the width to 1888, height to 1079
+- Change fill to #FFEACA
+7. Export as 50 different images
+8. Upload Each one to Moo
+
+
+
+Process Improvements:
+Figure out how to upload more efficiently (6 min per 50 cards)
+Figure out how to add number to card so I know which one I am giving to people
+
+
+
+
+

qrCodes/tokens.csv

@@ -0,0 +1,51 @@
+Index,Token,URL,Used
+1,810387b6-851e-4883-b9a3-c59703dc0fc9,https://hyperia.so/signup?token=810387b6-851e-4883-b9a3-c59703dc0fc9,N
+2,d0b417c4-d69a-4958-9e1d-0658176d2710,https://hyperia.so/signup?token=d0b417c4-d69a-4958-9e1d-0658176d2710,N
+3,1719b6d8-9b13-4720-ab94-9af5cbe42137,https://hyperia.so/signup?token=1719b6d8-9b13-4720-ab94-9af5cbe42137,N
+4,16659e04-afbb-4192-9195-90f2f49277b2,https://hyperia.so/signup?token=16659e04-afbb-4192-9195-90f2f49277b2,N
+5,88abc4b3-8416-4499-9fa7-6778841e4b23,https://hyperia.so/signup?token=88abc4b3-8416-4499-9fa7-6778841e4b23,N
+6,e3342dd5-a214-4280-9488-f48f91e728ce,https://hyperia.so/signup?token=e3342dd5-a214-4280-9488-f48f91e728ce,N
+7,a8176432-4e72-42b7-ac9a-2d799039f729,https://hyperia.so/signup?token=a8176432-4e72-42b7-ac9a-2d799039f729,N
+8,1d57b6e0-e6c3-4ab6-808f-72b64b8303ee,https://hyperia.so/signup?token=1d57b6e0-e6c3-4ab6-808f-72b64b8303ee,N
+9,67264f06-c4b1-4334-8ba8-0e5e045021df,https://hyperia.so/signup?token=67264f06-c4b1-4334-8ba8-0e5e045021df,N
+10,e9fa5701-d90f-45d0-8e2b-7c3ef9022362,https://hyperia.so/signup?token=e9fa5701-d90f-45d0-8e2b-7c3ef9022362,N
+11,c082880a-f12c-4eb0-b136-e11df9e6bde8,https://hyperia.so/signup?token=c082880a-f12c-4eb0-b136-e11df9e6bde8,N
+12,083a18f5-6491-4dbf-9a28-2b22b6b4a5bd,https://hyperia.so/signup?token=083a18f5-6491-4dbf-9a28-2b22b6b4a5bd,N
+13,af94443c-a0c5-4c58-a2e5-16a8c6d573c8,https://hyperia.so/signup?token=af94443c-a0c5-4c58-a2e5-16a8c6d573c8,N
+14,5673dd07-25b1-441f-abbc-89b5e5a2b3e9,https://hyperia.so/signup?token=5673dd07-25b1-441f-abbc-89b5e5a2b3e9,N
+15,f2b30979-1ece-41e1-87ec-6a102a21e809,https://hyperia.so/signup?token=f2b30979-1ece-41e1-87ec-6a102a21e809,N
+16,d52c1bcc-8b97-4535-8395-dfdab4ee543a,https://hyperia.so/signup?token=d52c1bcc-8b97-4535-8395-dfdab4ee543a,N
+17,7fed8604-1801-4500-8615-2ac8eb50c896,https://hyperia.so/signup?token=7fed8604-1801-4500-8615-2ac8eb50c896,N
+18,e312c854-8df7-4c68-9f3f-1822b718b092,https://hyperia.so/signup?token=e312c854-8df7-4c68-9f3f-1822b718b092,N
+19,5979853c-1755-4403-bea5-3b111384ffb3,https://hyperia.so/signup?token=5979853c-1755-4403-bea5-3b111384ffb3,N
+20,d93307e4-a0a0-4b4a-86d0-897ca5382cdd,https://hyperia.so/signup?token=d93307e4-a0a0-4b4a-86d0-897ca5382cdd,N
+21,b73b803a-c49d-4ea9-b8ed-f04be0373157,https://hyperia.so/signup?token=b73b803a-c49d-4ea9-b8ed-f04be0373157,N
+22,5a0a7a8c-f080-4708-a2e1-fcd2d613adb1,https://hyperia.so/signup?token=5a0a7a8c-f080-4708-a2e1-fcd2d613adb1,N
+23,99c547fe-1ec1-4ddc-bfcb-b95d73fdd907,https://hyperia.so/signup?token=99c547fe-1ec1-4ddc-bfcb-b95d73fdd907,N
+24,6da35b58-81ea-478f-9ef5-8a70b407bfcf,https://hyperia.so/signup?token=6da35b58-81ea-478f-9ef5-8a70b407bfcf,N
+25,402f4f83-165b-4b5a-b1f2-3dccc7ec5ef6,https://hyperia.so/signup?token=402f4f83-165b-4b5a-b1f2-3dccc7ec5ef6,N
+26,04afd891-1250-4a6d-b239-3bdd06082c71,https://hyperia.so/signup?token=04afd891-1250-4a6d-b239-3bdd06082c71,N
+27,c807c67f-2d8d-4f54-b657-8cb3aaf19b28,https://hyperia.so/signup?token=c807c67f-2d8d-4f54-b657-8cb3aaf19b28,N
+28,5cf7639e-22b3-4469-8155-d490cc164367,https://hyperia.so/signup?token=5cf7639e-22b3-4469-8155-d490cc164367,N
+29,90e82173-c7f8-47d9-9619-b333e032d1af,https://hyperia.so/signup?token=90e82173-c7f8-47d9-9619-b333e032d1af,N
+30,5eed9d33-81ea-420f-834b-a71b01eb6f54,https://hyperia.so/signup?token=5eed9d33-81ea-420f-834b-a71b01eb6f54,N
+31,2e96ecaa-bf8e-403c-89f3-8b2924788df3,https://hyperia.so/signup?token=2e96ecaa-bf8e-403c-89f3-8b2924788df3,N
+32,7edb52b1-35ce-42c6-8cd0-341f3ee38f4c,https://hyperia.so/signup?token=7edb52b1-35ce-42c6-8cd0-341f3ee38f4c,N
+33,ad5f483d-338f-4efc-936d-8253854b38a5,https://hyperia.so/signup?token=ad5f483d-338f-4efc-936d-8253854b38a5,N
+34,d49a3c80-d0b8-4796-b1e2-f42d5ae0cc69,https://hyperia.so/signup?token=d49a3c80-d0b8-4796-b1e2-f42d5ae0cc69,N
+35,382a7ffd-9227-4edc-8bc6-8c3ae82ccf14,https://hyperia.so/signup?token=382a7ffd-9227-4edc-8bc6-8c3ae82ccf14,N
+36,27762835-f211-4c72-8187-b3f87ccb846c,https://hyperia.so/signup?token=27762835-f211-4c72-8187-b3f87ccb846c,N
+37,7344f7ce-2609-46f4-b2cb-28dafc547270,https://hyperia.so/signup?token=7344f7ce-2609-46f4-b2cb-28dafc547270,N
+38,fd23ce26-d78a-49fc-b198-1a73071a2db4,https://hyperia.so/signup?token=fd23ce26-d78a-49fc-b198-1a73071a2db4,N
+39,869227be-1c80-421f-a17e-e052929c43e3,https://hyperia.so/signup?token=869227be-1c80-421f-a17e-e052929c43e3,N
+40,3ac9b048-a132-4fad-bb2d-9bb1820592c8,https://hyperia.so/signup?token=3ac9b048-a132-4fad-bb2d-9bb1820592c8,N
+41,7d9c71ac-646b-4a6b-b758-f55f632cec6f,https://hyperia.so/signup?token=7d9c71ac-646b-4a6b-b758-f55f632cec6f,N
+42,6ad3a682-14fa-48d7-96bd-fd61b2b314dd,https://hyperia.so/signup?token=6ad3a682-14fa-48d7-96bd-fd61b2b314dd,N
+43,c02ae012-089a-4c3b-bd28-8d7cedc2df0d,https://hyperia.so/signup?token=c02ae012-089a-4c3b-bd28-8d7cedc2df0d,N
+44,df82c2b6-bd8c-4b69-bc8c-a1d7df53727c,https://hyperia.so/signup?token=df82c2b6-bd8c-4b69-bc8c-a1d7df53727c,N
+45,1444c46c-4985-4e52-8cbf-f6d77795deae,https://hyperia.so/signup?token=1444c46c-4985-4e52-8cbf-f6d77795deae,N
+46,38954160-0865-4f55-b190-e2a5a2268df1,https://hyperia.so/signup?token=38954160-0865-4f55-b190-e2a5a2268df1,N
+47,0e88166f-936a-4156-a89d-e71e825db36e,https://hyperia.so/signup?token=0e88166f-936a-4156-a89d-e71e825db36e,N
+48,a94aee8f-c47d-4606-a734-69355dfc642e,https://hyperia.so/signup?token=a94aee8f-c47d-4606-a734-69355dfc642e,N
+49,de407269-9e31-485b-a857-5ba5d1a5ca5b,https://hyperia.so/signup?token=de407269-9e31-485b-a857-5ba5d1a5ca5b,N
+50,f2016b40-a179-47ec-a415-84caa7da8521,https://hyperia.so/signup?token=f2016b40-a179-47ec-a415-84caa7da8521,N

ui/_/code/quill.js

@@ -113,10 +113,9 @@ window.quill = {
         if(el instanceof Shadow) {
             let parent = quill.rendering[quill.rendering.length-1]
             if(!parent) {
-                document.currentScript.replaceWith(el)
-            } else {
-                parent.appendChild(el)
+                parent = document.body
             }
+            parent.appendChild(el)
         } else {
             if(!el.render) {el.render = () => {}}
             let parent = quill.rendering[quill.rendering.length-1]
@@ -572,11 +571,11 @@ window.form = function(cb) {
     return el
 }
 
-window.input = function(placeholder, dimensions) {
+window.input = function(placeholder, width, height) {
     let el = document.createElement("input")
     el.placeholder = placeholder
-    if(dimensions.width) el.style.width = dimensions.width
-    if(dimensions.height) el.style.height = dimensions.height
+    el.style.width = width
+    el.style.height = height
     quill.render(el)
     return el
 }
@@ -751,8 +750,17 @@ HTMLElement.prototype.removeAllListeners = function() {
 /* ATTRIBUTES */
 
 HTMLElement.prototype.attr = function(attributes) {
+    if (
+        typeof attributes !== "object" || 
+        attributes === null || 
+        Array.isArray(attributes)
+    ) {
+        throw new TypeError("attr() expects an object with key-value pairs");
+    }
+
     for (const [key, value] of Object.entries(attributes)) {
         this.setAttribute(key, value);
     }
+    console.log(this)
     return this;
 };

ui/site/apps/Forum.js

@@ -0,0 +1,14 @@
+css(`
+    forum- {
+        width: 100%; height: 100%;
+    }
+`)
+    
+export default class Forum extends HTMLElement {
+
+    connectedCallback() {     
+        this.innerHTML += /* html */`<p style="position: fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%)">Coming Soon!</p>`
+    }
+}
+
+customElements.define("forum-", Forum)

ui/site/apps/Market.js

@@ -0,0 +1,29 @@
+class Market extends Shadow {
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                input("Search for products...", "50vw")
+                    .attr({
+                        "type": "text"
+                    })
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .outline("none")
+                    .color("var(--accent)")
+                button("Search")
+            })
+            .x(50, vw).y(5, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
+
+    connectedCallback() {
+        // Optional additional logic
+    }
+}
+
+registerShadow(Market)

ui/site/apps/Messages.js

@@ -0,0 +1,15 @@
+css(`
+    messages- {
+        width: 100%; height: 100%;
+    }
+`)
+    
+export default class Messages extends HTMLElement {
+
+    connectedCallback() {     
+        console.log("rendeirng messages")
+        this.innerHTML += /* html */`<p style="position: fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%)">Coming Soon!</p>`
+    }
+}
+
+customElements.define("messages-", Messages)

ui/site/components/AppMenu.js

@@ -47,8 +47,6 @@ class AppMenu extends Shadow {
         p("Forum")
         p("Messages")
         p("Market")
-        p("Security")
-        p("Jobs")
     }
 
     connectedCallback() {

ui/site/components/AppWindow.js

@@ -1,25 +1,43 @@
-css(`
-    app-window {
-        width: 100vw;
-        height: 100vh;
-        background-color: var(--main);
-        position: fixed;
-        top: 0;
-        left: 0;
-        display: none;
-    }
-`)
+import "../apps/Forum.js"
+import "../apps/Messages.js"
+import "../apps/Market.js"
 
-export default class AppWindow extends HTMLElement {
+class AppWindow extends Shadow {
+    app;
+
+    render() {
+        ZStack(() => {
+            console.log("happening")
+            switch(this.app) {
+                case "Forum":
+                    Forum()
+                    break;
+                case "Messages":
+                    Messages()
+                    break;
+                case "Market":
+                    Market()
+                    break;
+            }
+        })
+        .display(this.app ? '' : 'none')
+        .width(100, "vw")
+        .height(100, "vh")
+        .backgroundColor("var(--main)")
+        .position("fixed")
+        .top(0)
+        .left(0)
+    }
 
     open(app) {
-        console.log("opening", app)
-        this.style.display = "block"
+        this.app = app
+        this.rerender()
     }
 
     close() {
         this.style.display = "none"
     }
+
 }
 
-customElements.define("app-window", AppWindow)
+registerShadow(AppWindow, "app-window")

ui/site/components/Home.js

@@ -0,0 +1,53 @@
+import "./AppWindow.js"
+import "./AppMenu.js"
+import "./ProfileButton.js"
+import "./InputBox.js"
+import "./Sidebar.js"
+
+css(`
+    #divider.minimized {
+        display: none;
+    }
+`)
+    
+class Home extends Shadow {
+
+    render() {
+        ZStack(() => {
+            div()
+                .width(100, vw)
+                .height(100, vh)
+                .margin("0px")
+                .backgroundImage("url('_/images/the_return.webp')")
+                .backgroundSize("cover")
+                .backgroundPosition("48% 65%")
+                .backgroundRepeat("no-repeat")
+
+                AppWindow()
+
+                ProfileButton()
+                    .zIndex(1)
+                    .cursor("default")
+                    .position("fixed")
+                    .top("5.5vh")
+                    .right("4.5vw")
+
+                img("_/icons/logo.svg", "3.5em")
+                    .position("fixed")
+                    .left("3em")
+                    .top("2em")
+
+                AppMenu()
+
+                img("_/images/divider.svg", "40vw")
+                    .attr({"id": "divider"})
+                    .position("fixed")
+                    .bottom("2em")
+                    .left("50vw")
+                    .transform("translateX(-50%)")
+        })
+
+    }
+}
+
+registerShadow(Home)

ui/site/components/ProfileButton.js

@@ -1,17 +1,20 @@
-import ProfileMenu from "./ProfileMenu.js"
+import "./ProfileMenu.js"
 
-css(`
-    profile-button {
-        display: block;
-        width: 1.5em
-    }
-`)
+class ProfileButton extends Shadow {
 
-export default class ProfileButton extends HTMLElement {
-    hovered = false
+    render() {
+        ZStack(() => {
+            html(`
+                <svg  style="position: absolute;" viewBox="0 0 88 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path opacity="0.998" d="M42.4512 2.00195C52.1659 2.22835 61.398 4.45649 70.166 8.69238L70.3818 8.79688L70.6162 8.84668C72.5686 9.26638 74.537 9.47923 76.5195 9.48535C76.5062 11.0178 76.3492 12.5388 76.0479 14.0508C74.4195 16.4705 72.6152 18.7571 70.6279 20.9072L69.8799 21.7168L70.1641 22.7812C71.785 28.8491 72.6458 35.0483 72.7471 41.3818L72.7549 41.8369L72.958 42.2432C74.3564 45.0408 75.7681 47.8651 77.1934 50.7148C76.401 51.7697 75.5014 52.7412 74.4893 53.6279L73.8906 54.1533L73.8164 54.9463C73.2326 61.1851 71.2275 66.786 67.8037 71.7871C66.3409 71.9333 64.8778 72.0802 63.415 72.2266C61.648 72.4034 59.8809 72.5803 58.1143 72.7568L56.9131 72.877L56.46 73.9951C55.1158 77.3095 54.9178 80.7587 55.8496 84.2715L55.9658 84.708L56.2578 85.0527C58.3856 87.5622 60.8538 89.6502 63.6553 91.3105L63.7783 91.3838L63.9102 91.4385C70.6068 94.2094 77.192 97.0352 83.665 99.9141C72.8406 106.409 62.2808 113.347 51.9873 120.731C49.5114 121.96 46.9641 122.264 44.2627 121.648C30.7653 112.891 16.9807 104.63 2.91113 96.8623C2.98649 96.7878 3.06425 96.7148 3.14453 96.6436C9.6346 94.2535 15.6931 91.0299 21.3154 86.9707L21.5225 86.8213L21.6855 86.625C23.5522 84.3704 24.9161 81.8385 25.7686 79.041L25.8184 78.877L25.8398 78.7061C26.5676 72.8871 26.5676 67.0651 25.8398 61.2461L25.7744 60.7236L25.4609 60.3018C16.1326 47.7366 13.0625 33.9256 16.21 18.7246C21.8795 8.29751 30.5529 2.76795 42.4512 2.00195Z" 
+                        fill="${this.hovered ? window.getColor("orange") : window.getColor("periwinkle")}" fill-opacity="0.36" stroke="${this.hovered ? window.getColor("orange") : window.getColor("periwinkle")}" stroke-width="4"/>
+                </svg>
+            `)
 
-    connectedCallback() {
-        this.render()
+            ProfileMenu()
+        })
+        .display("block")
+        .width(1.5, em)
 
         document.addEventListener("mousemove", (e) => {
             this.previousHovered = this.hovered
@@ -22,29 +25,19 @@ export default class ProfileButton extends HTMLElement {
             }
             if(this.hovered !== this.previousHovered) {
                 if(this.hovered === true) {
-                    this.render()
+                    this.rerender()
                     setTimeout(() => {
                         this.querySelector("profile-menu").className = "open"
                     })
                 } else {
                     this.querySelector("profile-menu").className = "closed"
                     setTimeout(() => {
-                        this.render()
+                        this.rerender()
                     }, 140)
                 }
             }
         })
     }
-
-    render() {
-        this.innerHTML = /* html */`
-            <svg  style="position: absolute;" viewBox="0 0 88 124" fill="none" xmlns="http://www.w3.org/2000/svg">
-                <path opacity="0.998" d="M42.4512 2.00195C52.1659 2.22835 61.398 4.45649 70.166 8.69238L70.3818 8.79688L70.6162 8.84668C72.5686 9.26638 74.537 9.47923 76.5195 9.48535C76.5062 11.0178 76.3492 12.5388 76.0479 14.0508C74.4195 16.4705 72.6152 18.7571 70.6279 20.9072L69.8799 21.7168L70.1641 22.7812C71.785 28.8491 72.6458 35.0483 72.7471 41.3818L72.7549 41.8369L72.958 42.2432C74.3564 45.0408 75.7681 47.8651 77.1934 50.7148C76.401 51.7697 75.5014 52.7412 74.4893 53.6279L73.8906 54.1533L73.8164 54.9463C73.2326 61.1851 71.2275 66.786 67.8037 71.7871C66.3409 71.9333 64.8778 72.0802 63.415 72.2266C61.648 72.4034 59.8809 72.5803 58.1143 72.7568L56.9131 72.877L56.46 73.9951C55.1158 77.3095 54.9178 80.7587 55.8496 84.2715L55.9658 84.708L56.2578 85.0527C58.3856 87.5622 60.8538 89.6502 63.6553 91.3105L63.7783 91.3838L63.9102 91.4385C70.6068 94.2094 77.192 97.0352 83.665 99.9141C72.8406 106.409 62.2808 113.347 51.9873 120.731C49.5114 121.96 46.9641 122.264 44.2627 121.648C30.7653 112.891 16.9807 104.63 2.91113 96.8623C2.98649 96.7878 3.06425 96.7148 3.14453 96.6436C9.6346 94.2535 15.6931 91.0299 21.3154 86.9707L21.5225 86.8213L21.6855 86.625C23.5522 84.3704 24.9161 81.8385 25.7686 79.041L25.8184 78.877L25.8398 78.7061C26.5676 72.8871 26.5676 67.0651 25.8398 61.2461L25.7744 60.7236L25.4609 60.3018C16.1326 47.7366 13.0625 33.9256 16.21 18.7246C21.8795 8.29751 30.5529 2.76795 42.4512 2.00195Z" 
-                    fill="${this.hovered ? window.getColor("orange") : window.getColor("periwinkle")}" fill-opacity="0.36" stroke="${this.hovered ? window.getColor("orange") : window.getColor("periwinkle")}" stroke-width="4"/>
-            </svg>
-            <profile-menu class="closed"></profile-menu>
-        `
-    }
 }
 
-customElements.define("profile-button", ProfileButton)
+registerShadow(ProfileButton)

ui/site/components/ProfileMenu.js

@@ -30,29 +30,23 @@ css(`
     }
 `)
 
-export default class ProfileMenu extends HTMLElement {
-
-    connectedCallback() {
-        this.render()
-
-        util.observeClassChange(this, (cl) => {
-            this.render()
-        })
-        
-    }
+class ProfileMenu extends Shadow {
 
     render() {
-        if(this.classList.contains("open")) {
-            setTimeout(() => {
-                this.innerHTML = /* html */`
-                    <a href="signout" style="position: absolute; left: 0px; color: white; z-index: 2">sign out</a>
-                    <p>Profile</p>
-                `
-            }, 200)
-        } else {
-            this.innerHTML === ""
-        }
+        ZStack(() => {
+            if(this.classList.contains("open")) {
+                setTimeout(() => {
+                    // this.innerHTML = /* html */`
+                    //     <a href="signout" style="position: absolute; left: 0px; color: white; z-index: 2">sign out</a>
+                    //     <p>Profile</p>
+                    // `
+                }, 200)
+            }
+        })
+
+        util.observeClassChange(this, (cl) => {
+        })
     }
 }
 
-customElements.define("profile-menu", ProfileMenu)
+registerShadow(ProfileMenu, "profile-menu")

ui/site/index.html

@@ -1,64 +1,13 @@
 <!DOCTYPE html>
 <html lang="en">
-    <head>
-        <title>Hyperia</title>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <link rel="icon" href="_/icons/logo.svg">
-        <link rel="stylesheet" href="_/code/shared.css">
-        <style>
-            body {
-                margin: 0px;
-                overflow: hidden;
-            }
-
-            #painting {
-                width: 100vw;
-                height: 100vh;
-                margin: 0px;
-                background-image:url('_/images/the_return.webp');
-                background-size: cover;
-                background-position: 48% 65%;
-                background-repeat: no-repeat;
-            }
-
-            #divider.minimized {
-                display: none;
-            }
-        </style>
-        <script src="_/code/quill.js"></script>
-        <script type="module">
-            import "./components/ProfileButton.js"
-            import "./components/InputBox.js"
-            import "./components/Sidebar.js"
-            import "./components/AppWindow.js"
-
-            import ConnectionHandler from "./ws/ConnectionHandler.js"
-            window.ConnectionHandler = new ConnectionHandler()
-        </script>
-        <script src="./components/AppMenu.js"></script>
-        <script>
-            const img = new Image();
-            img.src = "_/images/the_return.webp";
-
-            img.onload = () => {
-                document.getElementById('loading-wrapper').style.display = 'block';
-            };
-
-            // Optional: fallback if image fails
-            img.onerror = () => {
-                console.error("Background image failed to load.");
-                document.getElementById('loading-wrapper').style.display = 'block';
-            };
-        </script>
-    </head>
-    <body>
-        <div id="loading-wrapper" style="display: none;">
-            <div id="painting"></div>
-            <app-window></app-window>
-            <profile-button style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw"></profile-button>
-            <img src="_/icons/logo.svg" style="width: 3.5em; position: fixed; left: 3em; top: 2em;"/>
-            <script>AppMenu()</script>
-            <img id="divider" src="_/images/divider.svg" style="width: 40vw; position: fixed; bottom: 2em; left: 50vw; transform: translateX(-50%)"/>
-        </div>
-    </body>
+<head>
+    <title>Hyperia</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="icon" href="_/icons/logo.svg">
+    <link rel="stylesheet" href="_/code/shared.css">
+    <script src="_/code/quill.js"></script>
+    <script type="module" src="index.js"></script>
+</head>
+<body style="margin: 0px">
+</body>
 </html>

ui/site/index.js

@@ -0,0 +1,5 @@
+import ConnectionHandler from "./ws/ConnectionHandler.js"
+window.ConnectionHandler = new ConnectionHandler()
+
+import "./components/Home.js"
+Home()