Responsive Web Design Tester

// Common device presets
const devices = {
  'iPhone SE': { width: 375, height: 667, dpr: 2 },
  'iPhone 14': { width: 390, height: 844, dpr: 3 },
  'iPad': { width: 768, height: 1024, dpr: 2 },
  'iPad Pro': { width: 1024, height: 1366, dpr: 2 },
  'Desktop': { width: 1920, height: 1080, dpr: 1 },
  'MacBook': { width: 1440, height: 900, dpr: 2 }
};

// Responsive tester component
class ResponsiveTester {
  constructor(container) {
    this.container = container;
    this.iframe = document.createElement('iframe');
    this.container.appendChild(this.iframe);
  }

  loadURL(url) {
    this.iframe.src = url;
  }

  setDevice(deviceName) {
    const device = devices[deviceName];
    if (!device) return;

    this.iframe.style.width = device.width + 'px';
    this.iframe.style.height = device.height + 'px';
    this.iframe.style.transform = `scale(${1 / device.dpr})`;
    this.iframe.style.transformOrigin = 'top left';
  }

  setCustomSize(width, height) {
    this.iframe.style.width = width + 'px';
    this.iframe.style.height = height + 'px';
    this.iframe.style.transform = 'none';
  }

  toggleOrientation() {
    const temp = this.iframe.style.width;
    this.iframe.style.width = this.iframe.style.height;
    this.iframe.style.height = temp;
  }
}

// Common breakpoint testing
function testBreakpoints(url) {
  const breakpoints = [320, 375, 425, 768, 1024, 1440, 1920];
  return breakpoints.map(width => ({
    width,
    type: width < 768 ? 'mobile' : width < 1024 ? 'tablet' : 'desktop',
    url: `${url}?viewport=${width}`
  }));
}

// CSS media query detector
function detectMediaQueries() {
  const styles = Array.from(document.styleSheets);
  const mediaQueries = [];

  styles.forEach(sheet => {
    try {
      Array.from(sheet.cssRules).forEach(rule => {
        if (rule instanceof CSSMediaRule) {
          mediaQueries.push(rule.conditionText);
        }
      });
    } catch (e) { /* CORS restriction */ }
  });

  return [...new Set(mediaQueries)];
}