Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>YouTube Recommendation Cleaner</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <style> | |
| .toggle-checkbox:checked { | |
| right: 0; | |
| border-color: #3b82f6; | |
| } | |
| .toggle-checkbox:checked + .toggle-label { | |
| background-color: #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-3xl"> | |
| <!-- Header --> | |
| <header class="mb-8"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-600" viewBox="0 0 24 24" fill="currentColor"> | |
| <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"/> | |
| </svg> | |
| <h1 class="text-2xl font-bold ml-3 text-gray-800">YouTube Recommendation Cleaner</h1> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm font-medium text-gray-700">Enabled</span> | |
| <div class="relative inline-block w-10 mr-2 align-middle select-none"> | |
| <input type="checkbox" name="toggle" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer" checked/> | |
| <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="mt-2 text-gray-600">Clean up your YouTube recommendations by marking unwanted videos as "Not Interested"</p> | |
| </header> | |
| <!-- Main Content --> | |
| <main> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">How It Works</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-800">Right-Click Any Video</h3> | |
| <p class="mt-1 text-gray-600">Simply right-click on any video thumbnail in your YouTube feed.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-800">Select "Not Interested"</h3> | |
| <p class="mt-1 text-gray-600">Choose the option to mark the video as not interested.</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-blue-600" fill="none" viewBox="0 0 24 24" stroke="currentColor"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" /> | |
| </svg> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-800">Cleaner Recommendations</h3> | |
| <p class="mt-1 text-gray-600">YouTube will stop recommending similar content in your feed.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6 mb-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Demo</h2> | |
| <div class="border border-gray-200 rounded-lg p-4 bg-gray-50"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 relative"> | |
| <img src="https://i.ytimg.com/vi/dQw4w9WgXcQ/hqdefault.jpg" alt="Video thumbnail" class="w-40 h-24 rounded-lg object-cover"> | |
| <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity duration-200"> | |
| <div class="bg-black bg-opacity-50 w-full h-full rounded-lg flex items-center justify-center"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-white" viewBox="0 0 20 20" fill="currentColor"> | |
| <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd" /> | |
| </svg> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="ml-4 flex-1"> | |
| <h3 class="font-medium text-gray-800">Example Video Title</h3> | |
| <p class="text-sm text-gray-600 mt-1">Channel Name • 1M views • 1 year ago</p> | |
| <p class="text-sm text-gray-600 mt-2">Right-click on this thumbnail to see the "Not Interested" option in the context menu.</p> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> | |
| <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" /> | |
| </svg> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Settings</h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Show confirmation</h3> | |
| <p class="text-sm text-gray-600">Show a confirmation when marking videos as not interested</p> | |
| </div> | |
| <label class="relative inline-flex items-center cursor-pointer"> | |
| <input type="checkbox" value="" class="sr-only peer" checked> | |
| <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div> | |
| </label> | |
| </div> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Keyboard shortcut</h3> | |
| <p class="text-sm text-gray-600">Quickly mark videos using a keyboard shortcut</p> | |
| </div> | |
| <button class="px-3 py-1 bg-gray-100 hover:bg-gray-200 rounded-md text-sm font-medium">Alt+N</button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- Footer --> | |
| <footer class="mt-8 text-center text-gray-500 text-sm"> | |
| <p>YouTube Recommendation Cleaner v1.0</p> | |
| <p class="mt-1">Not affiliated with YouTube or Google</p> | |
| </footer> | |
| </div> | |
| <script> | |
| // Toggle functionality | |
| document.getElementById('toggle').addEventListener('change', function() { | |
| if(this.checked) { | |
| console.log('Extension enabled'); | |
| // Enable extension functionality | |
| } else { | |
| console.log('Extension disabled'); | |
| // Disable extension functionality | |
| } | |
| }); | |
| // This would be the actual extension code that runs on YouTube | |
| // For demonstration purposes, we're just showing the UI | |
| const actualExtensionCode = ` | |
| // manifest.json | |
| { | |
| "name": "YouTube Recommendation Cleaner", | |
| "version": "1.0", | |
| "description": "Clean up your YouTube recommendations by marking unwanted videos as 'Not Interested'", | |
| "permissions": ["contextMenus", "activeTab"], | |
| "background": { | |
| "service_worker": "background.js" | |
| }, | |
| "content_scripts": [ | |
| { | |
| "matches": ["*://*.youtube.com/*"], | |
| "js": ["content.js"] | |
| } | |
| ], | |
| "action": { | |
| "default_popup": "popup.html", | |
| "default_icon": { | |
| "16": "images/icon16.png", | |
| "32": "images/icon32.png", | |
| "48": "images/icon48.png", | |
| "128": "images/icon128.png" | |
| } | |
| }, | |
| "icons": { | |
| "16": "images/icon16.png", | |
| "32": "images/icon32.png", | |
| "48": "images/icon48.png", | |
| "128": "images/icon128.png" | |
| }, | |
| "manifest_version": 3 | |
| } | |
| // background.js | |
| chrome.runtime.onInstalled.addListener(() => { | |
| chrome.contextMenus.create({ | |
| id: "notInterested", | |
| title: "Not Interested", | |
| contexts: ["image", "video", "link"], | |
| documentUrlPatterns: ["*://*.youtube.com/*"] | |
| }); | |
| }); | |
| chrome.contextMenus.onClicked.addListener((info, tab) => { | |
| if (info.menuItemId === "notInterested") { | |
| chrome.scripting.executeScript({ | |
| target: {tabId: tab.id}, | |
| function: markAsNotInterested, | |
| args: [info] | |
| }); | |
| } | |
| }); | |
| function markAsNotInterested(info) { | |
| // Find the video element that was right-clicked | |
| const videoElement = findVideoElement(info); | |
| if (!videoElement) return; | |
| // Simulate click on the menu button | |
| const menuButton = videoElement.querySelector('button[aria-label="Action menu"]') || | |
| videoElement.querySelector('.yt-lockup-metadata-view-model-wiz__menu-button button'); | |
| if (menuButton) { | |
| menuButton.click(); | |
| // Wait for the menu to appear | |
| setTimeout(() => { | |
| // Find and click the "Not interested" option | |
| const notInterestedOption = document.evaluate( | |
| "//yt-formatted-string[contains(text(), 'Not interested')]", | |
| document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null | |
| ).singleNodeValue; | |
| if (notInterestedOption) { | |
| notInterestedOption.click(); | |
| // For "Don't recommend channel" option | |
| setTimeout(() => { | |
| const dontRecommendOption = document.evaluate( | |
| "//yt-formatted-string[contains(text(), 'Don\\'t recommend channel')]", | |
| document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null | |
| ).singleNodeValue; | |
| if (dontRecommendOption) { | |
| dontRecommendOption.click(); | |
| } | |
| }, 200); | |
| } | |
| }, 200); | |
| } | |
| } | |
| function findVideoElement(info) { | |
| // This function would find the parent video element based on the right-clicked element | |
| // Implementation depends on YouTube's current DOM structure | |
| let element = info.targetElementId ? document.getElementById(info.targetElementId) : null; | |
| while (element && !element.classList.contains('yt-lockup-video')) { | |
| element = element.parentElement; | |
| } | |
| return element; | |
| } | |
| // content.js | |
| // This would handle any additional functionality needed on YouTube pages | |
| `; | |
| </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=yeaman/yt-cleaner" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |