arthur_chen
f69efb67ad
- Tauri desktop app (apps/desktop) - Python Django API service (services/api) - Deployment scripts and docs
241 lines
12 KiB
HTML
241 lines
12 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="en"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"on-tertiary-fixed-variant": "#7b2e00",
|
|
"secondary-container": "#6bfd6a",
|
|
"on-tertiary-container": "#fffbff",
|
|
"on-secondary": "#ffffff",
|
|
"secondary-fixed-dim": "#4ee253",
|
|
"on-secondary-fixed-variant": "#00530e",
|
|
"primary-fixed": "#dbe1ff",
|
|
"on-secondary-fixed": "#002203",
|
|
"tertiary-fixed": "#ffdbcc",
|
|
"surface-container": "#ebeef6",
|
|
"inverse-on-surface": "#eef1f9",
|
|
"tertiary-fixed-dim": "#ffb695",
|
|
"primary": "#0050d6",
|
|
"tertiary": "#9e3e00",
|
|
"on-primary": "#ffffff",
|
|
"surface": "#f8f9ff",
|
|
"secondary-fixed": "#72ff70",
|
|
"surface-container-low": "#f1f3fc",
|
|
"on-secondary-container": "#007317",
|
|
"on-primary-fixed-variant": "#003ea8",
|
|
"surface-bright": "#f8f9ff",
|
|
"error": "#ba1a1a",
|
|
"on-primary-container": "#fefcff",
|
|
"on-error-container": "#93000a",
|
|
"surface-tint": "#0053db",
|
|
"surface-container-high": "#e5e8f0",
|
|
"primary-fixed-dim": "#b4c5ff",
|
|
"on-tertiary-fixed": "#351000",
|
|
"secondary": "#006e16",
|
|
"outline-variant": "#c3c6d8",
|
|
"primary-container": "#2a6af9",
|
|
"tertiary-container": "#c64f00",
|
|
"on-error": "#ffffff",
|
|
"outline": "#737687",
|
|
"on-primary-fixed": "#00174b",
|
|
"on-tertiary": "#ffffff",
|
|
"surface-variant": "#dfe2eb",
|
|
"surface-container-highest": "#dfe2eb",
|
|
"background": "#f8f9ff",
|
|
"on-surface-variant": "#424655",
|
|
"inverse-primary": "#b4c5ff",
|
|
"error-container": "#ffdad6",
|
|
"surface-container-lowest": "#ffffff",
|
|
"on-surface": "#181c22",
|
|
"on-background": "#181c22",
|
|
"surface-dim": "#d7dae2",
|
|
"inverse-surface": "#2d3137"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"xs": "4px",
|
|
"sm": "8px",
|
|
"xl": "32px",
|
|
"lg": "24px",
|
|
"xxl": "48px",
|
|
"md": "16px"
|
|
},
|
|
"fontFamily": {
|
|
"h1": ["Inter"],
|
|
"body-lg": ["Inter"],
|
|
"caption": ["Inter"],
|
|
"label-sm": ["Inter"],
|
|
"label-md": ["Inter"],
|
|
"h2": ["Inter"],
|
|
"body-md": ["Inter"],
|
|
"display": ["Inter"]
|
|
},
|
|
"fontSize": {
|
|
"h1": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"caption": ["12px", {"lineHeight": "18px", "fontWeight": "400"}],
|
|
"label-sm": ["12px", {"lineHeight": "18px", "fontWeight": "500"}],
|
|
"label-md": ["14px", {"lineHeight": "20px", "fontWeight": "500"}],
|
|
"h2": ["20px", {"lineHeight": "28px", "fontWeight": "600"}],
|
|
"body-md": ["14px", {"lineHeight": "22px", "fontWeight": "400"}],
|
|
"display": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
|
|
</style>
|
|
<style>
|
|
body {
|
|
min-height: max(884px, 100dvh);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background font-body-md text-on-surface">
|
|
<!-- TopAppBar (Shared Component) -->
|
|
<header class="bg-white/95 dark:bg-gray-900/95 backdrop-blur-md border-b border-gray-100 dark:border-gray-800 shadow-[0_2px_8px_rgba(31,35,41,0.05)] docked full-width top-0 z-50 flex justify-between items-center w-full px-5 h-14 sticky">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-surface-container overflow-hidden">
|
|
<img alt="User profile picture" class="w-full h-full object-cover" data-alt="Professional user profile avatar, clean studio lighting, corporate portrait style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCT4cKJjjNf_zHTwYYavMwaIZ5Pue4eCFDGXRAkRd40xJDoth2_510nLh14qwg0QI6dgDlJ8P9bNYt0HwXlivh8T7KkKBFTxbEJQFzS5MQ5Mb5nrH77PEAoDABLYpxrtByin2NP8IhwoAWj4fzWGYx0ZcVdjDz12h0t_-FlXFXn7VbUjg6wwuuv7RPDRvE884hKJfTwAymKc_eQ5ckwc1xkju1ujyC47V8huYsrwojeuxXKaVxsCub_hajI2VIb716jLLmemIcmdF3M"/>
|
|
</div>
|
|
<h1 class="font-['Inter'] text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100">NetGuard Workspace</h1>
|
|
</div>
|
|
<button class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors p-2 rounded-lg">
|
|
<span class="material-symbols-outlined text-gray-500 dark:text-gray-400" data-icon="settings">settings</span>
|
|
</button>
|
|
</header>
|
|
<main class="max-w-md mx-auto px-md py-lg space-y-md">
|
|
<!-- Error State Card (Feishu style primary warning) -->
|
|
<div class="bg-[#FFF2F0] border border-[#FFCCC7] rounded-xl p-md flex gap-md items-start shadow-sm">
|
|
<div class="mt-1 flex-shrink-0">
|
|
<span class="material-symbols-outlined text-[#F5222D]" data-icon="error">error</span>
|
|
</div>
|
|
<div class="flex flex-col gap-xs">
|
|
<h3 class="font-h2 text-body-md text-[#1F2329] font-bold">Netclient not detected</h3>
|
|
<p class="text-on-surface-variant font-body-md text-[#4E5969]">Please install Netmaker netclient to continue. This is required to establish a secure connection.</p>
|
|
<div class="mt-sm flex gap-sm">
|
|
<button class="px-md py-1.5 bg-[#F5222D] text-white rounded-lg font-label-md hover:bg-red-600 transition-all active:scale-95 shadow-sm">
|
|
Install Client
|
|
</button>
|
|
<button class="px-md py-1.5 bg-white border border-[#DEE0E3] text-[#1F2329] rounded-lg font-label-md hover:bg-gray-50 transition-all active:scale-95">
|
|
Documentation
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Connection Status Area (Disabled State) -->
|
|
<div class="bg-surface-container-lowest rounded-xl p-lg border border-surface-variant shadow-[0_2px_12px_rgba(31,35,41,0.04)] flex flex-col items-center text-center">
|
|
<div class="w-20 h-20 rounded-full bg-surface-container flex items-center justify-center mb-md relative">
|
|
<span class="material-symbols-outlined text-outline text-[40px]" data-icon="link_off">link_off</span>
|
|
<div class="absolute -top-1 -right-1 w-6 h-6 rounded-full bg-error flex items-center justify-center border-2 border-white">
|
|
<span class="material-symbols-outlined text-white text-[14px]" data-icon="close">close</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-lg">
|
|
<h2 class="font-h1 text-on-surface">Disconnected</h2>
|
|
<p class="font-body-md text-on-surface-variant mt-xs">Connection unavailable</p>
|
|
</div>
|
|
<!-- Action Button (Refresh) -->
|
|
<button class="w-full py-xl bg-white border-2 border-dashed border-outline-variant text-outline hover:bg-surface-container-low transition-all flex flex-col items-center justify-center rounded-xl gap-sm group">
|
|
<span class="material-symbols-outlined text-display group-hover:rotate-180 transition-transform duration-500" data-icon="refresh">refresh</span>
|
|
<span class="font-label-md font-semibold">Refresh Status</span>
|
|
</button>
|
|
</div>
|
|
<!-- Console Output (Tech focus) -->
|
|
<div class="bg-[#1F2329] rounded-xl overflow-hidden border border-gray-800 shadow-lg">
|
|
<div class="bg-[#2D3137] px-md py-xs flex justify-between items-center">
|
|
<span class="text-[10px] uppercase tracking-wider text-gray-400 font-bold">System Diagnostics</span>
|
|
<div class="flex gap-1.5">
|
|
<div class="w-2 h-2 rounded-full bg-[#FF4D4F]"></div>
|
|
<div class="w-2 h-2 rounded-full bg-[#FFC53D]"></div>
|
|
<div class="w-2 h-2 rounded-full bg-[#52C41A]"></div>
|
|
</div>
|
|
</div>
|
|
<div class="p-md font-mono text-[12px] space-y-1">
|
|
<div class="flex gap-2">
|
|
<span class="text-gray-500">[14:22:01]</span>
|
|
<span class="text-blue-400">INFO</span>
|
|
<span class="text-gray-300">Initializing NetGuard Core...</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<span class="text-gray-500">[14:22:02]</span>
|
|
<span class="text-blue-400">INFO</span>
|
|
<span class="text-gray-300">Searching for netclient binary in /usr/local/bin</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<span class="text-gray-500">[14:22:02]</span>
|
|
<span class="text-[#FF4D4F]">ERROR</span>
|
|
<span class="text-white font-bold">netclient command not found</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<span class="text-gray-500">[14:22:03]</span>
|
|
<span class="text-[#FFC53D]">WARN</span>
|
|
<span class="text-gray-300 italic">Kernel modules for WireGuard not loaded</span>
|
|
</div>
|
|
<div class="flex gap-2 animate-pulse">
|
|
<span class="text-gray-500">[14:22:05]</span>
|
|
<span class="text-gray-300">Waiting for status check... _</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Secondary Action Items -->
|
|
<div class="grid grid-cols-2 gap-md">
|
|
<div class="bg-surface-container-low p-md rounded-xl border border-surface-variant hover:bg-surface-container-high transition-colors cursor-pointer group">
|
|
<div class="w-8 h-8 rounded-lg bg-white flex items-center justify-center mb-sm shadow-sm group-hover:scale-110 transition-transform">
|
|
<span class="material-symbols-outlined text-primary text-[20px]" data-icon="help">help</span>
|
|
</div>
|
|
<div class="font-label-md text-on-surface">Get Help</div>
|
|
<div class="font-caption text-on-surface-variant">View troubleshooting</div>
|
|
</div>
|
|
<div class="bg-surface-container-low p-md rounded-xl border border-surface-variant hover:bg-surface-container-high transition-colors cursor-pointer group">
|
|
<div class="w-8 h-8 rounded-lg bg-white flex items-center justify-center mb-sm shadow-sm group-hover:scale-110 transition-transform">
|
|
<span class="material-symbols-outlined text-primary text-[20px]" data-icon="upload_file">upload_file</span>
|
|
</div>
|
|
<div class="font-label-md text-on-surface">Export Logs</div>
|
|
<div class="font-caption text-on-surface-variant">For support ticket</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- BottomNavBar (Shared Component) -->
|
|
<nav class="bg-white dark:bg-gray-900 border-t border-gray-100 dark:border-gray-800 shadow-[0_-2px_10px_rgba(31,35,41,0.03)] fixed bottom-0 w-full z-50 pb-safe flex justify-around items-center h-16 px-2">
|
|
<!-- Connection (Active State Determined by Intent) -->
|
|
<a class="flex flex-col items-center justify-center text-[#3370FF] dark:text-blue-400 active:scale-95 transition-transform duration-150" href="#">
|
|
<span class="material-symbols-outlined" data-icon="security" style="font-variation-settings: 'FILL' 1;">security</span>
|
|
<span class="font-['Inter'] text-[11px] font-medium">Connection</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 hover:text-[#3370FF] dark:hover:text-blue-300 active:scale-95 transition-transform duration-150" href="#">
|
|
<span class="material-symbols-outlined" data-icon="devices">devices</span>
|
|
<span class="font-['Inter'] text-[11px] font-medium">Devices</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 hover:text-[#3370FF] dark:hover:text-blue-300 active:scale-95 transition-transform duration-150" href="#">
|
|
<span class="material-symbols-outlined" data-icon="list_alt">list_alt</span>
|
|
<span class="font-['Inter'] text-[11px] font-medium">Logs</span>
|
|
</a>
|
|
<a class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 hover:text-[#3370FF] dark:hover:text-blue-300 active:scale-95 transition-transform duration-150" href="#">
|
|
<span class="material-symbols-outlined" data-icon="person">person</span>
|
|
<span class="font-['Inter'] text-[11px] font-medium">Profile</span>
|
|
</a>
|
|
</nav>
|
|
<!-- Content buffer for fixed bottom nav -->
|
|
<div class="h-24"></div>
|
|
</body></html> |