70 lines
2.4 KiB
HTML
70 lines
2.4 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:;">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Vynte Connect</title>
|
|
</head>
|
|
<body>
|
|
<main class="panel">
|
|
<header class="header">
|
|
<img class="logo-small" src="../resources/VynteIcon.png" alt="">
|
|
<div class="title-block">
|
|
<div class="title">Vynte Connect</div>
|
|
<div id="identity" class="identity">Vynte access</div>
|
|
</div>
|
|
<button id="refresh" class="icon-button" title="Refresh">↻</button>
|
|
</header>
|
|
|
|
<section class="hero">
|
|
<button id="orb" class="orb" aria-label="Connect or disconnect">
|
|
<span class="orb-ring"></span>
|
|
<span class="orb-core"></span>
|
|
<span class="orb-dot"></span>
|
|
<img id="orb-logo" class="orb-logo" src="../resources/VynteIcon.png" alt="">
|
|
<span id="orb-power" class="orb-power">⏻</span>
|
|
</button>
|
|
<div class="status-line">
|
|
<span id="status-dot" class="status-dot"></span>
|
|
<span id="status-title">Checking vpn.vyntehome.com</span>
|
|
</div>
|
|
<div id="status-message" class="message">Preparing the Vynte access client.</div>
|
|
</section>
|
|
|
|
<section class="gateway">
|
|
<div class="server-icon">▦</div>
|
|
<div>
|
|
<div class="label">Gateway</div>
|
|
<div class="mono" data-gateway-host>vpn.vyntehome.com</div>
|
|
</div>
|
|
<span id="gateway-state" class="badge">Offline</span>
|
|
</section>
|
|
|
|
<section id="stats" class="stats hidden">
|
|
<div class="stat">
|
|
<div class="label">Internal IP</div>
|
|
<div id="ip" class="mono">Assigned</div>
|
|
</div>
|
|
<div class="divider"></div>
|
|
<div class="stat">
|
|
<div class="label">Peers</div>
|
|
<div id="peers" class="mono">0/0</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<button id="auto" class="chip">
|
|
<span>⚡</span>
|
|
<span>Auto-connect</span>
|
|
<span id="toggle" class="toggle"><span></span></span>
|
|
</button>
|
|
<span class="spacer"></span>
|
|
<button id="logout" class="icon-button hidden" title="Log out">◉</button>
|
|
<button id="quit" class="icon-button" title="Quit">↪</button>
|
|
</footer>
|
|
</main>
|
|
<script type="module" src="/src/renderer.ts"></script>
|
|
</body>
|
|
</html>
|