From 5be9aea701a12e720e372bf71a25349d7ad7611a Mon Sep 17 00:00:00 2001
From: Johannes Millan <johannes.millan@gmail.com>
Date: Thu, 22 Jan 2026 15:33:02 +0100
Subject: [PATCH] feat(supersync): add EU data hosting badge to login page

Add a trust badge displaying EU flag stars and "Data hosted in EU" text to the SuperSync server login/register page. The badge uses official EU flag colors (blue #039 and gold #fc0) with the circle of 12 stars from public domain SVG.
---
 packages/super-sync-server/public/index.html | 93 ++++++++++++++++++++
 packages/super-sync-server/public/style.css  | 27 ++++++
 2 files changed, 120 insertions(+)

diff --git a/packages/super-sync-server/public/index.html b/packages/super-sync-server/public/index.html
index 1f7c43358..49fc482ea 100644
--- a/packages/super-sync-server/public/index.html
+++ b/packages/super-sync-server/public/index.html
@@ -23,6 +23,99 @@
       <header>
         <h1>SuperSync</h1>
         <p>Connect your productivity</p>
+        <div class="eu-badge">
+          <svg
+            class="eu-stars"
+            viewBox="0 0 640 480"
+            xmlns="http://www.w3.org/2000/svg"
+            xmlns:xlink="http://www.w3.org/1999/xlink"
+          >
+            <defs>
+              <g id="eu-d">
+                <g id="eu-b">
+                  <path
+                    id="eu-a"
+                    d="m0-1-.3 1 .5.1z"
+                  />
+                  <use
+                    xlink:href="#eu-a"
+                    transform="scale(-1 1)"
+                  />
+                </g>
+                <g id="eu-c">
+                  <use
+                    xlink:href="#eu-b"
+                    transform="rotate(72)"
+                  />
+                  <use
+                    xlink:href="#eu-b"
+                    transform="rotate(144)"
+                  />
+                </g>
+                <use
+                  xlink:href="#eu-c"
+                  transform="scale(-1 1)"
+                />
+              </g>
+            </defs>
+            <g
+              fill="#fc0"
+              transform="translate(320 240)scale(23.7037)"
+            >
+              <use
+                xlink:href="#eu-d"
+                width="100%"
+                height="100%"
+                y="-6"
+              />
+              <use
+                xlink:href="#eu-d"
+                width="100%"
+                height="100%"
+                y="6"
+              />
+              <g id="eu-e">
+                <use
+                  xlink:href="#eu-d"
+                  width="100%"
+                  height="100%"
+                  x="-6"
+                />
+                <use
+                  xlink:href="#eu-d"
+                  width="100%"
+                  height="100%"
+                  transform="rotate(-144 -2.3 -2.1)"
+                />
+                <use
+                  xlink:href="#eu-d"
+                  width="100%"
+                  height="100%"
+                  transform="rotate(144 -2.1 -2.3)"
+                />
+                <use
+                  xlink:href="#eu-d"
+                  width="100%"
+                  height="100%"
+                  transform="rotate(72 -4.7 -2)"
+                />
+                <use
+                  xlink:href="#eu-d"
+                  width="100%"
+                  height="100%"
+                  transform="rotate(72 -5 .5)"
+                />
+              </g>
+              <use
+                xlink:href="#eu-e"
+                width="100%"
+                height="100%"
+                transform="scale(-1 1)"
+              />
+            </g>
+          </svg>
+          <span>Data hosted in EU</span>
+        </div>
       </header>
 
       <main id="app">
diff --git a/packages/super-sync-server/public/style.css b/packages/super-sync-server/public/style.css
index cbaaf618c..cc7df2b5d 100644
--- a/packages/super-sync-server/public/style.css
+++ b/packages/super-sync-server/public/style.css
@@ -48,6 +48,27 @@ header p {
   margin-bottom: 2rem;
 }
 
+.eu-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  padding: 0 1rem;
+  background-color: #039;
+  border: 1px solid #002970;
+  border-radius: 20px;
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: #fc0;
+  margin-top: 0.25rem;
+  margin-bottom: 1.5rem;
+}
+
+.eu-stars {
+  height: 2.5rem;
+  width: 2.5rem;
+  flex-shrink: 0;
+}
+
 .card {
   background: var(--card-bg);
   border-radius: var(--radius);
@@ -453,4 +474,10 @@ footer {
   .danger-zone h3 {
     color: #f77;
   }
+
+  .eu-badge {
+    background-color: #039;
+    border-color: #002970;
+    color: #fc0;
+  }
 }