);
}
@@ -30,13 +31,17 @@ export default function Wifi() {
component: WifiCredentials,
},
];
+
return (
-
-
Wi-Fi
-
- Scan for Wi-Fi networks and connect to DAppNodeWifi using the default credentials (step 2)
-
-
+
+
+
Wi-Fi Connection
+
+ Scan for Wi-Fi networks and connect to DAppNodeWifi using the default
+ credentials
+
+
+
);
}
diff --git a/welcome_website/postcss.config.mjs b/welcome_website/postcss.config.mjs
new file mode 100644
index 0000000..61e3684
--- /dev/null
+++ b/welcome_website/postcss.config.mjs
@@ -0,0 +1,7 @@
+const config = {
+ plugins: {
+ "@tailwindcss/postcss": {},
+ },
+};
+
+export default config;
diff --git a/welcome_website/public/dappnode-logo.png b/welcome_website/public/dappnode-logo.png
index cf75f97..b4ec1bf 100644
Binary files a/welcome_website/public/dappnode-logo.png and b/welcome_website/public/dappnode-logo.png differ
diff --git a/welcome_website/public/tailscale-logo.svg b/welcome_website/public/tailscale-logo.svg
new file mode 100644
index 0000000..de7abea
--- /dev/null
+++ b/welcome_website/public/tailscale-logo.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/welcome_website/styles/globals.css b/welcome_website/styles/globals.css
index d4e73b4..7e7fb69 100644
--- a/welcome_website/styles/globals.css
+++ b/welcome_website/styles/globals.css
@@ -1,106 +1,144 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&display=swap");
+@import "tailwindcss";
+@import "shadcn/tailwind.css";
-* {
- padding: 0;
- margin: 0;
- box-sizing: content-box;
-}
-
-body {
- background-color: #eee;
- color: #393e46;
- text-align: center;
- font-family: "Nunito";
-}
-
-/* SIZING */
-.wrapper {
- min-height: 100vh;
- display: flex;
- flex-direction: column;
-}
-
-header,
-footer {
- height: 90px;
- width: 100%;
-}
+@custom-variant dark (&:is(.dark *));
-main {
- flex: 1;
- margin: 20px;
- display: flex;
- align-items: center;
- justify-content: center;
+@theme inline {
+ --radius-sm: calc(var(--radius) - 4px);
+ --radius-md: calc(var(--radius) - 2px);
+ --radius-lg: var(--radius);
+ --radius-xl: calc(var(--radius) + 4px);
+ --radius-2xl: calc(var(--radius) + 8px);
+ --radius-3xl: calc(var(--radius) + 12px);
+ --radius-4xl: calc(var(--radius) + 16px);
+ --color-background: var(--background);
+ --color-foreground: var(--foreground);
+ --color-card: var(--card);
+ --color-card-foreground: var(--card-foreground);
+ --color-popover: var(--popover);
+ --color-popover-foreground: var(--popover-foreground);
+ --color-primary: var(--primary);
+ --color-primary-foreground: var(--primary-foreground);
+ --color-secondary: var(--secondary);
+ --color-secondary-foreground: var(--secondary-foreground);
+ --color-muted: var(--muted);
+ --color-muted-foreground: var(--muted-foreground);
+ --color-accent: var(--accent);
+ --color-accent-foreground: var(--accent-foreground);
+ --color-destructive: var(--destructive);
+ --color-border: var(--border);
+ --color-input: var(--input);
+ --color-ring: var(--ring);
+ --color-chart-1: var(--chart-1);
+ --color-chart-2: var(--chart-2);
+ --color-chart-3: var(--chart-3);
+ --color-chart-4: var(--chart-4);
+ --color-chart-5: var(--chart-5);
+ --color-sidebar: var(--sidebar);
+ --color-sidebar-foreground: var(--sidebar-foreground);
+ --color-sidebar-primary: var(--sidebar-primary);
+ --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+ --color-sidebar-accent: var(--sidebar-accent);
+ --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+ --color-sidebar-border: var(--sidebar-border);
+ --color-sidebar-ring: var(--sidebar-ring);
}
-/*HEADER*/
-.header {
- /*position: fixed;*/
- top: 0;
- text-align: center;
- background-color: #393e46;
- color: #eee;
- text-align: center;
-}
-/*Navigation bar*/
-.header nav {
- overflow: hidden;
- z-index: 99;
-}
-.header nav a {
- margin-top: 10px;
- margin-left: 12px;
- color: #eee;
- text-decoration: none;
-}
+:root {
+ --radius: 0.625rem;
-.navbar-logo {
- position: absolute;
- margin-top: 15px;
- margin-left: 20px;
-}
+ /* Dappnode Brand Colors */
+ --dappnode-primary: #c013e9;
+ --dappnode-purple: #612dcb;
+ --dappnode-dark: #393e46;
+ --dappnode-light: #eee;
+ --dappnode-blue: #082c41;
-.header nav .navbar-title {
- margin-top: 20px;
- display: flex;
- justify-content: center;
-}
-.header nav .navbar-title-dappnode {
- color: #2fbcb2;
- margin-left: 10px;
-}
+ /* Warning/Alert Colors */
+ --warning: #f59e0b;
+ --warning-foreground: #78350f;
+ --warning-bg: #fef3c7;
+ --warning-border: #fbbf24;
-/*CONTENT*/
-main .connect-content {
+ /* Shadcn Theme Colors */
+ --background: #ffffff;
+ --foreground: oklch(0.145 0 0);
+ --card: oklch(1 0 0);
+ --card-foreground: oklch(0.145 0 0);
+ --popover: oklch(1 0 0);
+ --popover-foreground: oklch(0.145 0 0);
+ --primary: oklch(0.205 0 0);
+ --primary-foreground: oklch(0.985 0 0);
+ --secondary: oklch(0.97 0 0);
+ --secondary-foreground: oklch(0.205 0 0);
+ --muted: oklch(0.97 0 0);
+ --muted-foreground: oklch(0.556 0 0);
+ --accent: oklch(0.97 0 0);
+ --accent-foreground: oklch(0.205 0 0);
+ --destructive: oklch(0.577 0.245 27.325);
+ --border: oklch(0.922 0 0);
+ --input: oklch(0.922 0 0);
+ --ring: oklch(0.708 0 0);
+ --chart-1: oklch(0.646 0.222 41.116);
+ --chart-2: oklch(0.6 0.118 184.704);
+ --chart-3: oklch(0.398 0.07 227.392);
+ --chart-4: oklch(0.828 0.189 84.429);
+ --chart-5: oklch(0.769 0.188 70.08);
+ --sidebar: oklch(0.985 0 0);
+ --sidebar-foreground: oklch(0.145 0 0);
+ --sidebar-primary: oklch(0.205 0 0);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.97 0 0);
+ --sidebar-accent-foreground: oklch(0.205 0 0);
+ --sidebar-border: oklch(0.922 0 0);
+ --sidebar-ring: oklch(0.708 0 0);
}
-/*FOOTER*/
-.footer {
- bottom: 0;
- background-color: #393e46;
- display: flex;
- justify-content: center;
- align-items: center;
-}
+.dark {
+ --background: oklch(0.145 0 0);
+ --foreground: oklch(0.985 0 0);
+ --card: oklch(0.205 0 0);
+ --card-foreground: oklch(0.985 0 0);
+ --popover: oklch(0.205 0 0);
+ --popover-foreground: oklch(0.985 0 0);
+ --primary: oklch(0.922 0 0);
+ --primary-foreground: oklch(0.205 0 0);
+ --secondary: oklch(0.269 0 0);
+ --secondary-foreground: oklch(0.985 0 0);
+ --muted: oklch(0.269 0 0);
+ --muted-foreground: oklch(0.708 0 0);
+ --accent: oklch(0.269 0 0);
+ --accent-foreground: oklch(0.985 0 0);
+ --destructive: oklch(0.704 0.191 22.216);
+ --border: oklch(1 0 0 / 10%);
+ --input: oklch(1 0 0 / 15%);
+ --ring: oklch(0.556 0 0);
+ --chart-1: oklch(0.488 0.243 264.376);
+ --chart-2: oklch(0.696 0.17 162.48);
+ --chart-3: oklch(0.769 0.188 70.08);
+ --chart-4: oklch(0.627 0.265 303.9);
+ --chart-5: oklch(0.645 0.246 16.439);
+ --sidebar: oklch(0.205 0 0);
+ --sidebar-foreground: oklch(0.985 0 0);
+ --sidebar-primary: oklch(0.488 0.243 264.376);
+ --sidebar-primary-foreground: oklch(0.985 0 0);
+ --sidebar-accent: oklch(0.269 0 0);
+ --sidebar-accent-foreground: oklch(0.985 0 0);
+ --sidebar-border: oklch(1 0 0 / 10%);
+ --sidebar-ring: oklch(0.556 0 0);
-/*Links*/
-a {
- margin-left: 30px;
- color: #2fbcb2;
- font-size: 18px;
- font-weight: 800;
- text-decoration: none;
-}
-a:hover {
- text-decoration: underline;
+ /* Warning/Alert Colors - Dark Mode */
+ --warning: #fbbf24;
+ --warning-foreground: #fef3c7;
+ --warning-bg: rgba(120, 53, 15, 0.2);
+ --warning-border: rgba(251, 191, 36, 0.5);
}
-/*404 page*/
-.not-found {
- text-align: center;
-}
-.not-found a {
- color: #4979ff;
- text-decoration: underline;
+@layer base {
+ * {
+ @apply border-border outline-ring/50;
+ }
+ body {
+ @apply bg-background text-foreground;
+ }
}
diff --git a/welcome_website/tsconfig.json b/welcome_website/tsconfig.json
index 35d51ea..b4201d6 100644
--- a/welcome_website/tsconfig.json
+++ b/welcome_website/tsconfig.json
@@ -1,11 +1,7 @@
{
"compilerOptions": {
"target": "es5",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
- ],
+ "lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
@@ -16,14 +12,13 @@
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
- "jsx": "preserve"
+ "jsx": "react-jsx",
+ "incremental": true,
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./*"]
+ }
},
- "include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx"
- ],
- "exclude": [
- "node_modules"
- ]
+ "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+ "exclude": ["node_modules"]
}
diff --git a/welcome_website/utils/materialUi.ts b/welcome_website/utils/materialUi.ts
deleted file mode 100644
index e5178b2..0000000
--- a/welcome_website/utils/materialUi.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { createMuiTheme } from "@material-ui/core";
-
-const theme = createMuiTheme({
- overrides: {
- MuiStepper: { root: { backgroundColor: "#eee", marginTop: 20, color: "#393e46" } },
- MuiStep: {
- horizontal: {
- justifyContent: "space-around",
- paddingLeft: 16,
- paddingRight: 16,
- },
- },
- MuiStepConnector: {
- line: {
- borderColor: "#393e46",
- },
- lineHorizontal: {
- borderStyle: "solid",
- },
- },
- MuiStepIcon: {
- root: {
- color: "#393e46",
- fontSize: 30,
- },
- },
- MuiStepLabel: {
- label: {
- marginBottom: 10,
- color: "#393e46",
- },
- },
- MuiCard: {
- root: {
- display: "flex",
- flexDirection: "column",
- justifyContent: "center",
- height: 400,
- width: 270,
- backgroundColor: "#393e46",
- color: "#eee",
- /*boxShadow: "0 8px 40px -12px rgba(0,0,0,0.3)",*/
- "&:hover": {
- boxShadow: "0 16px 70px -12.125px #2fbcb2",
- },
- cursor: "pointer",
- },
- },
- MuiTypography: {
- h5: {
- fontSize: 40,
- },
- },
- },
-});
-
-export default theme;
diff --git a/welcome_website/utils/params.ts b/welcome_website/utils/params.ts
index 8635dab..7a9b409 100644
--- a/welcome_website/utils/params.ts
+++ b/welcome_website/utils/params.ts
@@ -2,10 +2,17 @@ export const params = {
// VPn
// 1. OpenVpn
OPENVPN_DOWNLOAD_URL: "https://openvpn.net/download-open-vpn/",
- OPENVPN_DAPPNODE_URL: "http://my.dappnode/#/installer/vpn.dnp.dappnode.eth",
+ OPENVPN_DAPPNODE_URL: "http://my.dappnode/installer/dnp/vpn.dnp.dappnode.eth",
// 2. Wireguard
WIREGUARD_DOWNLOAD_URL: "https://www.wireguard.com/install/",
- WIREGUARD_DAPPNODE_URL: "http://my.dappnode/#/installer/wireguard.dnp.dappnode.eth",
+ WIREGUARD_DAPPNODE_URL:
+ "http://my.dappnode/installer/dnp/wireguard.dnp.dappnode.eth",
+ // 2. Tailscale
+ TAILSCALE_DOWNLOAD_URL: "https://tailscale.com/download/",
+ TAILSCALE_DAPPNODE_URL:
+ "http://my.dappnode/installer/dnp/tailscale.dnp.dappnode.eth",
+
+ DAPPMANAGER_VPN_TAB_URL: "http://my.dappnode/vpn/tailscale",
// Endpoints
DAPPNODE_ENDPOINT: "http://my.dappnode",
DAPPNODE_AVAHI_ENDPOINT: "http://my.dappnode.local",
@@ -14,4 +21,5 @@ export const params = {
PASSWORD: "dappnode",
// Path static images
basePath: process.env.NODE_ENV === "production" ? "/welcome_materials" : "",
+ DISCORD_SERVER_URL: "https://discord.com/invite/dappnode",
};