Free Online Monitor Dead Pixel & Screen Health Tester

Overview

A high-performance, browser-based utility designed to help users identify display irregularities such as dead pixels, stuck pixels, and backlight bleeding. The application provides a series of full-screen color cycles and patterns in a clean, user-friendly interface.

Technical Specification

• Architecture: Single-file HTML5/Vanilla JS implementation.
• Constraint Compliance:
  • Zero usage of localStorage, sessionStorage, or cookies.
  • No external tracking or analytics scripts.
  • Strictly sandboxed iframe compatible.
  • No usage of alert() or prompt(); all UI interactions must be handled via DOM overlays.

Feature List

1. Full-Screen Canvas: Utilizes the Browser Fullscreen API to eliminate browser UI elements during testing.
2. Manual & Auto Cycling: Allow users to manually click through colors (Red, Green, Blue, White, Black) or enable a timed automatic cycle.
3. Pattern Overlays: Additional grids and gradients to help detect subtle backlight bleeding or uniform color inconsistencies.
4. Instructional Overlay: A non-intrusive modal explaining how to detect pixels effectively before the test begins.
5. Exit Handling: Explicit keyboard (ESC) and on-screen button prompts for exiting full-screen mode.

UI Layout

• Header: Minimalist top navigation with title and a "How it Works" info trigger.
• Main Dashboard: A large, clean hero section with a primary "Start Test" button.
• Test Environment (Fullscreen Overlay):
  • A centered navigation control visible only on hover or at the bottom edge.
  • Color selection tiles.
  • Progress indicators for auto-cycling.

Color Palette (Light-Mode Only)

• Primary: Slate-900 (Text), Indigo-600 (Primary Action Buttons).
• Background: White (#FFFFFF) with subtle Gray-50 gradients.
• Accents: Cyan-100 (Button hover states), Red-500/Green-500/Blue-500 (Used during the actual testing canvas to ensure pure color reproduction).

Interaction Design

• Smooth Transitions: Use CSS opacity and transform transitions for opening/closing the full-screen test mode.
• Micro-interactions: Subtle hover effects on UI buttons using Tailwind CSS utility classes.
• Fullscreen Logic: Request fullscreen on container click. Use document.fullscreenElement check to conditionally render the UI interface (hiding the UI when fullscreen is active to avoid interface pixel interference).

Development Directives

• Use Tailwind CSS (via CDN) for styling.
• Ensure high contrast in the UI navigation.
• When in testing mode, the body background must be strictly the selected color code (e.g., #FF0000 for Red) with zero padding or margin to ensure no artifacts exist.