olyan app ami egy text to base64 envoder es decoder de nem ...

Prompt

olyan app ami egy text to base64 envoder es decoder de nem sima base64 hanem a szoveget base64 eldekodolja ÉS minden erteket 0805 el felszoroz es ezt a vegeredmenyt adja ki es a decoder is ezt tudja vissza fele decodolnj The backend must always be implemented in a single file, and the frontend must always be contained in a single index.html file, including all subpages. design: ne írj semmi mást csak a teljes fájlokat es kommentek nem lehetnek benne! soha semmi egyszerusitett mock placeholder dummy szimulalt fake szart nem engedelyezek es teljes fájl roviditetlen production ready kód nem lehet trancutted nem lehet olyan hogy …és hasonlóan 50 xy nem lehet dummy to do sorry hiányosság minden fájl teljes kódját egyesével fájkba írod semmi mást nem írsz ezen kívűl { "color": { "Surface Base": { "$type": "color", "$value": "#000000", "$description": "Root app background and primary surface fill; maps to --bg CSS variable" }, "Deep Navy Glow": { "$type": "color", "$value": "#09090f", "$description": "Secondary surface layer visible in header zone; near-black with a blue tint forming the gradient canvas" }, "Foreground Primary": { "$type": "color", "$value": "#f5f5f7", "$description": "Primary text and icon color across all zones; maps to --fg, --fg2, --fg3 at varying opacities" }, "Foreground Inverse / Button Text": { "$type": "color", "$value": "#ffffff", "$description": "Button labels, borders, and separator lines; maps to --green-soft, --sep, --hover, --liquid3" }, "Accent Blue": { "$type": "color", "$value": "#0000ff", "$description": "Brand accent and interactive highlight color; maps to --blue and --accent CSS variables" }, "Soft Mint": { "$type": "color", "$value": "#f6fff9", "$description": "Subtle tint used on gallery/action button text at 72% opacity; appears in footer zone" } }, "typography": { "Body Default": { "$type": "typography", "$value": { "fontFamily": "-apple-system", "fontSize": "16px", "fontWeight": 400, "lineHeight": "normal", "letterSpacing": "normal" }, "$description": "Primary body text and message content; most frequent tuple (43 hits)" }, "Body Medium": { "$type": "typography", "$value": { "fontFamily": "-apple-system", "fontSize": "16px", "fontWeight": 500, "lineHeight": "normal", "letterSpacing": "normal" }, "$description": "Slightly emphasized body text, UI labels" }, "Body Semibold": { "$type": "typography", "$value": { "fontFamily": "-apple-system", "fontSize": "16px", "fontWeight": 600, "lineHeight": "normal", "letterSpacing": "normal" }, "$description": "Strong emphasis body text or button labels" }, "Caption Default": { "$type": "typography", "$value": { "fontFamily": "-apple-system", "fontSize": "11px", "fontWeight": 400, "lineHeight": "normal", "letterSpacing": "normal" }, "$description": "Small metadata, timestamps, secondary labels" }, "Caption Semibold": { "$type": "typography", "$value": { "fontFamily": "-apple-system", "fontSize": "11px", "fontWeight": 600, "lineHeight": "normal", "letterSpacing": "0.5px" }, "$description": "Uppercase-style small labels with tracked spacing" }, "Subheadline": { "$type": "typography", "$value": { "fontFamily": "-apple-system", "fontSize": "15px", "fontWeight": 600, "lineHeight": "normal", "letterSpacing": "-0.3px" }, "$description": "Section subheadings with tight tracking" }, "Body Long-form": { "$type": "typography", "$value": { "fontFamily": "-apple-system", "fontSize": "16px", "fontWeight": 400, "lineHeight": "23.2px", "letterSpacing": "normal" }, "$description": "Message bubble or paragraph text with explicit line-height for readability" } }, "spacing": { "xs": { "$type": "dimension", "$value": "2px" }, "sm-1": { "$type": "dimension", "$value": "3px" }, "sm-2": { "$type": "dimension", "$value": "4px" }, "sm-3": { "$type": "dimension", "$value": "5px" }, "sm-4": { "$type": "dimension", "$value": "6px" }, "sm-5": { "$type": "dimension", "$value": "7px" }, "base-1": { "$type": "dimension", "$value": "8px" }, "base-2": { "$type": "dimension", "$value": "10px" }, "base-3": { "$type": "dimension", "$value": "11px" }, "base-4": { "$type": "dimension", "$value": "12px" }, "base-5": { "$type": "dimension", "$value": "13px" }, "base-6": { "$type": "dimension", "$value": "14px" }, "md-1": { "$type": "dimension", "$value": "16px" }, "md-2": { "$type": "dimension", "$value": "17px" }, "lg": { "$type": "dimension", "$value": "20px" } }, "borderRadius": { "Pill / Message Bubble": { "$type": "dimension", "$value": "18px" }, "Card / Input": { "$type": "dimension", "$value": "16px" }, "Large Pill": { "$type": "dimension", "$value": "23px" }, "Full Circle": { "$type": "dimension", "$value": "50%" } } } :root { /* Colors */ --color-surface-base: #000000; --color-deep-navy-glow: #09090f; --color-foreground-primary: #f5f5f7; --color-foreground-inverse-/-button-text: #ffffff; --color-accent-blue: #0000ff; --color-soft-mint: #f6fff9; /* Typography */ --font-body-default-family: -apple-system; --font-body-default-size: 16px; --font-body-default-weight: 400; --font-body-default-line-height: normal; --font-body-medium-family: -apple-system; --font-body-medium-size: 16px; --font-body-medium-weight: 500; --font-body-medium-line-height: normal; --font-body-semibold-family: -apple-system; --font-body-semibold-size: 16px; --font-body-semibold-weight: 600; --font-body-semibold-line-height: normal; --font-caption-default-family: -apple-system; --font-caption-default-size: 11px; --font-caption-default-weight: 400; --font-caption-default-line-height: normal; --font-caption-semibold-family: -apple-system; --font-caption-semibold-size: 11px; --font-caption-semibold-weight: 600; --font-caption-semibold-line-height: normal; --font-caption-semibold-letter-spacing: 0.5px; --font-subheadline-family: -apple-system; --font-subheadline-size: 15px; --font-subheadline-weight: 600; --font-subheadline-line-height: normal; --font-subheadline-letter-spacing: -0.3px; --font-body-long-form-family: -apple-system; --font-body-long-form-size: 16px; --font-body-long-form-weight: 400; --font-body-long-form-line-height: 23.2px; /* Spacing */ --spacing-xs: 2px; --spacing-sm-1: 3px; --spacing-sm-2: 4px; --spacing-sm-3: 5px; --spacing-sm-4: 6px; --spacing-sm-5: 7px; --spacing-base-1: 8px; --spacing-base-2: 10px; --spacing-base-3: 11px; --spacing-base-4: 12px; --spacing-base-5: 13px; --spacing-base-6: 14px; --spacing-md-1: 16px; --spacing-md-2: 17px; --spacing-lg: 20px; /* Border Radius */ --radius-pill-/-message-bubble: 18px; --radius-card-/-input: 16px; --radius-large-pill: 23px; --radius-full-circle: 50%; }

A system prompt was added to support web rendering