<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="robots" content="noindex, nofollow">
  <meta name="color-scheme" content="dark light">
  <title>fxck.space — Upload</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg-1: #08090c;
      --bg-2: #0b0e16;
      --text: #e8ecf1;
      --muted: #b5c1cf;
      --neon-pink: #ff44cc;
      --neon-cyan: #00e7ff;
      --neon-violet: #7c4dff;
      --glass-bg: rgba(255, 255, 255, 0.08);
      --glass-stroke: rgba(255, 255, 255, 0.18);
    }

    * { box-sizing: border-box; }

    html, body { height: 100%; }

    body {
      margin: 0;
      font-family: "Outfit", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
      color: var(--text);
      background: radial-gradient(1200px 900px at 20% 10%, #0f1324 0%, var(--bg-1) 45%, var(--bg-2) 100%);
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    /* Ambient neon glows */
    .scene {
      position: fixed;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .blob {
      position: absolute;
      width: 55vmax;
      height: 55vmax;
      filter: blur(80px);
      opacity: 0.35;
      transform: translate(-50%, -50%);
      mix-blend-mode: screen;
      border-radius: 50%;
    }
    .blob.pink { background: radial-gradient(circle at 30% 30%, var(--neon-pink), transparent 55%); left: 10%; top: 10%; animation: float1 18s ease-in-out infinite; }
    .blob.cyan { background: radial-gradient(circle at 70% 40%, var(--neon-cyan), transparent 55%); right: -5%; top: 35%; animation: float2 22s ease-in-out infinite; }
    .blob.violet { background: radial-gradient(circle at 50% 70%, var(--neon-violet), transparent 55%); left: 40%; bottom: -5%; animation: float3 26s ease-in-out infinite; }

    @keyframes float1 { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-45%, -52%) scale(1.08); } }
    @keyframes float2 { 0%, 100% { transform: translate(50%, -50%) scale(1); } 50% { transform: translate(45%, -48%) scale(1.06); } }
    @keyframes float3 { 0%, 100% { transform: translate(-50%, 50%) scale(1); } 50% { transform: translate(-52%, 46%) scale(1.07); } }

    /* Center stage */
    .wrap {
      position: relative;
      z-index: 1;
      width: min(92ch, 92vw);
      margin: 6vmin auto;
      padding: 0 2vmin;
    }

    /* Glass panel with neon border */
    .glass {
      position: relative;
      background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
      border: 1px solid var(--glass-stroke);
      box-shadow: 0 10px 40px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.06);
      backdrop-filter: blur(14px) saturate(120%);
      -webkit-backdrop-filter: blur(14px) saturate(120%);
      border-radius: 22px;
      padding: clamp(24px, 4vmin, 44px);
      overflow: hidden;
    }
    .glass::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: inherit;
      padding: 1px;
      background: linear-gradient(120deg, rgba(255,255,255,0.35), rgba(255,255,255,0) 30%),
                  conic-gradient(from 0deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan), var(--neon-pink));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: 0.6;
      filter: blur(0.5px) saturate(120%);
      animation: borderSpin 18s linear infinite;
      pointer-events: none;
    }
    @keyframes borderSpin { to { transform: rotate(1turn); } }

    /* Header */
    .badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 6px 12px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.14);
      box-shadow: inset 0 0 12px rgba(255,255,255,0.05);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
      width: max-content;
      color: var(--muted);
      font-weight: 600;
      letter-spacing: 0.24px;
      font-size: 11px;
      text-transform: uppercase;
    }
    .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: radial-gradient(circle at 40% 40%, #fff, var(--neon-pink));
      box-shadow: 0 0 16px var(--neon-pink), 0 0 28px var(--neon-pink);
      animation: pulse 1.8s ease-in-out infinite;
    }
    @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.25); opacity: 1; } }

    h1 {
      margin: 16px 0 8px 0;
      font-size: clamp(28px, 5vmin, 54px);
      line-height: 1.08;
      font-weight: 700;
      letter-spacing: 0.2px;
      background: linear-gradient(90deg, #fff, #e7f8ff 40%, #e9dbff 70%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      text-shadow: 0 0 18px rgba(255, 255, 255, 0.25), 0 0 36px rgba(124, 77, 255, 0.25), 0 0 46px rgba(0, 231, 255, 0.25);
    }
    p.lead {
      margin: 0 0 18px 0;
      color: var(--muted);
      font-size: clamp(16px, 2.2vmin, 19px);
      line-height: 1.6;
    }

    /* Upload form */
    .upload-card {
      margin-top: 20px;
      padding: 20px;
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 14px;
      background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
    }

    .form-row {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 12px;
    }

    .file-input-wrapper {
      position: relative;
      display: inline-block;
      flex: 1;
      min-width: 200px;
    }

    input[type=file] {
      position: absolute;
      width: 0;
      height: 0;
      opacity: 0;
      overflow: hidden;
      z-index: -1;
    }

    .file-input-label {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 20px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      color: var(--text);
      cursor: pointer;
      transition: all 0.2s;
      font-size: 14px;
      font-weight: 600;
      min-height: 42px;
    }

    .file-input-label:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.18);
      transform: translateY(-1px);
    }

    .file-input-label.has-file {
      background: linear-gradient(180deg, rgba(0, 231, 255, 0.12), rgba(124, 77, 255, 0.08));
      border-color: rgba(0, 231, 255, 0.25);
    }

    .file-icon {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .file-name {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: var(--text);
    }

    .file-placeholder {
      color: var(--muted);
    }

    label {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 14px;
      color: var(--muted);
      font-weight: 500;
    }

    select {
      appearance: none;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      color: var(--text);
      padding: 10px 14px;
      border-radius: 10px;
      cursor: pointer;
      transition: all 0.2s;
      font-size: 14px;
    }
    select:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.18);
    }

    button {
      appearance: none;
      background: linear-gradient(180deg, #eaffff, #c8fbff);
      border: 0;
      color: #061018;
      padding: 10px 24px;
      border-radius: 10px;
      cursor: pointer;
      font-weight: 700;
      letter-spacing: 0.2px;
      box-shadow: 0 4px 12px rgba(0, 231, 255, 0.2);
      transition: all 0.2s;
      font-size: 14px;
    }
    button:hover {
      background: linear-gradient(180deg, #f2ffff, #d4fcff);
      box-shadow: 0 6px 16px rgba(0, 231, 255, 0.3);
      transform: translateY(-1px);
    }
    button:active {
      transform: translateY(0);
      box-shadow: 0 2px 8px rgba(0, 231, 255, 0.2);
    }

    .quota {
      color: var(--muted);
      font-size: 13px;
      margin-top: 12px;
      padding: 8px;
      background: rgba(255,255,255,0.04);
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.08);
    }

    progress {
      width: 100%;
      height: 10px;
      border-radius: 999px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.14);
      overflow: hidden;
      margin-top: 12px;
    }
    progress::-webkit-progress-bar {
      background: rgba(255,255,255,0.06);
      border-radius: 999px;
      transition: all 0.3s ease-out;
    }
    progress::-webkit-progress-value {
      background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan));
      background-size: 200% 100%;
      background-position: -100% 0;
      animation: shimmerProgress 3s ease-in-out infinite;
      border-radius: 999px;
      position: relative;
      transition: width 0.3s ease-out;
      box-shadow: 0 0 12px rgba(0, 231, 255, 0.4);
    }
    progress::-moz-progress-bar {
      background: linear-gradient(90deg, var(--neon-pink), var(--neon-violet), var(--neon-cyan));
      background-size: 200% 100%;
      background-position: -100% 0;
      animation: shimmerProgress 3s ease-in-out infinite;
      box-shadow: 0 0 12px rgba(0, 231, 255, 0.4);
    }
    @keyframes shimmerProgress {
      0% { background-position: -100% 0; }
      100% { background-position: 100% 0; }
    }

    .result {
      margin-top: 12px;
      padding: 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      word-break: break-all;
      color: var(--text);
    }
    .result a {
      color: #00e7ff;
      text-decoration: none;
      font-weight: 600;
    }
    .result a:hover {
      text-decoration: underline;
    }

    footer {
      margin-top: 20px;
      color: rgba(232, 236, 241, 0.7);
      font-size: 13px;
    }
    footer a { color: #a9f5ff; text-decoration: none; }
    footer a:hover { text-decoration: underline; }

    /* Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .blob, .glass::before, .dot, progress { animation: none !important; }
    }
  </style>
  <meta name="theme-color" content="#0b0e16">
</head>
<body>
  <div class="scene" aria-hidden="true">
    <div class="blob pink"></div>
    <div class="blob cyan"></div>
    <div class="blob violet"></div>
  </div>

  <main class="wrap" role="main" aria-labelledby="title">
    <section class="glass" aria-labelledby="title">
      <div class="badge" aria-hidden="true"><span class="dot"></span> online</div>
      <h1 id="title">fxck.space</h1>
      <p class="lead">uploads. nothing else. only 32gb per day.</p>

      <div class="upload-card">
        <div class="form-row">
          <div class="file-input-wrapper">
            <input id="file" type="file" />
            <label for="file" class="file-input-label">
              <svg class="file-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
                <polyline points="17 8 12 3 7 8"></polyline>
                <line x1="12" y1="3" x2="12" y2="15"></line>
              </svg>
              <span class="file-name" id="fileName"><span class="file-placeholder">Choose a file</span></span>
            </label>
          </div>
          <label>
            Expiry
            <select id="expiry">
              <option value="7">7 days</option>
              <option value="15">15 days</option>
            </select>
          </label>
          <button id="upload">Upload</button>
        </div>
        <div class="quota" id="quota">Checking quota…</div>
        <progress id="prog" value="0" max="100" hidden></progress>
        <div class="result" id="result"></div>
      </div>

      <footer>© fxck.space</footer>
    </section>
  </main>

  <script>
    const API_BASE = 'https://security.fxck.space/upload';

    // Handle file selection display
    document.getElementById('file').addEventListener('change', function(e) {
      const file = e.target.files[0];
      const fileNameEl = document.getElementById('fileName');
      const label = e.target.parentElement.querySelector('.file-input-label');
      
      if (file) {
        fileNameEl.innerHTML = file.name;
        label.classList.add('has-file');
      } else {
        fileNameEl.innerHTML = '<span class="file-placeholder">Choose a file</span>';
        label.classList.remove('has-file');
      }
    });

    async function fetchQuota(){
      try{
        const r = await fetch(API_BASE + '/quota', {credentials:'omit'});
        const j = await r.json();
        document.getElementById('quota').textContent = `Remaining today: ${fmt(j.remainingBytes24h)} / ${fmt(j.limitBytes)}`;
      }catch(e){
        document.getElementById('quota').textContent = 'Quota unavailable';
      }
    }

    function fmt(b){
      const u=['B','KB','MB','GB','TB'];
      let i=0,f=b;
      while(f>=1024&&i<u.length-1){f/=1024;i++;}
      return (i?f.toFixed(2):f|0)+' '+u[i];
    }

    document.getElementById('upload').addEventListener('click', async ()=>{
      const f = document.getElementById('file').files[0];
      const expiry = document.getElementById('expiry').value;
      if(!f){ alert('Pick a file'); return; }
      const prog = document.getElementById('prog');
      prog.hidden=false; prog.value=0;
      const resEl = document.getElementById('result');
      resEl.textContent='';

      const form = new FormData();
      form.append('file', f);
      form.append('expiryDays', expiry);

      const xhr = new XMLHttpRequest();
      xhr.open('POST', API_BASE + '/upload');

      // Smooth progress tracking with throttling
      let lastUpdate = 0;
      xhr.upload.onprogress = (e)=>{
        if(e.lengthComputable){
          const now = Date.now();
          // Throttle updates to every 50ms for smoother animation
          if(now - lastUpdate > 50 || e.loaded === e.total){
            const percent = Math.round(e.loaded/e.total*100);
            prog.value = percent;
            lastUpdate = now;
          }
        }
      };
      xhr.onload = ()=>{
        prog.hidden=true;
        try{
          const j = JSON.parse(xhr.responseText);
          if(j.link){
            resEl.innerHTML = `Uploaded: <a href="${j.link}">${j.link}</a>`;
          } else {
            resEl.textContent = xhr.responseText;
          }
        }catch(e){
          if (typeof xhr.responseText === 'string' && xhr.responseText.startsWith('http')) {
            resEl.innerHTML = `Uploaded: <a href="${xhr.responseText}">${xhr.responseText}</a>`;
          } else {
            resEl.textContent = xhr.responseText || 'Upload done';
          }
        }
        fetchQuota();
      };
      xhr.onerror = ()=>{ prog.hidden=true; resEl.textContent='Error uploading'; };
      xhr.send(form);
    });

    fetchQuota();
  </script>
</body>
</html>