feat: Add DMCA protection badge

.env.example

@@ -1,2 +1,3 @@
 RV_API_URL=https://api.revanced.app
 RV_GOOGLE_TAG_MANAGER_ID=
+RV_DMCA_GUID=

.github/workflows/deploy.yml

@@ -22,6 +22,10 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Build
+        env:
+          RV_API_URL: ${{ vars.RV_API_URL }}
+          RV_GOOGLE_TAG_MANAGER_ID: ${{ vars.RV_GOOGLE_TAG_MANAGER_ID }}
+          RV_DMCA_GUID: ${{ vars.RV_DMCA_GUID }}
         run: |
           npm i
           npm run build

src/layout/Footer/FooterHost.svelte

@@ -8,7 +8,20 @@
 	import Query from '$lib/components/Query.svelte';
 	import FooterSection from './FooterSection.svelte';
 
+	import { RV_DMCA_GUID } from '$env/static/public';
+	import { onMount } from 'svelte';
+
 	const aboutQuery = createQuery(['about'], queries.about);
+
+	onMount(() => {
+		// DMCA Protection Badge
+		var c = document.createElement('link');
+		c.type = 'text/css';
+		c.rel = 'stylesheet';
+		c.href = 'https://images.dmca.com/badges/dmca.css?ID=' + RV_DMCA_GUID;
+		var h = document.getElementsByTagName('head')[0];
+		h.appendChild(c);
+	});
 </script>
 
 <!-- squiggly divider line -->
@@ -64,15 +77,28 @@
 			</Query>
 		</section>
 	</div>
-	<Query query={aboutQuery} let:data>
-		{#if data}
 	<div class="footer-bottom">
 		<div id="logo-name"><span>Re</span>Vanced</div>
 		<a href="/donate"><div>Donate</div></a>
+		<Query query={aboutQuery} let:data>
+			{#if data}
 				<a href="mailto:{data.about.contact.email}"><div>Email</div></a>
-			</div>
 			{/if}
 		</Query>
+		<!-- DMCA Protection Badge -->
+		<a
+			href="//www.dmca.com/Protection/Status.aspx?ID={RV_DMCA_GUID}"
+			title="DMCA.com Protection Status"
+			class="dmca-badge"
+		>
+			<img
+				src="https://images.dmca.com/Badges/dmca-badge-w150-5x1-08.png?ID={RV_DMCA_GUID}"
+				alt="DMCA.com Protection Status"
+			/></a
+		>
+		<script src="https://images.dmca.com/Badges/DMCABadgeHelper.min.js">
+		</script>
+	</div>
 </footer>
 
 <style>
@@ -96,6 +122,11 @@
 		align-items: center;
 	}
 
+	.dmca-badge {
+		display: flex;
+		align-items: center;
+	}
+
 	@media screen and (max-width: 768px) {
 		.footer-bottom {
 			flex-wrap: wrap;
@@ -143,7 +174,7 @@
 		align-items: flex-start;
 	}
 
-	img {
+	.logo-image {
 		height: 2.5rem;
 	}