mirror of
https://github.com/tuxdotrs/trok.git
synced 2025-07-07 12:26:34 +05:30
feat: add website
This commit is contained in:
164
internal/web/src/App.tsx
Normal file
164
internal/web/src/App.tsx
Normal file
@ -0,0 +1,164 @@
|
||||
import { createSignal } from "solid-js";
|
||||
import {
|
||||
ChatBubbleLeftIcon,
|
||||
ClipboardDocumentIcon,
|
||||
ClipboardDocumentCheckIcon,
|
||||
} from "./icons";
|
||||
|
||||
function App() {
|
||||
const install = `curl -fsSL https://trok.cloud/install.sh | sh`;
|
||||
const [copied, setCopied] = createSignal(false);
|
||||
|
||||
const handleCopy = () => {
|
||||
navigator.clipboard.writeText(install);
|
||||
setCopied(true);
|
||||
setTimeout(() => {
|
||||
setCopied(false);
|
||||
}, 1300);
|
||||
};
|
||||
|
||||
return (
|
||||
<div class="flex h-screen w-screen justify-center items-center antialiased">
|
||||
<div class="pt-10 mx-auto lg:max-w-5xl">
|
||||
<div class="flex flex-col justify-center items-center">
|
||||
<h1 class="text-7xl text-zinc-700 font-koulen">TROK</h1>
|
||||
<h3 class="text-lg text-zinc-500 font-koulen">
|
||||
EXPOSE. SHARE. ACCESS.
|
||||
</h3>
|
||||
</div>
|
||||
|
||||
<div class="mx-5 md:mx-0 h-10 border-gray-200 border-l border-r" />
|
||||
|
||||
<div class="mx-5 md:mx-0 border-t border-gray-200 border-l border-r">
|
||||
<div class="md:flex">
|
||||
<div class="px-5 py-10 border-b border-gray-200 md:border-r md:w-5/12">
|
||||
<h2 class="text-4xl text-zinc-700 font-koulen">
|
||||
Accessing your
|
||||
<br />
|
||||
local service should
|
||||
<br />
|
||||
be simple
|
||||
</h2>
|
||||
<p class="mt-5 text-md/10 text-gray-500">
|
||||
It's like
|
||||
<span class="font-mono bg-zinc-100 px-1 py-0.5 rounded">
|
||||
ngrok
|
||||
</span>
|
||||
but simpler. Just log in, run the command, and get a
|
||||
shareable URL to access your local service from anywhere. No
|
||||
complex setup—just instant, secure tunneling to the internet.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="px-5 py-10 border-b border-gray-200 flex-1 md:w-7/12">
|
||||
<h3 class="text-3xl text-zinc-700 font-koulen">Install</h3>
|
||||
<p class="mt-1 text-sm/6 text-gray-500">
|
||||
Install trok to your machine using shell:
|
||||
</p>
|
||||
<button
|
||||
class="text-xs md:text rounded bg-zinc-100 p-2 mt-2 flex cursor-pointer"
|
||||
onclick={handleCopy}
|
||||
>
|
||||
<div class="grow mr-10 text-zinc-600 font-mono">
|
||||
$ {install}
|
||||
</div>
|
||||
{copied() ? (
|
||||
<span class="w-10 mr-1">copied!</span>
|
||||
) : (
|
||||
<span class="w-10 mr-1"></span>
|
||||
)}
|
||||
{copied() ? (
|
||||
<ClipboardDocumentCheckIcon class="h-5 w-5 text-zinc-500" />
|
||||
) : (
|
||||
<ClipboardDocumentIcon class="h-5 w-5 text-zinc-500" />
|
||||
)}
|
||||
</button>
|
||||
<div class="mt-2 text-xs/6 text-gray-500">
|
||||
<p>
|
||||
This will download the trok binary to the path you ran the
|
||||
script from.
|
||||
<br />
|
||||
Run it with
|
||||
<span class="font-mono text-sm/6 rounded bg-zinc-100 p-1 inline">
|
||||
./trok
|
||||
</span>
|
||||
on any system
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-5 md:mx-0 h-5 border-l border-gray-200 border-r" />
|
||||
<div class="mx-5 md:mx-0 border-t border-gray-200 border-l border-r">
|
||||
<div class="px-5 pt-10">
|
||||
<h3 class="font-koulen text-zinc-600 text-xl">USING TROK:</h3>
|
||||
</div>
|
||||
<div class="md:flex sm:gap-5 border-gray-200 border-b">
|
||||
<div class="md:w-1/3 p-5 pb-10">
|
||||
<div class="rounded border border-zinc-300 bg-zinc-100 p-2 pb-8 h-40 mb-5">
|
||||
<div class="flex gap-1 items-center">
|
||||
<div class="border border-zinc-400 w-3 h-3 rounded-full" />
|
||||
<div class="border border-zinc-400 w-3 h-3 rounded-full" />
|
||||
<div class="border border-zinc-400 w-3 h-3 rounded-full" />
|
||||
</div>
|
||||
<p class="font-mono text-zinc-700 font-bold text-sm pt-4">
|
||||
{">"} $ trok client -a :3000
|
||||
</p>
|
||||
<p class="font-mono text-zinc-400 text-sm">
|
||||
started Trok client on trok.cloud
|
||||
</p>
|
||||
<p class="font-mono text-zinc-400 text-sm">
|
||||
[CMD] EHLO [ARG] trok.cloud
|
||||
</p>
|
||||
</div>
|
||||
<h3 class="font-koulen text-zinc-700 text-3xl">1. Setup</h3>
|
||||
<p class="mt-1 text-sm/6 text-gray-500">
|
||||
provide the local port you want to share, and it'll
|
||||
generate a URL.
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:w-1/3 p-5 pb-10">
|
||||
<div class="relative p-2 flex h-40 mb-5">
|
||||
<ChatBubbleLeftIcon class="w-6 h-6 mr-2" />
|
||||
<div class="rounded-tr-lg rounded-br-lg rounded-bl-lg border border-gray-200 bg-zinc-50 p-2 pb-10 mb-2 h-20">
|
||||
hey here take a look at my project...
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="font-koulen text-zinc-700 text-3xl">2. Share</h3>
|
||||
<p class="mt-1 text-sm/6 text-gray-500">
|
||||
share the URL with your friends.
|
||||
</p>
|
||||
</div>
|
||||
<div class="md:w-1/3 p-5 pb-10">
|
||||
<div class="rounded border border-zinc-300 bg-zinc-100 p-2 pb-8 h-40 mb-5">
|
||||
<div class="flex gap-1 items-center">
|
||||
<div class="flex gap-1">
|
||||
<div class="border border-zinc-400 w-3 h-3 rounded-full" />
|
||||
<div class="border border-zinc-400 w-3 h-3 rounded-full" />
|
||||
<div class="border border-zinc-400 w-3 h-3 rounded-full" />
|
||||
</div>
|
||||
<div class="border flex items-center border-zinc-400 w-full h-4 rounded-sm">
|
||||
<span class="text-xs text-zinc-400 px-1 -mt-[1px]">
|
||||
https://awesome-project.trok.cloud
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-center items-center h-full font-mono text-zinc-400 text-sm">
|
||||
🎉 your awesome project 🎉
|
||||
</div>
|
||||
</div>
|
||||
<h3 class="font-koulen text-zinc-700 text-3xl">3. Browse</h3>
|
||||
<p class="mt-1 text-sm/6 text-gray-500">
|
||||
access your local service from anywhere.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mx-5 md:mx-0 h-10 border-gray-200 border-l border-r" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
BIN
internal/web/src/assets/fonts/Koulen-Regular.ttf
Normal file
BIN
internal/web/src/assets/fonts/Koulen-Regular.ttf
Normal file
Binary file not shown.
60
internal/web/src/icons.tsx
Normal file
60
internal/web/src/icons.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
type IconProps = {
|
||||
class: string;
|
||||
};
|
||||
|
||||
export const ChatBubbleLeftIcon = (props: IconProps) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class={props.class}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ClipboardDocumentIcon = (props: IconProps) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class={props.class}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
|
||||
export const ClipboardDocumentCheckIcon = (props: IconProps) => {
|
||||
return (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke-width="1.5"
|
||||
stroke="currentColor"
|
||||
class={props.class}
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75 2.25 2.25 0 0 0-.1-.664m-5.8 0A2.251 2.251 0 0 1 13.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.376.023.75.05 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0 1 18 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504 1.125 1.125v9.375m-8.25-3 1.5 1.5 3-3.75"
|
||||
/>
|
||||
</svg>
|
||||
);
|
||||
};
|
||||
19
internal/web/src/index.css
Normal file
19
internal/web/src/index.css
Normal file
@ -0,0 +1,19 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
/* koulen-khmer-400-normal */
|
||||
@font-face {
|
||||
font-family: "Koulen";
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
font-weight: 400;
|
||||
src: url("./assets/fonts/Koulen-Regular.ttf");
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: var(--color-cyan-200);
|
||||
}
|
||||
|
||||
@theme {
|
||||
--font-koulen: "Koulen", "sans-serif";
|
||||
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
}
|
||||
8
internal/web/src/index.tsx
Normal file
8
internal/web/src/index.tsx
Normal file
@ -0,0 +1,8 @@
|
||||
/* @refresh reload */
|
||||
import { render } from "solid-js/web";
|
||||
import "./index.css";
|
||||
import App from "./App.tsx";
|
||||
|
||||
const root = document.getElementById("root");
|
||||
|
||||
render(() => <App />, root!);
|
||||
1
internal/web/src/vite-env.d.ts
vendored
Normal file
1
internal/web/src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
Reference in New Issue
Block a user