stephen/htmlTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity
Files
6449797c4ad0648c43da73bf9972d330cdd53482
htmlTemplate/xml_requirements_viewer.html
stephenminakian 6449797c4a Initial commit
2025-09-02 22:20:26 -06:00

338 lines
11 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: 800px;
margin: 0 auto;
padding: 20px;
line-height: 1.6;
}
.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-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;
}
/* 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;
}
}
</style>
</head>
<body>
<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 id="requirements-container"></div>
<script>
const uploadArea = document.getElementById('upload-area');
const fileInput = document.getElementById('file-input');
const container = document.getElementById('requirements-container');
// 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) {
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;
}
displayRequirements(xmlDoc);
}
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) => {
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);
container.appendChild(reqDiv);
});
}
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>`;
}
// 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