Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>R&D DocMap Catalog - Document Dependency Mapper</title> | |
| <!-- Load Tailwind CSS --> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- Load Lucide Icons --> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lucide-static@latest/font/Lucide.css"> | |
| <!-- Load Mermaid properly with specific version --> | |
| <script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Base styles */ | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #f9fafb; | |
| } | |
| .doc-link, .flow-link { cursor: pointer; color: #2563eb; text-decoration: underline; font-weight: 500; } | |
| .doc-link:hover, .flow-link:hover { color: #1d4ed8; } | |
| .custom-scroll::-webkit-scrollbar { width: 6px; height: 6px; } | |
| .custom-scroll::-webkit-scrollbar-track { background: #e5e7eb; border-radius: 3px; } | |
| .custom-scroll::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 3px; } | |
| .custom-scroll::-webkit-scrollbar-thumb:hover { background: #6b7280; } | |
| .lucide { vertical-align: -0.125em; display: inline-block; margin-right: 0.35rem; } | |
| .main-tab { transition: all 0.2s ease-in-out; border-bottom-width: 3px; border-color: transparent; } | |
| .main-tab.active { border-color: #2563eb; color: #1e40af; font-weight: 600; } | |
| #documentGraphContainerInModal, #flowsContainer { min-height: 200px; } | |
| .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,0.5); align-items: center; justify-content: center; } | |
| .modal-content { background-color: #fefefe; padding: 0; border: 1px solid #888; width: 90%; max-width: 1000px; border-radius: 8px; position: relative; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } | |
| .modal-header { padding: 1rem 1.5rem; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } | |
| .modal-title { font-size: 1.25rem; font-weight: 600; color: #374151; } | |
| .modal-close { color: #9ca3af; background: none; border: none; font-size: 1.75rem; font-weight: bold; cursor: pointer; padding: 0; line-height: 1; } | |
| .modal-close:hover, .modal-close:focus { color: #1f2937; text-decoration: none; } | |
| .modal-body { padding: 1.5rem; overflow-y: auto; flex-grow: 1; } | |
| .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; } | |
| .nav-button { background-color: #e5e7eb; color: #374151; padding: 0.5rem 1rem; border: none; border-radius: 0.375rem; font-weight: 500; cursor: pointer; transition: background-color 0.2s; } | |
| .nav-button:hover:not(:disabled) { background-color: #d1d5db; } | |
| .nav-button:disabled { opacity: 0.5; cursor: not-allowed; } | |
| .mermaid text, .mermaid tspan { user-select: text ; -webkit-user-select: text ; -moz-user-select: text ; -ms-user-select: text ; } | |
| .mermaid .node { cursor: pointer; } | |
| .hidden-container { display: none ; } | |
| /* Dashboard Card Specific Styles */ | |
| .dashboard-card { transition: all 0.3s ease; } | |
| .dashboard-card:hover { transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); } | |
| /* Document item enhancements */ | |
| .document-item { | |
| transition: all 0.3s ease; | |
| border-left: 4px solid transparent; | |
| } | |
| .document-item:hover { | |
| transform: translateX(5px); | |
| background-color: #f8fafc; | |
| } | |
| /* Phase-specific colors */ | |
| .document-item[data-phase="Discovery"] { border-left-color: #3b82f6; } | |
| .document-item[data-phase="Preclinical"] { border-left-color: #10b981; } | |
| .document-item[data-phase="Clinical Phase 1"] { border-left-color: #6366f1; } | |
| .document-item[data-phase="Clinical Phase 2"] { border-left-color: #8b5cf6; } | |
| .document-item[data-phase="Clinical Phase 3"] { border-left-color: #a855f7; } | |
| .document-item[data-phase="Clinical (All Phases)"] { border-left-color: #7c3aed; } | |
| .document-item[data-phase="Regulatory Submission"] { border-left-color: #ec4899; } | |
| .document-item[data-phase="Post-Marketing"] { border-left-color: #f59e0b; } | |
| .document-item[data-phase="Pre/Post-Approval"] { border-left-color: #f97316; } | |
| /* Tab styles for document detail modal */ | |
| .details-tabs { | |
| display: flex; | |
| border-bottom: 1px solid #e5e7eb; | |
| margin-bottom: 1rem; | |
| } | |
| .details-tab { | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| border-bottom: 3px solid transparent; | |
| font-weight: 500; | |
| transition: all 0.2s ease; | |
| } | |
| .details-tab.active { | |
| border-bottom-color: #3b82f6; | |
| color: #1e40af; | |
| } | |
| .details-tab:hover:not(.active) { | |
| border-bottom-color: #e5e7eb; | |
| } | |
| .details-content { | |
| display: none; | |
| } | |
| .details-content.active { | |
| display: block; | |
| animation: fadeIn 0.3s ease; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| /* Dependency graph styles */ | |
| .dependency-graph { | |
| width: 100%; | |
| height: 400px; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.375rem; | |
| overflow: hidden; | |
| } | |
| /* Flow card styles */ | |
| .flow-card { | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.375rem; | |
| padding: 1rem; | |
| margin-bottom: 1rem; | |
| background-color: white; | |
| } | |
| .flow-card:hover { | |
| transform: translateY(-3px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| border-color: #3b82f6; | |
| } | |
| .flow-card.active { | |
| border-color: #3b82f6; | |
| background-color: #eff6ff; | |
| } | |
| /* Loading spinner */ | |
| .loading-spinner { | |
| width: 40px; | |
| height: 40px; | |
| margin: 2rem auto; | |
| border-radius: 50%; | |
| border: 4px solid #e5e7eb; | |
| border-top-color: #3b82f6; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| to { transform: rotate(360deg); } | |
| } | |
| /* Text truncation utility */ | |
| .line-clamp-2 { | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| overflow: hidden; | |
| } | |
| /* Enhanced detail card styles for better readability */ | |
| .detail-card { | |
| background-color: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| padding: 1.25rem; | |
| margin-bottom: 1rem; | |
| border-left: 4px solid #3b82f6; | |
| } | |
| .detail-card-header { | |
| display: flex; | |
| justify-content: space-between; | |
| margin-bottom: 0.75rem; | |
| border-bottom: 1px solid #e5e7eb; | |
| padding-bottom: 0.75rem; | |
| } | |
| .detail-card-title { | |
| font-size: 1.125rem; | |
| font-weight: 600; | |
| color: #1e40af; | |
| } | |
| .detail-card-badge { | |
| background-color: #eff6ff; | |
| color: #1e40af; | |
| padding: 0.25rem 0.5rem; | |
| border-radius: 9999px; | |
| font-size: 0.75rem; | |
| font-weight: 500; | |
| } | |
| .detail-card-section { | |
| margin-bottom: 0.75rem; | |
| } | |
| .detail-card-label { | |
| font-weight: 500; | |
| color: #4b5563; | |
| margin-bottom: 0.25rem; | |
| display: block; | |
| } | |
| .detail-card-value { | |
| background-color: #f9fafb; | |
| padding: 0.5rem; | |
| border-radius: 0.25rem; | |
| font-size: 0.875rem; | |
| color: #1f2937; | |
| } | |
| /* Data lineage view styles */ | |
| .lineage-container { | |
| padding: 1.5rem; | |
| background-color: white; | |
| border-radius: 0.5rem; | |
| box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); | |
| } | |
| .lineage-filters { | |
| display: flex; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| flex-wrap: wrap; | |
| } | |
| .lineage-filters select { | |
| padding: 0.5rem; | |
| border-radius: 0.25rem; | |
| border: 1px solid #d1d5db; | |
| background-color: white; | |
| min-width: 200px; | |
| } | |
| .lineage-graph { | |
| height: 600px; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 0.375rem; | |
| overflow: hidden; | |
| } | |
| </style> | |
| <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🗺️</text></svg>"> | |
| </head> | |
| <body class="flex flex-col h-screen"> | |
| <header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-md p-4 flex items-center justify-between flex-shrink-0"> | |
| <div class="flex items-center space-x-3"> | |
| <span id="logo-placeholder" class="inline-block bg-white rounded-full p-1 leading-none"> | |
| <i class="lucide lucide-map text-blue-700 text-2xl"></i> | |
| </span> | |
| <h1 class="text-2xl font-bold">R&D DocMap Catalog</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button id="homeButton" class="text-white hover:text-blue-200 flex items-center text-sm"> | |
| <i class="lucide lucide-home"></i> Home | |
| </button> | |
| <div class="relative hidden md:block"> | |
| <input type="text" id="headerSearchInput" placeholder="Search all docs..." class="bg-blue-500 placeholder-blue-200 text-white rounded-full py-1.5 px-4 pl-10 text-sm focus:outline-none focus:ring-2 focus:ring-white"> | |
| <i class="lucide lucide-search absolute left-3 top-1/2 transform -translate-y-1/2 text-blue-200"></i> | |
| </div> | |
| <button id="showExampleFlowBtn" class="bg-white text-blue-700 hover:bg-blue-50 font-semibold py-2 px-4 rounded-md shadow text-sm flex items-center"> | |
| <i class="lucide lucide-git-fork"></i> Show Example Flow | |
| </button> | |
| </div> | |
| </header> | |
| <div class="bg-gray-100 border-b border-gray-200 px-4 py-2 text-sm flex-shrink-0"> | |
| <nav id="breadcrumbNav" aria-label="Breadcrumb"> | |
| <span class="text-gray-500">Home</span> | |
| </nav> | |
| </div> | |
| <main id="mainContentArea" class="flex-1 overflow-y-auto p-4 md:p-6"> | |
| <section id="home" class="space-y-6"> | |
| <div class="bg-white rounded-lg shadow p-6 text-center"> | |
| <h2 class="text-2xl font-semibold text-gray-800 mb-2">Welcome to R&D DocMap Catalog</h2> | |
| <p class="text-gray-600">A comprehensive R&D document catalog and authoring dependency mapper</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6"> | |
| <div data-target-view="documentViewWrapper" data-initial-tab="All" class="dashboard-card bg-white rounded-lg shadow p-6 text-center cursor-pointer flex flex-col items-center"> | |
| <i class="lucide lucide-book-open text-4xl text-blue-500 mb-4"></i> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Document Catalog</h3> | |
| <p class="text-sm text-gray-500 mb-4 flex-grow">Browse and search all document types across R&D phases.</p> | |
| <button class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-2 px-4 rounded-md text-sm w-full">Explore</button> | |
| </div> | |
| <div data-target-view="flowsViewWrapper" data-initial-tab="Flows" class="dashboard-card bg-white rounded-lg shadow p-6 text-center cursor-pointer flex flex-col items-center"> | |
| <i class="lucide lucide-git-fork text-4xl text-purple-500 mb-4"></i> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Process Visualization</h3> | |
| <p class="text-sm text-gray-500 mb-4 flex-grow">Visualize document workflows and dependencies.</p> | |
| <button class="bg-purple-500 hover:bg-purple-600 text-white font-medium py-2 px-4 rounded-md text-sm w-full">Explore</button> | |
| </div> | |
| <div data-target-view="dataLineageViewWrapper" data-initial-tab="Lineage" class="dashboard-card bg-white rounded-lg shadow p-6 text-center cursor-pointer flex flex-col items-center"> | |
| <i class="lucide lucide-git-branch text-4xl text-green-500 mb-4"></i> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">Section Lineage</h3> | |
| <p class="text-sm text-gray-500 mb-4 flex-grow">Explore section-level document dependencies and data lineage.</p> | |
| <button class="bg-green-500 hover:bg-green-600 text-white font-medium py-2 px-4 rounded-md text-sm w-full">Explore</button> | |
| </div> | |
| <div data-target-view="uberDepViewWrapper" data-initial-tab="UberDep" class="dashboard-card bg-white rounded-lg shadow p-6 text-center cursor-pointer flex flex-col items-center"> | |
| <i class="lucide lucide-network text-4xl text-amber-500 mb-4"></i> | |
| <h3 class="text-lg font-semibold text-gray-700 mb-2">DocGen Dependencies</h3> | |
| <p class="text-sm text-gray-500 mb-4 flex-grow">Visualize uber interdependencies across document generation.</p> | |
| <button class="bg-amber-500 hover:bg-amber-600 text-white font-medium py-2 px-4 rounded-md text-sm w-full">Explore</button> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4 mt-6"> | |
| <h3 class="font-semibold text-gray-700 mb-3">Recent Updates</h3> | |
| <ul class="text-sm text-gray-600 space-y-1"> | |
| <li><span class="text-gray-400 mr-2">[April 7, 2025]</span>Added section-level lineage visualization capabilities.</li> | |
| <li><span class="text-gray-400 mr-2">[April 6, 2025]</span>Enhanced document visualization system launched.</li> | |
| <li><span class="text-gray-400 mr-2">[April 5, 2025]</span>Added IND pathway and clinical program flows.</li> | |
| </ul> | |
| </div> | |
| </section> | |
| <section id="documentViewWrapper" class="hidden-container flex flex-col flex-1 gap-4 overflow-hidden"> | |
| <div class="bg-white rounded-lg shadow p-3 flex-shrink-0"> | |
| <div id="mainTabsDocView" class="flex space-x-4 border-b border-gray-200 overflow-x-auto custom-scroll pb-1"> | |
| <span class="text-gray-500">Loading phases...</span> | |
| </div> | |
| </div> | |
| <div class="relative flex-shrink-0 bg-white rounded-lg shadow p-4"> | |
| <input type="text" id="searchInputDocView" placeholder="Search documents in selected phase (or all)..." class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent text-sm"> | |
| <i class="lucide lucide-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 ml-4"></i> | |
| </div> | |
| <div id="documentListDocView" class="bg-white rounded-lg shadow flex-1 overflow-y-auto custom-scroll p-4"> | |
| <p class="text-gray-500 text-center py-4">Select a phase tab above.</p> | |
| </div> | |
| </section> | |
| <section id="flowsViewWrapper" class="hidden-container flex-1 bg-white rounded-lg shadow p-4 overflow-hidden flex flex-col gap-4"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-2 flex items-center flex-shrink-0"> | |
| <i class="lucide lucide-git-fork mr-2 text-purple-600"></i> Process Flows | |
| </h2> | |
| <div class="flex flex-1 gap-4 overflow-hidden"> | |
| <div class="w-full md:w-1/4 border-r pr-4 border-gray-200 overflow-y-auto custom-scroll"> | |
| <div id="flowsList" class="space-y-3"> | |
| <p class="text-gray-500">Loading flows...</p> | |
| </div> | |
| <button id="showExampleFlowBtnFlowView" class="mt-4 bg-gray-100 text-gray-700 hover:bg-gray-200 font-medium py-1.5 px-3 rounded-md shadow-sm text-xs flex items-center w-full text-left"> | |
| <i class="lucide lucide-presentation"></i> Show Example P1 Flow | |
| </button> | |
| </div> | |
| <div id="flowsContainer" class="w-full md:w-3/4 overflow-auto custom-scroll bg-gray-50 rounded"> | |
| <p id="flowPlaceholder" class="text-gray-500 text-center py-10 px-4">Select a flow from the list to view the process graph.</p> | |
| <div id="mermaidFlowGraph" class="mermaid w-full h-full p-4"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- New Data Lineage View Section --> | |
| <section id="dataLineageViewWrapper" class="hidden-container flex-1 bg-white rounded-lg shadow p-4 overflow-hidden flex flex-col gap-4"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-2 flex items-center flex-shrink-0"> | |
| <i class="lucide lucide-git-branch mr-2 text-green-600"></i> Section-Level Lineage | |
| </h2> | |
| <div class="lineage-filters"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Select Document</label> | |
| <select id="lineageDocumentSelect" class="w-full"> | |
| <option value="">Select a document...</option> | |
| <!-- Documents will be populated by JavaScript --> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Select Section</label> | |
| <select id="lineageSectionSelect" class="w-full" disabled> | |
| <option value="">Select a section...</option> | |
| <!-- Sections will be populated after selecting a document --> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="lineage-container flex-1 flex flex-col"> | |
| <div id="lineageGraphContainer" class="lineage-graph flex-1"> | |
| <p id="lineagePlaceholder" class="text-gray-500 text-center py-10 px-4">Select a document and section to visualize data lineage.</p> | |
| <div id="mermaidLineageGraph" class="mermaid w-full h-full p-4"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- New Uber Dependencies View Section --> | |
| <section id="uberDepViewWrapper" class="hidden-container flex-1 bg-white rounded-lg shadow p-4 overflow-hidden flex flex-col gap-4"> | |
| <h2 class="text-xl font-semibold text-gray-700 mb-2 flex items-center flex-shrink-0"> | |
| <i class="lucide lucide-network mr-2 text-amber-600"></i> DocGen Dependencies | |
| </h2> | |
| <div class="flex flex-1 gap-4 overflow-hidden"> | |
| <div class="w-full md:w-1/4 border-r pr-4 border-gray-200 overflow-y-auto custom-scroll"> | |
| <div> | |
| <h3 class="font-medium text-gray-700 mb-2">Filter By:</h3> | |
| <div class="space-y-2"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Document Type</label> | |
| <select id="uberDepDocTypeSelect" class="w-full border border-gray-300 rounded-md p-2"> | |
| <option value="all">All Document Types</option> | |
| <!-- Document types will be populated by JavaScript --> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Phase</label> | |
| <select id="uberDepPhaseSelect" class="w-full border border-gray-300 rounded-md p-2"> | |
| <option value="all">All Phases</option> | |
| <!-- Phases will be populated by JavaScript --> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6"> | |
| <h3 class="font-medium text-gray-700 mb-2">Legend</h3> | |
| <div class="space-y-2 text-sm"> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 bg-blue-500 rounded-full mr-2"></span> | |
| <span>Input Document</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 bg-green-500 rounded-full mr-2"></span> | |
| <span>Output Document</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="w-3 h-3 bg-purple-500 rounded-full mr-2"></span> | |
| <span>Input/Output Document</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="uberDepContainer" class="w-full md:w-3/4 overflow-auto custom-scroll bg-gray-50 rounded"> | |
| <p id="uberDepPlaceholder" class="text-gray-500 text-center py-10 px-4">Loading document generation dependencies...</p> | |
| <div id="mermaidUberDepGraph" class="mermaid w-full h-full p-4"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <div id="exampleFlowModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2 class="modal-title">Example Flow: Phase 1 SAD Study Documents</h2> | |
| <button class="modal-close" id="closeExampleModalBtn">×</button> | |
| </div> | |
| <div class="modal-body custom-scroll"> | |
| <div id="exampleMermaidGraph" class="mermaid text-sm"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="detailsModal" class="modal"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| <h2 id="detailsModalTitle" class="modal-title">Document Details</h2> | |
| <button class="modal-close" id="closeDetailsModalBtn">×</button> | |
| </div> | |
| <div class="modal-body custom-scroll"> | |
| <div id="detailsModalContent" class="flex flex-col w-full"> | |
| <div id="detailsContentInModal" class="text-gray-600 text-sm"> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <button id="prevDocBtn" class="nav-button" disabled><i class="lucide lucide-arrow-left"></i> Previous</button> | |
| <button id="nextDocBtn" class="nav-button" disabled>Next <i class="lucide lucide-arrow-right"></i></button> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="loadingSpinner" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"> | |
| <div class="bg-white p-8 rounded-lg shadow-lg flex flex-col items-center"> | |
| <div class="w-16 h-16 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mb-4"></div> | |
| <p class="text-gray-700 font-medium">Loading R&D DocMap Catalog...</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Initialize Mermaid with proper configuration | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Initialize Mermaid properly | |
| mermaid.initialize({ | |
| startOnLoad: false, | |
| theme: 'base', | |
| securityLevel: 'loose', | |
| themeVariables: { | |
| primaryColor: '#eff6ff', | |
| primaryTextColor: '#1e3a8a', | |
| primaryBorderColor: '#60a5fa', | |
| lineColor: '#6b7280', | |
| secondaryColor: '#f1f5f9', | |
| tertiaryColor: '#e0f2fe' | |
| } | |
| }); | |
| }); | |
| // More JavaScript functionality will be added in a separate script file | |
| </script> | |
| <script src="docmap.js"></script> | |
| </body> | |
| </html> |