Spaces:

jerrycans
/

thefiles

Sleeping

App Files Files Community

jerrycans commited on Dec 20, 2025

Commit

cf78d72

verified ·

1 Parent(s): b34d3b4

Update app.py

Browse files

Files changed (1) hide show

app.py +193 -215

app.py CHANGED Viewed

@@ -3,14 +3,9 @@ import os
 app = Flask(__name__)
-# Configuration
 LINKS_FILE = "links.txt"
-# Global state
-state = {
-    "status": "idle",
-    "images": []
-}
 def load_links():
     links = []
@@ -25,10 +20,7 @@ def load_links():
 def init_images():
     global state
     links = load_links()
-    if links:
-        state = {"status": "complete", "images": links}
-    else:
-        state = {"status": "error", "images": []}
 HTML_PAGE = '''<!DOCTYPE html>
 <html lang="en">
@@ -86,117 +78,80 @@ HTML_PAGE = '''<!DOCTYPE html>
             font-size: 11px;
             font-weight: 700;
             letter-spacing: 2px;
-            animation: flash 2s infinite;
         }
-        @keyframes flash {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.7; }
         }
-        /* ===== LOADING SCREEN ===== */
-        #loading-screen {
             display: flex;
-            flex-direction: column;
             align-items: center;
             justify-content: center;
-            min-height: calc(100vh - 120px);
-            padding: 40px 20px;
-        }
-        .epstein-loader {
-            position: relative;
-            width: 120px;
-            height: 120px;
-            margin-bottom: 30px;
         }
-        .epstein-image {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-            filter: grayscale(100%) contrast(1.2);
-            border: 3px solid #fff;
-            animation: imagePulse 2s ease-in-out infinite;
         }
-        @keyframes imagePulse {
-            0%, 100% {
-                filter: grayscale(100%) contrast(1.2) brightness(1);
-                transform: scale(1);
-            }
-            50% {
-                filter: grayscale(100%) contrast(1.5) brightness(1.2);
-                transform: scale(1.02);
-            }
         }
-        .corner-bracket {
-            position: absolute;
-            width: 15px;
-            height: 15px;
-            border: 2px solid #fff;
         }
-        .corner-bracket.tl { top: -6px; left: -6px; border-right: none; border-bottom: none; }
-        .corner-bracket.tr { top: -6px; right: -6px; border-left: none; border-bottom: none; }
-        .corner-bracket.bl { bottom: -6px; left: -6px; border-right: none; border-top: none; }
-        .corner-bracket.br { bottom: -6px; right: -6px; border-left: none; border-top: none; }
-        .scan-line {
-            position: absolute;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 3px;
-            background: #fff;
-            animation: scan 1.5s linear infinite;
-            box-shadow: 0 0 10px #fff;
         }
-        @keyframes scan {
-            0% { top: 0; opacity: 1; }
-            100% { top: 100%; opacity: 0.3; }
         }
-        .rotating-ring {
-            position: absolute;
-            top: -15px;
-            left: -15px;
-            right: -15px;
-            bottom: -15px;
-            border: 2px dashed rgba(255,255,255,0.3);
-            animation: rotate 8s linear infinite;
         }
