From ec88ad7fc174dbbe9c646c730c54b6ac36ed6c0f Mon Sep 17 00:00:00 2001
From: Sebastian Stein <sebastian@codepassion.de>
Date: Mon, 21 Apr 2025 11:22:51 +0200
Subject: [PATCH] - added slot-main and stars.svg - optimized SVGs - completed
 layout

---
 webapp/components/Badges.vue             | 41 ++++++++++-----
 webapp/pages/profile/_id/_slug.vue       |  8 +--
 webapp/static/img/badges/slot-blue.svg   | 63 +-----------------------
 webapp/static/img/badges/slot-main.svg   | 18 +++++++
 webapp/static/img/badges/slot-orange.svg | 63 +-----------------------
 5 files changed, 54 insertions(+), 139 deletions(-)
 create mode 100644 webapp/static/img/badges/slot-main.svg

diff --git a/webapp/components/Badges.vue b/webapp/components/Badges.vue
index 123e5eff3..48c23f32b 100644
--- a/webapp/components/Badges.vue
+++ b/webapp/components/Badges.vue
@@ -37,7 +37,7 @@ export default {
   $offset-y: ($badge-size-y) / 2 - 2 * $gap-x;
 
   width: calc($main-badge-size-x + 4 * $badge-size-x + 4 * $gap-x);
-  height: calc(3 * $badge-size-y + 4 * $gap-y);
+  height: calc($offset-y + 3 * $badge-size-y + 4 * $gap-y);
   margin: auto;
 
   .hc-badge-container {
@@ -67,7 +67,22 @@ export default {
     height: $main-badge-size-y;
     top: $offset-y + calc($gap-y / 2) - 1;
     left: 0;
-    font-size: 20px; /* Doubled font size for first slot */
+    color: #777777;
+    font-size: 17px;
+    background-image: url('/img/badges/slot-main.svg');
+  }
+
+  .hc-badge-container:nth-child(1)::before {
+    content: '';
+    position: absolute;
+    top: -20px;
+    left: 0;
+    width: 100%;
+    height: 20px;
+    background-image: url('/img/badges/stars.svg');
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: contain;
   }
 
   .hc-badge-container:nth-child(2) {
@@ -116,7 +131,7 @@ export default {
   }
 
   .nordrhein-westfalen::after {
-    content: "NW";
+    content: 'NW';
   }
 
   .test-express,
@@ -137,43 +152,43 @@ export default {
   }
 
   .test-express::after {
-    content: "TE";
+    content: 'TE';
   }
 
   .liberation-express::after {
-    content: "LE";
+    content: 'LE';
   }
 
   .nachweis-express::after {
-    content: "NE";
+    content: 'NE';
   }
 
   .maskenfrei-express::after {
-    content: "ME";
+    content: 'ME';
   }
 
   .beitragsblocker::after {
-    content: "BB";
+    content: 'BB';
   }
 
   .beitragsstopper::after {
-    content: "BS";
+    content: 'BS';
   }
 
   .masern-impfbloker::after {
-    content: "MI";
+    content: 'MI';
   }
 
   .rundfunk-alarm::after {
-    content: "RA";
+    content: 'RA';
   }
 
   .freunde-der-demokratie::after {
-    content: "FD";
+    content: 'FD';
   }
 
   .restart-democracy::after {
-    content: "RD";
+    content: 'RD';
   }
 }
 </style>
diff --git a/webapp/pages/profile/_id/_slug.vue b/webapp/pages/profile/_id/_slug.vue
index 54f544a6e..8f2328886 100644
--- a/webapp/pages/profile/_id/_slug.vue
+++ b/webapp/pages/profile/_id/_slug.vue
@@ -270,11 +270,11 @@ export default {
         { key: 'NE', title: 'Nachweis-Express', type: 'nachweis-express', icon: null },
         { key: 'ME', title: 'Maskenfrei.Express', type: 'maskenfrei-express', icon: null },
         { key: 'BB', title: 'Beitragsblocker', type: 'beitragsblocker', icon: null },
-        { key: 'BS', title: 'Beitragsstopper', type: 'beitragsstopper', icon: null },
-        { key: 'MI', title: 'Masern-Impfbloker', type: 'masern-impfbloker', icon: null },
+        // { key: 'BS', title: 'Beitragsstopper', type: 'beitragsstopper', icon: null },
+        // { key: 'MI', title: 'Masern-Impfbloker', type: 'masern-impfbloker', icon: null },
         // { key: 'RA', title: 'Rundfunk-Alarm', type: 'rundfunk-alarm', icon: null },
-        // { key: 'FD', title: 'Freunde der Demokratie', type: 'freunde-der-demokratie', icon: null },
-        // { key: 'RD', title: 'Restart Democracy', type: 'restart-democracy', icon: null }
+        { key: 'FD', title: 'Freunde der Demokratie', type: 'freunde-der-demokratie', icon: null },
+        { key: 'RD', title: 'Restart Democracy', type: 'restart-democracy', icon: null },
         { title: '', type: 'empty', icon: null },
         { title: '', type: 'empty', icon: null },
       ]
diff --git a/webapp/static/img/badges/slot-blue.svg b/webapp/static/img/badges/slot-blue.svg
index 1d9caa53d..d666ec882 100644
--- a/webapp/static/img/badges/slot-blue.svg
+++ b/webapp/static/img/badges/slot-blue.svg
@@ -1,62 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   version="1.1"
-   id="svg1"
-   width="400"
-   height="346.66666"
-   viewBox="0 0 400 346.66666"
-   sodipodi:docname="slot-blue.svg"
-   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
-   xml:space="preserve"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-     id="defs1"><linearGradient
-       id="linearGradient3"
-       inkscape:collect="always"><stop
-         style="stop-color:#068790;stop-opacity:1;"
-         offset="0"
-         id="stop3" /><stop
-         style="stop-color:#1ecfdc;stop-opacity:1;"
-         offset="1"
-         id="stop4" /></linearGradient><linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient3"
-       id="linearGradient4"
-       x1="708.75574"
-       y1="280.91028"
-       x2="493.17172"
-       y2="65.326271"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-404.0619,0.21500175)" /></defs><sodipodi:namedview
-     id="namedview1"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     showgrid="false"
-     inkscape:zoom="1.1269849"
-     inkscape:cx="62.112633"
-     inkscape:cy="253.77447"
-     inkscape:window-width="1920"
-     inkscape:window-height="1008"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g1" /><g
-     inkscape:groupmode="layer"
-     inkscape:label="Image"
-     id="g1"><path
-       style="fill:#037d86;fill-opacity:1;stroke:none;stroke-width:1.51181"
-       d="M -0.21505,173.97849 100.43011,0.21505325 H 299.13978 L 400.21505,173.97849 300.4301,346.02149 99.13979,346.4516 Z"
-       id="path1" /><path
-       style="fill:url(#linearGradient4);stroke:none;stroke-width:1.34043"
-       d="M 22.48162,173.90536 111.7175,19.839995 h 176.18365 l 89.61723,154.065365 -88.47318,152.53995 -178.47175,0.38135 z"
-       id="path2" /></g></svg>
+<svg width="400" height="346.67" version="1.1" viewBox="0 0 400 346.67" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient4" x1="708.76" x2="493.17" y1="280.91" y2="65.326" gradientTransform="translate(-404.06 .215)" gradientUnits="userSpaceOnUse"><stop stop-color="#068790" offset="0"/><stop stop-color="#1ecfdc" offset="1"/></linearGradient></defs><path d="m-0.21505 173.98 100.65-173.76h198.71l101.08 173.76-99.785 172.04-201.29 0.43011z" fill="#037d86"/><path d="m22.482 173.91 89.236-154.07h176.18l89.617 154.07-88.473 152.54-178.47 0.38135z" fill="url(#linearGradient4)"/></svg>
diff --git a/webapp/static/img/badges/slot-main.svg b/webapp/static/img/badges/slot-main.svg
new file mode 100644
index 000000000..a092c43cb
--- /dev/null
+++ b/webapp/static/img/badges/slot-main.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+<svg width="216.69mm" height="188.38mm" version="1.1" viewBox="0 0 216.69 188.38" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+ <defs>
+  <linearGradient id="linearGradient8" x1="-230.68" x2="-711.89" y1="852.16" y2="370.95" gradientTransform="matrix(.26466 0 0 .2647 223.1 65.814)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#454644" offset="0"/>
+   <stop stop-color="#b4b4b4" offset="1"/>
+  </linearGradient>
+  <linearGradient id="linearGradient9" x1="-182.11" x2="-761.07" y1="901.46" y2="322.49" gradientTransform="matrix(.26466 0 0 .2647 223.1 65.814)" gradientUnits="userSpaceOnUse">
+   <stop stop-color="#434442" offset="0"/>
+   <stop stop-color="#b7b7b7" stop-opacity=".90196" offset="1"/>
+  </linearGradient>
+ </defs>
+ <g transform="translate(10.054 -133.61)">
+  <path d="m53.589 149.55-45.27 78.441 44.689 77.858 90.539-0.19439 44.882-77.664-45.462-78.441zm3.0492 5.321h83.292l42.368 73.1-41.827 72.376-84.375 0.18095-41.646-72.557z" fill="url(#linearGradient8)"/>
+  <path d="m44.107 133.61-54.162 94.007 53.581 94.376 109.45-0.19439 53.664-94.182-54.245-94.007zm3.0492 5.321h102.2l51.15 88.667-50.609 88.894-103.28 0.18095-50.538-89.075z" fill="url(#linearGradient9)"/>
+ </g>
+</svg>
diff --git a/webapp/static/img/badges/slot-orange.svg b/webapp/static/img/badges/slot-orange.svg
index 2c8d54af7..9a48c78e8 100644
--- a/webapp/static/img/badges/slot-orange.svg
+++ b/webapp/static/img/badges/slot-orange.svg
@@ -1,62 +1,3 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<?xml version="1.0" encoding="UTF-8"?>
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
-
-<svg
-   version="1.1"
-   id="svg1"
-   width="400"
-   height="346.66666"
-   viewBox="0 0 400 346.66666"
-   sodipodi:docname="slot-orange.svg"
-   inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
-   xml:space="preserve"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:xlink="http://www.w3.org/1999/xlink"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg"><defs
-     id="defs1"><linearGradient
-       id="linearGradient3"
-       inkscape:collect="always"><stop
-         style="stop-color:#cc7e10;stop-opacity:1;"
-         offset="0"
-         id="stop3" /><stop
-         style="stop-color:#f9b452;stop-opacity:1;"
-         offset="1"
-         id="stop4" /></linearGradient><linearGradient
-       inkscape:collect="always"
-       xlink:href="#linearGradient3"
-       id="linearGradient4"
-       x1="708.75574"
-       y1="280.91028"
-       x2="493.17172"
-       y2="65.326271"
-       gradientUnits="userSpaceOnUse"
-       gradientTransform="translate(-404.0619,0.21500175)" /></defs><sodipodi:namedview
-     id="namedview1"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     showgrid="false"
-     inkscape:zoom="1.1269849"
-     inkscape:cx="62.112631"
-     inkscape:cy="253.77446"
-     inkscape:window-width="1920"
-     inkscape:window-height="1008"
-     inkscape:window-x="0"
-     inkscape:window-y="0"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="g1" /><g
-     inkscape:groupmode="layer"
-     inkscape:label="Image"
-     id="g1"><path
-       style="fill:#c57505;fill-opacity:1;stroke:none;stroke-width:1.51181"
-       d="M -0.21505,173.97849 100.43011,0.21505325 H 299.13978 L 400.21505,173.97849 300.4301,346.02149 99.13979,346.4516 Z"
-       id="path1" /><path
-       style="fill:url(#linearGradient4);stroke:none;stroke-width:1.34043"
-       d="M 22.48162,173.90536 111.7175,19.839995 h 176.18365 l 89.61723,154.065365 -88.47318,152.53995 -178.47175,0.38135 z"
-       id="path2" /></g></svg>
+<svg width="400" height="346.67" version="1.1" viewBox="0 0 400 346.67" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><linearGradient id="linearGradient4" x1="708.76" x2="493.17" y1="280.91" y2="65.326" gradientTransform="translate(-404.06 .215)" gradientUnits="userSpaceOnUse"><stop stop-color="#cc7e10" offset="0"/><stop stop-color="#f9b452" offset="1"/></linearGradient></defs><path d="m-0.21505 173.98 100.65-173.76h198.71l101.08 173.76-99.785 172.04-201.29 0.43011z" fill="#c57505"/><path d="m22.482 173.91 89.236-154.07h176.18l89.617 154.07-88.473 152.54-178.47 0.38135z" fill="url(#linearGradient4)"/></svg>