feat: landing page, menu tabs + brunch, events calendar

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-17 10:46:25 -04:00
parent 61799aa5a2
commit 9126181279
4 changed files with 1417 additions and 418 deletions
--- a/events.html
+++ b/events.html
@@ -19,47 +19,131 @@
  ==================================================== -->
  <script id="events-data" type="application/json">
  [
-    {
-      "name": "Jazz & Rye Night",
-      "date": "2026-03-20",
-      "time": "8 PM – 11 PM",
-      "description": "Local jazz quartet The Meridian Collective takes the stage. Featuring our curated rye whiskey flight and complimentary bar bites from 8–9 PM.",
-      "tag": "Live Music"
-    },
-    {
-      "name": "Mezcal Tasting Masterclass",
-      "date": "2026-03-27",
-      "time": "7 PM – 9 PM",
-      "description": "Guided tasting with four premium single-village mezcals. Led by award-winning spirits educator Ramona Vásquez. Tickets include a welcome cocktail.",
-      "tag": "Tasting"
-    },
-    {
-      "name": "Vinyl Sessions Vol. 12",
-      "date": "2026-04-03",
-      "time": "9 PM – 1 AM",
-      "description": "DJ Harlow spins rare soul, funk, and neo-jazz on a vintage turntable setup. No cover charge. Cocktail specials all night.",
-      "tag": "DJ Night"
-    },
-    {
-      "name": "Chef's Table Pairing Dinner",
-      "date": "2026-04-10",
-      "time": "7 PM – 10 PM",
-      "description": "A five-course tasting menu crafted by our head chef, each course paired with a cocktail from our bar team. Seats are very limited — reserve in advance.",
-      "tag": "Dinner Event"
-    },
    {
      "name": "Trivia Night",
-      "date": "2026-04-17",
+      "date": "2026-03-17",
      "time": "8 PM – 10 PM",
-      "description": "Monthly trivia with prizes including bar tabs, bottles, and Axis merchandise. Teams of up to 6. Arrive early to secure a table.",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
      "tag": "Social"
    },
    {
-      "name": "Whiskey & Smoke",
+      "name": "Live Music",
+      "date": "2026-03-20",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-03-24",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-03-27",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-03-30",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-03-31",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-04-03",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-04-07",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Board Games & Chess Night",
+      "date": "2026-04-09",
+      "time": "7 PM",
+      "description": "The 2nd Thursday of every month. Bring your A-game. Classic board games, chess sets, and cold drinks. All skill levels welcome.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-04-10",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-04-14",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-04-17",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-04-20",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-04-21",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
      "date": "2026-04-24",
-      "time": "7 PM – 9 PM",
-      "description": "An evening dedicated to peated Scotch and Islay whiskies. Flight of five drams, paired with smoked charcuterie. Led by our resident whiskey sommelier.",
-      "tag": "Tasting"
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Trivia Night",
+      "date": "2026-04-28",
+      "time": "8 PM – 10 PM",
+      "description": "Teams of up to 6. Prizes include bar tabs and Axis merchandise. Arrive early to grab a table.",
+      "tag": "Social"
+    },
+    {
+      "name": "Live Music",
+      "date": "2026-04-27",
+      "time": "9 PM",
+      "description": "Local and touring acts across folk, rock, soul, and jazz. No cover charge, ever.",
+      "tag": "Live Music"
+    },
+    {
+      "name": "Board Games & Chess Night",
+      "date": "2026-05-14",
+      "time": "7 PM",
+      "description": "The 2nd Thursday of every month. Bring your A-game. Classic board games, chess sets, and cold drinks. All skill levels welcome.",
+      "tag": "Social"
    }
  ]
  </script>
@@ -71,7 +155,8 @@
      <span></span><span></span><span></span>
    </button>
    <ul class="navbar__links" id="nav-links">
-      <li><a href="index.html">Menu</a></li>
+      <li><a href="index.html">Home</a></li>
+      <li><a href="menu.html">Menu</a></li>
      <li><a href="events.html" class="active">Events</a></li>
    </ul>
  </nav>
@@ -80,9 +165,14 @@
  <header class="page-hero">
    <p class="page-hero__eyebrow">What's On</p>
    <h1 class="page-hero__title">Upcoming Events</h1>
-    <p class="page-hero__sub">Live music &middot; Tastings &middot; Special nights</p>
+    <p class="page-hero__sub">Live music &middot; Trivia &middot; Board games &middot; Special nights</p>
  </header>

+  <!-- ===== Calendar Widget ===== -->
+  <div class="container">
+    <div class="cal-widget" id="cal-widget"></div>
+  </div>
+
  <!-- ===== Main Content ===== -->
  <main>
    <div class="container">
@@ -94,7 +184,7 @@

  <!-- ===== Footer ===== -->
  <footer>
-    <p><span>Axis</span> &mdash; Open Tue–Sun, 5pm–2am &mdash; 44 Commerce St</p>
+    <p><span>Axis</span> &mdash; 3048 Dundas Street West &mdash; Open Tue–Sun 5pm–2am &mdash; Brunch Thu–Sun 9am–3pm</p>
    <p style="margin-top:0.4rem;">Events subject to change. Follow us for updates.</p>
  </footer>

