mirror of
https://github.com/revanced/revanced-website.git
synced 2025-04-29 22:24:31 +02:00
fix: move download page components to home
This commit is contained in:
PalmDevs
parent
c54c69b5ac
commit
d4a5f87760
@ -47,7 +47,6 @@
|
||||
<section class="links-container">
|
||||
<FooterSection title="Pages">
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/download">Download</a></li>
|
||||
<li><a href="/patches">Patches</a></li>
|
||||
<li><a href="/contributors">Contributors</a></li>
|
||||
<li><a href="/donate">Donate</a></li>
|
||||
|
||||
@ -1,7 +1,57 @@
|
||||
<script>
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
<script lang="ts">
|
||||
import Button from "$lib/components/Button.svelte";
|
||||
import { queries } from "$data/api";
|
||||
import { onMount } from "svelte";
|
||||
import { createQuery } from "@tanstack/svelte-query";
|
||||
import Query from "$lib/components/Query.svelte";
|
||||
import Dialogue from "$lib/components/Dialogue.svelte";
|
||||
|
||||
const query = createQuery(["manager"], queries.manager);
|
||||
|
||||
let warning: string;
|
||||
let warningDialogue = false;
|
||||
|
||||
let userAgent: string;
|
||||
let isAndroid: boolean;
|
||||
let androidVersionMatch: RegExpExecArray | null;
|
||||
let androidVersion: number;
|
||||
let managerUrl: string;
|
||||
|
||||
onMount(() => {
|
||||
userAgent = navigator.userAgent;
|
||||
androidVersionMatch = /Android\s([\d.]+)/i.exec(userAgent);
|
||||
androidVersion = androidVersionMatch ? parseInt(androidVersionMatch[1]) : 0;
|
||||
isAndroid = !!androidVersion;
|
||||
});
|
||||
|
||||
query.subscribe((val) => {
|
||||
if (val.data) managerUrl = val.data.assets[0].browser_download_url;
|
||||
});
|
||||
|
||||
function handleClick() {
|
||||
if (!isAndroid) {
|
||||
warning = "Your device is not running Android.";
|
||||
warningDialogue = true;
|
||||
} else if (androidVersion < 8) {
|
||||
warning = `Your device is running ${androidVersion}. ReVanced Manager only supports Android versions 8 and above.`;
|
||||
warningDialogue = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Dialogue bind:modalOpen={warningDialogue}>
|
||||
<svelte:fragment slot="title">Device unsupported</svelte:fragment>
|
||||
<svelte:fragment slot="description">{warning} Do you still want to download ReVanced Manager?</svelte:fragment>
|
||||
<svelte:fragment slot="buttons">
|
||||
<Button
|
||||
type="text"
|
||||
href={managerUrl}
|
||||
on:click={() => (warningDialogue = false)}>Download</Button
|
||||
>
|
||||
<Button type="text" on:click={() => (warningDialogue = false)}>Cancel</Button>
|
||||
</svelte:fragment>
|
||||
</Dialogue>
|
||||
|
||||
<section class="hero">
|
||||
<div class="hero-text">
|
||||
<h1>Continuing the <br />legacy of <span>Vanced.</span></h1>
|
||||
@ -9,7 +59,13 @@
|
||||
Customize your mobile experience through ReVanced <br /> by applying patches to your applications.
|
||||
</p>
|
||||
<div class="hero-buttons">
|
||||
<Button icon="download" type="filled" href="download">Download</Button>
|
||||
<Button
|
||||
on:click={handleClick}
|
||||
type="filled"
|
||||
icon="download"
|
||||
>
|
||||
Download Manager
|
||||
</Button>
|
||||
<Button icon="docs" type="tonal" href="patches">View patches</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -72,7 +72,6 @@
|
||||
<div id="main-navigation">
|
||||
<ul class="nav-buttons">
|
||||
<Navigation href="/" label="Home">Home</Navigation>
|
||||
<Navigation queryKey="manager" href="/download" label="Download">Download</Navigation>
|
||||
<Navigation queryKey="patches" href="/patches" label="Patches">Patches</Navigation>
|
||||
<Navigation queryKey="repositories" href="/contributors" label="Contributors">
|
||||
Contributors
|
||||
|
||||
@ -1,153 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { queries } from '$data/api';
|
||||
import { fly } from 'svelte/transition';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
|
||||
import { createQuery } from '@tanstack/svelte-query';
|
||||
|
||||
import manager_screenshot from '$images/manager.png?format=avif;webp;png&as=picture';
|
||||
|
||||
import Head from '$lib/components/Head.svelte';
|
||||
import Query from '$lib/components/Query.svelte';
|
||||
import Button from '$lib/components/Button.svelte';
|
||||
import Footer from '$layout/Footer/FooterHost.svelte';
|
||||
import Picture from '$lib/components/Picture.svelte';
|
||||
import Dialogue from '$lib/components/Dialogue.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
const query = createQuery(['manager'], queries.manager);
|
||||
|
||||
let warning: string;
|
||||
let warningDialogue = false;
|
||||
|
||||
let userAgent: string;
|
||||
let isAndroid: boolean;
|
||||
let androidVersionMatch: RegExpExecArray | null;
|
||||
let androidVersion: number;
|
||||
|
||||
onMount(() => {
|
||||
userAgent = navigator.userAgent;
|
||||
androidVersionMatch = /Android\s([\d.]+)/i.exec(userAgent);
|
||||
androidVersion = androidVersionMatch ? parseInt(androidVersionMatch[1]) : 0;
|
||||
isAndroid = !!androidVersion;
|
||||
});
|
||||
|
||||
function handleClick() {
|
||||
if (!isAndroid) {
|
||||
warning = 'Your device is not running Android.';
|
||||
warningDialogue = true;
|
||||
} else if (androidVersion < 8) {
|
||||
warning = `Your device is running ${androidVersion}. ReVanced only supports Android versions 8 and above.`;
|
||||
warningDialogue = true;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<Head
|
||||
title="Download ReVanced"
|
||||
description="Download ReVanced Manager to patch your favourite apps, right on your device."
|
||||
schemas={[
|
||||
{
|
||||
'@context': 'https://schema.org',
|
||||
'@type': 'BreadcrumbList',
|
||||
itemListElement: [
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 1,
|
||||
name: 'Home',
|
||||
item: 'https://revanced.app/'
|
||||
},
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 2,
|
||||
name: 'Download',
|
||||
item: 'https://revanced.app/download'
|
||||
}
|
||||
]
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
<Dialogue bind:modalOpen={warningDialogue}>
|
||||
<svelte:fragment slot="title">Warning</svelte:fragment>
|
||||
<svelte:fragment slot="description">{warning} Do you still want to download?</svelte:fragment>
|
||||
<svelte:fragment slot="buttons">
|
||||
<Query {query} let:data>
|
||||
<Button
|
||||
type="text"
|
||||
href={data.assets[0].browser_download_url}
|
||||
on:click={() => (warningDialogue = false)}>Okay</Button
|
||||
>
|
||||
</Query>
|
||||
<Button type="text" on:click={() => (warningDialogue = false)}>Cancel</Button>
|
||||
</svelte:fragment>
|
||||
</Dialogue>
|
||||
|
||||
<div class="wrapper center" in:fly={{ y: 10, easing: quintOut, duration: 750 }}>
|
||||
<h2>ReVanced <span>Manager</span></h2>
|
||||
<p>Patch your favourite apps, right on your device.</p>
|
||||
<div class="buttons">
|
||||
<Query {query} let:data>
|
||||
{#if !isAndroid || androidVersion < 8}
|
||||
<Button on:click={handleClick} type="filled" icon="download">
|
||||
{data.metadata.tag_name}
|
||||
</Button>
|
||||
{:else}
|
||||
<Button
|
||||
on:click={handleClick}
|
||||
type="filled"
|
||||
icon="download"
|
||||
href={data.assets[0].browser_download_url}
|
||||
>
|
||||
{data.metadata.tag_name}
|
||||
</Button>
|
||||
{/if}
|
||||
</Query>
|
||||
<Button type="tonal" href="https://github.com/revanced/revanced-manager" target="_blank">
|
||||
View Source
|
||||
</Button>
|
||||
</div>
|
||||
<div class="screenshot">
|
||||
<Picture data={manager_screenshot} alt="Manager Screenshot" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Footer />
|
||||
|
||||
<style>
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
color: var(--white);
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.screenshot :global(img) {
|
||||
margin-top: 2.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
height: 50rem;
|
||||
width: auto;
|
||||
padding: 0.5rem 0.5rem;
|
||||
border-radius: 2rem;
|
||||
background-color: var(--grey-six);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
span {
|
||||
color: var(--accent-color);
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user