<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CloudHop Setup</title>
<script>(function(){var t=localStorage.getItem('cloudhop-theme');if(t)document.documentElement.setAttribute('data-theme',t);})()</script>
<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=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;1,9..40,400&family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/static/wizard.css">
<link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
</head>
<body>
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle dark/light mode">&#9790;</button>

<div class="wizard-container">
  <div class="progress-dots" id="progressDots">
    <div class="dot active"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
    <div class="dot"></div>
  </div>

  <!-- Step 1: Welcome -->
  <div class="step active" id="step1">
    <div class="wizard-card" style="text-align:center; padding: 48px 32px;">
      <div class="welcome-logo">
    <svg width="64" height="64" viewBox="0 0 64 64" fill="none">
        <path d="M48 28c0-8.8-7.2-16-16-16-6.5 0-12.1 3.9-14.6 9.5C16.5 21.2 15.8 21 15 21c-3.3 0-6 2.7-6 6 0 .4 0 .8.1 1.1C5.5 29.5 3 33.2 3 37.5 3 43 7.5 47.5 13 47.5h35c4.4 0 8-3.6 8-8s-3.6-8-8-8c-.3 0-.7 0-1 .1.6-1.1 1-2.3 1-3.6z" fill="url(#cloudGrad)"/>
        <path d="M22 36h20M38 31l5 5-5 5" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
        <defs>
            <linearGradient id="cloudGrad" x1="3" y1="20" x2="56" y2="48" gradientUnits="userSpaceOnUse">
                <stop stop-color="#4f46e5"/>
                <stop offset="1" stop-color="#818cf8"/>
            </linearGradient>
        </defs>
    </svg>
