Updaing old notes to new layout (#94)

* Refactor patch list HTML structure

Rework the patch changelist HTML for many unit entries: move ChangeTypeBadge next to unit name, replace UnitMeta with FactionRow and place UnitCode inside it. Replace inline "old → new" spans with a semantic structure using ChangeLabel and ChangeValue (with <s class="OldValue">, an arrow icon and <strong class="NewValue">) to standardize markup for buffs/nerfs/mixed changes and improve styling/accessibility across the page.

* Refactor page structure and add patch cards

Fix markup and reorganize content: replace .Content div with a section, correct mismatched section/div tags and heading placements, and remove stray blank lines. Rename several IDs to remove double underscores (e.g. T2_Cybran__Shield_Lvl1 -> T2_Cybran_Shield_Lvl1). Convert many legacy .Card blocks into standardized article.PatchCard elements with structured PatchCardContent, ChangeGroup lists, faction badges and change values for multiple units (T3 UEF Shield, Nuke Silo, T3/T4 static artillery across factions, Eye of Rhianne, Game Enders, ACU Regen Aura, etc.). Overall improves semantic HTML and standardizes the patch-change presentation.

* Update README and expand 2019/3704 patch page

Revamp README to v2.3.1 with full PWA project overview, features, tech stack and project structure. Restructure pages/2019/3704.html: adjust semantic containers (Content -> div), standardize section ids (Land/Air/Navy/Structures/ACUs), rename several faction badge classes (seraphim -> sera), update image alts/unit names, and add many new patch cards (e.g. T2_TML, Advanced Regen Aura, Personal Shield, Chrono Dampener) with detailed change groups. Also introduce an aside Quick Navigation/ContentNav for improved in-page navigation and reorganize ACU/enhancement content into proper sections. These changes improve content completeness, readability and navigation for the patch notes page.

* updating page to new layout

* Update 3696.html to new layout format

* Fix patch 3696: modernize sidebar, correct buff/nerf labels, and fix descriptions

- Updated sidebar structure to match 3829 template with modern ContentNav
- Added 50 navigation items across 6 sections (Land, Air, Navy, Structures, ACU)
- Fixed 30+ unit descriptions from placeholder text
- Corrected 20 article-level buff/nerf badges based on actual stat changes
- Fixed 49 individual change item labels (buff/nerf) to match stat direction
- Updated 3 image paths to match article content (Shard, Czar, T3 Land HQ)
- Fixed HTML structure: moved closing body tag, added missing ChangesList wrappers
- Fixed unclosed strikethrough tag (line 976)
- Verified all HTML tags are balanced (191 opening/closing pairs)

* Update patch 3688: Convert sidebar to ContentSidemenu layout and correct unit IDs

* Update patches 3674, 3676, 3684: Upgrade head sections, convert sidebars to ContentSidemenu, and modernize intro sections

* Modernize patch 3684: Fix layout, badges, and stat classifications

- Update sidebar structure to match 3830 template (modern NavSection/NavItem)
- Fix duplicate ID: sera_aoe_enhc → aeon_shield_enhc
- Fix broken image paths: T4Mega.pngb → T4Mega.png, aeon//shield.png
- Add missing T1 UEF Bomber to sidebar
- Correct unit-level badges: MMLs, Sparky, Static Flak, T3 Naval factories
- Update unit descriptions for accuracy
- Fix all factory health/regen increase labels from nerf→buff (17 instances)
- Verify all 50 individual stat change labels for correctness
- Update counts: air units 2→3, total changes 24→25

* removed legacy changes not relevant any longer

Author: MrRowey

README.md

@@ -1,6 +1,140 @@
 # FAF Patchnotes
 
-A modern Progressive Web App providing comprehensive access to all current and previous patch notes## 🤝 Contributing
+> **Version 2.3.1** - A modern Progressive Web App providing comprehensive access to all current and previous patch notes for *Supreme Commander: Forged Alliance Forever* (FAF), featuring advanced search capabilities, offline functionality, and a beautiful frosted glass interface.
+
+---
+
+## Overview
+
+**Patchnotes Faforever** is a professional PWA platform that serves as a centralized, feature-rich hub for players to stay informed about the latest game updates, balance changes, and development progress for FAF. Whether you're a long-time player or just starting, you'll find organized, searchable patch information with a premium user experience across all devices.
+
+## ✨ Features
+
+### 🔍 **Advanced Search & Filtering**
+- Real-time search through all patch notes with instant results
+- Year-based filtering for quick navigation through patch history
+- Live search statistics and result counts
+- Keyboard shortcuts for power users (press `Ctrl/Cmd + K` for search, `?` for help)
+
+### 📱 **Progressive Web App (PWA)**
+- Install as a native app on any device (mobile, tablet, desktop)
+- Full offline functionality - browse patches without internet
+- Background updates with smart caching
+- Push notification support (future feature)
+
+### 🎨 **Modern UI/UX**
+- Beautiful frosted glass design with dynamic backgrounds
+- Dark/Light theme toggle with system preference detection
+- Responsive design optimized for all screen sizes
+- Smooth animations and professional polish
+
+### ♿ **Accessibility & Performance**
+- **WCAG 2.1 AAA compliant** - Full accessibility for users with disabilities
+- **Skip links** for keyboard navigation
+- **Screen reader support** with comprehensive ARIA labels
+- **Keyboard shortcuts** for all functionality (press `?` for help)
+- **High contrast focus indicators** for visibility
+- **Reduced motion support** for users with vestibular disorders
+- **44×44px minimum touch targets** (WCAG 2.1 AAA)
+- Optimized performance with sub-second load times
+- Error boundaries with automatic retry mechanisms
+- 📖 **[Full Accessibility Documentation](ACCESSIBILITY.md)**
+
+### 📊 **Analytics & Monitoring**
+- Privacy-friendly user behavior tracking
+- Performance monitoring and diagnostics
+- Search pattern analysis for continuous improvement
+- Session analytics for usage insights
+
+### 🛡️ **Reliability & Quality**
+- Comprehensive error handling and recovery
+- Background sync for seamless updates
+- Resource optimization and intelligent caching
+- Cross-browser compatibility with fallback support
+
+## 🚀 How to Use
+
+### **Web Browser**
+Visit: 👉 [https://patchnotes.faforever.com/](https://patchnotes.faforever.com/)
+
+### **Install as App**
+1. **Desktop**: Click the install prompt or use your browser's "Install" option
+2. **Mobile**: Tap "Add to Home Screen" when prompted
+3. **Benefits**: Faster loading, offline access, native app experience
+
+### **Search & Navigation**
+- Use the search bar to find specific patches, units, or changes
+- Filter by year using the dropdown menu
+- Press `Ctrl/Cmd + K` for quick search access
+- Press `?` to view all keyboard shortcuts
+- Toggle between Dark/Light themes in the footer
+
+### **Offline Usage**
+Once installed, the app works completely offline - perfect for reviewing patches during gameplay or when internet is limited.
+
+## 🛠️ Technical Stack
+
+- **Frontend**: Vanilla JavaScript (ES6+), CSS3 with advanced features
+- **PWA**: Service Worker, Web App Manifest, Background Sync
+- **Styling**: CSS Grid, Flexbox, Backdrop-filter, Custom Properties
+- **Performance**: Resource preloading, critical CSS inlining, optimized caching
+- **Accessibility**: ARIA labels, semantic HTML, keyboard navigation, WCAG 2.1 AAA
+- **Monitoring**: Performance tracking, error boundaries, user analytics
+
+## 📂 Project Structure
+
+```
+├── index.html              # Main application entry point
+├── manifest.json           # PWA configuration
+├── sw.js                   # Service Worker for offline functionality
+├── assets/
+│   ├── data/
+│   │   └── patches.json    # Patch metadata
+│   └── images/             # Icons, backgrounds, faction logos, unit images
+│       ├── backgrounds/
+│       ├── Enhancements/
+│       ├── faction/
+│       ├── icons/
+│       ├── orders/
+│       ├── thumbnail/
+│       └── units/
+├── pages/                  # Individual patch note HTML files
+│   ├── 2017/ ... 2026/
+│   └── Template/
+├── scripts/
+│   ├── analytics.js        # User behavior tracking
+│   ├── backToTop.js        # Back to top button
+│   ├── collapse.js         # Collapsible sections
+│   ├── contentSidemenu.js  # Content navigation
+│   ├── coreUI.js           # Core UI functionality
+│   ├── errorBoundary.js    # Error handling
+│   ├── headConfig.js       # Head configuration
+│   ├── keyboardShortcuts.js # Keyboard shortcuts (? for help)
+│   ├── lazyLoader.js       # Lazy loading images
+│   ├── logger.js           # Logging system
+│   ├── performance.js      # Performance monitoring
+│   ├── populatePatches.js  # Patch list generation
+│   ├── pwa.js              # PWA installation and updates
+│   ├── search.js           # Advanced search functionality
+│   ├── updatePatchFiles.js # Patch file updates
+│   └── validatePatches.js  # Patch data validation
+└── style/
+    ├── balance.css         # Balance change styling
+    ├── critical.css        # Critical inline CSS
+    ├── index.css           # Main styles with frosted glass
+    ├── pwa.css             # PWA-specific styling
+    ├── root.css            # CSS variables and base styles
+    └── components/         # Component-specific styles
+        ├── accessibility.css
+        ├── button.css
+        ├── enhanced-ui.css
+        ├── images.css
+        ├── keyboard-shortcuts.css
+        ├── patch_*.css     # Patch page components
+        └── ...
+```
+
+## 🤝 Contributing
 
 Contributions are welcome and appreciated!  
 If you'd like to help improve the site or suggest new features:
@@ -57,7 +191,8 @@ Your efforts help keep Supreme Commander: Forged Alliance Forever and this proje
 
 ---
 
-*Built with ❤️ for the Supreme Commander: Forged Alliance Forever community*ance Forever* (FAF), featuring advanced search capabilities, offline functionality, and a beautiful frosted glass interface.
+*Built with ❤️ for the Supreme Commander: Forged Alliance Forever community*
+
 
 ---