@@ -104,6 +194,108 @@
      document.getElementById('nav-links').classList.toggle('open');
    }

+    /* ---- Calendar Widget ---- */
+    (function () {
+      const calEl = document.getElementById('cal-widget');
+      const MONTH_NAMES = ['January','February','March','April','May','June','July','August','September','October','November','December'];
+      const today = new Date();
+      let viewYear = today.getFullYear();
+      let viewMonth = today.getMonth();
+
+      function is2ndThursday(y, m, d) {
+        if (new Date(y, m, d).getDay() !== 4) return false;
+        let count = 0;
+        for (let i = 1; i <= d; i++) {
+          if (new Date(y, m, i).getDay() === 4) count++;
+        }
+        return count === 2;
+      }
+
+      function getDots(y, m, d) {
+        const dow = new Date(y, m, d).getDay();
+        const dots = [];
+        if (dow === 2) dots.push({ color: 'var(--gold)', label: 'Trivia Night' });
+        if (dow === 1 || dow === 5) dots.push({ color: '#e07020', label: 'Live Music' });
+        if (is2ndThursday(y, m, d)) dots.push({ color: '#8844cc', label: 'Board Games & Chess Night' });
+        return dots;
+      }
+
+      function isBrunchDay(dow) {
+        // Thu=4, Fri=5, Sat=6, Sun=0
+        return dow === 0 || dow === 4 || dow === 5 || dow === 6;
+      }
+
+      function render() {
+        const firstDow = new Date(viewYear, viewMonth, 1).getDay();
+        const daysInMonth = new Date(viewYear, viewMonth + 1, 0).getDate();
+
+        let html = '<div class="cal-header">';
+        html += '<button class="cal-nav-btn" id="cal-prev">&#8249;</button>';
+        html += '<span class="cal-month-label">' + MONTH_NAMES[viewMonth] + ' ' + viewYear + '</span>';
+        html += '<button class="cal-nav-btn" id="cal-next">&#8250;</button>';
+        html += '</div>';
+
+        html += '<div class="cal-grid">';
+        // Day-of-week headers
+        ['Sun','Mon','Tue','Wed','Thu','Fri','Sat'].forEach(function (d) {
+          html += '<div class="cal-dow-header">' + d + '</div>';
+        });
+
+        // Empty leading cells
+        for (let i = 0; i < firstDow; i++) {
+          html += '<div class="cal-cell cal-cell--empty"></div>';
+        }
+
+        // Day cells
+        for (let d = 1; d <= daysInMonth; d++) {
+          const dow = new Date(viewYear, viewMonth, d).getDay();
+          const isToday = (today.getFullYear() === viewYear && today.getMonth() === viewMonth && today.getDate() === d);
+          const brunch = isBrunchDay(dow);
+          const dots = getDots(viewYear, viewMonth, d);
+
+          let cls = 'cal-cell';
+          if (brunch) cls += ' cal-cell--brunch';
+          if (isToday) cls += ' cal-cell--today';
+
+          html += '<div class="' + cls + '">';
+          html += '<span class="cal-day-num">' + d + '</span>';
+          if (dots.length > 0) {
+            html += '<div class="cal-dots">';
+            dots.forEach(function (dot) {
+              html += '<span class="cal-dot" style="background:' + dot.color + '" title="' + dot.label + '"></span>';
+            });
+            html += '</div>';
+          }
+          html += '</div>';
+        }
+
+        html += '</div>'; // .cal-grid
+
+        // Legend
+        html += '<div class="cal-legend">';
+        html += '<span class="cal-legend-item"><span class="cal-dot" style="background:var(--gold)"></span> Trivia Night (Tue)</span>';
+        html += '<span class="cal-legend-item"><span class="cal-dot" style="background:#e07020"></span> Live Music (Mon &amp; Fri)</span>';
+        html += '<span class="cal-legend-item"><span class="cal-dot" style="background:#8844cc"></span> Board Games &amp; Chess (2nd Thu)</span>';
+        html += '<span class="cal-legend-item"><span class="cal-legend-brunch-swatch"></span> Brunch hours (Thu–Sun)</span>';
+        html += '</div>';
+
+        calEl.innerHTML = html;
+
+        document.getElementById('cal-prev').addEventListener('click', function () {
+          viewMonth--;
+          if (viewMonth < 0) { viewMonth = 11; viewYear--; }
+          render();
+        });
+        document.getElementById('cal-next').addEventListener('click', function () {
+          viewMonth++;
+          if (viewMonth > 11) { viewMonth = 0; viewYear++; }
+          render();
+        });
+      }
+
+      render();
+    })();
+
    /* ---- Render events ---- */
    (function () {
      const DAYS   = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
@@ -118,15 +310,12 @@
        return;
      }

-      // Sort by date ascending
      events.sort((a, b) => new Date(a.date) - new Date(b.date));

-      // Only show today and future events
      const today = new Date();
      today.setHours(0, 0, 0, 0);

      const upcoming = events.filter(e => {
-        // Parse date as local to avoid UTC-offset surprises
        const [y, m, d] = e.date.split('-').map(Number);
        const dt = new Date(y, m - 1, d);
        return dt >= today;