-        @keyframes rotate {
-            from { transform: rotate(0deg); }
             to { transform: rotate(360deg); }
         }
         .loading-text {
-            font-size: 14px;
             letter-spacing: 4px;
-            color: #fff;
-            animation: textPulse 1.5s ease-in-out infinite;
-        }
-        @keyframes textPulse {
-            0%, 100% { opacity: 1; }
-            50% { opacity: 0.5; }
-        }
-        .loading-dots::after {
-            content: '';
-            animation: dots 1.5s steps(4, end) infinite;
-        }
-        @keyframes dots {
-            0% { content: ''; }
-            25% { content: '.'; }
-            50% { content: '..'; }
-            75% { content: '...'; }
-            100% { content: ''; }
         }
         .error-message {
@@ -240,15 +195,10 @@ HTML_PAGE = '''<!DOCTYPE html>
             overflow: hidden;
             border: 2px solid #333;
             cursor: pointer;
-            transition: all 0.2s ease;
             background: #111;
             position: relative;
         }
-        .gallery-item:hover {
-            border-color: #fff;
-        }
         .gallery-item:active {
             transform: scale(0.98);
         }
@@ -258,7 +208,7 @@ HTML_PAGE = '''<!DOCTYPE html>
             height: 100%;
             object-fit: cover;
             opacity: 0;
-            transition: opacity 0.3s;
         }
         .gallery-item img.loaded {
@@ -290,25 +240,34 @@ HTML_PAGE = '''<!DOCTYPE html>
             text-align: center;
         }
-        /* Load more */
         #load-more-trigger {
-            height: 100px;
             display: flex;
             align-items: center;
             justify-content: center;
         }
         .load-more-text {
             color: #444;
-            font-size: 11px;
             letter-spacing: 2px;
         }
-        .load-more-text.loading {
-            color: #fff;
-            animation: textPulse 1s infinite;
-        }
         #scroll-top {
             position: fixed;
             bottom: 20px;
@@ -324,7 +283,6 @@ HTML_PAGE = '''<!DOCTYPE html>
             display: none;
             align-items: center;
             justify-content: center;
-            transition: all 0.2s;
         }
         #scroll-top:hover {
@@ -381,7 +339,6 @@ HTML_PAGE = '''<!DOCTYPE html>
             padding: 8px 15px;
             font-family: inherit;
             font-weight: 700;
-            transition: all 0.15s;
             -webkit-tap-highlight-color: transparent;
         }
@@ -414,13 +371,26 @@ HTML_PAGE = '''<!DOCTYPE html>
             max-height: 100%;
             object-fit: contain;
             border: 3px solid #fff;
         }
-        .lb-loading {
             position: absolute;
-            color: #666;
-            font-size: 12px;
-            letter-spacing: 2px;
         }
         .lb-footer {
@@ -446,20 +416,19 @@ HTML_PAGE = '''<!DOCTYPE html>
             }
             .info-banner {
-                font-size: 10px;
                 padding: 8px 10px;
             }
             .gallery-grid {
                 grid-template-columns: repeat(3, 1fr);
                 gap: 6px;
             }
-            .gallery-header {
-                margin-bottom: 15px;
-                padding-bottom: 12px;
-            }
             .gallery-count {
                 font-size: 22px;
             }
@@ -496,11 +465,6 @@ HTML_PAGE = '''<!DOCTYPE html>
                 border-width: 2px;
             }
-            .epstein-loader {
-                width: 100px;
-                height: 100px;
-            }
             #scroll-top {
                 width: 40px;
                 height: 40px;
@@ -519,20 +483,20 @@ HTML_PAGE = '''<!DOCTYPE html>
 </head>
 <body>
     <div id="header"><span>EPSTEIN FILES</span></div>
-    <div class="info-banner">★ HERE ARE ALL THE IMAGES ★</div>
     <!-- Loading Screen -->
     <div id="loading-screen">
-        <div class="epstein-loader">
-            <div class="rotating-ring"></div>
-            <div class="corner-bracket tl"></div>
-            <div class="corner-bracket tr"></div>
-            <div class="corner-bracket bl"></div>
-            <div class="corner-bracket br"></div>
-            <img class="epstein-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/34/Epstein-mugshot.jpg/440px-Epstein-mugshot.jpg" alt="Loading">
-            <div class="scan-line"></div>
-        </div>
-        <div class="loading-text" id="loading-text">LOADING<span class="loading-dots"></span></div>
     </div>
     <!-- Gallery Screen -->
@@ -542,6 +506,7 @@ HTML_PAGE = '''<!DOCTYPE html>
         </div>
         <div class="gallery-grid" id="gallery-grid"></div>
         <div id="load-more-trigger">
             <div class="load-more-text" id="load-more-text">SCROLL FOR MORE</div>
         </div>
     </div>
