<!-- ⠀⣤⣄⡀⠀⠀⠀⠀⠀⠀    ⣄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⣸⣿⣿⣿⣶⣄⠀⠀⠀⠀⠀⠀⠀⢻⣷⣦⣄⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀  ⣀⣤⣠⠄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢀⣿⣿⣿⣿⣿⣿⣿⡀⠴⣾⣿⣿⣿⣤⣿⣿⣿⣿⣷⣦⣄⠀⠀⠀⠀⠀⠀⣀⣤⣾⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣼⣿⣿⣿⣿⣿⣿⣿⣿⣷⣤⡙⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣧⣀⠀⠀⣤⣾⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣷⣦⣼⣿⣿⣿⣿⣿⣿⣿⣿⣿⣾⣾⣿⣿⣿⣿⣿⣿⣿⣿⡇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⢹⣿⢸⣿⣿⡏⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⢻⣿⣿⡿⠿⠟⠻⠿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣌⣃⣼⣿⡟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⢀⣠⣤⣴⣿⣿⣍⣠⣶⣶⣶⣦⡈⢻⣿⣿⣿⣿⣿⣿⡿⠟⠋⠉⠋⠉⠛⢿⣿⣿⣿⣿⣿⠅⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠈⠛⠛⠛⣿⣿⣿⣿⣿⣿⣿⣿⣿⠾⠿⣿⣿⣿⣿⣿⣤⣴⣶⣿⣿⣷⣶⣀⢹⣿⣿⣤⣶⣶⡶⠂⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⣰⣯⣛⣉⢩⡟⠟⢿⣿⣿⣦⣤⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⠟⠋⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⢰⠿⠿⠟⠳⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⡿⢿⣿⣿⣿⣍⣀⡤⠀⠝⢉⣹⣿⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠉⠻⠿⣿⣿⣦⣉⣡⣬⣙⣁⣼⣿⣿⣿⣿⣿⣿⣷⠾⠟⠻⢿⡿⣧⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠉⢉⣹⣿⣿⣿⣿⣿⣿⣿⣉⣉⣭⣍⣀⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠻⠿⣷⣾⣿⣿⣿⣿⣿⣿⡿⠟⣓⣈⣅⣙⡿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⣾⣿⣿⣿⣿⣿⡟⢋⣤⣴⣿⣿⣿⣿⣿⣿⣧⡀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠾⠿⢿⣿⣿⣿⠏⣴⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡆⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣾⣿⣿⣿⣦⠹⡇⣾⣿⣧⢹⣿⡿⠛⢻⣿⣿⣿⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⡆⠀⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠈⣿⣿⣿⣿⣶⣤⣀⣉⣁⠈⠠⣤⣶⣿⣿⣿⣿⣷⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣹⣆⠀⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⣿⣿⣿⣿⣿⣿⣿⠇⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢀⡄⠀⢰⣿⣿⣧⠀⠀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⣿⣿⣧⢹⣿⣿⣿⣆⢻⣿⣿⣿⣿⣿⠟⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⢠⣾⣧⠀⣾⣿⣿⣿⣧⡀⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠐⣿⣿⣿⣿⣿⣿⡈⢿⣿⣿⣿⣦⣙⠛⠛⢋⡁⠀⢀⠀⠀⠀⠀⠀⠀⠀⠀⣰⣿⣿⣿⣰⣿⣿⣿⣿⣿⣷⠀
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣤⢀⣿⣿⣿⣿⣿⣿⡇⢸⣿⣿⣿⣿⣿⣿⣿⣿⣷⣿⣁⡀⠀⠀⠀⠀⣀⣴⣾⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇
⠀⠀⠀⠀⠀⠀⠀⠀⠀⣴⣿⣿⢰⣿⣿⣿⣿⣿⣿⣿⢰⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣏⢡⣠⣤⣶⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⡇
⠀⠀⠀⠀⠀⠀⠀⠀⢸⣿⣿⣿⡄⢽⣿⣿⣿⣿⣿⣿⢌⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠆⢿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠇

