Skip to content
This repository was archived by the owner on May 29, 2025. It is now read-only.

Commit e657345

Browse files
blake437blake437
authored
Update index.html
Signed-off-by: Blake Arnold <[email protected]>
1 parent 5267cdf commit e657345

File tree

1 file changed

+144
-36
lines changed

1 file changed

+144
-36
lines changed

‎index.html‎

Lines changed: 144 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,18 @@
11
<html>
22
<head>
3-
<style>body {
3+
<style>
4+
body {
45
font-family: 'Segoe UI', Arial, sans-serif;
56
background: #f4f8fb;
67
margin: 0;
78
padding: 0;
89
min-height: 100vh;
910
}
10-
1111
#tabs {
1212
display: flex;
1313
justify-content: center;
1414
margin: 24px 0 0 0;
1515
}
16-
1716
.tab {
1817
background: #f7f7f7;
1918
border: 1px solid #bbb;
@@ -30,19 +29,16 @@
3029
transition: background 0.2s, font-weight 0.2s;
3130
color: #555;
3231
}
33-
3432
.tab.active {
3533
background: #fff;
3634
font-weight: bold;
3735
border-color: #888 #888 #fff #888;
3836
z-index: 1;
3937
color: #222;
4038
}
41-
4239
.tab:not(.active):hover {
4340
background: #ececec;
4441
}
45-
4642
.tab-content {
4743
display: none;
4844
border: 1px solid #ccc;
@@ -54,11 +50,9 @@
5450
box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06);
5551
font-size: 15px;
5652
}
57-
5853
.tab-content.active {
5954
display: block !important;
6055
}
61-
6256
.above-tabs {
6357
display: flex;
6458
justify-content: center;
@@ -74,7 +68,6 @@
7468
position: relative;
7569
top: 24px;
7670
}
77-
7871
.above-tabs input[type="text"],
7972
.above-tabs input[type="number"] {
8073
width: 180px;
@@ -86,13 +79,11 @@
8679
background-color: #f9f9f9;
8780
transition: border-color 0.2s;
8881
}
89-
9082
.above-tabs input[type="text"]:focus,
9183
.above-tabs input[type="number"]:focus {
9284
outline: none;
9385
border-color: #0078d7;
9486
}
95-
9687
.above-tabs button {
9788
background: #f7f7f7;
9889
color: #555;
@@ -104,13 +95,11 @@
10495
box-shadow: 0 4px 12px 0 rgba(0,0,0,0.06);
10596
transition: background 0.2s, color 0.2s, border 0.2s;
10697
}
107-
10898
.above-tabs button:hover, .above-tabs button:focus {
10999
background: #ececec;
110100
color: #222;
111101
border-color: #888;
112102
}
113-
114103
input[type="text"], input[type="number"] {
115104
width: 220px;
116105
padding: 7px 12px;
@@ -121,12 +110,10 @@
121110
background-color: #f9f9f9;
122111
transition: border-color 0.2s;
123112
}
124-
125113
input[type="text"]:focus, input[type="number"]:focus {
126114
outline: none;
127115
border-color: #0078d7;
128116
}
129-
130117
textarea {
131118
width: 100%;
132119
min-height: 80px;
@@ -138,7 +125,6 @@
138125
background: #f9f9f9;
139126
resize: vertical;
140127
}
141-
142128
button {
143129
padding: 8px 20px;
144130
margin: 0 8px 10px 0;
@@ -151,26 +137,84 @@
151137
transition: background 0.18s;
152138
box-shadow: 0 1px 2px 0 rgba(0,0,0,0.04);
153139
}
154-
155140
button:hover, button:focus {
156141
background: #005fa3;
157142
}
158143