@@ -559,7 +524,7 @@ HTML_PAGE = '''<!DOCTYPE html>
             </div>
         </div>
         <div class="lb-image-container">
-            <div class="lb-loading" id="lb-loading">LOADING...</div>
             <img id="lightbox-img" src="" alt="">
         </div>
         <div class="lb-footer">
@@ -579,34 +544,81 @@ HTML_PAGE = '''<!DOCTYPE html>
         const loadingText = document.getElementById('loading-text');
         const grid = document.getElementById('gallery-grid');
         const loadMoreText = document.getElementById('load-more-text');
         const scrollTopBtn = document.getElementById('scroll-top');
         function loadMoreImages() {
             if (isLoading || loadedCount >= allImages.length) return;
             isLoading = true;
             loadMoreText.textContent = 'LOADING...';
-            loadMoreText.classList.add('loading');
-            const start = loadedCount;
-            const end = Math.min(loadedCount + BATCH_SIZE, allImages.length);
-            for (let i = start; i < end; i++) {
-                createImageItem(allImages[i], i);
-            }
-            loadedCount = end;
-            setTimeout(() => {
                 isLoading = false;
                 if (loadedCount >= allImages.length) {
-                    loadMoreText.textContent = 'ALL ' + allImages.length + ' FILES LOADED';
-                    loadMoreText.classList.remove('loading');
                 } else {
-                    loadMoreText.textContent = 'SCROLL FOR MORE (' + loadedCount + '/' + allImages.length + ')';
-                    loadMoreText.classList.remove('loading');
                 }
-            }, 100);
         }
         function createImageItem(url, idx) {
@@ -617,58 +629,23 @@ HTML_PAGE = '''<!DOCTYPE html>
             placeholder.className = 'placeholder';
             placeholder.textContent = '#' + (idx + 1);
-            const imgEl = document.createElement('img');
-            imgEl.alt = 'File ' + (idx + 1);
-            imgEl.onload = () => {
-                imgEl.classList.add('loaded');
-            };
-            imgEl.onerror = () => {
-                placeholder.textContent = 'ERROR';
-            };
-            // Lazy load with intersection observer
-            imgEl.dataset.src = url;
-            imgEl.dataset.idx = idx;
             const number = document.createElement('div');
             number.className = 'item-number';
             number.textContent = '#' + (idx + 1);
             item.appendChild(placeholder);
-            item.appendChild(imgEl);
             item.appendChild(number);
             item.onclick = () => openLightbox(idx);
-            grid.appendChild(item);
-            imageObserver.observe(imgEl);
         }
-        // Intersection observer for lazy loading images
-        const imageObserver = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    const img = entry.target;
-                    if (img.dataset.src && !img.src) {
-                        img.src = img.dataset.src;
-                    }
-                    imageObserver.unobserve(img);
-                }
-            });
-        }, {
-            rootMargin: '200px'
-        });
-        // Intersection observer for infinite scroll
-        const scrollObserver = new IntersectionObserver((entries) => {
-            entries.forEach(entry => {
-                if (entry.isIntersecting) {
-                    loadMoreImages();
-                }
-            });
-        }, {
-            rootMargin: '400px'
-        });
         function showGallery(imageList) {
             allImages = imageList;
             loadedCount = 0;
@@ -686,16 +663,20 @@ HTML_PAGE = '''<!DOCTYPE html>
         }
         function showError(msg) {
-            loadingText.innerHTML = msg;
             loadingText.classList.add('error-message');
         }
-        // Scroll to top button
         window.addEventListener('scroll', () => {
-            if (window.scrollY > 500) {
-                scrollTopBtn.classList.add('visible');
-            } else {
-                scrollTopBtn.classList.remove('visible');
             }
         });
