proxy

Sleeping

File size: 14,927 Bytes

<!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');

    // Drag and drop functionality
    ['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();
    }

    // Update file label when file is selected
    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];
    }

    // Simulate upload progress
    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>