blackbirdchess-website-wip/src/routes/+page.svelte

<div class="container h-full">
	<div class="h-full flex flex-row justify-center items-center">
		<div class="content flex flex-col items-center">
			{#if Math.floor(Math.random() * 10) >= 5}
				<img src="{bird}" alt="bird" class="image p-3">
			{:else}
				<iframe class="image p-3" src="https://www.youtube-nocookie.com/embed/Man4Xw8Xypo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
			{/if}

			{#if $page.url.hostname.endsWith('.ru')}
				<p class="text-center text-3xl p-3">Мы строим нечто великое</p>
			{:else if $page.url.hostname.endsWith('.be')}
				<p class="text-center text-3xl p-3">We bouwen aan iets groots</p>
				<p class="text-center text-3xl p-3">Nous construisons quelque chose de grand</p>
				<p class="text-center text-3xl p-3">Wir bauen etwas Großes auf</p>
			{:else}
				<p class="text-center text-3xl p-3">We are building something great</p>
			{/if}
			<p class="text-center text-blue-400 text-sm hover:underline"><a href="https://git.jeroened.be/blackbirdchess" target="_blank">Git-repositories</a></p>
		</div>
	</div>
</div>

<script>
	import bird from '$lib/images/bird.png';
	import { page } from '$app/stores';
</script>

<style lang="scss">
	.image {
		width: 300px;
		height: 200px;

		@media (min-width: 640px) {
			width: 600px;
			height: 400px;
		}
	}
</style>