@@ -708,7 +689,7 @@ HTML_PAGE = '''<!DOCTYPE html>
         const lbImg = document.getElementById('lightbox-img');
         const lbCounter = document.getElementById('lb-counter');
         const lbFilename = document.getElementById('lb-filename');
-        const lbLoading = document.getElementById('lb-loading');
         function openLightbox(idx) {
             currentIdx = idx;
@@ -720,15 +701,17 @@ HTML_PAGE = '''<!DOCTYPE html>
         function closeLightbox() {
             lightbox.classList.remove('active');
             document.body.style.overflow = '';
         }
         function updateLightbox() {
-            lbLoading.style.display = 'block';
-            lbImg.style.opacity = '0';
             lbImg.onload = () => {
-                lbLoading.style.display = 'none';
-                lbImg.style.opacity = '1';
             };
             lbImg.src = allImages[currentIdx];
@@ -755,25 +738,20 @@ HTML_PAGE = '''<!DOCTYPE html>
         // Touch swipe
         let touchStartX = 0;
-        let touchStartY = 0;
         const lbImageContainer = document.querySelector('.lb-image-container');
         lbImageContainer.addEventListener('touchstart', e => {
             touchStartX = e.touches[0].clientX;
-            touchStartY = e.touches[0].clientY;
         }, { passive: true });
         lbImageContainer.addEventListener('touchend', e => {
-            const diffX = touchStartX - e.changedTouches[0].clientX;
-            const diffY = touchStartY - e.changedTouches[0].clientY;
-            if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 50) {
-                navigate(diffX > 0 ? 1 : -1);
             }
         }, { passive: true });
-        // Load
         fetch('/status')
             .then(r => r.json())
             .then(data => {

 app = Flask(__name__)
 LINKS_FILE = "links.txt"
+state = {"status": "idle", "images": []}
 def load_links():
     links = []
 def init_images():
     global state
     links = load_links()
+    state = {"status": "complete" if links else "error", "images": links}
 HTML_PAGE = '''<!DOCTYPE html>
 <html lang="en">
             font-size: 11px;
             font-weight: 700;
             letter-spacing: 2px;
+            position: relative;
+            overflow: hidden;
         }
+        .info-banner::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(0,0,0,0.1), transparent);
+            animation: shine 2s infinite;
         }
+        @keyframes shine {
+            0% { left: -100%; }
+            100% { left: 100%; }
+        }
+        .banner-lines {
             display: flex;
             align-items: center;
             justify-content: center;
+            gap: 15px;
         }
+        .banner-line {
+            width: 50px;
+            height: 2px;
+            background: #000;
         }
+        .banner-line.animated {
+            animation: lineGrow 1.5s ease-in-out infinite;
         }
+        .banner-line.animated.delay {
+            animation-delay: 0.3s;
         }
+        @keyframes lineGrow {
+            0%, 100% { width: 30px; opacity: 0.5; }
+            50% { width: 60px; opacity: 1; }
         }
+        /* ===== LOADING SCREEN ===== */
+        #loading-screen {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            min-height: calc(100vh - 120px);
+            padding: 40px 20px;
         }
+        .spinner {
+            width: 60px;
+            height: 60px;
+            border: 3px solid #333;
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            margin-bottom: 25px;
         }
+        @keyframes spin {
             to { transform: rotate(360deg); }
         }
         .loading-text {
+            font-size: 12px;
             letter-spacing: 4px;
+            color: #666;
         }
         .error-message {
             overflow: hidden;
             border: 2px solid #333;
             cursor: pointer;
             background: #111;
             position: relative;
         }
         .gallery-item:active {
             transform: scale(0.98);
         }
             height: 100%;
             object-fit: cover;
             opacity: 0;
+            transition: opacity 0.2s;
         }
         .gallery-item img.loaded {
             text-align: center;
         }
         #load-more-trigger {
+            height: 80px;
             display: flex;
             align-items: center;
             justify-content: center;
