<script lang="ts" xmlns:svelte="http://www.w3.org/1999/html">
	import Download from './icons/Download.svelte';
	import Terminal from './icons/Terminal.svelte';
	import Check from './icons/Check.svelte';
	import PhotoSwipeLightbox from 'photoswipe/lightbox';
	import 'photoswipe';
	import 'photoswipe/style.css';
	import { onMount } from 'svelte';
	import Telegram from './icons/Telegram.svelte';
	import Mastodon from './icons/Mastodon.svelte';

	let downloadIsPressed = false;
	let checksumSwayIsPressed = false;
	let checksumRiverIsPressed = false;
	let checksumQtileIsPressed = false;

	let sway = {
		iso: "tileos-sway-1.3-desktop-amd64.iso",
		sha256: "tileos-sway-1.3-desktop-amd64.sha256.txt",
		md5: "tileos-sway-1.3-desktop-amd64.md5.txt"
	}
	let river = {
		iso: "tileos-river-1.3-desktop-amd64.iso",
		sha256: "tileos-river-1.3-desktop-amd64.sha256.txt",
		md5: "tileos-river-1.3-desktop-amd64.md5.txt"
	}
	let qtile = {
		iso: "tileos-qtile-1.3-beta-desktop-amd64.iso",
		sha256: "tileos-qtile-1.3-beta-desktop-amd64.sha256.txt",
		md5: "tileos-qtile-1.3-beta-desktop-amd64.md5.txt"
	}


	onMount(() => {
		let lightbox = new PhotoSwipeLightbox({
			gallery: '#sway-screenshots',
			children: 'a',
			pswpModule: () => import('photoswipe')
		});
		lightbox.init();
	});
	onMount(() => {
		document.body.addEventListener('click', (e) => {
			let classes = (e.target as HTMLElement).classList;
			if(classes.contains('download-all') == false) {
				downloadIsPressed = false;
			}

			if(classes.contains('checksum-sway') == false) {
				checksumSwayIsPressed = false;
			}
			if(classes.contains('checksum-river') == false) {
				checksumRiverIsPressed = false;
			}
		})
	});
</script>

<svelte:head>
	<title>TileOS</title>
</svelte:head>

<div class="flex justify-center items-center flex-col text-center bg-[#24273a]">
	<img alt="" height="216px" src="tileos.svg" width="216px" />
	<h1 class="text-3xl font-bold">TileOS</h1>
	<p class="m-5">Debian-based distribution with tiling window managers.</p>
	<div class="flex flex-row flex-wrap m-1 justify-center">
		<div class="relative inline-block text-left">
			<div>
				<button
					class="transition-colors p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] hover:bg-[#567ed1] download-all"
					on:click={() => {
						downloadIsPressed = !downloadIsPressed;
					}}
				>
					<Download className="mr-1.5 download-all"></Download>
					Downloads
				</button>
			</div>
			<div
				class="absolute left-0 mx-5 my-3 w-56 rounded-md bg-[#6993e9] {downloadIsPressed
					? 'transition-all ease-in duration-75 opacity-100 scale-100 visible'
					: 'opacity-0 transition-all ease-out duration-100 scale-95 invisible'}"
			>
				<div class="py-1">
					<!-- Sway/River/Qtile Download Links Under Logo -->
					<p class="block px-4 py-2 text-sm">
						<a href="https://downloads.tile-os.com/stable/sway/{sway.iso}"
							>TileOS Sway 1.2.1</a
						>
						<a
							class="underline"
							href="https://downloads.tile-os.com/stable/sway/{sway.sha256}"
							>(sha256)</a
						>
						<a
							class="underline"
							href="https://downloads.tile-os.com/stable/sway/{sway.md5}"
							>(md5)</a
						>
					</p>
					<p class="block px-4 py-2 text-sm">
						<a
							href="https://downloads.tile-os.com/stable/river/{river.iso}"
							>TileOS River 1.2.1</a
						>
						<a
							class="underline"
							href="https://downloads.tile-os.com/stable/river/{river.sha256}"
							>(sha256)</a
						>
						<a
							class="underline"
							href="https://downloads.tile-os.com/stable/river/{river.md5}"
							>(md5)</a
						>
					</p>
					<p class="block px-4 py-2 text-sm">
						<a
							href="https://downloads.tile-os.com/beta/qtile/{qtile.iso}"
							>TileOS Qtile 1.2 (Experimental)</a
						>
						<a
							class="underline"
							href="https://downloads.tile-os.com/beta/qtile/{qtile.sha256}"
							>(sha256)</a
						>
						<a
							class="underline"
							href="https://downloads.tile-os.com/beta/qtile/{qtile.md5}"
							>(md5)</a
						>
					</p>
				</div>
			</div>
		</div>
		<!-- Source Code Link -->
		<a class="transition-colors p-2.5 mx-5 my-3 rounded-md bg-[#73b4d1] hover:bg-[#497b91]" href="https://gitlab.com/tile-os">
			<Terminal className="mr-1.5"></Terminal>
			Source Code</a
		>
		<a class="p-2.5 mx-5 my-3 rounded-md bg-[#8aadf4] transition-colors hover:bg-[#5d7ec2]" href="https://t.me/tile_os">
			<Telegram className="mr-1.5"></Telegram>
			Telegram</a
		>
		<a class="p-2.5 mx-5 my-3 rounded-md bg-[#c6a0f6] transition-colors hover:bg-[#9a75c9]" href="https://mastodon.social/@tile_os">
			<Mastodon className="mr-1.5"></Mastodon>
			Mastodon</a
		>
	</div>
	<div class="flex flex-wrap flex-col p-8">
		<div class="m-5">
			<h2 class="font-bold text-2xl mb-3">Some of the features:</h2>

			<ul class="mb-8 list-disc text-left">
				<li>Stable and solid Debian base with some packages backported from Debian Testing;</li>
				<li>Fully pre-configured desktop based on a tiling window manager (or Wayland compositor);</li>
				<li>Fresh and stable graphics drivers (Mesa) backported from Debian Testing;</li>
				<li>Many device drivers and non-free firmwares are included in the base system;</li>
				<li>Included some performance optimizations as well as some system tweaks;</li>
				<li>Included additional repositories for installing programs not found in Debian, such as OnlyOffice, VirtualBox, Librewolf, Visual Studio Code and Brave;</li>
				<li>Ability to install additional software in the Calamares installer.</li>
			</ul>
		</div>
	</div>
