10
10
display: flex;
11
11
justify-content: center;
12
12
}
13
+
13
14
.card {
14
15
margin: 16px;
15
16
padding: 5px;
16
17
min-height: 30px;
17
18
border-radius: 3px;
18
19
box-shadow: 0px 1px 3px #777777;
19
20
}
21
+
20
22
.name {
21
23
font-size: large;
22
24
font-weight: bold;
23
25
padding-top: 3px;
24
26
padding-bottom: 5px;
25
27
}
28
+
26
29
.subnet {
27
30
font-family: monospace;
28
31
}
32
+
29
33
.status-pending {
30
34
float: right;
31
35
padding: 3px;
35
39
color: #336699;
36
40
text-decoration: none;
37
41
}
42
+
38
43
.hostfile {
39
44
float: right;
40
45
padding: 3px;
45
50
color: white;
46
51
text-decoration: none;
47
52
}
53
+
48
54
.container {
49
55
display: block;
50
56
vertical-align: middle;
51
57
width: 800px;
52
58
}
59
+
53
60
.public {
54
61
font-weight: 100 !important;
55
62
color: #84a3e1;
56
63
}
64
+
57
65
.meta {
58
66
margin: 16px;
59
67
color: #84a3e1;
72
80
.meta > a:hover {
73
81
text-decoration: underline;
74
82
}
83
+
84
+ hr {
85
+ border: 1px solid #336699;
86
+ border-radius: 2px;
87
+ box-shadow: 0px 1px 2px #777777;
88
+ margin: 16px;
89
+ }
90
+
91
+ form {
92
+ border-radius: 2px;
93
+ box-shadow: 0px 1px 3px #777777;
94
+ margin: 16px;
95
+ padding: 6px;
96
+ }
97
+
98
+ label {
99
+ font-weight: bold;
100
+ font-size: small;
101
+ display: inline-block;
102
+ padding: 3px;
103
+ margin-bottom: 3px;
104
+ }
105
+
106
+ input {
107
+ display: inline-block;
108
+ border: none;
109
+ border-bottom: 1px dashed #777777;
110
+ }
111
+
112
+ .gen {
113
+ border-radius: 3px 3px 3px 3px;
114
+ padding: 6px;
115
+ background-color: #336699;
116
+ color: white;
117
+ border: none;
118
+ font-size: large;
119
+ width: 100%;
120
+ }
121
+
122
+ .footer {
123
+ text-align: center;
124
+ }
125
+
126
+ select {
127
+ display: inline-block;
128
+ border: none;
129
+ border-bottom: 1px dashed #777777;
130
+ background-color: white;
131
+ }
132
+
133
+ .err {
134
+ border-radius: 2px;
135
+ box-shadow: 0px 1px 3px #777777;
136
+ margin: 16px;
137
+ padding: 6px;
138
+ border-left: 4px solid #ff0000;
139
+ }
140
+
141
+ .warn {
142
+ border-radius: 2px;
143
+ box-shadow: 0px 1px 3px #777777;
144
+ margin: 16px;
145
+ padding: 6px;
146
+ border-left: 4px solid #ffaa00;
147
+ }
148
+
149
+ .add {
150
+ border-radius: 3px 3px 3px 3px;
151
+ padding: 6px;
152
+ background-color: #84a3e1;
153
+ color: white;
154
+ border: none;
155
+ margin: 1px;
156
+ }
157
+
75
158
</style>
76
159
</head>
77
160
<body>
78
161
79
162
<div class="container">
163
+ {{with .Error}}
164
+ <div class="err">
165
+ <h3>Error</h3>
166
+ <p>{{.}}</p>
167
+ </div>
168
+ {{end}}
169
+ {{with .Warning}}
170
+ <div class="warn">
171
+ <h3>Warning</h3>
172
+ <p>{{.}}</p>
173
+ </div>
174
+ {{end}}
175
+ {{if not .HasPublic}}
176
+ <div class="warn">
177
+ <h3>Warning</h3>
178
+ <p>no public nodes available in the network</p>
179
+ </div>
180
+ {{end}}
80
181
<div class="meta">
81
- <a href="../" download="{{.Service.Config.Name}}">{{.Service.Config.Name}}</a>, <span class="meta-address">{{.Service.Address}}</span>
182
+ <a href="../" download="{{.Service.Config.Name}}">{{.Service.Config.Name}}</a>, <span
183
+ class="meta-address">{{.Service.Address}}</span>
82
184
</div>
83
185
{{range .Nodes}}
84
186
{{if .Fetched}}
95
197
</div>
96
198
{{end}}
97
199
{{end}}
200
+ {{if .HasPublic}}
201
+ <form method="POST">
202
+ <h2>Generate node script</h2>
203
+ <label>
204
+ Unique node name (required)
205
+ <input type="text" placeholder="Node name" pattern="[a-z0-9]+" name="name"/>
206
+ </label>
207
+ <br/>
208
+ <br/>
209
+ <label>
210
+ Platform
211
+ <select name="platform">
212
+ <option value="amd64" selected>x86-64</option>
213
+ <option value="i386">x86-32</option>
214
+ <option value="arm64">ARM64</option>
215
+ <option value="armv7">ARM-7</option>
216
+ <option value="armv6">ARM-6</option>
217
+ <option value="armv5">ARM-5</option>
218
+ </select>
219
+ </label>
220
+ <label>
221
+ Prefix
222
+ <input type="text" placeholder="x.y.z.t" name="prefix" value="172.173"/>
223
+ </label>
224
+ <label>
225
+ Mask
226
+ <input type="number" placeholder="8, 16, 24, 32" name="mask" value="16" pattern="[0-9]+" min="8"
227
+ max="32"/>
228
+ </label>
229
+ <label>
230
+ Port
231
+ <input type="number" placeholder="random" name="port" value="" pattern="[0-9]+" min="0"
232
+ max="65535"/>
233
+ </label>
234
+ <br/>
235
+ <div>
236
+ <ul id="publics">
237
+ </ul>
238
+ <button type="button" onclick="addPublic()" class="add">
239
+ Add public address
240
+ </button>
241
+ </div>
242
+ <br/>
243
+ <div class="footer">
244
+ <button type="submit" class="gen">Generate</button>
245
+ </div>
246
+ </form>
247
+ {{end}}
98
248
</div>
249
+ <script>
250
+
251
+ function addPublic() {
252
+ var li = document.createElement('li');
253
+ var inp = document.createElement('input');
254
+ li.appendChild(inp);
255
+ inp.setAttribute("type", "text");
256
+ inp.setAttribute("name", "public");
257
+ inp.setAttribute("placeholder", "public address");
258
+
259
+ var btn = document.createElement("button");
260
+ li.append(btn);
261
+ btn.setAttribute("type", "button");
262
+ btn.setAttribute("class", "add");
263
+ btn.innerText = "remove";
264
+ btn.onclick = function () {
265
+ document.getElementById("publics").removeChild(li);
266
+ };
267
+
268
+ document.getElementById("publics").appendChild(li);
269
+ }
270
+ </script>
99
271
</body>
100
272
</html>
0 commit comments