Add fixed floating banners to XML Requirements Viewer

- Added fixed top banner with gradient background displaying "XML Requirements Management System"
- Added fixed bottom banner with copyright and version information
- Both banners use position:fixed and remain visible while scrolling
- Adjusted body padding to account for fixed banner heights
- Added dark mode support with darker gradient colors
- Banners include box shadows for visual depth

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

xml_requirements_viewer.html

@@ -7,11 +7,46 @@
     <style>
         body {
             font-family: Arial, sans-serif;
-            max-width: 800px;
+            max-width: 1400px;
             margin: 0 auto;
-            padding: 20px;
+            padding: 80px 20px; /* Added top/bottom padding for banners */
             line-height: 1.6;
         }
+        
+        /* Fixed top banner */
+        .top-banner {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            height: 60px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
+            z-index: 1000;
+            font-size: 18px;
+            font-weight: bold;
+        }
+        
+        /* Fixed bottom banner */
+        .bottom-banner {
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 50px;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
+            z-index: 1000;
+            font-size: 14px;
+        }
         .upload-area {
             border: 2px dashed #ccc;
             border-radius: 8px;
@@ -31,6 +66,42 @@
             margin: 10px 0;
             border-radius: 4px;
         }
+        
+        .requirement-pair {
+            display: flex;
+            gap: 20px;
+            margin: 10px 0;
+        }
+        
+        .requirement-pair.xml-hidden .requirement {
+            flex: 1;
+        }
+        
+        .requirement-pair:not(.xml-hidden) .requirement {
+            flex: 1;
+        }
+        
+        .requirement-pair:not(.xml-hidden) .requirement-xml {
+            flex: 1;
+        }
+        
+        .requirement-xml {
+            display: none;
+            background: #f8f9fa;
+            border: 1px solid #dee2e6;
+            border-radius: 4px;
+            padding: 15px;
+            font-family: 'Courier New', Consolas, monospace;
+            font-size: 12px;
+            white-space: pre;
+            overflow-x: auto;
+            overflow-y: visible;
+            max-height: none;
+        }
+        
+        .requirement-pair:not(.xml-hidden) .requirement-xml {
+            display: block;
+        }
         .requirement-id {
             font-weight: bold;
             color: #007bff;
@@ -64,6 +135,48 @@
             white-space: pre-wrap;
         }
 