</div>
      <div class="wizard-title">CloudHop</div>
      <div class="wizard-subtitle">
        The easiest way to copy files between cloud storage services.<br>
        No technical knowledge needed.
      </div>
      <button class="btn btn-primary btn-big" onclick="goTo(2)">
        Get Started
      </button>
      <div style="margin-top: 16px; font-size: 0.75rem; color: var(--text-muted);">
        Supports Google Drive, OneDrive, Dropbox, S3, and more
      </div>
      <div style="margin-top:16px;padding:10px 16px;background:rgba(34,197,94,0.06);border:1px solid rgba(34,197,94,0.15);border-radius:10px;font-size:0.75rem;color:var(--green);display:inline-flex;align-items:center;gap:6px;">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
        Your files are safe. CloudHop only copies, never deletes or modifies your originals.
      </div>
      <div id="welcomeRcloneCheck" style="margin-top:12px;font-size:0.75rem;text-align:center;"></div>
    </div>
  </div>

  <!-- Step 2: Source -->
  <div class="step" id="step2">
    <div class="wizard-title" style="font-size:1.5rem;">Where are your files?</div>
    <div class="wizard-subtitle">Select the cloud storage where your files currently live.</div>
    <div class="providers-grid" id="sourceGrid">
      <div class="provider-card" data-provider="drive" data-name="Google Drive" tabindex="0" role="button" onclick="selectSource(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectSource(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 87.3 78"><path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/><path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44c-.8 1.4-1.2 2.9-1.2 4.5h27.5z" fill="#00ac47"/><path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.5l5.85 11.5z" fill="#ea4335"/><path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/><path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/><path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/></svg></div>
        <div class="provider-name">Google Drive</div>
      </div>
      <div class="provider-card" data-provider="onedrive" data-name="OneDrive" tabindex="0" role="button" onclick="selectSource(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectSource(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 24 16"><defs><linearGradient id="odg1" x1="0" y1="0" x2="24" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#0364b8"/><stop offset="1" stop-color="#28a8ea"/></linearGradient></defs><path d="M19.5 7c-.2 0-.4 0-.6.1C18.1 3.6 15.3 1 12 1 9.2 1 6.8 2.8 5.7 5.4 5.5 5.3 5.2 5.2 5 5.2 3.3 5.2 2 6.5 2 8.2c0 .2 0 .4.1.6C.8 9.4 0 10.8 0 12.5 0 15 2 17 4.5 17H19c2.8 0 5-2.2 5-5s-2.2-5-5-5z" fill="url(#odg1)"/></svg></div>
        <div class="provider-name">OneDrive</div>
      </div>
      <div class="provider-card" data-provider="dropbox" data-name="Dropbox" tabindex="0" role="button" onclick="selectSource(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectSource(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 16 16"><path d="M8.01 4.555 4.005 7.11 8.01 9.665 4.005 12.22 0 9.651l4.005-2.555L0 4.555 4.005 2zm-4.026 8.487 4.006-2.555 4.005 2.555-4.005 2.555zm4.026-3.39 4.005-2.556L8.01 4.555 11.995 2 16 4.555 11.995 7.11 16 9.665l-4.005 2.555z" fill="#0061fe"/></svg></div>
        <div class="provider-name">Dropbox</div>
      </div>
      <div class="provider-card" data-provider="mega" data-name="MEGA" tabindex="0" role="button" onclick="selectSource(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectSource(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="100 141 118 118"><path d="m158.711 141.289c-32.426 0-58.711 26.285-58.711 58.711s26.285 58.711 58.711 58.711 58.711-26.285 58.711-58.711-26.285-58.711-58.711-58.711zm30.476 79.473c0 1.007-.812 1.819-1.819 1.819h-7.668c-1.007 0-1.819-.812-1.819-1.819v-23.621c0-.195-.228-.293-.39-.163l-16.246 16.246c-1.397 1.397-3.704 1.397-5.101 0l-16.245-16.246c-.13-.13-.39-.032-.39.163v23.621c0 1.007-.812 1.819-1.82 1.819h-7.667c-1.008 0-1.82-.812-1.82-1.819v-41.524c0-1.007.812-1.819 1.82-1.819h5.263c.942 0 1.885.39 2.567 1.072l20.209 20.209c.358.358.91.358 1.267 0l20.21-20.209c.682-.682 1.592-1.072 2.566-1.072h5.264c1.007 0 1.819.812 1.819 1.819z" fill="#d9272e"/></svg></div>
        <div class="provider-name">MEGA</div>
      </div>
      <div class="provider-card" data-provider="s3" data-name="Amazon S3" tabindex="0" role="button" onclick="selectSource(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectSource(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 24 24"><path d="M20 4H4l-1 8h18l-1-8z" fill="#f90"/><path d="M3 12l1 8h16l1-8H3z" fill="#f90" opacity=".8"/><ellipse cx="12" cy="4" rx="8" ry="2" fill="#f90" opacity=".6"/><text x="12" y="16" font-family="Arial,sans-serif" font-size="7" font-weight="bold" fill="white" text-anchor="middle">S3</text></svg></div>
        <div class="provider-name">Amazon S3</div>
      </div>
      <div class="provider-card" data-provider="protondrive" data-name="Proton Drive" tabindex="0" role="button" onclick="selectSource(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectSource(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 24 22"><defs><linearGradient id="pdg1" x1="0" y1="0" x2="24" y2="22" gradientUnits="userSpaceOnUse"><stop stop-color="#d4b4f7"/><stop offset="1" stop-color="#8b5cf6"/></linearGradient></defs><path d="M20 6H4C2.9 6 2 6.9 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z" fill="url(#pdg1)"/><path d="M22 5H10L8 2H4c-1.1 0-2 .9-2 2v1h16c1.1 0 2 .9 2 2V5z" fill="url(#pdg1)" opacity=".6"/></svg></div>
        <div class="provider-name">Proton Drive</div>
      </div>
      <div class="provider-card" data-provider="local" data-name="Local Folder" tabindex="0" role="button" onclick="selectSource(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectSource(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 40 40"><path d="M6 10c0-1.1.9-2 2-2h8l3 3h13c1.1 0 2 .9 2 2v17c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V10z" fill="#60a5fa"/><path d="M6 15h28v15c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V15z" fill="#3b82f6"/></svg></div>
        <div class="provider-name">Local Folder</div>
      </div>
      <div class="provider-card" data-provider="icloud" data-name="iCloud Drive" tabindex="0" role="button" onclick="selectSource(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectSource(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 24 16"><defs><linearGradient id="icg1" x1="0" y1="0" x2="24" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#a8d8f0"/><stop offset="1" stop-color="#5ab0e4"/></linearGradient></defs><path d="M19 7c-.2 0-.3 0-.5.1C17.7 3.5 15 1 12 1 9.2 1 6.8 2.8 5.7 5.4 5.5 5.3 5.3 5.3 5 5.3 3.3 5.3 2 6.6 2 8.3c0 .2 0 .4.1.5C.8 9.5 0 10.9 0 12.5 0 14.9 2 17 4.5 17h14c2.8 0 5-2.2 5-5s-2.2-5-4.5-5z" fill="url(#icg1)"/></svg></div>
        <div class="provider-name">iCloud Drive</div>
        <div style="font-size:0.65rem;color:var(--text-dim);margin-top:4px;">macOS only - accesses your iCloud Drive folder</div>
      </div>
      <div class="provider-card" data-provider="other" data-name="Other" tabindex="0" role="button" onclick="selectSource(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectSource(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M20 14a6 6 0 100 12 6 6 0 000-12zm0 9a3 3 0 110-6 3 3 0 010 6z" fill="#7a8baa"/><path d="M33.5 22.3l-2.1-.4a9.9 9.9 0 00-.8-2l1.2-1.7a1 1 0 00-.1-1.3l-2.1-2.1a1 1 0 00-1.3-.1l-1.7 1.2a9.9 9.9 0 00-2-.8l-.4-2.1a1 1 0 00-1-.8h-3a1 1 0 00-1 .8l-.4 2.1a9.9 9.9 0 00-2 .8l-1.7-1.2a1 1 0 00-1.3.1l-2.1 2.1a1 1 0 00-.1 1.3l1.2 1.7a9.9 9.9 0 00-.8 2l-2.1.4a1 1 0 00-.8 1v3a1 1 0 00.8 1l2.1.4c.2.7.5 1.4.8 2l-1.2 1.7a1 1 0 00.1 1.3l2.1 2.1a1 1 0 001.3.1l1.7-1.2c.6.3 1.3.6 2 .8l.4 2.1a1 1 0 001 .8h3a1 1 0 001-.8l.4-2.1c.7-.2 1.4-.5 2-.8l1.7 1.2a1 1 0 001.3-.1l2.1-2.1a1 1 0 00.1-1.3l-1.2-1.7c.3-.6.6-1.3.8-2l2.1-.4a1 1 0 00.8-1v-3a1 1 0 00-.8-1z" fill="#7a8baa"/></svg></div>
        <div class="provider-name">Other</div>
      </div>
    </div>
    <div class="local-path-input" id="sourceLocalPath">
      <div class="form-group" style="margin-top:16px;">
        <label class="form-label" for="sourcePathInput">Folder Path</label>
        <input class="form-input" id="sourcePathInput" type="text" placeholder="e.g. /Users/you/Documents">
        <div id="sourcePathError" style="display:none;font-size:0.75rem;color:var(--red);margin-top:6px;"></div>
        <div class="form-hint">The folder on your computer where your files are stored.</div>
        <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;">
          <button type="button" class="btn-secondary" style="padding:10px 14px;font-size:0.75rem;border-radius:8px;cursor:pointer;border:1px solid var(--card-border);background:var(--card);color:var(--text-dim);min-height:44px;" onclick="document.getElementById('sourcePathInput').value=((window._homeDir||'/tmp')+'/Desktop');document.getElementById('sourcePathInput').dispatchEvent(new Event('input'))">Desktop</button>
          <button type="button" class="btn-secondary" style="padding:10px 14px;font-size:0.75rem;border-radius:8px;cursor:pointer;border:1px solid var(--card-border);background:var(--card);color:var(--text-dim);min-height:44px;" onclick="document.getElementById('sourcePathInput').value=((window._homeDir||'/tmp')+'/Documents');document.getElementById('sourcePathInput').dispatchEvent(new Event('input'))">Documents</button>
          <button type="button" class="btn-secondary" style="padding:10px 14px;font-size:0.75rem;border-radius:8px;cursor:pointer;border:1px solid var(--card-border);background:var(--card);color:var(--text-dim);min-height:44px;" onclick="document.getElementById('sourcePathInput').value=((window._homeDir||'/tmp')+'/Downloads');document.getElementById('sourcePathInput').dispatchEvent(new Event('input'))">Downloads</button>
        </div>
      </div>
    </div>
    <div class="local-path-input" id="sourceOtherName">
      <div class="form-group" style="margin-top:16px;">
        <label class="form-label" for="sourceOtherInput">Account Name</label>
        <input class="form-input" id="sourceOtherInput" type="text" placeholder="mycloud">
        <div class="form-hint">For cloud services not listed above. Enter a short name for your account (e.g. "backblaze", "wasabi", "pcloud").</div>
      </div>
    </div>
    <div class="btn-row">
      <button class="btn btn-secondary" onclick="goTo(1)">Back</button>
      <button class="btn btn-primary" id="sourceNext" onclick="goTo(3)" disabled>Next</button>
    </div>
  </div>

  <!-- Step 3: Destination -->
  <div class="step" id="step3">
    <div class="wizard-title" style="font-size:1.5rem;">Where do you want to copy them?</div>
    <div class="wizard-subtitle">Select the destination cloud storage.</div>
    <div class="providers-grid" id="destGrid">
      <div class="provider-card" data-provider="drive" data-name="Google Drive" tabindex="0" role="button" onclick="selectDest(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectDest(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 87.3 78"><path d="m6.6 66.85 3.85 6.65c.8 1.4 1.95 2.5 3.3 3.3l13.75-23.8h-27.5c0 1.55.4 3.1 1.2 4.5z" fill="#0066da"/><path d="m43.65 25-13.75-23.8c-1.35.8-2.5 1.9-3.3 3.3l-25.4 44c-.8 1.4-1.2 2.9-1.2 4.5h27.5z" fill="#00ac47"/><path d="m73.55 76.8c1.35-.8 2.5-1.9 3.3-3.3l1.6-2.75 7.65-13.25c.8-1.4 1.2-2.95 1.2-4.5h-27.5l5.85 11.5z" fill="#ea4335"/><path d="m43.65 25 13.75-23.8c-1.35-.8-2.9-1.2-4.5-1.2h-18.5c-1.6 0-3.15.45-4.5 1.2z" fill="#00832d"/><path d="m59.8 53h-32.3l-13.75 23.8c1.35.8 2.9 1.2 4.5 1.2h50.8c1.6 0 3.15-.45 4.5-1.2z" fill="#2684fc"/><path d="m73.4 26.5-12.7-22c-.8-1.4-1.95-2.5-3.3-3.3l-13.75 23.8 16.15 28h27.45c0-1.55-.4-3.1-1.2-4.5z" fill="#ffba00"/></svg></div>
        <div class="provider-name">Google Drive</div>
      </div>
      <div class="provider-card" data-provider="onedrive" data-name="OneDrive" tabindex="0" role="button" onclick="selectDest(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectDest(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 24 16"><defs><linearGradient id="odg2" x1="0" y1="0" x2="24" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#0364b8"/><stop offset="1" stop-color="#28a8ea"/></linearGradient></defs><path d="M19.5 7c-.2 0-.4 0-.6.1C18.1 3.6 15.3 1 12 1 9.2 1 6.8 2.8 5.7 5.4 5.5 5.3 5.2 5.2 5 5.2 3.3 5.2 2 6.5 2 8.2c0 .2 0 .4.1.6C.8 9.4 0 10.8 0 12.5 0 15 2 17 4.5 17H19c2.8 0 5-2.2 5-5s-2.2-5-5-5z" fill="url(#odg2)"/></svg></div>
        <div class="provider-name">OneDrive</div>
      </div>
      <div class="provider-card" data-provider="dropbox" data-name="Dropbox" tabindex="0" role="button" onclick="selectDest(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectDest(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 16 16"><path d="M8.01 4.555 4.005 7.11 8.01 9.665 4.005 12.22 0 9.651l4.005-2.555L0 4.555 4.005 2zm-4.026 8.487 4.006-2.555 4.005 2.555-4.005 2.555zm4.026-3.39 4.005-2.556L8.01 4.555 11.995 2 16 4.555 11.995 7.11 16 9.665l-4.005 2.555z" fill="#0061fe"/></svg></div>
        <div class="provider-name">Dropbox</div>
      </div>
      <div class="provider-card" data-provider="mega" data-name="MEGA" tabindex="0" role="button" onclick="selectDest(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectDest(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="100 141 118 118"><path d="m158.711 141.289c-32.426 0-58.711 26.285-58.711 58.711s26.285 58.711 58.711 58.711 58.711-26.285 58.711-58.711-26.285-58.711-58.711-58.711zm30.476 79.473c0 1.007-.812 1.819-1.819 1.819h-7.668c-1.007 0-1.819-.812-1.819-1.819v-23.621c0-.195-.228-.293-.39-.163l-16.246 16.246c-1.397 1.397-3.704 1.397-5.101 0l-16.245-16.246c-.13-.13-.39-.032-.39.163v23.621c0 1.007-.812 1.819-1.82 1.819h-7.667c-1.008 0-1.82-.812-1.82-1.819v-41.524c0-1.007.812-1.819 1.82-1.819h5.263c.942 0 1.885.39 2.567 1.072l20.209 20.209c.358.358.91.358 1.267 0l20.21-20.209c.682-.682 1.592-1.072 2.566-1.072h5.264c1.007 0 1.819.812 1.819 1.819z" fill="#d9272e"/></svg></div>
        <div class="provider-name">MEGA</div>
      </div>
      <div class="provider-card" data-provider="s3" data-name="Amazon S3" tabindex="0" role="button" onclick="selectDest(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectDest(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 24 24"><path d="M20 4H4l-1 8h18l-1-8z" fill="#f90"/><path d="M3 12l1 8h16l1-8H3z" fill="#f90" opacity=".8"/><ellipse cx="12" cy="4" rx="8" ry="2" fill="#f90" opacity=".6"/><text x="12" y="16" font-family="Arial,sans-serif" font-size="7" font-weight="bold" fill="white" text-anchor="middle">S3</text></svg></div>
        <div class="provider-name">Amazon S3</div>
      </div>
      <div class="provider-card" data-provider="protondrive" data-name="Proton Drive" tabindex="0" role="button" onclick="selectDest(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectDest(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 24 22"><defs><linearGradient id="pdg2" x1="0" y1="0" x2="24" y2="22" gradientUnits="userSpaceOnUse"><stop stop-color="#d4b4f7"/><stop offset="1" stop-color="#8b5cf6"/></linearGradient></defs><path d="M20 6H4C2.9 6 2 6.9 2 8v10c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2z" fill="url(#pdg2)"/><path d="M22 5H10L8 2H4c-1.1 0-2 .9-2 2v1h16c1.1 0 2 .9 2 2V5z" fill="url(#pdg2)" opacity=".6"/></svg></div>
        <div class="provider-name">Proton Drive</div>
      </div>
      <div class="provider-card" data-provider="local" data-name="Local Folder" tabindex="0" role="button" onclick="selectDest(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectDest(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 40 40"><path d="M6 10c0-1.1.9-2 2-2h8l3 3h13c1.1 0 2 .9 2 2v17c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V10z" fill="#60a5fa"/><path d="M6 15h28v15c0 1.1-.9 2-2 2H8c-1.1 0-2-.9-2-2V15z" fill="#3b82f6"/></svg></div>
        <div class="provider-name">Local Folder</div>
      </div>
      <div class="provider-card" data-provider="icloud" data-name="iCloud Drive" tabindex="0" role="button" onclick="selectDest(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectDest(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 24 16"><defs><linearGradient id="icg2" x1="0" y1="0" x2="24" y2="16" gradientUnits="userSpaceOnUse"><stop stop-color="#a8d8f0"/><stop offset="1" stop-color="#5ab0e4"/></linearGradient></defs><path d="M19 7c-.2 0-.3 0-.5.1C17.7 3.5 15 1 12 1 9.2 1 6.8 2.8 5.7 5.4 5.5 5.3 5.3 5.3 5 5.3 3.3 5.3 2 6.6 2 8.3c0 .2 0 .4.1.5C.8 9.5 0 10.9 0 12.5 0 14.9 2 17 4.5 17h14c2.8 0 5-2.2 5-5s-2.2-5-4.5-5z" fill="url(#icg2)"/></svg></div>
        <div class="provider-name">iCloud Drive</div>
        <div style="font-size:0.65rem;color:var(--text-dim);margin-top:4px;">macOS only - accesses your iCloud Drive folder</div>
      </div>
      <div class="provider-card" data-provider="other" data-name="Other" tabindex="0" role="button" onclick="selectDest(this)" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();selectDest(this)}">
        <div class="provider-icon"><svg width="40" height="40" viewBox="0 0 40 40" fill="none"><path d="M20 14a6 6 0 100 12 6 6 0 000-12zm0 9a3 3 0 110-6 3 3 0 010 6z" fill="#7a8baa"/><path d="M33.5 22.3l-2.1-.4a9.9 9.9 0 00-.8-2l1.2-1.7a1 1 0 00-.1-1.3l-2.1-2.1a1 1 0 00-1.3-.1l-1.7 1.2a9.9 9.9 0 00-2-.8l-.4-2.1a1 1 0 00-1-.8h-3a1 1 0 00-1 .8l-.4 2.1a9.9 9.9 0 00-2 .8l-1.7-1.2a1 1 0 00-1.3.1l-2.1 2.1a1 1 0 00-.1 1.3l1.2 1.7a9.9 9.9 0 00-.8 2l-2.1.4a1 1 0 00-.8 1v3a1 1 0 00.8 1l2.1.4c.2.7.5 1.4.8 2l-1.2 1.7a1 1 0 00.1 1.3l2.1 2.1a1 1 0 001.3.1l1.7-1.2c.6.3 1.3.6 2 .8l.4 2.1a1 1 0 001 .8h3a1 1 0 001-.8l.4-2.1c.7-.2 1.4-.5 2-.8l1.7 1.2a1 1 0 001.3-.1l2.1-2.1a1 1 0 00.1-1.3l-1.2-1.7c.3-.6.6-1.3.8-2l2.1-.4a1 1 0 00.8-1v-3a1 1 0 00-.8-1z" fill="#7a8baa"/></svg></div>
        <div class="provider-name">Other</div>
      </div>
    </div>
    <div class="local-path-input" id="destLocalPath">
      <div class="form-group" style="margin-top:16px;">
        <label class="form-label" for="destPathInput">Save to Folder</label>
        <input class="form-input" id="destPathInput" type="text" placeholder="e.g. /Users/you/Desktop/Backup">
        <div id="destPathError" style="display:none;font-size:0.75rem;color:var(--red);margin-top:6px;"></div>
        <div class="form-hint">Where to save the copied files on your computer.</div>
        <div style="display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;">
          <button type="button" style="padding:10px 14px;font-size:0.75rem;border-radius:8px;cursor:pointer;border:1px solid var(--card-border);background:var(--card);color:var(--text-dim);min-height:44px;" onclick="document.getElementById('destPathInput').value=((window._homeDir||'/tmp')+'/Desktop/CloudHop-Backup');document.getElementById('destPathInput').dispatchEvent(new Event('input'))">Desktop/CloudHop-Backup</button>
          <button type="button" style="padding:10px 14px;font-size:0.75rem;border-radius:8px;cursor:pointer;border:1px solid var(--card-border);background:var(--card);color:var(--text-dim);min-height:44px;" onclick="document.getElementById('destPathInput').value=((window._homeDir||'/tmp')+'/Documents/CloudHop-Backup');document.getElementById('destPathInput').dispatchEvent(new Event('input'))">Documents/CloudHop-Backup</button>
        </div>
      </div>
    </div>
    <div class="local-path-input" id="destOtherName">
      <div class="form-group" style="margin-top:16px;">
        <label class="form-label" for="destOtherInput">Account Name</label>
        <input class="form-input" id="destOtherInput" type="text" placeholder="mycloud">
        <div class="form-hint">For cloud services not listed above. Enter a short name for your account (e.g. "backblaze", "wasabi", "pcloud").</div>
      </div>
    </div>
    <div class="btn-row">
      <button class="btn btn-secondary" onclick="goTo(2)">Back</button>
      <button class="btn btn-primary" id="destNext" onclick="goTo(4)" disabled>Next</button>
    </div>
  </div>

  <!-- Step 4: Options -->
  <div class="step" id="step4">
    <div class="wizard-title" style="font-size:1.5rem;">Transfer Options</div>
    <div class="wizard-subtitle">Fine-tune your transfer. All fields are optional.</div>
    <div class="wizard-card">
      <div class="form-group">
        <label class="form-label" for="sourceSubfolder">Source Subfolder (optional)</label>
        <div style="display:flex;gap:8px;align-items:center;">
          <input class="form-input" id="sourceSubfolder" type="text" placeholder="e.g. Documents/Work" style="flex:1;">
          <button type="button" class="btn btn-secondary" id="browseSourceBtn" onclick="browseSource()" style="padding:12px 16px;border-radius:10px;font-size:0.8rem;white-space:nowrap;">Browse</button>
        </div>
        <div class="form-hint">Leave empty to copy all your files. Use Browse to pick a folder.</div>
        <div id="browseFolders" style="display:none;margin-top:12px;max-height:240px;overflow-y:auto;background:var(--bg);border:1px solid var(--card-border);border-radius:10px;padding:8px;"></div>
      </div>
      <div class="form-group">
        <label class="form-label" for="destSubfolder">Destination Subfolder (optional)</label>
        <input class="form-input" id="destSubfolder" type="text" placeholder="e.g. Backup/2024">
        <div class="form-hint">Leave empty to copy to the main folder</div>
      </div>
      <div class="form-group">
        <label class="form-label">Transfer Speed</label>
        <div class="speed-options" role="radiogroup" aria-label="Transfer speed">
          <div class="speed-card" role="radio" aria-checked="false" onclick="selectSpeed(this, '4')">
            <input type="radio" name="speed" value="4">
            <div class="speed-label">Normal</div>
            <div class="speed-desc">4 files at a time</div>
          </div>
          <div class="speed-card selected" role="radio" aria-checked="true" onclick="selectSpeed(this, '8')">
            <input type="radio" name="speed" value="8" checked>
            <div class="speed-label">Fast</div>
            <div class="speed-desc">8 files at a time</div>
          </div>
          <div class="speed-card" role="radio" aria-checked="false" onclick="selectSpeed(this, '16')">
            <input type="radio" name="speed" value="16">
            <div class="speed-label">Maximum</div>
            <div class="speed-desc">16 files at a time</div>
          </div>
        </div>
      </div>
      <div class="advanced-toggle" onclick="toggleAdvanced()">
    <span class="arrow" id="advArrow">&#9654;</span>
    Advanced Options