$$$$$$$$\                                      $$$$$$\                     $$\   $$\                       $$\           
\__$$  __|                                    $$  __$$\                    $$$\  $$ |                      $$ |          
   $$ | $$$$$$\  $$$$$$\  $$$$$$$\   $$$$$$$\ $$ /  \__|$$$$$$\   $$$$$$\  $$$$\ $$ | $$$$$$\   $$$$$$$\ $$$$$$\         
   $$ |$$  __$$\ \____$$\ $$  __$$\ $$  _____|$$$$\    $$  __$$\ $$  __$$\ $$ $$\$$ |$$  __$$\ $$  _____|\_$$  _|        
   $$ |$$ |  \__|$$$$$$$ |$$ |  $$ |\$$$$$$\  $$  _|   $$$$$$$$ |$$ |  \__|$$ \$$$$ |$$$$$$$$ |\$$$$$$\    $$ |          
   $$ |$$ |     $$  __$$ |$$ |  $$ | \____$$\ $$ |     $$   ____|$$ |      $$ |\$$$ |$$   ____| \____$$\   $$ |$$\       
   $$ |$$ |     \$$$$$$$ |$$ |  $$ |$$$$$$$  |$$ |     \$$$$$$$\ $$ |      $$ | \$$ |\$$$$$$$\ $$$$$$$  |  \$$$$  |      
   \__|\__|      \_______|\__|  \__|\_______/ \__|      \_______|\__|      \__|  \__| \_______|\_______/    \____/       
                                                                                                                   

                                             site built by justdev-chris
                                   https://justdev-chris.github.io/TransferNest/


-->
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="icon" type="image/ico" href="favicon.ico" />
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>TransferNest</title>
  <style>
    body {
      font-family: "Segoe UI", sans-serif;
      background: #0f0f1a;
      color: #fff;
      margin: 0;
      padding: 2em;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    h1 {
      color: #9fe8fa;
      text-shadow: 0 0 10px #00f0ff;
    }
    input[type="file"] {
      display: none;
    }
    label {
      background: #1e1e2f;
      padding: 1em 2em;
      border-radius: 12px;
      cursor: pointer;
      border: 2px dashed #5fd6ff;
      text-align: center;
      transition: 0.3s ease;
    }
    label:hover {
      box-shadow: 0 0 15px #5fd6ff;
    }
    #drop-area {
      border: 2px dashed #aaa;
      border-radius: 10px;
      padding: 2em;
      margin: 1em 0;
      width: 100%;
      max-width: 400px;
      text-align: center;
      transition: border-color 0.3s ease;
    }
    #drop-area.hover {
      border-color: #00f0ff;
    }
    .upload-link {
      margin-top: 1em;
      color: #5fd6ff;
      word-break: break-all;
    }
    .history, .stats {
      margin-top: 2em;
      background: #1c1c2b;
      padding: 1em;
      border-radius: 10px;
      width: 100%;
      max-width: 500px;
    }
    .history h2, .stats h2 {
      margin-top: 0;
    }
    .file-entry {
      display: flex;
      align-items: center;
      margin-bottom: 0.5em;
    }
    .file-icon {
      margin-right: 0.5em;
    }
    .glow {
      transition: 0.2s;
    }
    .glow:hover {
      text-shadow: 0 0 10px #9fe8fa;
    }
    .gif-container {
      margin-top: 1em;
    }
    .warning {
      color: #ff9c9c;
      font-weight: bold;
      margin-bottom: 1em;
      text-align: center;
    }
    #progressContainer {
      width: 100%;
      max-width: 400px;
      margin-top: 1em;
      height: 10px;
      background: #333;
      border-radius: 5px;
      overflow: hidden;
      display: none;
    }
    #progressBar {
      height: 100%;
      background: #5fd6ff;
      width: 0%;
      transition: width 0.2s ease;
    }
  </style>
  <!-- lil sdk stuff idk i forgot-->
  <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
  <script>
    const supabase = supabase.createClient(
      "https://ezdnztybarjtkgedenos.supabase.co/", // no stop it dont even think about it
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImV6ZG56dHliYXJqdGtnZWRlbm9zIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTMwOTQwNjYsImV4cCI6MjA2ODY3MDA2Nn0.AkbetAqtr9C1zG1qc54feMMNGIjvv016KZhEVG2CPJg"           
    );
  </script>
</head>
<body>
  <h1 class="glow">TransferNest</h1>

  <div class="warning">⚠️ Max file size: 50MB</div>

  <div class="gif-container">
    <img src="https://c.tenor.com/3DzhsHs_8G8AAAAC/tenor.gif" alt="cute gif" width="200" style="border-radius: 12px;">
  </div>

  <div id="drop-area" class="glow">
    <form id="uploadForm">
      <label for="fileInput">📁 Choose a file or drag it here</label>
      <input type="file" id="fileInput" name="file" />
    </form>
    <div id="progressContainer"><div id="progressBar"></div></div>
  </div>

  <div id="uploadLink" class="upload-link"></div>

  <div class="stats">
    <h2>📊 Stats</h2>
    <p>Total uploads: <span id="uploadCount">0</span></p>
    <p>Total size: <span id="totalSize">0 KB</span></p>
  </div>

  <div class="history">
    <h2>📜 Upload History</h2>
    <div id="uploadHistory"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>