`public/test-mobile-responsive.html`

233 lines
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>US-009 Mobile Responsive Test</title>
    <link rel="stylesheet" href="/css/activity-links.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            padding: 20px;
            background: #f5f5f5;
            max-width: 1200px;
            margin: 0 auto;
        }
        .test-section {
            background: white;
            padding: 20px;
            margin-bottom: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        h1 {
            color: #333;
            margin-bottom: 10px;
        }
        h2 {
            color: #667eea;
            margin-top: 0;
            margin-bottom: 15px;
        }
        .info {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #2196f3;
        }
        .viewport-indicator {
            position: fixed;
            top: 10px;
            right: 10px;
            background: #667eea;
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: bold;
            z-index: 1000;
            font-size: 14px;
        }
        .acceptance-criteria {
            background: #f9fbe7;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            border-left: 4px solid #cddc39;
        }
        .acceptance-criteria h3 {
            margin-top: 0;
            color: #827717;
        }
        .acceptance-criteria ul {
            margin: 0;
            padding-left: 20px;
        }
        .acceptance-criteria li {
            margin: 8px 0;
            color: #555;
        }
        .touch-target-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(44px, 44px));
            gap: 2px;
            background: #ffebee;
            padding: 10px;
            border-radius: 8px;
            margin: 10px 0;
        }
        .touch-target-cell {
            width: 44px;
            height: 44px;
            background: #ffcdd2;
            border: 1px solid #ef5350;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: #c62828;
        }
        .verification-checklist {
            background: #e8f5e9;
            padding: 15px;
            border-radius: 8px;
            border-left: 4px solid #4caf50;
        }
        .verification-checklist h3 {
            margin-top: 0;
            color: #2e7d32;
        }
    </style>
</head>
<body>
    <div class="viewport-indicator" id="viewportIndicator">Loading...</div>

    <h1>🎯 US-009: Mobile Responsive Link Display Test</h1>

    <div class="test-section">
        <div class="info">
            <strong>📱 Testing Instructions:</strong>
            <ul>
                <li>Open Chrome DevTools (F12) and enable device toolbar (Ctrl+Shift+M)</li>
                <li>Try different devices: iPhone SE (375px), iPhone 12 Pro (390px), Pixel 5 (393px)</li>
                <li>Verify links stack vertically below 768px width</li>
                <li>Check that all touch targets are at least 44px × 44px</li>
            </ul>
        </div>

        <div class="acceptance-criteria">
            <h3>✅ Acceptance Criteria</h3>
            <ul>
                <li>Links stack vertically on mobile screens</li>
                <li>Touch targets meet accessibility guidelines (44px minimum)</li>
                <li>Phone links trigger device dialer (tel: protocol)</li>
                <li>Maps links open in device's default maps app</li>
            </ul>
        </div>
    </div>

    <div class="test-section">
        <h2>Test Case 1: All Links Available</h2>
        <p><strong>Activity:</strong> Nosara Yoga Institute</p>
        <p><strong>Expected:</strong> 4 links (Call, Website, Directions, Reviews)</p>

        <div class="activity-links-container"
             data-activity-links
             data-activity-id="1"
             data-show-labels="true">
        </div>
    </div>

    <div class="test-section">
        <h2>Test Case 2: Compact Mode</h2>
        <p><strong>Activity:</strong> Nosara Yoga Institute (Compact)</p>
        <p><strong>Expected:</strong> Smaller padding but still 44px minimum height</p>

        <div class="activity-links-container"
             data-activity-links
             data-activity-id="1"
             data-show-labels="true"
             data-compact>
        </div>
    </div>

    <div class="test-section">
        <h2>Test Case 3: Icon-Only Links</h2>
        <p><strong>Expected:</strong> Circular buttons, 44px × 44px minimum</p>

        <div class="activity-links-container"
             data-activity-links
             data-activity-id="1"
             data-show-labels="false">
        </div>
    </div>

    <div class="test-section">
        <h2>📏 Touch Target Reference Grid</h2>
        <p>Each cell below is 44px × 44px (WCAG 2.1 minimum):</p>
        <div class="touch-target-grid">
            <div class="touch-target-cell">44px</div>
            <div class="touch-target-cell">44px</div>
            <div class="touch-target-cell">44px</div>
            <div class="touch-target-cell">44px</div>
        </div>
        <p><em>All activity links should be at least this size on mobile.</em></p>
    </div>

    <div class="test-section verification-checklist">
        <h3>🔍 Manual Verification Steps</h3>
        <ol>
            <li><strong>Desktop (>768px):</strong> Links should display horizontally in a row</li>
            <li><strong>Tablet (768px):</strong> Links should start stacking vertically</li>
            <li><strong>Mobile (375px-480px):</strong> Links should be full-width, vertically stacked</li>
            <li><strong>Touch Targets:</strong> Use browser inspector to measure link height (should be ≥44px)</li>
            <li><strong>Phone Link:</strong> Click should show tel:+NUMBER in URL (href="tel:...")</li>
            <li><strong>Maps Link:</strong> Check that target="_self" allows native app opening</li>
        </ol>
    </div>

    <script src="/js/activity-links.js"></script>
    <script>
        // Update viewport indicator
        function updateViewportIndicator() {
            const width = window.innerWidth;
            const indicator = document.getElementById('viewportIndicator');
            let mode = '';

            if (width >= 768) {
                mode = '💻 Desktop';
            } else if (width >= 480) {
                mode = '📱 Mobile';
            } else {
                mode = '📱 Small Mobile';
            }

            indicator.textContent = `${mode} (${width}px)`;
        }

        updateViewportIndicator();
        window.addEventListener('resize', updateViewportIndicator);

        // Log link details for verification
        setTimeout(() => {
            const links = document.querySelectorAll('.activity-link');
            console.log('=== Activity Links Verification ===');
            links.forEach((link, i) => {
                const rect = link.getBoundingClientRect();
                const computedStyle = window.getComputedStyle(link);
                console.log(`Link ${i + 1}:`, {
                    text: link.textContent.trim(),
                    href: link.href,
                    target: link.target,
                    width: Math.round(rect.width) + 'px',
                    height: Math.round(rect.height) + 'px',
                    minHeight: computedStyle.minHeight,
                    meets44px: rect.height >= 44
                });
            });
        }, 2000);
    </script>
</body>
</html>