</div>

<div>
	<div class="flex flex-col xl:flex-row p-8">
		<div class="flex-1 m-5">
			<h1 class="font-bold text-3xl mb-3">TileOS 1.2 "T-Rex" Sway Edition</h1>
			<p>
				TileOS Sway is a flagship edition featuring Sway - a lightweight and highly customizable
				Wayland compositor. It is designed to be compatible with the i3 window manager but is built
				using the Wayland display server protocol instead of X11. Sway is a full feature complete
				Wayland compositor, combined with awesome Catppuccin color scheme, Waybar panel and apps
				from NWG project (such as nwg-drawer, nwg-look, etc) it provides powerful, easy to use and
				very flexible desktop.
			</p>
			<div class="flex flex-row flex-wrap m-7 ml-0">
				<!-- Sway Download Link -->
				<a
					class="p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] ml-0 hover:bg-[#567ed1] transition-colors"
					href="https://downloads.tile-os.com/stable/sway/{sway.iso}"
				>
					<Download className="mr-1.5"></Download>
					Download</a
				>
				<div class="relative inline-block text-left">
					<div>
						<button
							class="p-2.5 mx-5 my-3 ml-0 rounded-md bg-[#8bd5ca] checksum-sway transition-colors hover:bg-[#65a89e]"
							on:click={() => {
								checksumSwayIsPressed = !checksumSwayIsPressed;
							}}
						>
							<Check className="mr-1.5 checksum-sway"></Check>
							Checksums
						</button>
					</div>
					<div
						class="absolute left-0 mx-5 my-3 ml-0 w-56 rounded-md bg-[#8bd5ca] {checksumSwayIsPressed
							? 'transition ease-in duration-75 opacity-100 scale-100'
							: 'opacity-0 transition ease-out duration-100 scale-95'}"
					>
						<div class="py-1">
							<!-- Checksum Download Links -->
							<p class="block px-4 py-2 text-sm">
								<a
									class=""
									href="https://downloads.tile-os.com/stable/sway/{sway.sha256}"
									>SHA256</a
								>
							</p>
							<p class="block px-4 py-2 text-sm">
								<a
									class=""
									href="https://downloads.tile-os.com/stable/sway/{sway.md5}"
									>MD5</a
								>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="flex-1 m-5">
			<!-- Screenshots -->
			<div class="flex justify-center flex-wrap" id="sway-screenshots">
				<a
					href="screenshots/sway/screen1.png"
					data-pswp-width="1920"
					data-pswp-height="980"
					target="_blank"
				>
					<img
						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
						src="screenshots/sway/screen1.png"
						alt=""
					/>
				</a>
				<a
					href="screenshots/sway/screen2.png"
					data-pswp-width="1920"
					data-pswp-height="980"
					target="_blank"
				>
					<img
						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
						src="screenshots/sway/screen2.png"
						alt=""
					/>
				</a>
				<a
					href="screenshots/sway/screen3.png"
					data-pswp-width="1920"
					data-pswp-height="980"
					target="_blank"
				>
					<img
						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
						src="screenshots/sway/screen3.png"
						alt=""
					/>
				</a>
			</div>
		</div>
	</div>
