web badge smaller

requirements.txt

@@ -7,3 +7,4 @@ fastapi==0.115.0
 uvicorn[standard]==0.32.0
 jinja2==3.1.4
 pydantic==2.9.2
+itsdangerous==2.2.0

src/api/templates/contact.html

@@ -87,9 +87,9 @@
 
         .badge {
             display: inline-block;
-            padding: 0.2rem 0.6rem;
+            padding: 0.1rem 0.4rem;
-            border-radius: 4px;
+            border-radius: 3px;
-            font-size: 0.75rem;
+            font-size: 0.65rem;
             font-weight: 500;
             text-transform: uppercase;
             letter-spacing: 0.5px;

src/api/templates/index.html

@@ -139,6 +139,22 @@
             content: "\1F382 ";
         }
 
+        .badge {
+            display: inline-block;
+            padding: 0.1rem 0.4rem;
+            border-radius: 3px;
+            font-size: 0.65rem;
+            font-weight: 500;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            white-space: nowrap;
+        }
+
+        .badge-account {
+            background: #d1ecf1;
+            color: #0c5460;
+        }
+
         .contact-photo {
             width: 80px;
             height: 80px;
@@ -185,7 +201,9 @@
                             <div class="contact-organization">{{ c.organization }}</div>
                             {% endif %}
                             {% if c.birthday %}
-                            <div class="contact-birthday">{{ c.birthday }}</div>
+                            <div class="contact-birthday">{% if show_all and c.account %}<span class="badge badge-account">{{ c.account }}</span> {% endif %}{{ c.birthday }}</div>
+                            {% elif show_all and c.account %}
+                            <div class="contact-birthday"><span class="badge badge-account">{{ c.account }}</span></div>
                             {% endif %}
                         </div>
                         {% if c.photo_url %}