Compare commits
2 Commits
feature/tr
...
feature/qr
| Author | SHA1 | Date | |
|---|---|---|---|
4439d0996d
|
|||
|
32ab4104a7
|
@@ -99,11 +99,10 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
ol > li {
|
ol > li {
|
||||||
@apply flex;
|
@apply flex flex-wrap gap-x-2;
|
||||||
counter-increment: counterName;
|
counter-increment: counterName;
|
||||||
}
|
}
|
||||||
ol > li:before {
|
ol > li:before {
|
||||||
@apply mr-2;
|
|
||||||
content: counter(counterName) '.';
|
content: counter(counterName) '.';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,7 +6,10 @@
|
|||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body
|
||||||
<div class="flex min-h-screen flex-col gap-8 p-4 max-sm:px-2">%sveltekit.body%</div>
|
data-sveltekit-preload-data="hover"
|
||||||
|
class="flex min-h-screen flex-col items-center gap-8 p-4 max-sm:px-2"
|
||||||
|
>
|
||||||
|
%sveltekit.body%
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@@ -22,10 +22,9 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="relative max-w-fit overflow-x-hidden rounded-lg bg-accent">
|
<div class="relative flex-grow overflow-x-hidden rounded-lg bg-accent">
|
||||||
<div class="flex items-start overflow-x-auto p-2">
|
<div class="flex items-start overflow-x-auto p-2">
|
||||||
<pre><code>{data}</code></pre>
|
<pre><code>{data}</code></pre>
|
||||||
|
|
||||||
{#if copy || download}
|
{#if copy || download}
|
||||||
<!--Copy button-->
|
<!--Copy button-->
|
||||||
<!--Flex reverse for peer hover to work properly-->
|
<!--Flex reverse for peer hover to work properly-->
|
||||||
|
|||||||
@@ -5,7 +5,7 @@
|
|||||||
import guideVideo from '$lib/assets/guide-client.mp4';
|
import guideVideo from '$lib/assets/guide-client.mp4';
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<Tabs.Root value="android" class="max-w-xl">
|
<Tabs.Root value="android">
|
||||||
<Tabs.List class="grid w-full grid-cols-3">
|
<Tabs.List class="grid w-full grid-cols-3">
|
||||||
<Tabs.Trigger value="android">Android</Tabs.Trigger>
|
<Tabs.Trigger value="android">Android</Tabs.Trigger>
|
||||||
<Tabs.Trigger value="windows">Windows</Tabs.Trigger>
|
<Tabs.Trigger value="windows">Windows</Tabs.Trigger>
|
||||||
@@ -35,7 +35,7 @@
|
|||||||
<div class="flex flex-col gap-2">
|
<div class="flex flex-col gap-2">
|
||||||
<p>Download the configuration file and import it</p>
|
<p>Download the configuration file and import it</p>
|
||||||
<aside>Alternatively, you can scan the QR code with the WireGuard app</aside>
|
<aside>Alternatively, you can scan the QR code with the WireGuard app</aside>
|
||||||
<video controls muted preload="metadata" class="max-h-screen">
|
<video autoplay loop controls muted preload="metadata" class="max-h-screen">
|
||||||
<source src={guideVideo} type="video/mp4" />
|
<source src={guideVideo} type="video/mp4" />
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -14,10 +14,12 @@
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<header class="sm:flex">
|
<header class="flex w-full flex-wrap justify-between gap-x-6 gap-y-4 xl:max-w-screen-xl">
|
||||||
<span class=" mr-6 font-bold sm:inline-block">VPGen</span>
|
<a href="/" class="contents">
|
||||||
<nav>
|
<span class="font-bold sm:inline-block">VPGen</span>
|
||||||
<ul class="flex items-center gap-6 text-sm">
|
</a>
|
||||||
|
<nav class="max-w-full">
|
||||||
|
<ul class="flex items-center gap-6 overflow-x-auto text-sm">
|
||||||
<li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li>
|
<li><a href="/" class={getNavClass(/^\/$/)}>Home</a></li>
|
||||||
{#if user}
|
{#if user}
|
||||||
<li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li>
|
<li><a href="/user" class={getNavClass(/^\/user$/)}>Profile</a></li>
|
||||||
@@ -27,13 +29,16 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</header>
|
</header>
|
||||||
<main class="flex flex-grow flex-col gap-4">
|
<main class="flex min-w-full max-w-full flex-grow flex-col gap-4 xl:min-w-[1280px]">
|
||||||
{@render children()}
|
{@render children()}
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
|
<!--https://github.com/sveltejs/kit/discussions/7585#discussioncomment-9997936-->
|
||||||
<!--Some shenanings needed to be done to get the footer position to stick correctly,
|
<!--Some shenanings needed to be done to get the footer position to stick correctly,
|
||||||
didn't work with display: contents-->
|
didn't work with display: contents-->
|
||||||
<footer class="relative inset-x-0 bottom-0 text-center">
|
<footer class="inset-x-0 bottom-0 w-full text-center">
|
||||||
<p>© 2024</p>
|
<p>© 2024</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -10,7 +10,7 @@
|
|||||||
<title>VPGen</title>
|
<title>VPGen</title>
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
<h1 class="mb-2 scroll-m-20 text-3xl font-extrabold tracking-tight lg:text-4xl">
|
<h1 class="mb-2 scroll-m-20 text-center text-3xl font-extrabold tracking-tight lg:text-4xl">
|
||||||
Welcome to VPGen
|
Welcome to VPGen
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
@@ -21,7 +21,7 @@
|
|||||||
<section id="get-started" class="border-l-2 pl-6">
|
<section id="get-started" class="border-l-2 pl-6">
|
||||||
<p>
|
<p>
|
||||||
To get started,
|
To get started,
|
||||||
<Button class="ml-2 p-2" href="/clients?add=New+Client">Create a New Client</Button>
|
<Button class="ml-2" href="/clients?add=New+Client">Create a New Client</Button>
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</section>
|
||||||
<!-- <section id="using-wireguard">-->
|
<!-- <section id="using-wireguard">-->
|
||||||
@@ -34,8 +34,8 @@
|
|||||||
<!-- </details>-->
|
<!-- </details>-->
|
||||||
<!-- </section>-->
|
<!-- </section>-->
|
||||||
{:else}
|
{:else}
|
||||||
<AuthForm class="p-4" />
|
<AuthForm />
|
||||||
<p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>
|
<!-- <p>VPGen is a VPN generator that allows you to create and manage VPN connections.</p>-->
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
|
|||||||
@@ -61,13 +61,13 @@
|
|||||||
</Table.Root>
|
</Table.Root>
|
||||||
|
|
||||||
<!--Floating action button for adding a new client-->
|
<!--Floating action button for adding a new client-->
|
||||||
<!--Not sure if this is the best place for the input field, will think about it later-->
|
|
||||||
<div class="mt-auto flex self-end pt-4">
|
|
||||||
<Dialog.Root bind:open={dialogOpen}>
|
<Dialog.Root bind:open={dialogOpen}>
|
||||||
<Dialog.Trigger class={buttonVariants({ variant: "default" }) + "flex gap-4"}>
|
<div class="mt-auto flex self-end pt-4">
|
||||||
|
<Dialog.Trigger class={buttonVariants({ variant: 'default' }) + ' flex gap-4'}>
|
||||||
<LucidePlus />
|
<LucidePlus />
|
||||||
Add Client
|
New Client
|
||||||
</Dialog.Trigger>
|
</Dialog.Trigger>
|
||||||
|
</div>
|
||||||
<Dialog.Content class="max-w-xs">
|
<Dialog.Content class="max-w-xs">
|
||||||
<form class="contents" method="post" action="?/create">
|
<form class="contents" method="post" action="?/create">
|
||||||
<Dialog.Header class="">
|
<Dialog.Header class="">
|
||||||
@@ -91,4 +91,3 @@
|
|||||||
</form>
|
</form>
|
||||||
</Dialog.Content>
|
</Dialog.Content>
|
||||||
</Dialog.Root>
|
</Dialog.Root>
|
||||||
</div>
|
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
import type { PageData } from './$types';
|
import type { PageData } from './$types';
|
||||||
import QRCode from 'qrcode-svg';
|
import QRCode from 'qrcode-svg';
|
||||||
import { CodeSnippet } from '$lib/components/app/code-snippet';
|
import { CodeSnippet } from '$lib/components/app/code-snippet';
|
||||||
import { WireguardGuide } from '$lib/components/app/wireguard-guide/index.js';
|
import { WireguardGuide } from '$lib/components/app/wireguard-guide';
|
||||||
|
|
||||||
const { data }: { data: PageData } = $props();
|
const { data }: { data: PageData } = $props();
|
||||||
|
|
||||||
@@ -16,7 +16,39 @@
|
|||||||
content: data.config,
|
content: data.config,
|
||||||
join: true,
|
join: true,
|
||||||
background: 'hsl(var(--accent-light))',
|
background: 'hsl(var(--accent-light))',
|
||||||
|
xmlDeclaration: false,
|
||||||
|
// predefined: true,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const modules = qrCode.qrcode.modules;
|
||||||
|
const length = modules.length;
|
||||||
|
|
||||||
|
const s = 1;
|
||||||
|
|
||||||
|
// Rectangles representing modules
|
||||||
|
// let pathData = '';
|
||||||
|
//
|
||||||
|
// for (let y = 0; y < length; y++) {
|
||||||
|
// for (let x = 0; x < length; x++) {
|
||||||
|
// let module = modules[x][y];
|
||||||
|
// if (module) {
|
||||||
|
// pathData += `M${x*s},${y*s} h${s} v${s} h-${s} Z `
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
// const path = modules.reduce((acc, row, y) => {
|
||||||
|
// return acc + row.reduce((rowAcc, module, x) => {
|
||||||
|
// return module ? rowAcc + `M${x*s},${y*s} h${s} v${s} h-${s} Z ` : rowAcc;
|
||||||
|
// }, '');
|
||||||
|
// }, '');
|
||||||
|
const path = modules.flat().reduce((acc, module, i) => {
|
||||||
|
const x = Math.floor(i / length)
|
||||||
|
const y = i % length;
|
||||||
|
return module ? acc + `M${x*s},${y*s} h${s} v${s} h-${s} Z ` : acc;
|
||||||
|
}, '');
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
@@ -25,14 +57,22 @@
|
|||||||
|
|
||||||
<h1 class="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>
|
||||||
|
|
||||||
<section id="client-configuration" class="flex flex-wrap gap-4">
|
<section id="client-configuration" class="flex flex-wrap justify-center gap-4">
|
||||||
<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />
|
<CodeSnippet data={data.config} filename={clientWgCleanedName} copy download />
|
||||||
|
|
||||||
<div class="overflow-hidden rounded-lg">
|
<div class="overflow-hidden rounded-lg">
|
||||||
{@html qrCode.svg()}
|
{@html qrCode.svg()}
|
||||||
</div>
|
</div>
|
||||||
|
<!--{qrCode.svg({ container: 'none' })}-->
|
||||||
|
<!--{qrCode.sv}-->
|
||||||
|
<div class="aspect-square min-h-64 p-3 bg-white rounded-lg">
|
||||||
|
<svg viewBox="0 0 {length*s*0.5} {length*s*0.5}" shape-rendering="crispEdges" image-rendering="optimizeQuality">
|
||||||
|
<path transform="scale(0.5)" d={path} />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<!--{pathdata}-->
|
||||||
</section>
|
</section>
|
||||||
<section id="usage" class="flex flex-col gap-2">
|
<section id="usage" class="flex w-full flex-col gap-2">
|
||||||
<h2 class="text-xl font-semibold">Usage</h2>
|
<h2 class="text-xl font-semibold">Usage</h2>
|
||||||
<p>To use VPGen, you need to install the WireGuard app on your device.</p>
|
<p>To use VPGen, you need to install the WireGuard app on your device.</p>
|
||||||
<WireguardGuide />
|
<WireguardGuide />
|
||||||
|
|||||||
Reference in New Issue
Block a user