<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Comprehensive Test - Shubank</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: Arial, sans-serif;
            -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;
            background: linear-gradient(135deg, #005C97 0%, #17A2B8 50%, #FFD600 100%);
            min-height: 200vh;
        }
        
        .test-container {
            max-width: 100%;
            padding: 20px 15px;
            overflow-x: hidden;
        }
        
        .test-header {
            background: white;
            padding: 20px;
            border-radius: 12px;
            margin-bottom: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        }
        
        .test-section {
            background: rgba(255,255,255,0.9);
            margin: 20px 0;
            padding: 20px;
            border-radius: 12px;
            border-left: 4px solid #17A2B8;
        }
        
        .scroll-indicator {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 8px;
            font-family: monospace;
            font-size: 12px;
            z-index: 1000;
        }
        
        .device-info {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 8px;
            margin: 10px 0;
            font-family: monospace;
            font-size: 12px;
        }
        
        .scroll-test-area {
            height: 300px;
            background: linear-gradient(45deg, #17A2B8, #005C97);
            margin: 20px 0;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            text-align: center;
            overflow: hidden;
        }
        
        .layout-test {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 20px 0;
        }
        
        .layout-item {
            background: #FFD600;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            font-weight: bold;
        }
        
        .status-good {
            color: #28a745;
            font-weight: bold;
        }
        
        .status-bad {
            color: #dc3545;
            font-weight: bold;
        }
        
        .content-block {
            height: 400px;
            background: rgba(255,255,255,0.95);
            margin: 30px 0;
            padding: 30px;
            border-radius: 15px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
        }
        
        @media (max-width: 768px) {
            html {
                -webkit-overflow-scrolling: touch !important;
                overflow-scrolling: touch !important;
                overflow-x: hidden !important;
            }
            
            body {
                -webkit-overflow-scrolling: touch !important;
                overflow-scrolling: touch !important;
                overflow-x: hidden !important;
                width: 100% !important;
            }
            
            .layout-test {
                grid-template-columns: 1fr;
                gap: 10px;
            }
            
            .test-container {
                padding: 15px 10px;
            }
            
            * {
                max-width: 100% !important;
                box-sizing: border-box !important;
            }
        }
    </style>
</head>
<body>
    <div class="scroll-indicator" id="scrollIndicator">
        Scroll: 0px
    </div>
    
    <div class="test-container">
        <div class="test-header">
            <h1>🔧 Mobile Comprehensive Test</h1>
            <p>Testing both scrolling behavior and layout responsiveness</p>
        </div>
        
        <div class="test-section">
            <h2>📱 Device Information</h2>
            <div class="device-info" id="deviceInfo">
                Loading device info...
            </div>
        </div>
        
        <div class="test-section">
            <h2>📏 Layout Test</h2>
            <p>Check if content fits properly without horizontal overflow:</p>
            <div class="layout-test">
                <div class="layout-item">Box 1<br>Should fit</div>
                <div class="layout-item">Box 2<br>Should fit</div>
            </div>
            <div id="layoutStatus" class="status-good">✅ Layout looks good!</div>
        </div>
        
        <div class="test-section">
            <h2>📜 Scroll Behavior Test</h2>
            <p>Scroll down and check if the page stays where you scroll it:</p>
            <div id="scrollStatus" class="status-good">🟢 Ready to test scrolling...</div>
            <div id="scrollJumpDetector"></div>
        </div>
        
        <div class="scroll-test-area">
            <div>
                <h3>🎯 Scroll Test Area</h3>
                <p>Try scrolling past this section</p>
                <p>Page should NOT jump back to top!</p>
            </div>
        </div>
        
        <div class="content-block" style="background: rgba(23,162,184,0.1);">
            <h3>📊 Section 1</h3>
            <p>This is a test section. Keep scrolling down to test the scroll behavior.</p>
            <p>If the page jumps back to the top, there's still a scrolling issue.</p>
        </div>
        
        <div class="content-block" style="background: rgba(255,214,0,0.1);">
            <h3>🎮 Section 2</h3>
            <p>You're doing great! Continue scrolling to test more.</p>
            <p>The scroll position should remain stable.</p>
        </div>
        
        <div class="content-block" style="background: rgba(0,92,151,0.1);">
            <h3>⭐ Section 3</h3>
            <p>Almost there! This section tests deeper scrolling.</p>
            <p>Check if the scroll indicator updates properly.</p>
        </div>
        
        <div class="content-block" style="background: rgba(40,167,69,0.1);">
            <h3>🏆 Final Section</h3>
            <p>Excellent! You've reached the bottom.</p>
            <p>If you can see this without auto-scroll to top, the fix is working!</p>
        </div>
        
        <div class="test-section">
            <h2>✅ Test Results</h2>
            <div id="testResults">
                <p>📊 Scroll events tracked: <span id="scrollEvents">0</span></p>
                <p>🔄 Auto-scroll detected: <span id="autoScrollDetected">None</span></p>
                <p>📱 Mobile optimized: <span id="mobileOptimized">Checking...</span></p>
                <p>🎯 Overall status: <span id="overallStatus">Testing...</span></p>
            </div>
        </div>
    </div>

    <script>
        let scrollEvents = 0;
        let lastScrollTop = 0;
        let autoScrollDetected = false;
        let scrollJumps = 0;
        
        // Device info
        function updateDeviceInfo() {
            const info = {
                'Screen Size': `${window.innerWidth} x ${window.innerHeight}`,
                'Device Pixel Ratio': window.devicePixelRatio || 'Unknown',
                'User Agent': navigator.userAgent.substr(0, 50) + '...',
                'Touch Support': 'ontouchstart' in window ? 'Yes' : 'No',
                'Mobile': window.innerWidth <= 768 ? 'Yes' : 'No',
                'Orientation': window.innerHeight > window.innerWidth ? 'Portrait' : 'Landscape'
            };
            
            document.getElementById('deviceInfo').innerHTML = Object.entries(info)
                .map(([key, value]) => `<strong>${key}:</strong> ${value}`)
                .join('<br>');
        }
        
        // Scroll tracking
        function updateScrollIndicator() {
            const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            document.getElementById('scrollIndicator').textContent = `Scroll: ${Math.round(scrollTop)}px`;
            
            // Detect auto-scroll (sudden jump back to top)
            if (scrollTop === 0 && lastScrollTop > 100) {
                autoScrollDetected = true;
                scrollJumps++;
                document.getElementById('scrollStatus').innerHTML = 
                    `<span class="status-bad">❌ Auto-scroll detected! (${scrollJumps} jumps)</span>`;
                document.getElementById('autoScrollDetected').innerHTML = 
                    `<span class="status-bad">${scrollJumps} jumps detected</span>`;
            } else if (scrollTop > 0) {
                document.getElementById('scrollStatus').innerHTML = 
                    `<span class="status-good">✅ Scrolling normally (${Math.round(scrollTop)}px)</span>`;
            }
            
            lastScrollTop = scrollTop;
            scrollEvents++;
            document.getElementById('scrollEvents').textContent = scrollEvents;
        }
        
        // Check layout
        function checkLayout() {
            const hasHorizontalScroll = document.body.scrollWidth > window.innerWidth;
            const layoutStatus = document.getElementById('layoutStatus');
            
            if (hasHorizontalScroll) {
                layoutStatus.innerHTML = '<span class="status-bad">❌ Horizontal scroll detected!</span>';
            } else {
                layoutStatus.innerHTML = '<span class="status-good">✅ No horizontal scroll - layout is good!</span>';
            }
        }
        
        // Update overall status
        function updateOverallStatus() {
            const isMobile = window.innerWidth <= 768;
            const hasHorizontalScroll = document.body.scrollWidth > window.innerWidth;
            const mobileStatus = document.getElementById('mobileOptimized');
            const overallStatus = document.getElementById('overallStatus');
            
            if (isMobile) {
                mobileStatus.innerHTML = '<span class="status-good">✅ Mobile detected</span>';
            } else {
                mobileStatus.innerHTML = '<span style="color: #ffc107;">⚠️ Desktop mode</span>';
            }
            
            if (!autoScrollDetected && !hasHorizontalScroll) {
                overallStatus.innerHTML = '<span class="status-good">✅ All tests passing!</span>';
            } else {
                let issues = [];
                if (autoScrollDetected) issues.push('Auto-scroll');
                if (hasHorizontalScroll) issues.push('Horizontal scroll');
                overallStatus.innerHTML = `<span class="status-bad">❌ Issues: ${issues.join(', ')}</span>`;
            }
        }
        
        // Event listeners
        window.addEventListener('scroll', updateScrollIndicator, { passive: true });
        window.addEventListener('load', function() {
            updateDeviceInfo();
            checkLayout();
            updateOverallStatus();
            
            // Disable scroll restoration for this test
            if ('scrollRestoration' in history) {
                history.scrollRestoration = 'manual';
            }
        });
        
        window.addEventListener('resize', function() {
            setTimeout(() => {
                updateDeviceInfo();
                checkLayout();
                updateOverallStatus();
            }, 100);
        });
        
        // Periodic status updates
        setInterval(updateOverallStatus, 2000);
        
        console.log('Mobile comprehensive test initialized');
    </script>
</body>
</html>