Landing Page Checklist

WHAT IT DOES Provides a structured quality assurance checklist for landing page creation and optimization. The script displays a comprehensive checklist with built-in conversion-focused QA steps including Headline Clear, Subheadline Present, Call-to-Action Visible, Form Above Fold, Social Proof Included, Mobile Responsive, Page Load Speed < 3s, SEO Meta Tags Set, Analytics Tracking Active, and A/B Testing Configured. Each step can be marked complete, and the system tracks when each step was completed with timestamps. You can add notes to any step, add custom steps, and track overall progress with a percentage indicator and visual progress bar. The checklist is saved per page URL or custom project identifier, ensuring continuity across sessions. WHERE IT RUNS Works on all websites (match pattern *://*/*), making it perfect for marketing teams, conversion rate optimization specialists, web designers, and developers creating landing pages. Each landing page or project gets its own independent checklist, allowing you to manage QA for multiple pages simultaneously. The checklist state is saved per page identifier, ensuring continuity across sessions and page reloads. HOW TO USE Install the script and the landing page checklist appears in the panel. The current page URL is automatically displayed for reference. Enter a custom page identifier to associate the checklist with a specific project or landing page. Work through the QA steps in order, checking items off as you complete them. Add notes to any step to capture important details like test results, observations, or action items. Click "Add Step" to add custom steps for your specific QA requirements. The progress bar updates in real-time showing completion percentage. View timestamps to see when each step was completed, helping with QA audit trails. Use the actions buttons to reset the checklist, complete all steps, or clear completed steps. The script saves your progress automatically as you work. REAL MECHANISM: PAGE-KEYED PERSISTENCE WITH TIMESTAMP LOGGING AND CELEBRATION ENGINE This script uses a page-based storage architecture where each landing page or project gets its own isolated checklist state. The getPageId() function retrieves the current page identifier from GM_setValue or defaults to the current URL pathname. Data is stored using GM_setValue with a key format of "landing_checklist_" plus the page ID, ensuring data isolation between pages. The data structure includes a steps array where each step has an id, text, completed boolean, completedAt timestamp, and notes string, along with a url property storing the page URL. When a checkbox is toggled, the completedAt property is set to Date.now() if checked or null if unchecked, providing precise audit logging for QA timelines. The renderChecklist() function calculates progress using filter() and length, then renders each step as a flex row with a checkbox, text container, optional timestamp display, and delete button. Timestamps are formatted using toLocaleString() for human-readable display. Notes fields are rendered as input elements that persist notes on blur events. The celebration engine triggers when all steps are completed and celebrationEnabled is true, creating 20 animated emoji elements (including 🚀 for launch) with randomized positions, font sizes (16-36px), and animation durations (2-5 seconds) using CSS keyframes, with automatic cleanup after 4 seconds. All operations are reactive, with automatic persistence and UI updates through saveLandingData() and re-render. THE PANEL Drag the panel anywhere on screen by clicking and holding the header. It snaps to screen edges when released. Collapse it to a small bubble by clicking the minimize button, and expand it back by clicking the bubble. Resize the panel from any corner. Press Escape to close the configuration panel. Your position and size preferences are saved automatically per site. PLEASE NOTE This script requires the free BotGentz browser extension which provides the BGPanel framework and storage APIs. All data (steps, notes, timestamps, and page identifiers) is stored locally in your browser using GM_setValue and never sent anywhere. No analytics, no tracking, no external calls. The script only reads the current page URL and identifier to isolate checklists and never accesses user data, passwords, or sensitive information. Checklists are saved per page identifier, so ensure you enter a unique identifier for each landing page or project you QA.