A premium SaaS-style wizard tool that helps senior GRC engineers and tech professionals negotiate $150K–$250K+ compensation packages. The simulator calculates your leverage score and generates tailored negotiation emails — no AI required, just smart templates and proven strategies.

• Features
• Quick Start
• How It Works
• The Four Steps
• Leverage Score Explained
• Email Generation
• Phrase Bank
• Customization
• Browser Support
• Accessibility
• Project Structure
• Tech Stack
• Development
• License

• 4-Step Wizard Flow — Intuitive step-by-step process from offer details to final email
• Leverage Score Calculator — Quantifies your negotiation power on a 0-100 scale
• Smart Email Generator — Creates professionally-toned negotiation emails
• Copy-to-Clipboard — One-click copying for emails and individual phrases
• Hash-Based Routing — Bookmarkable URLs for each step (#step1, #step2, etc.)

• Nexus Dark Mode — Premium dark theme as default
• Light Mode Toggle — Seamless light/dark theme switching
• Satoshi + Instrument Serif Typography — Distinctive Fontshare font pairing
• Animated SVG Gauge — Smooth circular progress visualization
• Smooth Transitions — Fade + slide animations between steps (300ms)
• Responsive Layout — Mobile-first, optimized for 375px to 1280px+

• Form Validation — Prevents advancing without required fields
• Salary Formatting — Automatic comma formatting on blur
• Conditional Fields — Competing offer field appears contextually
• Progress Indicator — Visual progress bar with percentage fill
• Accordion Phrase Bank — Expandable sections with copyable chips
• Persistent Theme — Respects system prefers-color-scheme preference

# Simply open the HTML file in your browser
open offer-negotiation-simulator.html
# or on Windows
start offer-negotiation-simulator.html

# Using Python
python -m http.server 8000

# Using Node.js
npx serve .

# Using PHP
php -S localhost:8000

Then visit http://localhost:8000

The Offer Negotiation Simulator guides you through a structured 4-step process:

1. Enter Your Offer Details — Company, role, salary, bonuses, equity, location
2. Assess Your Situation — Current salary, walk-away minimum, target, employment status
3. Calibrate Your Tone — Choose between Collaborative, Confident, or Diplomatic approaches
4. Get Your Results — Leverage score visualization + tailored negotiation email

Collects the compensation package being offered:

Assesses your negotiation leverage:

Sets the email tone and context:

Tone Descriptions:

• Collaborative & Warm — Best when you love the company and don't want to risk the relationship
• Confident & Direct — Best when you have leverage or a competing offer
• Diplomatic & Strategic — Best for ambiguous situations or first offers from dream companies

Displays your leverage analysis and generated email:

• Leverage Score Card — Animated circular gauge (0-100) with breakdown
• Negotiation Email — Professionally formatted with subject line
• Phrase Bank — Copyable opening softeners, anchoring phrases, and closing bridges

The leverage score (0-100) is calculated based on seven factors:

Score Labels:

The generated email follows a proven structure:

1. Subject Line — Concise, professional negotiation subject
2. Salutation — Personalized to the company/recruiter
3. Opening — Expresses enthusiasm (uses Opening Softeners)
4. Body — References market data, leverage points, and specific offers
5. Closing — Professional bridge to next steps (uses Closing Bridges)

Required Phrases (integrated naturally):

• "directionally aligned"
• "get creative"
• "competitive with market"
• "excited about the opportunity"

Tone Adjustments:

• Collaborative — More "we" language, relationship-focused
• Confident — Direct statements, confident framing
• Diplomatic — Strategic language, carefully hedged

Three collapsible accordion sections with copyable phrase chips:

Polite phrases to express enthusiasm without committing:

• "I'm very excited about this opportunity..."
• "First, I want to say how much I'm looking forward to..."
• "I appreciate you sharing these details with me..."
• "Thank you for this offer — I'm genuinely thrilled..."
• "I wanted to start by expressing my enthusiasm for..."

Data-driven statements to establish your value:

• "Based on my research and market data..."
• "Given my experience and the current market for..."
• "Considering my track record with..."
• "According to industry benchmarks for..."
• "My research indicates that similar roles in..."

Professional transitions to continued negotiation:

• "I'm confident we can find a number that works for both sides..."
• "I hope we can continue the conversation about..."
• "I'm looking forward to finding a creative solution..."
• "I'd love to explore how we might make this work..."
• "I believe there's a path forward that benefits everyone..."

Edit the CSS custom properties in :root:

:root {
  --bg-primary: #0A0A0B;
  --bg-surface: #111113;
  --bg-elevated: #1A1A1D;
  --text-primary: #FAFAFA;
  --text-secondary: #A1A1AA;
  --accent-primary: #14B8A6;
  /* ... more variables */
}

Fonts are loaded from Fontshare CDN. To change:

1. Update the Google Fonts link in <head>
2. Modify --font-body and --font-display in CSS

Edit the calculateLeverage() function in JavaScript:

function calculateLeverage(data) {
  let score = 0;
  // Adjust scoring logic here
  return Math.min(100, Math.max(0, score));
}

Edit the template strings in the email generation section:

const emailTemplates = {
  collaborative: `...`,
  confident: `...`,
  diplomatic: `...`
};

This app follows WCAG AA guidelines:

• Color Contrast — All text meets 4.5:1 contrast ratio minimum
• Focus States — Visible focus indicators on all interactive elements
• Form Labels — All inputs have associated labels
• ARIA Attributes — Proper roles and labels for screen readers
• Keyboard Navigation — Full keyboard operability
• Semantic HTML — Proper heading hierarchy and landmark regions

Offer Negotiation Simulator/
├── .gitignore              # Git ignore rules
├── SPEC.md                 # Detailed specification document
├── README.md               # This file
├── package.json            # Node.js dependencies (for testing)
└── offer-negotiation-simulator.html  # The complete application (single file)

No frameworks, no build tools, no dependencies to install.

# Clone the repository
git clone https://github.com/AnandSundar/Offer-Negotiation-Simulator.git
cd Offer-Negotiation-Simulator

# Start a local server
python -m http.server 8000
# or
npx serve .

# Open in browser
open http://localhost:8000

Simply open offer-negotiation-simulator.html in different browsers and devices. Test:

• All form inputs accept and validate correctly
• Navigation between all steps works
• Theme toggle switches correctly
• Copy-to-clipboard functions work
• Accordion expand/collapse animations smooth
• Responsive breakpoints display correctly

Since this is a single HTML file, deployment options include:

1. GitHub Pages — Push to gh-pages branch
2. Netlify Drop — Drag and drop the folder
3. Vercel — vercel deploy
4. Any static host — S3, Cloudflare Pages, etc.

MIT License — feel free to use, modify, and distribute.

Built for negotiators who know their worth.