beatufitull front end for ozone modration ,, wit catpucoin and ebergarden !
ozone
moderation
arivertisemnts ((peak capitalism))
+44
+31
src/components/Advertisement.svelte
+31
src/components/Advertisement.svelte
···
1
+
<script lang="ts">
2
+
import { XIcon } from 'lucide-svelte';
3
+
import { onMount } from 'svelte';
4
+
import { ads } from '$lib/ads';
5
+
6
+
const { className } = $props<{
7
+
className?: string;
8
+
}>();
9
+
</script>
10
+
11
+
<div class={`relative ${className ?? ''}`} class:hidden={!$ads}>
12
+
<iframe
13
+
src="https://ad.ari.lt/ads/embed?from="
14
+
sandbox="allow-popups allow-popups-to-escape-sandbox"
15
+
referrerpolicy="no-referrer"
16
+
title="An advertisement showing a silly image and author information."
17
+
style="border:none;max-width:100%"
18
+
width="722"
19
+
height="98"
20
+
loading="lazy"
21
+
>
22
+
</iframe>
23
+
<button
24
+
class="absolute top-0 right-0 cursor-pointer bg-black text-ctp-subtext0 hover:bg-ctp-surface0"
25
+
onclick={() => {
26
+
ads.toggle(false);
27
+
}}
28
+
>
29
+
<XIcon />
30
+
</button>
31
+
</div>
+13
src/components/AdvertisementOverlay.svelte
+13
src/components/AdvertisementOverlay.svelte
···
1
+
<script>
2
+
import { ads } from '$lib/ads';
3
+
import Advertisement from './Advertisement.svelte';
4
+
</script>
5
+
6
+
<div
7
+
class="fixed bottom-0 left-1/2 w-full max-w-2xl -translate-x-1/2 transform bg-ctp-surface1/60"
8
+
class:hidden={!$ads}
9
+
>
10
+
<div class="mx-auto mb-5 px-2 pt-3">
11
+
<Advertisement />
12
+
</div>
13
+
</div>