601: add card branding config

frontend/build-configs/bayern/index.ts

@@ -23,6 +23,26 @@ export const bayernCommon: CommonBuildConfigType = {
         showcase: "https://api.entitlementcard.app",
         local: "http://localhost:8000",
     },
+    cardBranding: {
+        headerTextColor: "#008dc9",
+        headerColor: "#F5F5FFF5",
+        headerTitleLeft: "",
+        headerTitleRight: "Freistaat Bayern",
+        headerTextFontSize: 8,
+        headerLogo: "assets/bayern/header-logo.png",
+        headerLogoPadding: 4,
+        headerContainerPadding: {top: 0, right: 4, bottom: 0, left: 8},
+        bodyContainerPadding: {top: 8, right: 8, bottom: 8, left: 8},
+        bodyLogo: "assets/bayern/body-logo.png",
+        bodyLogoPosition: "center",
+        bodyLabel: "Bayerische Ehrenamtskarte",
+        bodyTextColor: "#172c82",
+        bodyBackgroundImage: false,
+        bodyBackgroundImageUrl: "",
+        colorStandard: "#cfeaff",
+        colorPremium: "#cab374",
+        boxDecorationRadius: 1,
+    },
     featureFlags: {},
     applicationUrl: "https://bayern.ehrenamtskarte.app/apply-for-eak",
 };

frontend/build-configs/nuernberg/index.ts

@@ -23,6 +23,26 @@ export const nuernbergCommon: CommonBuildConfigType = {
         showcase: "https://api.entitlementcard.app",
         local: "http://localhost:7000",
     },
+    cardBranding: {
+        headerTextColor: "#000000",
+        headerTextFontSize: 9,
+        headerColor: "#F9B787",
+        headerTitleLeft: "Amt für Existenzsicherung und soziale Integration - Sozialamt",
+        headerTitleRight: "",
+        headerLogo: "assets/nuernberg/header-logo.png",
+        headerLogoPadding: 0,
+        headerContainerPadding: {top: 0, right: 24, bottom: 0, left: 16},
+        bodyContainerPadding: {top: 0, right: 24, bottom: 24, left: 16},
+        bodyLogo: "assets/nuernberg/body-logo.jpeg",
+        bodyLogoPosition: "right",
+        bodyLabel: "Nürnberg-Pass",
+        bodyTextColor: "#000000",
+        bodyBackgroundImage: true,
+        bodyBackgroundImageUrl:"assets/nuernberg/background.png",
+        colorStandard: "#F9B787",
+        colorPremium: "#F9B787",
+        boxDecorationRadius: 0,
+    },
     featureFlags: {},
     applicationUrl: "https://meinkonto.nuernberg.de/intelliform/forms/osg/standard/osg/osg-kette-starten/index?lebenslageIdAuswahl=w_500_sha_d_nuernberg-pass",
 };

frontend/build-configs/types.ts

@@ -29,6 +29,26 @@ export type CommonBuildConfigType = {
         production: string,
         local: string,
     },
+    cardBranding: {
+        headerTextColor: string,
+        headerColor: string,
+        headerTitleLeft: string,
+        headerTitleRight: string,
+        headerLogo: string,
+        headerLogoPadding: number,
+        headerContainerPadding: {top:number, left: number; bottom: number, right: number}
+        headerTextFontSize: number,
+        bodyTextColor: string,
+        colorPremium: string,
+        colorStandard: string,
+        bodyContainerPadding: {top:number, left: number; bottom: number, right: number}
+        bodyLogo: string,
+        bodyLogoPosition: string,
+        bodyLabel: string,
+        bodyBackgroundImage: boolean,
+        bodyBackgroundImageUrl: string
+        boxDecorationRadius: number,
+    }
     theme: ThemeType
     categories: number[]
     featureFlags: FeatureFlagsType

frontend/lib/identification/card/card_content.dart