</div>

<div>
	<div class="flex flex-col xl:flex-row p-8">
		<div class="flex-1 m-5">
			<h1 class="font-bold text-3xl mb-3">TileOS 1.2 "T-Rex" River Edition</h1>
			<p>
				TileOS River Edtion featuring River - a minimalistic and lightweight dynamic Wayland
				compositor. It is designed to be simple, efficient, and easy to use, making it a great
				choice for users looking for a streamlined window management experience. River automatically
				arranges windows in a tiled layout, maximizing screen space and allowing users to easily
				switch between applications. It has a very simple configuration and low resource
				consumption, сombined with awesome Catppuccin color scheme, Waybar panel and apps from NWG
				project (such as nwg-drawer, nwg-look, etc) it provides powerful, easy to use and very
				flexible desktop.
			</p>
			<div class="flex flex-row flex-wrap m-7 ml-0">
				<!-- River Download Link -->
				<a
					class="p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] ml-0 hover:bg-[#567ed1] transition-colors"
					href="https://downloads.tile-os.com/stable/river/{river.iso}"
				>
					<Download className="mr-1.5"></Download>
					Download</a
				>
				<div class="relative inline-block text-left">
					<div>
						<button
							class="p-2.5 mx-5 my-3 ml-0 rounded-md bg-[#8bd5ca] checksum-river transition-colors hover:bg-[#65a89e]"
							on:click={() => {
								checksumRiverIsPressed = !checksumRiverIsPressed;
							}}
						>
							<Check className="mr-1.5 checksum-river"></Check>
							Checksums
						</button>
					</div>
					<div
						class="absolute left-0 mx-5 my-3 ml-0 w-56 rounded-md bg-[#8bd5ca] {checksumRiverIsPressed
							? 'transition ease-in duration-75 opacity-100 scale-100'
							: 'opacity-0 transition ease-out duration-100 scale-95'}"
					>
						<div class="py-1">
							<!-- Checksum Download Links -->
							<p class="block px-4 py-2 text-sm">
								<a
									class=""
									href="https://downloads.tile-os.com/stable/river/{river.sha256}"
									>SHA256</a
								>
							</p>
							<p class="block px-4 py-2 text-sm">
								<a
									class=""
									href="https://downloads.tile-os.com/stable/river/{river.md5}"
									>MD5</a
								>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="flex-1 m-5">
			<!-- Screenshots -->
			<div class="flex justify-center flex-wrap" id="sway-screenshots">
				<a
					href="screenshots/river/screen4.png"
					data-pswp-width="1920"
					data-pswp-height="980"
					target="_blank"
				>
					<img
						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
						src="screenshots/river/screen4.png"
						alt=""
					/>
				</a>
				<a
					href="screenshots/river/screen5.png"
					data-pswp-width="1920"
					data-pswp-height="980"
					target="_blank"
				>
					<img
						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
						src="screenshots/river/screen5.png"
						alt=""
					/>
				</a>
				<a
					href="screenshots/river/screen6.png"
					data-pswp-width="1920"
					data-pswp-height="980"
					target="_blank"
				>
					<img
						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
						src="screenshots/river/screen6.png"
						alt=""
					/>
				</a>
			</div>
		</div>
	</div>
</div>

