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>
This commit is contained in:
@ -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, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>');
|
||||
|
||||
// Then apply syntax highlighting
|
||||
highlighted = highlighted
|
||||
.replace(/(<\/?)([\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(/(<!--.*?-->)/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:
|
||||
|
||||
Reference in New Issue
Block a user