commit 6449797c4ad0648c43da73bf9972d330cdd53482
Author: stephenminakian <stephenminakian@gmail.com>
Date:   Tue Sep 2 22:20:26 2025 -0600

    Initial commit

diff --git a/sample_requirements.xml b/sample_requirements.xml
new file mode 100644
index 0000000..6f2415a
--- /dev/null
+++ b/sample_requirements.xml
@@ -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>
\ No newline at end of file
diff --git a/xml_requirements_viewer.html b/xml_requirements_viewer.html
new file mode 100644
index 0000000..174b02b
--- /dev/null
+++ b/xml_requirements_viewer.html
@@ -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>
\ No newline at end of file