diff --git a/templates/_layout.html b/templates/_layout.html
index 0bac31c..8bdb60b 100644
--- a/templates/_layout.html
+++ b/templates/_layout.html
@@ -34,7 +34,6 @@
-
<!-- ::PAGE_TITLE:: -->
diff --git a/website/tape-debug.js b/website/tape-debug.js
deleted file mode 100644
index db52acd..0000000
--- a/website/tape-debug.js
+++ /dev/null
@@ -1,283 +0,0 @@
-class TapeDebugger {
- constructor() {
- this.enabled = false;
- this.debugOverlay = null;
- this.debugInfo = null;
- this.setupDebugUI();
- }
-
- setupDebugUI() {
- // Create debug toggle button
- const debugButton = document.createElement('button');
- debugButton.textContent = 'Debug Tape';
- debugButton.style.cssText = `
- position: fixed;
- top: 10px;
- right: 10px;
- z-index: 10000; /* Increased to ensure button is always visible */
- padding: 10px;
- background: #ff4444;
- color: white;
- border: none;
- border-radius: 5px;
- cursor: pointer;
- font-family: monospace;
- font-weight: bold;
- `;
- debugButton.onclick = () => this.toggleDebug();
- document.body.appendChild(debugButton);
-
- // Create debug overlay
- this.debugOverlay = document.createElement('div');
- this.debugOverlay.style.cssText = `
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- pointer-events: none;
- z-index: 9999; /* Increased to appear above tape */
- display: none;
- `;
- document.body.appendChild(this.debugOverlay);
-
- // Create debug info panel
- this.debugInfo = document.createElement('div');
- this.debugInfo.style.cssText = `
- position: fixed;
- top: 60px;
- right: 10px;
- width: 300px;
- max-height: 80vh;
- overflow-y: auto;
- background: rgba(0, 0, 0, 0.9);
- color: white;
- padding: 15px;
- border-radius: 5px;
- font-family: monospace;
- font-size: 12px;
- z-index: 10000; /* Increased to ensure panel is always visible */
- display: none;
- `;
- document.body.appendChild(this.debugInfo);
- }
-
- toggleDebug() {
- this.enabled = !this.enabled;
- if (this.enabled) {
- this.showDebug();
- } else {
- this.hideDebug();
- }
- }
-
- showDebug() {
- console.log('[Tape Debug] Enabling visual debugging');
- this.debugOverlay.style.display = 'block';
- this.debugInfo.style.display = 'block';
- this.visualizeAllTape();
- this.updateDebugInfo();
- }
-
- hideDebug() {
- console.log('[Tape Debug] Disabling visual debugging');
- this.debugOverlay.style.display = 'none';
- this.debugInfo.style.display = 'none';
- this.debugOverlay.innerHTML = '';
- }
-
- visualizeAllTape() {
- this.debugOverlay.innerHTML = '';
- const images = document.querySelectorAll('.image-placeholder');
-
- images.forEach((image, imageIndex) => {
- this.visualizeImageDebug(image, imageIndex);
- });
- }
-
- visualizeImageDebug(image, imageIndex) {
- const rect = image.getBoundingClientRect();
- const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
- const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-
- // Create image outline
- const imageOutline = document.createElement('div');
- imageOutline.style.cssText = `
- position: absolute;
- left: ${rect.left + scrollLeft}px;
- top: ${rect.top + scrollTop}px;
- width: ${rect.width}px;
- height: ${rect.height}px;
- border: 3px solid #00ff00;
- background: rgba(0, 255, 0, 0.1);
- pointer-events: none;
- `;
-
- // Add image label
- const imageLabel = document.createElement('div');
- imageLabel.textContent = `IMG ${imageIndex + 1}`;
- imageLabel.style.cssText = `
- position: absolute;
- top: -25px;
- left: 0;
- background: #00ff00;
- color: black;
- padding: 2px 6px;
- font-size: 10px;
- font-weight: bold;
- `;
- imageOutline.appendChild(imageLabel);
-
- // Visualize tape pieces
- const tapeElements = image.querySelectorAll('.tape');
- tapeElements.forEach((tape, tapeIndex) => {
- this.visualizeTapeDebug(tape, tapeIndex, rect, scrollTop, scrollLeft, imageIndex);
- });
-
- this.debugOverlay.appendChild(imageOutline);
- }
-
- visualizeTapeDebug(tape, tapeIndex, imageRect, scrollTop, scrollLeft, imageIndex) {
- const tapeRect = tape.getBoundingClientRect();
-
- // Create tape outline
- const tapeOutline = document.createElement('div');
- tapeOutline.style.cssText = `
- position: absolute;
- left: ${tapeRect.left + scrollLeft}px;
- top: ${tapeRect.top + scrollTop}px;
- width: ${tapeRect.width}px;
- height: ${tapeRect.height}px;
- border: 2px solid #ff0000;
- background: rgba(255, 0, 0, 0.3);
- pointer-events: none;
- transform: ${tape.style.transform};
- `;
-
- // Add tape label
- const tapeLabel = document.createElement('div');
- tapeLabel.textContent = `T${tapeIndex + 1}`;
- tapeLabel.style.cssText = `
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: #ff0000;
- color: white;
- padding: 1px 3px;
- font-size: 8px;
- font-weight: bold;
- `;
- tapeOutline.appendChild(tapeLabel);
-
- // Add positioning info
- const positionInfo = document.createElement('div');
- const corner = this.determineTapeCorner(tape);
- positionInfo.textContent = corner;
- positionInfo.style.cssText = `
- position: absolute;
- top: -15px;
- left: 0;
- background: #ff0000;
- color: white;
- padding: 1px 3px;
- font-size: 8px;
- white-space: nowrap;
- `;
- tapeOutline.appendChild(positionInfo);
-
- this.debugOverlay.appendChild(tapeOutline);
- }
-
- determineTapeCorner(tape) {
- const style = tape.style;
- if (style.top && style.left) return 'TOP-LEFT';
- if (style.top && style.right) return 'TOP-RIGHT';
- if (style.bottom && style.left) return 'BOTTOM-LEFT';
- if (style.bottom && style.right) return 'BOTTOM-RIGHT';
- return 'UNKNOWN';
- }
-
- updateDebugInfo() {
- const images = document.querySelectorAll('.image-placeholder');
- const tapeElements = document.querySelectorAll('.tape');
-
- let infoHtml = `
- 🎬 Tape Debug Info
- Images: ${images.length}
- Tape Elements: ${tapeElements.length}
- Expected Tape: ${images.length * 2}
-
- `;
-
- images.forEach((image, index) => {
- const tapes = image.querySelectorAll('.tape');
- const pattern = index % 2 === 0 ? 'Pattern 1 (TL+BR)' : 'Pattern 2 (TR+BL)';
-
- infoHtml += `
-
- Image ${index + 1}:
- Pattern: ${pattern}
- Tape Count: ${tapes.length}/2
- ${tapes.length !== 2 ? '⚠️ Missing tape!' : '✓ Complete'}
-
- `;
- });
-
- // Add tape details
- tapeElements.forEach((tape, index) => {
- const corner = this.determineTapeCorner(tape);
- const transform = tape.style.transform || 'none';
- const size = `${tape.style.width} x ${tape.style.height}`;
-
- infoHtml += `
-
- Tape ${index + 1}: ${corner}
- Size: ${size}
- Transform: ${transform}
-
- `;
- });
-
- this.debugInfo.innerHTML = infoHtml;
- }
-
- // Method to refresh debug visualization when layout changes
- refresh() {
- if (this.enabled) {
- this.visualizeAllTape();
- this.updateDebugInfo();
- }
- }
-}
-
-// Initialize debugger
-const tapeDebugger = new TapeDebugger();
-
-// Add to global scope for easy access
-window.tapeDebugger = tapeDebugger;
-
-// Hook into existing functions to update debug visualization
-const originalAddTapeToImages = window.addTapeToImages;
-const originalRefreshTape = window.refreshTape;
-
-if (originalAddTapeToImages) {
- window.addTapeToImages = function() {
- originalAddTapeToImages.apply(this, arguments);
- setTimeout(() => tapeDebugger.refresh(), 100);
- };
-}
-
-if (originalRefreshTape) {
- window.refreshTape = function() {
- originalRefreshTape.apply(this, arguments);
- setTimeout(() => tapeDebugger.refresh(), 100);
- };
-}
-
-// Refresh debug on window resize
-window.addEventListener('resize', () => {
- setTimeout(() => tapeDebugger.refresh(), 200);
-});
-
-console.log('[Tape Debug] Visual debugging system loaded. Click "Debug Tape" button to toggle.');