forked from noia-network/noia-node-gui
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathconnected.html
139 lines (129 loc) · 4.97 KB
/
connected.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="manifest" href="site.webmanifest">
<!-- <link rel="apple-touch-icon" href="icon.png"> -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/containers.css">
</head>
<body>
<!--[if lte IE 9]>
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>
<![endif]-->
<div id="container">
<div id="sidebar">
<div id="nav">
<ul>
<li>
<a class="active" href="">Node</a>
</li>
<li>
<a href="">Wallet</a>
</li>
<li>
<a href="">Settings</a>
</li>
</ul>
</div>
<div id="logo">
<object type="image/svg+xml" data="assets/noia-logo.svg">
<img src="assets/noia-logo.svg">
</object>
</div>
</div>
<div id="node-stats">
<div class="stat">
<div class="label-white">Available storage</div>
<div class="progress-bar-group">
<div class="progress-bar">
<div style="width:25%"> </div>
</div>
<span class="progress-bar-label">
<span class="value">1</span>
<span class="unit">TB</span>
</span>
</div>
</div>
<div class="stat">
<span class="value">2</span>
<span class="unit">TB</span>
<div class="label">Cached data</div>
</div>
<div class="stat">
<span class="value">985</span>
<span class="unit">MB</span>
<div class="label">Total data downloaded</div>
</div>
<div class="stat">
<span class="value">821</span>
<span class="unit">TB</span>
<div class="label">Total data uploaded</div>
</div>
</div>
<div id="node-section">
<div class="first-row" style="height: 106px;">
<div class="side" style="border-right: 1px solid rgb(233, 234, 235);">
<div class="value">3</div>
<div class="label">Connections</div>
</div>
<div class="side">
<div class="value">00:10:21</div>
<div class="label">Time connected</div>
</div>
</div>
<div class="second-row" style="height: 221px;">
<div class="side" style="border-right: 1px solid rgb(233, 234, 235);">
<div class="gauge">
<img src="assets/gauge.svg">
</div>
<div class="value">65 <span class="label label-sm">Mbps</span></div>
<div class="label">Download speed</div>
</div>
<div class="side">
<div class="gauge">
<img src="assets/gauge.svg">
</div>
<div class="value">30 <span class="label label-sm">Mbps</span></div>
<div class="label">Upload speed</div>
</div>
</div>
<div class="third-row" style="height: 95px;">
<button class="node-button">
<img src="assets/icon-power.svg" style="float: left;">
Disconnect
</button>
</div>
</div>
</div>
</body>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function() {
// We can attach the `fileselect` event to all file inputs on the page
$(document).on('change', ':file', function() {
var input = $(this),
numFiles = input.get(0).files ? input.get(0).files.length : 1,
label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
input.trigger('fileselect', [numFiles, label]);
});
// We can watch for our custom `fileselect` event like this
$(document).ready( function() {
$(':file').on('fileselect', function(event, numFiles, label) {
var input = $(this).parents('.input-group').find(':text'),
log = numFiles > 1 ? numFiles + ' files selected' : label;
if( input.length ) {
input.val(log);
} else {
if( log ) alert(log);
}
});
});
});
</script>
</html>