Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Implemented UI - Implemented settings and terminal framework
- Loading branch information
stuicey
committed
Jun 13, 2017
1 parent
b79b962
commit d8b9e97
Showing
10 changed files
with
446 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| # SSH: HTML5 Based SSH Client | ||
|
|
||
| SSHy is a HTML5 SSHv2 web client implementing E2E encryption that runs well on any modern web browser. | ||
|
|
||
| ## Installation | ||
|
|
||
| Either copy or clone the repository into a directory being currently served by a web server and navigate to `index.html`. | ||
|
|
||
| The required files are: | ||
| ``` | ||
| css/* | ||
| fonts/* | ||
| js/* | ||
| index.html | ||
| ``` | ||
|
|
||
| For best performance it is recommended to host a websocket proxy close to the traffic origin or destination. This can be done by modifying `wsproxyURL` near the top of `index.html` to the IP or domain of a personal websocket proxy. | ||
|
|
||
| This project is intended to be used with [wsProxy](http://github.com/stuicey/wsproxy) provided as a submodule in `wsproxy/`. More details on this application an be obtained from the related README. | ||
|
|
||
| ``` | ||
| cd wsproxy | ||
| npm install wsproxy -g | ||
| wsproxy | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| @font-face { | ||
| font-family: 'fontawesome'; | ||
| src: url('../fonts/fontawesome.eot?5aa35k'); | ||
| src: url('../fonts/fontawesome.eot?5aa35k#iefix') format('embedded-opentype'), | ||
| url('../fonts/fontawesome.ttf?5aa35k') format('truetype'), | ||
| url('../fonts/fontawesome.woff?5aa35k') format('woff'), | ||
| url('../fonts/fontawesome.svg?5aa35k#icomoon') format('svg'); | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } | ||
|
|
||
| [class^="icon-"], [class*=" icon-"] { | ||
| /* use !important to prevent issues with browser extensions that change fonts */ | ||
| font-family: 'fontawesome' !important; | ||
| speak: none; | ||
| font-style: normal; | ||
| font-weight: normal; | ||
| font-variant: normal; | ||
| text-transform: none; | ||
| line-height: 1; | ||
| font-size: 20px; | ||
|
|
||
| /* Better Font Rendering =========== */ | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } | ||
|
|
||
| .icon-eye:before { | ||
| content: "\e903"; | ||
| } | ||
| .icon-cogs:before { | ||
| content: "\e900"; | ||
| } | ||
| span.icon-cogs{ | ||
| position: absolute; | ||
| top: 25px; | ||
| z-index: 1; | ||
| right: 5px; | ||
| color: #ddd; | ||
| font-size: 28px; | ||
| } | ||
| span.icon-cogs:hover { | ||
| text-shadow: 0 0 2px #fff; | ||
| } | ||
| .icon-cog:before { | ||
| content: "\e901"; | ||
| } | ||
| .icon-lock:before { | ||
| content: "\e904"; | ||
| } | ||
| .icon-address-book:before { | ||
| content: "\e907"; | ||
| } | ||
| .icon-user-circle-o:before { | ||
| content: "\e905"; | ||
| } | ||
| .icon-plus:before { | ||
| content: "\e902"; | ||
| } | ||
| span.icon-plus{ | ||
| position: absolute; | ||
| top: 60px; | ||
| z-index: 1; | ||
| right: 7px; | ||
| color: #ddd; | ||
| font-size: 28px; | ||
| } | ||
| span.icon-plus:hover { | ||
| text-shadow: 0 0 2px #fff; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| html, body { | ||
| height: 100%; | ||
| background: #000; | ||
| overflow: hidden; | ||
| color: #fff; | ||
| } | ||
| .loading { | ||
| display: none; | ||
| position: fixed; | ||
| left: 47.5%; | ||
| color: white; | ||
| } | ||
|
|
||
| .failure { | ||
| color: red; | ||
| display: none; | ||
| font-size: 12px; | ||
| text-align: center; | ||
| } | ||
| .modal { | ||
| display: none; | ||
| z-index: 1; | ||
| width: 400px; | ||
| height: 220px; | ||
| position: absolute; | ||
| margin: auto; | ||
| top: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| left: 0; | ||
| font-family: courier-new, courier, monospace; | ||
| font-feature-settings: "liga" 0; | ||
| } | ||
|
|
||
| /* Modal Content */ | ||
| .modal-content { | ||
| position: relative; | ||
| background-color: #fefefe; | ||
| margin: auto; | ||
| padding: 0; | ||
| border: 1px solid #888; | ||
| border-radius: 8px; | ||
| box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); | ||
| -webkit-animation-name: animatetop; | ||
| -webkit-animation-duration: 0.4s; | ||
| animation-name: animatetop; | ||
| animation-duration: 0.4s | ||
| } | ||
|
|
||
|
|
||
| /* Add Animation */ | ||
| @-webkit-keyframes animatetop { | ||
| from {top:-300px; opacity:0} | ||
| to {top:0; opacity:1} | ||
| } | ||
|
|
||
| @keyframes animatetop { | ||
| from {top:-300px; opacity:0} | ||
| to {top:0; opacity:1} | ||
| } | ||
|
|
||
| .modal-header { | ||
| padding: 2px 0px; | ||
| text-align: center; | ||
| background-color: #242d32; | ||
| color: white; | ||
| border-top-left-radius: 8px; | ||
| border-top-right-radius: 8px; | ||
| } | ||
|
|
||
| .modal-body {padding: 2px 16px;} | ||
|
|
||
| .button { | ||
| background-color: #242d32; | ||
| border-radius: 5px; | ||
| color: white; | ||
| padding: 2px 16px; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| display: inline-block; | ||
| font-size: 16px; | ||
| margin: 4px 2px; | ||
| width: 40%; | ||
| margin-left: 30.5%; | ||
| } | ||
|
|
||
| input { | ||
| padding: 4px; | ||
| border: none; | ||
| border-bottom: solid 2px #c9c9c9; | ||
| transition: border 0.3s; | ||
| } | ||
| input:focus, input.focus { | ||
| border-bottom: solid 2px #969696; | ||
| } | ||
|
|
||
| tbody { | ||
| color: #000; | ||
| font-family: courier-new, courier, monospace; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| .sidenav { | ||
| height: 100%; /* 100% Full-height */ | ||
| width: 0px; /* 0 width - change this with JavaScript */ | ||
| position: fixed; /* Stay in place */ | ||
| z-index: 3; /* Stay on top */ | ||
| top: 0; | ||
| right: -1px; | ||
| background-color: #202020; /* Grey*/ | ||
| border-left: 1px solid #444; | ||
| overflow-x: hidden; /* Disable horizontal scroll */ | ||
| padding-top: 60px; /* Place content 60px from the top */ | ||
| transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */ | ||
| } | ||
|
|
||
| /* The navigation menu links */ | ||
| .sidenav a { | ||
| padding: 8px 8px 8px 32px; | ||
| text-decoration: none; | ||
| font-size: 25px; | ||
| color: #818181; | ||
| display: block; | ||
| transition: 0.3s | ||
| } | ||
|
|
||
| /* When you mouse over the navigation links, change their color */ | ||
| .sidenav a:hover, .offcanvas a:focus{ | ||
| color: #f1f1f1; | ||
| } | ||
|
|
||
| /* Position and style the close button (top right corner) */ | ||
| .sidenav .closebtn { | ||
| position: absolute; | ||
| top: -5px; | ||
| right: 5px; | ||
| font-size: 36px; | ||
| margin-left: 50px; | ||
| } | ||
|
|
||
| /* Style page content - use this if you want to push the page content to the right when you open the side navigation */ | ||
| #main { | ||
| transition: margin-left .5s; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */ | ||
| @media screen and (max-height: 450px) { | ||
| .sidenav {padding-top: 15px;} | ||
| .sidenav a {font-size: 18px;} | ||
| } |
Binary file not shown.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| <!doctype html> | ||
| <html> | ||
|
|
||
| <head> | ||
| <meta charset="utf-8"> | ||
| <title>SSHy.us</title> | ||
|
|
||
| <script type="text/javascript"> | ||
| var wsproxyURL = "ws://localhost:5999/" | ||
| </script> | ||
| <link rel="stylesheet" href="css/fonts.css" /> | ||
| <link rel="stylesheet" href="css/main.css" /> | ||
| <link rel="stylesheet" href="css/sidenav.css" /> | ||
|
|
||
| <script type="text/javascript" src="js/multiTerm.js"></script> | ||
|
|
||
| <script type="text/javascript"> | ||
| window.onload = function() { | ||
| document.getElementById('login_cred').style.display = "block"; | ||
| }; | ||
|
|
||
| function openNav() { | ||
| document.getElementById("settingsNav").style.width = "250px"; | ||
| } | ||
|
|
||
| function closeNav() { | ||
| document.getElementById("settingsNav").style.width = "0"; | ||
| } | ||
|
|
||
| // stores a reference of terminal windows -> divs | ||
| var terms = [] | ||
| </script> | ||
| </head> | ||
|
|
||
| <body> | ||
| <div id="settingsNav" class="sidenav"> | ||
| <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> | ||
| </div> | ||
|
|
||
| <!-- hide the settings till we have some? --> | ||
| <span class="icon-cogs" onclick="openNav()"></span> | ||
| <!-- hide more terminals option until one is opened --> | ||
| <span class="icon-plus" style="display:block" onclick="spawnTerminalDiv()"></span> | ||
|
|
||
| <div id="login_cred" class="modal"> | ||
| <div class="modal-content"> | ||
| <div class="modal-header"> | ||
| <h2><span class="icon-lock"></span> SSHv2 Login</h2> | ||
| </div> | ||
| <div class="modal-body"> | ||
| <table style="width: 100%"> | ||
| <tr> | ||
| <td><span class="icon-address-book"></span> IP Address:</td> | ||
| <td><input type="text" id="ipaddress" placeholder="sshy.us" style="width: 90%" onblur="validate(this.id, this.value)"></td> | ||
| </tr> | ||
| <tr> | ||
| <td><span class="icon-user-circle-o"></span> Username:</td> | ||
| <td><input type="text" id="username" placeholder="eval" style="width: 90%" onblur="validate(this.id, this.value)"></td> | ||
| </tr> | ||
| <tr> | ||
| <td><span class="icon-eye"></span> Password:</td> | ||
| <td><input type="password" id="password" style="width: 90%" onblur="validate(this.id, this.value)"></td> | ||
| </tr> | ||
| </table> | ||
| <i id="failure" class="failure"></i> | ||
| <input type="button" id="connect" class="button" value="Connect" onclick="startDuneSSH()"> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
Oops, something went wrong.