client page: add tutorial, layout ui improvements
This commit is contained in:
parent
3861c30ffd
commit
923c24a93e
GPG Key ID:
E0EBF441EA424369
1
.gitattributes
vendored
Normal file
1
.gitattributes
vendored
Normal file
@ -0,0 +1 @@
|
||||
*.mp4 filter=lfs diff=lfs merge=lfs -text
|
||||
145
src/app.css
145
src/app.css
@ -3,98 +3,107 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 0 0% 90%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
:root {
|
||||
--background: 0 0% 90%;
|
||||
--foreground: 222.2 84% 4.9%;
|
||||
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
--muted: 210 40% 96.1%;
|
||||
--muted-foreground: 215.4 16.3% 46.9%;
|
||||
|
||||
--popover: 0 0% 90%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
--popover: 0 0% 90%;
|
||||
--popover-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--card: 0 0% 90%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
--card: 0 0% 90%;
|
||||
--card-foreground: 222.2 84% 4.9%;
|
||||
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
--border: 214.3 31.8% 91.4%;
|
||||
--input: 214.3 31.8% 91.4%;
|
||||
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
--primary: 222.2 47.4% 11.2%;
|
||||
--primary-foreground: 210 40% 98%;
|
||||
|
||||
--secondary: 210 26% 86%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
--secondary: 210 26% 86%;
|
||||
--secondary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--accent: 210 26% 86%;
|
||||
--accent-light: 210 26% 86%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
--accent: 210 26% 86%;
|
||||
--accent-light: 210 26% 86%;
|
||||
--accent-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
--destructive: 0 72.2% 50.6%;
|
||||
--destructive-foreground: 210 40% 98%;
|
||||
|
||||
--ring: 222.2 84% 4.9%;
|
||||
--ring: 222.2 84% 4.9%;
|
||||
|
||||
--radius: 0.5rem;
|
||||
--radius: 0.5rem;
|
||||
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
--sidebar-background: 0 0% 98%;
|
||||
--sidebar-foreground: 240 5.3% 26.1%;
|
||||
--sidebar-primary: 240 5.9% 10%;
|
||||
--sidebar-primary-foreground: 0 0% 98%;
|
||||
--sidebar-accent: 240 4.8% 95.9%;
|
||||
--sidebar-accent-foreground: 240 5.9% 10%;
|
||||
--sidebar-border: 220 13% 91%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 90%;
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: 222.2 84% 4.9%;
|
||||
--foreground: 210 40% 90%;
|
||||
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
--muted: 217.2 32.6% 17.5%;
|
||||
--muted-foreground: 215 20.2% 65.1%;
|
||||
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 90%;
|
||||
--popover: 222.2 84% 4.9%;
|
||||
--popover-foreground: 210 40% 90%;
|
||||
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 90%;
|
||||
--card: 222.2 84% 4.9%;
|
||||
--card-foreground: 210 40% 90%;
|
||||
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
--border: 217.2 32.6% 17.5%;
|
||||
--input: 217.2 32.6% 17.5%;
|
||||
|
||||
--primary: 210 40% 90%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
--primary: 210 40% 90%;
|
||||
--primary-foreground: 222.2 47.4% 11.2%;
|
||||
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 90%;
|
||||
--secondary: 217.2 32.6% 17.5%;
|
||||
--secondary-foreground: 210 40% 90%;
|
||||
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 90%;
|
||||
--accent: 217.2 32.6% 17.5%;
|
||||
--accent-foreground: 210 40% 90%;
|
||||
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 90%;
|
||||
--destructive: 0 62.8% 30.6%;
|
||||
--destructive-foreground: 210 40% 90%;
|
||||
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
--ring: 212.7 26.8% 83.9%;
|
||||
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
}
|
||||
--sidebar-background: 240 5.9% 10%;
|
||||
--sidebar-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-primary: 224.3 76.3% 48%;
|
||||
--sidebar-primary-foreground: 0 0% 100%;
|
||||
--sidebar-accent: 240 3.7% 15.9%;
|
||||
--sidebar-accent-foreground: 240 4.8% 95.9%;
|
||||
--sidebar-border: 240 3.7% 15.9%;
|
||||
--sidebar-ring: 217.2 91.2% 59.8%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
ol > li {
|
||||
@apply flex;
|
||||
counter-increment: counterName;
|
||||
}
|
||||
ol > li:before {
|
||||
@apply mr-2;
|
||||
content: counter(counterName) '.';
|
||||
}
|
||||
}
|
||||
@ -7,6 +7,6 @@
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover">
|
||||
<div class="flex flex-col min-h-screen">%sveltekit.body%</div>
|
||||
<div class="flex min-h-screen flex-col gap-8 p-4 max-sm:px-2">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
src/lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png
Normal file
BIN
src/lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
src/lib/assets/guide-client.mp4
(Stored with Git LFS)
Normal file
BIN
src/lib/assets/guide-client.mp4
(Stored with Git LFS)
Normal file
Binary file not shown.
5
src/lib/components/app/wireguard-guide/index.ts
Normal file
5
src/lib/components/app/wireguard-guide/index.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import WireguardGuide from "./wireguard-guide.svelte";
|
||||
|
||||
export {
|
||||
WireguardGuide
|
||||
};
|
||||
@ -0,0 +1,85 @@
|
||||
<script lang="ts">
|
||||
import * as Tabs from '$lib/components/ui/tabs';
|
||||
import * as Card from '$lib/components/ui/card';
|
||||
import getItOnGooglePlay from '$lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png';
|
||||
import guideVideo from '$lib/assets/guide-client.mp4';
|
||||
</script>
|
||||
|
||||
<Tabs.Root value="android" class="max-w-xl">
|
||||
<Tabs.List class="grid w-full grid-cols-3">
|
||||
<Tabs.Trigger value="android">Android</Tabs.Trigger>
|
||||
<Tabs.Trigger value="windows">Windows</Tabs.Trigger>
|
||||
<Tabs.Trigger value="other">Other</Tabs.Trigger>
|
||||
</Tabs.List>
|
||||
<Tabs.Content value="android">
|
||||
<Card.Root>
|
||||
<Card.Header class="max-sm:px-4 max-sm:pt-4">
|
||||
<Card.Title>WireGuard on Android</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content class="max-sm:p-4">
|
||||
<ol class="flex flex-col gap-2">
|
||||
<li>
|
||||
<div class="flex flex-col gap-2">
|
||||
Install the WireGuard app
|
||||
<a
|
||||
class="contents"
|
||||
href="https://play.google.com/store/apps/details?id=com.wireguard.android"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<img class="size-min" alt="Get it on google play" src={getItOnGooglePlay} />
|
||||
</a>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="flex flex-col gap-2">
|
||||
<p>Download the configuration file and import it</p>
|
||||
<aside>Alternatively, you can scan the QR code with the WireGuard app</aside>
|
||||
<video controls muted preload="metadata" class="max-h-screen">
|
||||
<source src={guideVideo} type="video/mp4" />
|
||||
</video>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="windows">
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>WireGuard on Windows</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p>
|
||||
<a
|
||||
class="underline"
|
||||
href="https://download.wireguard.com/windows-client/wireguard-installer.exe"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Download WireGuard
|
||||
</a>
|
||||
</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</Tabs.Content>
|
||||
<Tabs.Content value="other">
|
||||
<Card.Root>
|
||||
<Card.Header>
|
||||
<Card.Title>WireGuard on Other Platforms</Card.Title>
|
||||
</Card.Header>
|
||||
<Card.Content>
|
||||
<p>
|
||||
You can download the WireGuard client from the <a
|
||||
class="underline"
|
||||
href="https://www.wireguard.com/install/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
official website
|
||||
</a>.
|
||||
</p>
|
||||
</Card.Content>
|
||||
</Card.Root>
|
||||
</Tabs.Content>
|
||||
</Tabs.Root>
|
||||
@ -14,7 +14,7 @@
|
||||
}
|
||||
</script>
|
||||
|
||||
<header class="p-4 sm:flex">
|
||||
<header class="sm:flex">
|
||||
<span class=" mr-6 font-bold sm:inline-block">VPGen</span>
|
||||
<nav>
|
||||
<ul class="flex items-center gap-6 text-sm">
|
||||
@ -27,13 +27,13 @@
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="flex flex-grow flex-col p-4">
|
||||
<main class="flex flex-grow flex-col gap-4">
|
||||
{@render children()}
|
||||
</main>
|
||||
|
||||
<!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
|
||||
<!--Some shenanings needed to be done to get the footer position to stick correctly,
|
||||
didn't work with display: contents-->
|
||||
<footer class="relative inset-x-0 bottom-0 p-4 text-center">
|
||||
<footer class="relative inset-x-0 bottom-0 text-center">
|
||||
<p>© 2024</p>
|
||||
</footer>
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { AuthForm } from '$lib/components/app/auth-form';
|
||||
import { Button } from '$lib/components/ui/button';
|
||||
import { AuthForm } from '$lib/components/app/auth-form';
|
||||
|
||||
const { data } = $props();
|
||||
const { user } = data;
|
||||
@ -24,6 +24,15 @@
|
||||
<Button class="ml-2 p-2" href="/clients?add=New+Client">Create a New Client</Button>
|
||||
</p>
|
||||
</section>
|
||||
<!-- <section id="using-wireguard">-->
|
||||
<!-- <details class="mt-10">-->
|
||||
<!-- <summary class="relative flex flex-col gap-2 pl-10">-->
|
||||
<!-- <h2 class="text-xl font-semibold">Using WireGuard</h2>-->
|
||||
<!-- To use VPGen, you need to install the WireGuard app on your device.-->
|
||||
<!-- </summary>-->
|
||||
<!-- <WireguardGuide />-->
|
||||
<!-- </details>-->
|
||||
<!-- </section>-->
|
||||
{:else}
|
||||
<AuthForm class="p-4" />
|
||||
<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>
|
||||
@ -33,4 +42,14 @@
|
||||
p {
|
||||
@apply my-2;
|
||||
}
|
||||
|
||||
/*
|
||||
summary::before {
|
||||
content: '▶';
|
||||
@apply absolute -left-0;
|
||||
}
|
||||
details[open] summary::before {
|
||||
content: '▼';
|
||||
}
|
||||
*/
|
||||
</style>
|
||||
|
||||
@ -2,6 +2,7 @@
|
||||
import type { PageData } from './$types';
|
||||
import QRCode from 'qrcode-svg';
|
||||
import { CodeSnippet } from '$lib/components/app/code-snippet';
|
||||
import { WireguardGuide } from '$lib/components/app/wireguard-guide/index.js';
|
||||
|
||||
const { data }: { data: PageData } = $props();
|
||||
|
||||
@ -19,15 +20,20 @@
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title></title>
|
||||
<title>{data.client.name}</title>
|
||||
</svelte:head>
|
||||
|
||||
<h1 class="mb-4 w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
|
||||
<h1 class="w-fit rounded-lg bg-accent p-2 text-lg">{data.client.name}</h1>
|
||||
|
||||
<div class="flex flex-wrap gap-4">
|
||||
<section id="client-configuration" class="flex flex-wrap gap-4">
|
||||
<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />
|
||||
|
||||
<div class="overflow-hidden rounded-lg">
|
||||
{@html qrCode.svg()}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<section id="usage" class="flex flex-col gap-2">
|
||||
<h2 class="text-xl font-semibold">Usage</h2>
|
||||
<p>To use VPGen, you need to install the WireGuard app on your device.</p>
|
||||
<WireguardGuide />
|
||||
</section>
|
||||
|
||||
@ -3,7 +3,7 @@ import type { Config } from "tailwindcss";
|
||||
import tailwindcssAnimate from "tailwindcss-animate";
|
||||
|
||||
const config: Config = {
|
||||
darkMode: ["class"],
|
||||
darkMode: ["media"],
|
||||
content: ["./src/**/*.{html,js,svelte,ts}"],
|
||||
safelist: ["dark"],
|
||||
theme: {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user