update your time function

src/data.js

@@ -3,22 +3,22 @@
 // Group stage: June 11 – June 27, 2026
 
 export const venues = {
-  'Mexico City':       { city: 'Mexico City',        country: '🇲🇽 Mexico',   stadium: 'Estadio Azteca',                    capacity: '87,523' },
+  'Mexico City':       { city: 'Mexico City',        country: '🇲🇽 Mexico',   stadium: 'Estadio Azteca',                    capacity: '87,523', utcOffset: -6 },
-  'Guadalajara':       { city: 'Guadalajara',         country: '🇲🇽 Mexico',   stadium: 'Estadio Akron',                     capacity: '49,850' },
+  'Guadalajara':       { city: 'Guadalajara',         country: '🇲🇽 Mexico',   stadium: 'Estadio Akron',                     capacity: '49,850', utcOffset: -6 },
-  'Monterrey':         { city: 'Monterrey',           country: '🇲🇽 Mexico',   stadium: 'Estadio BBVA',                      capacity: '53,500' },
+  'Monterrey':         { city: 'Monterrey',           country: '🇲🇽 Mexico',   stadium: 'Estadio BBVA',                      capacity: '53,500', utcOffset: -6 },
-  'Toronto':           { city: 'Toronto',             country: '🇨🇦 Canada',   stadium: 'BMO Field',                         capacity: '45,000' },
+  'Toronto':           { city: 'Toronto',             country: '🇨🇦 Canada',   stadium: 'BMO Field',                         capacity: '45,000', utcOffset: -4 },
-  'Vancouver':         { city: 'Vancouver',           country: '🇨🇦 Canada',   stadium: 'BC Place',                          capacity: '54,500' },
+  'Vancouver':         { city: 'Vancouver',           country: '🇨🇦 Canada',   stadium: 'BC Place',                          capacity: '54,500', utcOffset: -7 },
-  'Kansas City':       { city: 'Kansas City',         country: '🇺🇸 USA',      stadium: 'Arrowhead Stadium',                 capacity: '76,416' },
+  'Kansas City':       { city: 'Kansas City',         country: '🇺🇸 USA',      stadium: 'Arrowhead Stadium',                 capacity: '76,416', utcOffset: -5 },
-  'Los Angeles':       { city: 'Los Angeles',         country: '🇺🇸 USA',      stadium: 'SoFi Stadium',                      capacity: '70,240' },
+  'Los Angeles':       { city: 'Los Angeles',         country: '🇺🇸 USA',      stadium: 'SoFi Stadium',                      capacity: '70,240', utcOffset: -7 },
-  'San Francisco':     { city: 'San Francisco',       country: '🇺🇸 USA',      stadium: 'Levi\'s Stadium',                   capacity: '68,500' },
+  'San Francisco':     { city: 'San Francisco',       country: '🇺🇸 USA',      stadium: 'Levi\'s Stadium',                   capacity: '68,500', utcOffset: -7 },
-  'Seattle':           { city: 'Seattle',             country: '🇺🇸 USA',      stadium: 'Lumen Field',                       capacity: '69,000' },
+  'Seattle':           { city: 'Seattle',             country: '🇺🇸 USA',      stadium: 'Lumen Field',                       capacity: '69,000', utcOffset: -7 },
-  'Dallas':            { city: 'Dallas',              country: '🇺🇸 USA',      stadium: 'AT&T Stadium',                      capacity: '80,000' },
+  'Dallas':            { city: 'Dallas',              country: '🇺🇸 USA',      stadium: 'AT&T Stadium',                      capacity: '80,000', utcOffset: -5 },
-  'Atlanta':           { city: 'Atlanta',             country: '🇺🇸 USA',      stadium: 'Mercedes-Benz Stadium',             capacity: '71,000' },
+  'Atlanta':           { city: 'Atlanta',             country: '🇺🇸 USA',      stadium: 'Mercedes-Benz Stadium',             capacity: '71,000', utcOffset: -4 },
-  'Miami':             { city: 'Miami',               country: '🇺🇸 USA',      stadium: 'Hard Rock Stadium',                 capacity: '65,326' },
+  'Miami':             { city: 'Miami',               country: '🇺🇸 USA',      stadium: 'Hard Rock Stadium',                 capacity: '65,326', utcOffset: -4 },
-  'New York':          { city: 'New York / New Jersey', country: '🇺🇸 USA',   stadium: 'MetLife Stadium',                   capacity: '82,500' },
+  'New York':          { city: 'New York / New Jersey', country: '🇺🇸 USA',   stadium: 'MetLife Stadium',                   capacity: '82,500', utcOffset: -4 },
-  'Boston':            { city: 'Boston',              country: '🇺🇸 USA',      stadium: 'Gillette Stadium',                  capacity: '65,878' },
+  'Boston':            { city: 'Boston',              country: '🇺🇸 USA',      stadium: 'Gillette Stadium',                  capacity: '65,878', utcOffset: -4 },
-  'Philadelphia':      { city: 'Philadelphia',        country: '🇺🇸 USA',      stadium: 'Lincoln Financial Field',           capacity: '69,796' },
+  'Philadelphia':      { city: 'Philadelphia',        country: '🇺🇸 USA',      stadium: 'Lincoln Financial Field',           capacity: '69,796', utcOffset: -4 },
-  'Houston':           { city: 'Houston',             country: '🇺🇸 USA',      stadium: 'NRG Stadium',                       capacity: '72,220' },
+  'Houston':           { city: 'Houston',             country: '🇺🇸 USA',      stadium: 'NRG Stadium',                       capacity: '72,220', utcOffset: -5 },
 };
 
 export const groups = [

src/main.js

@@ -49,6 +49,28 @@ function groupCard(group) {
 }
 
 // ── Helpers ────────────────────────────────────────────────────────────────
+function getUserLocalTime(match, venue) {
+  if (!venue || venue.utcOffset === undefined) return '';
+  const matchResult = match.date.match(/([A-Za-z]+)\s+(\d+)/);
+  if (!matchResult) return '';
+  const [, monthStr, dayStr] = matchResult;
+  const [hour, minute] = match.time.split(':');
+  
+  const monthMap = { 'Jun': 5, 'Jul': 6 };
+  const utcHours = parseInt(hour, 10) - venue.utcOffset;
+  const matchDateUTC = new Date(Date.UTC(2026, monthMap[monthStr], parseInt(dayStr, 10), utcHours, parseInt(minute, 10)));
+  
+  const options = { 
+    weekday: 'short', 
+    month: 'short', 
+    day: 'numeric', 
+    hour: '2-digit', 
+    minute: '2-digit',
+    timeZoneName: 'short'
+  };
+  return matchDateUTC.toLocaleString(undefined, options);
+}
+
 function buildMatchdayHTML(group) {
   const matchdayNames = { 1: 'Matchday 1', 2: 'Matchday 2', 3: 'Matchday 3' };
   return [1, 2, 3].map(md => {
@@ -58,6 +80,7 @@ function buildMatchdayHTML(group) {
       const home  = group.teams.find(t => t.name === match.home);
       const away  = group.teams.find(t => t.name === match.away);
       const cardId = `match-${group.id}-${md}-${idx}`;
+      const userLocalTimeStr = getUserLocalTime(match, venue);
       return `
         <div class="match-card" style="--match-color:${group.color}" id="${cardId}">
           <button class="match-summary" onclick="toggleMatch('${cardId}')" aria-expanded="false">
@@ -77,7 +100,7 @@ function buildMatchdayHTML(group) {
           <div class="match-details-panel">
             <div class="match-details-inner">
               <div class="match-detail-row"><span class="md-icon">📅</span><div class="md-text"><span class="md-label">Date</span><span class="md-value">${match.date}</span></div></div>
-              <div class="match-detail-row"><span class="md-icon">🕐</span><div class="md-text"><span class="md-label">Kick-off</span><span class="md-value">${match.time} local time</span></div></div>
+              <div class="match-detail-row"><span class="md-icon">🕐</span><div class="md-text"><span class="md-label">Kick-off</span><span class="md-value">${match.time} local time${userLocalTimeStr ? ' / ' + userLocalTimeStr + ' your time' : ''}</span></div></div>
               <div class="match-detail-row"><span class="md-icon">📍</span><div class="md-text"><span class="md-label">Venue</span><span class="md-value">${venue ? venue.stadium : match.venue}</span></div></div>
               <div class="match-detail-row"><span class="md-icon">🏙️</span><div class="md-text"><span class="md-label">City</span><span class="md-value">${match.venue}${venue ? ', ' + venue.country : ''}</span></div></div>
               <div class="match-detail-row"><span class="md-icon">👥</span><div class="md-text"><span class="md-label">Capacity</span><span class="md-value">${venue ? venue.capacity : '—'}</span></div></div>