proxy

Sleeping

App Files Files Community

NexusV1 commited on Jun 29, 2025

Commit

602ce84

verified ·

1 Parent(s): c330b87

Create public/index.html

Browse files

Files changed (1) hide show

public/index.html +538 -0

public/index.html ADDED Viewed

	@@ -0,0 +1,538 @@

+<!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>No Size Limits</h3>
+          <p>Upload files of any size</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 • Any size • 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);
+        // Simulate API call - replace with actual endpoint
+        await new Promise(resolve => setTimeout(resolve, 2000 + Math.random() * 3000));
+        // Mock response - replace with actual API response
+        const mockResponse = {
+          viewLink: `https://filesnest.com/f/${Math.random().toString(36).substr(2, 8)}`,
+          fileName: fileInput.files[0].name,
+          fileSize: formatFileSize(fileInput.files[0].size)
+        };
+        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> ${mockResponse.fileName}</div>
+              <div style="margin-bottom: 15px;"><strong>Size:</strong> ${mockResponse.fileSize}</div>
+              <div><strong>Permanent Link:</strong></div>
+              <a href="${mockResponse.viewLink}" target="_blank" class="result-link" style="font-size: 1.1rem;">${mockResponse.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;">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>