diff --git a/.gitignore b/.gitignore index bebaa43..46c29ee 100644 --- a/.gitignore +++ b/.gitignore @@ -23,4 +23,3 @@ yarn-error.log /.sisyphus /.opencode .switch-omo-config* -/videos diff --git a/design.pen b/design.pen new file mode 100644 index 0000000..1a721b9 --- /dev/null +++ b/design.pen @@ -0,0 +1,2075 @@ +{ + "version": "2.6", + "children": [ + { + "type": "frame", + "id": "bi8Au", + "x": 0, + "y": 0, + "name": "Desktop Layout", + "clip": true, + "width": 1440, + "fill": "$bg-page", + "children": [ + { + "type": "frame", + "id": "dg1Zy", + "name": "Main Content", + "width": "fill_container", + "fill": "$bg-page", + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "qdt1H", + "name": "Header", + "width": "fill_container", + "height": 64, + "fill": "$bg-surface", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-default" + }, + "padding": [ + 0, + 40 + ], + "justifyContent": "space_between", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "PMcSC", + "name": "headerLeft", + "gap": 32, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "eRs44", + "name": "brandLogo", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "O3KWW", + "name": "brandIcon", + "width": 32, + "height": 32, + "fill": "$orange-primary", + "cornerRadius": 8, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "O5tsg", + "name": "brandIconImg", + "fill": "$text-primary", + "content": "₿", + "fontFamily": "Inconsolata", + "fontSize": 20, + "fontWeight": "600" + } + ] + }, + { + "type": "text", + "id": "Tpr9e", + "name": "brandName", + "fill": "$text-primary", + "content": "EINUNDZWANZIG", + "fontFamily": "Inconsolata", + "fontSize": 14, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "0lwaM", + "name": "navBar", + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "SOKYg", + "name": "navNews", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "aQ59w", + "name": "navNewsIcon", + "width": 16, + "height": 16, + "iconFontName": "rss", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "Hp2l5", + "name": "navNewsLabel", + "fill": "$text-tertiary", + "content": "News", + "fontFamily": "Inconsolata", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "PJYqa", + "name": "navProfile", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 2 + }, + "fill": "$orange-primary" + }, + "gap": 8, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "zD1TC", + "name": "navProfileIcon", + "width": 16, + "height": 16, + "iconFontName": "id-card", + "iconFontFamily": "lucide", + "fill": "$orange-primary" + }, + { + "type": "text", + "id": "ptYQT", + "name": "navProfileLabel", + "fill": "$text-primary", + "content": "Mitgliederstatus", + "fontFamily": "Inconsolata", + "fontSize": 14, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "IqSDS", + "name": "navBenefits", + "gap": 8, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "P0Ib3", + "name": "navBenefitsIcon", + "width": 16, + "height": 16, + "iconFontName": "gift", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "NylFs", + "name": "navBenefitsLabel", + "fill": "$text-tertiary", + "content": "Vorteile", + "fontFamily": "Inconsolata", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "H9h0U", + "name": "navProjects", + "gap": 8, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "xC7V5", + "name": "navProjectsIcon", + "width": 16, + "height": 16, + "iconFontName": "heart", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "LlUEG", + "name": "navProjectsLabel", + "fill": "$text-tertiary", + "content": "Projekt-Unterstützungen", + "fontFamily": "Inconsolata", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "HQd2W", + "name": "adminNav", + "gap": 4, + "padding": [ + 12, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "YDFs6", + "name": "adminNavIcon", + "width": 16, + "height": 16, + "iconFontName": "shield", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "V8MUp", + "name": "adminNavLabel", + "fill": "$text-tertiary", + "content": "Admin", + "fontFamily": "Inconsolata", + "fontSize": 14, + "fontWeight": "normal" + }, + { + "type": "icon_font", + "id": "Fwleu", + "name": "adminNavChevron", + "width": 14, + "height": 14, + "iconFontName": "chevron-down", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "f9JYT", + "name": "headerRight", + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "frame", + "id": "XAu9V", + "name": "infoBtn", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "gap": 8, + "padding": [ + 10, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "Xm3bS", + "name": "infoIcon", + "width": 16, + "height": 16, + "iconFontName": "info", + "iconFontFamily": "lucide", + "fill": "$text-tertiary" + }, + { + "type": "text", + "id": "o3VFC", + "name": "infoLabel", + "fill": "$text-secondary", + "content": "Info", + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "QA00x", + "name": "loginBtn", + "fill": "$orange-primary", + "cornerRadius": 8, + "gap": 8, + "padding": [ + 10, + 16 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "cEzU8", + "name": "loginIcon", + "width": 16, + "height": 16, + "iconFontName": "log-out", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "SKS0I", + "name": "loginLabel", + "fill": "$text-primary", + "content": "Logout", + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "Impqf", + "name": "Content Area", + "width": "fill_container", + "layout": "vertical", + "gap": 24, + "padding": [ + 32, + 40 + ], + "children": [ + { + "type": "text", + "id": "gnBOP", + "name": "pageTitle", + "fill": "$text-primary", + "content": "Einundzwanzig ist, was du draus machst", + "fontFamily": "Inconsolata", + "fontSize": 28, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "Ne7VM", + "name": "twoColLayout", + "width": "fill_container", + "gap": 32, + "children": [ + { + "type": "frame", + "id": "ybJKi", + "name": "leftColumn", + "width": 480, + "layout": "vertical", + "gap": 24, + "children": [ + { + "type": "text", + "id": "D1duN", + "name": "leftSectionTitle", + "fill": "$text-primary", + "content": "Vorteile deiner Mitgliedschaft", + "fontFamily": "Inconsolata", + "fontSize": 18, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "pOoqs", + "name": "nostrCard", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#4a7c59" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "gpew4", + "name": "nostrHeader", + "width": "fill_container", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 90, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#4a7c5933", + "position": 0 + }, + { + "color": "#4a7c5900", + "position": 1 + } + ] + }, + "gap": 12, + "padding": 16, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "a8XSg", + "name": "nostrIcon", + "width": 20, + "height": 20, + "iconFontName": "sparkles", + "iconFontFamily": "lucide", + "fill": "#4a7c59" + }, + { + "type": "text", + "id": "K9IJi", + "name": "nostrTitle", + "fill": "#7cb686", + "content": "Nostr Relay", + "fontFamily": "Inconsolata", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "0Zb3o", + "name": "nostrContent", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": [ + 0, + 16, + 16, + 16 + ], + "children": [ + { + "type": "text", + "id": "7NdpO", + "name": "nostrDesc", + "fill": "$text-secondary", + "content": "Exklusive Schreib-Rechte auf Premium Nostr-Relay von Einundzwanzig.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "t0tKt", + "name": "nostrSubDesc", + "fill": "$text-disabled", + "content": "Ein Outbox-Relay ist wie ein Postbote für deine Nostr-Nachrichten. Es speichert und verteilt deine Posts. Um unser Relay nutzen zu können, musst du es in deinem Nostr-Client hinzufügen.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "Tj8iW", + "name": "nostrUrlBox", + "fill": "$bg-elevated", + "cornerRadius": 6, + "padding": [ + 8, + 12 + ], + "children": [ + { + "type": "text", + "id": "GfUQx", + "name": "nostrUrl", + "fill": "$text-secondary", + "content": "wss://nostr.einundzwanzig.space", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "4KvkT", + "name": "nostrHint", + "fill": "$text-disabled", + "content": "Wichtige Hinweise: Du kannst deine Posts auf mehreren Relays gleichzeitig veröffentlichen. So stellst du sicher, dass deine Inhalte auch über unser Relay erreichbar sind.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "wC7KV", + "name": "nip05Card", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#4a7c59" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "AzItb", + "name": "nip05Header", + "width": "fill_container", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 90, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#4a7c5933", + "position": 0 + }, + { + "color": "#4a7c5900", + "position": 1 + } + ] + }, + "gap": 12, + "padding": 16, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "FITH4", + "name": "nip05Dot", + "fill": "#4a7c59", + "width": 10, + "height": 10 + }, + { + "type": "text", + "id": "pWD2b", + "name": "nip05Title", + "fill": "#7cb686", + "content": "Get NIP-05 verified", + "fontFamily": "Inconsolata", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "tEWUM", + "name": "nip05Content", + "width": "fill_container", + "layout": "vertical", + "gap": 16, + "padding": [ + 0, + 16, + 16, + 16 + ], + "children": [ + { + "type": "text", + "id": "kVnBC", + "name": "nip05Desc", + "fill": "$text-secondary", + "content": "Verifiziere deine Identität mit einem menschenlesbaren Nostr-Namen.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "etJCg", + "name": "nip05Label", + "fill": "$text-disabled", + "content": "Dein NIP-05 Handle", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "500" + }, + { + "type": "frame", + "id": "Di3vF", + "name": "nip05InputRow", + "width": "fill_container", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "children": [ + { + "type": "frame", + "id": "yf7XV", + "name": "nip05Input", + "width": "fill_container", + "fill": "$bg-elevated", + "padding": [ + 12, + 14 + ], + "children": [ + { + "type": "text", + "id": "s0H25", + "name": "nip05InputText", + "fill": "$text-secondary", + "content": "el-presidente-benito", + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "NtQsv", + "name": "nip05Domain", + "fill": "#4a7c59", + "cornerRadius": [ + 0, + 8, + 8, + 0 + ], + "padding": [ + 12, + 14 + ], + "children": [ + { + "type": "text", + "id": "1BZX3", + "name": "nip05DomainText", + "fill": "$text-primary", + "content": "@einundzwanzig.space", + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "O8EQs", + "name": "nip05SaveBtn", + "cornerRadius": 6, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-default" + }, + "padding": [ + 8, + 16 + ], + "children": [ + { + "type": "text", + "id": "4HLlR", + "name": "nip05SaveText", + "fill": "$text-secondary", + "content": "Speichern", + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "text", + "id": "nLUyt", + "name": "nip05Rules", + "fill": "$text-disabled", + "content": "Regeln für dein Handle: Nur Kleinbuchstaben (a-z), Zahlen (0-9) und die Zeichen \"-\" und \"_\" sind erlaubt. Dein Handle wird automatisch kleingeschrieben.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "mLWPb", + "name": "nip05Info", + "fill": "$text-disabled", + "content": "NIP-05 verifiziert deine Identität auf Nostr. Das Handle ist wie eine E-Mail-Adresse (z.B. name@einundzwanzig.space). Clients zeigen ein Häkchen für verifizierte Benutzer.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "0vjqw", + "name": "handlesBox", + "width": "fill_container", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 90, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#4a7c5933", + "position": 0 + }, + { + "color": "#4a7c5900", + "position": 1 + } + ] + }, + "cornerRadius": 8, + "layout": "vertical", + "gap": 12, + "padding": 16, + "children": [ + { + "type": "frame", + "id": "YSVWb", + "name": "handlesHeader", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "grIlY", + "name": "handlesDot", + "fill": "#4a7c59", + "width": 8, + "height": 8 + }, + { + "type": "text", + "id": "Seri5", + "name": "handlesTitle", + "fill": "#7cb686", + "content": "Du hast 2 aktive Handles für deinen Pubkey!", + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "500" + } + ] + }, + { + "type": "frame", + "id": "AyVpc", + "name": "handlesContent", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "4RwI4", + "name": "handlesLabel", + "fill": "$text-disabled", + "content": "Deine aktivierten Handles:", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "s2qZZ", + "name": "handle1", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "iDa03", + "name": "handle1Text", + "fill": "$text-secondary", + "content": "holgerhatgarkeinennode@einundzwanzig.space", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "ljmoG", + "name": "handle1Badge", + "fill": "#4a7c59", + "cornerRadius": 4, + "padding": [ + 2, + 6 + ], + "children": [ + { + "type": "text", + "id": "JEH68", + "name": "handle1BadgeText", + "fill": "$text-primary", + "content": "OK", + "fontFamily": "Inconsolata", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + }, + { + "type": "frame", + "id": "VOkcc", + "name": "handle2", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "ZZA9W", + "name": "handle2Text", + "fill": "$text-secondary", + "content": "el-presidente-benito@einundzwanzig.space", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "2TPfA", + "name": "handle2Badge", + "fill": "#4a7c59", + "cornerRadius": 4, + "padding": [ + 2, + 6 + ], + "children": [ + { + "type": "text", + "id": "kQ38x", + "name": "handle2BadgeText", + "fill": "$text-primary", + "content": "OK", + "fontFamily": "Inconsolata", + "fontSize": 10, + "fontWeight": "600" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "AT2NG", + "name": "lightningCard", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#7c3aed" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "exYhP", + "name": "lightningHeader", + "width": "fill_container", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 90, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#7c3aed33", + "position": 0 + }, + { + "color": "#7c3aed00", + "position": 1 + } + ] + }, + "gap": 12, + "padding": 16, + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "ef9cP", + "name": "lightningIcon", + "width": 20, + "height": 20, + "iconFontName": "zap", + "iconFontFamily": "lucide", + "fill": "#7c3aed" + }, + { + "type": "text", + "id": "hzj3o", + "name": "lightningTitle", + "fill": "#a78bfa", + "content": "Lightning Watchtower", + "fontFamily": "Inconsolata", + "fontSize": 16, + "fontWeight": "600" + } + ] + }, + { + "type": "frame", + "id": "jBE27", + "name": "lightningContent", + "width": "fill_container", + "layout": "vertical", + "gap": 12, + "padding": [ + 0, + 16, + 16, + 16 + ], + "children": [ + { + "type": "text", + "id": "72pgm", + "name": "lightningDesc", + "fill": "$text-secondary", + "content": "Nutze unseren Watchtower zum Schutz deiner Lightning Channels.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "V3kUv", + "name": "lightningSubDesc", + "fill": "$text-disabled", + "content": "Ein Watchtower überwacht deine Lightning Channels und schützt sie, falls deine Node offline ist. Wenn du die Zahlung von Channel-Closing-Transaktionen verpasst, kümmert sich der Watchtower darum und verhindert den Verlust deiner Sats.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "fLGYi", + "name": "lightningUrlLabel", + "fill": "$text-disabled", + "content": "Um unseren Watchtower zu nutzen, füge folgende URI in deine Lightning Node Konfiguration hinzu:", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "n4OzU", + "name": "lightningUrlBox", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 6, + "padding": [ + 10, + 12 + ], + "children": [ + { + "type": "text", + "id": "YSVCp", + "name": "lightningUrl", + "fill": "$text-secondary", + "content": "03a0bf5b8a02c208cc5eda2f1f009564a97c15f743458a1568e2808a8ab3d7d0f0@42.171.139.240:9911", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "6nX8G", + "name": "lightningInstructions", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 8, + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "text", + "id": "DIuFO", + "name": "lightningInstrTitle", + "fill": "$text-disabled", + "content": "Einrichtung für gängige Lightning-Clients:", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Yx5yK", + "name": "lightningInstr1", + "fill": "$text-tertiary", + "content": "• LND: https://docs.lightning.engineering/lightning-network-tools/lnd/watchtower", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ixrMw", + "name": "lightningInstr2", + "fill": "$text-tertiary", + "content": "• Core Lightning: Nutze das watchtower-client Plugin mit -W URI", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "1ycV7", + "name": "lightningInstr3", + "fill": "$text-tertiary", + "content": "• Eclair: Füge die URI zu den Watchtower-Einstellungen in eclair.conf hinzu", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "iLs3k", + "name": "lightningWarning", + "fill": "#f59e0b", + "content": "Wichtig: Der Watchtower überwacht deine Channel-Panik. Er hat keinen Zugriff auf deine privaten Schlüssel oder dein Guthaben.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "uR7yx", + "name": "rightColumn", + "width": "fill_container", + "layout": "vertical", + "gap": 24, + "children": [ + { + "type": "frame", + "id": "C2WiB", + "name": "profileCard", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "gap": 16, + "padding": 20, + "children": [ + { + "type": "frame", + "id": "XifVY", + "name": "avatar", + "width": 56, + "height": 56, + "fill": "$bg-elevated", + "cornerRadius": 28, + "children": [ + { + "type": "frame", + "id": "QiJQQ", + "name": "avatarImg", + "width": 56, + "height": 56, + "fill": "#6b7280", + "cornerRadius": 28 + } + ] + }, + { + "type": "frame", + "id": "l71sY", + "name": "profileInfo", + "width": "fill_container", + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "ydfVj", + "name": "profileName", + "fill": "$text-primary", + "content": "El Presidente Ben", + "fontFamily": "Inconsolata", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "text", + "id": "JeXXW", + "name": "profileSubname", + "fill": "$text-disabled", + "content": "El Presidente Ben", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "7ICJE", + "name": "profileDetails", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "XgTr4", + "name": "profilePubkey", + "gap": 8, + "children": [ + { + "type": "text", + "id": "xI37j", + "name": "profilePubkeyLabel", + "fill": "$text-disabled", + "content": "Pubkey:", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "IxcIN", + "name": "profilePubkeyValue", + "fill": "$text-tertiary", + "content": "0adf6747Sccc5ca4b6fd3022e48ef3d520ebdaf628d0f05494acdbd7847f3e5033", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "ID31O", + "name": "profileNpub", + "gap": 8, + "children": [ + { + "type": "text", + "id": "RUjJh", + "name": "profileNpubLabel", + "fill": "$text-disabled", + "content": "Npub:", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "Dv6wA", + "name": "profileNpubValue", + "fill": "$text-tertiary", + "content": "npub1pt0ba3um3w2q4hasx3hqe94a2fhptars1jsz32vyphtcqla72gnqqPyc6", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "lMhLM", + "name": "profileNip", + "gap": 8, + "children": [ + { + "type": "text", + "id": "VLfTf", + "name": "profileNipLabel", + "fill": "$text-disabled", + "content": "NIP-05:", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "RhphK", + "name": "profileNipValue", + "fill": "$text-tertiary", + "content": "el-presidente-benito", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "JEx3m", + "name": "emailInfoBox", + "width": "fill_container", + "fill": { + "type": "gradient", + "gradientType": "linear", + "enabled": true, + "rotation": 90, + "size": { + "height": 1 + }, + "colors": [ + { + "color": "#f59e0b33", + "position": 0 + }, + { + "color": "#f59e0b00", + "position": 1 + } + ] + }, + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "#f59e0b" + }, + "layout": "vertical", + "gap": 8, + "padding": 16, + "children": [ + { + "type": "text", + "id": "jtlcn", + "name": "emailInfoTitle", + "fill": "#f59e0b", + "content": "Falls du möchtest, kannst du hier eine E-Mail Adresse hinterlegen, damit der Verein dich darüber informieren kann, wenn es Neuigkeiten gibt.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "mov61", + "name": "emailInfoDesc", + "fill": "$text-disabled", + "content": "Am besten eine anonymisierte E-Mail-Adresse verwenden. Wir sichern diese Adresse AES-256 verschlüsselt in der Datenbank ab.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "GfQzC", + "name": "emailCheckbox", + "width": "fill_container", + "gap": 12, + "children": [ + { + "type": "frame", + "id": "SAxXO", + "name": "checkboxBox", + "width": 18, + "height": 18, + "fill": "#4a7c59", + "cornerRadius": 4, + "justifyContent": "center", + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "xiVka", + "name": "checkboxIcon", + "width": 12, + "height": 12, + "iconFontName": "check", + "iconFontFamily": "lucide", + "fill": "$text-primary" + } + ] + }, + { + "type": "frame", + "id": "PwbfA", + "name": "checkboxContent", + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "text", + "id": "OWLga", + "name": "checkboxLabel", + "fill": "$text-primary", + "content": "Keine E-Mail Adresse angeben", + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "500" + }, + { + "type": "text", + "id": "0SosD", + "name": "checkboxDesc", + "fill": "$text-disabled", + "content": "Ich informiere mich selbst in der News Sektion und gebe keine E-Mail Adresse raus.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "Wz28i", + "name": "statusBadge", + "width": "fill_container", + "gap": 8, + "alignItems": "center", + "children": [ + { + "type": "ellipse", + "id": "qHuuk", + "name": "statusDot", + "fill": "#4a7c59", + "width": 10, + "height": 10 + }, + { + "type": "text", + "id": "iAEn9", + "name": "statusText", + "fill": "#4a7c59", + "content": "Du bist derzeit ein Mitglied des Vereins. Das aktuelle Jahr ist bezahlt.", + "fontFamily": "Inconsolata", + "fontSize": 14, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "zoEGT", + "name": "beitragSection", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 16, + "padding": 20, + "children": [ + { + "type": "text", + "id": "vytPV", + "name": "beitragTitle", + "fill": "$text-primary", + "content": "Mitgliedsbeitrag", + "fontFamily": "Inconsolata", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "wWX2m", + "name": "beitragEventBox", + "width": "fill_container", + "fill": "$bg-elevated", + "cornerRadius": 8, + "layout": "vertical", + "gap": 8, + "padding": 12, + "children": [ + { + "type": "text", + "id": "8cFlV", + "name": "beitragEventLabel", + "fill": "$text-disabled", + "content": "Nostr Event für die Zahlung des Mitgliedsbeitrags:", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + }, + { + "type": "text", + "id": "ukDjy", + "name": "beitragEventId", + "fill": "$text-tertiary", + "content": "ed16b0cbe7006cb0b2f53045c507f55c04350409c03004350db0ef362db32c2a4", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "text", + "id": "VMBrw", + "name": "beitragDesc", + "fill": "$text-secondary", + "content": "Dieses Event dient der Zahlung des Mitgliedsbeitrags für das Jahr 2026. Bitte bezahle den Betrag von 21.000 Satoshis.", + "lineHeight": 1.5, + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "normal" + }, + { + "type": "frame", + "id": "SuY1b", + "name": "beitragPaidBtn", + "fill": "#4a7c59", + "cornerRadius": 8, + "gap": 8, + "padding": [ + 10, + 20 + ], + "alignItems": "center", + "children": [ + { + "type": "icon_font", + "id": "VoJGE", + "name": "beitragPaidIcon", + "width": 16, + "height": 16, + "iconFontName": "circle-check", + "iconFontFamily": "lucide", + "fill": "$text-primary" + }, + { + "type": "text", + "id": "HQTjM", + "name": "beitragPaidText", + "fill": "$text-primary", + "content": "Aktuelles Jahr bezahlt", + "fontFamily": "Inconsolata", + "fontSize": 13, + "fontWeight": "500" + } + ] + } + ] + }, + { + "type": "frame", + "id": "XCoi9", + "name": "paymentSection", + "width": "fill_container", + "fill": "$bg-surface", + "cornerRadius": 12, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "gap": 16, + "padding": 20, + "children": [ + { + "type": "text", + "id": "J8hRq", + "name": "paymentTitle", + "fill": "$text-primary", + "content": "Bisherige Zahlungen", + "fontFamily": "Inconsolata", + "fontSize": 16, + "fontWeight": "600" + }, + { + "type": "frame", + "id": "9eZ6F", + "name": "paymentTable", + "width": "fill_container", + "cornerRadius": 8, + "stroke": { + "align": "inside", + "thickness": 1, + "fill": "$border-subtle" + }, + "layout": "vertical", + "children": [ + { + "type": "frame", + "id": "bVMqf", + "name": "tableHeader", + "width": "fill_container", + "fill": "$bg-elevated", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-subtle" + }, + "children": [ + { + "type": "frame", + "id": "RTUnd", + "name": "thSatoshis", + "width": 100, + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "oMZbg", + "name": "thSatoshisText", + "fill": "$text-disabled", + "content": "SATOSHIS", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "S8I9b", + "name": "thJahr", + "width": 80, + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "Zq2c1", + "name": "thJahrText", + "fill": "$text-disabled", + "content": "JAHR", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "eB6qv", + "name": "thEventId", + "width": "fill_container", + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "KGQDE", + "name": "thEventIdText", + "fill": "$text-disabled", + "content": "EVENT-ID", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 0.5 + } + ] + }, + { + "type": "frame", + "id": "gn6Uz", + "name": "thQuittung", + "width": 100, + "padding": [ + 12, + 16 + ], + "justifyContent": "end", + "children": [ + { + "type": "text", + "id": "JpLXh", + "name": "thQuittungText", + "fill": "$text-disabled", + "content": "QUITTUNG", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "600", + "letterSpacing": 0.5 + } + ] + } + ] + }, + { + "type": "frame", + "id": "yDvMs", + "name": "row1", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-subtle" + }, + "children": [ + { + "type": "frame", + "id": "tBxhc", + "name": "row1Sat", + "width": 100, + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "fehm7", + "name": "row1SatText", + "fill": "$text-secondary", + "content": "21000", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "yVgRH", + "name": "row1Jahr", + "width": 80, + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "skJ2X", + "name": "row1JahrText", + "fill": "$text-secondary", + "content": "2024", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "qRWXu", + "name": "row1Event", + "width": "fill_container", + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "2LHc0", + "name": "row1EventText", + "fill": "$text-tertiary", + "content": "cf14edf475e53e0822bf2357779e7bf75030732d39021c08547c050315002ac", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "xHwQd", + "name": "row1Quittung", + "width": 100, + "height": "fit_content(0)", + "padding": [ + 12, + 16 + ], + "justifyContent": "end" + } + ] + }, + { + "type": "frame", + "id": "vo32k", + "name": "row2", + "width": "fill_container", + "stroke": { + "align": "inside", + "thickness": { + "bottom": 1 + }, + "fill": "$border-subtle" + }, + "children": [ + { + "type": "frame", + "id": "AC49r", + "name": "row2Sat", + "width": 100, + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "Wjhbq", + "name": "row2SatText", + "fill": "$text-secondary", + "content": "21000", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "8hTyi", + "name": "row2Jahr", + "width": 80, + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "qqgH7", + "name": "row2JahrText", + "fill": "$text-secondary", + "content": "2025", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "Le1i4", + "name": "row2Event", + "width": "fill_container", + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "iW6QK", + "name": "row2EventText", + "fill": "$text-tertiary", + "content": "3e51a0d3508aac727fcf1ncc2033af5b8b5719524bca4eacadba15bccc20090", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "j80lo", + "name": "row2Quittung", + "width": 100, + "padding": [ + 12, + 16 + ], + "justifyContent": "end", + "children": [ + { + "type": "text", + "id": "kEZ7M", + "name": "row2QuittungLink", + "fill": "$text-tertiary", + "content": "Quittung", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + }, + { + "type": "frame", + "id": "hfrun", + "name": "row3", + "width": "fill_container", + "children": [ + { + "type": "frame", + "id": "3ZTOE", + "name": "row3Sat", + "width": 100, + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "X6EML", + "name": "row3SatText", + "fill": "$text-secondary", + "content": "21000", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "2n6CJ", + "name": "row3Jahr", + "width": 80, + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "oyxlZ", + "name": "row3JahrText", + "fill": "$text-secondary", + "content": "2026", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "eRRTo", + "name": "row3Event", + "width": "fill_container", + "padding": [ + 12, + 16 + ], + "children": [ + { + "type": "text", + "id": "6XpLh", + "name": "row3EventText", + "fill": "$text-tertiary", + "content": "ed16b0cbe7006cb0b2f53045c507f55c04350409c03004350db0ef362db32c2a4", + "fontFamily": "Inconsolata", + "fontSize": 11, + "fontWeight": "normal" + } + ] + }, + { + "type": "frame", + "id": "K4FZe", + "name": "row3Quittung", + "width": 100, + "padding": [ + 12, + 16 + ], + "justifyContent": "end", + "children": [ + { + "type": "text", + "id": "KbLQ6", + "name": "row3QuittungLink", + "fill": "$text-tertiary", + "content": "Quittung", + "fontFamily": "Inconsolata", + "fontSize": 12, + "fontWeight": "normal" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + } + ], + "variables": { + "bg-elevated": { + "type": "color", + "value": "#1A1A1D" + }, + "bg-page": { + "type": "color", + "value": "#0A0A0B" + }, + "bg-surface": { + "type": "color", + "value": "#111113" + }, + "border-default": { + "type": "color", + "value": "#2A2A2E" + }, + "border-subtle": { + "type": "color", + "value": "#1F1F23" + }, + "green-success": { + "type": "color", + "value": "#22C55E" + }, + "orange-light": { + "type": "color", + "value": "#FF8A4C" + }, + "orange-primary": { + "type": "color", + "value": "#FF5C00" + }, + "text-disabled": { + "type": "color", + "value": "#6B6B70" + }, + "text-muted": { + "type": "color", + "value": "#FFFFFFCC" + }, + "text-primary": { + "type": "color", + "value": "#FFFFFF" + }, + "text-secondary": { + "type": "color", + "value": "#ADADB0" + }, + "text-tertiary": { + "type": "color", + "value": "#8B8B90" + } + } +} \ No newline at end of file diff --git a/docker-compose.yml b/docker-compose.yml index 65422e0..a95bda2 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -65,16 +65,6 @@ services: - ping retries: 3 timeout: 5s - relay: - ports: - - "7000:7000" - volumes: - - ./relay:/usr/src/app/db - - ./relay/config.toml:/usr/src/app/config.toml - image: scsibug/nostr-rs-relay:latest - user: "${DOCKER_UID:-1000}:${DOCKER_GID:-1000}" - networks: - - sail networks: sail: driver: bridge diff --git a/resources/css/app.css b/resources/css/app.css index bd61750..3dd1c30 100644 --- a/resources/css/app.css +++ b/resources/css/app.css @@ -20,36 +20,79 @@ @custom-variant dark (&:where(.dark, .dark *)); /* ---------------------------------------- - Theme tokens + Theme tokens (Einundzwanzig Design System) ----------------------------------------- */ @theme { --font-sans: "Inconsolata", monospace; - --color-zinc-50: var(--color-neutral-50); - --color-zinc-100: var(--color-neutral-100); - --color-zinc-200: var(--color-neutral-200); - --color-zinc-300: var(--color-neutral-300); - --color-zinc-400: var(--color-neutral-400); - --color-zinc-500: var(--color-neutral-500); - --color-zinc-600: var(--color-neutral-600); - --color-zinc-700: var(--color-neutral-700); - --color-zinc-800: var(--color-neutral-800); - --color-zinc-900: var(--color-neutral-900); - --color-zinc-950: var(--color-neutral-950); + /* Background colors */ + --color-bg-page: #0A0A0B; + --color-bg-surface: #111113; + --color-bg-elevated: #1A1A1D; - --color-accent: var(--color-neutral-800); - --color-accent-content: var(--color-neutral-800); - --color-accent-foreground: var(--color-white); + /* Border colors */ + --color-border-default: #2A2A2E; + --color-border-subtle: #1F1F23; + + /* Text colors */ + --color-text-primary: #FFFFFF; + --color-text-secondary: #ADADB0; + --color-text-tertiary: #8B8B90; + --color-text-muted: #FFFFFFCC; + --color-text-disabled: #6B6B70; + + /* Brand colors */ + --color-orange-primary: #FF5C00; + --color-orange-light: #FF8A4C; + --color-green-success: #22C55E; + --color-purple-accent: #7c3aed; + --color-green-nostr: #4a7c59; + + /* Zinc aliases for compatibility */ + --color-zinc-50: #fafafa; + --color-zinc-100: #f4f4f5; + --color-zinc-200: #e4e4e7; + --color-zinc-300: #d4d4d8; + --color-zinc-400: #a1a1aa; + --color-zinc-500: #71717a; + --color-zinc-600: #52525b; + --color-zinc-700: #3f3f46; + --color-zinc-800: #27272a; + --color-zinc-900: #18181b; + --color-zinc-950: #09090b; + + /* Accent colors (orange brand) */ + --color-accent: var(--color-orange-primary); + --color-accent-content: var(--color-orange-primary); + --color-accent-foreground: var(--color-text-primary); } /* ---------------------------------------- - Dark mode overrides + Dark mode overrides (Dark is default for Einundzwanzig) ----------------------------------------- */ @layer theme { - .dark { - --color-accent: var(--color-white); - --color-accent-content: var(--color-white); - --color-accent-foreground: var(--color-neutral-800); + .dark, + :root { + --color-accent: var(--color-orange-primary); + --color-accent-content: var(--color-orange-primary); + --color-accent-foreground: var(--color-text-primary); + + /* Flux UI color overrides */ + --white: var(--color-text-primary); + --black: var(--color-bg-page); + + /* Zinc scale for dark mode */ + --zinc-50: var(--color-bg-elevated); + --zinc-100: var(--color-bg-surface); + --zinc-200: var(--color-border-default); + --zinc-300: var(--color-border-subtle); + --zinc-400: var(--color-text-disabled); + --zinc-500: var(--color-text-tertiary); + --zinc-600: var(--color-text-secondary); + --zinc-700: var(--color-text-secondary); + --zinc-800: var(--color-text-primary); + --zinc-900: var(--color-text-primary); + --zinc-950: var(--color-text-primary); } } @@ -68,6 +111,17 @@ button { @apply cursor-pointer; } + + /* Ensure body has grid layout for Flux components */ + body:has(>[data-flux-main]) { + display: grid; + grid-template-rows: auto 1fr auto; + grid-template-columns: min-content minmax(0, 1fr) min-content; + grid-template-areas: + "header header header" + "sidebar main aside" + "sidebar footer aside"; + } } /* ---------------------------------------- @@ -115,3 +169,188 @@ select:focus[data-flux-control] { .leaflet-container a { color: unset !important; } + +/* ---------------------------------------- + Einundzwanzig Design System - Flux Overrides +----------------------------------------- */ +@layer components { + /* Page backgrounds */ + body { + @apply bg-bg-page text-text-primary; + } + + /* Cards and surfaces */ + [data-flux-card] { + @apply bg-bg-surface border-border-subtle; + } + + /* Primary buttons (orange) */ + [data-flux-button][data-variant="primary"] { + @apply bg-orange-primary text-text-primary hover:bg-orange-light; + } + + /* Default/ghost buttons */ + [data-flux-button]:not([data-variant]) { + @apply border-border-default text-text-secondary hover:text-text-primary hover:border-border-default; + } + + /* Input fields */ + [data-flux-input], + [data-flux-control] { + @apply bg-bg-surface border-border-default text-text-primary placeholder:text-text-disabled; + } + + [data-flux-input]:focus, + [data-flux-control]:focus { + @apply border-orange-primary ring-orange-primary/20; + } + + /* Navigation */ + [data-flux-navbar] { + @apply bg-bg-surface border-b border-border-default; + } + + [data-flux-navbar-item][data-current="true"] { + @apply border-b-2 border-orange-primary text-text-primary; + } + + /* Modals */ + [data-flux-modal] { + @apply bg-bg-surface border-border-subtle; + } + + /* Dropdowns/Menus */ + [data-flux-menu] { + @apply bg-bg-elevated border-border-default; + } + + [data-flux-menu-item]:hover { + @apply bg-bg-surface; + } + + /* Tables */ + [data-flux-table] { + @apply bg-bg-surface; + } + + [data-flux-table] th { + @apply bg-bg-elevated text-text-secondary border-border-default; + } + + [data-flux-table] td { + @apply border-border-subtle text-text-primary; + } + + /* Badges */ + [data-flux-badge] { + @apply bg-bg-elevated text-text-secondary border-border-default; + } + + [data-flux-badge][data-color="green"] { + @apply bg-green-success/20 text-green-success border-green-success/30; + } + + [data-flux-badge][data-color="orange"] { + @apply bg-orange-primary/20 text-orange-primary border-orange-primary/30; + } + + /* Tabs */ + [data-flux-tab][data-selected="true"] { + @apply border-orange-primary text-text-primary; + } + + /* Switch */ + [data-flux-switch][data-checked="true"] { + @apply bg-orange-primary; + } + + /* Checkbox */ + [data-flux-checkbox]:checked { + @apply bg-orange-primary border-orange-primary; + } + + /* Radio */ + [data-flux-radio]:checked { + @apply border-orange-primary; + } + + [data-flux-radio]:checked::before { + @apply bg-orange-primary; + } + + /* Separators */ + [data-flux-separator] { + @apply bg-border-default; + } + + /* Callouts - Info boxes */ + .callout-warning { + @apply bg-gradient-to-b from-amber-500/20 to-transparent border border-amber-500; + } + + .callout-success { + @apply bg-gradient-to-b from-green-nostr/20 to-transparent border border-green-nostr; + } + + .callout-purple { + @apply bg-gradient-to-b from-purple-accent/20 to-transparent border border-purple-accent; + } +} + +/* ---------------------------------------- + Einundzwanzig Custom Components +----------------------------------------- */ +@layer components { + /* Feature cards with accent borders */ + .feature-card { + @apply bg-bg-surface rounded-xl p-5 border border-border-subtle; + } + + .feature-card-nostr { + @apply bg-bg-surface rounded-xl p-5 border border-green-nostr; + } + + .feature-card-lightning { + @apply bg-bg-surface rounded-xl p-5 border border-purple-accent; + } + + /* Info boxes with gradients */ + .info-box { + @apply rounded-xl p-4 border; + } + + .info-box-warning { + @apply rounded-xl p-4 border border-amber-500 bg-gradient-to-b from-amber-500/20 to-transparent; + } + + .info-box-success { + @apply rounded-xl p-4 border border-green-nostr bg-gradient-to-b from-green-nostr/20 to-transparent; + } + + /* Header navigation */ + .nav-item { + @apply px-4 py-3 text-text-secondary hover:text-text-primary transition-colors; + } + + .nav-item-active { + @apply px-4 py-3 text-text-primary hover:text-text-primary transition-colors border-b-2 border-orange-primary; + } + + /* Status badges */ + .status-badge { + @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm; + } + + .status-badge-active { + @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm bg-green-success/20 text-green-success; + } + + .status-badge-pending { + @apply inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm bg-amber-500/20 text-amber-500; + } + + /* Brand icon container */ + .brand-icon { + @apply w-8 h-8 rounded-lg bg-orange-primary flex items-center justify-center; + } +} diff --git a/resources/views/flux/accent.blade.php b/resources/views/flux/accent.blade.php new file mode 100644 index 0000000..369b68c --- /dev/null +++ b/resources/views/flux/accent.blade.php @@ -0,0 +1,38 @@ +@blaze + +@props([ + 'color' => null, +]) + +@php + $classes = Flux::classes() + ->add(match ($color) { + 'slate' => '[--color-accent:var(--color-slate-800)] [--color-accent-content:var(--color-slate-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-slate-800)]', + 'gray' => '[--color-accent:var(--color-gray-800)] [--color-accent-content:var(--color-gray-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-gray-800)]', + 'zinc' => '[--color-accent:var(--color-zinc-800)] [--color-accent-content:var(--color-zinc-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-zinc-800)]', + 'neutral' => '[--color-accent:var(--color-neutral-800)] [--color-accent-content:var(--color-neutral-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-neutral-800)]', + 'stone' => '[--color-accent:var(--color-stone-800)] [--color-accent-content:var(--color-stone-800)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-white)] dark:[--color-accent-content:var(--color-white)] dark:[--color-accent-foreground:var(--color-stone-800)]', + 'red' => '[--color-accent:var(--color-red-500)] [--color-accent-content:var(--color-red-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-red-500)] dark:[--color-accent-content:var(--color-red-400)] dark:[--color-accent-foreground:var(--color-white)]', + 'orange' => '[--color-accent:var(--color-orange-500)] [--color-accent-content:var(--color-orange-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-orange-400)] dark:[--color-accent-content:var(--color-orange-400)] dark:[--color-accent-foreground:var(--color-orange-950)]', + 'amber' => '[--color-accent:var(--color-amber-400)] [--color-accent-content:var(--color-amber-600)] [--color-accent-foreground:var(--color-amber-950)] dark:[--color-accent:var(--color-amber-400)] dark:[--color-accent-content:var(--color-amber-400)] dark:[--color-accent-foreground:var(--color-amber-950)]', + 'yellow' => '[--color-accent:var(--color-yellow-400)] [--color-accent-content:var(--color-yellow-600)] [--color-accent-foreground:var(--color-yellow-950)] dark:[--color-accent:var(--color-yellow-400)] dark:[--color-accent-content:var(--color-yellow-400)] dark:[--color-accent-foreground:var(--color-yellow-950)]', + 'lime' => '[--color-accent:var(--color-lime-400)] [--color-accent-content:var(--color-lime-600)] [--color-accent-foreground:var(--color-lime-900)] dark:[--color-accent:var(--color-lime-400)] dark:[--color-accent-content:var(--color-lime-400)] dark:[--color-accent-foreground:var(--color-lime-950)]', + 'green' => '[--color-accent:var(--color-green-600)] [--color-accent-content:var(--color-green-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-green-600)] dark:[--color-accent-content:var(--color-green-400)] dark:[--color-accent-foreground:var(--color-white)]', + 'emerald' => '[--color-accent:var(--color-emerald-600)] [--color-accent-content:var(--color-emerald-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-emerald-600)] dark:[--color-accent-content:var(--color-emerald-400)] dark:[--color-accent-foreground:var(--color-white)]', + 'teal' => '[--color-accent:var(--color-teal-600)] [--color-accent-content:var(--color-teal-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-teal-600)] dark:[--color-accent-content:var(--color-teal-400)] dark:[--color-accent-foreground:var(--color-white)]', + 'cyan' => '[--color-accent:var(--color-cyan-600)] [--color-accent-content:var(--color-cyan-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-cyan-600)] dark:[--color-accent-content:var(--color-cyan-400)] dark:[--color-accent-foreground:var(--color-white)]', + 'sky' => '[--color-accent:var(--color-sky-600)] [--color-accent-content:var(--color-sky-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-sky-600)] dark:[--color-accent-content:var(--color-sky-400)] dark:[--color-accent-foreground:var(--color-white)]', + 'blue' => '[--color-accent:var(--color-blue-500)] [--color-accent-content:var(--color-blue-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-blue-500)] dark:[--color-accent-content:var(--color-blue-400)] dark:[--color-accent-foreground:var(--color-white)]', + 'indigo' => '[--color-accent:var(--color-indigo-500)] [--color-accent-content:var(--color-indigo-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-indigo-500)] dark:[--color-accent-content:var(--color-indigo-300)] dark:[--color-accent-foreground:var(--color-white)]', + 'violet' => '[--color-accent:var(--color-violet-500)] [--color-accent-content:var(--color-violet-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-violet-500)] dark:[--color-accent-content:var(--color-violet-400)] dark:[--color-accent-foreground:var(--color-white)]', + 'purple' => '[--color-accent:var(--color-purple-500)] [--color-accent-content:var(--color-purple-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-purple-500)] dark:[--color-accent-content:var(--color-purple-300)] dark:[--color-accent-foreground:var(--color-white)]', + 'fuchsia' => '[--color-accent:var(--color-fuchsia-600)] [--color-accent-content:var(--color-fuchsia-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-fuchsia-600)] dark:[--color-accent-content:var(--color-fuchsia-400)] dark:[--color-accent-foreground:var(--color-white)]', + 'pink' => '[--color-accent:var(--color-pink-600)] [--color-accent-content:var(--color-pink-600)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-pink-600)] dark:[--color-accent-content:var(--color-pink-400)] dark:[--color-accent-foreground:var(--color-white)]', + 'rose' => '[--color-accent:var(--color-rose-500)] [--color-accent-content:var(--color-rose-500)] [--color-accent-foreground:var(--color-white)] dark:[--color-accent:var(--color-rose-500)] dark:[--color-accent-content:var(--color-rose-400)] dark:[--color-accent-foreground:var(--color-white)]', + }) + ; +@endphp + +
class($classes) }}> + {{ $slot }} +
\ No newline at end of file diff --git a/resources/views/flux/accordion/content.blade.php b/resources/views/flux/accordion/content.blade.php new file mode 100644 index 0000000..54e633b --- /dev/null +++ b/resources/views/flux/accordion/content.blade.php @@ -0,0 +1,23 @@ +@aware([ 'transition', 'expanded' ]) + +@props([ + 'transition' => false, + 'expanded' => false, +]) + +@php +$classes = Flux::classes() + ->add('pt-2 text-sm text-zinc-500 dark:text-zinc-300') + ; +@endphp + +
+
class($classes) }}> + {{ $slot }} +
+
diff --git a/resources/views/flux/accordion/heading.blade.php b/resources/views/flux/accordion/heading.blade.php new file mode 100644 index 0000000..25401ce --- /dev/null +++ b/resources/views/flux/accordion/heading.blade.php @@ -0,0 +1,33 @@ +@aware([ 'disabled', 'variant' ]) + +@props([ + 'disabled' => null, + 'variant' => null, +]) + +@php +$classes = Flux::classes() + ->add('group/accordion-heading flex items-center w-full') + ->add('text-start text-sm font-medium') + ->add(match ($variant) { + default => 'justify-between [&>svg]:ms-6', + 'reverse' => 'flex-row-reverse justify-end [&>svg]:me-2', + }) + ->add($disabled + ? 'text-zinc-400 dark:text-zinc-400 cursor-default' + : 'text-zinc-800 dark:text-white cursor-pointer' + ) + ; +@endphp + + diff --git a/resources/views/flux/accordion/icon.blade.php b/resources/views/flux/accordion/icon.blade.php new file mode 100644 index 0000000..0856031 --- /dev/null +++ b/resources/views/flux/accordion/icon.blade.php @@ -0,0 +1,17 @@ +@aware([ 'disabled' ]) + +@props([ + 'pointing' => 'down', + 'disabled' => null, +]) + +@php +$classes = Flux::classes() + ->add('text-zinc-300 dark:text-zinc-400') + ->add($disabled ? '' + : 'group-hover/accordion-heading:text-zinc-800 dark:group-hover/accordion-heading:text-white' + ) + ; +@endphp + +