+        .controls {
+            text-align: center;
+            margin: 20px 0;
+        }
+
+        .controls button {
+            background-color: #007bff;
+            color: white;
+            border: none;
+            padding: 10px 20px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+
+        .controls button:hover {
+            background-color: #0056b3;
+        }
+
+        .xml-content {
+            line-height: 1.4;
+        }
+
+        /* XML Syntax highlighting */
+        .xml-tag {
+            color: #0066cc;
+            font-weight: bold;
+        }
+
+        .xml-attr {
+            color: #cc6600;
+        }
+
+        .xml-value {
+            color: #009900;
+        }
+
+        .xml-comment {
+            color: #666666;
+            font-style: italic;
+        }
+
         /* Dark mode styles */
         @media (prefers-color-scheme: dark) {
             body {
@@ -176,10 +289,59 @@
                 background: #2d2d2d;
                 color: #e0e0e0;
             }
+
+            .controls button {
+                background-color: #4fc3f7;
+            }
+
+            .controls button:hover {
+                background-color: #29b6f6;
+            }
+
+            .requirement-xml {
+                background: #2d2d2d;
+                border-color: #555;
+                color: #e0e0e0;
+            }
+
+            .xml-tag {
+                color: #64b5f6;
+            }
+
+            .xml-attr {
+                color: #ffb74d;
+            }
+
+            .xml-value {
+                color: #81c784;
+            }
+
+            .xml-comment {
+                color: #999;
+            }
+            
+            /* Dark mode banner styling */
+            .top-banner {
+                background: linear-gradient(135deg, #1e3a8a 0%, #581c87 100%);
+            }
+            
+            .bottom-banner {
+                background: linear-gradient(135deg, #1e3a8a 0%, #581c87 100%);
+            }
         }
     </style>
 </head>
 <body>
+    <!-- Fixed top banner -->
+    <div class="top-banner">
+        XML Requirements Management System
+    </div>
+    
+    <!-- Fixed bottom banner -->
+    <div class="bottom-banner">
+        © 2024 Requirements Viewer | Version 1.0
+    </div>
+    
     <h1>XML Requirements Viewer</h1>
     
     <div class="upload-area" id="upload-area">
@@ -188,12 +350,22 @@
         <button onclick="document.getElementById('file-input').click()">Choose File</button>
     </div>
     
+    <div class="controls" id="controls" style="display: none;">
+        <button id="toggle-view-btn" onclick="toggleXMLView()">Show XML</button>
+    </div>
+    
     <div id="requirements-container"></div>
 
     <script>
         const uploadArea = document.getElementById('upload-area');
         const fileInput = document.getElementById('file-input');
         const container = document.getElementById('requirements-container');
+        const controls = document.getElementById('controls');
+        const toggleBtn = document.getElementById('toggle-view-btn');
+        
+        let currentXmlDoc = null;
+        let currentXmlString = '';
+        let showXML = false;
 
         // Drag and drop handlers
         uploadArea.addEventListener('dragover', (e) => {
@@ -238,6 +410,7 @@
         }
 
         function parseXML(xmlString) {
+            currentXmlString = xmlString;
             const parser = new DOMParser();
             const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
             
@@ -248,7 +421,9 @@
                 return;
             }
 
+            currentXmlDoc = xmlDoc;
             displayRequirements(xmlDoc);
+            controls.style.display = 'block';
         }
 
         function displayRequirements(xmlDoc) {
@@ -267,6 +442,11 @@
             }
 
             requirements.forEach((req, index) => {
+                // Create requirement pair container
+                const pairDiv = document.createElement('div');
+                pairDiv.className = showXML ? 'requirement-pair' : 'requirement-pair xml-hidden';
+
+                // Create formatted requirement div
                 const reqDiv = document.createElement('div');
                 reqDiv.className = 'requirement';
 
@@ -287,7 +467,20 @@
                 textDiv.innerHTML = formatText(textContent);
                 reqDiv.appendChild(textDiv);
 
-                container.appendChild(reqDiv);
+                // Create XML display div
+                const xmlDiv = document.createElement('div');
+                xmlDiv.className = 'requirement-xml';
+                const reqXMLString = extractRequirementXML(id);
+                const formattedXML = formatXMLForDisplay(reqXMLString);
+                
+                const xmlContent = document.createElement('div');
+                xmlContent.className = 'xml-content';
+                xmlContent.textContent = formattedXML; // Use textContent instead of innerHTML to avoid HTML parsing
+                xmlDiv.appendChild(xmlContent);
+
+                pairDiv.appendChild(reqDiv);
+                pairDiv.appendChild(xmlDiv);
+                container.appendChild(pairDiv);
             });
         }
 
@@ -309,6 +502,165 @@
             container.innerHTML = `<div class="error">${message}</div>`;
         }
 
+        function extractRequirementXML(requirementId) {
+            // Extract the original XML text for a specific requirement
+            const regex = new RegExp(`<requirement[^>]*id="${requirementId}"[^>]*>([\\s\\S]*?)</requirement>`, 'i');
+            const match = currentXmlString.match(regex);
+            
+            if (match) {
+                return match[0]; // Return the full requirement XML including tags
+            }
+            
+            // Fallback: try without specific ID matching
+            const allRequirements = currentXmlString.match(/<requirement[^>]*>[\s\S]*?<\/requirement>/gi);
+            if (allRequirements) {
+                // Try to match by position or content
+                const reqIndex = Array.from(currentXmlDoc.querySelectorAll('requirement'))
+                    .findIndex(req => (req.getAttribute('id') || '') === requirementId);
+                if (reqIndex >= 0 && reqIndex < allRequirements.length) {
+                    return allRequirements[reqIndex];
+                }
+            }
+            
+            return '<requirement>XML not found</requirement>';
+        }
+
+        function formatXMLForDisplay(xmlString) {
+            // Parse and reformat XML with proper indentation
+            const parser = new DOMParser();
+            const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
+            
+            const blockElements = new Set(['ul', 'ol', 'li', 'blockquote', 'pre', 'br', 'hr']);
+            
+            function formatNode(node, indent = '') {
+                if (node.nodeType === Node.TEXT_NODE) {
+                    const text = node.textContent.trim();
+                    return text ? text : '';
+                }
+                
+                if (node.nodeType === Node.ELEMENT_NODE) {
+                    const tagName = node.tagName.toLowerCase();
+                    const attributes = Array.from(node.attributes)
+                        .map(attr => ` ${attr.name}="${attr.value}"`)
+                        .join('');
+                    
+                    const openTag = `<${node.tagName}${attributes}>`;
+                    const closeTag = `</${node.tagName}>`;
+                    
+                    if (node.childNodes.length === 0) {
+                        return `${indent}${openTag}${closeTag}`;
+                    }
+                    
+                    // Special handling for text element - keep inline content together
+                    if (tagName === 'text') {
+                        const content = formatTextContent(node, indent + '    ');
+                        return `${indent}${openTag}\n${content}\n${indent}${closeTag}`;
+                    }
+                    
+                    const hasOnlyTextContent = node.childNodes.length === 1 && 
+                        node.childNodes[0].nodeType === Node.TEXT_NODE;
+                    
+                    if (hasOnlyTextContent) {
+                        const textContent = node.textContent.trim();
+                        return `${indent}${openTag}${textContent}${closeTag}`;
+                    }
+                    
+                    // For block elements, format with proper line breaks
+                    if (blockElements.has(tagName)) {
+                        const childNodes = Array.from(node.childNodes)
+                            .map(child => formatNode(child, indent + '    '))
+                            .filter(content => content.trim() !== '');
+                        
+                        if (childNodes.length === 0) {
+                            return `${indent}${openTag}${closeTag}`;
+                        }
+                        
+                        return `${indent}${openTag}\n${childNodes.join('\n')}\n${indent}${closeTag}`;
+                    }
+                    
+                    // For inline elements, keep content together
+                    const allContent = Array.from(node.childNodes)
+                        .map(child => formatNode(child, ''))
+                        .filter(content => content.trim() !== '')
+                        .join('');
+                    
+                    return `${indent}${openTag}${allContent}${closeTag}`;
+                }
+                
+                return '';
+            }
+            
+            function formatTextContent(textNode, indent) {
+                let result = '';
+                let currentLine = indent;
+                
+                for (let child of textNode.childNodes) {
+                    if (child.nodeType === Node.TEXT_NODE) {
+                        const text = child.textContent.replace(/\s+/g, ' ').trim();
+                        if (text) {
+                            currentLine += text + ' ';
+                        }
+                    } else if (child.nodeType === Node.ELEMENT_NODE) {
+                        const tagName = child.tagName.toLowerCase();
+                        
+                        // Block elements force a new line
+                        if (blockElements.has(tagName)) {
+                            if (currentLine.trim() !== indent.trim()) {
+                                result += currentLine.trimEnd() + '\n';
+                                currentLine = indent;
+                            }
+                            result += formatNode(child, indent) + '\n';
+                            currentLine = indent;
+                        } else {
+                            // Inline elements stay in the current line
+                            currentLine += formatNode(child, '');
+                        }
+                    }
+                }
+                
+                if (currentLine.trim() !== indent.trim()) {
+                    result += currentLine.trimEnd();
+                }
+                
+                return result.trimEnd();
+            }
+            
+            const rootElement = xmlDoc.documentElement;
+            return formatNode(rootElement);
+        }
+
+        function highlightXML(xmlString) {
+            // First escape HTML entities
+            let highlighted = xmlString
+                .replace(/&/g, '&amp;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;');
+            
+            // Then apply syntax highlighting
+            highlighted = highlighted
+                .replace(/(&lt;\/?)([\w-]+)/g, '<span class="xml-tag">$1$2</span>')
+                .replace(/([\w-]+)(=)/g, '<span class="xml-attr">$1</span>$2')
+                .replace(/="([^"]*)"/g, '="<span class="xml-value">$1</span>"')
+                .replace(/(&lt;!--.*?--&gt;)/gs, '<span class="xml-comment">$1</span>');
+            
+            return highlighted;
+        }
+
+        function toggleXMLView() {
+            showXML = !showXML;
+            
+            const requirementPairs = document.querySelectorAll('.requirement-pair');
+            requirementPairs.forEach(pair => {
+                if (showXML) {
+                    pair.classList.remove('xml-hidden');
+                } else {
+                    pair.classList.add('xml-hidden');
+                }
+            });
+            
+            toggleBtn.textContent = showXML ? 'Hide XML' : 'Show XML';
+        }
+
         // Example XML structure display
         const exampleXML = `
 Example XML structure this viewer now supports: