From c150bce28e3b4420c956cb0a7a93a08d93d47f27 Mon Sep 17 00:00:00 2001 From: Zac Gaetano Date: Wed, 13 May 2026 00:18:55 -0400 Subject: [PATCH] docs: interactive HTML preview of the redesigned MainWindow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit docs/preview/redesigned-mainwindow.html — a single-file faithful rendering of the redesigned MainWindow at 1280×780 fidelity. Built so you can SEE the redesign tomorrow morning even with the WinUI 3 activation issue unresolved. What's interactive: * Title-bar sun/moon icon toggles dark <-> light. The full CSS variable set swaps in-place; both themes are accurate to DESIGN.md's token table (Wild Dragon cyan stays as the surface fill in both; accent.cyan for text darkens to #0E7C82 on the light palette for AA contrast). * Rail "settings" icon (the gear) slides the settings drawer in from the right with a 220ms ease-out-quart transition. * Esc dismisses the drawer. * Banner "Toggle dark / light" and "Open settings" buttons for hover-discoverable parity. What's faithful to the WinUI 3 implementation: * All structural decisions from the shape brief: 64px rail, 44px title bar with absorbed live pills (live · 00:14:32 / rec 3 / 482GB free), section header with primary button + secondary actions, 64px table rows with avatar+name, signal+lock dot, audio meter, output-name in mono, ISO pill at right, conditional in-call control bar, slim 32px status bar. * Active-speaker row (Maya) has the cyan left border + cyan-muted background tint, matching the data trigger in MainWindow.xaml. * Wild Dragon brand mark in the rail uses the same cyan-muted square + cyan-text "W" treatment as the WinUI 3 Avatar style. * In-call buttons use the destructive style for Muted + Leave (coral border and text) and Secondary for Camera / Share / Marker, mirroring the button-hierarchy commitment from DESIGN.md. * Settings drawer shows the Appearance tab with the System / Dark / Light radio group + the accent peek panel. Open it in any modern browser: file:///C:/Users/zacga/Documents/Claude/Projects/Teams%20ISO/docs/preview/redesigned-mainwindow.html This is documentation; the actual product is the WinUI 3 XAML in src/TeamsISO.App.WinUI/. Once activation unblocks, the preview can be deleted (or kept for future stakeholder demos before binaries ship). --- docs/preview/redesigned-mainwindow.html | 789 ++++++++++++++++++++++++ 1 file changed, 789 insertions(+) create mode 100644 docs/preview/redesigned-mainwindow.html diff --git a/docs/preview/redesigned-mainwindow.html b/docs/preview/redesigned-mainwindow.html new file mode 100644 index 0000000..a2e7558 --- /dev/null +++ b/docs/preview/redesigned-mainwindow.html @@ -0,0 +1,789 @@ + + + + +TeamsISO — redesigned MainWindow preview + + + +
+
+
+ TeamsISO redesign — interactive preview +  The same XAML that's in src/TeamsISO.App.WinUI/Views/MainWindow.xaml, rendered as HTML so you can see and toggle it before the WinUI 3 .exe activation issue is resolved. +
+
+ + +
+
+ +
+ +
+
+ +
+ + + + +
+ +
+ + +
+ +
+
+ TeamsISO + v1.0.0-alpha +
+
+
+
live · 00:14:32
+
rec 3 · 00:11:08
+
482 GB free
+
+ + + + +
+ + +
+
+ Participants + 4 +
+
+
+ + + + +
+
+ + +
+
+
+
Participant
+
Signal
+
Audio
+
Output name
+
ISO
+
+ +
+
+
MA
+
Maya Rodriguez
MS Teams · 1920×1080 · 30fps
+
locked
+
+
+ + + + + + + + + +
+
+
TEAMSISO_maya
+
LIVE
+
+ +
+
DC
+
Daniel Chen
MS Teams · 1280×720 · 30fps
+
locked
+
+
+ + + + + + + + + +
+
+
TEAMSISO_daniel
+
LIVE
+
+ +
+
AK
+
Aïcha Koné
MS Teams · 1920×1080 · 30fps
+
degraded
+
+
+ + + + +
+
+
TEAMSISO_aicha
+
OFF
+
+ +
+
SP
+
Sam Park
MS Teams · 1920×1080 · 30fps
+
locked
+
+
+ + + + + + +
+
+
TEAMSISO_sam
+
LIVE
+
+
+ + +
+ In-call + + + + + + +
+ + +
+
+
+ control surface · 127.0.0.1:9755 +
+
F1 help · Ctrl+M marker · Ctrl+Shift+S panic · Ctrl+K command palette
+
+ + +
+
+
Settings
+ +
+
+ + + + + +
+
+

Appearance

+

Dark is the default for the 1:50am operator scene; light is for daytime production. System follows the Windows app-mode preference.

+
+ + + +
+

Accent peek

+

These accents work in both themes. Cyan stays bright as a surface fill (text on top is near-black regardless). For inline text on light, the palette substitutes a darker cyan automatically.

+
+
Cyan
+
Coral
+
Live
+
Warn
+
+
+
+ + +
+
+
+
+
+ + + +