Updated images, added descriptions for sway and river, checksum buttons

This commit is contained in:
IndexZeroZzz 2024-02-05 17:01:10 +03:00
parent 085dc388a1
commit ef4c6a23fa
4 changed files with 107 additions and 15 deletions

View file

@ -1,30 +1,52 @@
<script lang="ts">
import Download from './icons/Download.svelte';
import AltDownload from './icons/AltDownload.svelte';
import Terminal from './icons/Terminal.svelte';
import Download from './icons/Download.svelte';
import AltDownload from './icons/AltDownload.svelte';
import Terminal from './icons/Terminal.svelte';
import Check from './icons/Check.svelte';
let downloadIsPressed = false;
let downloadIsPressed = false;
let checksumSwayIsPressed = false;
let checksumRiverIsPressed = false;
</script>
<div class="flex justify-center items-center flex-col text-center bg-[#2a2b3c]">
<img src="tileos.svg" alt="" height="216px" width="216px">
<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>
<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="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>
<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>
<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>
@ -32,13 +54,76 @@ let downloadIsPressed = false;
<div class="flex flex-col lg:flex-row p-8">
<div class="flex-1 m-5">
<h1 class="font-bold text-3xl mb-3">TileOS Sway BETA</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi cupiditate incidunt iste minima pariatur repellendus. Architecto atque culpa esse illum inventore laboriosam nihil provident quaerat quasi sequi! Amet assumenda culpa, doloremque eligendi hic id laborum, magni, obcaecati perspiciatis possimus quasi repudiandae sapiente vel! Dolorem libero neque quam quasi sit, voluptatum!</p>
<div class="flex my-10">
<a class="border-2 p-2.5 rounded-md bg-[#6993e9]" 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>
<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">
<img src="sway.png" alt="">
<img alt="" src="sway.png">
</div>
</div>
</div>
<div>
<div class="flex flex-col lg: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">
<img alt="" src="river.png">
</div>
</div>
</div>

View file

@ -0,0 +1,7 @@
<script lang="ts">
export let className: string = ""
</script>
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 inline {className}">
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
</svg>

BIN
static/river.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 344 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 591 KiB

After

Width:  |  Height:  |  Size: 642 KiB