<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title>Mobile Scrolling Test - Shubank</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            -webkit-overflow-scrolling: touch;
            overflow-scrolling: touch;
        }
        
        .test-section {
            padding: 40px 20px;
            margin: 20px 0;
            background: rgba(255,255,255,0.1);
            backdrop-filter: blur(10px);
            border-radius: 15px;
            margin: 20px;
        }
        
        .test-content {
            height: 200vh; /* Force scrolling */
        }
        
        .scroll-indicator {
            position: fixed;
            top: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 12px;
            z-index: 1000;
        }
        
        .status-indicator {
            position: fixed;
            bottom: 10px;
            left: 10px;
            right: 10px;
            background: rgba(0,0,0,0.8);
            color: white;
            padding: 10px;
            border-radius: 5px;
            font-size: 12px;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <!-- Include the fixed header -->
    <?php include 'header.php'; ?>
    
    <div class="scroll-indicator" id="scrollIndicator">
        Scroll Y: <span id="scrollValue">0</span>px
    </div>
    
    <div class="status-indicator" id="statusIndicator">
        Status: <span id="statusValue">Ready</span>
    </div>
    
    <div class="test-content">
        <div class="test-section">
            <h2>📱 Mobile Scrolling Test</h2>
            <p><strong>Testing mobile scrolling behavior...</strong></p>
            <p>This page is designed to test if the mobile scrolling issues have been resolved:</p>
            <ul>
                <li>✅ No automatic scrolling to top</li>
                <li>✅ Smooth touch scrolling</li>
                <li>✅ No scroll jumping or interference</li>
                <li>✅ Proper touch event handling</li>
            </ul>
        </div>
        
        <div class="test-section">
            <h3>🔧 Applied Fixes:</h3>
            <ol>
                <li><strong>CSS Fixes:</strong>
                    <ul>
                        <li>Added -webkit-overflow-scrolling: touch</li>
                        <li>Fixed body positioning and overflow</li>
                        <li>Prevented tap highlight and callout issues</li>
                        <li>Ensured proper viewport handling</li>
                    </ul>
                </li>
                <li><strong>JavaScript Fixes:</strong>
                    <ul>
                        <li>Disabled automatic scroll restoration</li>
                        <li>Improved mobile menu overflow handling</li>
                        <li>Added proper touch event listeners</li>
                        <li>Fixed viewport height calculations</li>
                    </ul>
                </li>
                <li><strong>Mobile Menu Fixes:</strong>
                    <ul>
                        <li>Better body overflow management</li>
                        <li>Delayed overflow reset to prevent jumping</li>
                        <li>Proper position fixing when menu opens</li>
                    </ul>
                </li>
            </ol>
        </div>
        
        <div class="test-section">
            <h3>📊 Test Instructions:</h3>
            <ol>
                <li>Open this page on mobile device</li>
                <li>Try scrolling down slowly and smoothly</li>
                <li>Check if page stays at scroll position</li>
                <li>Test mobile menu (hamburger button)</li>
                <li>Verify no auto-scroll to top occurs</li>
                <li>Check scroll indicator updates properly</li>
            </ol>
        </div>
        
        <div class="test-section">
            <h3>🎯 Expected Results:</h3>
            <ul>
                <li>✅ Smooth scrolling without jumping</li>
                <li>✅ Page maintains scroll position</li>
                <li>✅ No automatic return to top</li>
                <li>✅ Mobile menu works without scroll conflicts</li>
                <li>✅ Touch events work naturally</li>
            </ul>
        </div>
        
        <div class="test-section">
            <h3>📱 Device Info:</h3>
            <p><strong>Screen Width:</strong> <span id="screenWidth"></span>px</p>
            <p><strong>Screen Height:</strong> <span id="screenHeight"></span>px</p>
            <p><strong>Device Type:</strong> <span id="deviceType"></span></p>
            <p><strong>User Agent:</strong> <span id="userAgent"></span></p>
            <p><strong>Touch Support:</strong> <span id="touchSupport"></span></p>
        </div>
        
        <!-- Add more sections to test scrolling -->
        <div class="test-section">
            <h3>🔄 Scroll Test Section 1</h3>
            <p>This is a test section to verify scrolling behavior. The page should scroll smoothly without jumping back to the top.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
        
        <div class="test-section">
            <h3>🔄 Scroll Test Section 2</h3>
            <p>Another test section to ensure consistent scrolling behavior throughout the page.</p>
            <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        </div>
        
        <div class="test-section">
            <h3>🔄 Scroll Test Section 3</h3>
            <p>Final test section to confirm no scroll interference or automatic repositioning occurs.</p>
            <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </div>
        
        <div class="test-section">
            <h3>✅ End of Test</h3>
            <p>If you can read this section without the page automatically scrolling back to the top, the mobile scrolling issue has been successfully resolved!</p>
        </div>
    </div>
    
    <script>
        // Update device information
        function updateDeviceInfo() {
            document.getElementById('screenWidth').textContent = window.innerWidth;
            document.getElementById('screenHeight').textContent = window.innerHeight;
            document.getElementById('userAgent').textContent = navigator.userAgent.substring(0, 50) + '...';
            document.getElementById('touchSupport').textContent = 'ontouchstart' in window ? 'Yes' : 'No';
            
            if (window.innerWidth <= 480) {
                document.getElementById('deviceType').textContent = 'Small Mobile';
            } else if (window.innerWidth <= 768) {
                document.getElementById('deviceType').textContent = 'Mobile/Tablet';
            } else {
                document.getElementById('deviceType').textContent = 'Desktop';
            }
        }
        
        // Track scroll position
        let lastScrollTime = Date.now();
        let scrollDirection = 'none';
        let lastScrollY = 0;
        
        function updateScrollInfo() {
            const currentScrollY = window.pageYOffset || document.documentElement.scrollTop;
            const currentTime = Date.now();
            
            document.getElementById('scrollValue').textContent = Math.round(currentScrollY);
            
            if (currentScrollY > lastScrollY) {
                scrollDirection = 'down';
            } else if (currentScrollY < lastScrollY) {
                scrollDirection = 'up';
            }
            
            const timeSinceLastScroll = currentTime - lastScrollTime;
            
            let status = `Scrolling ${scrollDirection}`;
            if (timeSinceLastScroll > 1000) {
                status = 'Idle';
            }
            
            document.getElementById('statusValue').textContent = status;
            
            lastScrollY = currentScrollY;
            lastScrollTime = currentTime;
        }
        
        // Monitor scrolling behavior
        window.addEventListener('scroll', updateScrollInfo, { passive: true });
        
        // Check for problematic scroll restoration
        let scrollJumpDetected = false;
        let scrollHistory = [];
        
        function detectScrollJump() {
            const currentScroll = window.pageYOffset;
            scrollHistory.push({ scroll: currentScroll, time: Date.now() });
            
            // Keep only last 5 scroll positions
            if (scrollHistory.length > 5) {
                scrollHistory.shift();
            }
            
            // Detect sudden jump to top
            if (scrollHistory.length >= 3) {
                const recent = scrollHistory.slice(-3);
                const sudden_jump = recent[0].scroll > 100 && recent[2].scroll < 50 && (recent[2].time - recent[0].time) < 500;
                
                if (sudden_jump && !scrollJumpDetected) {
                    scrollJumpDetected = true;
                    document.getElementById('statusValue').textContent = 'SCROLL JUMP DETECTED!';
                    document.getElementById('statusIndicator').style.background = 'rgba(255,0,0,0.8)';
                }
            }
        }
        
        window.addEventListener('scroll', detectScrollJump, { passive: true });
        
        // Initialize
        document.addEventListener('DOMContentLoaded', function() {
            updateDeviceInfo();
            updateScrollInfo();
        });
        
        // Update on resize/orientation change
        window.addEventListener('resize', updateDeviceInfo);
        window.addEventListener('orientationchange', updateDeviceInfo);
    </script>
</body>
</html>