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.
This commit is contained in:
Johannes Millan 2026-01-22 15:33:02 +01:00
parent 3b33f9bb85
commit cbeef2feb4
2 changed files with 120 additions and 0 deletions

View file

@ -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">

View file

@ -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;
}
}