179 lines
No EOL
8.4 KiB
Svelte
179 lines
No EOL
8.4 KiB
Svelte
<script lang="ts">
|
||
import Download from './icons/Download.svelte';
|
||
import AltDownload from './icons/AltDownload.svelte';
|
||
import Terminal from './icons/Terminal.svelte';
|
||
import Check from './icons/Check.svelte';
|
||
import PhotoSwipeLightbox from 'photoswipe/lightbox';
|
||
import PhotoSwipe from 'photoswipe';
|
||
import 'photoswipe/style.css';
|
||
import { onMount } from 'svelte';
|
||
|
||
let downloadIsPressed = false;
|
||
let checksumSwayIsPressed = false;
|
||
let checksumRiverIsPressed = false;
|
||
|
||
onMount(() => {
|
||
let lightbox = new PhotoSwipeLightbox({
|
||
gallery: '#sway-screenshots',
|
||
children: 'a',
|
||
pswpModule: () => import('photoswipe'),
|
||
});
|
||
lightbox.init();})
|
||
</script>
|
||
|
||
<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">Tile OS</h1>
|
||
<p>Debian-based distribution with tiling window managers.</p>
|
||
|
||
<div class="flex flex-row flex-wrap m-7 justify-center">
|
||
<div class="relative inline-block text-left">
|
||
<div>
|
||
<button class="border-2 p-2.5 mx-5 my-3 rounded-md bg-[#6993e9]"
|
||
on:click={() => {downloadIsPressed = !downloadIsPressed; console.log(downloadIsPressed)}}>
|
||
<Download className="mr-1.5"></Download>
|
||
Download
|
||
</button>
|
||
</div>
|
||
<div
|
||
class="absolute left-0 mx-5 my-3 w-56 rounded-md bg-[#6993e9] {downloadIsPressed ? 'transition ease-in duration-75 opacity-100 scale-100' : 'opacity-0 transition ease-out duration-100 scale-95'}">
|
||
<div class="py-1">
|
||
<p class="block px-4 py-2 text-sm"><a
|
||
href="https://downloads.tile-os.com/beta/sway/tileos-sway-1.0-desktop-beta-amd64.iso">Sway BETA</a> <a
|
||
class="underline"
|
||
href="https://downloads.tile-os.com/beta/sway/tileos-sway-1.0-desktop-beta-amd64.sha256.txt">(sha256)</a> <a
|
||
class="underline" href="https://downloads.tile-os.com/beta/sway/tileos-sway-1.0-desktop-beta-amd64.md5.txt">(md5)</a>
|
||
</p>
|
||
<p class="block px-4 py-2 text-sm"><a
|
||
href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.iso">River BETA</a> <a
|
||
class="underline"
|
||
href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.sha256.txt">(sha256)</a>
|
||
<a class="underline"
|
||
href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.md5.txt">(md5)</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<a class="border-2 p-2.5 mx-5 my-3 rounded-md bg-[#8f96ee]" href="http://localhost:8080">
|
||
<AltDownload className="mr-1.5"></AltDownload>
|
||
Alternative Downloads</a>
|
||
<a class="border-2 p-2.5 mx-5 my-3 rounded-md bg-[#73b4d1]" href="https://gitlab.com/tile-os">
|
||
<Terminal className="mr-1.5"></Terminal>
|
||
Source Code</a>
|
||
</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 Sway BETA</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">
|
||
<a class="border-2 p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] ml-0"
|
||
href="https://downloads.tile-os.com/beta/sway/tileos-sway-1.0-desktop-beta-amd64.iso">
|
||
<Download className="mr-1.5"></Download>
|
||
Download TileOS Sway</a>
|
||
<div class="relative inline-block text-left">
|
||
<div>
|
||
<button class="border-2 p-2.5 mx-5 my-3 ml-0 rounded-md bg-[#8bd5ca]"
|
||
on:click={() => {checksumSwayIsPressed = !checksumSwayIsPressed; console.log(checksumSwayIsPressed)}}>
|
||
<Check className="mr-1.5"></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">
|
||
<p class="block px-4 py-2 text-sm"><a
|
||
class=""
|
||
href="https://downloads.tile-os.com/beta/sway/tileos-sway-1.0-desktop-beta-amd64.sha256.txt">SHA256</a>
|
||
</p>
|
||
<p class="block px-4 py-2 text-sm">
|
||
<a class=""
|
||
href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.md5.txt">MD5</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 m-5">
|
||
<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 River BETA</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">
|
||
<a class="border-2 p-2.5 mx-5 my-3 rounded-md bg-[#6993e9] ml-0"
|
||
href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.iso">
|
||
<Download className="mr-1.5"></Download>
|
||
Download TileOS River</a>
|
||
<div class="relative inline-block text-left">
|
||
<div>
|
||
<button class="border-2 p-2.5 mx-5 my-3 ml-0 rounded-md bg-[#8bd5ca]"
|
||
on:click={() => {checksumRiverIsPressed = !checksumRiverIsPressed; console.log(checksumRiverIsPressed)}}>
|
||
<Check className="mr-1.5"></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">
|
||
<p class="block px-4 py-2 text-sm"><a
|
||
class=""
|
||
href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.sha256.txt">SHA256</a>
|
||
</p>
|
||
<p class="block px-4 py-2 text-sm">
|
||
<a class=""
|
||
href="https://downloads.tile-os.com/beta/river/tileos-river-1.0-desktop-beta-amd64.md5.txt">MD5</a></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="flex-1 m-5">
|
||
<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> |