Add BmMT 2026 Volunteer Guide page with tabbed navigation

[devin-ai-integration]

Summary

Adds a new Volunteer Guide page for BmMT 2026 at /events/bmmt-2026/volunteer-guide/ (alias: /volunteer-guide), consolidating content from two source documents (the BmMT 2026 Volunteer Guide PDF and the DQ Pipeline PDF) into a single web page.

The page uses a new standalone.html template that extends base.html but overrides the header and footer blocks to empty, so volunteers cannot navigate to the rest of berkeley.mt — the page is self-contained and intended to be shared via direct URL only. The TOC sidebar is also omitted from standalone pages.

The volunteer guide file lives at content/volunteer-guide.md (outside the events/ directory to avoid appearing in any events listing) and uses path = "events/bmmt-2026/volunteer-guide" in its frontmatter to achieve the nested URL. The existing bmmt-2026.md page is unchanged — it remains a regular Zola page.

Tabbed navigation

Content is organized into 6 tabs with a navigation bar styled to match berkeley.mt's nav (using ⁄ separators). Tab switching is handled by an inline switchTab() JavaScript function that toggles hidden on .tab-panel divs and updates active button styling. Deep-linking to tabs is supported via localStorage: role sub-pages (e.g. Proctors) can set localStorage.setItem('activeTab', 'disqualifications') before linking back, and the volunteer guide will auto-switch to that tab on load (one-shot, cleared after use).

Tab	Contents
General (default)	5 clickable bubble cards linking to separate role pages (Proctors, Graders, Runners, Activities, Teardown)
Check-In	Shift times/locations (with A–L / M–Z room split), "Where to Go After Role Assignment" collapsible dropdown, Key Contacts & Discord Handles table
Schedule	Intro blurb ("Please monitor Discord or live.berkeley.mt for announcements") + internal/external schedule table
Disqualifications	"People with DQ Power" list, then 3 dropdowns: For Proctors, For Crisis Managers/Proctor Managers/Satellite Managers/Dispatcher, For Scanning Room — with copy-paste buttons for warning/DQ templates and styled quote boxes for speaking scripts
Emergency Procedures	Fire, earthquake, active shooter, outages, medical emergency, missing participant — each in its own collapsible <details> dropdown
Directory	Placeholder ("coming soon") — content to be provided later

The Check-In tab uses Zola {% details %} shortcodes (which process markdown in the body). The Disqualifications and Emergency Procedures tabs use inline HTML <details> elements because their content lives inside HTML <div> tab panels where markdown is not processed.

General tab — bubble cards linking to role pages

The General tab (default) displays 5 clickable cards across two rows, styled with custom background colors from a provided palette:

Row 1 (3 cards):

