feat: download page wip

src/app.css

@@ -38,13 +38,13 @@ body {
     --white: #fff;
     --accent-color: #9fd5ff;
     --accent-color-two: hsl(207, 65%, 90%);
-    --bg-color: #1a1c1e;
+    --bg-color: hsl(240, 5%, 11%);
     --grey-one: #252b31;
     --grey-two: #28313b;
     --grey-three: #373e4d;
     --grey-four: #1b1e29;
     --grey-five: hsl(208, 30%, 75%);
-    --grey-six: hsla(223, 17%, 16%, 0.655);
+    --grey-six: hsla(223, 14%, 15%, 0.655);
     --grey-seven: #535563;
     --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }

src/data/api/index.ts

@@ -120,13 +120,15 @@ export class API<T> implements Readable<T> {
 }
 
 // API Endpoints
-import type { Patch, Repository } from '../types';
+import type { Patch, Repository, Tool } from '../types';
 import { dev_log } from "$lib/utils";
 
 export type ContribData = { repositories: Repository[] };
 export type PatchesData = { patches: Patch[]; packages: string[] };
+export type ToolsData = { tools: Tool[] };
 
 export const contributors = new API<ContribData>("contributors", undefined, { repositories: [] });
+export const tools = new API<ToolsData>("tools", undefined, { tools: [] } )
 
 export const patches = new API<PatchesData>("patches", patches => {
 	let packages: string[] = [];

src/data/types.ts

@@ -32,3 +32,13 @@ export interface PatchOption {
   required:    boolean;
   choices:     string[];
 }
+
+export interface Tool {
+  repository: string
+  version: string
+  timestamp: string
+  name: string
+  size?: string
+  browser_download_url: string
+  content_type: string
+}

src/lib/components/atoms/Button.svelte

@@ -2,13 +2,13 @@
 	export let kind = 'secondary';
 	$: type = 'button-' + kind;
 	export let href = '#';
-	export let maxWidth = 'false';
+	export let maxWidth = false;
 	export let icon = '';
 </script>
 
-<a {href}>
-	<div class={type} style="width: {maxWidth ? '100%' : 'max-width'}">
-		<img src="icons/{icon}.svg" alt={icon} />
+<a {href} rel="noreferrer">
+	<div class={type} style="width: {maxWidth ? '100%' : 'max-content'}">
+		<img src="../icons/{icon}.svg" alt={icon} />
 		<slot />
 	</div>
 </a>

src/routes/download/+page.svelte

@@ -1,8 +1,45 @@
-<script>
-    // import Button from "$lib/components/atoms/Button.svelte";
+<script lang="ts">
+	import type { PageData } from './$types';
+	import { tools as api_tools } from '../../data/api';
+	import Button from '$lib/components/atoms/Button.svelte';
+	import Footer from '$lib/components/molecules/Footer.svelte';
+
+	export let data: PageData;
+	api_tools.init(data);
+	$: tools = data.tools;
 </script>
 
 <div class="wrapper">
-    <!-- <Button icon="download" kind="primary">Download Manager v0.0.32</Button>
-    <Button>Are you a nerd?</Button> -->
+	<h1>ReVanced Manager</h1>
+	<h6>Patch your favourite apps, on-device.</h6>
+	<Button kind="primary" icon="download" href={tools[5].browser_download_url}>{tools[5].version}</Button>
+	<img src="../manager_two.png" alt="Manager Screenshot"/>
 </div>
+
+<Footer {...data}/>
+
+<style>
+
+	div {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	h1 {
+		font-size: 2.25rem;
+		font-weight: 600;
+		text-align: center;
+		color: var(--accent-color);
+	}
+
+	h6 {
+		text-align: center;
+		margin-bottom: 1.5rem;
+	}
+
+	img { 
+		margin-top: 2.5rem;
+		margin-bottom: 2.5rem;
+		width: 25rem;
+	}
+</style>

src/routes/download/+page.ts

@@ -0,0 +1,5 @@
+import type { PageLoad } from './$types';
+
+import { tools } from '../../data/api';
+
+export const load: PageLoad = tools.page_load_impl();