Initial commit - QBPOS Help

validate_frontend.py

@@ -0,0 +1,171 @@
+#!/usr/bin/env python3
+"""
+Comprehensive Frontend Validation for QBPOS Help Website
+Checks: Responsive CSS, accessibility, cache versions, file integrity
+"""
+
+import os
+import re
+from pathlib import Path
+from collections import defaultdict
+
+def check_responsive_breakpoints(css_file):
+    """Validate responsive breakpoints are properly configured"""
+    issues = []
+    with open(css_file, 'r', encoding='utf-8') as f:
+        content = f.read()
+    
+    # Required breakpoints
+    required_breakpoints = [
+        (r'@media.*max-width:\s*767px', 'Mobile (≤767px)'),
+        (r'@media.*min-width:\s*768px.*max-width:\s*1024px', 'Tablet (768-1024px)'),
+        (r'@media.*min-width:\s*1025px', 'Desktop (≥1025px)')
+    ]
+    
+    for pattern, name in required_breakpoints:
+        if not re.search(pattern, content, re.IGNORECASE):
+            issues.append(f"Missing breakpoint: {name}")
+    
+    return issues
+
+def check_accessibility_features(css_file):
+    """Check for accessibility features"""
+    issues = []
+    with open(css_file, 'r', encoding='utf-8') as f:
+        content = f.read()
+    
+    # Required accessibility features
+    if ':focus' not in content:
+        issues.append("Missing focus states for keyboard navigation")
+    
+    if 'skip-link' not in content:
+        issues.append("Missing skip-to-content link for screen readers")
+    
+    return issues
+
+def check_cache_versions(base_dir):
+    """Check that all HTML files reference consistent cache version"""
+    versions = defaultdict(int)
+    
+    for html_file in Path(base_dir).rglob('*.htm*'):
+        try:
+            with open(html_file, 'r', encoding='utf-8', errors='ignore') as f:
+                content = f.read()
+                
+            # Find all version parameters
+            matches = re.findall(r'\?v=(\d+)', content)
+            for version in matches:
+                versions[version] += 1
+        except Exception:
+            continue
+    
+    return versions
+
+def check_text_wrapping(css_file):
+    """Ensure text wrapping is enabled for mobile"""
+    issues = []
+    with open(css_file, 'r', encoding='utf-8') as f:
+        content = f.read()
+    
+    # Check for word-wrap in mobile section
+    mobile_section = re.search(r'@media.*max-width:\s*767px.*?(?=@media|$)', content, re.DOTALL)
+    if mobile_section:
+        mobile_css = mobile_section.group(0)
+        if 'word-wrap' not in mobile_css and 'overflow-wrap' not in mobile_css:
+            issues.append("Missing word-wrap for mobile devices")
+    
+    return issues
+
+def validate_frontend():
+    """Run all validation checks"""
+    base_dir = Path('/home/pts/Documents/QBPOS_Help_Web/QB_Help_Web/POS_Help')
+    css_file = base_dir / 'responsive.css'
+    
+    print("=" * 60)
+    print("FRONTEND VALIDATION REPORT")
+    print("=" * 60)
+    
+    all_passed = True
+    
+    # 1. Responsive Breakpoints
+    print("\n1. Responsive Layout Validation:")
+    issues = check_responsive_breakpoints(css_file)
+    if issues:
+        all_passed = False
+        for issue in issues:
+            print(f"   ❌ {issue}")
+    else:
+        print("   ✅ All responsive breakpoints configured correctly")
+    
+    # 2. Accessibility
+    print("\n2. Accessibility Features:")
+    issues = check_accessibility_features(css_file)
+    if issues:
+        all_passed = False
+        for issue in issues:
+            print(f"   ❌ {issue}")
+    else:
+        print("   ✅ Accessibility features implemented")
+    
+    # 3. Text Wrapping
+    print("\n3. Text Wrapping:")
+    issues = check_text_wrapping(css_file)
+    if issues:
+        all_passed = False
+        for issue in issues:
+            print(f"   ❌ {issue}")
+    else:
+        print("   ✅ Text wrapping enabled for mobile")
+    
+    # 4. Cache Versions
+    print("\n4. Cache Version Consistency:")
+    versions = check_cache_versions(base_dir)
+    if versions:
+        latest_version = max(versions.keys())
+        print(f"   📦 Latest cache version: v={latest_version}")
+        print(f"   📊 Files using latest version: {versions[latest_version]}")
+        
+        # Show other versions if any
+        other_versions = {v: c for v, c in versions.items() if v != latest_version}
+        if other_versions:
+            all_passed = False
+            print("   ⚠️  Files using older versions:")
+            for v, count in sorted(other_versions.items()):
+                print(f"      v={v}: {count} files")
+        else:
+            print("   ✅ All files using consistent cache version")
+    
+    # 5. File Structure
+    print("\n5. File Structure:")
+    htm_files = list(base_dir.rglob('*.htm'))
+    css_files = list(base_dir.rglob('*.css'))
+    js_files = list(base_dir.rglob('*.js'))
+    
+    print(f"   📄 HTML files: {len(htm_files)}")
+    print(f"   🎨 CSS files: {len(css_files)}")
+    print(f"   ⚡ JavaScript files: {len(js_files)}")
+    print("   ✅ File structure intact")
+    
+    # 6. Mobile Font Sizes
+    print("\n6. Mobile Font Configuration:")
+    with open(css_file, 'r', encoding='utf-8') as f:
+        content = f.read()
+    
+    mobile_font = re.search(r'@media.*max-width:\s*767px.*?font-size:\s*(\d+)px', content, re.DOTALL)
+    desktop_dtree = re.search(r'@media.*min-width:\s*1025px.*?\.dtree.*?font-size:\s*(\d+)px', content, re.DOTALL)
+    
+    if mobile_font:
+        print(f"   📱 Mobile content font: {mobile_font.group(1)}px")
+    if desktop_dtree:
+        print(f"   🖥️  Desktop navigation font: {desktop_dtree.group(1)}px")
+    print("   ✅ Font sizes properly separated by device")
+    
+    print("\n" + "=" * 60)
+    if all_passed:
+        print("✅ ALL FRONTEND CHECKS PASSED!")
+    else:
+        print("⚠️  SOME ISSUES FOUND - See details above")
+    print("=" * 60)
+
+if __name__ == '__main__':
+    validate_frontend()