coolaj86/telebit-relay.js
1
1
Fork 0
Code Issues 4 Pull Requests Releases Activity

[style] update width to show full examples

Browse Source
This commit is contained in:
AJ ONeal 2018-08-13 16:22:08 +00:00
parent acf8522195
commit aad7c51834
2 changed files with 57 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
lib/extensions/admin/index.html
View File

@ -54,14 +54,13 @@
</div> </div>
<div class="demo-terminal"> <div class="demo-terminal">
<div class="demo-terminal-line"> <div class="demo-terminal-input">
Serving localhost:3000 as https://test-app.telebit.cloud ~/telebit http 3000
</div> </div>
<div class="demo-terminal-line"> <div class="demo-terminal-line">&nbsp;
Go forth and share!
</div> </div>
<div class="demo-terminal-line"> <div class="demo-terminal-output">
ex: curl https://test-app.telebit.cloud Forwarding https://jondoe.telebit.io => localhost:3000
</div> </div>
</div> </div>
</div> </div>
@ -92,26 +91,42 @@
<div class="quickstart-step"> <div class="quickstart-step">
<div class="quickstart-step-number">2</div> <div class="quickstart-step-number">2</div>
<div class="quickstart-step-text">Claim your device via Email</div> <div class="quickstart-step-text">Claim your device via Email</div>
<pre class="quickstart-terminal">You've installed Telebit on 'Jon's Macbook Pro'. <pre class="quickstart-terminal">You're running Telebit on 'Jon's Macbook Pro'.
Authenticate your account and claim your device: Click <u>Trust Device</u> to pair with Telebit</u></pre>
https://www.telebit.cloud/login/?magic=xxxxxxxxxxxxxx</pre>
</div> </div>
<div class="quickstart-step"> <div class="quickstart-step">
<div class="quickstart-step-number">3</div> <div class="quickstart-step-number">3</div>
<div class="quickstart-step-text">Enjoy Anytime, Anywhere Access</div> <div class="quickstart-step-text">Enjoy Anytime, Anywhere Access</div>
<pre class="quickstart-terminal">HTTPS <pre class="quickstart-terminal"><strong>For Local Development</strong>
https://lucky-duck-42.telebit.cloud <code class="quickstart-input">~/telebit http 3000</code>
<code class="quickstart-output">Forwarding https://jondoe.telebit.io =&gt; localhost:3000</code>
SSH <code class="quickstart-input">curl -fsSL https://jondoe.telebit.io/</code>
ssh ssh.telebit.cloud -p 22222 <strong>For Sharing Files</strong>
TCP <code class="quickstart-input">~/telebit http ./project.zip</code>
<code class="quickstart-output">Serving ./project.zip as https://jondoe.telebit.io</code>
netcat tcp.telebit.cloud 22222<Paste></pre> <code class="quickstart-input">curl -fsSL https://jondoe.telebit.io/</code>
<strong>For Access with SSH</strong>
<code class="quickstart-input">~/telebit ssh auto</code>
<code class="quickstart-output">Forwarding jondoe.telebit.io -p 5050 =&gt; localhost:22</code>
<code class="quickstart-output">Forwarding ssh+https (openssl proxy) =&gt; localhost:22</code>
<code class="quickstart-input">ssh -p 5050 jondoe.telebit.io</code>
<code class="quickstart-input">ssh -o ProxyCommand="sclient %h:443" jondoe.telebit.io</code>
<strong>For Debugging with TCP</strong>
<code class="quickstart-input">~/telebit tcp 9000</code>
<code class="quickstart-output">Forwarding jondoe.telebit.io -p 5050 =&gt; localhost:9000</code>
<code class="quickstart-input">netcat jondoe.telebit.io 5050</code></pre>
</div> </div>
</div> </div>
</div> </div>

30
lib/extensions/admin/static-site-assets/styles/main.css
View File

@ -5,7 +5,7 @@ body{
margin: 0; margin: 0;
} }
a, u { a {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
} }
@ -30,7 +30,7 @@ a:hover, u:hover {
} }
.container { .container {
width: 788px; width: 840px;
margin: auto; margin: auto;
} }
@ -96,7 +96,7 @@ a.link-button.wide {
margin: 1em 9.4444em 0; margin: 1em 9.4444em 0;
position: relative; position: relative;
height: 236px; height: 236px;
width: 560px; width: 644px;
overflow: hidden; overflow: hidden;
} }
@ -104,7 +104,7 @@ a.link-button.wide {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
right: 0; right: 0;
width: 488px; width: 544px;
height: 236px; height: 236px;
background-color: #ffffff; background-color: #ffffff;
border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0;
@ -161,7 +161,8 @@ a.link-button.wide {
} }
.demo-terminal { .demo-terminal {
width: 418px; /*width: 418px;*/
width: 512px;
position: absolute; position: absolute;
font-size: 15px; font-size: 15px;
background-color: #f7f7f7; background-color: #f7f7f7;
@ -177,6 +178,16 @@ a.link-button.wide {
} }
.demo-terminal-line:before { .demo-terminal-line:before {
content: " ";
}
.demo-terminal-input:before {
content: "$";
}
.demo-terminal-output {
padding-left: 1em;
text-indent: -1em;
}
.demo-terminal-output:before {
content: ">"; content: ">";
} }
@ -234,6 +245,15 @@ body {}
margin: 0; margin: 0;
padding: 0.8em 0 0.8em 2em; padding: 0.8em 0 0.8em 2em;
} }
.quickstart-line:before {
content: " ";
}
.quickstart-input:before {
content: "$ ";
}
.quickstart-output:before {
content: "> ";
}
h3 { h3 {
text-align: center; text-align: center;