Sponsor banner

.github/FUNDING.yml

@@ -1 +1 @@
-custom: paypal.me/levminer
+github: Levminer

interface/components/banners.svelte

@@ -0,0 +1,42 @@
+<div class="sponsorAlert hidden z-10 w-full bg-popup-magenta">
+	<div class="container mx-auto flex items-center justify-between px-6 py-4">
+		<div class="flex items-center justify-center gap-3">
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" /></svg>
+
+			<p class="updateText mx-1 text-lg font-bold">Authme is a free and open source project. To keep Authme free forever please consider supporting the project by donating.</p>
+
+			<button type="button" class="installUpdate smallButton" on:click={sponsor}>
+				<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z" /></svg>
+				<span>Sponsor</span>
+			</button>
+		</div>
+
+		<button class="updateClose transform duration-200 hover:text-black" on:click={hidePopup}>
+			<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+			</svg>
+		</button>
+	</div>
+</div>
+
+<script>
+	import { settings } from "@stores/settings"
+	import { open } from "@utils/navigate"
+	import { onMount } from "svelte"
+
+    onMount(() => {
+		if ($settings.banners.sponsor === null) {
+			document.querySelector(".sponsorAlert").style.display = "block"
+		}
+	})
+
+	const sponsor = () => {
+        open("https://github.com/sponsors/Levminer?frequency=recurring")
+    }
+
+	const hidePopup = () => {
+		document.querySelector(".sponsorAlert").style.display = "none"
+
+        $settings.banners.sponsor = new Date()
+	}
+</script>

interface/layout/app.svelte

@@ -12,6 +12,8 @@
 			<UpdateAlert />
 		{/if}
 
+		<Banners />
+
 		<div class="top" />
 
 		<RouteTransition>
@@ -48,6 +50,7 @@
 	import Confirm from "../windows/confirm/confirm.svelte"
 	import Navigation from "../components/navigation.svelte"
 	import Edit from "../windows/edit/edit.svelte"
+	import Banners from "@components/banners.svelte"
 
 	onMount(() => {
 		// Debug info

interface/stores/settings.ts

@@ -41,6 +41,10 @@ const defaultSettings: LibSettings = {
 		settings: "None",
 		exit: "CmdOrCtrl+Shift+d",
 	},
+
+	banners: {
+		sponsor: null,
+	},
 }
 
 // Setup auto launch on first start
@@ -59,6 +63,14 @@ settings.subscribe((data) => {
 		data.settings.language = 0
 	}
 
+	if (data.banners === undefined) {
+		data.banners = {}
+	}
+
+	if (data.banners.sponsor === undefined) {
+		data.banners.sponsor = null
+	}
+
 	localStorage.setItem("settings", JSON.stringify(data))
 })
 

interface/utils/language/en.ts

@@ -67,7 +67,7 @@ export const localeEN = {
 		noSearchResultsFound: "No search results found",
 		noSearchResultsFoundText: "Not found search results for",
 		dialog: {
-			noSaveFileFound: "No save file found. \n\nGo to the codes or the import page and import your codes!",
+			noSaveFileFound: "No save file found. \n\nGo to the import page and import your codes!",
 			codesImported: "Codes imported. \n\nYou can edit your codes on the edit page.",
 		},
 	},

interface/utils/types.d.ts

@@ -79,6 +79,10 @@ declare global {
 			settings: string
 			exit: string
 		}
+
+		banners: {
+			sponsor?: Date
+		}
 	}
 
 	/** Query selector element types */