MSE-READ-ME

by velo_ninja

HTML

<style>
  
</style>

<div id="table-container">Loading...</div>
<div id="detail-popup" class="detail-popup"></div>

<script>
// Function to render any JSON data
function renderJSONData(data) {
  if (typeof data !== 'object') {
    return `<p class='muted'>Unsupported data format.</p>`;
  }

  if (Array.isArray(data)) {
    return renderArrayData(data);
  } else {
    return renderObjectData(data);
  }
}

// Function to render array data
function renderArrayData(data) {
  let html = '';
  data.forEach((item, index) => {
    if (typeof item === 'object') {
      html += `<details class="section" open>
        <summary>
          Item ${index + 1}
        </summary>
        ${renderObjectData(item)}
      </details>`;
    } else {
      html += `<p>Item ${index + 1}: ${item}</p>`;
    }
  });
  return html;
}

// Function to render object data
function renderObjectData(data) {
  let html = '';
  Object.keys(data).forEach(key => {
    const value = data[key];
    if (typeof value === 'object') {
      if (Array.isArray(value)) {
        html += `<p>${key}:</p>
        ${renderArrayData(value)}`;
      } else {
        html += `<p>${key}:</p>
        ${renderObjectData(value)}`;
      }
    } else {
      html += `<p>${key}: ${value}</p>`;
    }
  });
  return html;
}

// Function to render table data
function renderTableData(data) {
  if (!Array.isArray(data)) {
    return `<p class='muted'>Unsupported data format.</p>`;
  }

  const columns = Array.from(
    new Set(data.flatMap(obj => Object.keys(obj)))
  );

  let html = `<table>
    <thead>
      <tr>
        ${columns.map(col => `<th>${col}</th>`).join('')}
      </tr>
    </thead>
    <tbody>
      ${data.map(row => {
        return `<tr>
          ${columns.map(col => {
            if (row[col] !== undefined) {
              return `<td>${row[col]}</td>`;
            } else {
              return `<td></td>`;
            }
    ...

CSS

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #f6f8fa;
  }
  body {
    font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
    margin: 0;
    color: #212529;
  }
  #table-container {
    max-width: 1400px;
    margin: 24px auto 0 auto;
    padding: 0 8px;
  }
  details.section {
    margin-bottom: 18px;
    border-radius: 7px;
    background: #fff;
    border-left: 4px solid #3b82f6;
    overflow: hidden;
    transition: border-color 0.18s;
  }
  details.section[open] {
    border-color: #16a34a;
  }
  summary {
    display: flex;
    align-items: center;
    font-weight: 600;
    cursor: pointer;
    padding: 9px 18px 9px 18px;
    background: #f4f7fa;
    border-radius: 7px 7px 0 0;
    font-size: 1.04em;
    letter-spacing: 0.01em;
    outline: none;
    border: none;
    user-select: none;
    min-height: 36px;
    transition: background 0.18s;
  }
  details.section[open] summary {
    background: #e7fbe9;
  }
  summary strong {
    margin-left: 8px;
    font-weight: 700;
    color: #2563eb;
    font-size: 1.03em;
    letter-spacing: 0.01em;
  }
  details.section[open] summary strong {
    color: #16a34a;
  }
  .section-count {
    margin-left: 10px;
    color: #888;
    font-size: 0.97em;
    font-weight: 400;
  }
  .table-responsive {
    width: 100%;
    overflow-x: auto;
    background: #fff;
    border-radius: 0 0 7px 7px;
    margin-top: 0;
  }
  table {
    width: 100%;
    min-width: 600px;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.97em;
    background: #fff;
  }
  th, td {
    padding: 4px 7px;
    border: none;
    text-align: left;
    vertical-align: middle;
    font-size: 0.97em;
    white-space: pre-line;
    max-width: 340px;
    overflow-wrap: break-word;
  }
  th {
    background: #f5f6fa;
    font-weight: 600;
    color: #333;
    border-bottom: 1px solid #e5e7eb;
    letter-spacing: 0.01em;
   ...

JavaScript

let data = [
  {
    "group": "MODULE-METADATA",
    "icon": "📦",
    "items": [
      {
        "no": "01",
        "module": "MODULE-METADATA",
        "checkpoint": "-module_author",
        "details": "User-defined metadata: Displays author of module",
        "importance": "important",
        "importance_label": "🟡 Important",
        "status": "pending",
        "status_label": "⚪ Pending"
      },
      {
        "no": "02",
        "module": "MODULE-METADATA",
        "checkpoint": "-module_autoload",
        "details": "User-defined: Enables/disables module auto-loading; loader skips if `False` or module is missing",
        "importance": "critical",
        "importance_label": "🔴 Critical",
        "status": "pending",
        "status_label": "⚪ Pending"
      },
      {
        "no": "03",
        "module": "MODULE-METADATA",
        "checkpoint": "-module_category",
        "details": "User-defined: Categorization for UI, grouping, etc.",
        "importance": "important",
        "importance_label": "🟡 Important",
        "status": "pending",
        "status_label": "⚪ Pending"
      },
      {
        "no": "04",
        "module": "MODULE-METADATA",
        "checkpoint": "-module_className",
        "details": "Auto-defined: Extracted from first class in the module during load-time",
        "importance": "auto-gen",
        "importance_label": "🟠 Auto-Gen",
        "status": "pending",
        "status_label": "⚪ Pending"
      },
      {
        "no": "05",
        "module": "MODULE-METADATA",
        "checkpoint": "-module_description",
        "details": "User-defined: Displays module purpose/summary",
        "importance": "important",
        "importance_label": "🟡 Important",
        "status": "pending",
        "status_label": "⚪ Pending"
      },
      {
        "no": "06",
        "module": "MODULE-METADATA",
        "checkpoint": "-module_license",
        "details":...