989 lines
50 KiB
HTML
989 lines
50 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>KROW Launchpad</title>
|
|
<link rel="icon" type="image/x-icon" href="favicon.svg">
|
|
|
|
<!-- Tailwind CSS -->
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
|
<!-- Mermaid -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.9.1/mermaid.min.js"></script>
|
|
|
|
<!-- Marked.js for Markdown parsing -->
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
|
|
<!-- Custom Tailwind Config -->
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
primary: {
|
|
50: '#eff6ff',
|
|
100: '#dbeafe',
|
|
200: '#bfdbfe',
|
|
300: '#93c5fd',
|
|
400: '#60a5fa',
|
|
500: '#3b82f6',
|
|
600: '#2563eb',
|
|
700: '#1d4ed8',
|
|
800: '#1e40af',
|
|
900: '#1e3a8a',
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
|
|
|
|
* {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.card-hover {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.card-hover:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
|
|
}
|
|
|
|
.nav-item {
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.nav-item:hover {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
.badge-pulse {
|
|
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
opacity: .7;
|
|
}
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
#diagram-container:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
/* Modal styles */
|
|
.modal-overlay {
|
|
backdrop-filter: blur(4px);
|
|
animation: fadeIn 0.2s ease-out;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; }
|
|
to { opacity: 1; }
|
|
}
|
|
|
|
.modal-content {
|
|
animation: slideUp 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Markdown styling */
|
|
.markdown-content {
|
|
line-height: 1.7;
|
|
color: #374151;
|
|
}
|
|
|
|
.markdown-content h1 {
|
|
font-size: 2em;
|
|
font-weight: 700;
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.5em;
|
|
padding-bottom: 0.3em;
|
|
border-bottom: 2px solid #e5e7eb;
|
|
color: #111827;
|
|
}
|
|
|
|
.markdown-content h1:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-content h2 {
|
|
font-size: 1.5em;
|
|
font-weight: 600;
|
|
margin-top: 1.5em;
|
|
margin-bottom: 0.5em;
|
|
padding-bottom: 0.2em;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
color: #111827;
|
|
}
|
|
|
|
.markdown-content h3 {
|
|
font-size: 1.25em;
|
|
font-weight: 600;
|
|
margin-top: 1.2em;
|
|
margin-bottom: 0.5em;
|
|
color: #111827;
|
|
}
|
|
|
|
.markdown-content h4 {
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
margin-top: 1em;
|
|
margin-bottom: 0.5em;
|
|
color: #111827;
|
|
}
|
|
|
|
.markdown-content p {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.markdown-content ul, .markdown-content ol {
|
|
margin-bottom: 1em;
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.markdown-content ul {
|
|
list-style-type: disc;
|
|
}
|
|
|
|
.markdown-content ol {
|
|
list-style-type: decimal;
|
|
}
|
|
|
|
.markdown-content li {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.markdown-content code {
|
|
background-color: #f3f4f6;
|
|
padding: 0.2em 0.4em;
|
|
border-radius: 0.25em;
|
|
font-size: 0.9em;
|
|
font-family: 'Courier New', monospace;
|
|
color: #dc2626;
|
|
}
|
|
|
|
.markdown-content pre {
|
|
background-color: #1f2937;
|
|
color: #f9fafb;
|
|
padding: 1em;
|
|
border-radius: 0.5em;
|
|
overflow-x: auto;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.markdown-content pre code {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
color: inherit;
|
|
}
|
|
|
|
.markdown-content blockquote {
|
|
border-left: 4px solid #3b82f6;
|
|
padding-left: 1em;
|
|
margin: 1em 0;
|
|
color: #6b7280;
|
|
font-style: italic;
|
|
}
|
|
|
|
.markdown-content a {
|
|
color: #3b82f6;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.markdown-content a:hover {
|
|
color: #2563eb;
|
|
}
|
|
|
|
.markdown-content table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
.markdown-content th, .markdown-content td {
|
|
border: 1px solid #e5e7eb;
|
|
padding: 0.5em;
|
|
text-align: left;
|
|
}
|
|
|
|
.markdown-content th {
|
|
background-color: #f9fafb;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.markdown-content img {
|
|
max-width: 100%;
|
|
height: auto;
|
|
border-radius: 0.5em;
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.markdown-content hr {
|
|
border: none;
|
|
border-top: 2px solid #e5e7eb;
|
|
margin: 2em 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gradient-to-br from-gray-50 to-gray-100 min-h-screen">
|
|
<div class="flex h-screen overflow-hidden">
|
|
|
|
<!-- Sidebar -->
|
|
<aside class="w-72 bg-white shadow-xl flex flex-col border-r border-gray-200">
|
|
<!-- Logo Section -->
|
|
<div class="p-6 border-b border-gray-200">
|
|
<div class="flex items-center justify-center space-x-3">
|
|
<div class="w-12 h-12 rounded-xl flex items-center justify-center">
|
|
<img src="logo.svg" alt="Krow Logo" style="height: 60px;" onerror="this.style.display='none'">
|
|
</div>
|
|
<div>
|
|
<h1 class="text-xl font-bold text-gray-900">KROW</h1>
|
|
<p class="text-xs text-gray-500">Workforce Platform</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation -->
|
|
<nav class="flex-1 overflow-y-auto scrollbar-hide p-4" id="sidebar-nav">
|
|
<a href="#" id="nav-home" onclick="showView('home', this)"
|
|
class="nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 bg-primary-50 border border-primary-200 font-medium mb-2">
|
|
<svg class="w-5 h-5 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
|
|
</svg>
|
|
<span>Home</span>
|
|
</a>
|
|
|
|
<!-- Dynamic diagrams section - ALL diagrams loaded here -->
|
|
<div id="dynamic-diagrams-section"></div>
|
|
|
|
<!-- Documentation section -->
|
|
<div id="documentation-section"></div>
|
|
</nav>
|
|
|
|
<!-- Footer -->
|
|
<div class="p-4 border-t border-gray-200 bg-gray-50">
|
|
<div class="flex items-center space-x-2 text-xs text-gray-500">
|
|
<div class="w-2 h-2 bg-green-500 rounded-full badge-pulse"></div>
|
|
<span>System Online</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 overflow-y-auto">
|
|
|
|
<!-- Home View -->
|
|
<div id="home-view" class="p-8">
|
|
<!-- Header -->
|
|
<div class="mb-8">
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-2">Welcome to KROW Launchpad</h2>
|
|
<p class="text-gray-600">Your central hub for workforce management infrastructure</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
<!-- Applications Card -->
|
|
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-primary-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900">Applications</h3>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<a href="https://krow-workforce-dev.web.app" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl hover:from-blue-100 hover:to-blue-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-2 h-2 bg-blue-500 rounded-full"></div>
|
|
<span class="font-medium text-gray-900 group-hover:text-blue-700">Control Tower</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
|
</a>
|
|
|
|
<a href="https://krow-workforce-staging.web.app" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-amber-100 rounded-xl hover:from-amber-100 hover:to-amber-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<div class="w-2 h-2 bg-amber-500 rounded-full"></div>
|
|
<span class="font-medium text-gray-900 group-hover:text-amber-700">Control Tower</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Legacy Mobile Apps Card -->
|
|
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="w-10 h-10 bg-green-100 rounded-lg flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900">Legacy Mobile Apps</h3>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<a href="https://play.google.com/store/apps/dev?id=9163719228191263405&hl=en" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-emerald-100 rounded-xl hover:from-green-100 hover:to-emerald-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-green-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3,20.5V3.5C3,2.91 3.34,2.39 3.84,2.15L13.69,12L3.84,21.85C3.34,21.6 3,21.09 3,20.5M16.81,15.12L6.05,21.34L14.54,12.85L16.81,15.12M20.16,10.81C20.5,11.08 20.75,11.5 20.75,12C20.75,12.5 20.53,12.9 20.18,13.18L17.89,14.5L15.39,12L17.89,9.5L20.16,10.81M6.05,2.66L16.81,8.88L14.54,11.15L6.05,2.66Z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-green-700">Google Play Store</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-green-500 text-white text-xs font-semibold rounded-full">Live</span>
|
|
</a>
|
|
|
|
<a href="https://apps.apple.com/us/developer/thinkloops-llc/id1719034287" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-gray-100 rounded-xl hover:from-gray-100 hover:to-gray-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-gray-700" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M17.05 20.28c-.98.95-2.05.88-3.08.4-1.09-.5-2.08-.48-3.24 0-1.44.62-2.2.44-3.06-.4C2.79 15.25 3.51 7.59 9.05 7.31c1.35.07 2.29.74 3.08.8 1.18-.24 2.31-.93 3.57-.84 1.51.12 2.65.72 3.4 1.8-3.12 1.87-2.38 5.98.48 7.13-.57 1.5-1.31 2.99-2.54 4.09l.01-.01zM12.03 7.25c-.15-2.23 1.66-4.07 3.74-4.25.29 2.58-2.34 4.5-3.74 4.25z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-gray-700">Apple App Store</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-gray-700 text-white text-xs font-semibold rounded-full">Live</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Cloud Consoles Card -->
|
|
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="w-10 h-10 bg-purple-100 rounded-lg flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900">Cloud Infrastructure</h3>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<a href="https://console.firebase.google.com/project/krow-workforce-dev/overview" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-indigo-100 rounded-xl hover:from-blue-100 hover:to-indigo-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-indigo-700">Firebase Console</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
|
</a>
|
|
|
|
<a href="https://console.firebase.google.com/project/krow-workforce-staging/overview" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-orange-100 rounded-xl hover:from-amber-100 hover:to-orange-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-orange-500" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M3.89 15.672L6.255.461A.542.542 0 017.27.288l2.543 4.771zm16.794 3.692l-2.25-14.03a.542.542 0 00-.919-.295L3.316 19.365l7.856 4.427a1.621 1.621 0 001.588 0zM14.3 7.147l-1.82-3.482a.542.542 0 00-.96 0L3.53 17.984z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-orange-700">Firebase Console</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
|
</a>
|
|
|
|
<a href="https://console.cloud.google.com/welcome/new?project=krow-workforce-dev" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-blue-50 to-cyan-100 rounded-xl hover:from-blue-100 hover:to-cyan-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-cyan-700">Google Cloud</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-blue-500 text-white text-xs font-semibold rounded-full">Dev</span>
|
|
</a>
|
|
|
|
<a href="https://console.cloud.google.com/welcome/new?project=krow-workforce-staging" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-amber-50 to-yellow-100 rounded-xl hover:from-amber-100 hover:to-yellow-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-blue-600" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12.19 2.38a8.85 8.85 0 00-10.4 9.28l5.18-5.18a4.89 4.89 0 012.5-.72 4.89 4.89 0 011.72-.07zm7.6 2.24a8.85 8.85 0 01-7.6 14.91l4.5-4.5a4.89 4.89 0 002.45-2.55 4.89 4.89 0 00.65-7.86z"></path>
|
|
</svg>
|
|
<span class="font-medium text-gray-900 group-hover:text-yellow-700">Google Cloud</span>
|
|
</div>
|
|
<span class="px-3 py-1 bg-amber-500 text-white text-xs font-semibold rounded-full">Staging</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Access & Resources Card -->
|
|
<div class="card-hover bg-white rounded-2xl shadow-lg p-6 border border-gray-100">
|
|
<div class="flex items-center space-x-3 mb-6">
|
|
<div class="w-10 h-10 bg-indigo-100 rounded-lg flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
|
|
</svg>
|
|
</div>
|
|
<h3 class="text-xl font-bold text-gray-900">Resources</h3>
|
|
</div>
|
|
|
|
<div class="space-y-3">
|
|
<a href="https://github.com/Oloodi/krow-workforce" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-gray-50 to-slate-100 rounded-xl hover:from-gray-100 hover:to-slate-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-gray-900" fill="currentColor" viewBox="0 0 24 24">
|
|
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"></path>
|
|
</svg>
|
|
<div>
|
|
<div class="font-medium text-gray-900 group-hover:text-gray-700">GitHub Repository</div>
|
|
<div class="text-xs text-gray-500">View source code</div>
|
|
</div>
|
|
</div>
|
|
<svg class="w-5 h-5 text-gray-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</a>
|
|
|
|
<a href="https://chat.google.com/" target="_blank"
|
|
class="flex items-center justify-between p-4 bg-gradient-to-r from-green-50 to-teal-100 rounded-xl hover:from-green-100 hover:to-teal-200 transition-all group">
|
|
<div class="flex items-center space-x-3">
|
|
<svg class="w-5 h-5 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
|
</svg>
|
|
<div>
|
|
<div class="font-medium text-gray-900 group-hover:text-teal-700">Team Communication</div>
|
|
<div class="text-xs text-gray-500">Google Chat</div>
|
|
</div>
|
|
</div>
|
|
<svg class="w-5 h-5 text-gray-400 group-hover:translate-x-1 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Diagram Viewer -->
|
|
<div id="diagram-viewer" class="hidden h-full flex flex-col p-8">
|
|
<div class="flex items-center justify-between mb-6">
|
|
<h3 id="diagram-title" class="text-2xl font-bold text-gray-900"></h3>
|
|
<div class="flex items-center space-x-2 bg-white rounded-xl shadow-lg p-2 border border-gray-200">
|
|
<button id="zoomInBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Zoom In">
|
|
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v6m3-3H7"></path>
|
|
</svg>
|
|
</button>
|
|
<button id="zoomOutBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Zoom Out">
|
|
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM13 10H7"></path>
|
|
</svg>
|
|
</button>
|
|
<button id="resetBtn" class="p-2 hover:bg-gray-100 rounded-lg transition-colors" title="Reset View">
|
|
<svg class="w-5 h-5 text-gray-700" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<div id="diagram-container" tabindex="-1"
|
|
class="flex-1 bg-white rounded-2xl shadow-xl border border-gray-200 overflow-hidden cursor-grab flex items-center justify-center p-8">
|
|
<!-- SVG will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document Viewer -->
|
|
<div id="document-viewer" class="hidden h-full flex flex-col p-8">
|
|
<div class="mb-6">
|
|
<h3 id="document-title" class="text-2xl font-bold text-gray-900"></h3>
|
|
</div>
|
|
<div id="document-container"
|
|
class="flex-1 bg-white rounded-2xl shadow-xl border border-gray-200 overflow-y-auto p-8 markdown-content">
|
|
<!-- Document content will be loaded here -->
|
|
</div>
|
|
</div>
|
|
|
|
</main>
|
|
</div>
|
|
|
|
<!-- Panzoom -->
|
|
<script src="https://cdn.jsdelivr.net/npm/@panzoom/panzoom@4.5.1/dist/panzoom.min.js"></script>
|
|
|
|
<script>
|
|
let allDiagrams = [];
|
|
let allDocuments = [];
|
|
const homeView = document.getElementById('home-view');
|
|
const diagramViewer = document.getElementById('diagram-viewer');
|
|
const diagramContainer = document.getElementById('diagram-container');
|
|
const diagramTitle = document.getElementById('diagram-title');
|
|
const documentViewer = document.getElementById('document-viewer');
|
|
const documentContainer = document.getElementById('document-container');
|
|
const documentTitle = document.getElementById('document-title');
|
|
const zoomInBtn = document.getElementById('zoomInBtn');
|
|
const zoomOutBtn = document.getElementById('zoomOutBtn');
|
|
const resetBtn = document.getElementById('resetBtn');
|
|
|
|
let panzoomInstance = null;
|
|
let currentScale = 1;
|
|
|
|
// Initialize Mermaid
|
|
mermaid.initialize({
|
|
startOnLoad: false,
|
|
theme: 'default',
|
|
flowchart: {
|
|
useMaxWidth: false,
|
|
htmlLabels: true,
|
|
curve: 'basis'
|
|
}
|
|
});
|
|
|
|
// Build hierarchical structure from paths
|
|
function buildDiagramHierarchy(diagrams) {
|
|
const hierarchy = {};
|
|
|
|
diagrams.forEach(diagram => {
|
|
const parts = diagram.path.split('/');
|
|
const relevantParts = parts.slice(2, -1); // Remove 'assets/diagrams/' and filename
|
|
|
|
let current = hierarchy;
|
|
relevantParts.forEach(part => {
|
|
if (!current[part]) {
|
|
current[part] = { _items: [], _children: {} };
|
|
}
|
|
current = current[part]._children;
|
|
});
|
|
|
|
// Add the item to appropriate level
|
|
if (relevantParts.length > 0) {
|
|
let parent = hierarchy[relevantParts[0]];
|
|
for (let i = 1; i < relevantParts.length; i++) {
|
|
parent = parent._children[relevantParts[i]];
|
|
}
|
|
parent._items.push(diagram);
|
|
} else {
|
|
// Root level diagrams
|
|
if (!hierarchy._root) {
|
|
hierarchy._root = { _items: [], _children: {} };
|
|
}
|
|
hierarchy._root._items.push(diagram);
|
|
}
|
|
});
|
|
|
|
return hierarchy;
|
|
}
|
|
|
|
// Build hierarchical structure from paths (for documents)
|
|
function buildDocumentHierarchy(documents) {
|
|
const hierarchy = {};
|
|
|
|
documents.forEach(doc => {
|
|
const parts = doc.path.split('/');
|
|
const relevantParts = parts.slice(2, -1); // Remove 'assets/documents/' and filename
|
|
|
|
let current = hierarchy;
|
|
relevantParts.forEach(part => {
|
|
if (!current[part]) {
|
|
current[part] = { _items: [], _children: {} };
|
|
}
|
|
current = current[part]._children;
|
|
});
|
|
|
|
// Add the item to appropriate level
|
|
if (relevantParts.length > 0) {
|
|
let parent = hierarchy[relevantParts[0]];
|
|
for (let i = 1; i < relevantParts.length; i++) {
|
|
parent = parent._children[relevantParts[i]];
|
|
}
|
|
parent._items.push(doc);
|
|
} else {
|
|
// Root level documents
|
|
if (!hierarchy._root) {
|
|
hierarchy._root = { _items: [], _children: {} };
|
|
}
|
|
hierarchy._root._items.push(doc);
|
|
}
|
|
});
|
|
|
|
return hierarchy;
|
|
}
|
|
|
|
// Create navigation from hierarchy
|
|
function createNavigation(hierarchy, parentElement, level = 0) {
|
|
// First, show root level items if any
|
|
if (hierarchy._root && hierarchy._root._items.length > 0) {
|
|
const mainHeading = document.createElement('div');
|
|
mainHeading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3';
|
|
mainHeading.textContent = 'Diagrams';
|
|
parentElement.appendChild(mainHeading);
|
|
|
|
hierarchy._root._items.forEach(diagram => {
|
|
createDiagramLink(diagram, parentElement, 0);
|
|
});
|
|
}
|
|
|
|
// Then process nested categories
|
|
Object.keys(hierarchy).forEach(key => {
|
|
if (key === '_items' || key === '_children' || key === '_root') return;
|
|
|
|
const section = hierarchy[key];
|
|
const heading = document.createElement('div');
|
|
heading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider ' +
|
|
(level === 0 ? 'mt-6 mb-3' : 'mt-4 mb-2 pl-8');
|
|
heading.textContent = key.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
|
parentElement.appendChild(heading);
|
|
|
|
// Add items in this section
|
|
if (section._items && section._items.length > 0) {
|
|
section._items.forEach(diagram => {
|
|
createDiagramLink(diagram, parentElement, level);
|
|
});
|
|
}
|
|
|
|
// Recursively add children
|
|
if (section._children && Object.keys(section._children).length > 0) {
|
|
createNavigation(section._children, parentElement, level + 1);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Create document navigation from hierarchy
|
|
function createDocumentNavigation(hierarchy, parentElement, level = 0) {
|
|
// First, show root level items if any
|
|
if (hierarchy._root && hierarchy._root._items.length > 0) {
|
|
const mainHeading = document.createElement('div');
|
|
mainHeading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-6 mb-3';
|
|
mainHeading.textContent = 'Documentation';
|
|
parentElement.appendChild(mainHeading);
|
|
|
|
hierarchy._root._items.forEach(doc => {
|
|
createDocumentLink(doc, parentElement, 0);
|
|
});
|
|
}
|
|
|
|
// Then process nested categories
|
|
Object.keys(hierarchy).forEach(key => {
|
|
if (key === '_items' || key === '_children' || key === '_root') return;
|
|
|
|
const section = hierarchy[key];
|
|
const heading = document.createElement('div');
|
|
heading.className = 'px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider ' +
|
|
(level === 0 ? 'mt-6 mb-3' : 'mt-4 mb-2 pl-8');
|
|
heading.textContent = key.split('-').map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
|
|
parentElement.appendChild(heading);
|
|
|
|
// Add items in this section
|
|
if (section._items && section._items.length > 0) {
|
|
section._items.forEach(doc => {
|
|
createDocumentLink(doc, parentElement, level);
|
|
});
|
|
}
|
|
|
|
// Recursively add children
|
|
if (section._children && Object.keys(section._children).length > 0) {
|
|
createDocumentNavigation(section._children, parentElement, level + 1);
|
|
}
|
|
});
|
|
}
|
|
|
|
// Helper function to create a document link
|
|
function createDocumentLink(doc, parentElement, level) {
|
|
const link = document.createElement('a');
|
|
link.href = '#';
|
|
link.className = 'nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1' +
|
|
(level > 0 ? ' pl-8' : '');
|
|
link.onclick = (e) => {
|
|
e.preventDefault();
|
|
showView('document', link, doc.path, doc.title);
|
|
};
|
|
|
|
const iconSvg = `<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>`;
|
|
|
|
link.innerHTML = `${iconSvg}<span class="text-sm">${doc.title}</span>`;
|
|
parentElement.appendChild(link);
|
|
}
|
|
|
|
// Helper function to create a diagram link
|
|
function createDiagramLink(diagram, parentElement, level) {
|
|
const link = document.createElement('a');
|
|
link.href = '#';
|
|
link.className = 'nav-item flex items-center space-x-3 px-4 py-3 rounded-xl text-gray-700 hover:bg-gray-50 mb-1' +
|
|
(level > 0 ? ' pl-8' : '');
|
|
link.onclick = (e) => {
|
|
e.preventDefault();
|
|
showView('diagram', link, diagram.path, diagram.title, diagram.type);
|
|
};
|
|
|
|
// Get icon based on type or custom icon
|
|
let iconSvg = '';
|
|
if (diagram.type === 'svg') {
|
|
iconSvg = `<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
|
|
</svg>`;
|
|
} else {
|
|
iconSvg = `<svg class="w-5 h-5 text-gray-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
|
|
</svg>`;
|
|
}
|
|
|
|
link.innerHTML = iconSvg + '<span class="text-sm">' + diagram.title + '</span>';
|
|
parentElement.appendChild(link);
|
|
}
|
|
|
|
// Load all diagrams from config
|
|
async function loadAllDiagrams() {
|
|
const dynamicSection = document.getElementById('dynamic-diagrams-section');
|
|
|
|
try {
|
|
const response = await fetch('./assets/diagrams/diagrams-config.json');
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load diagrams config: ${response.status}`);
|
|
}
|
|
|
|
const text = await response.text();
|
|
console.log('Loaded config:', text);
|
|
allDiagrams = JSON.parse(text);
|
|
|
|
if (allDiagrams && allDiagrams.length > 0) {
|
|
const hierarchy = buildDiagramHierarchy(allDiagrams);
|
|
createNavigation(hierarchy, dynamicSection);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading diagrams configuration:', error);
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'px-4 py-3 mx-2 mt-4 text-xs text-amber-600 bg-amber-50 rounded-lg border border-amber-200';
|
|
errorDiv.innerHTML = `
|
|
<div class="font-semibold mb-1">⚠️ Diagrams</div>
|
|
<div>Unable to load diagrams-config.json</div>
|
|
<div class="mt-1 text-amber-500">${error.message}</div>
|
|
`;
|
|
dynamicSection.appendChild(errorDiv);
|
|
}
|
|
}
|
|
|
|
// Load all documentation from config
|
|
async function loadAllDocuments() {
|
|
const documentationSection = document.getElementById('documentation-section');
|
|
|
|
try {
|
|
const response = await fetch('./assets/documents/documents-config.json');
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load documents config: ${response.status}`);
|
|
}
|
|
|
|
const text = await response.text();
|
|
console.log('Loaded documents config:', text);
|
|
allDocuments = JSON.parse(text);
|
|
|
|
if (allDocuments && allDocuments.length > 0) {
|
|
const hierarchy = buildDocumentHierarchy(allDocuments);
|
|
createDocumentNavigation(hierarchy, documentationSection);
|
|
}
|
|
} catch (error) {
|
|
console.error('Error loading documents configuration:', error);
|
|
const errorDiv = document.createElement('div');
|
|
errorDiv.className = 'px-4 py-3 mx-2 mt-4 text-xs text-amber-600 bg-amber-50 rounded-lg border border-amber-200';
|
|
errorDiv.innerHTML = `
|
|
<div class="font-semibold mb-1">⚠️ Documentation</div>
|
|
<div>Unable to load documents-config.json</div>
|
|
<div class="mt-1 text-amber-500">${error.message}</div>
|
|
`;
|
|
documentationSection.appendChild(errorDiv);
|
|
}
|
|
}
|
|
|
|
function setActiveNav(activeLink) {
|
|
document.querySelectorAll('#sidebar-nav a').forEach(link => {
|
|
link.classList.remove('bg-primary-50', 'border', 'border-primary-200', 'text-primary-700');
|
|
link.classList.add('text-gray-700');
|
|
});
|
|
activeLink.classList.remove('text-gray-700');
|
|
activeLink.classList.add('bg-primary-50', 'border', 'border-primary-200', 'text-primary-700');
|
|
}
|
|
|
|
async function showView(viewName, navLink, filePath, title, type = 'svg') {
|
|
setActiveNav(navLink);
|
|
if (panzoomInstance) {
|
|
panzoomInstance.destroy();
|
|
panzoomInstance = null;
|
|
}
|
|
diagramContainer.innerHTML = '';
|
|
documentContainer.innerHTML = '';
|
|
currentScale = 1;
|
|
|
|
if (viewName === 'home') {
|
|
homeView.classList.remove('hidden');
|
|
diagramViewer.classList.add('hidden');
|
|
documentViewer.classList.add('hidden');
|
|
} else if (viewName === 'diagram') {
|
|
homeView.classList.add('hidden');
|
|
diagramViewer.classList.remove('hidden');
|
|
documentViewer.classList.add('hidden');
|
|
diagramTitle.textContent = title;
|
|
diagramContainer.innerHTML = `
|
|
<div class="flex flex-col items-center space-y-3">
|
|
<div class="w-12 h-12 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin"></div>
|
|
<p class="text-gray-600 font-medium">Loading diagram...</p>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
if (type === 'svg') {
|
|
const response = await fetch(filePath);
|
|
if (!response.ok) throw new Error(`Network error: ${response.status}`);
|
|
const svgContent = await response.text();
|
|
|
|
const parser = new DOMParser();
|
|
const svgDoc = parser.parseFromString(svgContent, "image/svg+xml");
|
|
const svgElement = svgDoc.querySelector('svg');
|
|
|
|
if (svgElement) {
|
|
diagramContainer.innerHTML = '';
|
|
diagramContainer.appendChild(svgElement);
|
|
panzoomInstance = Panzoom(svgElement, {
|
|
canvas: true,
|
|
maxScale: 10,
|
|
minScale: 0.3,
|
|
startScale: 1
|
|
});
|
|
diagramContainer.addEventListener('wheel', panzoomInstance.zoomWithWheel);
|
|
diagramContainer.focus();
|
|
} else {
|
|
throw new Error('No SVG element found.');
|
|
}
|
|
} else if (type === 'mermaid') {
|
|
const response = await fetch(filePath);
|
|
if (!response.ok) throw new Error(`Network error: ${response.status}`);
|
|
const mermaidCode = await response.text();
|
|
|
|
const { svg } = await mermaid.render('mermaidDiagram_' + Date.now(), mermaidCode);
|
|
|
|
diagramContainer.innerHTML = svg;
|
|
const svgElement = diagramContainer.querySelector('svg');
|
|
|
|
if (svgElement) {
|
|
svgElement.style.maxWidth = 'none';
|
|
svgElement.style.height = 'auto';
|
|
|
|
panzoomInstance = Panzoom(svgElement, {
|
|
canvas: true,
|
|
maxScale: 10,
|
|
minScale: 0.3,
|
|
startScale: 1
|
|
});
|
|
diagramContainer.addEventListener('wheel', panzoomInstance.zoomWithWheel);
|
|
diagramContainer.focus();
|
|
} else {
|
|
throw new Error('Failed to render Mermaid diagram.');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
diagramContainer.innerHTML = `
|
|
<div class="bg-red-50 border border-red-200 rounded-xl p-6 max-w-md">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<h4 class="font-bold text-red-900">Failed to load diagram</h4>
|
|
</div>
|
|
<p class="text-red-700 text-sm">${error.message}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
} else if (viewName === 'document') {
|
|
homeView.classList.add('hidden');
|
|
diagramViewer.classList.add('hidden');
|
|
documentViewer.classList.remove('hidden');
|
|
documentTitle.textContent = title;
|
|
documentContainer.innerHTML = `
|
|
<div class="flex flex-col items-center justify-center space-y-3 py-12">
|
|
<div class="w-12 h-12 border-4 border-primary-200 border-t-primary-600 rounded-full animate-spin"></div>
|
|
<p class="text-gray-600 font-medium">Loading document...</p>
|
|
</div>
|
|
`;
|
|
|
|
try {
|
|
const response = await fetch(filePath);
|
|
if (!response.ok) {
|
|
throw new Error(`Failed to load document: ${response.status}`);
|
|
}
|
|
|
|
const markdownText = await response.text();
|
|
const htmlContent = marked.parse(markdownText);
|
|
documentContainer.innerHTML = htmlContent;
|
|
} catch (error) {
|
|
console.error('Error loading document:', error);
|
|
documentContainer.innerHTML = `
|
|
<div class="bg-red-50 border border-red-200 rounded-xl p-6">
|
|
<div class="flex items-center space-x-3 mb-2">
|
|
<svg class="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
</svg>
|
|
<h4 class="font-bold text-red-900">Failed to load document</h4>
|
|
</div>
|
|
<p class="text-red-700 text-sm">${error.message}</p>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|
|
}
|
|
|
|
zoomInBtn.addEventListener('click', () => {
|
|
if (panzoomInstance) {
|
|
panzoomInstance.zoomIn();
|
|
diagramContainer.focus();
|
|
}
|
|
});
|
|
|
|
zoomOutBtn.addEventListener('click', () => {
|
|
if (panzoomInstance) {
|
|
panzoomInstance.zoomOut();
|
|
diagramContainer.focus();
|
|
}
|
|
});
|
|
|
|
resetBtn.addEventListener('click', () => {
|
|
if (panzoomInstance) {
|
|
panzoomInstance.reset();
|
|
diagramContainer.focus();
|
|
}
|
|
});
|
|
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadAllDiagrams();
|
|
loadAllDocuments();
|
|
showView('home', document.getElementById('nav-home'));
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |