commit 7eaa885225687ab8e65c3da859062206e8ad6707
parent 345aa336d125f06a0dcc55b92eed06b396d6d3a3
Author: Jennifer Lu
Date:   Tue, 15 Jul 2025 20:24:38 -0400

Add ability to see preview in full screen

Diffstat:

Mindex.html | 68++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++


1 file changed, 68 insertions(+), 0 deletions(-)

diff --git a/index.html b/index.html
@@ -51,6 +51,45 @@
 			position: relative;
 		}
 
+		.fullscreen-toggle {
+			position: absolute;
+			top: 5px;
+			left: 5px;
+			z-index: 1000;
+			background: rgba(0, 0, 0, 0.2);
+			color: white;
+			border: none;
+			border-radius: 4px;
+			padding: 5px 8px;
+			cursor: pointer;
+			font-size: 16px;
+			transition: background-color 0.2s;
+		}
+
+		.fullscreen-toggle:hover {
+			background: rgba(0, 0, 0, 0.5);
+		}
+
+		.preview-pane.fullscreen {
+			position: fixed;
+			top: 0;
+			left: 0;
+			width: 100vw;
+			height: 100vh;
+			z-index: 9999;
+			background: white;
+		}
+
+		.preview-pane.fullscreen .fullscreen-toggle {
+			top: 20px;
+			left: 20px;
+		}
+
+		/* Hide editor when preview is fullscreen */
+		.editor-pane.hidden {
+			display: none;
+		}
+
 		#editor {
 			width: 100%;
 			height: 100%;
@@ -132,6 +171,7 @@
 	</div>
 	
 	<div class="preview-pane">
+		<button class="fullscreen-toggle" id="fullscreenToggle" title="Toggle fullscreen">⛶</button>
 		<iframe id="preview"></iframe>
 	</div>
 
@@ -140,6 +180,34 @@
 		let editorView;
 		const preview = document.getElementById('preview');
 		const storageKey = 'html-lab-content';
+		let isFullscreen = false;
+
+		// Fullscreen toggle functionality
+		function toggleFullscreen() {
+			const previewPane = document.querySelector('.preview-pane');
+			const editorPane = document.querySelector('.editor-pane');
+			const toggleButton = document.getElementById('fullscreenToggle');
+			
+			isFullscreen = !isFullscreen;
+			
+			if (isFullscreen) {
+				previewPane.classList.add('fullscreen');
+				editorPane.classList.add('hidden');
+				toggleButton.textContent = '⛶';
+				toggleButton.title = 'Exit fullscreen';
+			} else {
+				previewPane.classList.remove('fullscreen');
+				editorPane.classList.remove('hidden');
+				toggleButton.textContent = '⛶';
+				toggleButton.title = 'Toggle fullscreen';
+			}
+		}
+
+		// Add event listener for fullscreen toggle
+		document.addEventListener('DOMContentLoaded', function() {
+			const toggleButton = document.getElementById('fullscreenToggle');
+			toggleButton.addEventListener('click', toggleFullscreen);
+		});
 
 		function updatePreview() {
 			const code = editorView.state.doc.toString();