|
|
<!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> |
