Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Random Gameplay Images</title> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"> | |
| <style> | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| } | |
| .image-container { | |
| position: relative; | |
| cursor: pointer; | |
| margin-bottom: 20px; | |
| } | |
| .image-container img { | |
| transition: transform 0.5s ease; | |
| display: block; | |
| width: 100%; | |
| height: auto; | |
| border-radius: 8px; | |
| } | |
| .image-container img:hover { | |
| transform: scale(1.05); | |
| } | |
| .button { | |
| position: absolute; | |
| bottom: 10px; | |
| right: 10px; | |
| display: flex; | |
| flex-direction: row; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .icon-button { | |
| display: inline-block; | |
| width: 32px; | |
| height: 32px; | |
| background-color: rgba(0, 0, 0, 0.6); | |
| /* Darker background for better visibility */ | |
| border: none; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| padding: 5px; | |
| box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); | |
| color: white; | |
| /* White icon color */ | |
| transition: background-color 0.3s, transform 0.3s; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| } | |
| .icon-button i { | |
| pointer-events: none; | |
| /* Prevents the icon from interfering with the button's click event */ | |
| font-size: 14px; | |
| /* Smaller icon size */ | |
| } | |
| .icon-button:hover { | |
| background-color: #007bff; | |
| /* Blue background on hover */ | |
| transform: scale(1.1); | |
| /* Slightly larger on hover */ | |
| } | |
| footer { | |
| text-align: center; | |
| padding: 20px 0; | |
| font-size: 0.8rem; | |
| color: #666; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto py-8"> | |
| <h1 class="text-3xl font-bold text-center mb-8">Random Gameplay Images</h1> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4" id="gallery"></div> | |
| </div> | |
| <footer> | |
| Just some random gameplay images from YouTube videos. | |
| </footer> | |
| <script> | |
| function shuffleArray(array) { | |
| for (let i = array.length - 1; i > 0; i--) { | |
| const j = Math.floor(Math.random() * (i + 1)); | |
| [array[i], array[j]] = [array[j], array[i]]; | |
| } | |
| } | |
| function copyToClipboard(text, button) { | |
| navigator.clipboard.writeText(text).then(() => { | |
| button.style.backgroundColor = '#4CAF50'; // Change color to green on success | |
| }).catch(err => { | |
| button.style.backgroundColor = '#f44336'; // Change color to red on failure | |
| console.error('Failed to copy: ', err); | |
| }); | |
| } | |
| fetch('file_renaming_records.csv') | |
| .then(response => response.text()) | |
| .then(data => { | |
| const lines = data.trim().split('\n'); | |
| const images = lines.slice(1).map(line => { | |
| const columns = line.split(','); | |
| return { | |
| new_name: columns[2], | |
| new_path: columns[3], | |
| youtube_id: columns[0] | |
| }; | |
| }); | |
| shuffleArray(images); | |
| const sampleImages = images.slice(0, 20); | |
| const gallery = document.getElementById('gallery'); | |
| sampleImages.forEach(image => { | |
| const container = document.createElement('div'); | |
| container.className = "image-container"; | |
| const imgElement = document.createElement('img'); | |
| imgElement.src = `./${image.new_path}`; | |
| imgElement.alt = image.new_name; | |
| imgElement.className = "w-full h-auto rounded-lg shadow-lg"; | |
| const buttonContainer = document.createElement('div'); | |
| buttonContainer.className = "button"; | |
| const openImageButton = document.createElement('a'); | |
| openImageButton.className = "icon-button"; | |
| openImageButton.innerHTML = '<i class="fas fa-external-link-alt"></i>'; | |
| openImageButton.href = imgElement.src; | |
| openImageButton.target = "_blank"; | |
| const copyUrlButton = document.createElement('button'); | |
| copyUrlButton.className = "icon-button"; | |
| copyUrlButton.innerHTML = '<i class="fas fa-copy"></i>'; | |
| copyUrlButton.onclick = () => copyToClipboard(imgElement.src, copyUrlButton); | |
| const watchButton = document.createElement('a'); | |
| watchButton.className = "icon-button"; | |
| watchButton.innerHTML = '<i class="fas fa-play"></i>'; | |
| watchButton.href = `https://www.youtube.com/watch?v=${image.youtube_id}`; | |
| watchButton.target = "_blank"; | |
| buttonContainer.appendChild(openImageButton); | |
| buttonContainer.appendChild(copyUrlButton); | |
| buttonContainer.appendChild(watchButton); | |
| container.appendChild(imgElement); | |
| container.appendChild(buttonContainer); | |
| gallery.appendChild(container); | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |