feat: ✨ Single view paste icon

frontend/index.pug

@@ -28,6 +28,11 @@ html(lang='en')
 			.buttons.noselect
 				button#save-button.btn(aria-label='Save')
 				button#single-view-button.btn(aria-label='Single View')
+					.fireBody(style='display: none')
+						- var parts = 20;
+						- while (parts--) {
+							.particle
+						- }
 				button#new-button.btn(aria-label='New paste')
 				button#copy-button.btn(aria-label='Copy')
 				a(href='https://github.com/zer0bin-dev/zer0bin' aria-label='GitHub repo')
@@ -43,4 +48,4 @@ html(lang='en')
 				.line-numbers.noselect
 				pre#code-view-pre(style='display: none')
 					code#code-view
-				textarea#text-area(spellcheck='false' autofocus='' name='value' aria-label='Paste input area' disabled='' style='display: none')
+				textarea#text-area(spellcheck='false' autofocus='' name='value' aria-label='Paste input area' disabled='' style='display: none')

frontend/src/icons.ts

@@ -58,7 +58,8 @@ tippy("#save-button", {
 })
 
 tippy("#single-view-button", {
-	content: "Single View",
+	content:
+		"Single view<br><span class='keybind'>Deletes after seen 👻</span>",
 	placement: "bottom",
 	animation: "scale",
 	theme: "rosepine",

frontend/src/index.ts

@@ -152,7 +152,8 @@ function viewPaste(content: string, views: string, singleView: boolean) {
 	}
 
 	if (singleView) {
-		singleViewButton.style.color = "#eb6f92"
+		hide(singleViewButton.firstElementChild as HTMLElement)
+		singleViewButton.lastElementChild.classList.add("fire")
 	}
 
 	disable(saveButton)
@@ -290,10 +291,12 @@ hideButton.addEventListener("click", function () {
 singleViewButton.addEventListener("click", function () {
 	if (singleView) {
 		singleView = false
-		singleViewButton.style.color = "#9ccfd8"
+		hide(singleViewButton.firstElementChild as HTMLElement)
+		singleViewButton.lastElementChild.classList.remove("fire")
 	} else {
 		singleView = true
-		singleViewButton.style.color = "#eb6f92"
+		show(singleViewButton.firstElementChild as HTMLElement)
+		singleViewButton.lastElementChild.classList.add("fire")
 	}
 })
 

frontend/style/style.scss

@@ -129,7 +129,7 @@ textarea {
 	position: fixed !important;
 	top: 0;
 	right: 0;
-	padding: .7rem .7rem 0.5rem .7rem;
+	padding: 0.7rem 0.7rem 0.5rem 0.7rem;
 	background-color: $bg_surface;
 	border-bottom-left-radius: 10px;
 	z-index: 10;
@@ -221,6 +221,58 @@ a {
 		animation: rainbow 3s ease infinite !important;
 	}
 }
+.fire {
+	color: $love;
+}
+$fireColor: $love;
+$fireColorT: $love;
+$dur: 1s;
+$blur: 0.02em;
+$fireRad: 3em;
+$parts: 20;
+$partSize: 5em;
+
+.fireBody {
+	font-size: 3px;
+	filter: blur($blur);
+	-webkit-filter: blur($blur);
+	margin: 2em auto 0 auto;
+	position: absolute;
+	width: 6em;
+	height: 5em;
+	z-index: 0;
+	opacity: 0.5;
+}
+.particle {
+	animation: rise $dur ease-in infinite;
+	background-image: radial-gradient($fireColor 100%, $fireColorT 100%);
+	border-radius: 50%;
+	mix-blend-mode: screen;
+	opacity: 0;
+	position: absolute;
+	bottom: 0;
+	width: $partSize;
+	height: $partSize;
+	@for $p from 1 through $parts {
+		&:nth-of-type(#{$p}) {
+			animation-delay: $dur * random();
+			left: calc((100% - #{$partSize}) * #{($p - 1) / $parts});
+		}
+	}
+}
+@keyframes rise {
+	from {
+		opacity: 0;
+		transform: translateY(0) scale(1);
+	}
+	25% {
+		opacity: 1;
+	}
+	to {
+		opacity: 0;
+		transform: translateY(-10em) scale(0);
+	}
+}
 #messages {
 	position: absolute;
 	top: 0;