@@ -0,0 +1,174 @@
+import 'package:ehrenamtskarte/build_config/build_config.dart';
+import 'package:ehrenamtskarte/identification/base_card_details.dart';
+import 'package:ehrenamtskarte/identification/card/card_header_logo.dart';
+import 'package:ehrenamtskarte/util/color_utils.dart';
+import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
+import 'package:intl/intl.dart';
+
+Color standardCardColor = getColorFromHex(buildConfig.cardBranding.colorStandard);
+Color premiumCardColor = getColorFromHex(buildConfig.cardBranding.colorPremium);
+Color textColor = getColorFromHex(buildConfig.cardBranding.bodyTextColor);
+Color headerColor = getColorFromHex(buildConfig.cardBranding.headerColor);
+String headerLogo = buildConfig.cardBranding.headerLogo;
+String bodyLogo = buildConfig.cardBranding.bodyLogo;
+String bodyLabel = buildConfig.cardBranding.bodyLabel;
+
+class PaddingStyle {
+  final double left;
+  final double right;
+  final double top;
+  final double bottom;
+
+  PaddingStyle(this.left, this.right, this.top, this.bottom);
+}
+
+PaddingStyle paddingBody = PaddingStyle(
+  buildConfig.cardBranding.bodyContainerPadding.left.toDouble(),
+  buildConfig.cardBranding.bodyContainerPadding.right.toDouble(),
+  buildConfig.cardBranding.bodyContainerPadding.top.toDouble(),
+  buildConfig.cardBranding.bodyContainerPadding.bottom.toDouble(),
+);
+
+PaddingStyle paddingHeader = PaddingStyle(
+  buildConfig.cardBranding.headerContainerPadding.left.toDouble(),
+  buildConfig.cardBranding.headerContainerPadding.right.toDouble(),
+  buildConfig.cardBranding.headerContainerPadding.top.toDouble(),
+  buildConfig.cardBranding.headerContainerPadding.bottom.toDouble(),
+);
+
+class Region with EquatableMixin {
+  final String prefix;
+  final String name;
+
+  Region(this.prefix, this.name);
+
+  @override
+  List<Object> get props => [prefix, name];
+}
+
+class CardContent extends StatelessWidget {
+  final BaseCardDetails cardDetails;
+  final Region? region;
+
+  const CardContent({super.key, required this.cardDetails, this.region});
+
+  String get _formattedExpirationDate {
+    final expirationDate = cardDetails.expirationDate;
+    return expirationDate != null ? DateFormat('dd.MM.yyyy').format(expirationDate) : "unbegrenzt";
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final cardColor = cardDetails.cardType == CardType.gold ? premiumCardColor : standardCardColor;
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final scaleFactor = constraints.maxWidth / 300;
+        final currentRegion = region;
+        final headerLeftTitle = currentRegion != null
+            ? "${currentRegion.prefix} ${currentRegion.name}"
+            : buildConfig.cardBranding.headerTitleLeft;
+        return Column(
+          mainAxisAlignment: MainAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            // Header
+            ColoredBox(
+              color: headerColor,
+              child: Padding(
+                padding: EdgeInsets.only(
+                  left: paddingHeader.left * scaleFactor,
+                  right: paddingHeader.right * scaleFactor,
+                  top: paddingHeader.top * scaleFactor,
+                  bottom: paddingHeader.bottom * scaleFactor,
+                ),
+                child: AspectRatio(
+                  aspectRatio: 6 / 1,
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Flexible(
+                        child: CardHeaderLogo(
+                          title: headerLeftTitle,
+                          scaleFactor: scaleFactor,
+                          alignment: CrossAxisAlignment.start,
+                        ),
+                      ),
+                      Flexible(
+                        child: CardHeaderLogo(
+                          title: buildConfig.cardBranding.headerTitleRight,
+                          scaleFactor: scaleFactor,
+                          logo: Image(image: AssetImage(buildConfig.cardBranding.headerLogo), fit: BoxFit.contain),
+                          alignment: CrossAxisAlignment.center,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+            // Body
+            Flexible(
+              child: DecoratedBox(
+                decoration: BoxDecoration(
+                  image: buildConfig.cardBranding.bodyBackgroundImage
+                      ? DecorationImage(
+                          image: AssetImage(buildConfig.cardBranding.bodyBackgroundImageUrl),
+                          fit: BoxFit.fill,
+                        )
+                      : null,
+                  gradient: RadialGradient(
+                    colors: [cardColor.withAlpha(100), cardColor],
+                    radius: buildConfig.cardBranding.boxDecorationRadius.toDouble(),
+                  ),
+                ),
+                child: Padding(
+                  padding: EdgeInsets.only(
+                    left: paddingBody.left * scaleFactor,
+                    right: paddingBody.right * scaleFactor,
+                    bottom: paddingBody.bottom * scaleFactor,
+                    top: paddingBody.top * scaleFactor,
+                  ),
+                  child: Column(
+                    children: [
+                      AspectRatio(
+                        aspectRatio: 6 / 1.2,
+                        child: Align(
+                          alignment: buildConfig.cardBranding.bodyLogoPosition == 'center'
+                              ? Alignment.center
+                              : Alignment.centerRight,
+                          child: Image(image: AssetImage(buildConfig.cardBranding.bodyLogo)),
+                        ),
+                      ),
+                      Flexible(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.stretch,
+                          mainAxisAlignment: MainAxisAlignment.end,
+                          children: [
+                            Text(
+                              cardDetails.fullName,
+                              style: TextStyle(fontSize: 14 * scaleFactor, color: textColor),
+                              textAlign: TextAlign.start,
+                            ),
+                            RichText(
+                              maxLines: 1,
+                              text: TextSpan(
+                                text: "Gültig bis: ",
+                                style: TextStyle(fontSize: 12 * scaleFactor, color: textColor),
+                                children: [TextSpan(text: _formattedExpirationDate)],
+                              ),
+                            )
+                          ],
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+}

frontend/lib/identification/card/card_header_logo.dart

@@ -0,0 +1,43 @@
+import 'package:ehrenamtskarte/build_config/build_config.dart';
+import 'package:ehrenamtskarte/util/color_utils.dart';
+import 'package:flutter/widgets.dart';
+
+Color textColor = getColorFromHex(buildConfig.cardBranding.headerTextColor);
+int fontSize = buildConfig.cardBranding.headerTextFontSize;
+double logoPadding = buildConfig.cardBranding.headerLogoPadding.toDouble();
+
+class CardHeaderLogo extends StatelessWidget {
+  final String title;
+  final Image? logo;
+  final double scaleFactor;
+  final CrossAxisAlignment alignment;
+
+  const CardHeaderLogo({
+    super.key,
+    required this.title,
+    this.logo,
+    required this.scaleFactor,
+    required this.alignment,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: EdgeInsets.all(logoPadding * scaleFactor),
+      child: Column(
+        crossAxisAlignment: alignment,
+        children: [
+          Flexible(
+            child: logo ?? Container(),
+          ),
+          Text(
+            title,
+            maxLines: 3,
+            style: TextStyle(fontSize: fontSize * scaleFactor, color: textColor),
+            textAlign: TextAlign.start,
+          )
+        ],
+      ),
+    );
+  }
+}