| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Google Drive to Direct Link Converter</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, #4285F4 0%, #34A853 50%, #FBBC05 100%); |
| } |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| @keyframes pulse { |
| 0% { |
| transform: scale(1); |
| } |
| 50% { |
| transform: scale(1.05); |
| } |
| 100% { |
| transform: scale(1); |
| } |
| } |
| .tooltip { |
| position: relative; |
| } |
| .tooltip:hover .tooltip-text { |
| visibility: visible; |
| opacity: 1; |
| } |
| .tooltip-text { |
| visibility: hidden; |
| width: 200px; |
| background-color: #333; |
| color: #fff; |
| text-align: center; |
| border-radius: 6px; |
| padding: 5px; |
| position: absolute; |
| z-index: 1; |
| bottom: 125%; |
| left: 50%; |
| margin-left: -100px; |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| .tooltip-text::after { |
| content: ""; |
| position: absolute; |
| top: 100%; |
| left: 50%; |
| margin-left: -5px; |
| border-width: 5px; |
| border-style: solid; |
| border-color: #333 transparent transparent transparent; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen bg-gray-100"> |
| <div class="gradient-bg text-white py-12 px-4"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h1 class="text-4xl md:text-5xl font-bold mb-4"> |
| <i class="fab fa-google-drive mr-3"></i> |
| Google Drive Link Converter |
| </h1> |
| <p class="text-xl md:text-2xl mb-8">Transform your Google Drive links into direct download URLs instantly</p> |
| |
| <div class="bg-white rounded-lg shadow-xl p-6 max-w-3xl mx-auto"> |
| <div class="flex flex-col md:flex-row gap-4"> |
| <input |
| type="text" |
| id="driveLink" |
| placeholder="Paste your Google Drive link here..." |
| class="flex-grow px-4 py-3 rounded-lg border-2 border-gray-300 focus:border-blue-500 focus:outline-none text-gray-800" |
| > |
| <button |
| id="convertBtn" |
| class="px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition duration-300 flex items-center justify-center" |
| > |
| <i class="fas fa-exchange-alt mr-2"></i> Convert |
| </button> |
| </div> |
| |
| <div id="resultContainer" class="mt-6 hidden"> |
| <div class="flex items-center mb-2"> |
| <h3 class="text-lg font-semibold text-gray-800">Direct Download Link:</h3> |
| <div class="tooltip ml-2"> |
| <i class="fas fa-info-circle text-blue-500 cursor-pointer"></i> |
| <span class="tooltip-text">This link will download the file directly when clicked</span> |
| </div> |
| </div> |
| <div class="flex flex-col md:flex-row gap-2"> |
| <input |
| type="text" |
| id="directLink" |
| readonly |
| class="flex-grow px-4 py-3 rounded-lg border-2 border-gray-300 bg-gray-100 text-gray-800" |
| > |
| <button |
| id="copyBtn" |
| class="px-4 py-3 bg-green-600 hover:bg-green-700 text-white font-semibold rounded-lg transition duration-300 flex items-center justify-center" |
| > |
| <i class="far fa-copy mr-2"></i> Copy |
| </button> |
| </div> |
| <div class="mt-4"> |
| <a |
| id="downloadBtn" |
| href="#" |
| target="_blank" |
| class="inline-block px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition duration-300" |
| > |
| <i class="fas fa-download mr-2"></i> Download Now |
| </a> |
| </div> |
| </div> |
| |
| <div id="errorContainer" class="mt-4 hidden"> |
| <div class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded"> |
| <div class="flex items-center"> |
| <i class="fas fa-exclamation-circle mr-2"></i> |
| <p id="errorMessage" class="font-medium"></p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="max-w-4xl mx-auto py-12 px-4"> |
| <div class="bg-white rounded-lg shadow-lg p-6"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">How It Works</h2> |
| |
| <div class="grid md:grid-cols-3 gap-6"> |
| <div class="bg-blue-50 p-4 rounded-lg"> |
| <div class="text-blue-600 text-3xl mb-3"> |
| <i class="fas fa-link"></i> |
| </div> |
| <h3 class="font-semibold text-lg mb-2">1. Paste Your Link</h3> |
| <p class="text-gray-600">Copy and paste your Google Drive shareable link into the input field above.</p> |
| </div> |
| |
| <div class="bg-green-50 p-4 rounded-lg"> |
| <div class="text-green-600 text-3xl mb-3"> |
| <i class="fas fa-exchange-alt"></i> |
| </div> |
| <h3 class="font-semibold text-lg mb-2">2. Convert to Direct Link</h3> |
| <p class="text-gray-600">Click the convert button to transform your link into a direct download URL.</p> |
| </div> |
| |
| <div class="bg-yellow-50 p-4 rounded-lg"> |
| <div class="text-yellow-600 text-3xl mb-3"> |
| <i class="fas fa-download"></i> |
| </div> |
| <h3 class="font-semibold text-lg mb-2">3. Download Your File</h3> |
| <p class="text-gray-600">Copy the direct link or click the download button to get your file instantly.</p> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-white rounded-lg shadow-lg p-6 mt-8"> |
| <h2 class="text-2xl font-bold text-gray-800 mb-4">Frequently Asked Questions</h2> |
| |
| <div class="space-y-4"> |
| <div class="border-b pb-4"> |
| <h3 class="font-semibold text-lg text-blue-600">What types of Google Drive links can be converted?</h3> |
| <p class="text-gray-600 mt-1">This converter works with shareable links to files (not folders) in Google Drive. The file must have sharing permissions set to "Anyone with the link".</p> |
| </div> |
| |
| <div class="border-b pb-4"> |
| <h3 class="font-semibold text-lg text-blue-600">Is this service free to use?</h3> |
| <p class="text-gray-600 mt-1">Yes! Our Google Drive link converter is completely free with no limitations on usage.</p> |
| </div> |
| |
| <div class="border-b pb-4"> |
| <h3 class="font-semibold text-lg text-blue-600">How secure is this converter?</h3> |
| <p class="text-gray-600 mt-1">All conversions happen in your browser. We don't store your links or files on any server.</p> |
| </div> |
| |
| <div> |
| <h3 class="font-semibold text-lg text-blue-600">What's the maximum file size supported?</h3> |
| <p class="text-gray-600 mt-1">There's no size limit for conversion, but very large files may take longer to download.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <footer class="bg-gray-800 text-white py-8 px-4"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <div class="flex justify-center space-x-6 mb-6"> |
| <a href="#" class="text-gray-300 hover:text-white"> |
| <i class="fab fa-twitter text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white"> |
| <i class="fab fa-github text-xl"></i> |
| </a> |
| <a href="#" class="text-gray-300 hover:text-white"> |
| <i class="fab fa-facebook text-xl"></i> |
| </a> |
| </div> |
| <p class="text-gray-300">© 2023 Google Drive Link Converter. All rights reserved.</p> |
| </div> |
| </footer> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const convertBtn = document.getElementById('convertBtn'); |
| const copyBtn = document.getElementById('copyBtn'); |
| const driveLink = document.getElementById('driveLink'); |
| const directLink = document.getElementById('directLink'); |
| const resultContainer = document.getElementById('resultContainer'); |
| const errorContainer = document.getElementById('errorContainer'); |
| const errorMessage = document.getElementById('errorMessage'); |
| const downloadBtn = document.getElementById('downloadBtn'); |
| |
| |
| convertBtn.classList.add('pulse'); |
| |
| convertBtn.addEventListener('click', function() { |
| const link = driveLink.value.trim(); |
| |
| |
| resultContainer.classList.add('hidden'); |
| errorContainer.classList.add('hidden'); |
| |
| if (!link) { |
| showError('Please enter a Google Drive link'); |
| return; |
| } |
| |
| |
| if (!isValidDriveLink(link)) { |
| showError('Please enter a valid Google Drive shareable link'); |
| return; |
| } |
| |
| |
| try { |
| const directUrl = convertDriveLink(link); |
| directLink.value = directUrl; |
| downloadBtn.href = directUrl; |
| resultContainer.classList.remove('hidden'); |
| |
| |
| resultContainer.scrollIntoView({ behavior: 'smooth' }); |
| } catch (error) { |
| showError('Error converting link. Please check your link and try again.'); |
| } |
| }); |
| |
| copyBtn.addEventListener('click', function() { |
| directLink.select(); |
| document.execCommand('copy'); |
| |
| |
| const originalText = copyBtn.innerHTML; |
| copyBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Copied!'; |
| |
| setTimeout(function() { |
| copyBtn.innerHTML = originalText; |
| }, 2000); |
| }); |
| |
| function showError(message) { |
| errorMessage.textContent = message; |
| errorContainer.classList.remove('hidden'); |
| errorContainer.scrollIntoView({ behavior: 'smooth' }); |
| } |
| |
| function isValidDriveLink(link) { |
| |
| return link.includes('drive.google.com') && |
| (link.includes('/file/d/') || link.includes('id=')); |
| } |
| |
| function convertDriveLink(link) { |
| |
| let fileId = ''; |
| |
| if (link.includes('/file/d/')) { |
| |
| const match = link.match(/\/file\/d\/([^\/]+)/); |
| if (match && match[1]) { |
| fileId = match[1]; |
| } |
| } else if (link.includes('id=')) { |
| |
| const url = new URL(link); |
| fileId = url.searchParams.get('id'); |
| } |
| |
| if (!fileId) { |
| throw new Error('Could not extract file ID from the link'); |
| } |
| |
| |
| return `https://drive.google.com/uc?export=download&id=${fileId}`; |
| } |
| |
| |
| driveLink.addEventListener('input', function() { |
| errorContainer.classList.add('hidden'); |
| }); |
| }); |
| </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=Jxkxkssk/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
