Files
proxy-lite/templates/index.html

104 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html data-theme="dark">
<head>
<title>Infinite-Noodles</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/static/pub/bulma.min.css">
<link rel="stylesheet" href="/static/pub/all.min.css">
<style>
.banner-container {
background-image: url("/static/pub/long-banner.jpg");
background-repeat: no-repeat;
background-size: cover;
position: relative;
width: 100%;
}
img.banner {
height: 50px;
}
img.banner-long {
height: 50px;
object-fit: fill;
}
table {
width: 100%;
}
</style>
</head>
<body class="has-navbar-fixed-top">
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<img class="banner" src="/static/pub/logo.jpg"/>
</div>
<div class="banner-container">
<!-- <img class="banner-long" src="/static/pub/long-banner.jpg"/> -->
</div>
</nav>
<div class="table-container">
<table class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth">
<thead>
<tr>
<th>Name</th>
<th>Proto</th>
<th>Listening Port</th>
<th>Dest Port</th>
<th>Dest Host/IP</th>
<th>Expiration</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="input is-link is-small" type="text" placeholder="Name"/></td>
<td>TCP</td>
<td><input class="input is-link is-small" type="text" placeholder="Listen Port"/></td>
<td><input class="input is-link is-small" type="text" placeholder="Destination Port"/></td>
<td><input class="input is-link is-small" type="text" placeholder="Destination Host"/></td>
<td>Expiration</td>
<td>
</td>
<td>
<button class="button">
<span class="icon has-text-success"><i class="fas fa-plus"></i></span>
</button>
</td>
</tr>
{{range .}}
<tr>
<td>{{.Name}}</td>
<td>{{.Proto}}</td>
<td>{{.ListenPort}}</td>
<td>{{.DestPort}}</td>
<td>{{.DestHost}}</td>
<td>{{.Expiration}}</td>
<td>
{{if .IsUp}}
<span class="icon has-text-success"><i class="fas fa-check-square"></i></span>
{{ else }}
<span class="icon has-text-danger"><i class="fas fa-ban"></i></span>
{{ end }}
</td>
<td>
<a href="/delete?id={{.Id}}">
<span class="icon has-text-danger"><i class="fas fa-minus"></i></span>
</a>
</td>
</tr>
{{end}}
</tbody>
</table>
</div>
<footer class="footer">
<div class="content has-text-centered">
<p>
<strong>Infinite-Noodles Network Proxy</strong> - &copy; 2025 Jimmy Allen
</p>
</div>
</footer>
</body>
</html>