ipfsbed/index.html at main · bestZwei/ipfsbed · 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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IPFSBED - 去中心化IPFS文件托管服务 | ipfsbed.is-an.org</title>
    <meta name="keywords" content="IPFSBED,IPFS文件托管,IPFS,去中心化存储,星际文件系统,文件托管,免费存储,文件上传,云存储">
    <meta name="description" content="IPFSBED是一个基于IPFS(星际文件系统)的去中心化的文件托管服务。支持拖拽上传、粘贴上传等多种上传方式,提供多个可靠的访问网关。">
    <meta name="author" content="ipfsbed.is-an.org">
    <meta name="robots" content="index,follow">
    <link rel="canonical" href="https://ipfsbed.is-an.org">

    <!-- Open Graph / Facebook -->
    <meta property="og:title" content="IPFSBED - 去中心化文件托管服务">
    <meta property="og:description" content="基于IPFS的去中心化文件托管服务,支持多种上传方式和多个访问网关">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://ipfsbed.is-an.org">
    <meta property="og:site_name" content="IPFSBED">
    <meta property="og:image" content="https://ipfsbed.is-an.org/img/ipfsbed.png">

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="IPFSBED - 去中心化文件托管服务">
    <meta name="twitter:description" content="基于IPFS的去中心化文件托管服务,支持多种上传方式和多个访问网关">
    <meta name="twitter:image" content="https://ipfsbed.is-an.org/img/ipfsbed.png">

    <link rel="shortcut icon" href="/img/ipfsbed.png">
    <link rel="stylesheet" href="./static/style.css">
    <link rel="stylesheet" href="./static/index.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script src="./static/langs.js"></script>
    <script src="./static/common.js"></script>
    <script src="./static/history.js"></script>
    <script src="./static/file.js" defer></script>
    <script defer src="https://umami.zwei.de.eu.org/script.js" data-website-id="9377510d-06c4-40da-ba16-c7442815c04c"></script>

    <!-- Schema.org markup for Google -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "IPFSBED",
      "url": "https://ipfsbed.is-an.org",
      "logo": "https://ipfsbed.is-an.org/img/ipfsbed.png",
      "description": "IPFSBED是一个基于IPFS(星际文件系统)的去中心化的文件托管服务。",
      "applicationCategory": "MultimediaApplication",
      "operatingSystem": "Web",
      "offers": {
        "@type": "Offer",
        "price": "0",
        "priceCurrency": "USD"
      }
    }
    </script>
