Initial commit: abyssVpn project
- Tauri desktop app (apps/desktop) - Python Django API service (services/api) - Deployment scripts and docs
This commit is contained in:
arthur_chen
@@ -0,0 +1,240 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>NetGuard Workspace - Connecting</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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 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;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
.connecting-spinner {
|
||||
border: 4px solid #DEE0E3;
|
||||
border-top: 4px solid #3370FF;
|
||||
border-radius: 50%;
|
||||
width: 112px;
|
||||
height: 112px;
|
||||
animation: spin 1.2s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-[#F5F6F7] font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<header class="bg-white/95 backdrop-blur-md border-b border-gray-100 shadow-[0_2px_8px_rgba(31,35,41,0.05)] docked full-width top-0 z-50 fixed w-full">
|
||||
<div class="flex justify-between items-center w-full px-5 h-14">
|
||||
<div class="flex items-center gap-3">
|
||||
<div class="w-8 h-8 rounded-full bg-primary-fixed-dim flex items-center justify-center overflow-hidden">
|
||||
<img alt="Profile" class="w-full h-full object-cover" data-alt="close-up portrait of a professional man with a friendly expression in a corporate setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDEOjt9qA7tP4QXXzXyr4mTl6c5PsuyiWXUnZqyIjmHcFcCsKw13_GVk4zBimi1ohboQEDtIfFnCWdMjY3wXAJWxuEd3C4LK9kN3Hpx6ToR6IlkXLpgSG_XLVd_RpPx0jcAKfxL0l0qL8z19m_Zrc8CnbvKold2PBFHVoTI1eLj44fKyo71NcyvRYKEwvgz-V_MvsRsup9kWFo5ITUYGtAtBSa1u_EhF7Hxknj0bCnIeXLtkFQ7NBlj0z7i-jxwStd59fRY_vuS823g"/>
|
||||
</div>
|
||||
<h1 class="text-xl font-bold text-[#1F2329] font-['Inter']">NetGuard Workspace</h1>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-50 transition-colors active:opacity-70">
|
||||
<span class="material-symbols-outlined text-gray-500" data-icon="settings">settings</span>
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
<main class="pt-20 pb-24 px-md max-w-lg mx-auto min-h-screen flex flex-col">
|
||||
<!-- Connection State Canvas -->
|
||||
<section class="flex-1 flex flex-col items-center justify-center py-xl">
|
||||
<!-- Animated Central Button (Connecting State) -->
|
||||
<div class="relative flex items-center justify-center mb-lg">
|
||||
<!-- Spinner outer ring -->
|
||||
<div class="connecting-spinner absolute"></div>
|
||||
<!-- Inner button core -->
|
||||
<button class="w-24 h-24 rounded-full bg-white shadow-xl flex items-center justify-center z-10 transition-transform active:scale-95">
|
||||
<span class="material-symbols-outlined text-[40px] text-[#3370FF]" data-icon="security" data-weight="fill" style="font-variation-settings: 'FILL' 1;">security</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-center space-y-2">
|
||||
<h2 class="font-h1 text-h1 text-[#9e3e00]">Connecting...</h2>
|
||||
<div class="flex flex-col items-center gap-1 opacity-80">
|
||||
<p class="font-body-md text-label-md text-on-surface-variant">Fetching VPN Token...</p>
|
||||
<p class="font-caption text-caption text-outline">Joining netclient...</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Bento Information Grid -->
|
||||
<section class="grid grid-cols-2 gap-md mt-auto">
|
||||
<!-- Selected Server Card -->
|
||||
<div class="col-span-2 bg-white p-lg rounded-xl shadow-[0_2px_10px_rgba(31,35,41,0.03)] flex items-center justify-between border border-gray-100">
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container-low flex items-center justify-center">
|
||||
<img alt="USA Flag" class="w-6 h-auto" data-alt="minimalist graphic representation of the United States flag for interface use" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCpdBaDrjKaGjuUTMjHKeAU3gKzNpmUBYiNdoSHB_hszldrehLKSZlTzReAA_L_ygr7CckHeCnhHH5V8CIcZJiX1j4weUQ-3m7_NukSH6PUL0UO3F-fBUSXubrKJEhTyYnU0IZcJ5Mawsa5qm3Kg02VtrdozZ0WjjBZKEXHYq1253quYeSPZgITlTjVZL9OLvBV73Spcw8tLGpAkK-f9XLA32XO9Mxny6h2aPjL5Rz4mh2lvh3sBsEYTThJ7P7uDMtNdbj-pQlAjIcr"/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="font-label-md text-label-md text-outline">Selected Node</p>
|
||||
<p class="font-h2 text-h2 text-on-surface">Silicon Valley, USA</p>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline" data-icon="chevron_right">chevron_right</span>
|
||||
</div>
|
||||
<!-- Protocol Chip -->
|
||||
<div class="bg-white p-md rounded-xl shadow-[0_2px_10px_rgba(31,35,41,0.03)] border border-gray-100 flex flex-col gap-1">
|
||||
<p class="font-caption text-caption text-outline">Protocol</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="w-2 h-2 rounded-full bg-primary animate-pulse"></span>
|
||||
<p class="font-label-md text-label-md text-on-surface">WireGuard</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- IP Address (Placeholder/Loading) -->
|
||||
<div class="bg-white p-md rounded-xl shadow-[0_2px_10px_rgba(31,35,41,0.03)] border border-gray-100 flex flex-col gap-1">
|
||||
<p class="font-caption text-caption text-outline">New IP</p>
|
||||
<div class="h-5 w-20 bg-gray-100 rounded animate-pulse"></div>
|
||||
</div>
|
||||
<!-- Connection Stats (Disabled/Blurred-ish during connecting) -->
|
||||
<div class="col-span-2 bg-surface-container-lowest p-lg rounded-xl border border-gray-100 border-dashed flex justify-around">
|
||||
<div class="text-center">
|
||||
<span class="material-symbols-outlined text-outline block mb-1" data-icon="arrow_downward">arrow_downward</span>
|
||||
<p class="font-label-sm text-label-sm text-outline">0.0 Kb/s</p>
|
||||
</div>
|
||||
<div class="w-[1px] h-8 bg-gray-100"></div>
|
||||
<div class="text-center">
|
||||
<span class="material-symbols-outlined text-outline block mb-1" data-icon="arrow_upward">arrow_upward</span>
|
||||
<p class="font-label-sm text-label-sm text-outline">0.0 Kb/s</p>
|
||||
</div>
|
||||
<div class="w-[1px] h-8 bg-gray-100"></div>
|
||||
<div class="text-center">
|
||||
<span class="material-symbols-outlined text-outline block mb-1" data-icon="timer">timer</span>
|
||||
<p class="font-label-sm text-label-sm text-outline">00:00:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="bg-white fixed bottom-0 w-full z-50 pb-safe border-t border-gray-100 shadow-[0_-2px_10px_rgba(31,35,41,0.03)]">
|
||||
<div class="flex justify-around items-center h-16 w-full px-2">
|
||||
<!-- Connection Tab (Active) -->
|
||||
<a class="flex flex-col items-center justify-center text-[#3370FF] transition-transform duration-150 active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="security" data-weight="fill" style="font-variation-settings: 'FILL' 1;">security</span>
|
||||
<span class="font-['Inter'] text-[11px] font-medium">Connection</span>
|
||||
</a>
|
||||
<!-- Devices Tab -->
|
||||
<a class="flex flex-col items-center justify-center text-gray-500 hover:text-[#3370FF] transition-transform duration-150 active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="devices">devices</span>
|
||||
<span class="font-['Inter'] text-[11px] font-medium">Devices</span>
|
||||
</a>
|
||||
<!-- Logs Tab -->
|
||||
<a class="flex flex-col items-center justify-center text-gray-500 hover:text-[#3370FF] transition-transform duration-150 active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="list_alt">list_alt</span>
|
||||
<span class="font-['Inter'] text-[11px] font-medium">Logs</span>
|
||||
</a>
|
||||
<!-- Profile Tab -->
|
||||
<a class="flex flex-col items-center justify-center text-gray-500 hover:text-[#3370FF] transition-transform duration-150 active:scale-95" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
<span class="font-['Inter'] text-[11px] font-medium">Profile</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 130 KiB |
@@ -0,0 +1,216 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&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 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;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; background-color: #F5F6F7; }
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface-container-lowest text-on-surface antialiased min-h-screen flex flex-col">
|
||||
<!-- TopAppBar -->
|
||||
<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)] sticky top-0 z-50 flex justify-between items-center w-full px-5 h-14">
|
||||
<div class="flex items-center gap-sm">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container overflow-hidden">
|
||||
<img alt="User" class="w-full h-full object-cover" data-alt="Portrait of a professional user for profile avatar in a clean minimalist style" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDrQino6RuDosdoTJseFyoOc6C9UdWf3o8LmsU9RD767Flvo6yiLNjcxRQa0DeXdoj2gMgiZ9wLIHNYlvoBa28AOdytYcU6_xsLzQonQtffQwz0zRSonfYbp7UPWSz4rhKoHaQ5uf657I8XtRRqygdSaDHAVHd3h4rwD5FOUpoZEFK0xkGQzfVHNBWwXfmmVOgS-ch0ojzJMG2dcUlnLLzX5Yska9oI9xADuRCH7mkYbxWe_KJ1Kt78dXiSWClJmpPaf7USDDPS48ZG"/>
|
||||
</div>
|
||||
</div>
|
||||
<h1 class="text-xl font-bold text-[#1F2329] dark:text-white font-['Inter'] tracking-tight">NetGuard Workspace</h1>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors active:opacity-70">
|
||||
<span class="material-symbols-outlined text-gray-500" data-icon="settings">settings</span>
|
||||
</button>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="flex-grow flex flex-col items-center px-lg pt-xl pb-xxl max-w-lg mx-auto w-full">
|
||||
<!-- Status Indicator -->
|
||||
<div class="flex flex-col items-center mb-xl">
|
||||
<div class="px-md py-xs bg-error-container rounded-full mb-md">
|
||||
<span class="font-label-md text-error flex items-center gap-xs">
|
||||
<span class="w-2 h-2 rounded-full bg-error"></span>
|
||||
Disconnected
|
||||
</span>
|
||||
</div>
|
||||
<p class="font-body-md text-on-surface-variant">Tap to secure your connection</p>
|
||||
</div>
|
||||
<!-- Connection Hub (Bento Pattern) -->
|
||||
<div class="w-full relative flex flex-col items-center py-xl">
|
||||
<!-- Pulsing Ring Background -->
|
||||
<!-- Central Connect Button -->
|
||||
<button class="relative z-10 w-48 h-48 rounded-full bg-white shadow-[0_16px_32px_rgba(31,35,41,0.08)] border-8 border-surface-container-low flex flex-col items-center justify-center group active:scale-95 transition-all duration-200">
|
||||
<div class="w-24 h-24 rounded-full flex items-center justify-center mb-sm bg-gray-50 border border-gray-100">
|
||||
<span class="material-symbols-outlined text-[48px] text-primary" data-icon="power_settings_new">power_settings_new</span>
|
||||
</div>
|
||||
<span class="font-label-md text-primary font-bold tracking-wider">CONNECT</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Server Selection Card -->
|
||||
<div class="w-full mt-xl">
|
||||
<div class="bg-white rounded-xl p-md border border-gray-100 shadow-[0_2px_8px_rgba(31,35,41,0.05)] hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-between">
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container-low flex items-center justify-center overflow-hidden">
|
||||
<img alt="Germany" class="w-6 h-6 object-contain" data-alt="Small crisp icon representing the German flag with vibrant colors" src="https://lh3.googleusercontent.com/aida-public/AB6AXuCYeXS0hdKWWwqWTO58Gbx1s456kPWZDj-MOFsRfAE8gkFYW3sy2p0SfU3WjHCzo-FM2fCqZY2s1VlDpLAchGx44_a5Cxt9MYHYdPctnJpseN6ZJQtBrocLSVNsWwxPz-H5BvC5Fwhy0Ee33I3gp2k3XKQ3X12_fgC_LFkACAIV_cVffishupFsxWNFbWdn4T7bWhKXvre634y2FXx_NLji9DSXfq8dqWoY69SHoWT7Uwy_6pbbdc5-N0YAqX1oEwUN7WRsWzrwcIyb"/>
|
||||
</div>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-md text-on-surface">Frankfurt, Germany</span>
|
||||
<span class="font-caption text-on-surface-variant flex items-center gap-xs">
|
||||
<span class="material-symbols-outlined text-[14px] text-secondary" data-icon="signal_cellular_alt">signal_cellular_alt</span>
|
||||
Optimal Latency (24ms)
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-outline" data-icon="chevron_right">chevron_right</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Metrics Grid -->
|
||||
<div class="grid grid-cols-2 gap-md w-full mt-md">
|
||||
<!-- Duration Card -->
|
||||
<div class="bg-white rounded-xl p-md border border-gray-100 shadow-[0_2px_8px_rgba(31,35,41,0.05)]">
|
||||
<div class="flex items-center gap-xs mb-xs">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[18px]" data-icon="schedule">schedule</span>
|
||||
<span class="font-caption text-on-surface-variant uppercase tracking-wider">Duration</span>
|
||||
</div>
|
||||
<div class="font-h2 text-on-surface">00:00:00</div>
|
||||
</div>
|
||||
<!-- Usage Card -->
|
||||
<div class="bg-white rounded-xl p-md border border-gray-100 shadow-[0_2px_8px_rgba(31,35,41,0.05)]">
|
||||
<div class="flex items-center gap-xs mb-xs">
|
||||
<span class="material-symbols-outlined text-on-surface-variant text-[18px]" data-icon="database">database</span>
|
||||
<span class="font-caption text-on-surface-variant uppercase tracking-wider">Data Usage</span>
|
||||
</div>
|
||||
<div class="font-h2 text-on-surface">0.00 MB</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Informational Banner -->
|
||||
<div class="w-full mt-md p-md bg-primary-fixed/30 rounded-xl border border-primary-fixed flex gap-md items-start">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="info">info</span>
|
||||
<div class="flex flex-col">
|
||||
<span class="font-label-md text-on-primary-fixed-variant">Privacy Shield</span>
|
||||
<p class="font-body-md text-on-primary-fixed-variant opacity-80">Your IP address is currently visible to websites and trackers.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<nav class="bg-white dark:bg-gray-900 fixed bottom-0 w-full z-50 pb-safe border-t border-gray-100 dark:border-gray-800 shadow-[0_-2px_10px_rgba(31,35,41,0.03)] flex justify-around items-center h-16 w-full px-2">
|
||||
<!-- Connection Tab (Active) -->
|
||||
<div class="flex flex-col items-center justify-center text-[#3370FF] dark:text-blue-400 font-['Inter'] text-[11px] font-medium active:scale-95 transition-transform duration-150 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="security" data-weight="fill" style="font-variation-settings: 'FILL' 1;">security</span>
|
||||
<span class="mt-1">Connection</span>
|
||||
</div>
|
||||
<!-- Devices Tab -->
|
||||
<div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 font-['Inter'] text-[11px] font-medium hover:text-[#3370FF] active:scale-95 transition-all duration-150 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="devices">devices</span>
|
||||
<span class="mt-1">Devices</span>
|
||||
</div>
|
||||
<!-- Logs Tab -->
|
||||
<div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 font-['Inter'] text-[11px] font-medium hover:text-[#3370FF] active:scale-95 transition-all duration-150 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="list_alt">list_alt</span>
|
||||
<span class="mt-1">Logs</span>
|
||||
</div>
|
||||
<!-- Profile Tab -->
|
||||
<div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 font-['Inter'] text-[11px] font-medium hover:text-[#3370FF] active:scale-95 transition-all duration-150 cursor-pointer">
|
||||
<span class="material-symbols-outlined" data-icon="person">person</span>
|
||||
<span class="mt-1">Profile</span>
|
||||
</div>
|
||||
</nav>
|
||||
<!-- Map Background Aesthetics (Subtle overlay) -->
|
||||
<div class="fixed inset-0 -z-10 opacity-[0.03] pointer-events-none">
|
||||
<img alt="Map" class="w-full h-full object-cover" data-alt="Faded abstract world map graphic with clean minimalist line work and soft neutral gray tones" data-location="Frankfurt" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBlHVC0mEVIqxEf2K6zP63dbd52cu_jf3Ba1xPvWdGr8PYxViPDaFKw4Kcb5UJSOBE6oDue2RwmJbbDUWCmLJ4U2E6N-cNMJmPBgMT2FLp6sF4UODY7Ln6WI0F8YEMHbLySyfau_B7N1zPK7alLEbgH2vpWj-u9W1KNm1yzoU6uu4RP8TKbrEJHxivEJCZkkjNlurkcuwj9dBgrB0eQqeTwbKZlJRHxCSCteCprFbhrRVHU9wwrAvT3RX3W5S1Nh7UMNIYmudxmMSD3"/>
|
||||
</div>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 199 KiB |
@@ -0,0 +1,242 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0, viewport-fit=cover" name="viewport"/>
|
||||
<title>NetGuard Workspace - Connected</title>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<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 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;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
}
|
||||
.glow-ring {
|
||||
box-shadow: 0 0 30px 2px rgba(107, 253, 106, 0.4);
|
||||
}
|
||||
body {
|
||||
background-color: #F5F6F7;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
body {
|
||||
min-height: max(884px, 100dvh);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="font-body-md text-on-surface">
|
||||
<!-- TopAppBar -->
|
||||
<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)] flex justify-between items-center w-full px-5 h-14 fixed top-0 z-50">
|
||||
<div class="flex items-center gap-md">
|
||||
<div class="w-8 h-8 rounded-full bg-surface-container-high overflow-hidden">
|
||||
<img alt="User Profile" class="w-full h-full object-cover" data-alt="close up professional headshot of a friendly software engineer in a neutral modern workspace environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAQG9CPq5pjfC-F-JVvJFS8Lnm2VNZJirLA0IwizTwKsyRyxcl74mSOUy2QBCjIpSzAIJ0HMCKTnAM-TM20XHjhe8jrZMh30nysyP1OYTmEWV2pCeSXeiEVk_4_ALk0bhRxaMboa3g8TNtY625q6ulVJyw_ERncbwfljlrHxJ2azLkhDfS22OnJvisgcjghdjx1WLhT5ySBwHpQRsRcD7-mdd3w0_1YtcBKPH5AMZh8Bx4EIcP-8OpnX2lka-1wLsnFKVpoSGKVCOjd"/>
|
||||
</div>
|
||||
<h1 class="font-['Inter'] text-lg font-semibold tracking-tight text-gray-900 dark:text-gray-100">NetGuard Workspace</h1>
|
||||
</div>
|
||||
<button class="w-10 h-10 flex items-center justify-center rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors active:opacity-70">
|
||||
<span class="material-symbols-outlined text-gray-500" data-icon="settings">settings</span>
|
||||
</button>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="pt-20 pb-24 px-lg max-w-lg mx-auto space-y-lg">
|
||||
<!-- Connection Status & Button Hero -->
|
||||
<section class="flex flex-col items-center justify-center py-lg space-y-md">
|
||||
<!-- Connection Ring Visualization -->
|
||||
<div class="relative flex items-center justify-center">
|
||||
<div class="absolute w-56 h-56 rounded-full border-2 border-secondary-container/20 animate-pulse"></div>
|
||||
<div class="absolute w-48 h-48 rounded-full border border-secondary-container/30"></div>
|
||||
<button class="relative w-40 h-40 bg-white rounded-full flex flex-col items-center justify-center shadow-xl border-4 border-secondary-container glow-ring active:scale-95 transition-all duration-150">
|
||||
<span class="material-symbols-outlined text-secondary text-[48px] mb-xs" data-icon="power_settings_new" data-weight="fill" style="font-variation-settings: 'FILL' 1;">power_settings_new</span>
|
||||
<span class="font-label-md text-on-surface tracking-wide">Disconnect</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-center space-y-xs">
|
||||
<div class="flex items-center justify-center gap-xs">
|
||||
<div class="w-2 h-2 rounded-full bg-secondary"></div>
|
||||
<p class="font-h2 text-secondary">VPN Connected</p>
|
||||
</div>
|
||||
<p class="font-caption text-outline">Secure tunnel established via WireGuard</p>
|
||||
</div>
|
||||
</section>
|
||||
<!-- IP Display Card -->
|
||||
<div class="bg-white rounded-xl p-lg shadow-[0_2px_12px_rgba(31,35,41,0.04)] border border-gray-50">
|
||||
<div class="flex items-center justify-between">
|
||||
<div>
|
||||
<p class="font-caption text-outline mb-xs">Virtual IP Address</p>
|
||||
<p class="font-display text-primary tracking-tight">10.8.0.42</p>
|
||||
</div>
|
||||
<div class="p-md bg-primary-fixed rounded-lg">
|
||||
<span class="material-symbols-outlined text-primary" data-icon="vpn_lock">vpn_lock</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Stats Grid -->
|
||||
<div class="grid grid-cols-2 gap-md">
|
||||
<!-- Uptime Card -->
|
||||
<div class="bg-white rounded-xl p-md shadow-[0_2px_12px_rgba(31,35,41,0.04)] border border-gray-50 flex flex-col">
|
||||
<div class="flex items-center gap-xs mb-sm">
|
||||
<span class="material-symbols-outlined text-outline text-body-lg" data-icon="schedule">schedule</span>
|
||||
<span class="font-label-sm text-outline">Uptime</span>
|
||||
</div>
|
||||
<p class="font-h2 text-on-surface">04:12:15</p>
|
||||
</div>
|
||||
<!-- Transfer Speed Card -->
|
||||
<div class="bg-white rounded-xl p-md shadow-[0_2px_12px_rgba(31,35,41,0.04)] border border-gray-50 flex flex-col">
|
||||
<div class="flex items-center gap-xs mb-sm">
|
||||
<span class="material-symbols-outlined text-outline text-body-lg" data-icon="speed">speed</span>
|
||||
<span class="font-label-sm text-outline">Transfer Speed</span>
|
||||
</div>
|
||||
<p class="font-h2 text-on-surface">1.2 MB/s</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Recent Activity -->
|
||||
<section class="space-y-md">
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="font-h2 text-on-surface">Recent Activity</h3>
|
||||
<button class="text-primary font-label-md">View All</button>
|
||||
</div>
|
||||
<div class="bg-white rounded-xl overflow-hidden shadow-[0_2px_12px_rgba(31,35,41,0.04)] border border-gray-50">
|
||||
<!-- Activity Item 1 -->
|
||||
<div class="flex items-center gap-md p-md border-b border-gray-50 hover:bg-gray-50 transition-colors">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container-low flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-outline" data-icon="laptop_mac">laptop_mac</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-label-md text-on-surface">MacBook Pro 16"</p>
|
||||
<p class="font-caption text-outline">Connected 5m ago • Office</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-secondary" data-icon="check_circle" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
<!-- Activity Item 2 -->
|
||||
<div class="flex items-center gap-md p-md hover:bg-gray-50 transition-colors">
|
||||
<div class="w-10 h-10 rounded-lg bg-surface-container-low flex items-center justify-center">
|
||||
<span class="material-symbols-outlined text-outline" data-icon="smartphone">smartphone</span>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<p class="font-label-md text-on-surface">iPhone 15 Pro</p>
|
||||
<p class="font-caption text-outline">Connected 12m ago • Mobile</p>
|
||||
</div>
|
||||
<span class="material-symbols-outlined text-secondary" data-icon="check_circle" data-weight="fill" style="font-variation-settings: 'FILL' 1;">check_circle</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
<!-- BottomNavBar -->
|
||||
<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">
|
||||
<div class="flex justify-around items-center h-16 w-full px-2">
|
||||
<!-- Connection (Active) -->
|
||||
<div class="flex flex-col items-center justify-center text-[#3370FF] dark:text-blue-400 active:scale-95 transition-transform duration-150">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="security" data-weight="fill" style="font-variation-settings: 'FILL' 1;">security</span>
|
||||
<span class="font-['Inter'] text-[11px] font-medium">Connection</span>
|
||||
</div>
|
||||
<!-- Devices -->
|
||||
<div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 hover:text-[#3370FF] active:scale-95 transition-transform duration-150">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="devices">devices</span>
|
||||
<span class="font-['Inter'] text-[11px] font-medium">Devices</span>
|
||||
</div>
|
||||
<!-- Logs -->
|
||||
<div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 hover:text-[#3370FF] active:scale-95 transition-transform duration-150">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="list_alt">list_alt</span>
|
||||
<span class="font-['Inter'] text-[11px] font-medium">Logs</span>
|
||||
</div>
|
||||
<!-- Profile -->
|
||||
<div class="flex flex-col items-center justify-center text-gray-500 dark:text-gray-400 hover:text-[#3370FF] active:scale-95 transition-transform duration-150">
|
||||
<span class="material-symbols-outlined mb-1" data-icon="person">person</span>
|
||||
<span class="font-['Inter'] text-[11px] font-medium">Profile</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</body></html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
@@ -0,0 +1,241 @@
|
||||
<!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>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 191 KiB |
@@ -0,0 +1,171 @@
|
||||
---
|
||||
name: Professional VPN System
|
||||
colors:
|
||||
surface: '#f8f9ff'
|
||||
surface-dim: '#d7dae2'
|
||||
surface-bright: '#f8f9ff'
|
||||
surface-container-lowest: '#ffffff'
|
||||
surface-container-low: '#f1f3fc'
|
||||
surface-container: '#ebeef6'
|
||||
surface-container-high: '#e5e8f0'
|
||||
surface-container-highest: '#dfe2eb'
|
||||
on-surface: '#181c22'
|
||||
on-surface-variant: '#424655'
|
||||
inverse-surface: '#2d3137'
|
||||
inverse-on-surface: '#eef1f9'
|
||||
outline: '#737687'
|
||||
outline-variant: '#c3c6d8'
|
||||
surface-tint: '#0053db'
|
||||
primary: '#0050d6'
|
||||
on-primary: '#ffffff'
|
||||
primary-container: '#2a6af9'
|
||||
on-primary-container: '#fefcff'
|
||||
inverse-primary: '#b4c5ff'
|
||||
secondary: '#006e16'
|
||||
on-secondary: '#ffffff'
|
||||
secondary-container: '#6bfd6a'
|
||||
on-secondary-container: '#007317'
|
||||
tertiary: '#9e3e00'
|
||||
on-tertiary: '#ffffff'
|
||||
tertiary-container: '#c64f00'
|
||||
on-tertiary-container: '#fffbff'
|
||||
error: '#ba1a1a'
|
||||
on-error: '#ffffff'
|
||||
error-container: '#ffdad6'
|
||||
on-error-container: '#93000a'
|
||||
primary-fixed: '#dbe1ff'
|
||||
primary-fixed-dim: '#b4c5ff'
|
||||
on-primary-fixed: '#00174b'
|
||||
on-primary-fixed-variant: '#003ea8'
|
||||
secondary-fixed: '#72ff70'
|
||||
secondary-fixed-dim: '#4ee253'
|
||||
on-secondary-fixed: '#002203'
|
||||
on-secondary-fixed-variant: '#00530e'
|
||||
tertiary-fixed: '#ffdbcc'
|
||||
tertiary-fixed-dim: '#ffb695'
|
||||
on-tertiary-fixed: '#351000'
|
||||
on-tertiary-fixed-variant: '#7b2e00'
|
||||
background: '#f8f9ff'
|
||||
on-background: '#181c22'
|
||||
surface-variant: '#dfe2eb'
|
||||
typography:
|
||||
display:
|
||||
fontFamily: Inter
|
||||
fontSize: 32px
|
||||
fontWeight: '600'
|
||||
lineHeight: 40px
|
||||
letterSpacing: -0.02em
|
||||
h1:
|
||||
fontFamily: Inter
|
||||
fontSize: 24px
|
||||
fontWeight: '600'
|
||||
lineHeight: 32px
|
||||
h2:
|
||||
fontFamily: Inter
|
||||
fontSize: 20px
|
||||
fontWeight: '600'
|
||||
lineHeight: 28px
|
||||
body-lg:
|
||||
fontFamily: Inter
|
||||
fontSize: 16px
|
||||
fontWeight: '400'
|
||||
lineHeight: 24px
|
||||
body-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: '400'
|
||||
lineHeight: 22px
|
||||
label-md:
|
||||
fontFamily: Inter
|
||||
fontSize: 14px
|
||||
fontWeight: '500'
|
||||
lineHeight: 20px
|
||||
label-sm:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: '500'
|
||||
lineHeight: 18px
|
||||
caption:
|
||||
fontFamily: Inter
|
||||
fontSize: 12px
|
||||
fontWeight: '400'
|
||||
lineHeight: 18px
|
||||
rounded:
|
||||
sm: 0.25rem
|
||||
DEFAULT: 0.5rem
|
||||
md: 0.75rem
|
||||
lg: 1rem
|
||||
xl: 1.5rem
|
||||
full: 9999px
|
||||
spacing:
|
||||
xs: 4px
|
||||
sm: 8px
|
||||
md: 16px
|
||||
lg: 24px
|
||||
xl: 32px
|
||||
xxl: 48px
|
||||
---
|
||||
|
||||
## Brand & Style
|
||||
|
||||
The brand personality of the design system is anchored in **Enterprise-grade Reliability** and **Transparent Utility**. It is designed to feel less like a "utility tool" and more like a high-performance "productivity workspace." The interface must evoke a sense of calm, security, and effortless control, moving away from the aggressive aesthetics of consumer VPNs toward a sophisticated, collaborative atmosphere.
|
||||
|
||||
The design style is a blend of **Corporate Modern** and **Minimalism**. It prioritizes clarity through generous whitespace, high-contrast functional elements, and a structured information architecture. The emotional response should be one of "silent protection"—the software remains unobtrusive in the workflow while remaining instantly legible when interaction is required.
|
||||
|
||||
## Colors
|
||||
|
||||
The color system is built around "Feishu Blue" (#3370FF) to represent intelligence and stability. The palette utilizes a clean, high-brightness white base to maintain the "workspace" feel, supported by a sophisticated range of cool grays.
|
||||
|
||||
- **Primary Blue:** Used for primary actions, active states, and branding.
|
||||
- **Semantic Connectivity:** The system uses a strict traffic-light logic for connection status. The "Connected" state uses a vibrant green (#00B42A), while "Disconnected" uses a crisp red (#F53F3F).
|
||||
- **Surface Grays:** The background uses a slightly off-white gray (#F5F6F7) to reduce eye strain, while cards and primary containers use pure white to pop from the background.
|
||||
- **Text Contrast:** Text colors are tiered to ensure deep legibility, with the primary text using a near-black gray (#1F2329) rather than pure black.
|
||||
|
||||
## Typography
|
||||
|
||||
The typography system utilizes **Inter** for its exceptional legibility on digital screens and its neutral, systematic character. The hierarchy is designed to highlight connectivity status and server locations at a glance.
|
||||
|
||||
- **Display & Headlines:** Used for connection status (e.g., "Connected") and primary headers. Tightened letter spacing is used for larger sizes to maintain a professional, compact feel.
|
||||
- **Body Text:** Standardized at 14px for the majority of UI interactions to align with enterprise software standards.
|
||||
- **Labels:** Medium weights (500) are used for interactive UI elements like button text and navigation items to distinguish them from static body content.
|
||||
- **Data Mono (Optional):** While Inter is the primary font, numerical data like IP addresses or latency (ms) should prioritize clarity and alignment.
|
||||
|
||||
## Layout & Spacing
|
||||
|
||||
The layout follows a **Fixed-Fluid Hybrid** model typical of professional desktop clients. A fixed-width left sidebar handles navigation, while the main content area utilizes a fluid grid that expands to fill the window.
|
||||
|
||||
- **The 8px Rhythm:** All margins, paddings, and component heights must be increments of 8px (or 4px for tight internal component spacing).
|
||||
- **Whitespace:** Emphasize generous internal padding within cards (24px) to create the "Lark" workspace feel, ensuring the UI never feels cramped even when displaying complex technical data.
|
||||
- **Alignment:** Content is generally left-aligned to mimic document reading patterns, with the exception of the "Connect" toggle which may be centered for focus.
|
||||
|
||||
## Elevation & Depth
|
||||
|
||||
This design system uses **Tonal Layering** supplemented by **Ambient Shadows** to establish hierarchy.
|
||||
|
||||
- **Base Layer:** The application background is the lowest level (#F5F6F7), acting as the canvas.
|
||||
- **Surface Layer:** Main content areas and sidebar segments use pure white or slightly darker grays to distinguish functional zones.
|
||||
- **Shadows:** Use extremely soft, diffused shadows to lift cards from the background. Shadows should have a large blur (16px+) and very low opacity (4-8%), utilizing a slight blue tint (#1F2329 with 0.05 opacity) rather than pure black to maintain a clean aesthetic.
|
||||
- **Interactions:** On hover, buttons and interactive cards should transition with a subtle elevation increase or a soft inner-glow to provide tactile feedback without visual clutter.
|
||||
|
||||
## Shapes
|
||||
|
||||
The shape language is defined by "Soft Geometry." Rounded corners are used consistently to make the enterprise tool feel approachable and modern.
|
||||
|
||||
- **Standard Components:** Buttons, input fields, and server list items use an 8px radius.
|
||||
- **Container Elements:** Main content cards and the central connection module use a 12px radius to anchor the visual experience.
|
||||
- **Circular Elements:** Toggle switches and status indicators (dots) use full "pill" rounding.
|
||||
- **Borders:** Use thin (1px) borders in soft grays (#DEE0E3) instead of heavy shadows to define boundaries, maintaining a flat, professional look.
|
||||
|
||||
## Components
|
||||
|
||||
Components in this design system follow a minimalist, high-functionality philosophy:
|
||||
|
||||
- **Buttons:**
|
||||
- *Primary:* Solid #3370FF with white text; 8px corners.
|
||||
- *Secondary:* Ghost style with 1px border (#DEE0E3) and primary text.
|
||||
- *Connectivity Toggle:* A large, distinct button or switch that changes color significantly (Green vs Red) based on state.
|
||||
- **Input Fields:** Flat design with a subtle light gray background (#F5F6F7). On focus, the border transitions to Primary Blue with a soft 2px glow.
|
||||
- **Lists (Server Selection):** Clean rows with 14px typography. Include a thin-stroke country flag or icon, name, and a signal strength indicator (3-4 vertical bars).
|
||||
- **Chips/Badges:** Small, rounded-pill shapes used for protocol labels (e.g., "WireGuard", "OpenVPN") using low-saturation background tints of the primary blue.
|
||||
- **Cards:** Used to group connection details (IP, Duration, Data Used). Cards should have a 12px radius and a very subtle shadow to differentiate them from the background.
|
||||
- **Icons:** Use thin-stroke (1.5px) linear icons. Icons should be monochrome (Secondary Text color) unless they represent a specific active status.
|
||||
Reference in New Issue
Block a user