+            gap: 15px;
+        }
+        .load-spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid #333;
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+            display: none;
+        }
+        .load-spinner.active {
+            display: block;
         }
         .load-more-text {
             color: #444;
+            font-size: 10px;
             letter-spacing: 2px;
         }
         #scroll-top {
             position: fixed;
             bottom: 20px;
             display: none;
             align-items: center;
             justify-content: center;
         }
         #scroll-top:hover {
             padding: 8px 15px;
             font-family: inherit;
             font-weight: 700;
             -webkit-tap-highlight-color: transparent;
         }
             max-height: 100%;
             object-fit: contain;
             border: 3px solid #fff;
+            opacity: 0;
+            transition: opacity 0.2s;
         }
+        #lightbox-img.loaded {
+            opacity: 1;
+        }
+        .lb-spinner {
             position: absolute;
+            width: 40px;
+            height: 40px;
+            border: 3px solid #333;
+            border-top-color: #fff;
+            border-radius: 50%;
+            animation: spin 0.8s linear infinite;
+        }
+        .lb-spinner.hidden {
+            display: none;
         }
         .lb-footer {
             }
             .info-banner {
+                font-size: 9px;
                 padding: 8px 10px;
             }
+            .banner-line {
+                width: 30px;
+            }
             .gallery-grid {
                 grid-template-columns: repeat(3, 1fr);
                 gap: 6px;
             }
             .gallery-count {
                 font-size: 22px;
             }
                 border-width: 2px;
             }
             #scroll-top {
                 width: 40px;
                 height: 40px;
 </head>
 <body>
     <div id="header"><span>EPSTEIN FILES</span></div>
+    <div class="info-banner">
+        <div class="banner-lines">
+            <div class="banner-line animated"></div>
+            <div class="banner-line animated delay"></div>
+            ★ HERE ARE ALL THE IMAGES ★
+            <div class="banner-line animated delay"></div>
+            <div class="banner-line animated"></div>
+        </div>
+    </div>
     <!-- Loading Screen -->
     <div id="loading-screen">
+        <div class="spinner"></div>
+        <div class="loading-text" id="loading-text">LOADING</div>
     </div>
     <!-- Gallery Screen -->
         </div>
         <div class="gallery-grid" id="gallery-grid"></div>
         <div id="load-more-trigger">
+            <div class="load-spinner" id="load-spinner"></div>
             <div class="load-more-text" id="load-more-text">SCROLL FOR MORE</div>
         </div>
     </div>
             </div>
         </div>
         <div class="lb-image-container">
+            <div class="lb-spinner" id="lb-spinner"></div>
             <img id="lightbox-img" src="" alt="">
         </div>
         <div class="lb-footer">
         const loadingText = document.getElementById('loading-text');
         const grid = document.getElementById('gallery-grid');
         const loadMoreText = document.getElementById('load-more-text');
+        const loadSpinner = document.getElementById('load-spinner');
         const scrollTopBtn = document.getElementById('scroll-top');
