Merge pull request #25 from davidhuser/dev

davidhuser · web-flow · commit 1aa7738225fb · 2026-04-29T16:16:19.000+02:00
UI changes
diff --git a/README.md b/README.md
@@ -1,10 +1,10 @@
-# MXmap — Email Providers of Swiss Municipalities
+# MXmap — municipal email infrastructure maps
 
 [![CI](https://github.com/davidhuser/mxmap/actions/workflows/ci.yml/badge.svg)](https://github.com/davidhuser/mxmap/actions/workflows/ci.yml)
 
-An interactive map showing where Swiss municipalities host their email — whether with US hyperscalers (Microsoft, Google, AWS) or Swiss providers or other solutions.
+Interactive maps showing where Swiss municipalities host their email and how deeply their DNS is tied to US hyperscalers (Microsoft, Google, AWS) versus Swiss providers and self-hosted solutions.
 
-**[View the live map](https://mxmap.ch)**
+**[View the live maps](https://mxmap.ch)**
 
 [![Screenshot of MXmap](og-image.jpg)](https://mxmap.ch)
 
diff --git a/css/map.css b/css/map.css
@@ -11,20 +11,20 @@ body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
 #info-bar {
   background: #f0f1f5; border-bottom: 1px solid #d8dae0; overflow: clip; flex-shrink: 0;
   position: relative; z-index: 1;
-  max-height: 600px; padding: 16px 20px;
+  min-height: 120px; max-height: 600px; padding: 13px 20px;
   box-shadow: 0 2px 6px rgba(0,0,0,0.1);
 }
-#info-bar.collapsed { max-height: 0; padding-top: 0; padding-bottom: 0; }
+#info-bar.collapsed { min-height: 0; max-height: 0; padding-top: 0; padding-bottom: 0; }
 
 .info-grid {
   display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  gap: 14px;
+  gap: 12px;
 }
 .info-card h3 { font-size: 14px; font-weight: 600; margin-bottom: 4px; color: #1a1a2e; }
 .info-card p { font-size: 13px; color: #444; line-height: 1.5; margin: 0; }
 .info-card a { color: #2563eb; text-decoration: none; }
 .info-card a:hover { text-decoration: underline; }
-#generated { font-size: 11px; color: #999; margin-top: 4px; }
+#generated { font-size: 12px; color: #999; margin-top: 4px; }
 .info-title { display: none; font-size: 16px; font-weight: 600; color: #1a1a2e; margin-bottom: 12px; }
 
 .legend-toggle {
@@ -42,8 +42,12 @@ body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
 .legend-group { margin-top: 8px; }
 .legend-group:first-child { margin-top: 4px; }
 .legend-group-label {
-  font-size: 11px; color: #999; text-transform: uppercase;
-  letter-spacing: 0.3px; font-weight: 600; display: block; margin-bottom: 2px;
+  font-size: 13px; color: #333;
+  letter-spacing: 0.3px; font-weight: 600; display: block; margin-bottom: 4px;
+}
+.legend-other {
+  margin-top: 10px; padding-top: 8px; border-top: 1px solid #e5e7eb;
+  font-size: 12px; color: #555;
 }
 
 #map { flex: 1; position: relative; width: 100%; will-change: transform; }
@@ -108,7 +112,7 @@ body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden;
 .cat-badge.unknown { background: #f3f4f6; color: #6b7280; }
 
 .color-toggle {
-  display: block; margin-top: 8px; padding: 3px 8px; border-radius: 3px;
+  display: block; margin: 8px auto 0; padding: 3px 8px; border-radius: 3px;
   font-size: 11px; font-weight: 500; cursor: pointer;
   background: #f3f4f6; border: 1px solid #d1d5db; color: #374151;
 }
diff --git a/css/shared.css b/css/shared.css
@@ -8,36 +8,24 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-
   position: relative; z-index: 2000;
 }
 .header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
-.brand { font-size: 17px; font-weight: 700; white-space: nowrap; margin: 0; }
+.brand {
+  font-size: 14px; font-weight: 700; white-space: nowrap; margin: 0;
+  line-height: 1.05;
+}
 .brand a { color: #fff; text-decoration: none; }
-.beta-badge {
-  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;
-  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
-  color: #f0c040; padding: 1px 6px; border-radius: 3px; vertical-align: middle;
-  cursor: default;
+.brand-tag {
+  display: block; font-weight: 400; font-size: 11px;
+  opacity: 0.6; letter-spacing: 0.3px; margin-top: 1px;
 }
 .header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
 .header-disclaimer {
-  flex: 1; text-align: center; font-size: 12px; color: #f6ed95;
+  flex: 1; text-align: center; font-size: 12px; color: #fff37f;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
   padding: 0 12px;
 }
 
 #nav { display: flex; align-items: center; gap: 8px; position: relative; margin-left: 6px; }
 
-.nav-primary { display: flex; align-items: center; gap: 6px; }
-.nav-primary .header-link {
-  font-size: 13px; padding: 5px 14px; border-radius: 4px; font-weight: 500;
-  border: 1px solid rgba(255,255,255,0.3); color: #ccc; text-decoration: none;
-}
-.nav-primary .header-link:hover {
-  background: rgba(255,255,255,0.15); color: #fff;
-}
-.nav-primary .header-link.active {
-  background: rgba(255,255,255,0.2); color: #fff; font-weight: 600;
-  border-color: rgba(255,255,255,0.5);
-}
-
 .nav-menu-toggle {
   background: none; border: none; color: #a0a0b0; font-size: 18px;
   cursor: pointer; padding: 2px 4px; line-height: 1;
@@ -56,12 +44,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-
 .nav-menu .header-link:hover { color: #fff; }
 .nav-menu .header-link.active { color: #fff; font-weight: 600; }
 .nav-menu .header-link:last-child { border-bottom: none; }
-.nav-menu .nav-menu-mobile { display: none; }
 
 @media (max-width: 600px) {
-  .beta-badge { display: none; }
-  .header-disclaimer { font-size: 10px; padding: 0 6px; }
-  .nav-primary .header-link { font-size: 11px; padding: 2px 8px; }
-  .nav-primary { display: none; }
-  .nav-menu .nav-menu-mobile { display: block; }
+  .header-disclaimer { display: none; }
 }
diff --git a/datenschutz.html b/datenschutz.html
@@ -4,15 +4,15 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex, follow">
-<title>Datenschutzerklärung — MXmap</title>
+<title>Datenschutzerklärung | MXmap</title>
 <link rel="stylesheet" href="css/shared.css">
 <link rel="stylesheet" href="css/content.css">
 <script defer src="js/nav.js"></script>
 </head>
 <body>
 <header id="header">
   <div class="header-left">
-    <h1 class="brand"><a href="/">MXmap</a></h1>
+    <h1 class="brand"><a href="/">MXmap<span class="brand-tag">municipal email infrastructure</span></a></h1>
     <nav id="nav"></nav>
   </div>
 </header>
@@ -29,8 +29,8 @@ <h2>2. Hosting</h2>
   <h2>3. Externe Ressourcen (CDNs)</h2>
   <p>Zur Darstellung der Karte werden externe Ressourcen von Drittanbietern geladen. Dabei wird Ihre IP-Adresse an die jeweiligen Server übermittelt:</p>
   <ul>
-    <li><code>unpkg.com</code> — Leaflet-Kartenbibliothek und Schweizer Gemeindegrenzen (TopoJSON)</li>
-    <li><code>basemaps.cartocdn.com</code> — Kartenkacheln (CARTO)</li>
+    <li><code>unpkg.com</code>: Leaflet-Kartenbibliothek und Schweizer Gemeindegrenzen (TopoJSON)</li>
+    <li><code>basemaps.cartocdn.com</code>: Kartenkacheln (CARTO)</li>
   </ul>
 
   <h2>4. Cookies</h2>
diff --git a/impressum.html b/impressum.html
@@ -4,15 +4,15 @@
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex, follow">
-<title>Impressum — MXmap</title>
+<title>Impressum | MXmap</title>
 <link rel="stylesheet" href="css/shared.css">
 <link rel="stylesheet" href="css/content.css">
 <script defer src="js/nav.js"></script>
 </head>
 <body>
 <header id="header">
   <div class="header-left">
-    <h1 class="brand"><a href="/">MXmap</a></h1>
+    <h1 class="brand"><a href="/">MXmap<span class="brand-tag">municipal email infrastructure</span></a></h1>
     <nav id="nav"></nav>
   </div>
 </header>
diff --git a/index.html b/index.html
@@ -13,21 +13,21 @@
 <link rel="dns-prefetch" href="https://b.basemaps.cartocdn.com">
 <link rel="dns-prefetch" href="https://c.basemaps.cartocdn.com">
 <link rel="dns-prefetch" href="https://d.basemaps.cartocdn.com">
-<title>MXmap — Email Providers of Swiss Municipalities</title>
+<title>MXmap | Email Providers of Swiss Municipalities</title>
 <meta name="description" content="Interactive map showing the email providers of all ~2,100 Swiss municipalities, based on DNS analysis of MX and SPF records.">
 <meta name="keywords" content="Switzerland, municipalities, email, sovereignty, CLOUD Act, MX records, SPF, DNS, Microsoft 365, Google Workspace, digital sovereignty, data protection">
 <meta name="author" content="David Huser">
 <meta name="robots" content="index, follow">
 <link rel="canonical" href="https://mxmap.ch/">
 <meta property="og:type" content="website">
-<meta property="og:title" content="MXmap — Email Providers of Swiss Municipalities">
+<meta property="og:title" content="MXmap | Email Providers of Swiss Municipalities">
 <meta property="og:description" content="Interactive map showing where Swiss municipalities host their official email. DNS analysis of all ~2,100 municipalities, color-coded by provider.">
 <meta property="og:url" content="https://mxmap.ch/">
 <meta property="og:locale" content="en_CH">
 <meta property="og:site_name" content="MXmap">
 <meta property="og:image" content="https://mxmap.ch/og-image.jpg">
 <meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:title" content="MXmap — Email Providers of Swiss Municipalities">
+<meta name="twitter:title" content="MXmap | Email Providers of Swiss Municipalities">
 <meta name="twitter:description" content="Interactive map showing where Swiss municipalities host their official email. DNS analysis of all ~2,100 municipalities.">
 <meta name="twitter:image" content="https://mxmap.ch/og-image.jpg">
 <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect x='2' y='7' width='28' height='18' rx='2' fill='%231a1a2e'/%3E%3Cpath d='M2 9l14 9 14-9' fill='none' stroke='%2316a34a' stroke-width='2'/%3E%3C/svg%3E">
@@ -43,11 +43,10 @@
 <body>
 <header id="header">
   <div class="header-left">
-    <h1 class="brand">MXmap</h1>
-    <span class="beta-badge" title="Beta status, this website may contain errors">beta</span>
+    <h1 class="brand">MXmap<span class="brand-tag">municipal email infrastructure</span></h1>
     <nav id="nav"></nav>
   </div>
-  <span class="header-disclaimer">&#9888; This data may be out of date or incorrect. A research project is ongoing to further develop such maps.</span>
+  <span class="header-disclaimer">&#9888; <strong>Beta:</strong> data may be out of date or incorrect. A research project is ongoing to further develop these maps.</span>
   <div class="header-right">
     <button class="toggle-info" id="toggle-info" aria-expanded="true" aria-controls="info-bar">About &#9652;</button>
   </div>
@@ -58,21 +57,23 @@ <h2 class="info-title">Email Providers of Swiss Municipalities</h2>
   <div class="info-grid">
     <div class="info-card">
       <h3>What is this?</h3>
-      <p>A map of all ~2,100 Swiss municipalities showing which provider handles their official email — grouped by jurisdiction — based on public DNS records and other public network signals.</p>
+      <p>A map of all ~2,100 Swiss municipalities, grouped by jurisdiction. Each is colored by the provider handling its official email, based on public DNS records and other public network signals.</p>
     </div>
     <div class="info-card">
       <h3>Context</h3>
-      <p>Digital sovereignty: US-based providers are subject to the US CLOUD Act, which allows US authorities to request stored data, regardless of where it is physically hosted. This map makes the current provider landscape visible.</p>
+      <p>US-based providers are subject to the US CLOUD Act, allowing US authorities to request stored data regardless of where it is hosted. This map makes the current provider landscape visible.</p>
     </div>
     <div class="info-card">
       <h3>How does it work?</h3>
-      <p>Each municipality's official domain is checked via 11 signals from DNS records, SMTP banners, ASN lookups, and a public Microsoft API endpoint, then classified by provider type with confidence scoring.</p>
-      <p style="font-size:12px;color:#777;margin-top:6px;">Disclaimer: DNS records indicate mail routing and authorized senders, not necessarily where data is stored.</p>
+      <p>Each municipality's email domain is checked against multiple public DNS and network signals, then classified by provider type.</p>
+    </div>
+    <div class="info-card">
+      <h3>Accuracy</h3>
+      <p>Classifications may contain errors. DNS records indicate mail routing, not necessarily where data is stored. <br>If you notice an error, please <a href="https://github.com/davidhuser/mxmap/issues" target="_blank">submit an issue</a>.</p>
     </div>
     <div class="info-card">
       <h3>Open source &amp; open data</h3>
-      <p>The code and data are on <a href="https://github.com/davidhuser/mxmap" target="_blank">GitHub</a>.<br>
-      If you have noticed an error, please <a href="https://github.com/davidhuser/mxmap/issues" target="_blank">submit an issue</a>.</p>
+      <p>The code and data are on <a href="https://github.com/davidhuser/mxmap" target="_blank">GitHub</a>.</p>
       <p id="generated"></p>
     </div>
   </div>
@@ -85,9 +86,9 @@ <h3>Open source &amp; open data</h3>
 document.addEventListener('DOMContentLoaded', function () {
 const COLOR_SCHEMES = {
   default: {
-    'us-cloud':    { high: '#ffa199', medium: '#ffccb6', low: '#cccccc' },
+    'us-cloud':    { high: '#ff9e91', medium: '#ffccaa', low: '#cccccc' },
     'swiss-based': { high: '#88faaa', medium: '#daffc2', low: '#cccccc' },
-    lake: '#89B3D6',
+    lake: '#a3cef1',
   },
   colorblind: {
     'us-cloud':    { high: '#f1be61', medium: '#fde7c4', low: '#cccccc' },
@@ -346,7 +347,6 @@ <h3>Open source &amp; open data</h3>
   }
 }
 
-
 const map = initMap('map');
 setupInfoBar(map);
 const isMobile = window.innerWidth <= 600;
@@ -377,7 +377,11 @@ <h3>Open source &amp; open data</h3>
   }
 
   document.querySelectorAll('.legend-swatch').forEach(function (el) {
-    el.style.background = CATEGORY_COLORS[el.dataset.cat][el.dataset.level];
+    if (el.dataset.lake) {
+      el.style.background = CATEGORY_COLORS.lake;
+    } else {
+      el.style.background = CATEGORY_COLORS[el.dataset.cat][el.dataset.level];
+    }
   });
 
   var btn = document.querySelector('.color-toggle');
@@ -399,7 +403,7 @@ <h3>Open source &amp; open data</h3>
   showGenerated(dnsData);
 
   // Count by jurisdiction and confidence level
-  const catCounts = { 'us-cloud': 0, 'swiss-based': 0, 'insufficient': 0 };
+  const catCounts = { 'us-cloud': 0, 'swiss-based': 0 };
   const levelCounts = {
     'us-cloud': { high: 0, medium: 0, low: 0 },
     'swiss-based': { high: 0, medium: 0, low: 0 }
@@ -411,14 +415,9 @@ <h3>Open source &amp; open data</h3>
       catCounts[cat]++;
       const level = confidenceLevel(m ? (m.classification_confidence || 0) : 0);
       if (level !== 'insufficient') levelCounts[cat][level]++;
-    } else {
-      catCounts['insufficient']++;
     }
   }
 
-  const hatchSvg = 'data:image/svg+xml,' +
-    encodeURIComponent('<svg xmlns="http://www.w3.org/2000/svg" width="8" height="8"><rect width="8" height="8" fill="#BFBFBF"/><path d="M-1,1 l2,-2 M0,8 l8,-8 M7,9 l2,-2" stroke="#000" stroke-width="1"/></svg>');
-
   // Legend with counts
   const isMobile = window.innerWidth <= 600;
   const legend = L.control({ position: isMobile ? 'topright' : 'bottomright' });
@@ -428,10 +427,11 @@ <h3>Open source &amp; open data</h3>
     div.innerHTML =
       '<button class="legend-toggle" aria-label="Toggle legend" aria-expanded="' + (!isMobile) + '">' + (isMobile ? 'Legend \u25B8' : '') + '</button>' +
       '<div class="legend-content">' +
-      '<strong>Email Jurisdiction</strong>' +
       legendCategoryHtml('US Cloud', CATEGORY_COLORS['us-cloud'], catCounts['us-cloud'], 'us-cloud', levelCounts['us-cloud']) +
       legendCategoryHtml('Swiss Based', CATEGORY_COLORS['swiss-based'], catCounts['swiss-based'], 'swiss-based', levelCounts['swiss-based']) +
-      '<div class="legend-group"><i style="background-image:url(\'' + hatchSvg + '\')"></i>Insufficient data (' + catCounts['insufficient'] + ')</div>' +
+      '<div class="legend-group legend-other">' +
+      '<i class="legend-swatch" data-lake="1" style="background:' + CATEGORY_COLORS.lake + '"></i>Lake (not a municipality)' +
+      '</div>' +
       '<button class="color-toggle" aria-label="Switch to colorblind-safe colors">\u25D0 Colorblind mode</button>' +
       '</div>';
     L.DomEvent.disableClickPropagation(div);
diff --git a/js/map-shared.js b/js/map-shared.js
@@ -1,4 +1,4 @@
-/* map-shared.js — shared utilities for map pages */
+/* map-shared.js - shared utilities for map pages */
 
 function escapeHtml(str) {
   var el = document.createElement('span');
@@ -79,7 +79,7 @@ function showGenerated(dnsData) {
     var date = new Date(dnsData.generated);
     var text = 'Updated ' + date.toLocaleString('de-CH', { dateStyle: 'medium', timeStyle: 'short' });
     if (dnsData.commit) {
-      text += ' \u00b7 ' + dnsData.commit;
+      text += ' \u00b7 commit ' + dnsData.commit;
     }
     document.getElementById('generated').textContent = text;
   }
diff --git a/js/nav.js b/js/nav.js
@@ -1,56 +1,35 @@
-/* nav.js — auto-renders navigation with pill tabs + dropdown overflow menu */
+/* nav.js - auto-renders dropdown overflow menu */
 (function () {
   var path = window.location.pathname;
-  var primary = [
-    { href: '/', label: 'Email Map', match: ['/', '/index.html'] },
-    { href: '/tenant.html', label: 'Tenant Map' },
-  ];
-  var secondary = [
+  var links = [
     { href: '/impressum.html', label: 'Impressum' },
     { href: '/datenschutz.html', label: 'Datenschutz' },
   ];
 
   var nav = document.getElementById('nav');
   if (!nav) return;
 
-  function isActive(link) {
-    return link.match
-      ? link.match.indexOf(path) !== -1
-      : path === link.href;
-  }
-
-  function makeLink(link, extraClass) {
+  function makeLink(link) {
     var a = document.createElement('a');
     a.href = link.href;
-    a.className = 'header-link' + (extraClass ? ' ' + extraClass : '');
+    a.className = 'header-link';
     a.textContent = link.label;
-    if (isActive(link)) a.classList.add('active');
+    if (path === link.href) a.classList.add('active');
     return a;
   }
 
-  /* inline primary links as pill tabs (hidden on mobile via CSS) */
-  var inlineWrap = document.createElement('span');
-  inlineWrap.className = 'nav-primary';
-  primary.forEach(function (link) {
-    inlineWrap.appendChild(makeLink(link));
-  });
-  nav.appendChild(inlineWrap);
-
   /* toggle button */
   var toggle = document.createElement('button');
   toggle.className = 'nav-menu-toggle';
   toggle.setAttribute('aria-label', 'More links');
   toggle.setAttribute('aria-expanded', 'false');
-  toggle.textContent = '\u22EF';
+  toggle.textContent = '⋯';
   nav.appendChild(toggle);
 
   /* dropdown menu */
   var menu = document.createElement('div');
   menu.className = 'nav-menu';
-  primary.forEach(function (link) {
-    menu.appendChild(makeLink(link, 'nav-menu-mobile'));
-  });
-  secondary.forEach(function (link) {
+  links.forEach(function (link) {
     menu.appendChild(makeLink(link));
   });
   nav.appendChild(menu);
diff --git a/tenant.html b/tenant.html

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-/* map-shared.js — shared utilities for map pages */`
	`1`	`+/* map-shared.js - shared utilities for map pages */`
`2`	`2`
`3`	`3`	`function escapeHtml(str) {`
`4`	`4`	`var el = document.createElement('span');`
`@@ -79,7 +79,7 @@ function showGenerated(dnsData) {`
`79`	`79`	`var date = new Date(dnsData.generated);`
`80`	`80`	`var text = 'Updated ' + date.toLocaleString('de-CH', { dateStyle: 'medium', timeStyle: 'short' });`
`81`	`81`	`if (dnsData.commit) {`
`82`		`- text += ' \u00b7 ' + dnsData.commit;`
	`82`	`+ text += ' \u00b7 commit ' + dnsData.commit;`
`83`	`83`	`}`
`84`	`84`	`document.getElementById('generated').textContent = text;`
`85`	`85`	`}`