• Proctors (#c5e0d8 mint) — links to proctor scripts page
• Graders (#8ec6d6 light blue) — Puzzle Round grading, Atomic Grader info
• Runners (#2d5a73 dark navy, white text) — material transport, shift reporting

Row 2 (2 cards, full-width row):

• Activities (#d6e0f0 lavender) — post-competition events & games
• Teardown (#7badc4 medium blue) — end-of-day cleanup & wrap-up

Each card links to its own standalone page (e.g. /events/bmmt-2026/volunteer-guide/proctors/) with a "← Back to Volunteer Guide" link at the top. The 5 role pages are stored as separate markdown files (content/volunteer-guide-{proctors,graders,runners,activities,teardown}.md) using path= frontmatter for nested URLs, all using the standalone.html template.

Proctors page — 3 expandable proctor script cards

The Proctors page (/events/bmmt-2026/volunteer-guide/proctors/) has been restructured to display 3 bubble cards in a grid-cols-3 layout, each expanding into a full proctor script panel when clicked:

Card	Color	Contents
Morning Script	#c5e0d8 mint	Puzzle Round + Individual Round procedures (Dwinelle, Wheeler, VLSB classrooms)
Afternoon Script	#8ec6d6 light blue	Team Round + Relay Round procedures
Pauley Script	#2d5a73 dark navy, white text	All rounds — Pauley Ballroom-specific instructions (section-based monitoring with Head Proctor)

Each panel contains the full script extracted from the corresponding FROZEN PDF:

• Contacts table with building/role/Discord handle
• Swire login instructions
• Proctor FAQs and Student FAQs (including a suspicious behavior FAQ — see below)
• Round-by-round procedures with styled quote boxes (blue left-border blockquotes) for announcements proctors read aloud
• Red warning callout boxes for "Do NOT continue until instructed" checkpoints
• Material collection/counting procedures

A toggleScript() JavaScript function handles expand/collapse: clicking a card shows its panel and collapses any other open panel, with a chevron icon rotation animation.

Activities page — room/description tables

The Activities page (/events/bmmt-2026/volunteer-guide/activities/) displays two HTML tables sourced from the FROZEN Activities Reference Sheet PDF:

• Student Activities table (7 rows): Time Mix-up Puzzle Hunt, Float Your Boat, Cal Origami, Mathematician Mash, Estimathon, Plank Countdown, Games Lounge — with columns for Activity, Room, and Description (no contact names per user request)
• Parent & Coach Activities table (3 rows): Parent Talk, Parent Tours, Parent Lounge

The page also includes a note at the top directing volunteers to @jeslyn in Discord if interested in helping with activities.

Teardown page — full timeline

The Teardown page (/events/bmmt-2026/volunteer-guide/teardown/) contains the complete teardown timeline sourced from the FROZEN BmMT 2026 Teardown Doc PDF, organized into 5 chronological sections:

1. End of Relay (~3:30 PM) — teardown manager announcement, proctor post-relay tasks
2. During Activities (~3:40 PM) — room checklist (trash, desks, projector, wipe down, photo to Discord), hallway signage removal, Satellite Ops HQ cleanup
3. End of Activities / During Awards (~5:00 PM) — Dwinelle activities rooms, DWIN 211 cleanup
4. End of Awards — auditorium teardown coordination, group photo timing
5. After Group Photo — Pauley teardown, Ops Corridor cleanup, UHaul loading

Suspicious behavior FAQ in proctor scripts

A new FAQ item was added to the Proctor FAQs section in all 3 proctor script panels:

What if I notice suspicious behavior (e.g. cheating)?
Report it immediately in your building's Discord proctor channel. Do not confront the student yourself. See the Disqualifications tab on the Volunteer Guide for the full pipeline and instructions.

The "Disqualifications tab" text links back to the main volunteer guide with localStorage.setItem('activeTab','disqualifications') so it auto-opens the correct tab. The Morning/Afternoon scripts reference #dwinelle-proctors, #wheeler-proctors, or #vlsb-proctors; the Pauley script references #pauley-proctors.

Disqualifications tab

Restructured to match the FROZEN DQ Pipeline PDF:

• People with DQ Power: Displayed as a visible list (not inside a dropdown) — Crisis Managers, Proctor Managers, Satellite Managers, Dispatcher
• 3 dropdowns:
  1. For Proctors — steps 1–5: immediate DQs, warning-based DQs, how to give warnings, warning template (with Copy button), escalation to PMs
  2. For Crisis Managers, Proctor Managers, Satellite Managers, Dispatcher — steps 6–12: chain of command, cheating vs. slurs/harm/disruption handling, DQ template (with Copy button), post-testing email
  3. For Scanning Room — table of DQ reasons and score consequences
• Styled quote boxes for speaking scripts (blue left-border blockquote style, text-base)
• Indented copy template boxes (ml-8) aligned within the numbered list context
• Copy buttons use navigator.clipboard (requires HTTPS)

base.html changes

The mobile menu (#mobile-menu div) and hamburger button (#mobile-menu-btn) were moved inside the {% block header %} block. This allows standalone.html to remove them by overriding the header block to empty. Both elements are fixed positioned, so moving them inside the max-w-4xl container does not affect their rendering on regular pages.

New templates, shortcodes & content files

File	Purpose
standalone.html	Extends base.html with empty header and footer blocks — no nav, mobile menu, footer, or TOC sidebar
details.html	Collapsible accordion section using native <details>/<summary> with Tailwind styling and animated chevron
copyable.html	Reusable styled text block with a "Copy" button (uses navigator.clipboard API). Included for future reuse but not used in the volunteer guide itself (inline HTML used instead due to Zola not supporting nested shortcodes)
volunteer-guide-proctors.md	Standalone proctor scripts page with 3 expandable script cards (Morning, Afternoon, Pauley) + suspicious behavior FAQ in all 3 panels
volunteer-guide-graders.md	Standalone grader info page with back button
volunteer-guide-runners.md	Standalone runner info page with back button
volunteer-guide-activities.md	Standalone activities page with Student and Parent/Coach tables (rooms + descriptions, no names) and @jeslyn Discord note
volunteer-guide-teardown.md	Standalone teardown timeline page sourced from FROZEN Teardown Doc PDF

Review & Testing Checklist for Human

• Proctor script content accuracy (Morning): The Morning script was transcribed from the FROZEN Morning Proctor Script PDF. Verify round procedures, timing announcements, material distribution steps, and read-aloud announcements match the source PDF exactly. Pay special attention to the envelope counting / # Teams / # Envelopes verification steps.
• Proctor script content accuracy (Afternoon): The Afternoon script covers Team Round and Relay Round. The Relay Round has a complex format (3 sets × 10 min, students pass answers in sequence). Verify the relay procedures, set distribution, and inter-set collection steps match the source PDF.
• Proctor script content accuracy (Pauley): The Pauley script describes a section-based monitoring model with a Head Proctor. Verify it matches the FROZEN Pauley Auditorium Script PDF. The Pauley sections are shorter/higher-level than Morning/Afternoon — confirm this is intentional in the source.
• Activities table content accuracy: Verify room numbers and descriptions in both the Student Activities and Parent & Coach Activities tables match the FROZEN Activities Reference Sheet PDF. In particular, check overflow room designations (e.g. DWIN 105 as overflow for Float Your Boat, DWIN 183/189 as overflow for Plank Countdown).
• Teardown timeline accuracy: The teardown page was transcribed from the FROZEN Teardown Doc PDF. Verify the timeline phases, room lists (especially the Dwinelle activities rooms list: 182, 183, 187, 189, 109, 106, 105, 246, 247, 258), and specific instructions match the source.
• Suspicious behavior FAQ wording: This FAQ was written by the developer (not copied verbatim from a PDF). Verify the wording is appropriate — especially the instruction to "not confront the student yourself" and the Discord channel names (#dwinelle-proctors, #wheeler-proctors, #vlsb-proctors, #pauley-proctors).
• Mobile menu regression on regular pages: The mobile menu and hamburger button were moved inside {% block header %} in base.html. Verify mobile nav still works on regular pages (e.g. homepage).
• 3-column card grid on mobile: The Proctors page uses grid-cols-3 for the 3 script cards. On narrow viewports, these cards may become too small to read. Consider whether grid-cols-1 md:grid-cols-3 would be more appropriate.

Suggested test plan: Open /events/bmmt-2026/volunteer-guide/. Verify no nav/footer/TOC visible. Click each bubble card (Proctors, Graders, Runners, Activities, Teardown) and verify each opens its standalone page. On the Proctors page, expand each of the 3 script cards and spot-check content against source PDFs — particularly the new suspicious behavior FAQ. Click the "Disqualifications tab" link in the FAQ and verify it navigates back to the volunteer guide with the Disqualifications tab auto-selected. On the Activities page, verify tables show correct rooms/descriptions and the @jeslyn note is visible at top. On the Teardown page, verify the timeline matches the source PDF. Test on a narrow viewport. On a regular page (e.g. homepage), verify mobile hamburger menu still works.

Notes

• The old /bmmt-2026-volunteer-guide URL is not aliased — links to that path will 404.
• The volunteer guide and role page files all live at content/volunteer-guide*.md rather than content/events/ to prevent them from appearing in any events listing. The path= frontmatter controls URLs independently of file location.
• Tab deep-linking uses localStorage (one-shot: key is removed after use). This means if a user navigates directly to the volunteer guide, no unexpected tab switch occurs — it only activates when arriving from a link that explicitly sets the key.
• Directory tab still shows "coming soon": Content to be provided later.
• Dead shortcode file: templates/shortcodes/copyable.html is included but unused in this PR. Decide whether to keep it for future use or remove it.
• Swire credentials in proctor scripts: The scripts include the Swire proctor login password (benjimt26). This is intentional — it's needed by proctors on the day of the event — but be aware this is publicly visible on the deployed page.

Link to Devin session: https://app.devin.ai/sessions/5622665685a34704b136739346b9700d

---

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[devin-ai-integration]

Testing Results

Ran the volunteer guide page locally (zola serve) and tested end-to-end. Devin session

Feature Tests (4/4 passed)

• Page structure — Title renders as "BmMT 2026 / Volunteer Guide" (two lines), date shows "Sunday, April 12, 2026", TOC sidebar shows all 7 category headings. All 17 collapsible sections present and collapsed by default.
• Expand/collapse — Clicking "Check-in Times & Locations" expands content with shift details and rotates chevron. Clicking again collapses and returns chevron to right-pointing.
• Content accuracy — Schedule table times match source PDF (e.g. Check-in 7:30–9:00 / 7:45–9:00, Awards 5:00–6:30 / 5:00–6:00). DQ Score Consequences table has 3 correct rows. DQ Reporting Templates show two formatted code blocks.
• Mobile responsiveness — At 400px viewport, dropdowns remain functional, tables fit within viewport, text is readable, hamburger menu visible.

[devin-ai-integration]

Updated Testing Results (Post-Standalone Changes)

Retested locally after converting to standalone template, adding copy buttons, and DQ handler note. Devin session

Feature Tests (3/3 passed)

• Standalone page — No navbar, header, or footer visible. Title "BmMT 2026 Volunteer Guide" renders on a single line. Page is fully self-contained with no links to the rest of berkeley.mt.
• Copy buttons — Warning Template and DQ Template display in styled white boxes with gray borders and "Copy" buttons (not black code blocks). Built HTML contains correct navigator.clipboard.writeText() calls. Note: Clipboard API requires HTTPS (secure context) — will work on the production/preview deployment but not on plain HTTP.
• DQ handler note — Text before the DQ Template reads: "Only people listed in the 'DQ Overview & Who Handles DQs' dropdown above (Crisis Managers, Proctor Managers, Satellite Managers, Dispatcher) may send these in."

Escalation: Copy button runtime untested on HTTP

The navigator.clipboard.writeText() API requires a secure context (HTTPS or localhost). The dev server binds to 0.0.0.0 which Chrome does not treat as secure, so the "Copied!" feedback could not be triggered locally. The copy buttons will work on the HTTPS preview deployment (pr-76.berkeley-mt.pages.dev) and production (berkeley.mt). Please verify on the preview URL.

[devin-ai-integration]

Testing Results (URL Restructuring)

Retested locally after nesting volunteer guide in content/events/bmmt-2026/ folder structure. Devin session

URL Path Tests (5/5 passed)

• Primary URL — /events/bmmt-2026/volunteer-guide/ loads correctly with title "BmMT 2026 Volunteer Guide", standalone layout, all collapsible sections
• /volunteer-guide alias — Redirects to /events/bmmt-2026/volunteer-guide/ correctly
• Old URL removed — /bmmt-2026-volunteer-guide/ returns 404 as expected
• Event page regression — /events/bmmt-2026/ renders correctly as a section with title "Berkeley mini Math Tournament 2026", date, content, TOC sidebar, schedule table
• Nav link — "BmMT 2026" nav link is bold/active on the event page, points to correct URL

[oliver-ni]

can we share code between this and templates/base.html somehow

[devin-ai-integration]

Good call — refactored standalone.html to extend base.html with empty {% block header %} and {% block footer %} overrides instead of duplicating the <head> section. Pushed in the next commit.

[oliver-ni]

what's the point of this template?

[devin-ai-integration]

Moving bmmt-2026.md (a page) into bmmt-2026/_index.md (a section) to create the nested folder structure changed the Zola content type. Sections have different frontmatter than pages — notably date isn't a valid section field, and the default section.html template:

1. Uses section.title instead of page.title
2. Doesn't display a date
3. Appends a section_listing macro at the bottom (which would show the volunteer guide as a child page link)

This template renders the section identically to how it looked as a page — title, date (from extra.date), prose content, and TOC sidebar, without the child page listing.

That said, if you'd prefer a different approach (e.g. just using the default section.html and accepting the differences, or restructuring differently), happy to change it.

[oliver-ni]

i feel like bmmt 2026 should stay a page. is it not possible to have a page in a page

[devin-ai-integration]

Good call — reverted this. bmmt-2026 is back to a regular page (content/events/bmmt-2026.md), and the volunteer guide uses path = "events/bmmt-2026/volunteer-guide" in its frontmatter to get the nested URL. Deleted event-section.html since it's no longer needed.

[oliver-ni]

i mean i don't want it to show up in the events list

[devin-ai-integration]

Moved the file to content/volunteer-guide.md (out of content/events/) so it won't appear in any events listing. The URL is still /events/bmmt-2026/volunteer-guide/ via path= in the frontmatter.

[oliver-ni]

add /vg as an alias

[devin-ai-integration]

@oliver-ni Done — added /vg as an alias alongside /volunteer-guide (commit 3e4710a).

[devin-ai-integration]

Devin Review found 2 potential issues.

View 4 additional findings in Devin Review.