From 81ca35bf2faa69476a5e2748eda362a4963a2e23 Mon Sep 17 00:00:00 2001 From: metacryst Date: Tue, 18 Nov 2025 06:22:02 -0600 Subject: [PATCH] Pubilc site basically complete, apps are reasonable but could be better looking --- ui/_/code/quill.js | 58 ++++++++++++++++++----------- ui/_/code/shared.css | 15 +++++--- ui/_/icons/logo.svg | 65 +++++++++++++++++++-------------- ui/_/icons/logo2.svg | 29 +++++++++++++++ ui/public/components/NavBar.js | 10 +++-- ui/public/pages/Home.js | 11 +++++- ui/public/pages/SIgnIn.js | 30 ++++++++++++++- ui/public/pages/Why.js | 4 +- ui/site/components/AppMenu.js | 2 +- ui/site/components/AppWindow.js | 3 +- ui/site/components/Home.js | 12 +++--- 11 files changed, 169 insertions(+), 70 deletions(-) create mode 100644 ui/_/icons/logo2.svg diff --git a/ui/_/code/quill.js b/ui/_/code/quill.js index 28d3487..66118c6 100644 --- a/ui/_/code/quill.js +++ b/ui/_/code/quill.js @@ -1,6 +1,7 @@ /* Sam Russell Captured Sun + 11.17.25.3 - Adding styles() and fixing dynamic function from earlier 11.17.25.2 - Fixing onNavigate() and onAppear() 11.17.25 - Added dynamic function to have units in style func parameters. 11.14.25 - Added onTouch, onTap. Changed style setters to work with Safari. Added center() funcs. @@ -257,17 +258,38 @@ function extendHTMLElementWithStyleSetters() { const div = document.createElement("div"); const style = div.style; if (!(prop in style)) return "invalid"; - - // Does prop accept a value with px? - style[prop] = "10px"; - if (style[prop] === "10px") return "unit-number"; - - // Does prop accept a unitless number (opacity, zIndex, etc)? - style[prop] = "5"; - const computed = getComputedStyle(div)[prop]; - if (!isNaN(parseFloat(computed))) return "unitless-number"; - - return "string"; + + switch(prop) { + + case "gap": + case "borderRadius": + case "width": + case "height": + case "maxWidth": + case "maxHeight": + + case "left": + case "top": + case "bottom": + case "right": + + case "paddingLeft": + case "paddingTop": + case "paddingBottom": + case "paddingRight": + + case "marginLeft": + case "marginTop": + case "marginBottom": + case "marginRight": + + return "unit-number" + + default: + + return "string" + } + } let allStyleProps = ["accentColor", "additiveSymbols", "alignContent", "alignItems", "alignSelf", "alignmentBaseline", "all", "anchorName", "anchorScope", "animation", "animationComposition", "animationDelay", "animationDirection", "animationDuration", "animationFillMode", "animationIterationCount", "animationName", "animationPlayState", "animationRange", "animationRangeEnd", "animationRangeStart", "animationTimeline", "animationTimingFunction", "appRegion", "appearance", "ascentOverride", "aspectRatio", "backdropFilter", "backfaceVisibility", "background", "backgroundAttachment", "backgroundBlendMode", "backgroundClip", "backgroundColor", "backgroundImage", "backgroundOrigin", "backgroundPosition", "backgroundPositionX", "backgroundPositionY", "backgroundRepeat", "backgroundSize", "basePalette", "baselineShift", "baselineSource", "blockSize", "border", "borderBlock", "borderBlockColor", "borderBlockEnd", "borderBlockEndColor", "borderBlockEndStyle", "borderBlockEndWidth", "borderBlockStart", "borderBlockStartColor", "borderBlockStartStyle", "borderBlockStartWidth", "borderBlockStyle", "borderBlockWidth", "borderBottom", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomStyle", "borderBottomWidth", "borderCollapse", "borderColor", "borderEndEndRadius", "borderEndStartRadius", "borderImage", "borderImageOutset", "borderImageRepeat", "borderImageSlice", "borderImageSource", "borderImageWidth", "borderInline", "borderInlineColor", "borderInlineEnd", "borderInlineEndColor", "borderInlineEndStyle", "borderInlineEndWidth", "borderInlineStart", "borderInlineStartColor", "borderInlineStartStyle", "borderInlineStartWidth", "borderInlineStyle", "borderInlineWidth", "borderLeft", "borderLeftColor", "borderLeftStyle", "borderLeftWidth", "borderRadius", "borderRight", "borderRightColor", "borderRightStyle", "borderRightWidth", "borderSpacing", "borderStartEndRadius", "borderStartStartRadius", "borderStyle", "borderTop", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopStyle", "borderTopWidth", "borderWidth", "bottom", "boxDecorationBreak", "boxShadow", "boxSizing", "breakAfter", "breakBefore", "breakInside", "bufferedRendering", "captionSide", "caretAnimation", "caretColor", "clear", "clip", "clipPath", "clipRule", "color", "colorInterpolation", "colorInterpolationFilters", "colorRendering", "colorScheme", "columnCount", "columnFill", "columnGap", "columnRule", "columnRuleColor", "columnRuleStyle", "columnRuleWidth", "columnSpan", "columnWidth", "columns", "contain", "containIntrinsicBlockSize", "containIntrinsicHeight", "containIntrinsicInlineSize", "containIntrinsicSize", "containIntrinsicWidth", "container", "containerName", "containerType", "content", "contentVisibility", "cornerBlockEndShape", "cornerBlockStartShape", "cornerBottomLeftShape", "cornerBottomRightShape", "cornerBottomShape", "cornerEndEndShape", "cornerEndStartShape", "cornerInlineEndShape", "cornerInlineStartShape", "cornerLeftShape", "cornerRightShape", "cornerShape", "cornerStartEndShape", "cornerStartStartShape", "cornerTopLeftShape", "cornerTopRightShape", "cornerTopShape", "counterIncrement", "counterReset", "counterSet", "cursor", "cx", "cy", "d", "descentOverride", "direction", "display", "dominantBaseline", "dynamicRangeLimit", "emptyCells", "fallback", "fieldSizing", "fill", "fillOpacity", "fillRule", "filter", "flex", "flexBasis", "flexDirection", "flexFlow", "flexGrow", "flexShrink", "flexWrap", "float", "floodColor", "floodOpacity", "font", "fontDisplay", "fontFamily", "fontFeatureSettings", "fontKerning", "fontOpticalSizing", "fontPalette", "fontSize", "fontSizeAdjust", "fontStretch", "fontStyle", "fontSynthesis", "fontSynthesisSmallCaps", "fontSynthesisStyle", "fontSynthesisWeight", "fontVariant", "fontVariantAlternates", "fontVariantCaps", "fontVariantEastAsian", "fontVariantEmoji", "fontVariantLigatures", "fontVariantNumeric", "fontVariantPosition", "fontVariationSettings", "fontWeight", "forcedColorAdjust", "gap", "grid", "gridArea", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumn", "gridColumnEnd", "gridColumnGap", "gridColumnStart", "gridGap", "gridRow", "gridRowEnd", "gridRowGap", "gridRowStart", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "height", "hyphenateCharacter", "hyphenateLimitChars", "hyphens", "imageOrientation", "imageRendering", "inherits", "initialLetter", "initialValue", "inlineSize", "inset", "insetBlock", "insetBlockEnd", "insetBlockStart", "insetInline", "insetInlineEnd", "insetInlineStart", "interactivity", "interpolateSize", "isolation", "justifyContent", "justifyItems", "justifySelf", "left", "letterSpacing", "lightingColor", "lineBreak", "lineGapOverride", "lineHeight", "listStyle", "listStyleImage", "listStylePosition", "listStyleType", "margin", "marginBlock", "marginBlockEnd", "marginBlockStart", "marginBottom", "marginInline", "marginInlineEnd", "marginInlineStart", "marginLeft", "marginRight", "marginTop", "marker", "markerEnd", "markerMid", "markerStart", "mask", "maskClip", "maskComposite", "maskImage", "maskMode", "maskOrigin", "maskPosition", "maskRepeat", "maskSize", "maskType", "mathDepth", "mathShift", "mathStyle", "maxBlockSize", "maxHeight", "maxInlineSize", "maxWidth", "minBlockSize", "minHeight", "minInlineSize", "minWidth", "mixBlendMode", "navigation", "negative", "objectFit", "objectPosition", "objectViewBox", "offset", "offsetAnchor", "offsetDistance", "offsetPath", "offsetPosition", "offsetRotate", "opacity", "order", "orphans", "outline", "outlineColor", "outlineOffset", "outlineStyle", "outlineWidth", "overflow", "overflowAnchor", "overflowBlock", "overflowClipMargin", "overflowInline", "overflowWrap", "overflowX", "overflowY", "overlay", "overrideColors", "overscrollBehavior", "overscrollBehaviorBlock", "overscrollBehaviorInline", "overscrollBehaviorX", "overscrollBehaviorY", "pad", "padding", "paddingBlock", "paddingBlockEnd", "paddingBlockStart", "paddingBottom", "paddingInline", "paddingInlineEnd", "paddingInlineStart", "paddingLeft", "paddingRight", "paddingTop", "page", "pageBreakAfter", "pageBreakBefore", "pageBreakInside", "pageOrientation", "paintOrder", "perspective", "perspectiveOrigin", "placeContent", "placeItems", "placeSelf", "pointerEvents", "position", "positionAnchor", "positionArea", "positionTry", "positionTryFallbacks", "positionTryOrder", "positionVisibility", "prefix", "printColorAdjust", "quotes", "r", "range", "readingFlow", "readingOrder", "resize", "result", "right", "rotate", "rowGap", "rubyAlign", "rubyPosition", "rx", "ry", "scale", "scrollBehavior", "scrollInitialTarget", "scrollMargin", "scrollMarginBlock", "scrollMarginBlockEnd", "scrollMarginBlockStart", "scrollMarginBottom", "scrollMarginInline", "scrollMarginInlineEnd", "scrollMarginInlineStart", "scrollMarginLeft", "scrollMarginRight", "scrollMarginTop", "scrollMarkerGroup", "scrollPadding", "scrollPaddingBlock", "scrollPaddingBlockEnd", "scrollPaddingBlockStart", "scrollPaddingBottom", "scrollPaddingInline", "scrollPaddingInlineEnd", "scrollPaddingInlineStart", "scrollPaddingLeft", "scrollPaddingRight", "scrollPaddingTop", "scrollSnapAlign", "scrollSnapStop", "scrollSnapType", "scrollTargetGroup", "scrollTimeline", "scrollTimelineAxis", "scrollTimelineName", "scrollbarColor", "scrollbarGutter", "scrollbarWidth", "shapeImageThreshold", "shapeMargin", "shapeOutside", "shapeRendering", "size", "sizeAdjust", "speak", "speakAs", "src", "stopColor", "stopOpacity", "stroke", "strokeDasharray", "strokeDashoffset", "strokeLinecap", "strokeLinejoin", "strokeMiterlimit", "strokeOpacity", "strokeWidth", "suffix", "symbols", "syntax", "system", "tabSize", "tableLayout", "textAlign", "textAlignLast", "textAnchor", "textAutospace", "textBox", "textBoxEdge", "textBoxTrim", "textCombineUpright", "textDecoration", "textDecorationColor", "textDecorationLine", "textDecorationSkipInk", "textDecorationStyle", "textDecorationThickness", "textEmphasis", "textEmphasisColor", "textEmphasisPosition", "textEmphasisStyle", "textIndent", "textOrientation", "textOverflow", "textRendering", "textShadow", "textSizeAdjust", "textSpacingTrim", "textTransform", "textUnderlineOffset", "textUnderlinePosition", "textWrap", "textWrapMode", "textWrapStyle", "timelineScope", "top", "touchAction", "transform", "transformBox", "transformOrigin", "transformStyle", "transition", "transitionBehavior", "transitionDelay", "transitionDuration", "transitionProperty", "transitionTimingFunction", "translate", "types", "unicodeBidi", "unicodeRange", "userSelect", "vectorEffect", "verticalAlign", "viewTimeline", "viewTimelineAxis", "viewTimelineInset", "viewTimelineName", "viewTransitionClass", "viewTransitionGroup", "viewTransitionName", "visibility", "webkitAlignContent", "webkitAlignItems", "webkitAlignSelf", "webkitAnimation", "webkitAnimationDelay", "webkitAnimationDirection", "webkitAnimationDuration", "webkitAnimationFillMode", "webkitAnimationIterationCount", "webkitAnimationName", "webkitAnimationPlayState", "webkitAnimationTimingFunction", "webkitAppRegion", "webkitAppearance", "webkitBackfaceVisibility", "webkitBackgroundClip", "webkitBackgroundOrigin", "webkitBackgroundSize", "webkitBorderAfter", "webkitBorderAfterColor", "webkitBorderAfterStyle", "webkitBorderAfterWidth", "webkitBorderBefore", "webkitBorderBeforeColor", "webkitBorderBeforeStyle", "webkitBorderBeforeWidth", "webkitBorderBottomLeftRadius", "webkitBorderBottomRightRadius", "webkitBorderEnd", "webkitBorderEndColor", "webkitBorderEndStyle", "webkitBorderEndWidth", "webkitBorderHorizontalSpacing", "webkitBorderImage", "webkitBorderRadius", "webkitBorderStart", "webkitBorderStartColor", "webkitBorderStartStyle", "webkitBorderStartWidth", "webkitBorderTopLeftRadius", "webkitBorderTopRightRadius", "webkitBorderVerticalSpacing", "webkitBoxAlign", "webkitBoxDecorationBreak", "webkitBoxDirection", "webkitBoxFlex", "webkitBoxOrdinalGroup", "webkitBoxOrient", "webkitBoxPack", "webkitBoxReflect", "webkitBoxShadow", "webkitBoxSizing", "webkitClipPath", "webkitColumnBreakAfter", "webkitColumnBreakBefore", "webkitColumnBreakInside", "webkitColumnCount", "webkitColumnGap", "webkitColumnRule", "webkitColumnRuleColor", "webkitColumnRuleStyle", "webkitColumnRuleWidth", "webkitColumnSpan", "webkitColumnWidth", "webkitColumns", "webkitFilter", "webkitFlex", "webkitFlexBasis", "webkitFlexDirection", "webkitFlexFlow", "webkitFlexGrow", "webkitFlexShrink", "webkitFlexWrap", "webkitFontFeatureSettings", "webkitFontSmoothing", "webkitHyphenateCharacter", "webkitJustifyContent", "webkitLineBreak", "webkitLineClamp", "webkitLocale", "webkitLogicalHeight", "webkitLogicalWidth", "webkitMarginAfter", "webkitMarginBefore", "webkitMarginEnd", "webkitMarginStart", "webkitMask", "webkitMaskBoxImage", "webkitMaskBoxImageOutset", "webkitMaskBoxImageRepeat", "webkitMaskBoxImageSlice", "webkitMaskBoxImageSource", "webkitMaskBoxImageWidth", "webkitMaskClip", "webkitMaskComposite", "webkitMaskImage", "webkitMaskOrigin", "webkitMaskPosition", "webkitMaskPositionX", "webkitMaskPositionY", "webkitMaskRepeat", "webkitMaskSize", "webkitMaxLogicalHeight", "webkitMaxLogicalWidth", "webkitMinLogicalHeight", "webkitMinLogicalWidth", "webkitOpacity", "webkitOrder", "webkitPaddingAfter", "webkitPaddingBefore", "webkitPaddingEnd", "webkitPaddingStart", "webkitPerspective", "webkitPerspectiveOrigin", "webkitPerspectiveOriginX", "webkitPerspectiveOriginY", "webkitPrintColorAdjust", "webkitRtlOrdering", "webkitRubyPosition", "webkitShapeImageThreshold", "webkitShapeMargin", "webkitShapeOutside", "webkitTapHighlightColor", "webkitTextCombine", "webkitTextDecorationsInEffect", "webkitTextEmphasis", "webkitTextEmphasisColor", "webkitTextEmphasisPosition", "webkitTextEmphasisStyle", "webkitTextFillColor", "webkitTextOrientation", "webkitTextSecurity", "webkitTextSizeAdjust", "webkitTextStroke", "webkitTextStrokeColor", "webkitTextStrokeWidth", "webkitTransform", "webkitTransformOrigin", "webkitTransformOriginX", "webkitTransformOriginY", "webkitTransformOriginZ", "webkitTransformStyle", "webkitTransition", "webkitTransitionDelay", "webkitTransitionDuration", "webkitTransitionProperty", "webkitTransitionTimingFunction", "webkitUserDrag", "webkitUserModify", "webkitUserSelect", "webkitWritingMode", "whiteSpace", "whiteSpaceCollapse", "widows", "width", "willChange", "wordBreak", "wordSpacing", "wordWrap", "writingMode", "x", "y", "zIndex", "zoom"] @@ -288,16 +310,6 @@ function extendHTMLElementWithStyleSetters() { }; break; - case "unitless-number": - HTMLElement.prototype[prop] = function(value) { - if (typeof value !== "number" || isNaN(value)) { - throw new Error(`Invalid value for ${prop}: ${value}. Expected a number.`); - } - this.style[prop] = String(value); - return this; - }; - break; - case "string": HTMLElement.prototype[prop] = function(value) { this.style[prop] = value; @@ -310,6 +322,10 @@ function extendHTMLElementWithStyleSetters() { extendHTMLElementWithStyleSetters(); +HTMLElement.prototype.styles = function(cb) { + cb.call(this, this) +} + HTMLElement.prototype.padding = function(one, two, three = "px") { const setPadding = (side, val) => { diff --git a/ui/_/code/shared.css b/ui/_/code/shared.css index 8b5591e..d807318 100644 --- a/ui/_/code/shared.css +++ b/ui/_/code/shared.css @@ -5,21 +5,22 @@ --tan: #FFDFB4; --gold: #F2B36F; --purple: #251D44; - --green: #0B5538; + --green: #0857265c; --red: #BC1C02; --brown: #c6a476; --darkbrown: #60320c; --orange: #FE9201; --periwinkle: #655BAF; - --accent2: var(--brown); + --accent2: var(--green); } @media (prefers-color-scheme: dark) { :root { --main: #251D44; --accent: var(--gold); - --accent2: var(--periwinkle); + --dividerColor: var(--gold); + --accent2: var(--gold); } } @@ -80,10 +81,12 @@ a:active { } button { - background-color: var(--green); - color: var(--tan); - padding: 1em; + background-color: transparent; + color: var(--accent); + padding: 0.5em; box-shadow: none; + border: 1px solid var(--accent); + border-radius: 0.3em; } input { diff --git a/ui/_/icons/logo.svg b/ui/_/icons/logo.svg index 317a745..67b933e 100644 --- a/ui/_/icons/logo.svg +++ b/ui/_/icons/logo.svg @@ -1,29 +1,38 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/_/icons/logo2.svg b/ui/_/icons/logo2.svg new file mode 100644 index 0000000..317a745 --- /dev/null +++ b/ui/_/icons/logo2.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/public/components/NavBar.js b/ui/public/components/NavBar.js index f148c08..d955e16 100644 --- a/ui/public/components/NavBar.js +++ b/ui/public/components/NavBar.js @@ -24,7 +24,11 @@ class NavBar extends Shadow { }) .onClick(function (done) { if(done) { - window.navigateTo(normalizeText(this.innerText)) + if(!isSelected(this)) { + window.navigateTo(normalizeText(this.innerText)) + } else { + window.navigateTo("/") + } } }) @@ -34,6 +38,7 @@ class NavBar extends Shadow { HStack(() => { this.NavButton("WHY?") this.NavButton("EVENTS") + div().width(2.5, em).height(2.5, em) this.NavButton("JOIN") this.NavButton("SIGN IN") }) @@ -43,8 +48,7 @@ class NavBar extends Shadow { .justifyContent("center") .gap(3, em) .paddingRight(2, em) - .onNavigate(() => { - }) + .width(50, vw) } } diff --git a/ui/public/pages/Home.js b/ui/public/pages/Home.js index 5fc5916..2c0e884 100644 --- a/ui/public/pages/Home.js +++ b/ui/public/pages/Home.js @@ -10,6 +10,16 @@ class Home extends Shadow { ZStack(() => { NavBar() + + img("_/icons/logo.svg", "2.5em") + .onClick((done) => { + if(!done) return + window.navigateTo("/") + }) + .position("absolute") + .left(50, vw).top(4, em) + .center() + .transform("translate(-2em, -50%)") switch(window.location.pathname) { case "/": @@ -24,7 +34,6 @@ class Home extends Shadow { .color("var(--gold)") .fontSize(5, vw) - p("A CLASSICAL CHRISTIAN ASSOCIATION") .x(50, vw).y(94, vh) .center() diff --git a/ui/public/pages/SIgnIn.js b/ui/public/pages/SIgnIn.js index 91f672e..b7eaf13 100644 --- a/ui/public/pages/SIgnIn.js +++ b/ui/public/pages/SIgnIn.js @@ -1,6 +1,32 @@ -class SignIn extends Shadow { - render() { +css(` + signin- input::placeholder { + color: var(--accent) + } +`) +class SignIn extends Shadow { + + inputStyles(el) { + console.log(el) + return el + .border("1px solid var(--accent)") + } + + render() { + ZStack(() => { + form(() => { + input("Email") + .attr({name: "email", type: "email"}) + .styles(this.inputStyles) + input("Password") + .attr({name: "password", type: "password"}) + .styles(this.inputStyles) + button("Submit") + }) + .attr({action: "/login", method: "POST"}) + .x(50, vw).y(50, vh) + .center() + }) } } diff --git a/ui/public/pages/Why.js b/ui/public/pages/Why.js index c56016c..9540886 100644 --- a/ui/public/pages/Why.js +++ b/ui/public/pages/Why.js @@ -1,6 +1,8 @@ class Why extends Shadow { render() { - + p("The West is Falling. Why Not?") + .x(50, vw).y(50, vh) + .center() } } diff --git a/ui/site/components/AppMenu.js b/ui/site/components/AppMenu.js index 42c73c3..4fafbe6 100644 --- a/ui/site/components/AppMenu.js +++ b/ui/site/components/AppMenu.js @@ -16,7 +16,7 @@ css(` padding-bottom: 4em; bottom: 1em; border-radius: 12px; - background-color: var(--main); + background-color: var(--green); } app-menu p { diff --git a/ui/site/components/AppWindow.js b/ui/site/components/AppWindow.js index bbf173f..ca8f6a7 100644 --- a/ui/site/components/AppWindow.js +++ b/ui/site/components/AppWindow.js @@ -35,7 +35,8 @@ class AppWindow extends Shadow { .display(this.app ? '' : 'none') .width(100, "vw") .height(100, "vh") - .backgroundColor("var(--main)") + .backgroundImage("/_/images/fabric.png") + .backgroundSize("33vw auto") .position("fixed") .top(0) .left(0) diff --git a/ui/site/components/Home.js b/ui/site/components/Home.js index 3911c5b..d81f34d 100644 --- a/ui/site/components/Home.js +++ b/ui/site/components/Home.js @@ -10,8 +10,8 @@ class Home extends Shadow { ZStack(() => { img("/_/icons/logo.svg", "2.5em") .position("fixed") - .left("3em") - .top("3vh") + .left(3, em) + .top(3, vh) .zIndex(3) .onClick(() => { window.navigateTo("/") @@ -59,13 +59,13 @@ class Home extends Shadow { .zIndex(1) .cursor("default") .position("fixed") - .top("5.5vh") - .right("4.5vw") + .top(5.5, vh) + .right(4.5, vw) a("/signout", "Sign Out") .position("fixed") - .top("5vh") - .right("2em") + .top(5, vh) + .right(2, em) .background("transparent") .border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--accent2)") .color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)")