renamed files and full screen mode fo mermaid viewer

2025-10-17 10:14:45 +05:30 · 2025-10-17 10:14:45 +05:30 · 2fd66a1c59
commit 2fd66a1c59
parent 4e92cb73cf
6 changed files with 127 additions and 0 deletions
--- a/Mermaid_Selector.html
+++ b/Mermaid_Selector.html
@ -299,6 +299,58 @@
                grid-template-columns: 1fr;
            }
        }
+
+        /* Fullscreen mode styles */
+        .fullscreen-mode {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100vw;
+            height: 100vh;
+            z-index: 9999;
+            background: #f8f9fa;
+            padding: 20px;
+            margin: 0;
+            border-radius: 0;
+            box-shadow: none;
+        }
+
+        .fullscreen-mode #diagramOutput {
+            width: 100%;
+            height: 100%;
+            min-height: calc(100vh - 40px);
+            border-radius: 0;
+            background: white;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        }
+
+        .fullscreen-exit-hint {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: rgba(102, 126, 234, 0.95);
+            color: white;
+            padding: 12px 24px;
+            border-radius: 25px;
+            font-size: 1em;
+            font-weight: 600;
+            z-index: 10000;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
+            animation: slideDown 0.3s ease;
+            pointer-events: none;
+        }
+
+        @keyframes slideDown {
+            from {
+                transform: translateX(-50%) translateY(-20px);
+                opacity: 0;
+            }
+            to {
+                transform: translateX(-50%) translateY(0);
+                opacity: 1;
+            }
+        }
    </style>
 </head>
 <body>
@ -355,6 +407,7 @@ graph TD
                        <button class="zoom-btn" onclick="zoomOut()" title="Zoom Out">−</button>
                        <button class="zoom-btn" onclick="resetZoom()" title="Reset Zoom" style="font-size: 1.2em;">⟲</button>
                        <button class="zoom-btn" onclick="fitToScreen()" title="Fit to Screen" style="font-size: 1.2em;">⛶</button>
+                        <button class="zoom-btn" id="fullscreenBtn" onclick="toggleFullscreen()" title="Fullscreen Mode" style="font-size: 1.2em; background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);">📺</button>
                        <button class="zoom-btn" onclick="exportAsSVG()" title="Export as SVG (Best for Word/PDF - Vector Format)" style="font-size: 1em; background: linear-gradient(135deg, #28a745 0%, #20c997 100%);">SVG</button>
                        <button class="zoom-btn" onclick="exportAsPNG()" title="Export as PNG (Raster Format)" style="font-size: 1em;">PNG</button>
                        <button class="zoom-btn" onclick="exportAsJPEG()" title="Export as JPEG (Raster Format)" style="font-size: 1em;">JPG</button>
@ -618,6 +671,80 @@ graph TD
            exportDiagram('jpeg');
        }

+        function toggleFullscreen() {
+            const panel = document.querySelector('.panel:last-child');
+            const output = document.getElementById('diagramOutput');
+            const fullscreenBtn = document.getElementById('fullscreenBtn');
+            
+            if (!output.querySelector('svg')) {
+                showMessage('❌ No diagram to display in fullscreen', 'error');
+                return;
+            }
+
+            if (!panel.classList.contains('fullscreen-mode')) {
+                // Enter fullscreen
+                panel.classList.add('fullscreen-mode');
+                
+                // Update button icon and title
+                fullscreenBtn.innerHTML = '✕';
+                fullscreenBtn.title = 'Exit Fullscreen (Press ESC)';
+                fullscreenBtn.style.background = 'linear-gradient(135deg, #e74c3c 0%, #c0392b 100%)';
+                
+                // Show exit hint
+                const hint = document.createElement('div');
+                hint.className = 'fullscreen-exit-hint';
+                hint.textContent = '🖥️ Fullscreen Mode Active | Press ESC or click ✕ to exit';
+                hint.id = 'fullscreenHint';
+                document.body.appendChild(hint);
+                
+                // Auto-hide hint after 4 seconds
+                setTimeout(() => {
+                    const hintElement = document.getElementById('fullscreenHint');
+                    if (hintElement) {
+                        hintElement.style.transition = 'opacity 0.3s ease';
+                        hintElement.style.opacity = '0';
+                        setTimeout(() => hintElement.remove(), 300);
+                    }
+                }, 4000);
+                
+                // Fit to screen after a short delay for layout adjustment
+                setTimeout(() => {
+                    fitToScreen();
+                }, 100);
+                
+                showMessage('✅ Fullscreen mode activated - Press ESC to exit', 'success');
+            } else {
+                // Exit fullscreen
+                panel.classList.remove('fullscreen-mode');
+                
+                // Update button icon and title back
+                fullscreenBtn.innerHTML = '📺';
+                fullscreenBtn.title = 'Fullscreen Mode';
+                fullscreenBtn.style.background = 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)';
+                
+                // Remove hint if still visible
+                const hint = document.getElementById('fullscreenHint');
+                if (hint) hint.remove();
+                
+                // Reset zoom after exiting fullscreen
+                setTimeout(() => {
+                    fitToScreen();
+                }, 100);
+                
+                showMessage('✅ Exited fullscreen mode', 'success');
+            }
+        }
+
+        // ESC key to exit fullscreen
+        document.addEventListener('keydown', function(e) {
+            if (e.key === 'Escape') {
+                const panel = document.querySelector('.panel:last-child');
+                if (panel && panel.classList.contains('fullscreen-mode')) {
+                    toggleFullscreen();
+                }
+            }
+        });
+
        function exportAsSVG() {
            const output = document.getElementById('diagramOutput');
            const svg = output.querySelector('svg');
--- a/V1.1.pdf
+++ b/V1.1.pdf
--- a/atreamlined_workflow_extracted_content.txt
+++ b/atreamlined_workflow_extracted_content.txt
--- a/settlment_diagram.mermaid
+++ b/settlment_diagram.mermaid
--- a/onboard_offboard_completeflow.mermaid
+++ b/onboard_offboard_completeflow.mermaid
--- a/streamlined_project_flow.mermaid
+++ b/streamlined_project_flow.mermaid