| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>FilesNest - Permanent File Hosting</title> |
| <style> |
| * { |
| margin: 0; |
| padding: 0; |
| box-sizing: border-box; |
| } |
| |
| html { |
| background: #0a0a0f; |
| background-attachment: fixed; |
| } |
| |
| body { |
| background: linear-gradient(135deg, #0a0a0f 0%, #1a0a1f 50%, #0f0a1a 100%); |
| background-attachment: fixed; |
| color: #e8e0ff; |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
| min-height: 100vh; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| padding: 20px; |
| position: relative; |
| overflow-x: hidden; |
| } |
| |
| body::before { |
| content: ''; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: radial-gradient(circle at 20% 80%, rgba(120, 77, 255, 0.1) 0%, transparent 50%), |
| radial-gradient(circle at 80% 20%, rgba(183, 148, 255, 0.08) 0%, transparent 50%); |
| pointer-events: none; |
| z-index: -1; |
| will-change: auto; |
| backface-visibility: hidden; |
| transform: translateZ(0); |
| } |
| |
| .container { |
| text-align: center; |
| max-width: 600px; |
| width: 100%; |
| } |
| |
| .logo-section { |
| margin-bottom: 40px; |
| } |
| |
| h1 { |
| color: #b794ff; |
| font-size: 3.5rem; |
| font-weight: 700; |
| margin-bottom: 10px; |
| text-shadow: 0 0 20px rgba(183, 148, 255, 0.3); |
| letter-spacing: -1px; |
| } |
| |
| .tagline { |
| color: #9d8bcc; |
| font-size: 1.2rem; |
| margin-bottom: 30px; |
| font-weight: 300; |
| } |
| |
| .description { |
| background: rgba(28, 28, 42, 0.6); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(183, 148, 255, 0.2); |
| border-radius: 16px; |
| padding: 30px; |
| margin-bottom: 40px; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); |
| } |
| |
| .description h2 { |
| color: #c9b8ff; |
| font-size: 1.5rem; |
| margin-bottom: 15px; |
| font-weight: 600; |
| } |
| |
| .description p { |
| color: #b8a8e0; |
| line-height: 1.6; |
| font-size: 1rem; |
| margin-bottom: 15px; |
| } |
| |
| .features { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); |
| gap: 15px; |
| margin-top: 20px; |
| } |
| |
| .feature { |
| background: rgba(45, 45, 68, 0.4); |
| padding: 15px; |
| border-radius: 10px; |
| border: 1px solid rgba(107, 77, 191, 0.3); |
| } |
| |
| .feature-icon { |
| font-size: 1.5rem; |
| margin-bottom: 8px; |
| } |
| |
| .feature h3 { |
| color: #d4c4ff; |
| font-size: 0.9rem; |
| font-weight: 600; |
| margin-bottom: 5px; |
| } |
| |
| .feature p { |
| color: #a899c7; |
| font-size: 0.8rem; |
| margin: 0; |
| } |
| |
| .upload-section { |
| background: rgba(28, 28, 42, 0.8); |
| backdrop-filter: blur(15px); |
| padding: 40px; |
| border-radius: 20px; |
| box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(183, 148, 255, 0.3); |
| border: 1px solid rgba(107, 77, 191, 0.4); |
| } |
| |
| .upload-form { |
| display: flex; |
| flex-direction: column; |
| gap: 20px; |
| width: 100%; |
| } |
| |
| .file-input-wrapper { |
| position: relative; |
| overflow: hidden; |
| background: linear-gradient(135deg, #2d2d44, #3d3d54); |
| border: 2px dashed rgba(183, 148, 255, 0.4); |
| border-radius: 12px; |
| padding: 40px 20px; |
| transition: all 0.3s ease; |
| cursor: pointer; |
| } |
| |
| .file-input-wrapper:hover { |
| border-color: rgba(183, 148, 255, 0.7); |
| background: linear-gradient(135deg, #3d3d54, #4d4d64); |
| transform: translateY(-2px); |
| } |
| |
| .file-input-wrapper.dragover { |
| border-color: #b794ff; |
| background: linear-gradient(135deg, #4d4d64, #5d5d74); |
| box-shadow: 0 0 20px rgba(183, 148, 255, 0.3); |
| } |
| |
| input[type="file"] { |
| position: absolute; |
| left: -9999px; |
| opacity: 0; |
| } |
| |
| .file-input-label { |
| color: #c9b8ff; |
| font-size: 1.1rem; |
| font-weight: 500; |
| display: block; |
| cursor: pointer; |
| } |
| |
| .file-input-sublabel { |
| color: #9d8bcc; |
| font-size: 0.9rem; |
| margin-top: 8px; |
| display: block; |
| } |
| |
| .upload-btn { |
| background: linear-gradient(135deg, #7c4dff, #9f70ff); |
| color: #fff; |
| border: none; |
| padding: 16px 32px; |
| border-radius: 12px; |
| cursor: pointer; |
| font-size: 1.1rem; |
| font-weight: 600; |
| transition: all 0.3s ease; |
| box-shadow: 0 4px 16px rgba(124, 77, 255, 0.3); |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .upload-btn:hover { |
| background: linear-gradient(135deg, #9f70ff, #b794ff); |
| transform: translateY(-2px); |
| box-shadow: 0 8px 24px rgba(124, 77, 255, 0.4); |
| } |
| |
| .upload-btn:active { |
| transform: translateY(0); |
| } |
| |
| .upload-btn:disabled { |
| background: #444; |
| cursor: not-allowed; |
| transform: none; |
| box-shadow: none; |
| } |
| |
| .progress-container { |
| display: none; |
| margin-top: 20px; |
| } |
| |
| .progress-bar { |
| width: 100%; |
| height: 8px; |
| background: rgba(45, 45, 68, 0.6); |
| border-radius: 4px; |
| overflow: hidden; |
| box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); |
| } |
| |
| .progress-fill { |
| height: 100%; |
| background: linear-gradient(90deg, #7c4dff, #b794ff); |
| width: 0%; |
| transition: width 0.3s ease; |
| border-radius: 4px; |
| box-shadow: 0 0 10px rgba(124, 77, 255, 0.5); |
| } |
| |
| .progress-text { |
| color: #c9b8ff; |
| font-size: 0.9rem; |
| margin-top: 8px; |
| text-align: center; |
| } |
| |
| .result { |
| margin-top: 30px; |
| padding: 20px; |
| background: rgba(45, 68, 45, 0.3); |
| border: 1px solid rgba(76, 175, 80, 0.4); |
| border-radius: 12px; |
| display: none; |
| } |
| |
| .result.error { |
| background: rgba(68, 45, 45, 0.3); |
| border-color: rgba(244, 67, 54, 0.4); |
| } |
| |
| .result-link { |
| color: #b794ff; |
| text-decoration: none; |
| word-break: break-all; |
| font-weight: 500; |
| } |
| |
| .result-link:hover { |
| color: #d4c4ff; |
| text-decoration: underline; |
| } |
| |
| @media (max-width: 768px) { |
| h1 { |
| font-size: 2.5rem; |
| } |
| |
| .upload-section { |
| padding: 30px 20px; |
| } |
| |
| .description { |
| padding: 20px; |
| } |
| |
| .features { |
| grid-template-columns: 1fr; |
| } |
| } |
| |
| .pulse-animation { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(124, 77, 255, 0.4); } |
| 70% { box-shadow: 0 0 0 10px rgba(124, 77, 255, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(124, 77, 255, 0); } |
| } |
| </style> |
| </head> |
| <body> |
| <div class="container"> |
| <div class="logo-section"> |
| <h1>FilesNest</h1> |
| <div class="tagline">Your Permanent File Sanctuary</div> |
| </div> |
|
|
| <div class="description"> |
| <h2>🏠 Permanent File Hosting Made Simple</h2> |
| <p>FilesNest provides reliable, permanent file hosting that you can count on. Upload your files once and access them forever with guaranteed uptime and blazing-fast delivery speeds.</p> |
| |
| <p>Whether you're sharing documents, images, videos, or any other digital content, FilesNest ensures your files remain accessible 24/7 with enterprise-grade security and redundancy.</p> |
|
|
| <div class="features"> |
| <div class="feature"> |
| <div class="feature-icon">🚀</div> |
| <h3>Lightning Fast</h3> |
| <p>Global CDN delivery</p> |
| </div> |
| <div class="feature"> |
| <div class="feature-icon">🔒</div> |
| <h3>Secure Storage</h3> |
| <p>Enterprise-grade security</p> |
| </div> |
| <div class="feature"> |
| <div class="feature-icon">♾️</div> |
| <h3>Permanent Links</h3> |
| <p>Never expire or break</p> |
| </div> |
| <div class="feature"> |
| <div class="feature-icon">🚀</div> |
| <h3>File Size Limits</h3> |
| <p>1gb Max Size Per Upload</p> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="upload-section"> |
| <form id="uploadForm" class="upload-form" enctype="multipart/form-data"> |
| <div class="file-input-wrapper" id="fileInputWrapper"> |
| <input type="file" name="file" id="fileInput" required> |
| <label for="fileInput" class="file-input-label"> |
| 📁 Click to select file or drag & drop |
| <span class="file-input-sublabel">Any file type • 1gb Size Max • Permanent hosting</span> |
| </label> |
| </div> |
| |
| <button type="submit" class="upload-btn" id="uploadBtn"> |
| 🚀 Upload to FilesNest |
| </button> |
| |
| <div class="progress-container" id="progressContainer"> |
| <div class="progress-bar"> |
| <div class="progress-fill" id="progressFill"></div> |
| </div> |
| <div class="progress-text" id="progressText">Uploading... 0%</div> |
| </div> |
| </form> |
| |
| <div id="result" class="result"></div> |
| </div> |
| </div> |
|
|
| <script> |
| const form = document.getElementById('uploadForm'); |
| const result = document.getElementById('result'); |
| const fileInput = document.getElementById('fileInput'); |
| const fileInputWrapper = document.getElementById('fileInputWrapper'); |
| const uploadBtn = document.getElementById('uploadBtn'); |
| const progressContainer = document.getElementById('progressContainer'); |
| const progressFill = document.getElementById('progressFill'); |
| const progressText = document.getElementById('progressText'); |
| |
| |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| fileInputWrapper.addEventListener(eventName, preventDefaults, false); |
| }); |
| |
| ['dragenter', 'dragover'].forEach(eventName => { |
| fileInputWrapper.addEventListener(eventName, highlight, false); |
| }); |
| |
| ['dragleave', 'drop'].forEach(eventName => { |
| fileInputWrapper.addEventListener(eventName, unhighlight, false); |
| }); |
| |
| fileInputWrapper.addEventListener('drop', handleDrop, false); |
| |
| function preventDefaults(e) { |
| e.preventDefault(); |
| e.stopPropagation(); |
| } |
| |
| function highlight() { |
| fileInputWrapper.classList.add('dragover'); |
| } |
| |
| function unhighlight() { |
| fileInputWrapper.classList.remove('dragover'); |
| } |
| |
| function handleDrop(e) { |
| const dt = e.dataTransfer; |
| const files = dt.files; |
| fileInput.files = files; |
| updateFileLabel(); |
| } |
| |
| |
| fileInput.addEventListener('change', updateFileLabel); |
| |
| function updateFileLabel() { |
| const file = fileInput.files[0]; |
| if (file) { |
| const label = fileInputWrapper.querySelector('.file-input-label'); |
| label.innerHTML = ` |
| 📄 ${file.name} |
| <span class="file-input-sublabel">Size: ${formatFileSize(file.size)} • Ready to upload</span> |
| `; |
| } |
| } |
| |
| function formatFileSize(bytes) { |
| if (bytes === 0) return '0 Bytes'; |
| const k = 1024; |
| const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']; |
| const i = Math.floor(Math.log(bytes) / Math.log(k)); |
| return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]; |
| } |
| |
| |
| function simulateProgress() { |
| let progress = 0; |
| progressContainer.style.display = 'block'; |
| |
| const interval = setInterval(() => { |
| progress += Math.random() * 15; |
| if (progress > 95) { |
| progress = 95; |
| } |
| |
| progressFill.style.width = progress + '%'; |
| progressText.textContent = `Uploading... ${Math.round(progress)}%`; |
| |
| if (progress >= 95) { |
| clearInterval(interval); |
| } |
| }, 200); |
| |
| return interval; |
| } |
| |
| function completeProgress() { |
| progressFill.style.width = '100%'; |
| progressText.textContent = 'Upload complete! 100%'; |
| |
| setTimeout(() => { |
| progressContainer.style.display = 'none'; |
| progressFill.style.width = '0%'; |
| }, 2000); |
| } |
| |
| form.addEventListener('submit', async (e) => { |
| e.preventDefault(); |
| |
| if (!fileInput.files[0]) { |
| result.innerHTML = '<strong style="color: #ff6b6b;">Please select a file to upload.</strong>'; |
| result.className = 'result error'; |
| result.style.display = 'block'; |
| return; |
| } |
| |
| uploadBtn.disabled = true; |
| uploadBtn.textContent = '🔄 Uploading...'; |
| uploadBtn.classList.add('pulse-animation'); |
| result.style.display = 'none'; |
| |
| const progressInterval = simulateProgress(); |
| |
| try { |
| const formData = new FormData(form); |
| |
| const response = await fetch('https://nexusv1-uploadx.hf.space/upload', { |
| method: 'POST', |
| body: formData |
| }); |
| |
| if (!response.ok) { |
| throw new Error(`HTTP error! status: ${response.status}`); |
| } |
| |
| const data = await response.json(); |
| |
| clearInterval(progressInterval); |
| completeProgress(); |
| |
| result.innerHTML = ` |
| <div style="text-align: center;"> |
| <div style="font-size: 2rem; margin-bottom: 15px;">🎉</div> |
| <strong style="color: #4caf50; font-size: 1.2rem;">Upload Successful!</strong> |
| <div style="margin: 15px 0; padding: 15px; background: rgba(76, 175, 80, 0.1); border-radius: 8px;"> |
| <div style="margin-bottom: 8px;"><strong>File:</strong> ${fileInput.files[0].name}</div> |
| <div style="margin-bottom: 15px;"><strong>Size:</strong> ${formatFileSize(fileInput.files[0].size)}</div> |
| <div><strong>Permanent Link:</strong></div> |
| <a href="${data.viewLink}" target="_blank" class="result-link" style="font-size: 1.1rem;">${data.viewLink}</a> |
| </div> |
| <div style="color: #9d8bcc; font-size: 0.9rem;">Your file is now permanently hosted and accessible worldwide! 🌍</div> |
| </div> |
| `; |
| result.className = 'result'; |
| result.style.display = 'block'; |
| |
| } catch (error) { |
| clearInterval(progressInterval); |
| progressContainer.style.display = 'none'; |
| |
| result.innerHTML = ` |
| <strong style="color: #ff6b6b;">Upload Failed</strong> |
| <div style="margin-top: 10px; color: #ffb3b3;">Error: ${error.message}. Please try again or contact support if the problem persists.</div> |
| `; |
| result.className = 'result error'; |
| result.style.display = 'block'; |
| } finally { |
| uploadBtn.disabled = false; |
| uploadBtn.textContent = '🚀 Upload to FilesNest'; |
| uploadBtn.classList.remove('pulse-animation'); |
| } |
| }); |
| </script> |
| </body> |
| </html> |
