stephen/htmlTemplate
1
0
Fork 0
Code Issues Pull Requests Actions Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
stephenminakian
2025-09-02 22:20:26 -06:00
commit 6449797c4a
2 changed files with 487 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

149
sample_requirements.xml Normal file
View File

@ -0,0 +1,149 @@
<?xml version="1.0" encoding="UTF-8"?>
<requirements>
<requirement id="REQ-001">
<title>User Authentication System</title>
<priority>High</priority>
<category>Security</category>
<text>The system shall provide <strong>secure user authentication</strong> using <em>industry-standard</em> protocols. Users must enter credentials in the format <code>username@domain.com</code> with a password containing at least <value>8<unit>characters</unit></value> including <sup>1</sup> uppercase letter, <sub>1</sub> lowercase letter, and <mark>at least 1 special character</mark>. Press <kbd>Ctrl+Alt+L</kbd> to lock the session.</text>
<status>Active</status>
</requirement>
<requirement id="REQ-002">
<title>Data Validation and Processing</title>
<priority>Medium</priority>
<category>Data Management</category>
<text>All input data shall be validated using <code>regular expressions</code> before processing. The system must reject invalid formats and display <u>clear error messages</u> with helpful instructions. Response time for validation must be less than <value>100<unit>ms</unit></value> in <sup>95%</sup> of cases.
<br></br>
Example validation output: <samp>Error: Invalid email format detected</samp>
<br/>
Variable names should follow the pattern: <var>user_input_${field_name}</var></text>
<status>Active</status>
</requirement>
<requirement id="REQ-003">
<title>API Response Format</title>
<priority>High</priority>
<category>Integration</category>
<text>API responses shall be formatted as <code>JSON</code> objects. <critical>All responses must include these mandatory fields:</critical>
<ul>
<li><term>status</term> - HTTP status indicator</li>
<li><term>data</term> - Response payload</li>
<li><term>timestamp</term> - Request timestamp</li>
</ul>
Error responses must include an additional <code>error_code</code> field with values from <value>1000</value> to <value>9999</value>. The timestamp shall use <acronym>ISO</acronym> 8601 format. Current API version: <version>v2.1.3</version></text>
<status>Active</status>
</requirement>
<requirement id="REQ-004">
<title>Performance Benchmarks</title>
<priority>Medium</priority>
<category>Performance</category>
<text>The application shall handle concurrent users with these performance criteria:
<hr/>
<blockquote>
Response time must be under <value>2<unit>seconds</unit></value> for <sup>90%</sup> of requests, throughput must support at least <value>1000<unit>requests/second</unit></value>, and uptime must exceed <sup>99.9%</sup> availability.
</blockquote>
<small>Note: Performance metrics exclude maintenance windows</small></text>
<status>Draft</status>
</requirement>
<requirement id="REQ-005">
<title>Database Backup System</title>
<priority>High</priority>
<category>Data Management</category>
<text>Database backups shall be performed <strong>automatically</strong> every <value>24<unit>hours</unit></value>. Backup files must be stored in <em>encrypted format</em> using <code>AES-256</code> encryption algorithm.
<br></br>
The system shall retain:
<ol>
<li><value>30</value> daily backups</li>
<li><value>12</value> monthly backups</li>
<li><value>7</value> yearly backups</li>
</ol>
<deprecated>Legacy MD5 checksums are no longer supported</deprecated> - use <code>SHA-256</code> instead.</text>
<status>Active</status>
</requirement>
<requirement id="REQ-006">
<title>User Interface Guidelines</title>
<priority>Low</priority>
<category>UI/UX</category>
<text>All user interface elements shall follow <strong>accessibility standards</strong> including <acronym>WCAG</acronym> 2.1 AA compliance. Text contrast ratio must be at least <value>4.5:1</value> for normal text and <value>3:1</value> for large text.
<br></br>
Interactive elements must support:
<ul>
<li><strong>Keyboard navigation</strong> using <kbd>Tab</kbd>, <kbd>Enter</kbd>, and <kbd>Space</kbd></li>
<li><term>Screen reader</term> compatibility</li>
<li><optional>Voice control interfaces (future enhancement)</optional></li>
</ul>
Reference documentation: <ref>UI-STANDARDS-001</ref></text>
<status>Active</status>
</requirement>
<requirement id="REQ-007">
<title>Logging and Monitoring</title>
<priority>Medium</priority>
<category>Operations</category>
<text>The system shall generate <strong>comprehensive logs</strong> for all user actions and system events. Log entries must include these fields:
<pre>
{
"timestamp": "2025-09-02T14:30:00Z",
"user_id": "user123",
"action_type": "LOGIN_ATTEMPT",
"result_status": "SUCCESS"
}
</pre>
<critical>Critical errors shall trigger immediate alerts</critical> to administrators within <value>5<unit>minutes</unit></value> of occurrence. <del>Email notifications are deprecated</del> - use <term>webhook alerts</term> instead.</text>
<status>Active</status>
</requirement>
<requirement id="REQ-008">
<title>Mobile Compatibility</title>
<priority>High</priority>
<category>Compatibility</category>
<text>The application shall be <strong>fully responsive</strong> and compatible with mobile devices. Supported screen resolutions range from <value>320<unit>px</unit></value> to <value>1920<unit>px</unit></value> width.
<br></br>
Touch interfaces must support gesture navigation:
<ul>
<li><code>swipe</code> - Navigate between screens</li>
<li><code>pinch-to-zoom</code> - Scale content</li>
<li><code>tap-to-select</code> - Activate elements</li>
<li><code>long-press</code> - Context menus</li>
</ul>
Mathematical formula for touch sensitivity: <formula>sensitivity = pressure × area / time</formula>
<br/>
<small>Tested on iOS <version>16.0+</version> and Android <version>12.0+</version></small></text>
<status>Active</status>
</requirement>
<requirement id="REQ-009">
<title>External Integration Requirements</title>
<priority>Medium</priority>
<category>Integration</category>
<text>The system shall integrate with external services using <acronym>REST</acronym> APIs. All endpoints must be documented at <url>https://api.example.com/docs</url>.
<br></br>
Authentication tokens expire after <value>1<unit>hour</unit></value> and must be refreshed automatically. See integration guide: <link href="https://docs.example.com/integration">External API Documentation</link>
<br></br>
<todo>Add support for GraphQL endpoints in future release</todo>
<br/>
Configuration file location: <samp>/etc/app/config.json</samp></text>
<status>Active</status>
</requirement>
<requirement id="REQ-010">
<title>Security and Compliance</title>
<priority>Critical</priority>
<category>Security</category>
<text>The application must comply with <acronym>GDPR</acronym>, <acronym>HIPAA</acronym>, and <acronym>SOC</acronym> 2 standards. <mark>All sensitive data must be encrypted</mark> both in transit and at rest.
<br></br>
Security measures include:
<blockquote>
Data encryption using <code>TLS 1.3</code> for transmission and <code>AES-256-GCM</code> for storage. Session tokens expire after <value>30<unit>minutes</unit></value> of inactivity.
</blockquote>
<critical>Security vulnerabilities must be patched within 24 hours of discovery</critical>
<br></br>
Compliance certifications: <term>ISO 27001</term>, <term>PCI DSS Level 1</term>
<br/>
<small>Last security audit: March 2025</small></text>
<status>Active</status>
</requirement>
</requirements>

338
xml_requirements_viewer.html Normal file
View File

@ -0,0 +1,338 @@
<!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>