feat: add public-facing web interface with domain-based routing
Add public-web service with static landing page for client enrollment and device provisioning. Add public-web container to docker-compose with port 8082. Configure nginx reverse proxy with domain-based routing: admin-vpn.nesterovic.cc for admin interface and vpn.nesterovic.cc for public interface. Add proxy headers for X-Real-IP, X-Forwarded-For and X-Forwarded-Proto to both server blocks. Create public-web Dockerfile with nginx serving
This commit is contained in:
8
public-web/Dockerfile
Normal file
8
public-web/Dockerfile
Normal file
@@ -0,0 +1,8 @@
|
||||
FROM nginx:1.27-alpine
|
||||
|
||||
COPY public-web/index.html /usr/share/nginx/html/index.html
|
||||
COPY public-web/styles.css /usr/share/nginx/html/styles.css
|
||||
COPY admin-web/public/NexaVPN_Logo.png /usr/share/nginx/html/NexaVPN_Logo.png
|
||||
COPY admin-web/public/NexaVPN_Logo_Only.png /usr/share/nginx/html/NexaVPN_Logo_Only.png
|
||||
COPY admin-web/public/favicon.ico /usr/share/nginx/html/favicon.ico
|
||||
COPY public-web/nginx.conf /etc/nginx/conf.d/default.conf
|
||||
35
public-web/index.html
Normal file
35
public-web/index.html
Normal file
@@ -0,0 +1,35 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>NexaVPN</title>
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="stylesheet" href="/styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main class="shell">
|
||||
<section class="hero">
|
||||
<img class="logo" src="/NexaVPN_Logo.png" alt="NexaVPN" />
|
||||
<p class="eyebrow">Private access</p>
|
||||
<h1>Connect with the NexaVPN app.</h1>
|
||||
<p class="copy">
|
||||
Use the desktop client to sign in, provision this device, and connect to your private network.
|
||||
</p>
|
||||
<div class="actions">
|
||||
<a class="button primary" href="https://admin-vpn.nesterovic.cc">Admin portal</a>
|
||||
<a class="button secondary" href="/api/v1/healthz">API health</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="card">
|
||||
<h2>What this host is for</h2>
|
||||
<ul>
|
||||
<li>Desktop client login and device enrollment</li>
|
||||
<li>Profile sync for provisioned devices</li>
|
||||
<li>Public VPN entrypoint information</li>
|
||||
</ul>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
10
public-web/nginx.conf
Normal file
10
public-web/nginx.conf
Normal file
@@ -0,0 +1,10 @@
|
||||
server {
|
||||
listen 80;
|
||||
server_name _;
|
||||
root /usr/share/nginx/html;
|
||||
index index.html;
|
||||
|
||||
location / {
|
||||
try_files $uri /index.html;
|
||||
}
|
||||
}
|
||||
126
public-web/styles.css
Normal file
126
public-web/styles.css
Normal file
@@ -0,0 +1,126 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
font-family: "Segoe UI", "SF Pro Text", "Helvetica Neue", sans-serif;
|
||||
--bg: #08111d;
|
||||
--panel: rgba(15, 24, 41, 0.82);
|
||||
--text: #eef4ff;
|
||||
--muted: #a7b7d4;
|
||||
--line: rgba(177, 197, 229, 0.14);
|
||||
--accent: #74e0b8;
|
||||
--accent-strong: #1fb67a;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
color: var(--text);
|
||||
background:
|
||||
radial-gradient(circle at top left, rgba(116, 224, 184, 0.17), transparent 25%),
|
||||
radial-gradient(circle at right, rgba(74, 120, 255, 0.12), transparent 20%),
|
||||
linear-gradient(180deg, #07101c 0%, #0d1728 100%);
|
||||
}
|
||||
|
||||
.shell {
|
||||
width: min(960px, 100%);
|
||||
margin: 0 auto;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
align-content: center;
|
||||
gap: 24px;
|
||||
padding: 32px 24px;
|
||||
}
|
||||
|
||||
.hero,
|
||||
.card {
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 28px;
|
||||
box-shadow: 0 24px 72px rgba(3, 8, 20, 0.34);
|
||||
backdrop-filter: blur(16px);
|
||||
}
|
||||
|
||||
.hero {
|
||||
display: grid;
|
||||
gap: 18px;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: min(280px, 100%);
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
color: var(--accent);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.18em;
|
||||
font-size: 0.78rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
p,
|
||||
ul {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: clamp(2rem, 5vw, 3.4rem);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
.copy {
|
||||
max-width: 42rem;
|
||||
color: var(--muted);
|
||||
line-height: 1.6;
|
||||
font-size: 1.05rem;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px 18px;
|
||||
border-radius: 999px;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
background: linear-gradient(135deg, var(--accent) 0%, var(--accent-strong) 100%);
|
||||
color: #04141a;
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
border: 1px solid var(--line);
|
||||
color: var(--text);
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.card ul {
|
||||
padding-left: 20px;
|
||||
color: var(--muted);
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.hero,
|
||||
.card {
|
||||
padding: 24px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user