From ea8d9978a62bceb53ffda9e40067995059978c4f Mon Sep 17 00:00:00 2001
From: MathMan05 <mathmanrm@gmail.com>
Date: Tue, 29 Apr 2025 15:20:02 -0500
Subject: [PATCH] default icon for errored images

---
 src/webpage/icons/sad.svg  |  1 +
 src/webpage/style.css      | 13 +++++++++++++
 src/webpage/utils/utils.ts |  3 +++
 3 files changed, 17 insertions(+)
 create mode 100644 src/webpage/icons/sad.svg

diff --git a/src/webpage/icons/sad.svg b/src/webpage/icons/sad.svg
new file mode 100644
index 0000000..f516f0b
--- /dev/null
+++ b/src/webpage/icons/sad.svg
@@ -0,0 +1 @@
+<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg"><circle style="fill:#272831;fill-opacity:1;stroke:#fe0000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none" cx="24" cy="24" r="20"/><path style="fill:none;fill-rule:evenodd;stroke:#000;stroke-width:4;stroke-linecap:round;stroke-dasharray:none" d="M3 58C2 48 7 38 15 32" transform="scale(.83333) rotate(66 21 59)"/><path style="fill:#1a1a1a;fill-opacity:1;stroke:#000;stroke-width:3.33334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M18 12v10M30 12v10"/></svg>
\ No newline at end of file
diff --git a/src/webpage/style.css b/src/webpage/style.css
index 19f6b4a..44a8ac8 100644
--- a/src/webpage/style.css
+++ b/src/webpage/style.css
@@ -3039,6 +3039,19 @@ fieldset input[type="radio"] {
 	font-size: 0.2in;
 	padding: 0 0.1in;
 }
+img.error {
+	position: relative;
+}
+img.error::after {
+	background: var(--secondary-bg) url("/icons/sad.svg");
+	background-size: contain;
+	content: "";
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
 .gifBox {
 	img {
 		max-width: 196px;
diff --git a/src/webpage/utils/utils.ts b/src/webpage/utils/utils.ts
index d027640..9fa1347 100644
--- a/src/webpage/utils/utils.ts
+++ b/src/webpage/utils/utils.ts
@@ -599,6 +599,9 @@ export function createImg(
 	const settings =
 		localStorage.getItem("gifSetting") || ("hover" as "hover") || "always" || "never";
 	const img = document.createElement("img");
+	img.addEventListener("error", () => {
+		img.classList.add("error");
+	});
 	elm ||= img;
 	if (src && isAnimated(src)) {
 		img.crossOrigin = "anonymous";