Skip to content

Commit cf22ff5

Browse files
hons82hons82
committed
Add sample error pages and documentation
1 parent 572eb25 commit cf22ff5

File tree

5 files changed

+737
-1
lines changed

5 files changed

+737
-1
lines changed

‎README.md‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,6 +176,10 @@ Configuration options:
176176
* `max_interval`: maximal time client would wait before redialing the server, *default:* `1m`
177177
* `max_time`: maximal time client would try to reconnect to the server if connection was lost, set `0` to never stop trying, *default:* `15m`
178178

179+
### Custom error pages
180+
181+
Just copy the `html` folder from this repository into the folder of the tunnel-server to have a starting point. In the `html/errors` folder you'll find a sample page for each error that is currently customisable which you'll be able to change according to your needs.
182+
179183
## How it works
180184

181185
A client opens TLS connection to a server. The server accepts connections from known clients only. The client is recognized by its TLS certificate ID. The server is publicly available and proxies incoming connections to the client. Then the connection is further proxied in the client's network.
@@ -186,7 +190,7 @@ The tunnel is based HTTP/2 for speed and security. There is a single TCP connect
186190

187191
If this project help you reduce time to develop, you can give me a cup of coffee.
188192

189-
[![paypal](https://www.paypalobjects.com/en_US/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=RMM46NAEY7YZ6&lc=US&item_name=go%2dhttp%2dtunnel&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donateCC_LG%2egif%3aNonHosted)
193+
[![paypal](https://www.paypalobjects.com/en_US/IT/i/btn/btn_donateCC_LG.gif)](https://www.paypal.com/donate?hosted_button_id=E74HP49TAAUQ2)
190194

191195
A GitHub star is always appreciated!
192196

‎html/errors/clientAlreadyConnected.html‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Client Already Connected</title>
6+
<style>
7+
* {
8+
margin:0px auto;
9+
padding: 0px;
10+
text-align:center;
11+
}
12+
body {
13+
background-color: #D4D9ED;
14+
}
15+
.cont_principal {
16+
position: absolute;
17+
width: 100%;
18+
height: 100%;
19+
overflow: hidden;
20+
}
21+
.cont_error {
22+
position: absolute;
23+
width: 100%;
24+
height: 300px;
25+
top: 50%;
26+
margin-top:-150px;
27+
}
28+
.cont_error > h1 {
29+
font-family: 'Lato', sans-serif;
30+
font-weight: 400;
31+
font-size:150px;
32+
color:#fff;
33+
position: relative;
34+
left:-100%;
35+
transition: all 0.5s;
36+
}
37+
.cont_error > p {
38+
font-family: 'Lato', sans-serif;
39+
font-weight: 300;
40+
font-size:24px;
41+
letter-spacing: 5px;
42+
color:#9294AE;
43+
position: relative;
44+
left:100%;
45+
transition: all 0.5s;
46+
transition-delay: 0.5s;
47+
-webkit-transition: all 0.5s;
48+
-webkit-transition-delay: 0.5s;
49+
}
50+
.cont_aura_1 {
51+
position:absolute;
52+
width:300px;
53+
height: 120%;
54+
top:25px;
55+
right: -340px;
56+
background-color: #8A65DF;
57+
box-shadow: 0px 0px 60px 20px rgba(137,100,222,0.5);
58+
-webkit-transition: all 0.5s;
59+
transition: all 0.5s;
60+
}
61+
.cont_aura_2 {
62+
position:absolute;
63+
width:100%;
64+
height: 300px;
65+
right:-10%;
66+
bottom:-301px;
67+
background-color: #8B65E4;
68+
box-shadow: 0px 0px 60px 10px rgba(131, 95, 214, 0.5),0px 0px 20px 0px rgba(0,0,0,0.1);
69+
z-index:5;
70+
transition: all 0.5s;
71+
-webkit-transition: all 0.5s;
72+
}
73+
.cont_error_active > .cont_error > h1 {
74+
left:0%;
75+
}
76+
.cont_error_active > .cont_error > p {
77+
left:0%;
78+
}
79+
.cont_error_active > .cont_aura_2 {
80+
animation-name: animation_error_2;
81+
animation-duration: 4s;
82+
animation-timing-function: linear;
83+
animation-iteration-count: infinite;
84+
animation-direction: alternate;
85+
transform: rotate(-20deg);
86+
}
87+
.cont_error_active > .cont_aura_1 {
88+
transform: rotate(20deg);
89+
right:-170px;
90+
animation-name: animation_error_1;
91+
animation-duration: 4s;
92+
animation-timing-function: linear;
93+
animation-iteration-count: infinite;
94+
animation-direction: alternate;
95+
}
96+
@-webkit-keyframes animation_error_1 {
97+
from {
98+
-webkit-transform: rotate(20deg);
99+
transform: rotate(20deg);
100+
}
101+
to { -webkit-transform: rotate(25deg);
102+
transform: rotate(25deg);
103+
}
104+
}
105+
@-o-keyframes animation_error_1 {
106+
from {
107+
-webkit-transform: rotate(20deg);
108+
transform: rotate(20deg);
109+
}
110+
to { -webkit-transform: rotate(25deg);
111+
transform: rotate(25deg);
112+
}
113+
}
114+
@-moz-keyframes animation_error_1 {
115+
from {
116+
-webkit-transform: rotate(20deg);
117+
transform: rotate(20deg);
118+
}
119+
to { -webkit-transform: rotate(25deg);
120+
transform: rotate(25deg);
121+
}
122+
}
123+
@keyframes animation_error_1 {
124+
from {
125+
-webkit-transform: rotate(20deg);
126+
transform: rotate(20deg);
127+
}
128+
to { -webkit-transform: rotate(25deg);
129+
transform: rotate(25deg);
130+
}
131+
}
132+
@-webkit-keyframes animation_error_2 {
133+
from { -webkit-transform: rotate(-15deg);
134+
transform: rotate(-15deg);
135+
}
136+
to { -webkit-transform: rotate(-20deg);
137+
transform: rotate(-20deg);
138+
}
139+
}
140+
@-o-keyframes animation_error_2 {
141+
from { -webkit-transform: rotate(-15deg);
142+
transform: rotate(-15deg);
143+
}
144+
to { -webkit-transform: rotate(-20deg);
145+
transform: rotate(-20deg);
146+
}
147+
}
148+
}
149+
@-moz-keyframes animation_error_2 {
150+
from { -webkit-transform: rotate(-15deg);
151+
transform: rotate(-15deg);
152+
}
153+
to { -webkit-transform: rotate(-20deg);
154+
transform: rotate(-20deg);
155+
}
156+
}
157+
@keyframes animation_error_2 {
158+
from { -webkit-transform: rotate(-15deg);
159+
transform: rotate(-15deg);
160+
}
161+
to { -webkit-transform: rotate(-20deg);
162+
transform: rotate(-20deg);
163+
}
164+
}
165+
</style>
166+
<script>
167+
window.onload = function(){
168+
document.querySelector('.cont_principal').className= "cont_principal cont_error_active";
169+
170+
}
171+
</script>
172+
</head>
173+
<body>
174+
<div class="cont_principal">
175+
<div class="cont_error">
176+
<h1>Oops</h1>
177+
<p>Somebody else already claimed this adress.</p>
178+
</div>
179+
<div class="cont_aura_1"></div>
180+
<div class="cont_aura_2"></div>
181+
</div>
182+
</body>
183+
</html>

‎html/errors/clientNotConnected.html‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Client Not Connected</title>
6+
<style>
7+
* {
8+
margin:0px auto;
9+
padding: 0px;
10+
text-align:center;
11+
}
12+
body {
13+
background-color: #D4D9ED;
14+
}
15+
.cont_principal {
16+
position: absolute;
17+
width: 100%;
18+
height: 100%;
19+
overflow: hidden;
20+
}
21+
.cont_error {
22+
position: absolute;
23+
width: 100%;
24+
height: 300px;
25+
top: 50%;
26+
margin-top:-150px;
27+
}
28+
.cont_error > h1 {
29+
font-family: 'Lato', sans-serif;
30+
font-weight: 400;
31+
font-size:150px;
32+
color:#fff;
33+
position: relative;
34+
left:-100%;
35+
transition: all 0.5s;
36+
}
37+
.cont_error > p {
38+
font-family: 'Lato', sans-serif;
39+
font-weight: 300;
40+
font-size:24px;
41+
letter-spacing: 5px;
42+
color:#9294AE;
43+
position: relative;
44+
left:100%;
45+
transition: all 0.5s;
46+
transition-delay: 0.5s;
47+
-webkit-transition: all 0.5s;
48+
-webkit-transition-delay: 0.5s;
49+
}
50+
.cont_aura_1 {
51+
position:absolute;
52+
width:300px;
53+
height: 120%;
54+
top:25px;
55+
right: -340px;
56+
background-color: #8A65DF;
57+
box-shadow: 0px 0px 60px 20px rgba(137,100,222,0.5);
58+
-webkit-transition: all 0.5s;
59+
transition: all 0.5s;
60+
}
61+
.cont_aura_2 {
62+
position:absolute;
63+
width:100%;
64+
height: 300px;
65+
right:-10%;
66+
bottom:-301px;
67+
background-color: #8B65E4;
68+
box-shadow: 0px 0px 60px 10px rgba(131, 95, 214, 0.5),0px 0px 20px 0px rgba(0,0,0,0.1);
69+
z-index:5;
70+
transition: all 0.5s;
71+
-webkit-transition: all 0.5s;
72+
}
73+
.cont_error_active > .cont_error > h1 {
74+
left:0%;
75+
}
76+
.cont_error_active > .cont_error > p {
77+
left:0%;
78+
}
79+
.cont_error_active > .cont_aura_2 {
80+
animation-name: animation_error_2;
81+
animation-duration: 4s;
82+
animation-timing-function: linear;
83+
animation-iteration-count: infinite;
84+
animation-direction: alternate;
85+
transform: rotate(-20deg);
86+
}
87+
.cont_error_active > .cont_aura_1 {
88+
transform: rotate(20deg);
89+
right:-170px;
90+
animation-name: animation_error_1;
91+
animation-duration: 4s;
92+
animation-timing-function: linear;
93+
animation-iteration-count: infinite;
94+
animation-direction: alternate;
95+
}
96+
@-webkit-keyframes animation_error_1 {
97+
from {
98+
-webkit-transform: rotate(20deg);
99+
transform: rotate(20deg);
100+
}
101+
to { -webkit-transform: rotate(25deg);
102+
transform: rotate(25deg);
103+
}
104+
}
105+
@-o-keyframes animation_error_1 {
106+
from {
107+
-webkit-transform: rotate(20deg);
108+
transform: rotate(20deg);
109+
}
110+
to { -webkit-transform: rotate(25deg);
111+
transform: rotate(25deg);
112+
}
113+
}
114+
@-moz-keyframes animation_error_1 {
115+
from {
116+
-webkit-transform: rotate(20deg);
117+
transform: rotate(20deg);
118+
}
119+
to { -webkit-transform: rotate(25deg);
120+
transform: rotate(25deg);
121+
}
122+
}
123+
@keyframes animation_error_1 {
124+
from {
125+
-webkit-transform: rotate(20deg);
126+
transform: rotate(20deg);
127+
}
128+
to { -webkit-transform: rotate(25deg);
129+
transform: rotate(25deg);
130+
}
131+
}
132+
@-webkit-keyframes animation_error_2 {
133+
from { -webkit-transform: rotate(-15deg);
134+
transform: rotate(-15deg);
135+
}
136+
to { -webkit-transform: rotate(-20deg);
137+
transform: rotate(-20deg);
138+
}
139+
}
140+
@-o-keyframes animation_error_2 {
141+
from { -webkit-transform: rotate(-15deg);
142+
transform: rotate(-15deg);
143+
}
144+
to { -webkit-transform: rotate(-20deg);
145+
transform: rotate(-20deg);
146+
}
147+
}
148+
}
149+
@-moz-keyframes animation_error_2 {
150+
from { -webkit-transform: rotate(-15deg);
151+
transform: rotate(-15deg);
152+
}
153+
to { -webkit-transform: rotate(-20deg);
154+
transform: rotate(-20deg);
155+
}
156+
}
157+
@keyframes animation_error_2 {
158+
from { -webkit-transform: rotate(-15deg);
159+
transform: rotate(-15deg);
160+
}
161+
to { -webkit-transform: rotate(-20deg);
162+
transform: rotate(-20deg);
163+
}
164+
}
165+
</style>
166+
<script>
167+
window.onload = function(){
168+
document.querySelector('.cont_principal').className= "cont_principal cont_error_active";
169+
170+
}
171+
</script>
172+
</head>
173+
<body>
174+
<div class="cont_principal">
175+
<div class="cont_error">
176+
<h1>Oops</h1>
177+
<p>This client is currently not connected.</p>
178+
</div>
179+
<div class="cont_aura_1"></div>
180+
<div class="cont_aura_2"></div>
181+
</div>
182+
</body>
183+
</html>

0 commit comments

Comments
 (0)