Noel O'Brien
894ff5d8ee
Move the inline CSS and JS into separate files to be more friendly to Content Security Policies. ServeHTTP is updated to serve these assets from the '/static/' path. Updates tailscale/corp#32398 Signed-off-by: Noel O'Brien <noel@tailscale.com>
72 lines
3.4 KiB
HTML
72 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
|
|
<title>Hello from Tailscale</title>
|
|
<link type="text/css" rel="stylesheet" href="/static/style.css">
|
|
<script src="/static/script.js" defer></script>
|
|
</head>
|
|
<body class="bg-gray-100">
|
|
<main class="text-gray-800">
|
|
<svg class="logo mb-6" width="28" height="28" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
<circle opacity="0.2" cx="3.4" cy="3.25" r="2.7" fill="currentColor" />
|
|
<circle cx="3.4" cy="11.3" r="2.7" fill="currentColor" />
|
|
<circle opacity="0.2" cx="3.4" cy="19.5" r="2.7" fill="currentColor" />
|
|
<circle cx="11.5" cy="11.3" r="2.7" fill="currentColor" />
|
|
<circle cx="11.5" cy="19.5" r="2.7" fill="currentColor" />
|
|
<circle opacity="0.2" cx="11.5" cy="3.25" r="2.7" fill="currentColor" />
|
|
<circle opacity="0.2" cx="19.5" cy="3.25" r="2.7" fill="currentColor" />
|
|
<circle cx="19.5" cy="11.3" r="2.7" fill="currentColor" />
|
|
<circle opacity="0.2" cx="19.5" cy="19.5" r="2.7" fill="currentColor" />
|
|
</svg>
|
|
<header class="mb-8 text-center">
|
|
<h1 class="header-title font-title font-semibold mb-2">You're connected over Tailscale!</h1>
|
|
<p class="header-text">This device is signed in as…</p>
|
|
</header>
|
|
<div class="panel relative bg-white rounded-lg width-full shadow-xl mb-8 p-4">
|
|
<div class="spinner text-gray-600">
|
|
<span></span>
|
|
<span></span>
|
|
<span></span>
|
|
</div>
|
|
<div class="panel-interior flex items-center width-full min-width-0 p-2 mb-4">
|
|
<div class="profile-pic bg-gray-100">
|
|
<img
|
|
src="{{.ProfilePicURL}}"
|
|
alt="Profile picture"
|
|
class="profile-pic-img"
|
|
>
|
|
</div>
|
|
<div class="overflow-hidden">
|
|
{{ with .DisplayName }}
|
|
<h4 class="font-semibold truncate">{{.}}</h4>
|
|
{{ end }}
|
|
<h5 class="text-gray-600 truncate">{{.LoginName}}</h5>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="panel-interior border border-gray-200 bg-gray-0 rounded-lg p-2 pl-3 pr-3 mb-2 width-full flex justify-between items-center">
|
|
<div class="flex items-center min-width-0">
|
|
<svg class="text-gray-600 mr-2" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none"
|
|
stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect>
|
|
<rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect>
|
|
<line x1="6" y1="6" x2="6.01" y2="6"></line>
|
|
<line x1="6" y1="18" x2="6.01" y2="18"></line>
|
|
</svg>
|
|
<h4 class="font-semibold truncate mr-2">{{.MachineName}}</h4>
|
|
</div>
|
|
<h5>{{.IP}}</h5>
|
|
</div>
|
|
</div>
|
|
<footer class="footer text-gray-600 text-center mb-12">
|
|
<p>Read about <a href="https://tailscale.com/kb/1017/install#advanced-features" class="text-blue-600 hover:text-blue-800"
|
|
target="_blank">what you can do next →</a></p>
|
|
<p>Read about <a href="https://tailscale.com/kb/1073/hello" class="text-blue-600 hover:text-blue-800"
|
|
target="_blank">the Hello service →</a></p>
|
|
</footer>
|
|
</main>
|
|
</body>
|
|
</html>
|