Some basic styling. Needs alot more work still

This commit is contained in:
John Shaver 2018-09-14 01:28:18 -07:00
parent a714d7a7c5
commit fd42234553
5 changed files with 82 additions and 13 deletions

31
lib/html/css/main.css Normal file
View File

@ -0,0 +1,31 @@
body {
font-family: Source Sans Pro, sans-serif;
font-size: 18px;
color: #1a1a1a;
letter-spacing: -0.022222222em;
line-height: 1.33;
margin: 0;
text-align: center;
padding: 2em 0 2em 0;
}
code {}
code, pre {
font-family: Source Code Pro, monospace;
}
.code-block {
text-align: left;
display: inline-block;
}
span.logo {
font-size: 1.666em;
font-weight: bold;
}
p {margin-bottom: 0.5em;margin-top: 1.5em;}

Binary file not shown.

Binary file not shown.

View File

@ -3,39 +3,77 @@
<head> <head>
<title>Telebit</title> <title>Telebit</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link href="./css/main.css" rel="stylesheet">
<style>
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-display: block;
font-weight: 400;
src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Sans Pro';
font-style: normal;
font-weight: 700;
font-display: block;
src: local('Source Sans Pro Bold'), local('SourceSansPro-Bold'), url(./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
<link rel="preload" href="./fonts/6xKydSBYKcSV-LCoeQqfX1RYOo3ig4vwlxdu.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="./fonts/6xK3dSBYKcSV-LCoeQqfX1RYOo3qOK7l.woff2" as="font" crossorigin="anonymous">
<link rel="preload" href="./fonts/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevW.woff2" as="font" crossorigin="anonymous">
</head> </head>
<body> <body>
<script>document.body.hidden = true;</script> <script>document.body.hidden = true;</script>
<!-- let's define our SVG that we will use later -->
<svg width="0" height="0" viewBox="0 0 24 24">
<defs>
<g id="svg-lock">
<path d="M0 0h24v24H0z" fill="none"/>
<path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/>
</g>
</defs>
</svg>
<span class="logo">Telebit</span>
<h1>Welcome Home <!-- as in 127.0.0.1, y'know ;) --></h1> <h1>Welcome Home <!-- as in 127.0.0.1, y'know ;) --></h1>
<p>Go ahead and bookmark this page. It's yours now.</p> <div>Go ahead and bookmark this page. It's yours now.</div>
<div> <div>
<h2>You've claimed <span class="js-servername">{{servername}}</span></h2> <h2>You've claimed <span class="js-servername">{{servername}}</span></h2>
<p>Here's some ways you can use it:</p> <p>Here's some ways you can use it:</p>
<pre><code> <div class="code-block">
telebit http 3000 # forward all https traffic to localhost:3000 <pre><code>telebit http 3000 # forward all https traffic to localhost:3000
telebit http /path/to/module # handle incoming https traffic with a node module telebit http /path/to/module # handle incoming https traffic with a node module
telebit http none # remove all https handlers</code></pre> telebit http none # remove all https handlers</code></pre>
</div> </div>
</div>
<p>You can <em>always</em> use this port for <strong>SSH over HTTPS</strong>, even while you're using it for something else:</p> <p>You can <em>always</em> use this port for <strong>SSH over HTTPS</strong>, even while you're using it for something else:</p>
<pre><code> <pre><code>ssh -o ProxyCommand='openssl s_client -connect %h:443 -servername %h -quiet' <span class="js-servername">{{servername}}</span></code></pre>
ssh -o ProxyCommand='openssl s_client -connect %h:443 -servername %h -quiet' <span class="js-servername">{{servername}}</span></code></pre>
<div class="js-port" hidden> <div class="js-port" hidden>
<h2>You've claimed port <span class="js-serviceport">{{serviceport}}</span></h2> <h2>You've claimed port <span class="js-serviceport">{{serviceport}}</span></h2>
<p>Here's some ways you can use it:</p> <p>Here's some ways you can use it:</p>
<pre><code> <div class="code-block"><pre><code>telebit tcp 3000 # forward all tcp traffic to localhost:3000
telebit tcp 3000 # forward all tcp traffic to localhost:3000
telebit tcp /path/to/module # handle incoming tcp traffic with a node module telebit tcp /path/to/module # handle incoming tcp traffic with a node module
telebit tcp none # remove all tcp handlers</code></pre> telebit tcp none # remove all tcp handlers</code></pre>
</div> </div>
<p>You can <em>always</em> use this port for <strong>SSH</strong>, even while you're using it for something else:</p> <p>You can <em>always</em> use this port for <strong>SSH</strong>, even while you're using it for something else:</p>
<pre><code>telebit ssh 22 <div class="code-block"><pre><code>telebit ssh 22
ssh <span class="js-servername">{{servername}}</span> -p <span class="js-serviceport">{{serviceport}}</span></code></pre>
ssh <span class="js-servername">{{servername}}</span> -p <span class="js-serviceport">{{serviceport}}</span></code></pre></div>
</div>
<script src="js/app.js"></script> <script src="js/app.js"></script>
</body> </body>