uploader/index.html at release · scaleflex/uploader · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>@scaleflex/uploader — Demo</title>
  <link rel="icon" href="https://cdn.prod.website-files.com/623086c828f7c9787009cf20/6267d5ef7488f536294d267b_favicon-256x526.png" />
  <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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-markup.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-javascript.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-typescript.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-jsx.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-tsx.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-bash.min.js" defer></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-css.min.js" defer></script>
  <script type="module" crossorigin src="/uploader/assets/index-R29ir-d_.js"></script>
  <link rel="stylesheet" crossorigin href="/uploader/assets/index-DPXAxifh.css">
</head>
<body>
  <!-- Topbar -->
  <header id="topbar">
    <div class="topbar-inner">
    <div class="topbar-left">
      <button id="sidebar-toggle" class="sidebar-toggle" aria-label="Toggle sidebar">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/>
        </svg>
      </button>
      <a href="#/" class="topbar-brand">
        <img src="https://assets.scaleflex.com/Marketing/Logos/Scaleflex%20Logos/Logo%20Horizontal/scaleflex%20logo%20without%20tagline%20white%20text%20%28horizontal%29%20.png?vh=85bc00" alt="Scaleflex" class="topbar-logo" />
      </a>
    </div>
    <nav class="topbar-nav">
      <a href="#/" class="topbar-nav-link" data-section="home">Home</a>
      <a href="#/docs/getting-started" class="topbar-nav-link" data-section="docs">Documentation</a>
      <a href="#/examples/basic" class="topbar-nav-link" data-section="examples">Examples</a>
    </nav>
    <div class="topbar-right">
      <button id="auth-btn" class="topbar-btn" title="Auth settings">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>
        </svg>
        <span>Auth</span>
      </button>
      <a href="https://www.npmjs.com/package/@scaleflex/uploader" target="_blank" rel="noopener" class="topbar-btn" aria-label="npm">
        <svg width="16" height="16" viewBox="0 0 256 256" fill="currentColor"><path d="M0 256V0h256v256H0zm41-41h59.2v-133H141v133h33.4V41H41v174z"/></svg>
      </a>
    </div>
    </div>
  </header>

  <!-- Auth popover -->
  <div id="auth-popover" class="auth-popover hidden">
    <h3>Authentication</h3>
    <div class="form-group">
      <label for="auth-container">Container</label>
      <input type="text" id="auth-container" placeholder="your-container" />
    </div>
    <div class="form-group">
      <label for="auth-sec-template">Security template ID</label>
      <input type="text" id="auth-sec-template" placeholder="SECU_..." />
    </div>
    <button id="auth-save" class="btn-primary btn-sm">Save</button>
  </div>

  <!-- Layout -->
  <div id="app">
    <!-- Sidebar -->
    <aside id="sidebar" class="sidebar hidden">
      <nav id="sidebar-docs" class="sidebar-nav hidden">
        <a href="#/docs/getting-started" class="sidebar-link" data-route="/docs/getting-started">Getting started</a>
        <a href="#/docs/configuration" class="sidebar-link" data-route="/docs/configuration">Configuration</a>
        <a href="#/docs/api" class="sidebar-link" data-route="/docs/api">API</a>
        <a href="#/docs/theming" class="sidebar-link" data-route="/docs/theming">Theming</a>
        <a href="#/docs/types" class="sidebar-link" data-route="/docs/types">Types</a>
      </nav>
      <nav id="sidebar-examples" class="sidebar-nav hidden">
        <div class="sidebar-group">
          <div class="sidebar-group-title">Getting started</div>
          <a href="#/examples/basic" class="sidebar-link" data-route="/examples/basic">Basic usage</a>
        </div>
        <div class="sidebar-group">
          <div class="sidebar-group-title">Upload</div>
          <a href="#/examples/auto-upload" class="sidebar-link" data-route="/examples/auto-upload">Auto upload</a>
          <a href="#/examples/restrictions" class="sidebar-link" data-route="/examples/restrictions">Restrictions</a>
          <a href="#/examples/target-folder" class="sidebar-link" data-route="/examples/target-folder">Target folder</a>
          <a href="#/examples/concurrency" class="sidebar-link" data-route="/examples/concurrency">Concurrency</a>
          <a href="#/examples/minimize-to-background" class="sidebar-link" data-route="/examples/minimize-to-background">Minimize to background</a>
          <a href="#/examples/resumable-upload" class="sidebar-link" data-route="/examples/resumable-upload">Resumable upload (tus)</a>
        </div>
        <div class="sidebar-group">
          <div class="sidebar-group-title">Appearance</div>
          <a href="#/examples/modal" class="sidebar-link" data-route="/examples/modal">Modal</a>
          <a href="#/examples/inline" class="sidebar-link" data-route="/examples/inline">Inline</a>
          <a href="#/examples/sources-layout" class="sidebar-link" data-route="/examples/sources-layout">Sources layout</a>
          <a href="#/examples/header-button" class="sidebar-link" data-route="/examples/header-button">Header</a>
        </div>
        <div class="sidebar-group">
          <div class="sidebar-group-title">After upload</div>
          <a href="#/examples/last-upload-review" class="sidebar-link" data-route="/examples/last-upload-review">Last upload review</a>
        </div>
        <div class="sidebar-group">
          <div class="sidebar-group-title">Events</div>
          <a href="#/examples/events" class="sidebar-link" data-route="/examples/events">Event handling</a>
        </div>
        <div class="sidebar-group">
          <div class="sidebar-group-title">Metadata</div>
          <a href="#/examples/metadata" class="sidebar-link" data-route="/examples/metadata">Metadata editing</a>
        </div>
        <div class="sidebar-group">
          <div class="sidebar-group-title">React</div>
          <a href="#/examples/react-wrapper" class="sidebar-link" data-route="/examples/react-wrapper">React wrapper</a>
        </div>
      </nav>
    </aside>

    <!-- Content -->
    <main id="content"></main>
  </div>

  <!-- Shared uploader instance -->
  <sfx-uploader id="uploader"></sfx-uploader>

</body>
</html>