Spaces:
Running
Running
create a wall of looping gifs of the top posts of all time from https://www.reddit.com/r/TittyDrop/, the thumbnail gif annimations play on mouse sursor hover. - Initial Deployment
2c526f9
verified
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>TittyDrop Top Posts Wall</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gif-container { | |
| position: relative; | |
| overflow: hidden; | |
| transition: all 0.3s ease; | |
| } | |
| .gif-container:hover { | |
| transform: scale(1.05); | |
| z-index: 10; | |
| } | |
| .gif-thumbnail { | |
| transition: opacity 0.3s ease; | |
| } | |
| .gif-container:hover .gif-thumbnail { | |
| opacity: 0; | |
| } | |
| .gif-full { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .gif-container:hover .gif-full { | |
| opacity: 1; | |
| } | |
| .loading-spinner { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .gradient-overlay { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 50%; | |
| background: linear-gradient(to top, rgba(0,0,0,0.7), transparent); | |
| } | |
| .post-title { | |
| text-shadow: 1px 1px 3px rgba(0,0,0,0.8); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 min-h-screen"> | |
| <header class="bg-gradient-to-r from-pink-600 to-purple-600 py-6 shadow-lg"> | |
| <div class="container mx-auto px-4 flex justify-between items-center"> | |
| <h1 class="text-3xl md:text-4xl font-bold text-white flex items-center"> | |
| <i class="fas fa-film mr-3"></i> TittyDrop Top Posts | |
| </h1> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-fire text-white"></i> | |
| <span class="text-white font-semibold">All Time Top</span> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="text-center mb-8"> | |
| <h2 class="text-2xl font-semibold text-white mb-2">Hover over thumbnails to reveal full GIFs</h2> | |
| <p class="text-gray-300">Showing top 100 posts of all time from r/TittyDrop</p> | |
| </div> | |
| <div id="loading" class="text-center py-16"> | |
| <div class="inline-block text-pink-500 text-4xl loading-spinner"> | |
| <i class="fas fa-spinner"></i> | |
| </div> | |
| <p class="text-white mt-4">Loading top posts...</p> | |
| </div> | |
| <div id="gif-wall" class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4"></div> | |
| </main> | |
| <footer class="bg-gray-800 text-white py-6"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p>Content from <a href="https://www.reddit.com/r/TittyDrop/" target="_blank" class="text-pink-400 hover:text-pink-300">r/TittyDrop</a></p> | |
| <p class="text-sm text-gray-400 mt-2">All content belongs to their respective owners</p> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const gifWall = document.getElementById('gif-wall'); | |
| const loadingSpinner = document.getElementById('loading'); | |
| // Fetch top posts from Reddit API | |
| fetch('https://www.reddit.com/r/TittyDrop/top.json?sort=top&t=all&limit=100') | |
| .then(response => response.json()) | |
| .then(data => { | |
| loadingSpinner.style.display = 'none'; | |
| const posts = data.data.children; | |
| posts.forEach(post => { | |
| // Skip non-image posts | |
| if (!post.data.is_video && !post.data.url.endsWith('.gif')) return; | |
| // Create gif container | |
| const gifContainer = document.createElement('div'); | |
| gifContainer.className = 'gif-container rounded-lg shadow-lg bg-black relative'; | |
| // Create thumbnail (static version) | |
| const thumbnail = document.createElement('img'); | |
| thumbnail.src = post.data.thumbnail; | |
| thumbnail.alt = post.data.title; | |
| thumbnail.className = 'gif-thumbnail w-full h-auto rounded-lg cursor-pointer'; | |
| thumbnail.loading = 'lazy'; | |
| // Create full gif version (only loads when hovered) | |
| let fullGifSrc = ''; | |
| if (post.data.is_video) { | |
| fullGifSrc = post.data.media.reddit_video.fallback_url; | |
| } else { | |
| fullGifSrc = post.data.url; | |
| } | |
| let fullGif; | |
| if (post.data.is_video) { | |
| fullGif = document.createElement('video'); | |
| fullGif.className = 'gif-full w-full h-auto rounded-lg absolute top-0 left-0'; | |
| fullGif.autoplay = true; | |
| fullGif.loop = true; | |
| fullGif.muted = true; | |
| fullGif.innerHTML = `<source src="${fullGifSrc}" type="video/mp4">`; | |
| } else { | |
| fullGif = document.createElement('img'); | |
| fullGif.src = fullGifSrc; | |
| fullGif.className = 'gif-full w-full h-auto rounded-lg absolute top-0 left-0'; | |
| } | |
| // Create overlay with title info | |
| const overlay = document.createElement('div'); | |
| overlay.className = 'gradient-overlay rounded-lg pointer-events-none'; | |
| const titleContainer = document.createElement('div'); | |
| titleContainer.className = 'absolute bottom-0 left-0 right-0 p-3'; | |
| const title = document.createElement('p'); | |
| title.className = 'post-title text-white text-sm font-semibold truncate'; | |
| title.textContent = post.data.title; | |
| const info = document.createElement('div'); | |
| info.className = 'post-title text-white text-xs flex justify-between items-center'; | |
| info.innerHTML = ` | |
| <span><i class="fas fa-arrow-up mr-1"></i> ${post.data.ups.toLocaleString()}</span> | |
| <span><i class="fas fa-comment mr-1"></i> ${post.data.num_comments.toLocaleString()}</span> | |
| `; | |
| titleContainer.appendChild(title); | |
| titleContainer.appendChild(info); | |
| // Build the container | |
| gifContainer.appendChild(thumbnail); | |
| gifContainer.appendChild(fullGif); | |
| gifContainer.appendChild(overlay); | |
| gifContainer.appendChild(titleContainer); | |
| // Add to the wall | |
| gifWall.appendChild(gifContainer); | |
| }); | |
| // Preload some GIFs when scrolling (for better performance) | |
| const lazyLoad = () => { | |
| const lazyGifs = document.querySelectorAll('.gif-container'); | |
| lazyGifs.forEach(gifContainer => { | |
| if (isInViewport(gifContainer)) { | |
| const fullGif = gifContainer.querySelector('.gif-full'); | |
| if (fullGif && fullGif.dataset.src) { | |
| fullGif.src = fullGif.dataset.src; | |
| delete fullGif.dataset.src; | |
| } | |
| } | |
| }); | |
| }; | |
| const isInViewport = (el) => { | |
| const rect = el.getBoundingClientRect(); | |
| return ( | |
| rect.top <= (window.innerHeight || document.documentElement.clientHeight) && | |
| rect.bottom >= 0 && | |
| rect.left <= (window.innerWidth || document.documentElement.clientWidth) && | |
| rect.right >= 0 | |
| ); | |
| }; | |
| window.addEventListener('scroll', lazyLoad); | |
| window.addEventListener('resize', lazyLoad); | |
| lazyLoad(); | |
| }) | |
| .catch(error => { | |
| console.error('Error fetching Reddit data:', error); | |
| loadingSpinner.innerHTML = ` | |
| <div class="text-red-500 text-xl"> | |
| <i class="fas fa-exclamation-triangle mr-2"></i> | |
| Failed to load posts. Please refresh the page. | |
| </div> | |
| `; | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AlterMantle/ttdrop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |