yggdrasil-go/contrib/ui/mesh-ui/ui/index.html
2022-12-17 19:52:40 +02:00

186 lines
7.4 KiB
HTML
Executable file

<!DOCTYPE html>
<html class="is-clipped" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RiV-mesh</title>
<link rel="stylesheet" href="assets/all.min.css" type="text/css">
<link rel="stylesheet" href="assets/bulmaswatch.min.css" type="text/css">
<link rel="stylesheet" href="assets/flag-icons.css" type="text/css">
<link rel="stylesheet" href="assets/mesh-ui.css" type="text/css">
<script type="application/javascript" src="assets/mesh-ui.js"></script>
</head>
<body>
<div class="container hero is-fullheight">
<div class="box is-hidden" id="notification_window">
<div style="z-index: 9;" class="notification is-primary">
<button class="delete" id="info_win_close"></button>
<p style="padding:3px; max-height: 250px; overflow-y: auto;" id="info_window"></p>
<div style="padding-left:100px; padding-top:15px;" class="field is-grouped">
<p class="control">
<a id="window_save" class="button is-success">
<span class="icon is-small">
<i class="fa fa-check"> </i>
</span>
<span> Save </span>
</a>
</p>
<p class="control">
<a id="window_close" class="button is-danger is-outlined">
<span> Cancel </span>
<span class="icon is-small">
<i class="fa fa-times"> </i>
</span>
</a>
</p>
</div>
</div>
</div>
<!-- Tabs -->
<div class="tabs is-centered is-boxed">
<ul>
<li class="tab is-active">
<a onclick="openTab(this, 'my_node');">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
focusable="false" width="1em" height="1em"
style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 42 42">
<path
d="M18.5 35.5l-8 2c-.48.04-1 .52-1 1v1c0 .5.47 1 1 1h20c.43 0 1-.41 1-1v-1c-.02-.52-.55-.98-1-1l-8-2h-4zm19-1c2.59 0 3-.529 3-3v-26c0-2.391-.55-3-3-3h-34c-2.43 0-3 .54-3 3v26c0 2.51.529 3 3 3h34zm-2-27v22h-30v-22h30z"
fill="white" />
</svg>
</span>
<span>My Node</span>
</a>
</li>
<li class="tab">
<a onclick="openTab(this, 'keys');">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
focusable="false" width="1em" height="1em"
style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32">
<g fill="none" stroke="white" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
<path d="M5 15v15h22V15zm4 0C9 9 9 5 16 5s7 4 7 10m-7 5v3" />
<circle cx="16" cy="24" r="1" />
</g>
</svg>
</span>
<span>Keys</span>
</a>
</li>
<li class="tab">
<a onclick="openTab(this, 'about');">
<span class="icon">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true"
focusable="false" width="1em" height="1em"
style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);"
preserveAspectRatio="xMidYMid meet" viewBox="0 0 48 48">
<path fill="#2196F3" d="M37 40H11l-6 6V12c0-3.3 2.7-6 6-6h26c3.3 0 6 2.7 6 6v22c0 3.3-2.7 6-6 6z" />
<g fill="#fff">
<path d="M22 20h4v11h-4z" />
<circle cx="24" cy="15" r="2" />
</g>
</svg>
</span>
<span>About</span>
</a>
</li>
</ul>
</div>
<div class="tab here " id="my_node">
<div class="column">
<div class="container-ip">
<div class="item">IPv6</div>
<div id="ipv6" class="item push-right">N/A</div>
<div class="item">
<a class="fas fa-copy" onclick="copy2clipboard(document.getElementById('ipv6').innerHTML);"></a>
</div>
</div>
<div class="container-ip">
<div class="item">Subnet</div>
<div id="subnet" class="item push-right">N/A</div>
<div class="item">
<a class="fas fa-copy" onclick="copy2clipboard(document.getElementById('subnet').innerHTML);"></a>
</div>
</div>
<div class="container-ip">
<div class="item">Peers</div>
<div id="peers" class="item over">
</div>
<div class="item push-right">
<a id="showAllPeersBtn" class="fas fa-edit"></a>
</div>
</div>
</div>
</div>
<div class="tab here is-hidden" id="keys">
<div class="column">
<div class="container-ip">
<div class="item">Public&nbsp;Key</div>
<div id="pub_key" class="item push-right overflow-ellipsis">Public Key</div>
<div class="item">
<a class="fas fa-copy" onclick="copy2clipboard(document.getElementById('pub_key').innerHTML);"></a>
</div>
</div>
<div class="container-ip">
<div class="item">Private&nbsp;Key</div>
<div id="priv_key" class="is-hidden"></div>
<div id="priv_key_visible" class="item push-right overflow-ellipsis">
••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••••</div>
<div class="item">
<a class="fas fa-light fa-eye" onclick="(togglePrivKeyVisibility.bind(this))()"></a>
</div>
<div class="item">
<a class="fas fa-copy" onclick="copy2clipboard(document.getElementById('priv_key').innerHTML);"></a>
</div>
</div>
</div>
</div>
<div style="margin-left: 100px; margin-right: 100px;">
<div class="notification is-primary is-hidden" id="notification_info">
<button class="delete" id="info_close"></button>
<p id="info_text"></p>
</div>
</div>
<footer class="is-flex-align-items-flex-end" style="margin-top: auto">
<hr style="margin: 0px;background-color: #5d656d;">
<table class="content"><tr id="footer-row">
<td id="version" style="padding-left: 50px;">v123456</td>
<td style="width: 100%;"></td>
<td>&nbsp;<span id="dn_speed">? Bps</span></td>
<td>&nbsp;<span id="up_speed">? Bps</span></td>
<td id="status" style="padding-right: 20px;padding-left: 30px;">
<i id="st-connecting" class="status fas fa-solid fa-spinner fa-spin"></i>
<i id="st-connected" class="status fas fa-solid fa-circle-nodes is-hidden"></i>
<i id="st-multicast" class="status fas fa-solid fa-circle-check is-hidden"></i>
<i id="st-error" class="status fas fa-solid fa-circle-exclamation is-hidden"></i>
</td>
</tr></table>
</footer>
</div>
</html>