ipfsbed/batch-share.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
<!DOCTYPE html>
<html lang="" id="htmlLang">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IPFSBED</title>
    <meta name="description" content="Access multiple shared files via IPFSBED - a decentralized file hosting service based on IPFS">
    <link rel="shortcut icon" href="/img/ipfsbed.png">
    <link rel="stylesheet" href="./static/style.css">
    <link rel="stylesheet" href="./static/batch-share.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://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.5/dist/FileSaver.min.js"></script>
    <script src="./static/langs.js"></script>
    <script src="./static/common.js"></script>
    <script src="./static/batch-share.js"></script>
    <script defer src="https://umami.zwei.de.eu.org/script.js" data-website-id="9377510d-06c4-40da-ba16-c7442815c04c"></script>
</head>
<body>
    <div class="batch-share-container">
        <div class="batch-share-header">
            <div class="batch-share-header-top">
                <img src="/img/ipfsbed.png" alt="IPFSBED Logo" width="32" height="32">
                <h1 id="batchShareHeaderTitle">IPFSBED</h1>
            </div>
            <p class="ipfs-notice" data-translate="ipfs-propagation-notice">如果文件刚上传，请稍等片刻再下载，IPFS网络需要时间传播</p>
        </div>

        <div class="batch-share-content">
            <!-- Loading indicator -->
            <div class="loading" id="loadingIndicator">
                <div class="spinner"></div>
                <p id="batchLoadingText"></p>
                <button class="loading-cancel" id="loadingCancelBtn" onclick="cancelBatchLoading()">
                    <i class="fas fa-times"></i>
                    <span data-translate="loading-cancel">取消</span>
                </button>
            </div>

            <!-- Passphrase form (shown for encrypted shares) -->
            <div class="passphrase-form" id="passphraseForm" style="display:none;">
                <h3 id="batchPassphraseTitle"></h3>
                <div class="passphrase-input-wrapper">
                    <input type="password" id="passphrase" placeholder="" data-translate-placeholder="batch-share-passphrase-placeholder">
                    <button type="button" class="password-toggle" onclick="togglePasswordVisibility('passphrase')" title="">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
                <div class="error-message" id="errorMessage"></div>
                <button class="batch-button select-all-btn" id="unlockButton">
                    <i class="fas fa-lock-open"></i><span id="batchUnlockBtnText"></span>
                </button>
            </div>

            <!-- Batch file details -->
            <div id="batchFilesContainer" style="display:none;">
                <div class="files-info">
                    <span id="filesCount"></span>
                </div>

                <!-- Gateway selector -->
                <div class="gateway-selector-group">
                    <label for="batchGatewaySelect" id="batchGatewaySelectLabel"></label>
                    <select id="batchGatewaySelect">
                        <!-- Options will be populated by JavaScript -->
                    </select>
                </div>

                <!-- File list -->
                <div class="file-list" id="filesList"></div>

                <!-- Batch actions -->
                <div class="batch-actions">
                    <button class="batch-button select-all-btn" id="selectAllBtn">
                        <i class="fas fa-check-square"></i><span id="selectAllBtnText"></span>
                    </button>
                    <button class="batch-button deselect-all-btn" id="deselectAllBtn">
                        <i class="fas fa-square"></i><span id="deselectAllBtnText"></span>
                    </button>
                    <button class="batch-button download-all-btn" id="downloadAllBtn">
                        <i class="fas fa-download"></i><span id="downloadAllBtnText"></span>
                    </button>
                    <button class="batch-button copy-all-btn" id="copyAllBtn">
                        <i class="fas fa-copy"></i><span id="copyAllBtnText"></span>
                    </button>
                </div>
            </div>
        </div>

        <div class="sponsors-section">
            <div class="sponsors-text">
                <span data-translate="sponsors-text">本项目由</span>
                <a href="https://yxvm.com/" target="_blank" rel="noopener noreferrer">YXVM</a>
                <span data-translate="sponsors-and">和</span>
                <a href="https://support.nodeseek.com/" target="_blank" rel="noopener noreferrer">NodeSupport</a>
                <span data-translate="sponsors-suffix">赞助</span>
            </div>
        </div>

        <div class="return-home">
            <a href="./index.html"><i class="fas fa-home"></i><span id="batchReturnHomeText"></span></a>
        </div>
    </div>

    <!-- Download Progress Dialog -->
    <div class="download-dialog" id="downloadDialog">
        <div class="dialog-content">
            <h3 id="downloadDialogTitle"></h3>
            <div class="download-progress">
                <div class="download-progress-inner" id="downloadProgressBar"></div>
            </div>
            <div class="download-status" id="downloadStatus"></div>
            <button class="download-cancel" id="downloadCancel"></button>
        </div>
    </div>

    <script>
        // Initialize when DOM is ready
        document.addEventListener('DOMContentLoaded', function() {
            // Set initial title for password toggle button
            const passwordToggle = document.querySelector('.password-toggle');
            if (passwordToggle) {
                passwordToggle.title = _t('show-password');
            }
        });

        // Function to toggle password visibility
        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');
            }
        }
    </script>
</body>
</html>