-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
187 lines (163 loc) · 10.8 KB
/
index.html
File metadata and controls
187 lines (163 loc) · 10.8 KB
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
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SplitMerge for Discord</title>
<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&family=Outfit:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header-section">
<h1>SplitMerge <span class="accent">for Discord</span></h1>
<p class="subtitle">Securely bypass Discord's attachment size limits</p>
</div>
<div class="tab-container">
<div class="tab">
<button class="tablinks active pulse-hover" onclick="openTab(event, 'splitTab')">
<i class="fas fa-cut"></i> ファイル分割
</button>
<button class="tablinks" onclick="openTab(event, 'mergeTab')">
<i class="fas fa-puzzle-piece"></i> ファイル結合
</button>
<button class="tablinks" onclick="openTab(event, 'shareTab')">
<i class="fas fa-share-nodes"></i> URL共有作成
</button>
</div>
<!-- 分割タブ -->
<div id="splitTab" class="tabcontent active-tab">
<div class="container glass-card">
<div class="form-group">
<label for="fileToSplit"><i class="fas fa-file-upload"></i> ファイルを選択</label>
<input type="file" id="fileToSplit">
</div>
<div class="form-row">
<div class="form-group half">
<label for="splitSize"><i class="fas fa-ruler"></i> 分割サイズ</label>
<select id="splitSize" onchange="toggleCustomSize()">
<option value="10">10MB (無料プラン)</option>
<option value="25">25MB (旧無料プラン)</option>
<option value="100">100MB (Nitro Basic)</option>
<option value="500">500MB (Nitro)</option>
<option value="custom">カスタムサイズ...</option>
</select>
</div>
<div id="customSizeContainer" class="form-group half hidden">
<label for="customSplitSize"><i class="fas fa-edit"></i> サイズ (MB)</label>
<input type="number" id="customSplitSize" placeholder="例: 1024" min="1">
</div>
<div class="form-group half">
<label for="encryptOption"><i class="fas fa-lock"></i> 暗号化設定</label>
<select id="encryptOption">
<option value="none">暗号化しない</option>
<option value="aes256">AES-256暗号化</option>
</select>
</div>
</div>
<div id="passwordContainer" class="hidden-fields">
<div class="form-row">
<div class="form-group half">
<label for="encryptPassword"><i class="fas fa-key"></i> パスワード</label>
<input type="password" id="encryptPassword" placeholder="パスワードを入力">
</div>
<div class="form-group half">
<label for="encryptPasswordConfirm"><i class="fas fa-check-double"></i> 確認</label>
<input type="password" id="encryptPasswordConfirm" placeholder="再入力してください">
</div>
</div>
</div>
<button id="splitButton" class="main-btn"><i class="fas fa-bolt"></i> 分割処理を開始</button>
<div class="progress-container">
<div id="splitProgress" class="progress-bar"></div>
</div>
<div id="splitStatus" class="status-msg"></div>
<div id="splitResults" class="results-area">
<div class="results-card">
<h3><i class="fas fa-check-circle"></i> 分割結果</h3>
<div id="splitFilesList" class="info-grid"></div>
<button id="downloadAllButton" class="download-btn"><i class="fas fa-download"></i> ZIPを保存</button>
<!-- 100KB以下の小規模ファイル用インラインURL表示 -->
<div id="inlineShareArea" class="hidden" style="margin-top: 20px; border: 2px solid var(--success); padding: 15px; border-radius: 12px; background: rgba(59, 165, 92, 0.1);">
<p style="font-size: 0.85rem; font-weight: 700; color: var(--success); margin-bottom: 8px;"><i class="fas fa-bolt"></i> 小規模ファイルのためURLのみでの共有が可能です！</p>
<button onclick="copyToClipboard('quickShareResultInline')" class="download-btn-small" style="background: var(--success); width: 100%;"><i class="fas fa-copy"></i> データ入り共有URLをコピー</button>
<textarea id="quickShareResultInline" readonly style="display:none;"></textarea>
</div>
<!-- 共有リンク作成のクリック誘導 -->
<div id="postSplitShareArea" class="hidden" style="margin-top: 20px; border-top: 1px solid var(--glass-border); padding-top: 15px;">
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 10px;">ZIPをアップロードした後、魔法のURLを作成できます：</p>
<button onclick="openTab(null, 'shareTab')" class="download-btn-small" style="background: var(--success);"><i class="fas fa-share-nodes"></i> 共有URL作成へ</button>
</div>
</div>
</div>
</div>
</div>
<!-- 結合タブ -->
<div id="mergeTab" class="tabcontent">
<div class="container glass-card">
<div id="mergeFromUrlAlert" class="status-msg hidden" style="background: rgba(88, 101, 242, 0.2); padding: 15px; border-radius: 10px; margin-bottom: 20px;">
<i class="fas fa-link"></i> 魔法のURLから自動読み込みしました。
</div>
<div id="fileSelectionArea">
<div class="form-group">
<label for="zipToMerge"><i class="fas fa-archive"></i> 分割ZIPファイルを選択</label>
<input type="file" id="zipToMerge" accept=".zip" multiple>
</div>
</div>
<div id="decryptContainer" class="hidden-fields">
<div class="form-group">
<label for="decryptPassword"><i class="fas fa-unlock"></i> 復号パスワード</label>
<input type="password" id="decryptPassword" placeholder="パスワードを入れた場合は入力">
</div>
</div>
<button id="mergeButton" class="main-btn"><i class="fas fa-puzzle-piece"></i> 結合して復元を開始</button>
<div class="progress-container">
<div id="mergeProgress" class="progress-bar"></div>
</div>
<div id="mergeStatus" class="status-msg"></div>
<div id="mergeResults" class="results-area">
<div class="results-card">
<h3><i class="fas fa-magic"></i> 結合結果</h3>
<div class="preview-area">
<div id="filePreviewContainer"></div>
</div>
<button id="downloadMergedButton" class="download-btn"><i class="fas fa-file-download"></i> ファイルを保存</button>
</div>
</div>
</div>
</div>
<!-- URL共有作成タブ -->
<div id="shareTab" class="tabcontent">
<div class="container glass-card">
<h3><i class="fas fa-magic"></i> 魔法の共有URL作成</h3>
<p style="color: var(--text-secondary); margin-top: 10px; margin-bottom: 20px; font-size: 0.9rem;">
1. 生成したZIPをどこか（Discord等）に保存します。<br>
2. そのZIPの「直リンク」を下に貼り付けてください。<br>
3. 相手に送るための「魔法のURL」が生成されます。
</p>
<div class="form-group">
<label>保存したZIPのURL (直リンク)</label>
<input type="text" id="inputZipUrl" placeholder="https://cdn.discordapp.com/attachments/.../xxx.zip">
</div>
<button id="generateQuickLink" class="main-btn" style="background: var(--success);"><i class="fas fa-link"></i> 魔法のURLを生成</button>
<div id="quickShareArea" class="results-area hidden">
<div class="results-card">
<label>相手に送るURL:</label>
<textarea id="quickShareResult" readonly style="width: 100%; height: 80px; margin: 10px 0; background: rgba(0,0,0,0.3); color: white; border: 1px solid var(--glass-border); padding: 10px; border-radius: 8px; font-size: 0.85rem;"></textarea>
<button onclick="copyToClipboard('quickShareResult')" class="download-btn-small"><i class="fas fa-copy"></i> URLをコピー</button>
<p style="font-size: 0.75rem; color: var(--text-muted); margin-top: 10px;">※このURLを開くだけで、相手のブラウザで自動的に結合の準備が整います。</p>
</div>
</div>
</div>
</div>
</div>
<div class="footer">
<p>SplitMerge Premium | Synthesizer Optimized</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>
<script src="script.js"></script>
</body>
</html>