<div>
	<div class="flex flex-col xl:flex-row p-8">
		<div class="flex-1 m-5">
			<h1 class="font-bold text-3xl mb-3">TileOS 1.2 "T-Rex" Qtile Edition (Experimental)</h1>
			<p>
				TileOS Qtile Edtion featuring Qtile - a highly
				customizable, dynamic tiling window manager
				written in Python. It supports multiple screens,
				window tiling, and floating modes, and comes with
				built-in support for X11 and Wayland. Qtile is
				well-suited for power users and developers who
				prefer a keyboard-driven workflow and enjoy
				tinkering with their system setup.
			</p>
			<div class="flex flex-row flex-wrap m-7 ml-0">
				<!-- Qtile Download Link -->
				<a
					class="p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] ml-0 hover:bg-[#567ed1] transition-colors"
					href="https://downloads.tile-os.com/beta/qtile/{qtile.iso}"
				>
					<Download className="mr-1.5"></Download>
					Download</a
				>
				<div class="relative inline-block text-left">
					<div>
						<button
							class="p-2.5 mx-5 my-3 ml-0 rounded-md bg-[#8bd5ca] checksum-river transition-colors hover:bg-[#65a89e]"
							on:click={() => {
								checksumQtileIsPressed = !checksumQtileIsPressed;
							}}
						>
							<Check className="mr-1.5 checksum-river"></Check>
							Checksums
						</button>
					</div>
					<div
						class="absolute left-0 mx-5 my-3 ml-0 w-56 rounded-md bg-[#8bd5ca] {checksumQtileIsPressed
							? 'transition ease-in duration-75 opacity-100 scale-100'
							: 'opacity-0 transition ease-out duration-100 scale-95'}"
					>
						<div class="py-1">
							<!-- Checksum Download Links -->
							<p class="block px-4 py-2 text-sm">
								<a
									class=""
									href="https://downloads.tile-os.com/beta/qtile/{qtile.sha256}"
									>SHA256</a
								>
							</p>
							<p class="block px-4 py-2 text-sm">
								<a
									class=""
									href="https://downloads.tile-os.com/beta/qtile/{qtile.md5}"
									>MD5</a
								>
							</p>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="flex-1 m-5">
			<!-- Screenshots -->
			<div class="flex justify-center flex-wrap" id="sway-screenshots">
				<a
					href="screenshots/qtile/1.png"
					data-pswp-width="1920"
					data-pswp-height="980"
					target="_blank"
				>
					<img
						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
						src="screenshots/qtile/1.png"
						alt=""
					/>
				</a>
				<a
					href="screenshots/qtile/2.png"
					data-pswp-width="1920"
					data-pswp-height="980"
					target="_blank"
				>
					<img
						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
						src="screenshots/qtile/2.png"
						alt=""
					/>
				</a>
				<a
					href="screenshots/qtile/3.png"
					data-pswp-width="1920"
					data-pswp-height="980"
					target="_blank"
				>
					<img
						class="m-4 h-[24wh] w-[48vw] lg:h-[16wh] lg:w-[32vw] xl:h-[8wh] xl:w-[16vw]"
						src="screenshots/qtile/3.png"
						alt=""
					/>
				</a>
			</div>
		</div>
	</div>
	<div class="flex flex-col lg:flex-row m-7">
		<div class="m-5 flex-1">
			<h2 class="text-2xl font-bold mb-3">System requirements:</h2>
			<ul class="list-disc">
				<li class="ml-[15.3px]">CPU: Dual-core CPU with 1.6 GHz</li>
				<li class="ml-[15.3px]">RAM: 1 GB (Recommended 2GB)</li>
				<li class="ml-[15.3px]">Storage Space: 20 GB</li>
				<li class="ml-[15.3px]">
					GPU: Any Intel or AMD GPU (Nvidia cards require additional settings and are <span
						class="font-bold">NOT</span
					> officially supported.)
				</li>
			</ul>
		</div>
		<div class="m-5 flex-1">
			<h2 class="text-2xl font-bold mb-3">Known Issues:</h2>
			<ul class="list-disc">
				<li class="ml-[15.3px]">
					Secure Boot is not officially supported and may break your system! Use it on your own
					risk!
				</li>
				<li class="ml-[15.3px]">
					The installer currently has problems installing on encrypted partitions.
				</li>
				<li class="ml-[15.3px]">
					The installer currently has installation issues when selecting a non-Latin keyboard layout
					(e.g. Russian). You need to choose English keyboard layout while installing the system
					(system region does not matter and you can choose one that you need).
				</li>
				<li class="ml-[15.3px]">Having boot problems on VMware virtual machines.</li>
			</ul>
		</div>
	</div>
</div>
<footer>
	<div class="flex flex-col p-12 justify-center items-center text-center text-sm bg-[#181926]">
		<p>© 2024 TileOS Developers</p>
		<p>TileOS is not affiliated with Debian. Debian is a registered trademark owned by Software in the Public Interest, Inc.</p>
	</div>
</footer>
