Skip to content

Commit bbe1f9a

Browse files
alvinoshalvinosh
committed
Added Modern UI
1 parent c64e5dd commit bbe1f9a

1 file changed

Lines changed: 153 additions & 15 deletions

File tree

‎src/routes/transfers/send/+page.svelte‎

Lines changed: 153 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -39,13 +39,13 @@
3939
status = 'transferring';
4040
connected = true;
4141
messages = [...messages, `Client connected`];
42-
transferredBlobs = 0;
42+
transferredBlobs = 0;
4343
} else if (action.startsWith('transfer blob completed')) {
4444
transferredBlobs += 1;
4545
messages = [...messages, 'Blob transferred'];
4646
} else if (action.startsWith('transfer completed')) {
4747
status = 'completed';
48-
transferredBlobs = totalBlobs;
48+
transferredBlobs = totalBlobs;
4949
messages = [...messages, 'Transfer completed'];
5050
} else if (action === 'transfer aborted') {
5151
status = 'aborted';
@@ -91,28 +91,166 @@
9191
{/if}
9292
</div>
9393
<span class="flex items-center gap-2 font-medium text-gray-modern-900">
94-
<div class="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-gray-900"></div>
95-
Waiting to connect...
94+
Waiting to connect
95+
<span class="ellipsis-animation"></span>
9696
</span>
9797
{#if hashCode}
9898
<HashCode {hashCode} />
9999
{/if}
100100
</div>
101101
{:else if status === 'transferring'}
102-
<div class="flex flex-col items-center gap-4">
103-
<span class="font-medium text-gray-modern-900">Connected to client</span>
104-
<progress value={transferredBlobs} max={totalBlobs} class="w-64 h-4 rounded"></progress>
105-
<span class="font-medium text-gray-modern-900">
106-
{transferredBlobs} of {totalBlobs} files transferred
107-
</span>
102+
<div class="flex w-full max-w-md flex-col items-center gap-6 bg-white p-6">
103+
<div class="flex w-full items-center gap-3">
104+
<div
105+
class="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-full bg-blue-50"
106+
>
107+
<svg
108+
xmlns="http://www.w3.org/2000/svg"
109+
class="h-5 w-5 text-blue-500"
110+
fill="none"
111+
viewBox="0 0 24 24"
112+
stroke="currentColor"
113+
>
114+
<path
115+
stroke-linecap="round"
116+
stroke-linejoin="round"
117+
stroke-width="2"
118+
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10"
119+
/>
120+
</svg>
121+
</div>
122+
<div class="flex-grow">
123+
<h3 class="font-medium text-gray-900">
124+
Transfer in progress <span class="ellipsis-animation"></span>
125+
</h3>
126+
<p class="text-sm text-gray-500">Connected to client</p>
127+
</div>
128+
</div>
129+
130+
<div class="w-full space-y-2">
131+
<div class="flex justify-between text-sm font-medium text-gray-700">
132+
<span>Progress</span>
133+
<span>{Math.round((transferredBlobs / totalBlobs) * 100)}%</span>
134+
</div>
135+
<div class="h-2.5 w-full rounded-full bg-gray-100">
136+
<div
137+
class="h-2.5 rounded-full bg-blue-500 transition-all duration-300 ease-out"
138+
style="width: {Math.round((transferredBlobs / totalBlobs) * 100)}%"
139+
></div>
140+
</div>
141+
<p class="text-right text-xs text-gray-500">
142+
{transferredBlobs} of {totalBlobs} files transferred
143+
</p>
144+
</div>
108145
</div>
109146
{:else if status === 'completed'}
110-
<div class="flex flex-col items-center gap-4">
111-
<span class="font-medium text-green-600">Transfer completed successfully!</span>
147+
<div class="flex w-full max-w-md flex-col items-center gap-4 rounded-xl bg-white p-8">
148+
<div class="flex h-16 w-16 items-center justify-center rounded-full bg-green-50">
149+
<svg
150+
xmlns="http://www.w3.org/2000/svg"
151+
class="h-8 w-8 text-green-500"
152+
fill="none"
153+
viewBox="0 0 24 24"
154+
stroke="currentColor"
155+
>
156+
<path
157+
stroke-linecap="round"
158+
stroke-linejoin="round"
159+
stroke-width="2"
160+
d="M5 13l4 4L19 7"
161+
/>
162+
</svg>
163+
</div>
164+
<h3 class="text-lg font-medium text-gray-900">Transfer complete!</h3>
165+
<p class="text-center text-sm text-gray-500">
166+
All files were successfully transferred to the client.
167+
</p>
168+
<button
169+
on:click={() = >{
170+
goto('/transfers');
171+
}}
172+
class="mt-2 rounded-lg bg-green-500 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-green-600"
173+
>
174+
Done
175+
</button>
112176
</div>
113177
{:else if status === 'aborted'}
114-
<div class="flex flex-col items-center gap-4">
115-
<span class="font-medium text-red-600">Transfer aborted.</span>
178+
<div class="flex w-full max-w-md flex-col items-center gap-4 rounded-xl bg-white p-8">
179+
<div class="flex h-16 w-16 items-center justify-center rounded-full bg-red-50">
180+
<svg
181+
xmlns="http://www.w3.org/2000/svg"
182+
class="h-8 w-8 text-red-500"
183+
fill="none"
184+
viewBox="0 0 24 24"
185+
stroke="currentColor"
186+
>
187+
<path
188+
stroke-linecap="round"
189+
stroke-linejoin="round"
190+
stroke-width="2"
191+
d="M6 18L18 6M6 6l12 12"
192+
/>
193+
</svg>
194+
</div>
195+
<h3 class="text-lg font-medium text-gray-900">Transfer aborted</h3>
196+
<p class="text-center text-sm text-gray-500">
197+
The file transfer was interrupted or canceled.
198+
</p>
199+
<div class="mt-2 flex gap-3">
200+
<button
201+
on:click={() => {
202+
goto('/transfers');
203+
}}
204+
class="rounded-lg bg-gray-100 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-200"
205+
>
206+
Close
207+
</button>
208+
</div>
116209
</div>
117210
{/if}
118-
</div>
211+
</div>
212+
213+
<style>
214+
.loading-ellipsis span {
215+
opacity: 0;
216+
}
217+
.animate-bounce {
218+
animation: bounce 1.5s infinite;
219+
}
220+
.animation-delay-100 {
221+
animation-delay: 0.2s;
222+
}
223+
.animation-delay-200 {
224+
animation-delay: 0.4s;
225+
}
226+
@keyframes bounce {
227+
0%,
228+
100% {
229+
transform: translateY(0);
230+
opacity: 0.8;
231+
}
232+
50% {
233+
transform: translateY(-3px);
234+
opacity: 1;
235+
}
236+
}
237+
238+
.ellipsis-animation:after {
239+
content: '...';
240+
animation: ellipsis 1.5s infinite;
241+
display: inline-block;
242+
width: 1.5em;
243+
text-align: left;
244+
}
245+
@keyframes ellipsis {
246+
0% {
247+
content: '.';
248+
}
249+
50% {
250+
content: '..';
251+
}
252+
100% {
253+
content: '...';
254+
}
255+
}
256+
</style>

0 commit comments

Comments
 (0)