</div>
<div class="advanced-content" id="advancedContent">
      <div class="form-group">
        <label class="form-label" for="excludePatterns">Exclude Folders (optional)</label>
        <div style="display:flex;gap:8px;align-items:center;">
          <input class="form-input" id="excludePatterns" type="text" placeholder="Trash, .Trash, Personal Vault" style="flex:1;">
          <button type="button" class="btn btn-secondary" onclick="browseExcludes()" style="padding:12px 16px;border-radius:10px;font-size:0.8rem;white-space:nowrap;">Pick</button>
        </div>
        <div class="form-hint">Comma-separated folder names to skip. Use Pick to browse and select.</div>
        <div id="excludeBrowser" style="display:none;margin-top:12px;max-height:200px;overflow-y:auto;background:var(--bg);border:1px solid var(--card-border);border-radius:10px;padding:8px;"></div>
      </div>
      <div class="form-group" style="margin-bottom:0;">
        <label class="form-label" for="bwLimit">Bandwidth Limit (optional)</label>
        <input class="form-input" id="bwLimit" type="text" placeholder="e.g. 10 (MB/s)">
        <div class="form-hint">Speed limit in MB/s. Leave empty for unlimited. Example: 10 = 10 MB/s</div>
      </div>
      <div class="form-group" style="margin-bottom:0;margin-top:20px;">
        <label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
          <input type="checkbox" id="useFastList" checked style="width:18px;height:18px;">
          <div>
            <div class="form-label" style="margin-bottom:0;">Fast listing</div>
            <div class="form-hint">Uses fewer API calls to scan cloud storage. Faster for large transfers. Disable if you get errors.</div>
          </div>
        </label>
      </div>
      <div class="form-group" style="margin-bottom:0;margin-top:20px;">
        <label style="display:flex;align-items:center;gap:10px;cursor:pointer;">
          <input type="checkbox" id="useChecksum" style="width:18px;height:18px;">
          <div>
            <div class="form-label" style="margin-bottom:0;">Verify with checksums</div>
            <div class="form-hint">Slower but ensures file integrity. Recommended for important data.</div>
          </div>
        </label>
      </div>
      <div class="form-group" style="margin-top:20px;padding-top:20px;border-top:1px solid var(--card-border);">
        <label class="form-label">Schedule (optional)</label>
        <p class="form-hint">Only transfer during specific hours to avoid peak usage or bandwidth limits.</p>
        <label style="display:flex;align-items:center;gap:10px;cursor:pointer;margin:12px 0 16px;">
          <input type="checkbox" id="scheduleEnabled" style="width:18px;height:18px;accent-color:var(--primary);">
          <span style="color:var(--text);font-size:0.95rem;">Enable scheduled transfers</span>
        </label>
        <div id="scheduleConfig" style="display:none;padding-left:28px;">
          <div style="display:flex;gap:16px;align-items:center;margin-bottom:14px;flex-wrap:wrap;">
            <label style="color:var(--text-dim);font-size:0.9rem;">
              From
              <input type="time" id="scheduleStart" value="22:00" class="form-input" style="width:auto;padding:8px 12px;margin-left:6px;">
            </label>
            <label style="color:var(--text-dim);font-size:0.9rem;">
              To
              <input type="time" id="scheduleEnd" value="06:00" class="form-input" style="width:auto;padding:8px 12px;margin-left:6px;">
            </label>
          </div>
          <div style="display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;">
            <label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;color:var(--text-dim);cursor:pointer;"><input type="checkbox" data-day="0" checked style="accent-color:var(--primary);"> Mon</label>
            <label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;color:var(--text-dim);cursor:pointer;"><input type="checkbox" data-day="1" checked style="accent-color:var(--primary);"> Tue</label>
            <label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;color:var(--text-dim);cursor:pointer;"><input type="checkbox" data-day="2" checked style="accent-color:var(--primary);"> Wed</label>
            <label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;color:var(--text-dim);cursor:pointer;"><input type="checkbox" data-day="3" checked style="accent-color:var(--primary);"> Thu</label>
            <label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;color:var(--text-dim);cursor:pointer;"><input type="checkbox" data-day="4" checked style="accent-color:var(--primary);"> Fri</label>
            <label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;color:var(--text-dim);cursor:pointer;"><input type="checkbox" data-day="5" checked style="accent-color:var(--primary);"> Sat</label>
            <label style="display:flex;align-items:center;gap:4px;font-size:0.85rem;color:var(--text-dim);cursor:pointer;"><input type="checkbox" data-day="6" checked style="accent-color:var(--primary);"> Sun</label>
          </div>
          <div style="margin-bottom:8px;">
            <label style="color:var(--text-dim);font-size:0.9rem;">
              Speed limit during window
              <select id="bwLimitInWindow" class="form-input" style="width:auto;padding:8px 12px;margin-left:8px;">
                <option value="">Unlimited</option>
                <option value="1M">1 MB/s</option>
                <option value="2M">2 MB/s</option>
                <option value="5M">5 MB/s</option>
                <option value="10M">10 MB/s</option>
                <option value="20M">20 MB/s</option>
                <option value="50M">50 MB/s</option>
                <option value="100M">100 MB/s</option>
              </select>
            </label>
          </div>
        </div>
      </div>
