Spaces:
Running
Running
File size: 10,541 Bytes
2c526f9 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 |
<!DOCTYPE html>
<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> |