Update branding to show support for Ukraine

res/include/img/background_patterns/create_dark.sh

@@ -7,5 +7,6 @@ convert checker_dwarf.png -brightness-contrast 80x0 checker_dwarf_light.png
 convert checker_developers.png -brightness-contrast 80x0 checker_developers_light.png
 convert checker_halloween.png -brightness-contrast 80x0 checker_halloween_light.png
 convert checker_christmas.png -brightness-contrast 80x0 checker_christmas_light.png
+convert checker_ukraine.png -brightness-contrast 80x0 checker_ukraine_light.png
 
 optipng *.png

res/include/style/layout.css

@@ -63,7 +63,7 @@ header, footer, .checkers {
 	background-image: url("{{.BackgroundPattern}}");
 	background-color: var(--layer_1_color);
 	background-repeat: repeat;
-	background-blend-mode: luminosity;
+	/* background-blend-mode: luminosity; */
 }
 header, footer {
 	box-shadow: inset 1px 1px 8px 0 var(--shadow_color);

svelte/src/file_viewer/FileViewer.svelte

@@ -20,6 +20,7 @@ import GalleryView from "./GalleryView.svelte";
 import Spinner from "../util/Spinner.svelte";
 import Downloader from "./Downloader.svelte";
 import CustomBanner from "./CustomBanner.svelte";
+import UkrainePopup from "./UkrainePopup.svelte";
 
 let loading = true
 let embedded = false
@@ -400,6 +401,10 @@ const keyboard_event = evt => {
 		{/if}
 	</div>
 
+	{#if ads_enabled}
+		<UkrainePopup></UkrainePopup>
+	{/if}
+
 	{#if is_list && view === "file"}
 		<ListNavigator
 			bind:this={list_navigator}
@@ -591,14 +596,6 @@ const keyboard_event = evt => {
 		<AdLeaderboard></AdLeaderboard>
 	{:else if custom_footer}
 		<CustomBanner src={custom_footer}></CustomBanner>
-	{:else if !window.viewer_data.user_ads_enabled && !embedded}
-		<div style="text-align: center; line-height: 1.3em; font-size: 13px;">
-			Thank you for supporting pixeldrain!
-		</div>
-	{:else if !ads_enabled && !embedded}
-		<div style="text-align: center; line-height: 1.3em; font-size: 13px;">
-			The uploader of this file disabled advertisements. You can do the same for <a href="/#pro">only €2 per month</a>!
-		</div>
 	{/if}
 
 	<Modal bind:this={details_window} on:is_visible={e => {details_visible = e.detail}} title="File details" width="1200px">
@@ -621,7 +618,9 @@ const keyboard_event = evt => {
 		<ReportWindow file={file} list={list}></ReportWindow>
 	</Modal>
 
-	<IntroPopup target={button_home}></IntroPopup>
+	{#if ads_enabled}
+		<IntroPopup target={button_home}></IntroPopup>
+	{/if}
 
 	<Downloader bind:this={downloader} file={file} list={list}></Downloader>
 </div>

svelte/src/file_viewer/UkrainePopup.svelte

@@ -0,0 +1,45 @@
+<script>
+import { onMount } from "svelte";
+import { fade } from "svelte/transition";
+
+let visible = false
+
+const close = () => {
+	localStorage.setItem("ukraine_popup_dismissed", "🇺🇦")
+	visible = false
+}
+onMount(() => {
+	if (localStorage.getItem("ukraine_popup_dismissed") !== "🇺🇦") {
+		visible = true
+	}
+})
+</script>
+
+{#if visible}
+	<div in:fade out:fade class="notice highlight_yellow">
+		<div class="text">
+			🇺🇦 Russia has invaded Ukraine and is murdering its citizens! 🇺🇦<br/>
+			There are a number of ways you can help:
+			<a href="https://helpukrainewin.org/" rel="noreferrer" target="_blank">Click here for more information</a>.
+		</div>
+		<button on:click={close} class="close button_highlight round">
+			<i class="icon">close</i>
+		</button>
+	</div>
+{/if}
+
+<style>
+.notice {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+.text {
+	display: inline;
+	flex: 1 1 auto;
+}
+.close {
+	flex: 0 0 auto;
+	margin: 0;
+}
+</style>

webcontroller/user_style.go

@@ -180,7 +180,8 @@ func (s pixeldrainStyleSheet) Background(tpl *template.Template) template.URL {
 	} else if month == time.December && (day == 25 || day == 26 || day == 27) {
 		file = "checker_christmas"
 	} else {
-		file = fmt.Sprintf("checker%d", now.UnixNano()%18)
+		file = "checker_ukraine"
+		// file = fmt.Sprintf("checker%d", now.UnixNano()%18)
 	}
 
 	if s.Light {