add: added projectsHEADmain

1 files changed, 67 insertions, 0 deletions

diff --git a/ping/frontend/src/lib/components/ToastList.svelte b/ping/frontend/src/lib/components/ToastList.svelte
new file mode 100644
index 0000000..5351ef7
--- /dev/null
+++ b/ping/frontend/src/lib/components/ToastList.svelte
@@ -0,0 +1,67 @@
+<script lang="ts">
+	import { toastList } from '$lib/stores/toast';
+</script>
+
+<div class="toast">
+	{#each $toastList as toast}
+		<div class="toast-item" style="border-top: 4px {toast.color} solid">
+			<h3 style="color: {toast.color}">{toast.title}</h3>
+			<p>{toast.message}</p>
+		</div>
+	{/each}
+</div>
+
+<style>
+	.toast {
+		position: fixed;
+		bottom: 20px;
+		right: 20px;
+		z-index: 1000;
+		display: flex;
+		flex-direction: column;
+		gap: 10px;
+	}
+
+	.toast-item {
+		background-color: var(--bg-secondary);
+		padding: 10px;
+		color: white;
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		transition:
+			transform 0.3s,
+			opacity 0.3s;
+		transform: translateY(30px);
+		opacity: 0;
+		animation-delay: 0s, 4.7s;
+		animation-name: toast-in, toast-out;
+		animation-duration: 0.3s, 0.3s;
+		animation-fill-mode: forwards, forwards;
+	}
+
+	@keyframes toast-in {
+		from {
+			transform: translateY(30px);
+			opacity: 0;
+		}
+		to {
+			transform: translateY(0);
+			opacity: 1;
+		}
+	}
+
+	@keyframes toast-out {
+		from {
+			transform: translateY(0);
+			opacity: 1;
+		}
+		to {
+			transform: translateY(30px);
+			opacity: 0;
+		}
+	}
+
+	.toast-item h3 {
+		margin: 0;
+		font-weight: bold;
+	}
+</style>