stephen/htmlTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity
Files
87b66934342752da0ef7404191dc0455826f0f79
htmlTemplate/xml_requirements_viewer.html
stephenminakian 68e361faf5 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>
2025-09-04 14:33:44 -06:00

690 lines
23 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>XML Requirements Viewer</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1400px;
margin: 0 auto;
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;
padding: 40px;
text-align: center;
margin-bottom: 20px;
background-color: #f9f9f9;
}
.upload-area.dragover {
border-color: #007bff;
background-color: #e3f2fd;
}
.requirement {
background: #f5f5f5;
border-left: 4px solid #007bff;
padding: 15px;
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;
margin-bottom: 10px;
}
.requirement-text {
margin-bottom: 10px;
}
/* Custom styling for mono tag */
.mono {
font-family: 'Courier New', Consolas, monospace;
background-color: #f0f0f0;
padding: 2px 4px;
border-radius: 3px;
}
#file-input {
margin: 10px 0;
}
.error {
color: #d32f2f;
background-color: #ffebee;
padding: 10px;
border-radius: 4px;
margin: 10px 0;
}
.example-box {
background: #f0f8ff;
padding: 15px;
border-radius: 4px;
font-family: monospace;
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 {
background-color: #1a1a1a;
color: #e0e0e0;
}
.upload-area {
background-color: #2d2d2d;
border-color: #555;
color: #e0e0e0;
}
.upload-area.dragover {
border-color: #4fc3f7;
background-color: #1e3a8a;
}
.requirement {
background: #2d2d2d;
border-left-color: #4fc3f7;
}
.requirement-id {
color: #4fc3f7;
}
/* Dark mode formatting */
code, kbd, samp, var, .code {
background-color: #3d3d3d;
color: #e0e0e0;
}
kbd {
background-color: #1a1a1a;
color: #fff;
border-color: #555;
}
samp {
background-color: #1a4d1a;
color: #90ee90;
}
var {
background-color: #4d3d1a;
color: #ffd700;
}
mark, .highlight {
background-color: #665500;
color: #ffeb3b;
}
.critical {
color: #ff6b6b;
background-color: #4d1f1f;
}
.optional {
color: #999;
}
.deprecated {
color: #888;
}
.todo {
background-color: #4d3d1f;
color: #ffb74d;
}
.value {
color: #64b5f6;
}
.term {
color: #ba68c8;
}
.version {
background-color: #1a2332;
color: #90caf9;
}
blockquote {
background-color: #2d2d2d;
border-left-color: #555;
color: #ccc;
}
pre {
background-color: #2d2d2d;
color: #e0e0e0;
}
.ref, .url {
color: #64b5f6;
}
hr {
border-top-color: #555;
}
.error {
color: #ff6b6b;
background-color: #4d1f1f;
}
.example-box {
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">
<p>Drag and drop your XML file here, or click to select</p>
<input type="file" id="file-input" accept=".xml" style="display: none;">
<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) => {
e.preventDefault();
uploadArea.classList.add('dragover');
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.classList.remove('dragover');
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.classList.remove('dragover');
const files = e.dataTransfer.files;
if (files.length > 0) {
handleFile(files[0]);
}
});
fileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
handleFile(e.target.files[0]);
}
});
function handleFile(file) {
if (!file.name.toLowerCase().endsWith('.xml')) {
showError('Please select an XML file.');
return;
}
const reader = new FileReader();
reader.onload = (e) => {
try {
parseXML(e.target.result);
} catch (error) {
showError('Error parsing XML file: ' + error.message);
}
};
reader.readAsText(file);
}
function parseXML(xmlString) {
currentXmlString = xmlString;
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(xmlString, 'text/xml');
// Check for parsing errors
const parseError = xmlDoc.querySelector('parsererror');
if (parseError) {
showError('XML parsing error: ' + parseError.textContent);
return;
}
currentXmlDoc = xmlDoc;
displayRequirements(xmlDoc);
controls.style.display = 'block';
}
function displayRequirements(xmlDoc) {
container.innerHTML = '';
// This is a generic approach - you may need to adjust the selector
// based on your actual XML structure
const requirements = xmlDoc.querySelectorAll('requirement');
if (requirements.length === 0) {
// Try alternative selectors if 'requirement' doesn't work
const allElements = xmlDoc.querySelectorAll('*');
container.innerHTML = '<p>No requirements found with tag "requirement". Found elements: ' +
Array.from(allElements).map(el => el.tagName).join(', ') + '</p>';
return;
}
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';
// Try to find an ID attribute or element
const id = req.getAttribute('id') || req.querySelector('id')?.textContent || `REQ-${index + 1}`;
const idDiv = document.createElement('div');
idDiv.className = 'requirement-id';
idDiv.textContent = `Requirement ID: ${id}`;
reqDiv.appendChild(idDiv);
// Find the text content - adjust this selector based on your XML structure
const textElement = req.querySelector('text') || req.querySelector('description') || req;
const textContent = textElement.innerHTML || textElement.textContent;
const textDiv = document.createElement('div');
textDiv.className = 'requirement-text';
textDiv.innerHTML = formatText(textContent);
reqDiv.appendChild(textDiv);
// 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);
});
}
function formatText(text) {
// Convert custom formatting tags to HTML
let formatted = text;
// Convert <mono> tags to <span class="mono">
// formatted = formatted.replace(/<mono>/g, '<span class="mono">');
// formatted = formatted.replace(/<\/mono>/g, '</span>');
// <strong> and <sup> are already valid HTML, so they should work as-is
// Add more conversions as needed for other custom tags
return formatted;
}
function showError(message) {
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:
&lt;requirements&gt;
&lt;requirement id="REQ-001"&gt;
&lt;text&gt;
The system shall &lt;strong&gt;validate&lt;/strong&gt; user input using &lt;code&gt;regex&lt;/code&gt; patterns
with &lt;sup&gt;99%&lt;/sup&gt; accuracy. Press &lt;kbd&gt;Ctrl+S&lt;/kbd&gt; to save.
&lt;critical&gt;Critical errors&lt;/critical&gt; must be logged within &lt;value&gt;5&lt;unit&gt;ms&lt;/unit&gt;&lt;/value&gt;.
Supported tags include:
• Text: &lt;strong&gt;, &lt;em&gt;, &lt;u&gt;, &lt;del&gt;, &lt;sup&gt;, &lt;sub&gt;, &lt;mark&gt;, &lt;small&gt;
• Code: &lt;code&gt;, &lt;kbd&gt;, &lt;samp&gt;, &lt;var&gt;, &lt;pre&gt;
• Semantic: &lt;critical&gt;, &lt;optional&gt;, &lt;deprecated&gt;, &lt;todo&gt;
• Technical: &lt;value&gt;, &lt;unit&gt;, &lt;term&gt;, &lt;acronym&gt;, &lt;version&gt;
• Structure: &lt;br&gt;, &lt;hr&gt;, &lt;ul&gt;, &lt;ol&gt;, &lt;li&gt;, &lt;blockquote&gt;
• References: &lt;ref&gt;, &lt;url&gt;, &lt;doc&gt;, &lt;link href=""&gt;
&lt;/text&gt;
&lt;/requirement&gt;
&lt;/requirements&gt;
`;
container.innerHTML = `<div class="example-box">${exampleXML}</div>`;
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink