added tape

website/tape.js

@@ -0,0 +1,174 @@
+function addTapeToImages() {
+    const images = document.querySelectorAll('.image-placeholder');
+    console.log(`[Tape] Found ${images.length} images to add tape to`);
+    
+    if (images.length === 0) {
+        console.warn('[Tape] No .image-placeholder elements found');
+        return;
+    }
+    
+    images.forEach((image, index) => {
+        console.log(`[Tape] Processing image ${index + 1}/${images.length}`);
+        
+        // Check if image already has tape
+        const existingTape = image.querySelectorAll('.tape');
+        if (existingTape.length > 0) {
+            console.log(`[Tape] Image ${index + 1} already has tape, skipping`);
+            return;
+        }
+        
+        // Ensure the image parent has relative positioning
+        const imageParent = image.parentElement;
+        if (imageParent && window.getComputedStyle(imageParent).position === 'static') {
+            imageParent.style.position = 'relative';
+            console.log(`[Tape] Set image parent to relative positioning`);
+        }
+        
+        // Create two tape pieces
+        const tape1 = createTapeElement(index, 1);
+        const tape2 = createTapeElement(index, 2);
+        
+        // Position based on pattern
+        const usePattern1 = index % 2 === 0;
+        if (usePattern1) {
+            positionTape(tape1, 'top-left');
+            positionTape(tape2, 'bottom-right');
+        } else {
+            positionTape(tape1, 'top-right');
+            positionTape(tape2, 'bottom-left');
+        }
+        
+        // Add to the image's parent container
+        imageParent.appendChild(tape1);
+        imageParent.appendChild(tape2);
+        
+        console.log(`[Tape] Added tape to image ${index + 1} parent`);
+    });
+}
+
+function createTapeElement(imageIndex, tapeNumber) {
+    const tape = document.createElement('div');
+    tape.className = 'tape';
+    
+    // Even chunkier tape: wider and much taller
+    const width = 60 + Math.random() * 20; // 60-80px
+    const height = 40 + Math.random() * 16; // 40-56px
+    
+    tape.style.cssText = `
+        position: absolute;
+        width: ${width}px;
+        height: ${height}px;
+        background: rgba(255, 248, 220, 0.93);
+        z-index: 100;
+        pointer-events: none;
+        box-shadow: 2px 2px 6px rgba(0,0,0,0.18);
+        background-image: linear-gradient(45deg, 
+            rgba(255, 255, 255, 0.25) 25%, 
+            transparent 25%, 
+            transparent 75%, 
+            rgba(255, 255, 255, 0.25) 75%);
+        background-size: 4px 4px;
+    `;
+    
+    console.log(`[Tape] Created tape element ${tapeNumber} for image ${imageIndex + 1}`);
+    return tape;
+}
+
+function positionTape(tape, corner) {
+    const randomOffset = () => Math.random() * 8 - 4; // -4 to 4px
+    const randomRotation = (Math.random() * 20 - 10); // -10 to 10 degrees
+    const OUT_X = 25; // px, how far out from the left/right
+    const OUT_Y = 18; // px, how far out from the top/bottom
+
+    switch (corner) {
+        case 'top-left':
+            tape.style.top = `${-OUT_Y + randomOffset()}px`;
+            tape.style.left = `${-OUT_X + randomOffset()}px`;
+            tape.style.transform = `rotate(${-45 + randomRotation}deg)`;
+            break;
+        case 'top-right':
+            tape.style.top = `${-OUT_Y + randomOffset()}px`;
+            tape.style.right = `${-OUT_X + randomOffset()}px`;
+            tape.style.transform = `rotate(${45 + randomRotation}deg)`;
+            break;
+        case 'bottom-left':
+            tape.style.bottom = `${-OUT_Y + randomOffset()}px`;
+            tape.style.left = `${-OUT_X + randomOffset()}px`;
+            tape.style.transform = `rotate(${45 + randomRotation}deg)`;
+            break;
+        case 'bottom-right':
+            tape.style.bottom = `${-OUT_Y + randomOffset()}px`;
+            tape.style.right = `${-OUT_X + randomOffset()}px`;
+            tape.style.transform = `rotate(${-45 + randomRotation}deg)`;
+            break;
+    }
+    
+    console.log(`[Tape] Positioned tape at ${corner}:`, {
+        top: tape.style.top,
+        bottom: tape.style.bottom,
+        left: tape.style.left,
+        right: tape.style.right,
+        transform: tape.style.transform
+    });
+}
+
+function refreshTape() {
+    console.log('[Tape] Refreshing tape - removing existing tape');
+    
+    // Remove existing tape
+    const existingTape = document.querySelectorAll('.tape');
+    console.log(`[Tape] Found ${existingTape.length} existing tape elements to remove`);
+    
+    existingTape.forEach(tape => tape.remove());
+    
+    console.log('[Tape] Re-adding tape to images');
+    addTapeToImages();
+}
+
+// Simple test function
+function testSimpleTape() {
+    console.log('[Tape Test] Creating simple test...');
+    
+    const firstImage = document.querySelector('.image-placeholder');
+    if (!firstImage) {
+        console.error('[Tape Test] No images found');
+        return;
+    }
+    
+    const parent = firstImage.parentElement;
+    parent.style.position = 'relative';
+    
+    const testTape = document.createElement('div');
+    testTape.className = 'tape';
+    testTape.style.cssText = `
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        width: 60px;
+        height: 30px;
+        background: red;
+        border: 2px solid black;
+        z-index: 999;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-weight: bold;
+    `;
+    testTape.textContent = 'TEST';
+    
+    parent.appendChild(testTape);
+    console.log('[Tape Test] Added test tape to first image parent');
+    
+    setTimeout(() => {
+        testTape.remove();
+        console.log('[Tape Test] Removed test tape');
+    }, 3000);
+}
+
+// Export functions
+window.addTapeToImages = addTapeToImages;
+window.refreshTape = refreshTape;
+window.testSimpleTape = testSimpleTape;
+
+console.log('[Tape] Simple tape system loaded. Use window.testSimpleTape() to test.');