---
layout: layouts/main.html
title: "SimpleX File Transfer"
description: "Send files securely with end-to-end encryption"
templateEngineOverride: njk
active_file: true
---
{% set lang = page.url | getlang %}
{% from "components/macro.njk" import overlay %}

<link rel="stylesheet" href="/file-assets/index.css">
<style>
  /* Reset website .card styles that conflict with xftp bundle */
  #app .card { cursor: default; }
  #app .card,
  #app .card > div { transition: unset; height: auto; }
  #app .card > div > * { opacity: unset; max-height: unset; transform: unset; transition: unset; }

  /* Align xftp bundle with website design */
  #app { font-family: inherit; color: #3F484B; max-width: 600px; width: 100%; margin: 0 auto; padding: 0; }
  #app .card { background: transparent; box-shadow: none; padding: 0; border-radius: 0; }
  #app .card > h1 { display: none; }
  .dark #app h1 { color: #fff; }
  #app .drop-zone { border: 2px dashed #c5d3de; border-radius: 12px; padding: 40px 24px; }
  #app .drop-zone.drag-over { border-color: #0053D0; background: #DBEEFF; }
  #app .btn { background: #0053D0; border-radius: 34px; padding: 12px 32px; font-size: .9rem; font-weight: 600; }
  #app .btn:hover { background: #1661D1; }
  #app .btn-secondary { background: #6b7280; border-radius: 34px; }
  #app .hint { color: #6b7280; }
  #app .link-row input { border-radius: 8px; border-color: #c5d3de; }
  #app .security-note { background: #ffffff; border-radius: 12px; color: #3F484B; }
  #app .security-note a { color: #0197FF; }
  #app .success { color: #0053D0; }

  .dark #app { color: #e5e7eb; }
  .dark #app .card { background: transparent; box-shadow: none; }
  .dark #app .drop-zone { border-color: #374151; }
  .dark #app .drop-zone.drag-over { border-color: #70F0F9; background: #1B325C; }
  .dark #app .btn { background: #70F0F9; color: #000832; }
  .dark #app .btn:hover { background: #66D9E2; }
  .dark #app .link-row input { border-color: #374151; background: #071C46; color: #e5e7eb; }
  .dark #app .security-note { background: #0B2A59; color: #d1d5db; }
  .dark #app .security-note a { color: #70F0F9; }
  .dark #app .success { color: #70F0F9; }

  #app #upload-error { border: 2px dashed #c5d3de; border-radius: 12px; padding: 40px 24px; text-align: center; }
  .dark #app #upload-error { border-color: #374151; }

  #app .stage > .btn { margin-top: 20px; }
  #app .security-note { margin-top: 20px; }
  #app .drop-zone .btn { margin: 10px 0 16px; }

  /* Protocol overlay: image fixed, text scrolls natively */
  /* Push popup below navbar at all widths */
  #xftp-protocol { padding-top: 70px; }
  #xftp-protocol .overlay-card {
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }
  @media (min-width: 768px) {
    #xftp-protocol .overlay-card { max-height: min(660px, 100%); }
  }
  #xftp-protocol .overlay-card > h1 {
    flex-shrink: 0;
    padding-bottom: 16px;
    margin-bottom: 0;
    z-index: 1;
  }
  @media (min-width: 1024px) and (max-height: 750px) {
    #xftp-protocol .overlay-card > h1 {
      font-size: 22px;
    }
  }
  /* .flex is the full-width scroll container */
  #xftp-protocol .overlay-card > .flex {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #c5d3de transparent;
  }
  .dark #xftp-protocol .overlay-card > .flex {
    scrollbar-color: #374151 transparent;
  }
  #xftp-protocol .overlay-card > .flex::-webkit-scrollbar { width: 6px; }
  #xftp-protocol .overlay-card > .flex::-webkit-scrollbar-track { background: transparent; }
  #xftp-protocol .overlay-card > .flex::-webkit-scrollbar-thumb { background: #c5d3de; border-radius: 3px; }
  .dark #xftp-protocol .overlay-card > .flex::-webkit-scrollbar-thumb { background: #374151; }
  /* Desktop: text stays left, image fixed on right */
  @media (min-width: 1024px) and (min-height: 600px) {
    #xftp-protocol .overlay-card > .flex > div:first-child {
      max-width: 50%;
    }
    #xftp-protocol .overlay-card > .flex > div:last-child {
      position: absolute;
      right: 56px;
      top: 0;
      bottom: 0;
      left: 55%;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    #xftp-protocol .overlay-card > .flex > div:last-child > div {
      height: 100%;
      padding: 40px 0;
      box-sizing: border-box;
    }
    #xftp-protocol .overlay-card > .flex > div:last-child img {
      height: 100%;
    }
  }
  #xftp-protocol .close-overlay-btn {
    position: absolute;
    top: 24px;
    right: 24px;
    cursor: pointer;
    z-index: 3;
    fill: #606C71;
  }
  .dark #xftp-protocol .close-overlay-btn { fill: #e5e7eb; }
  /* Scroll fade: gradient over text area only, hidden at bottom */
  #xftp-protocol .overlay-card::after {
    content: '';
    position: absolute;
    bottom: 40px;
    left: 24px;
    right: 24px;
    height: 48px;
    background: linear-gradient(rgba(255,255,255,0), #fff);
    pointer-events: none;
    z-index: 2;
    transition: opacity 0.2s;
  }
  .dark #xftp-protocol .overlay-card::after {
    background: linear-gradient(rgba(7,28,70,0), #071C46);
  }
  @media (min-width: 640px) {
    #xftp-protocol .overlay-card::after { bottom: 56px; left: 56px; right: 56px; }
  }
  @media (min-width: 1024px) and (min-height: 600px) {
    #xftp-protocol .overlay-card::after { right: 50%; }
  }
  #xftp-protocol.scrolled-bottom .overlay-card::after { opacity: 0; }
  #xftp-protocol .overlay-card.flex,
  #xftp-protocol.flex .overlay-card { animation: overlaySlideIn 0.25s ease-out; }
  @keyframes overlaySlideIn {
    from { opacity: 0; transform: scale(0.95) translateY(10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
  }
  #xftp-protocol.overlay-closing { animation: overlayFadeOut 0.2s ease-in forwards; }
  #xftp-protocol.overlay-closing .overlay-card { animation: overlaySlideOut 0.2s ease-in forwards; }
  @keyframes overlayFadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
  }
  @keyframes overlaySlideOut {
    from { opacity: 1; transform: scale(1) translateY(0); }
    to { opacity: 0; transform: scale(0.95) translateY(10px); }
  }

  .file-proto-link {
    font-size: 1.25rem;
    font-weight: 600;
    background: linear-gradient(90deg, #001aa7 0%, #0095e7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-decoration: none;
  }
  .dark .file-proto-link {
    background: linear-gradient(90deg, #019bfe 0%, #64fdff 58%, #c8feff 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

</style>

<section class="bg-secondary-bg-light dark:bg-primary-bg-dark py-10 mt-[66px] px-5">
  <div class="container flex flex-col items-center mx-auto">
    <noscript>
      <p class="text-center text-grey-black dark:text-white py-10">
        {{ "file-noscript" | i18n({}, lang) | safe }}
      </p>
    </noscript>
    <h1 class="text-[38px] text-center font-bold text-active-blue mb-8">{{ 'file-title' | i18n({}, lang) | safe }}</h1>
    <div id="app" data-xftp-app data-no-hashchange class="w-full">
      <div class="card">
        <div class="drop-zone">
          <p>{{ 'file-drop-text' | i18n({}, lang) | safe }}</p>
          <p class="hint">{{ 'file-drop-hint' | i18n({}, lang) | safe }}</p>
          <span class="btn">{{ 'file-choose' | i18n({}, lang) | safe }}</span>
          <p class="hint">{{ 'file-max-size' | i18n({}, lang) | safe }}</p>
        </div>
      </div>
    </div>
    <template id="dl-placeholder">
      <div class="card">
        <h1>{{ "file-title" | i18n({}, lang) | safe }}</h1>
        <div class="stage">
          <p>File available</p>
          <button class="btn">{{ "file-download-btn" | i18n({}, lang) | safe }}</button>
          <div class="security-note">
            <p>{{ "file-dl-sec-1" | i18n({}, lang) | safe }}</p>
            <p>{{ "file-sec-2" | i18n({}, lang) | safe }}</p>
            <p>{{ "file-sec-3" | i18n({}, lang) | safe }}</p>
          </div>
        </div>
      </div>
    </template>
    <script>if(location.hash.length>50){var a=document.getElementById("app"),t=document.getElementById("dl-placeholder");if(a&&t)a.replaceChildren(t.content.cloneNode(true))}</script>
    <script type="module" src="/file-assets/index.js"></script>

    <p class="text-base text-center text-grey-black dark:text-white mt-10 max-w-[600px]">{{ 'file-desc' | i18n({}, lang) | safe }}</p>
    <a href="javascript:void(0)" data-show-overlay="xftp-protocol" class="open-overlay-btn file-proto-link mt-3 block text-center">{{ "file-learn-more" | i18n({}, lang) | safe }}</a>
  </div>
</section>

<section class="bg-primary-bg-light dark:bg-secondary-bg-dark py-[90px] px-5">
  <div class="container flex flex-col items-center mx-auto text-center">
    <h2 class="text-[35px] leading-[45px] md:text-[45px] md:leading-[55px] text-grey-black dark:text-white font-bold mb-5">
      {{ "file-cta-heading" | i18n({}, lang) | safe }}
    </h2>
    <p class="text-base text-grey-black dark:text-white mb-14 max-w-[600px]">
      {{ "file-cta-subheading" | i18n({}, lang) | safe }}
    </p>
    <div class="flex items-center justify-center gap-4 flex-wrap">
      <a href="https://apps.apple.com/us/app/simplex-chat/id1605771084" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apple_store.svg" /></a>
      <a href="https://play.google.com/store/apps/details?id=chat.simplex.app" target="_blank"><img class="h-[40px] w-auto" src="/img/new/google_play.svg" /></a>
      <a href="{{ '' if lang == 'en' else '/' ~ lang }}/fdroid"><img class="h-[40px] w-auto" src="/img/new/f_droid.svg" /></a>
      <a href="https://testflight.apple.com/join/DWuT2LQu" target="_blank"><img class="h-[40px] w-auto" src="/img/new/testflight.png" /></a>
      <a href="https://github.com/simplex-chat/simplex-chat/releases/latest/download/simplex-aarch64.apk" target="_blank"><img class="h-[40px] w-auto" src="/img/new/apk_icon.png" /></a>
    </div>
  </div>
</section>

{% for section in file_overlays.sections %}
  {{ overlay(section, lang) }}
{% endfor %}

<script>
  window.__XFTP_I18N__ = {
    "title": {{ 'file-title' | i18n({}, lang) | dump | safe }},
    "dropZone": {{ 'file-drop-text' | i18n({}, lang) | dump | safe }},
    "dropZoneHint": {{ 'file-drop-hint' | i18n({}, lang) | dump | safe }},
    "chooseFile": {{ 'file-choose' | i18n({}, lang) | dump | safe }},
    "maxSizeHint": {{ 'file-max-size' | i18n({}, lang) | dump | safe }},
    "encrypting": {{ 'file-encrypting' | i18n({}, lang) | dump | safe }},
    "uploading": {{ 'file-uploading' | i18n({}, lang) | dump | safe }},
    "cancel": {{ 'file-cancel' | i18n({}, lang) | dump | safe }},
    "fileUploaded": {{ 'file-uploaded' | i18n({}, lang) | dump | safe }},
    "copy": {{ 'file-copy' | i18n({}, lang) | dump | safe }},
    "copied": {{ 'file-copied' | i18n({}, lang) | dump | safe }},
    "share": {{ 'file-share' | i18n({}, lang) | dump | safe }},
    "expiryHint": {{ 'file-expiry' | i18n({}, lang) | dump | safe }},
    "securityNote1": {{ 'file-sec-1' | i18n({}, lang) | dump | safe }},
    "securityNote2": {{ 'file-sec-2' | i18n({}, lang) | dump | safe }},
    "securityNote3": {{ 'file-sec-3' | i18n({}, lang) | dump | safe }},
    "retry": {{ 'file-retry' | i18n({}, lang) | dump | safe }},
    "downloading": {{ 'file-downloading' | i18n({}, lang) | dump | safe }},
    "decrypting": {{ 'file-decrypting' | i18n({}, lang) | dump | safe }},
    "downloadComplete": {{ 'file-download-complete' | i18n({}, lang) | dump | safe }},
    "download": {{ 'file-download-btn' | i18n({}, lang) | dump | safe }},
    "fileTooLarge": {{ 'file-too-large' | i18n({}, lang) | dump | safe }},
    "fileEmpty": {{ 'file-empty' | i18n({}, lang) | dump | safe }},
    "invalidLink": {{ 'file-invalid-link' | i18n({}, lang) | dump | safe }},
    "initError": {{ 'file-init-error' | i18n({}, lang) | dump | safe }},
    "fileAvailable": {{ 'file-available' | i18n({}, lang) | dump | safe }},
    "dlSecurityNote1": {{ 'file-dl-sec-1' | i18n({}, lang) | dump | safe }},
    "dlSecurityNote2": {{ 'file-sec-2' | i18n({}, lang) | dump | safe }},
    "dlSecurityNote3": {{ 'file-sec-3' | i18n({}, lang) | dump | safe }},
    "workersRequired": {{ 'file-workers-required' | i18n({}, lang) | dump | safe }}
  }
</script>

<script>
  // Intercept close for #xftp-protocol to add fade-out animation
  document.getElementById('xftp-protocol')?.addEventListener('click', function(e) {
    if (e.target.closest('.close-overlay-btn') || (e.target.closest('.overlay') && !e.target.closest('.overlay-card'))) {
      e.stopPropagation();
      var el = document.getElementById('xftp-protocol');
      el.classList.add('overlay-closing');
      el.addEventListener('animationend', function handler() {
        el.removeEventListener('animationend', handler);
        el.classList.remove('flex', 'overlay-closing');
        el.classList.add('hidden');
        document.body.classList.remove('lock-scroll');
        history.replaceState(null, null, ' ');
      });
    }
  }, true);

  // Hide scroll fade gradient when text bottom is visible (works with column-reverse)
  var scrollArea = document.querySelector('#xftp-protocol .overlay-card > .flex');
  if (scrollArea) {
    var textCol = scrollArea.querySelector(':scope > div:first-child > div');
    function checkScrollBottom() {
      if (!textCol) return;
      var scrollRect = scrollArea.getBoundingClientRect();
      if (scrollRect.height === 0) return; // not laid out yet
      var textBottom = textCol.getBoundingClientRect().bottom;
      document.getElementById('xftp-protocol').classList.toggle('scrolled-bottom', textBottom <= scrollRect.bottom + 10);
    }
    scrollArea.addEventListener('scroll', checkScrollBottom);
    new MutationObserver(function() {
      if (!document.getElementById('xftp-protocol').classList.contains('hidden')) {
        requestAnimationFrame(checkScrollBottom);
      }
    }).observe(document.getElementById('xftp-protocol'), { attributes: true, attributeFilter: ['class'] });
  }
</script>