diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..74dee01
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,51 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Project Overview
+
+This is a simple XML requirements viewer application consisting of:
+- `xml_requirements_viewer.html` - A standalone HTML application for viewing XML requirements
+- `sample_requirements.xml` - A sample XML file containing formatted requirements
+
+## Architecture
+
+The project is a single-page HTML application with embedded CSS and JavaScript. No build process, dependencies, or server is required - it runs entirely in the browser.
+
+### Core Components
+
+- **HTML Structure**: Standard HTML5 with responsive design
+- **CSS Styling**: Embedded styles with dark mode support via `@media (prefers-color-scheme: dark)`
+- **JavaScript Functionality**:
+ - Drag-and-drop file handling
+ - XML parsing using DOMParser
+ - Dynamic DOM manipulation for requirements display
+
+### XML Structure
+
+The viewer expects XML files with this structure:
+```xml
+
+
+ Title
+ High/Medium/Low
+ Category
+ HTML-formatted requirement text with custom tags
+ Active/Draft
+
+
+```
+
+### Custom XML Tags Supported
+
+The viewer supports various custom formatting tags within `` elements:
+- Text formatting: ``, ``, ``, ``, ``, ``, ``, ``
+- Code elements: ``, ``, ``, ``, `
Personal data retention must comply with GDPR Article 5(1)(e).
+
+ "Personal data shall be kept in a form which permits identification of data subjects for
+ no longer than is necessary for the purposes for which the personal data are processed."
+
+
Maximum retention periods:
+
+
Customer Data
+
2 years after account closure
+
Employee Data
+
7 years after employment ends
+
Marketing Data
+
1 year after last interaction
+
+
Reference: GDPR Regulation (EU) 2016/679
+
+ data.retentionPeriod > 730 AND data.type == 'PERSONAL'
+ FLAG_FOR_DELETION
+ ā ļø Warning: Personal data retention period exceeded GDPR requirements
+ DataManagement
+ UserRecords
+ legal_team
+ 2024-05-25
+ GDPR
+ privacy
+ compliance
+ 5
+ false
+
+
+
+ ACC-006
+ Multi-Factor Authentication Required
+ UserAccess
+ High
+ Active
+
+
';
fields.push({
name: fieldName,
- value: values.join(', ')
+ value: listHtml
});
}
processedTags.add(fieldName);
@@ -1155,124 +1188,12 @@
}
function formatElementContent(element) {
- let html = '';
+ // Simply get the inner HTML of the element, which preserves all HTML formatting
+ const innerHTML = element.innerHTML;
- element.childNodes.forEach(node => {
- if (node.nodeType === Node.TEXT_NODE) {
- html += node.textContent;
- } else if (node.nodeType === Node.ELEMENT_NODE) {
- // Format known tags
- const tagName = node.tagName.toLowerCase();
- const content = formatElementContent(node);
-
- // Apply appropriate formatting based on tag
- switch(tagName) {
- case 'strong':
- case 'b':
- html += `${content}`;
- break;
- case 'em':
- case 'i':
- html += `${content}`;
- break;
- case 'u':
- html += `${content}`;
- break;
- case 'del':
- case 'strike':
- html += `${content}`;
- break;
- case 'sup':
- html += `${content}`;
- break;
- case 'sub':
- html += `${content}`;
- break;
- case 'mark':
- case 'highlight':
- html += `${content}`;
- break;
- case 'small':
- html += `${content}`;
- break;
- case 'code':
- html += `${content}`;
- break;
- case 'kbd':
- html += `${content}`;
- break;
- case 'samp':
- html += `${content}`;
- break;
- case 'var':
- html += `${content}`;
- break;
- case 'pre':
- html += `
${content}
`;
- break;
- case 'critical':
- html += `${content}`;
- break;
- case 'optional':
- html += `${content}`;
- break;
- case 'deprecated':
- html += `${content}`;
- break;
- case 'todo':
- html += `${content}`;
- break;
- case 'value':
- html += `${content}`;
- break;
- case 'unit':
- html += `${content}`;
- break;
- case 'term':
- html += `${content}`;
- break;
- case 'acronym':
- html += `${content}`;
- break;
- case 'version':
- html += `${content}`;
- break;
- case 'br':
- html += ' ';
- break;
- case 'hr':
- html += '';
- break;
- case 'ul':
- html += `
${content}
`;
- break;
- case 'ol':
- html += `${content}`;
- break;
- case 'li':
- html += `
${content}
`;
- break;
- case 'blockquote':
- html += `
${content}
`;
- break;
- case 'ref':
- html += `${content}`;
- break;
- case 'url':
- html += `${content}`;
- break;
- case 'link':
- const href = node.getAttribute('href') || '#';
- html += `${content}`;
- break;
- default:
- // For unknown tags, just include the content
- html += content;
- }
- }
- });
-
- return html || '(empty)';
+ // If there's content, return it as-is (browser will handle HTML tags)
+ // If empty, return the (empty) indicator
+ return innerHTML ? innerHTML.trim() : '(empty)';
}
function formatXMLElement(element) {
+