# Interview Command Center — Dashboard Builder You've already done the hard part — the research. Now let's turn it into a personalized interview dashboard. **What you'll get:** A single HTML file you can open in any browser. Seven tabs covering every phase of your interview — from prep to follow-up. Everything saves automatically. No internet required once you have the file. **Best with:** Claude Code (VS Code extension) handles this best — the output is a large HTML file (~60KB) and Claude Code writes it directly without timing out. Claude Chat, ChatGPT Plus, and other tools work too, but may need to generate in parts (see tips below). **Important:** Use a dedicated chat for this prompt — don't combine it with the research prompt in the same conversation. If you used the Interview Research Prompt, copy that output and save it before starting a new chat here. --- I want you to build me a single-file HTML interview prep dashboard. One file — HTML, CSS, and vanilla JavaScript. No frameworks, no dependencies, no build tools. It should work by opening the file in a browser. Use Google Fonts: Poppins for headlines, Inter for body text. **Before you build anything, I need you to gather my information. Here's how:** **Step 1 — Ask me to share what I have.** Say something like: "Share everything you have for this interview and I'll work with it. This could include: a company research document, the job description, your resume, notes about your interviewers, or anything else you've gathered. Paste it all in and I'll sort through it." Parse whatever I give you and extract: company name, role title, company overview data, key people/interviewers, competitors, interview questions, job requirement mappings, culture notes — whatever is in there. **Step 2 — Ask me for the things only I would know.** Based on what I provided, identify what's missing and ask for it. You'll likely need some or all of these — ask in 1-2 batches, not one at a time: - **My full name** - **My 30-second pitch** for this specific role — or offer to draft one from my research document and resume ("I can draft a pitch based on your research and resume — want me to take a first pass, or would you rather write your own?") - **My key metrics** — the numbers that prove I'm good at what I do (e.g., "97% CSAT", "$100K billing audit savings", "150% of expansion quota") - **Salary info** — the posted range (or "unknown"), my target, and my floor - **Negotiation talking points** — 2-3 lines I might use in a salary conversation - **Interview stages/rounds** — if not already in my research document, ask: "Do you know your interview stages? (e.g., Recruiter Screen → Hiring Manager → Panel → Final)" - **Questions I want to ask them** — organized by interview round/stage. Each gets a notes field in the dashboard for capturing answers live. - **Comp-specific questions** — questions about equity, bonus structure, benefits - **Any additional behavioral/STAR questions** I want to prep beyond what's in the research document Only ask for what's genuinely missing. If my research document already covers interviewers, competitors, interview questions, etc. — don't ask again. **Step 3 — Confirm before building.** Before generating the HTML, show me a summary: "Here's what I'm building your dashboard with: [company], [role], [X interviewers], [Y interview questions], [Z talking points], salary range [range]. Ready to generate?" Wait for my confirmation. **Step 4 — Generate the dashboard.** Build the complete HTML file using the architecture below. **If the output gets cut off** (this file is large): Tell me where it stopped and I'll continue from there. Or I can generate it in two parts — tabs 1-4 first, then tabs 5-7. --- ## Layout - **Fixed header** at the top with the company name and "Role Title — My Name" as subtitle. Include a save indicator that shows "All changes saved" and flashes green briefly whenever data saves. Include a quick note button (pencil icon) in the header. - **Fixed sidebar** on the left (230px wide) with navigation organized into 3 phase groups with small uppercase labels: - **Pre-Interview Prep:** Dashboard, STAR Prep, Talking Points - **During Interview:** Questions to Ask, Live Notes - **Post-Interview:** Salary Prep, Follow-Up - Each sidebar item has an emoji icon and the active tab is highlighted. - At the bottom of the sidebar, show keyboard shortcut hints: 1-7 for tabs, N for quick note. - **Main content area** fills the remaining space to the right of the sidebar. ## Tab 1: Dashboard - **Interview Progress** — A horizontal row of pill-shaped stage indicators. Click a stage to mark it complete (turns green with checkmark). Show "Next up: [stage name]" below. - **Your Pitch** — An editable text area with a toggle button. In display mode, show the pitch in a styled blockquote with a left border accent. Click "Edit" to switch to textarea mode. Click "Done" to switch back. - **Your Numbers** — A horizontal strip of metric pills showing each key metric. - **About [Company]** — A card showing company info (founded, raised, employees, customers, product, segment) in a compact key-value format. Pull this from the research document. - **Key People** — A row of small cards, one per interviewer/key person, showing name, title, and any notes. Pull from research document. - **Competitors** — A bulleted list of competitors with their positioning. Pull from research document. ## Tab 2: STAR Prep A 3-column layout: - **Left column (260px):** Scrollable list of prep questions (combined from research document interview questions + any additional user-provided questions). Each shows a circle (empty) or checkmark (has content). Click to select. Include an "Add a question" input at the bottom. Show a "Story Bank" button that appears once 3+ questions have content. - **Center column:** The STAR editor. Shows the selected question as a heading, then 4 labeled textareas: Situation, Task, Action, Result. Each label has a colored letter badge (S, T, A, R). - **Right column (300px):** "Glance Bullets" — auto-generated bullet point summary from the STAR textareas. Extracts the first sentence from each field, plus any sentence containing a number. Max 5 bullets. Updates as you type (debounced). When empty, show an encouraging placeholder message. **Story Bank mode:** A toggle view (persisted in localStorage) that replaces the 3-column editor with a 2-column grid of cards showing all completed/partial stories with their bullet summaries. Cards with all 4 STAR fields filled get a green left border; partial ones get amber. Include a "Back to Editing" button. ## Tab 3: Talking Points A 2-column grid of cards. Each card represents one job requirement (pulled from the research document's job requirements mapping) and shows: - The requirement as an uppercase label at the top - The matching experience/proof as body text - A metric badge (green pill) at the bottom if a metric was identified - A pencil edit button in the top-right corner Clicking edit turns the proof and metric into inline input fields with a "Done" button. Edits are saved as overrides (the original data is preserved, edits are stored separately in localStorage). If the research document doesn't include job requirement mappings, show a message: "No requirement mappings found. Add your talking points manually." with an "Add Talking Point" button. ## Tab 4: Questions to Ask - A progress bar at the top showing "X of Y asked" with a visual fill bar. - Questions grouped by interview stage, each stage with a heading. - Each question is a card with: - A checkbox (marks it "asked", dims the card) - The question text (with an edit pencil to make it editable inline) - An **always-visible** notes textarea below the question text (labeled "What did they say?") — NOT collapsed behind an accordion. Always visible so notes are fast to capture during an interview. - An "Add a custom question" input at the bottom. ## Tab 5: Live Notes - A dropdown to select which interview stage you're taking notes for (options: "General Notes" plus one for each interview stage). - A large textarea for freeform notes, saved per stage. - Below: a "Quick Notes" section showing timestamped notes captured via the quick note modal, with delete buttons. ## Tab 6: Salary Prep - **Compensation Range** — Shows the posted range, plus two large input fields: "Your Target" and "Your Floor". - **Negotiation Talking Points** — A bulleted list of the negotiation lines. - **Comp Questions** — Interactive list with checkboxes and expandable notes (click to expand/collapse note area for each). - **Notes** — A general salary notes textarea. ## Tab 7: Follow-Up - An encouraging message at the top (something warm and genuine). - **Post-Interview Checklist** — Checkboxes that can be checked off. Strike-through when done. Default items: - Send thank-you email within 24 hours - Connect with interviewer on LinkedIn - Review notes and identify follow-up items - Research topics you weren't sure about - Update prep notes for next stage - **Thank-You Email Templates** — Collapsible cards, one per interviewer/stage. Each contains a pre-written template with `[PLACEHOLDER]` fields highlighted in amber. Include a "Copy to Clipboard" button. - **Follow-Up Items** — A dynamic list where you can add, check off, and delete items. - **Reflection Notes** — A textarea for post-interview reflection. - **Export** — Two buttons: "Export STAR Stories" and "Export Interview Notes". Each copies a formatted markdown summary to clipboard. ## Behaviors - **localStorage persistence:** Save ALL user state (every textarea, checkbox, edit, toggle, selected tab, selected question, stage progress, story bank mode) to localStorage with a debounced save (500ms delay). Load state on init. Use a single localStorage key with a JSON object. - **Welcome overlay:** On first use (before `welcomed` flag is set in localStorage), show a centered modal overlay explaining each section. Include a dismiss button. Only shows once. - **Quick Note modal:** Triggered by the header pencil button OR pressing N on keyboard. Shows a modal with a textarea and timestamp. When closed, the note is saved to the quick notes list with its timestamp. - **Keyboard shortcuts:** 1-7 switch tabs, N opens quick note modal, Escape closes any open modal. Only active when not focused on an input/textarea/select. - **Auto-save indicator:** The save indicator in the header briefly flashes green and shows a fun save message (rotate through 5-6 playful messages like "Saved — you've got this" or similar) whenever data saves. Returns to "All changes saved" after 2 seconds. - **Everything editable:** Pitch, talking points, questions to ask — all have inline edit capability. - **Responsive:** On screens under 900px, hide the sidebar and stack the STAR prep columns vertically. - **WCAG AA compliant:** Ensure sufficient color contrast on all text. Use semantic HTML. Include accent-color on checkboxes. ## Visual Style - Clean, minimal, professional. Light background (#FAFAFA), white cards with subtle shadows (0 2px 8px rgba(0,0,0,0.06)), 10px border radius on cards. - Use CSS custom properties for all colors so the palette is easy to change. - Color-coded left borders on cards using a 4-color semantic system (blue, green, amber, purple) to differentiate card types. - Accent color used for: active sidebar items, active states, focus borders, labels, buttons. - Sidebar items highlight with a light accent background when active. - Cards have subtle left borders in semantic colors to differentiate types. - Typography: Poppins for headings (weight 600, letter-spacing -0.02em), Inter for body (weight 400, 15px). - The overall feel should be: scannable, not overwhelming, ADHD-friendly. No walls of text. Clear visual hierarchy. Information is chunked into digestible cards. Give me back the complete HTML file — one file, ready to open in a browser. All CSS in a `