Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Titty Drop GIF 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-item { | |
| transition: all 0.3s ease; | |
| box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); | |
| } | |
| .gif-item:hover { | |
| transform: scale(1.03); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2); | |
| z-index: 10; | |
| } | |
| .loading-spinner { | |
| border: 4px solid rgba(255, 255, 255, 0.3); | |
| border-radius: 50%; | |
| border-top: 4px solid #ec4899; | |
| width: 40px; | |
| height: 40px; | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .nsfw-overlay { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(0, 0, 0, 0.7); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| opacity: 1; | |
| transition: opacity 0.3s ease; | |
| } | |
| .nsfw-overlay:hover { | |
| opacity: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white min-h-screen"> | |
| <header class="bg-pink-900 py-6 shadow-lg"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <h1 class="text-3xl font-bold text-center md:text-left mb-4 md:mb-0"> | |
| <i class="fas fa-film mr-2"></i> Titty Drop GIF Wall | |
| </h1> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <select id="sort-select" class="bg-pink-800 text-white px-4 py-2 rounded-lg focus:outline-none focus:ring-2 focus:ring-pink-500"> | |
| <option value="top">Top</option> | |
| <option value="hot">Hot</option> | |
| <option value="new">New</option> | |
| </select> | |
| </div> | |
| <button id="refresh-btn" class="bg-pink-600 hover:bg-pink-700 text-white px-4 py-2 rounded-lg transition duration-200"> | |
| <i class="fas fa-sync-alt mr-2"></i> Refresh | |
| </button> | |
| </div> | |
| </div> | |
| <p class="mt-4 text-pink-200 text-center md:text-left"> | |
| The hottest titty drop GIFs from Reddit, updated regularly | |
| </p> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div id="loading" class="flex justify-center items-center py-20"> | |
| <div class="loading-spinner"></div> | |
| <span class="ml-3 text-xl">Loading the hottest drops...</span> | |
| </div> | |
| <div id="gif-wall" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6 hidden"> | |
| <!-- GIFs will be inserted here --> | |
| </div> | |
| <div id="error-message" class="hidden text-center py-20"> | |
| <i class="fas fa-exclamation-triangle text-5xl text-red-500 mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-2">Oops! Something went wrong</h2> | |
| <p class="text-gray-400 mb-6">We couldn't load the titty drops. Please try again later.</p> | |
| <button id="retry-btn" class="bg-pink-600 hover:bg-pink-700 text-white px-6 py-3 rounded-lg transition duration-200"> | |
| <i class="fas fa-redo mr-2"></i> Try Again | |
| </button> | |
| </div> | |
| </main> | |
| <footer class="bg-gray-800 py-6 mt-12"> | |
| <div class="container mx-auto px-4 text-center text-gray-400"> | |
| <p>This content is NSFW. You must be 18+ to view.</p> | |
| <p class="mt-2">Data fetched from Reddit's API. All content belongs to their respective owners.</p> | |
| <div class="mt-4 flex justify-center space-x-4"> | |
| <a href="#" class="hover:text-pink-400 transition duration-200"><i class="fab fa-reddit text-xl"></i></a> | |
| <a href="#" class="hover:text-pink-400 transition duration-200"><i class="fas fa-question-circle text-xl"></i></a> | |
| <a href="#" class="hover:text-pink-400 transition duration-200"><i class="fas fa-shield-alt text-xl"></i></a> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const gifWall = document.getElementById('gif-wall'); | |
| const loadingElement = document.getElementById('loading'); | |
| const errorElement = document.getElementById('error-message'); | |
| const refreshBtn = document.getElementById('refresh-btn'); | |
| const retryBtn = document.getElementById('retry-btn'); | |
| const sortSelect = document.getElementById('sort-select'); | |
| // Age verification modal | |
| const ageVerified = localStorage.getItem('ageVerified'); | |
| if (!ageVerified) { | |
| showAgeModal(); | |
| } else { | |
| fetchGIFs(); | |
| } | |
| function showAgeModal() { | |
| const modal = document.createElement('div'); | |
| modal.className = 'fixed inset-0 bg-black bg-opacity-90 flex items-center justify-center z-50 p-4'; | |
| modal.innerHTML = ` | |
| <div class="bg-gray-800 rounded-xl max-w-md w-full p-6 text-center"> | |
| <i class="fas fa-exclamation-circle text-5xl text-pink-500 mb-4"></i> | |
| <h2 class="text-2xl font-bold mb-4">Age Verification</h2> | |
| <p class="mb-6 text-gray-300">This website contains adult content and is only suitable for those who are 18 years or older.</p> | |
| <div class="flex flex-col space-y-3"> | |
| <button id="verify-btn" class="bg-pink-600 hover:bg-pink-700 text-white py-3 rounded-lg transition duration-200"> | |
| I am 18 or older - Enter | |
| </button> | |
| <a href="https://www.reddit.com/" class="bg-gray-700 hover:bg-gray-600 text-white py-3 rounded-lg transition duration-200"> | |
| I am under 18 - Exit | |
| </a> | |
| </div> | |
| </div> | |
| `; | |
| document.body.appendChild(modal); | |
| document.getElementById('verify-btn').addEventListener('click', function() { | |
| localStorage.setItem('ageVerified', 'true'); | |
| document.body.removeChild(modal); | |
| fetchGIFs(); | |
| }); | |
| } | |
| async function fetchGIFs() { | |
| try { | |
| loadingElement.classList.remove('hidden'); | |
| gifWall.classList.add('hidden'); | |
| errorElement.classList.add('hidden'); | |
| const sortBy = sortSelect.value; | |
| const response = await fetch(`https://www.reddit.com/r/tittydrop/${sortBy}/.json?limit=30`); | |
| const data = await response.json(); | |
| if (!response.ok) throw new Error(data.message || 'Failed to fetch'); | |
| const posts = data.data.children | |
| .filter(post => !post.data.over_18 === false) // Ensure NSFW | |
| .filter(post => post.data.url.match(/\.(gif|gifv|mp4|webm)$/i)) // Only media posts | |
| .slice(0, 24); // Limit to 24 posts | |
| displayGIFs(posts); | |
| } catch (error) { | |
| console.error('Error fetching GIFs:', error); | |
| loadingElement.classList.add('hidden'); | |
| errorElement.classList.remove('hidden'); | |
| } | |
| } | |
| function displayGIFs(posts) { | |
| gifWall.innerHTML = ''; | |
| if (posts.length === 0) { | |
| gifWall.innerHTML = ` | |
| <div class="col-span-full text-center py-12"> | |
| <i class="fas fa-frown text-4xl text-pink-500 mb-4"></i> | |
| <h3 class="text-xl font-semibold">No GIFs found</h3> | |
| <p class="text-gray-400">Try refreshing or changing the sort option</p> | |
| </div> | |
| `; | |
| } else { | |
| posts.forEach(post => { | |
| const mediaUrl = post.data.url.replace('.gifv', '.mp4'); | |
| const isVideo = mediaUrl.match(/\.(mp4|webm)$/i); | |
| const gifItem = document.createElement('div'); | |
| gifItem.className = 'gif-item bg-gray-800 rounded-xl overflow-hidden relative'; | |
| if (isVideo) { | |
| gifItem.innerHTML = ` | |
| <div class="relative pb-[100%]"> | |
| <video | |
| autoplay loop muted playsinline | |
| class="absolute h-full w-full object-cover" | |
| src="${mediaUrl}" | |
| alt="${post.data.title}" | |
| ></video> | |
| <div class="nsfw-overlay"> | |
| <span class="bg-pink-600 text-white px-3 py-1 rounded-full text-sm font-bold">NSFW</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-semibold truncate">${post.data.title}</h3> | |
| <div class="flex justify-between items-center mt-2 text-xs text-gray-400"> | |
| <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> | |
| </div> | |
| </div> | |
| `; | |
| } else { | |
| gifItem.innerHTML = ` | |
| <div class="relative pb-[100%]"> | |
| <img | |
| class="absolute h-full w-full object-cover" | |
| src="${mediaUrl}" | |
| alt="${post.data.title}" | |
| loading="lazy" | |
| /> | |
| <div class="nsfw-overlay"> | |
| <span class="bg-pink-600 text-white px-3 py-1 rounded-full text-sm font-bold">NSFW</span> | |
| </div> | |
| </div> | |
| <div class="p-3"> | |
| <h3 class="text-sm font-semibold truncate">${post.data.title}</h3> | |
| <div class="flex justify-between items-center mt-2 text-xs text-gray-400"> | |
| <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> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| gifItem.addEventListener('click', () => { | |
| window.open(`https://reddit.com${post.data.permalink}`, '_blank'); | |
| }); | |
| gifWall.appendChild(gifItem); | |
| }); | |
| } | |
| loadingElement.classList.add('hidden'); | |
| gifWall.classList.remove('hidden'); | |
| } | |
| // Event listeners | |
| refreshBtn.addEventListener('click', fetchGIFs); | |
| retryBtn.addEventListener('click', fetchGIFs); | |
| sortSelect.addEventListener('change', fetchGIFs); | |
| }); | |
| </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/uuttdrop" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |