| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>PinSave - Pinterest Video Downloader</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #e60023 0%, #bd081c 100%); |
| } |
| .download-btn { |
| transition: all 0.3s ease; |
| } |
| .download-btn:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 20px rgba(225, 0, 0, 0.2); |
| } |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { |
| transform: scale(1); |
| } |
| 50% { |
| transform: scale(1.05); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| .tooltip { |
| position: relative; |
| display: inline-block; |
| } |
| .tooltip .tooltiptext { |
| visibility: hidden; |
| width: 120px; |
| background-color: #555; |
| color: #fff; |
| text-align: center; |
| border-radius: 6px; |
| padding: 5px; |
| position: absolute; |
| z-index: 1; |
| bottom: 125%; |
| left: 50%; |
| margin-left: -60px; |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| .tooltip:hover .tooltiptext { |
| visibility: visible; |
| opacity: 1; |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center"> |
| <i class="fab fa-pinterest text-3xl mr-3"></i> |
| <h1 class="text-2xl font-bold">PinSave</h1> |
| </div> |
| <nav> |
| <ul class="flex space-x-6"> |
| <li><a href="#" class="hover:underline">Home</a></li> |
| <li><a href="#how-it-works" class="hover:underline">How It Works</a></li> |
| <li><a href="#faq" class="hover:underline">FAQ</a></li> |
| </ul> |
| </nav> |
| </div> |
| </div> |
| </header> |
|
|
| <main class="container mx-auto px-4 py-12"> |
| <section class="text-center mb-16"> |
| <h2 class="text-4xl font-bold mb-6 text-gray-800">Download Pinterest Videos in Seconds</h2> |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto mb-10"> |
| Save your favorite Pinterest videos to your device with our fast and free downloader. |
| </p> |
| |
| <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6"> |
| <div class="mb-6"> |
| <div class="relative"> |
| <input |
| type="text" |
| id="pinterest-url" |
| placeholder="Paste Pinterest video URL here..." |
| class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500" |
| > |
| <button |
| id="paste-btn" |
| class="absolute right-2 top-1/2 transform -translate-y-1/2 bg-gray-100 hover:bg-gray-200 px-3 py-1 rounded text-sm" |
| > |
| <i class="fas fa-paste mr-1"></i> Paste |
| </button> |
| </div> |
| <p id="error-message" class="text-red-500 mt-2 text-sm hidden"></p> |
| </div> |
| |
| <button |
| id="download-btn" |
| class="gradient-bg text-white font-bold py-3 px-6 rounded-lg download-btn pulse" |
| > |
| <i class="fas fa-download mr-2"></i> Download Video |
| </button> |
| </div> |
| </section> |
|
|
| <section id="how-it-works" class="mb-16"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">How It Works</h2> |
| <div class="grid md:grid-cols-3 gap-8"> |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-link text-red-500 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">1. Copy Link</h3> |
| <p class="text-gray-600">Copy the URL of the Pinterest video you want to download from the Pinterest app or website.</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-paste text-red-500 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">2. Paste URL</h3> |
| <p class="text-gray-600">Paste the Pinterest video URL into the input field above and click "Download Video".</p> |
| </div> |
| <div class="bg-white p-6 rounded-lg shadow-md text-center"> |
| <div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-download text-red-500 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-semibold mb-2">3. Download & Enjoy</h3> |
| <p class="text-gray-600">Save the video to your device and watch it anytime, even without internet connection.</p> |
| </div> |
| </div> |
| </section> |
|
|
| <section id="faq" class="mb-16"> |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Frequently Asked Questions</h2> |
| <div class="max-w-3xl mx-auto"> |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4"> |
| <button class="faq-question w-full text-left px-6 py-4 bg-gray-50 hover:bg-gray-100 font-medium"> |
| Is this Pinterest downloader free to use? |
| <i class="fas fa-chevron-down float-right transform transition-transform"></i> |
| </button> |
| <div class="faq-answer px-6 py-4 hidden"> |
| <p class="text-gray-600">Yes, our Pinterest video downloader is completely free to use. There are no hidden charges or subscriptions.</p> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4"> |
| <button class="faq-question w-full text-left px-6 py-4 bg-gray-50 hover:bg-gray-100 font-medium"> |
| What video formats can I download? |
| <i class="fas fa-chevron-down float-right transform transition-transform"></i> |
| </button> |
| <div class="faq-answer px-6 py-4 hidden"> |
| <p class="text-gray-600">Our downloader supports MP4 format, which is compatible with most devices and media players.</p> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4"> |
| <button class="faq-question w-full text-left px-6 py-4 bg-gray-50 hover:bg-gray-100 font-medium"> |
| Can I download private Pinterest videos? |
| <i class="fas fa-chevron-down float-right transform transition-transform"></i> |
| </button> |
| <div class="faq-answer px-6 py-4 hidden"> |
| <p class="text-gray-600">No, our tool can only download publicly available Pinterest videos. Private videos require authentication.</p> |
| </div> |
| </div> |
| <div class="bg-white rounded-lg shadow-md overflow-hidden mb-4"> |
| <button class="faq-question w-full text-left px-6 py-4 bg-gray-50 hover:bg-gray-100 font-medium"> |
| Is there a limit to how many videos I can download? |
| <i class="fas fa-chevron-down float-right transform transition-transform"></i> |
| </button> |
| <div class="faq-answer px-6 py-4 hidden"> |
| <p class="text-gray-600">There's no strict limit, but we recommend reasonable usage to ensure good service for all users.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="bg-white rounded-xl shadow-md p-8 text-center"> |
| <h3 class="text-2xl font-bold mb-4 text-gray-800">Ready to download Pinterest videos?</h3> |
| <p class="text-gray-600 mb-6 max-w-2xl mx-auto">Start saving your favorite Pinterest videos now with our fast and easy-to-use downloader.</p> |
| <a href="#" class="gradient-bg text-white font-bold py-3 px-6 rounded-lg download-btn inline-block"> |
| <i class="fas fa-download mr-2"></i> Download Now |
| </a> |
| </section> |
| </main> |
|
|
| <footer class="bg-gray-800 text-white py-8"> |
| <div class="container mx-auto px-4"> |
| <div class="flex flex-col md:flex-row justify-between items-center"> |
| <div class="mb-4 md:mb-0"> |
| <div class="flex items-center"> |
| <i class="fab fa-pinterest text-2xl mr-2"></i> |
| <span class="text-xl font-bold">PinSave</span> |
| </div> |
| <p class="text-gray-400 mt-2">The easiest way to download Pinterest videos</p> |
| </div> |
| <div class="flex space-x-6"> |
| <a href="#" class="hover:text-red-400"><i class="fab fa-twitter text-xl"></i></a> |
| <a href="#" class="hover:text-red-400"><i class="fab fa-facebook text-xl"></i></a> |
| <a href="#" class="hover:text-red-400"><i class="fab fa-instagram text-xl"></i></a> |
| </div> |
| </div> |
| <div class="border-t border-gray-700 mt-6 pt-6 text-center text-gray-400 text-sm"> |
| <p>© 2023 PinSave. All rights reserved. | <a href="#" class="hover:text-white">Privacy Policy</a> | <a href="#" class="hover:text-white">Terms of Service</a></p> |
| <p class="mt-2">This tool is not affiliated with Pinterest.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <div id="download-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden z-50"> |
| <div class="bg-white rounded-lg p-6 max-w-md w-full"> |
| <div class="flex justify-between items-center mb-4"> |
| <h3 class="text-xl font-bold">Download Options</h3> |
| <button id="close-modal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="mb-4"> |
| <p class="text-gray-600 mb-2">Select video quality:</p> |
| <div class="space-y-2"> |
| <div class="flex items-center"> |
| <input type="radio" id="quality-high" name="video-quality" class="mr-2" checked> |
| <label for="quality-high">High Quality (HD)</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="radio" id="quality-medium" name="video-quality" class="mr-2"> |
| <label for="quality-medium">Medium Quality</label> |
| </div> |
| <div class="flex items-center"> |
| <input type="radio" id="quality-low" name="video-quality" class="mr-2"> |
| <label for="quality-low">Low Quality (Smaller file)</label> |
| </div> |
| </div> |
| </div> |
| <button id="start-download" class="w-full gradient-bg text-white font-bold py-3 px-6 rounded-lg download-btn"> |
| <i class="fas fa-download mr-2"></i> Start Download |
| </button> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| |
| document.getElementById('paste-btn').addEventListener('click', function() { |
| navigator.clipboard.readText().then(text => { |
| document.getElementById('pinterest-url').value = text; |
| }).catch(err => { |
| console.error('Failed to read clipboard contents: ', err); |
| }); |
| }); |
| |
| |
| const faqQuestions = document.querySelectorAll('.faq-question'); |
| faqQuestions.forEach(question => { |
| question.addEventListener('click', function() { |
| const answer = this.nextElementSibling; |
| const icon = this.querySelector('i'); |
| |
| |
| answer.classList.toggle('hidden'); |
| |
| |
| if (answer.classList.contains('hidden')) { |
| icon.style.transform = 'rotate(0deg)'; |
| } else { |
| icon.style.transform = 'rotate(180deg)'; |
| } |
| |
| |
| faqQuestions.forEach(q => { |
| if (q !== this) { |
| q.nextElementSibling.classList.add('hidden'); |
| q.querySelector('i').style.transform = 'rotate(0deg)'; |
| } |
| }); |
| }); |
| }); |
| |
| |
| document.getElementById('download-btn').addEventListener('click', function() { |
| const urlInput = document.getElementById('pinterest-url').value.trim(); |
| const errorMessage = document.getElementById('error-message'); |
| |
| |
| if (!urlInput) { |
| errorMessage.textContent = 'Please enter a Pinterest video URL'; |
| errorMessage.classList.remove('hidden'); |
| return; |
| } |
| |
| if (!urlInput.includes('pinterest.com') && !urlInput.includes('pin.it')) { |
| errorMessage.textContent = 'Please enter a valid Pinterest URL'; |
| errorMessage.classList.remove('hidden'); |
| return; |
| } |
| |
| errorMessage.classList.add('hidden'); |
| |
| |
| document.getElementById('download-modal').classList.remove('hidden'); |
| }); |
| |
| |
| document.getElementById('close-modal').addEventListener('click', function() { |
| document.getElementById('download-modal').classList.add('hidden'); |
| }); |
| |
| |
| document.getElementById('start-download').addEventListener('click', function() { |
| const urlInput = document.getElementById('pinterest-url').value.trim(); |
| const selectedQuality = document.querySelector('input[name="video-quality"]:checked').id; |
| |
| |
| console.log('Downloading:', urlInput, 'Quality:', selectedQuality); |
| |
| |
| alert('Download would start now for URL: ' + urlInput + '\nQuality: ' + selectedQuality); |
| |
| |
| document.getElementById('download-modal').classList.add('hidden'); |
| |
| |
| const originalText = this.innerHTML; |
| this.innerHTML = '<i class="fas fa-check mr-2"></i> Download Started!'; |
| this.classList.remove('gradient-bg'); |
| this.classList.add('bg-green-500'); |
| |
| setTimeout(() => { |
| this.innerHTML = originalText; |
| this.classList.add('gradient-bg'); |
| this.classList.remove('bg-green-500'); |
| }, 2000); |
| }); |
| |
| |
| document.getElementById('download-modal').addEventListener('click', function(e) { |
| if (e.target === this) { |
| this.classList.add('hidden'); |
| } |
| }); |
| }); |
| |
| |
| function extractVideoId(url) { |
| |
| const pinIdMatch = url.match(/pin\/(\d+)/); |
| if (pinIdMatch && pinIdMatch[1]) { |
| return pinIdMatch[1]; |
| } |
| return null; |
| } |
| </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=Nekruz/pinsave" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