</head>
<body>
    <div class="site-header">
        <div class="site-logo">
            <img src="/img/ipfsbed.png" alt="IPFSBED Logo" width="32" height="32">
            IPFSBED
        </div>
        <div class="header-nav">
            <a href="./history.html" class="nav-link">
                <i class="fas fa-history"></i>
                <span data-translate="upload-history">上传历史</span>
            </a>
            <div class="lang-icon" id="langToggle">
                <i class="fas fa-globe"></i>
            </div>
        </div>
        <div class="lang-dropdown" id="langDropdown">
            <a href="#" data-lang="zh-CN" class="active">中文</a>
            <a href="#" data-lang="en">English</a>
            <a href="#" data-lang="de">Deutsch</a>
            <a href="#" data-lang="ru">Русский</a>
            <a href="#" data-lang="fr">Français</a>
            <a href="#" data-lang="es">Español</a>
            <a href="#" data-lang="ar">العربية</a>
            <a href="#" data-lang="fa">فارسی</a>
            <a href="#" data-lang="tr">Türkçe</a>
            <a href="#" data-lang="pt">Português</a>
            <a href="#" data-lang="ko">조선어</a>
            <a href="#" data-lang="ja">日本語</a>
        </div>
    </div>

    <input id="file" type="file" multiple style="display: none;">
    <input id="directory" type="file" multiple webkitdirectory directory style="display: none;">
    <div class="container">
        <div class="upload">
            <!-- 新增：设置口令栏，添加了切换密码可见性的按钮 -->
            <div class="passphrase-bar">
                <div class="passphrase-input-wrapper" style="display: flex; align-items: center; width: 100%;">
                    <input type="password" id="passphraseInput" data-translate-placeholder="passphrase-placeholder" placeholder="设置口令（可选，留空则公开）">
                    <button type="button" class="password-toggle" onclick="togglePasswordVisibility('passphraseInput')" title="显示/隐藏密码">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
            </div>
            <!-- New: Upload mode toggle -->
            <div class="mode-toggle-container">
                <div class="mode-toggle-wrapper">
                    <span class="toggle-label" data-translate="file-mode">文件模式</span>
                    <label class="toggle-switch">
                        <input type="checkbox" id="uploadModeToggle">
                        <span class="toggle-slider"></span>
                    </label>
                    <span class="toggle-label" data-translate="folder-mode">文件夹模式</span>
                </div>
            </div>
            <div class="content" id="dragbox">
                <svg class="icon" viewBox="0 0 1335 1024" xmlns="http://www.w3.org/2000/svg" aria-label="上传文件图标">
                    <path d="M1097.060174 392.125217C1073.730783 172.966957 893.261913 0.378435 666.089739 0.378435c-227.127652 0-415.610435 171.920696-430.948174 391.746782C101.910261 415.454609 0 525.356522 0 666.601739c0 149.147826 125.239652 274.476522 274.476522 274.476522h195.828869v-78.669913H274.476522a193.691826 193.691826 0 0 1-195.940174-195.806609c0-102.021565 70.678261-180.580174 172.588522-195.917913l54.561391-8.013913 8.013913-62.553043c16.005565-180.580174 172.588522-321.157565 352.389565-321.157566 180.580174 0 337.029565 141.356522 352.389565 321.157566v62.553043l62.664348 8.013913c101.910261 16.005565 172.477217 93.896348 172.477218 195.917913 0 109.901913-85.904696 195.806609-195.806609 195.806609h-195.917913v78.580869h196.029217c149.147826 0 274.476522-125.261913 274.476522-274.476521 0-141.133913-101.999304-259.072-235.25287-274.387479" fill="#909399"></path>
                    <path d="M612.218435 364.766609l1.335652 2.003478L389.698783 590.58087l55.229217 55.362782 181.938087-181.938087V1018.88h78.558609v-78.58087h156.471652-156.471652V458.039652l183.808 183.919305 55.340521-55.340522-277.147826-277.058783-55.229217 55.229218z m-141.913044 575.666087h156.471652-156.716521 0.222608z" fill="#909399"></path>
                </svg>
                <p class="desc" data-translate="drop-zone">点击上传 / 粘贴上传 / 拖拽上传</p>
                <p class="desc" data-translate="drop-zone-desc">去中心化保存和共享文件</p>
            </div>
        </div>
        <div class="filelist">
            <div class="title">
                <span class="title-text">
                    <i class="fas fa-list-ul" style="margin-right: 8px;"></i>
                    <span data-translate="upload-list">上传列表</span>
                </span>
                <div class="batch-actions">
                    <div class="short-url-wrapper">
                        <input type="checkbox" id="enableShortUrl" checked>
                        <span class="short-url-label" data-translate="short-url">短网址</span>
                    </div>
                    <div class="toggle-all-wrapper">
                        <input type="checkbox" id="toggleAllFiles" disabled>
                        <span class="toggle-all-label" data-translate="select-all">全选</span>
                    </div>
                    <button id="shareSelected" class="action-button disabled">
                        <i class="fas fa-share-alt"></i>
                        <span data-translate="share-selected">批量分享</span>
                    </button>
                    <a href="javascript:void(0);" class="copyall action-button disabled" onclick="copyAllLinks()" title="复制所有链接">
                        <i class="fas fa-copy"></i>
                        <span data-translate="copy-all">复制全部</span>
                    </a>
                </div>
            </div>
            <div class="list"></div>
        </div>
    </div>
    <div id="footer">
        <div>
            <div class="info">
                <a href="https://github.com/bestZwei/ipfsbed"><i class="fab fa-github" style="margin-right: 5px;"></i><span data-translate="project-repo">项目地址</span></a> |
                <a href="https://check.ipfs.winx.run/"><i class="fas fa-network-wired" style="margin-right: 5px;"></i><span data-translate="more-gateways">更多网关</span></a>
            </div>
            <span data-translate="copyright-text">© 2021-2025 IPFSBED - 基于IPFS的去中心化文件托管服务</span>
        </div>
    </div>
    <!-- Hidden section for passphrase prompt when accessing a shared link -->
    <div id="shareAccessPrompt">
        <div>
            <h3 data-translate="passphrase-prompt-title">Enter Passphrase</h3>
            <div class="input-wrapper">
                <label for="accessPassphraseInput" data-translate="passphrase-prompt-label">Passphrase:</label>
                <input type="password" id="accessPassphraseInput">
                <button type="button" class="password-toggle" onclick="togglePasswordVisibility('accessPassphraseInput')" title="显示/隐藏密码">
                    <i class="fas fa-eye"></i>
                </button>
            </div>
            <button id="submitAccessPassphrase" data-translate="passphrase-submit">Unlock</button>
            <p id="passphraseError"></p>
        </div>
    </div>

    <!-- New Modal for Batch Share Passphrase -->
    <div id="batchSharePassphraseModal">
        <div class="modal-content">
            <h3 data-translate="batch-share-passphrase-title">Set Passphrase for Batch Share</h3>
            <div class="input-wrapper">
                <input type="password" id="batchPassphraseInput" data-translate-placeholder="batch-share-passphrase-placeholder" placeholder="Enter passphrase (optional, public if empty)">
                <button type="button" class="password-toggle" onclick="togglePasswordVisibility('batchPassphraseInput')" title="Show/Hide Password">
                    <i class="fas fa-eye"></i>
                </button>
            </div>
            <div class="modal-actions">
                <button id="cancelBatchSharePassphrase" data-translate="batch-share-cancel">Cancel</button>
                <button id="confirmBatchSharePassphrase" data-translate="batch-share-confirm-copy">Confirm & Copy Link</button>
            </div>
        </div>
    </div>

    <script>
        // Initialize language after DOM is ready
        document.addEventListener('DOMContentLoaded', function() {
            // Update all UI elements with translations
            updatePageLanguage();

            // Set initial title for password toggle buttons
            const passwordToggles = document.querySelectorAll('.password-toggle');
            passwordToggles.forEach(toggle => {
                toggle.title = _t('show-password');
            });
        });

        // 添加切换密码可见性的函数
        function togglePasswordVisibility(inputId) {
            const passwordInput = document.getElementById(inputId);
            const toggleButton = passwordInput.nextElementSibling;
            const icon = toggleButton.querySelector('i');

            if (passwordInput.type === 'password') {
                passwordInput.type = 'text';
                icon.classList.remove('fa-eye');
                icon.classList.add('fa-eye-slash');
                toggleButton.title = _t('hide-password');
            } else {
                passwordInput.type = 'password';
                icon.classList.remove('fa-eye-slash');
                icon.classList.add('fa-eye');
                toggleButton.title = _t('show-password');
            }
        }

        // Toggle between file and directory upload modes
        const uploadModeToggle = document.getElementById('uploadModeToggle');
        const fileInput = document.getElementById('file');
        const directoryInput = document.getElementById('directory');

        // Initialize toggle state from localStorage
        document.addEventListener('DOMContentLoaded', function() {
            const savedDirectoryMode = localStorage.getItem('ipfsbed_directory_mode');
            if (savedDirectoryMode === 'true') {
                uploadModeToggle.checked = true;
                // Trigger change event to ensure proper configuration
                uploadModeToggle.dispatchEvent(new Event('change'));
            }
        });

        uploadModeToggle.addEventListener('change', function() {
            const isDirectoryMode = this.checked;
            localStorage.setItem('ipfsbed_directory_mode', isDirectoryMode ? 'true' : 'false');

            // Configure file inputs based on mode
            if (isDirectoryMode) {
                directoryInput.setAttribute('webkitdirectory', '');
                directoryInput.setAttribute('directory', '');
                fileInput.removeAttribute('webkitdirectory');
                fileInput.removeAttribute('directory');
                console.log("Switched to directory mode");
            } else {
                directoryInput.removeAttribute('webkitdirectory');
                directoryInput.removeAttribute('directory');
                fileInput.removeAttribute('webkitdirectory');
                fileInput.removeAttribute('directory');
                console.log("Switched to file mode");
            }
        });
    </script>
</body>
</html>