</div>
    </div>
    <div class="btn-row">
      <button class="btn btn-secondary" onclick="goTo(3)">Back</button>
      <button class="btn btn-primary" onclick="goTo(5)">Next</button>
    </div>
  </div>

  <!-- Step 5: Connect -->
  <div class="step" id="step5">
    <div class="wizard-title" style="font-size:1.5rem;">Connect Your Accounts</div>
    <div class="wizard-subtitle">Sign in to each cloud service so CloudHop can copy your files.</div>
    <div class="wizard-card" id="connectList">
      <!-- Filled dynamically -->
    </div>
    <div id="rcloneStatus" style="text-align:center; margin-bottom:16px;"></div>
    <div id="connectHint" style="font-size:0.8rem;color:var(--text-dim);margin-bottom:16px;text-align:center;"></div>
    <div class="btn-row">
      <button class="btn btn-secondary" onclick="goTo(4)">Back</button>
      <button class="btn btn-primary" id="connectNext" onclick="goTo(6)" disabled>Next</button>
    </div>
  </div>

  <!-- Step 6: Ready -->
  <div class="step" id="step6">
    <div class="wizard-title" style="font-size:1.5rem;">Ready to Go!</div>
    <div class="wizard-subtitle">Review your transfer and start copying.</div>
    <div class="wizard-card" id="summaryCard">
      <!-- Filled dynamically -->
    </div>
    <div class="btn-row" style="flex-direction:column; gap:12px;">
      <div style="text-align:center;padding:12px 16px;margin-bottom:16px;background:rgba(34,197,94,0.08);border:1px solid rgba(34,197,94,0.2);border-radius:10px;font-size:0.8rem;color:var(--green);">
        This will <strong>copy</strong> your files. Your originals will stay untouched.
      </div>
      <button class="btn btn-secondary btn-big" id="previewBtn" onclick="previewTransfer()" style="margin-bottom:12px;">
        Preview (see what will be copied)
      </button>
      <div id="previewResult" style="display:none;margin-bottom:16px;padding:16px;background:var(--bg);border:1px solid var(--card-border);border-radius:12px;font-size:0.85rem;color:var(--text);"></div>
      <div id="wizardError" style="display:none;padding:12px 16px;background:rgba(239,68,68,0.08);border:1px solid rgba(239,68,68,0.2);border-radius:10px;font-size:0.85rem;color:var(--red);text-align:center;margin-bottom:12px;"></div>
      <button class="btn btn-primary btn-big" id="startBtn" onclick="startTransfer()">
        Start Transfer
      </button>
      <button class="btn btn-secondary" onclick="goTo(5)" style="align-self:flex-start;">Back</button>
    </div>
  </div>
</div>

<div style="text-align:center;margin-top:32px;font-size:0.7rem;color:var(--text-muted);">
  <a href="https://github.com/husamsoboh-cyber/cloudhop/issues/new?template=bug_report.md" target="_blank" rel="noopener noreferrer" style="color:var(--text-muted);text-decoration:none;">Need help?</a> &middot; <a href="https://github.com/husamsoboh-cyber/cloudhop/discussions/new?category=feedback" target="_blank" rel="noopener noreferrer" style="color:var(--text-muted);text-decoration:none;">Send feedback</a>
</div>

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