+        // Only load images that are visible - unload ones that scroll away
+        const imageObserver = new IntersectionObserver((entries) => {
+            entries.forEach(entry => {
+                const img = entry.target;
+                if (entry.isIntersecting) {
+                    // Load image
+                    if (img.dataset.src && !img.src) {
+                        img.src = img.dataset.src;
+                        img.onload = () => img.classList.add('loaded');
+                        img.onerror = () => {
+                            img.parentElement.querySelector('.placeholder').textContent = 'ERR';
+                        };
+                    }
+                } else {
+                    // Unload image if it's far from viewport to save memory
+                    if (img.src && !isNearViewport(img)) {
+                        img.src = '';
+                        img.classList.remove('loaded');
+                    }
+                }
+            });
+        }, {
+            rootMargin: '300px'
+        });
+        function isNearViewport(el) {
+            const rect = el.getBoundingClientRect();
+            const buffer = window.innerHeight * 2;
+            return rect.top < window.innerHeight + buffer && rect.bottom > -buffer;
+        }
+        // Scroll observer for infinite loading
+        const scrollObserver = new IntersectionObserver((entries) => {
+            if (entries[0].isIntersecting) {
+                loadMoreImages();
+            }
+        }, { rootMargin: '500px' });
         function loadMoreImages() {
             if (isLoading || loadedCount >= allImages.length) return;
             isLoading = true;
+            loadSpinner.classList.add('active');
             loadMoreText.textContent = 'LOADING...';
+            // Use requestAnimationFrame for smooth rendering
+            requestAnimationFrame(() => {
+                const fragment = document.createDocumentFragment();
+                const end = Math.min(loadedCount + BATCH_SIZE, allImages.length);
+                for (let i = loadedCount; i < end; i++) {
+                    fragment.appendChild(createImageItem(allImages[i], i));
+                }
+                grid.appendChild(fragment);
+                loadedCount = end;
+                // Observe new images
+                grid.querySelectorAll('img:not([data-observed])').forEach(img => {
+                    img.dataset.observed = 'true';
+                    imageObserver.observe(img);
+                });
                 isLoading = false;
+                loadSpinner.classList.remove('active');
                 if (loadedCount >= allImages.length) {
+                    loadMoreText.textContent = 'ALL ' + allImages.length + ' LOADED';
                 } else {
+                    loadMoreText.textContent = loadedCount + ' / ' + allImages.length;
                 }
+            });
         }
         function createImageItem(url, idx) {
             placeholder.className = 'placeholder';
             placeholder.textContent = '#' + (idx + 1);
+            const img = document.createElement('img');
+            img.dataset.src = url;
+            img.dataset.idx = idx;
+            img.alt = '';
             const number = document.createElement('div');
             number.className = 'item-number';
             number.textContent = '#' + (idx + 1);
             item.appendChild(placeholder);
+            item.appendChild(img);
             item.appendChild(number);
             item.onclick = () => openLightbox(idx);
+            return item;
         }
         function showGallery(imageList) {
             allImages = imageList;
             loadedCount = 0;
         }
         function showError(msg) {
+            loadingText.textContent = msg;
             loadingText.classList.add('error-message');
+            document.querySelector('.spinner').style.display = 'none';
         }
+        // Scroll to top
+        let scrollTicking = false;
         window.addEventListener('scroll', () => {
+            if (!scrollTicking) {
+                requestAnimationFrame(() => {
+                    scrollTopBtn.classList.toggle('visible', window.scrollY > 500);
+                    scrollTicking = false;
+                });
+                scrollTicking = true;
             }
         });
         const lbImg = document.getElementById('lightbox-img');
         const lbCounter = document.getElementById('lb-counter');
         const lbFilename = document.getElementById('lb-filename');
+        const lbSpinner = document.getElementById('lb-spinner');
         function openLightbox(idx) {
             currentIdx = idx;
         function closeLightbox() {
             lightbox.classList.remove('active');
             document.body.style.overflow = '';
+            lbImg.src = '';
+            lbImg.classList.remove('loaded');
         }
         function updateLightbox() {
+            lbSpinner.classList.remove('hidden');
+            lbImg.classList.remove('loaded');
             lbImg.onload = () => {
+                lbSpinner.classList.add('hidden');
+                lbImg.classList.add('loaded');
             };
             lbImg.src = allImages[currentIdx];
         // Touch swipe
         let touchStartX = 0;
         const lbImageContainer = document.querySelector('.lb-image-container');
         lbImageContainer.addEventListener('touchstart', e => {
             touchStartX = e.touches[0].clientX;
         }, { passive: true });
         lbImageContainer.addEventListener('touchend', e => {
+            const diff = touchStartX - e.changedTouches[0].clientX;
+            if (Math.abs(diff) > 50) {
+                navigate(diff > 0 ? 1 : -1);
             }
         }, { passive: true });
+        // Init
         fetch('/status')
             .then(r => r.json())
             .then(data => {