Technical Specification: Free YouTube Sponsorship Rate Calculator & Earnings Estimator

Overview

A clean, professional, single-file browser tool that allows content creators to model and compare two common sponsorship pricing models: Flat Rate and Performance-based (View Tiered) pricing. The tool will provide visual comparisons and clear revenue projections.

Core Features

1. Dynamic Input Panel
   • Average Views: Input field for historical average views.
   • Base CPM: Input field for the desired Cost Per Mille (rate per 1,000 views).
   • Production Fee: A fixed fee for creative time/labor.
   • Tier Settings: Inputs for defining view tiers (e.g., 0-10k views, 10k-50k views, 50k+ views) with corresponding CPM multipliers.
2. Results Dashboard
   • Comparison Table: Side-by-side view of total revenue for Flat Rate vs. Tiered Rate.
   • Visual Chart: A real-time chart (using a lightweight library like Chart.js via CDN) showing revenue curves for both methods.
   • "Suggested Rate" Summary: A breakdown highlighting the most lucrative option based on the input metrics.
3. Educational Tooltips: Hoverable definitions for industry terms like CPM, CPV, and Engagement Rate.

UI/UX Design Requirements

• Aesthetic: Professional SaaS interface. Clean white backgrounds, slate gray typography, and vibrant primary action buttons (e.g., Indigo or Emerald).
• Responsiveness: Single-column layout on mobile, expanding to a dual-pane desktop view (Inputs on left, Results/Charts on right).
• Interaction: Smooth CSS transitions for input changes and chart updates. No page reloads.
• Accessibility: High contrast ratios for all text, readable font sizes (16px minimum), and keyboard-navigable inputs.

Developer Directives (CRITICAL)

• Architecture: One single .html file containing internal <style> and <script> tags.
• Storage Constraints: ABSOLUTELY NO localStorage, sessionStorage, IndexedDB, or cookies. Maintain all data in a plain JS object in memory.
• Dependencies: Use CDNs only for essential libraries (e.g., chart.js for visualization, tailwind.css for styling).
• Iframe Safe: Do not use alert(), prompt(), or confirm(). Create custom CSS modals if confirmation is needed.
• Links: All external links must have target="_blank" and rel="noopener noreferrer".
• No Dark Mode: Force a light-mode color palette. Do not implement toggles.

Suggested Color Palette

• Primary Background: #FFFFFF
• Surface/Card Background: #F8FAFC
• Primary Action (Buttons): #4F46E5 (Indigo)
• Text Primary: #1E293B (Slate)
• Text Secondary: #64748B (Slate)
• Borders: #E2E8F0

Implementation Steps

1. Setup: Create a responsive grid layout using Tailwind CSS.
2. State Management: Create a central state object that updates when input fields change (oninput events).
3. Logic: Implement a calculate() function that triggers on every update to recalculate the view-tier pricing and update the chart data.
4. Visualization: Initialize the Chart.js canvas object once; use chart.update() when inputs change.
5. Cleanup: Ensure no data persistence code exists.