From 923c24a93ec20a05bc7366982982f2b6a15af515 Mon Sep 17 00:00:00 2001 From: Yuri Tatishchev Date: Thu, 26 Dec 2024 01:41:37 -0800 Subject: [PATCH] client page: add tutorial, layout ui improvements --- .gitattributes | 1 + src/app.css | 147 ++++++++++-------- src/app.html | 2 +- ...ItOnGooglePlay_Badge_Web_color_English.png | Bin 0 -> 4698 bytes src/lib/assets/guide-client.mp4 | 3 + .../components/app/wireguard-guide/index.ts | 5 + .../wireguard-guide/wireguard-guide.svelte | 85 ++++++++++ src/routes/+layout.svelte | 6 +- src/routes/+page.svelte | 21 ++- src/routes/clients/[id]/+page.svelte | 14 +- tailwind.config.ts | 2 +- 11 files changed, 207 insertions(+), 79 deletions(-) create mode 100644 .gitattributes create mode 100644 src/lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png create mode 100644 src/lib/assets/guide-client.mp4 create mode 100644 src/lib/components/app/wireguard-guide/index.ts create mode 100644 src/lib/components/app/wireguard-guide/wireguard-guide.svelte diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..f8ff2b5 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +*.mp4 filter=lfs diff=lfs merge=lfs -text diff --git a/src/app.css b/src/app.css index f199fdb..0bd5b39 100644 --- a/src/app.css +++ b/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; - } -} \ No newline at end of file + body { + @apply bg-background text-foreground; + } + + ol > li { + @apply flex; + counter-increment: counterName; + } + ol > li:before { + @apply mr-2; + content: counter(counterName) '.'; + } +} diff --git a/src/app.html b/src/app.html index 6b8b957..55dfccc 100644 --- a/src/app.html +++ b/src/app.html @@ -7,6 +7,6 @@ %sveltekit.head% -
%sveltekit.body%
+
%sveltekit.body%
diff --git a/src/lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png b/src/lib/assets/GetItOnGooglePlay_Badge_Web_color_English.png new file mode 100644 index 0000000000000000000000000000000000000000..7a06997a57236e18b5bd2a152435911b72371a89 GIT binary patch literal 4698 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 + 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'; + + + + + Android + Windows + Other + + + + + WireGuard on Android + + +
    +
  1. +
    + Install the WireGuard app + + Get it on google play + +
    +
    2. +
  2. +
    +

    Download the configuration file and import it

    + + +
    +
    3. +
+ + + + + + + WireGuard on Windows + + +

+ + Download WireGuard + +

+ + + + + + + WireGuard on Other Platforms + + +

+ You can download the WireGuard client from the + official website + . +

+ + + + diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 6caadca..7b363cc 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -14,7 +14,7 @@ } -
+
VPGen
-
+
{@render children()}
-