Technical Specification: Professional Video File Size Estimator

Overview

A high-performance, browser-based utility designed to help video editors, live streamers, and content creators calculate the expected output file size of a video project based on input variables like duration, bitrate, resolution, and framerate. The application must be built as a single, self-contained HTML file.

Functional Requirements

Core Calculations

• Primary Inputs:
  • Duration (Hours, Minutes, Seconds).
  • Bitrate (kbps/Mbps selector).
  • Audio Bitrate (kbps).
• Calculated Outputs:
  • Total estimated file size (Megabytes/Gigabytes).
  • Breakdown of storage usage over time (e.g., "1GB per hour").
• Feature Set:
  • Real-time calculation: Updates the result immediately upon any input change.
  • Preset Selection: Quick-select buttons for common standards (YouTube 1080p, 4K, Instagram, TikTok, Twitch).
  • Unit Toggle: Switch between MB and GB.

UI/UX Design

Aesthetic Strategy

• Color Palette: Professional SaaS aesthetic using a "Clean Light" theme.
  • Background: #f8fafc (Slate 50)
  • Cards/Containers: #ffffff (White)
  • Primary Action Color: #2563eb (Blue 600)
  • Text: #1e293b (Slate 800)
  • Borders/Inputs: #e2e8f0 (Slate 200)
• Layout Structure:
  • Header: Simple title and one-sentence subheader.
  • Main Tool Area: Two-column grid (desktop) or single-column (mobile). Left side contains settings/inputs, right side displays prominent results cards.
  • Responsiveness: Full-width container on mobile; centered, constrained-width card on desktop.

Technical Constraints & Directives

• Single File Only: All CSS and JS must be embedded within the HTML file. No external dependencies requiring build processes.
• Storage/State: STRICTLY FORBIDDEN: localStorage, sessionStorage, or cookies. Maintain all current settings and calculations in-memory within the JavaScript application instance.
• Iframe Sandboxing: The code must be compatible with a null-origin sandboxed iframe. Do not use alert(), prompt(), or confirm(). If user feedback or confirmation is needed, use custom modal/dialog components created via standard DOM elements.
• Performance: Use requestAnimationFrame for any UI updates to ensure smooth interaction.
• External Links: All links must use target="_blank" and rel="noopener noreferrer".
• No Branding: Ensure no fictional brand names are present. The UI must be purely descriptive.

UI Interactions & Animations

• Inputs: Apply a subtle box-shadow transition when inputs gain focus (box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1)).
• Results: Use a smooth opacity/scale transition for the result display when values update.
• Responsiveness: Use CSS Flexbox/Grid to collapse the two-column input/result layout into a single column at breakpoints below 768px.

SEO & Implementation Strategy

• Markup: Use semantic <main>, <section>, and <header> tags.
• Accessibility: Ensure all inputs have associated <label> tags and high contrast for readability.
• Optimization: Keep the file weight under 50kb by writing clean, modular Vanilla JS and leveraging CDN links only if necessary for icons (e.g., Lucide or FontAwesome via CDN).