144+
/* New file pills style */
159145
.file-list {
160146
margin: 8px 0 14px 0;
161147
padding: 0;
162148
list-style: none;
163149
font-size: 14px;
150+
display: flex;
151+
flex-direction: column;
152+
gap: 10px;
153+
}
154+
.file-pill {
155+
display: flex;
156+
align-items: center;
157+
background: #e6eaf3;
158+
border-radius: 24px;
159+
box-shadow: 0 1px 4px 0 rgba(0,0,0,0.05);
160+
padding: 8px 16px 8px 10px;
161+
min-height: 40px;
162+
min-width: 0;
163+
transition: box-shadow 0.15s;
164+
gap: 14px;
164165
}
165-
.file-list li {
166-
margin: 0 0 3px 0;
167-
padding: 2px 0 2px 16px;
168-
background: url('data:image/svg+xml;utf8,<svg width="10" height="10" xmlns="http://www.w3.org/2000/svg"><circle cx="5" cy="5" r="5" fill="%2388c" /></svg>') 0 6px no-repeat;
169-
background-size: 10px 10px;
170-
color: #444;
171-
word-break: break-all;
166+
.file-pill .file-icon {
167+
min-width: 28px;
168+
min-height: 28px;
169+
width: 28px;
170+
height: 28px;
171+
display: flex;
172+
align-items: center;
173+
justify-content: center;
174+
background: #d5daf5;
175+
border-radius: 50%;
176+
font-size: 17px;
177+
margin-right: 6px;
178+
}
179+
.file-pill .file-title {
180+
flex: 1 1 auto;
181+
overflow: hidden;
182+
text-overflow: ellipsis;
183+
white-space: nowrap;
184+
font-size: 15px;
185+
color: #27304e;
186+
margin-right: 16px;
187+
margin-left: 0;
188+
}
189+
.file-pill .file-actions {
190+
display: flex;
191+
gap: 6px;
192+
}
193+
.file-pill button {
194+
background: #fff;
195+
color: #3b4d77;
196+
border: 1px solid #b7bedb;
197+
border-radius: 8px;
198+
font-size: 14px;
199+
padding: 5px 9px;
200+
box-shadow: none;
201+
margin: 0;
202+
transition: background 0.18s, border-color 0.18s, color 0.18s;
203+
}
204+
.file-pill button:hover, .file-pill button:focus {
205+
background: #f0f2fa;
206+
border-color: #7a8bd6;
207+
color: #2244c7;
208+
}
209+
.file-pill .remove-btn {
210+
color: #a22e2e;
211+
border-color: #e3b7b7;
212+
}
213+
.file-pill .remove-btn:hover, .file-pill .remove-btn:focus {
214+
color: #fff;
215+
background: #e55a5a;
216+
border-color: #d22;
172217
}
173-
174218
@media (max-width: 600px) {
175219
.tab-content {
176220
padding: 16px 4vw;
@@ -220,14 +264,17 @@
220264
</div>
221265
</body>
222266
<script>
223-
showTabContent('tab1')
224-
document.getElementById('newMessageBtn').addEventListener('click', function() {
225-
document.getElementById('message').value = '';
226-
let fileInput = document.getElementById('fileInput');
227-
if(fileInput) fileInput.value = '';
228-
let msgNum = Math.floor(Math.random() * 900000) + 100000;
229-
document.getElementById('messageNum').value = msgNum;
230-
});
267+
showTabContent('tab1');
268+
document.getElementById('newMessageBtn').addEventListener('click', function() {
269+
document.getElementById('plaintext').value = '';
270+
let fileInput = document.getElementById('fileInput');
271+
if(fileInput) fileInput.value = '';
272+
attachedFiles = [];
273+
updateAttachedFilesList();
274+
let msgNum = Math.floor(Math.random() * 900000) + 100000;
275+
document.getElementById('num').value = msgNum;
276+
});
277+
231278
function strToBuf(str) {
232279
return new TextEncoder().encode(str);
233280
}
@@ -270,13 +317,74 @@
270317
document.getElementById('downloadAttachedBtn').style.display = "none";
271318
});
272319

320+
function getFileTypeIcon(fileName) {
321+
const ext = fileName.split('.').pop().toLowerCase();
322+
if (['jpg','jpeg','png','gif','bmp','svg','webp'].includes(ext)) return '🖼️';
323+
if (['pdf'].includes(ext)) return '📄';
324+
if (['doc','docx'].includes(ext)) return '📝';
325+
if (['xls','xlsx','csv'].includes(ext)) return '📊';
326+
if (['ppt','pptx'].includes(ext)) return '📊';
327+
if (['zip','rar','7z','tar','gz'].includes(ext)) return '🗜️';
328+
if (['mp3','wav','ogg','m4a'].includes(ext)) return '🎵';
329+
if (['mp4','avi','mov','mkv'].includes(ext)) return '🎬';
330+
if (['txt','md','rtf','json','log'].includes(ext)) return '📃';
331+
return '📁';
332+
}
333+
273334
function updateAttachedFilesList() {
274335
const list = document.getElementById('attachedFilesList');
275336
list.innerHTML = "";
276337
if (attachedFiles.length > 0) {
277-
attachedFiles.forEach(f => {
338+
attachedFiles.forEach((f, i) => {
278339
const li = document.createElement('li');
279-
li.textContent = f.name;
340+
li.className = "file-pill";
341+
342+
const icon = document.createElement('span');
343+
icon.className = "file-icon";
344+
icon.textContent = getFileTypeIcon(f.name);
345+
346+
const title = document.createElement('span');
347+
title.className = "file-title";
348+
title.textContent = f.name;
349+
350+
const actions = document.createElement('span');
351+
actions.className = "file-actions";
352+
353+
const downloadBtn = document.createElement('button');
354+
downloadBtn.type = "button";
355+
downloadBtn.title = "Download";
356+
downloadBtn.innerHTML = "⬇️";
357+
downloadBtn.onclick = function() {
358+
const blob = new Blob([f], {type: f.type});
359+
const url = URL.createObjectURL(blob);
360+
const a = document.createElement('a');
361+
a.href = url;
362+
a.download = f.name;
363+
document.body.appendChild(a);
364+
a.click();
365+
setTimeout(() => {
366+
document.body.removeChild(a);
367+
URL.revokeObjectURL(url);
368+
}, 100);
369+
};
370+
371+
const removeBtn = document.createElement('button');
372+
removeBtn.type = "button";
373+
removeBtn.title = "Remove";
374+
removeBtn.className = "remove-btn";
375+
removeBtn.innerHTML = "🗑️";
376+
removeBtn.onclick = function() {
377+
attachedFiles.splice(i, 1);
378+
updateAttachedFilesList();
379+
};
380+
381+
actions.appendChild(downloadBtn);
382+
actions.appendChild(removeBtn);
383+
384+
li.appendChild(icon);
385+
li.appendChild(title);
386+
li.appendChild(actions);
387+
280388
list.appendChild(li);
281389
});
282390
}
@@ -420,7 +528,7 @@
420528
}, 100);
421529
});
422530
}
423-
531+
424532
function showTabContent(tabId) {
425533
document.querySelectorAll('.tab-content').forEach(
426534
c => c.classList.remove('active'));

0 commit comments

Comments
 (0)