登录页面

6 years ago · 19abb5e1a2
--- a/src/main/java/com/educoder/bridge/controller/MainController.java
+++ b/src/main/java/com/educoder/bridge/controller/MainController.java
@@ -19,21 +19,29 @@ import org.springframework.web.servlet.ModelAndView;
@RestController
 public class MainController extends BaseController {
 	private final static Logger logger = LoggerFactory.getLogger(MainController.class);
 //
 //	@RequestMapping(value={"/"}, method= RequestMethod.GET)
 //	public ModelAndView index(@RequestParam("host")String host,
 //							  @RequestParam("port")int port,
 //							  @RequestParam("username")String username,
 //							  @RequestParam("password")String password,
 //							  @RequestParam("rows")int rows) {
 //		logger.debug("/ssh： 接收到连接请求, host: {}, port: {}", host, port);
 //		ModelAndView mv = new ModelAndView();
 //		mv.setViewName("index");
 //		mv.addObject("host", host);
 //		mv.addObject("port", port);
 //		mv.addObject("username", username);
 //		mv.addObject("password", password);
 //		mv.addObject("rows", rows);
 //		mv.addObject("digest", System.currentTimeMillis());
 //		return mv;
 //	}

 	@RequestMapping(value={"/", "ssh"}, method= RequestMethod.GET)
 	public ModelAndView index(@RequestParam("host")String host,
 							  @RequestParam("port")int port,
 							  @RequestParam("username")String username,
 							  @RequestParam("password")String password,
 							  @RequestParam("rows")int rows) {
 		logger.debug("/ssh： 接收到连接请求, host: {}, port: {}", host, port);
 	@RequestMapping(value={"/"}, method= RequestMethod.GET)
 	public ModelAndView index() {
 		ModelAndView mv = new ModelAndView();
 		mv.setViewName("index");
 		mv.addObject("host", host);
 		mv.addObject("port", port);
 		mv.addObject("username", username);
 		mv.addObject("password", password);
 		mv.addObject("rows", rows);
 		mv.addObject("digest", System.currentTimeMillis());
 		return mv;
 	}
--- a/src/main/webapp/WEB-INF/pages/index.ftl
+++ b/src/main/webapp/WEB-INF/pages/index.ftl
@@ -1,50 +1,61 @@
 <!DOCTYPE html>
 <html>
 <head lang="en">
    <meta charset="UTF-8">
    <title>webssh</title>
 <html lang="en">
 <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>JWebssh</title>
    <link rel='shortcut icon' type='image/x-icon' href='/static/image/favicon.ico'/>
    <link rel="stylesheet" href="/static/css/pure-min.css">
    <link href="/static/css/xterm.css" rel="stylesheet" type="text/css"/>
    <link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700'>
    <link rel="stylesheet" href="/static/css/reset.css">
    <link rel="stylesheet" href="/static/css/supersized.css">
    <link rel="stylesheet" href="/static/css/style.css">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
 </head>
 <div id="main" align="center" style="display: none;">
   <form id="form" name="form" class="pure-form pure-form-stacked">   	
        <fieldset>
            <input id="terminalRow" name="terminalRow" type="text" value=${rows}>
            <div class="pure-item">
                <label for="host">Host</label>
                <input id="host" name="host" type="text" placeholder="Host" value=${host}>
            </div>
            <div class="pure-item">
                <label for="port">Port</label>
                <input id="port" name="port" type="text" placeholder="Port" value=${port}>
            </div>
            <div class="pure-item">
                <label for="username">Username</label>
                <input id="username" name="username" type="text" placeholder="Username" value=${username}>
            </div>
            <div class="pure-item">
                <label for="password">Password</label>
                <input id="password" name="password" type="password" placeholder="Password" value=${password}>
            </div>
            <label for="remember" class="pure-checkbox">
                <input id="remember" type="checkbox"> Remember me
            </label>
            <button type="button" class="pure-button pure-button-primary" onclick="connect()">Connect</button>
        </fieldset>
    </form>

 <body>

 <div class="page-container" id="form" name="form" >
 <h1>JWebssh</h1>
 <form action="" method="post">
    <fieldset>
        <input id="terminalRow" name="terminalRow" type="hidden" value=100>
        <div class="pure-item">
            <input id="host" name="host" type="text" placeholder="Host" value=${host}>
        </div>
        <div class="pure-item">
            <input id="port" name="port" type="text" placeholder="Port" value=${port}>
        </div>
        <div class="pure-item">
            <input id="username" name="username" type="text" placeholder="Username" value=${username}>
        </div>
        <div class="pure-item">
            <input id="password" name="password" type="password" placeholder="Password" value=${password}>
        </div>
        <button type="button" onclick="connect()">Connect</button>
    </fieldset>
 </form>
 </div>

 <div id="term" align="center"></div>

 <!-- Javascript -->
 <script src="/static/js/jquerymin.js"></script>
 <script src="/static/js/supersized.3.2.7.min.js"></script>
 <script src="/static/js/supersized-init.js"></script>
 <script src="/static/js/base64.js"></script>
 <script src="/static/js/jquerymin.js"></script>
 <script src="/static/js/xterm.js"></script>
 <script src="/static/js/ws.js"></script>
 <script src="/static/js/formvalid.js"></script>
 <script src="/static/js/main.js?${digest}"></script>
 <script type="application/javascript">
    $(function () {
        connect();
    })
 </script>
 </html>

 </body>

 </html>
--- a/src/main/webapp/static/css/reset.css
+++ b/src/main/webapp/static/css/reset.css
@@ -0,0 +1,44 @@

 /* ------- This is the CSS Reset ------- */

 html, body, div, span, applet, object, iframe,
 h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, 
 abbr, acronym, address, big, cite, code, del,
 dfn, em, img, ins, kbd, q, s, samp, small,
 strike, strong, sub, sup, tt, var, u, i, center,
 dl, dt, dd, ol, ul, li, fieldset, form, label,
 legend, table, caption, tbody, tfoot, thead, tr,
 th, td, article, aside, canvas, details, embed,
 figure, figcaption, footer, header, hgroup, menu,
 nav, output, ruby, section, summary, time, mark, audio, video {
 	margin: 0;
 	padding: 0;
 	border: 0;
 	font-size: 100%;
 	font: inherit;
 	vertical-align: baseline;
 }

 /* ------- HTML5 display-role reset for older browsers ------- */

 article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
 	display: block;
 }
 body {
 	line-height: 1;
 }
 ol, ul {
 	list-style: none;
 }
 blockquote, q {
 	quotes: none;
 }
 blockquote:before, blockquote:after, q:before, q:after {
 	content: '';
 	content: none;
 }
 table {
 	border-collapse: collapse;
 	border-spacing: 0;
 }

--- a/src/main/webapp/static/css/style.css
+++ b/src/main/webapp/static/css/style.css
@@ -0,0 +1,187 @@
 /*
 *
 * Template Name: Fullscreen Login
 * Description: Login Template with Fullscreen Background Slideshow
 * Author: Anli Zaimi
 * Author URI: http://azmind.com
 *
 */


 body {
    background: #f8f8f8;
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    text-align: center;
    color: #fff;
 }

 .page-container {
    margin: 120px auto 0 auto;
 }

 h1 {
    font-size: 30px;
    font-weight: 700;
    text-shadow: 0 1px 4px rgba(0,0,0,.2);
 }

 form {
    position: relative;
    width: 305px;
    margin: 15px auto 0 auto;
    text-align: center;
 }

 input {
    width: 270px;
    height: 42px;
    margin-top: 25px;
    padding: 0 15px;
    background: #2d2d2d; /* browsers that don't support rgba */
    background: rgba(45,45,45,.15);
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #3d3d3d; /* browsers that don't support rgba */
    border: 1px solid rgba(255,255,255,.15);
    -moz-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
    -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.1) inset;
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.1);
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    -ms-transition: all .2s;
 }

 input:-moz-placeholder { color: #fff; }
 input:-ms-input-placeholder { color: #fff; }
 input::-webkit-input-placeholder { color: #fff; }

 input:focus {
    outline: none;
    -moz-box-shadow:
        0 2px 3px 0 rgba(0,0,0,.1) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    -webkit-box-shadow:
        0 2px 3px 0 rgba(0,0,0,.1) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    box-shadow:
        0 2px 3px 0 rgba(0,0,0,.1) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
 }

 button {
    cursor: pointer;
    width: 300px;
    height: 44px;
    margin-top: 25px;
    padding: 0;
    background: #ef4300;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 1px solid #ff730e;
    -moz-box-shadow:
        0 15px 30px 0 rgba(255,255,255,.25) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    -webkit-box-shadow:
        0 15px 30px 0 rgba(255,255,255,.25) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    box-shadow:
        0 15px 30px 0 rgba(255,255,255,.25) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    font-family: 'PT Sans', Helvetica, Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,.1);
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    -ms-transition: all .2s;
 }

 button:hover {
    -moz-box-shadow:
        0 15px 30px 0 rgba(255,255,255,.15) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    -webkit-box-shadow:
        0 15px 30px 0 rgba(255,255,255,.15) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    box-shadow:
        0 15px 30px 0 rgba(255,255,255,.15) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
 }

 button:active {
    -moz-box-shadow:
        0 15px 30px 0 rgba(255,255,255,.15) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    -webkit-box-shadow:
        0 15px 30px 0 rgba(255,255,255,.15) inset,
        0 2px 7px 0 rgba(0,0,0,.2);
    box-shadow:        
        0 5px 8px 0 rgba(0,0,0,.1) inset,
        0 1px 4px 0 rgba(0,0,0,.1);

    border: 0px solid #ef4300;
 }

 .error {
    display: none;
    position: absolute;
    top: 27px;
    right: -55px;
    width: 40px;
    height: 40px;
    background: #2d2d2d; /* browsers that don't support rgba */
    background: rgba(45,45,45,.25);
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
 }

 .error span {
    display: inline-block;
    margin-left: 2px;
    font-size: 40px;
    font-weight: 700;
    line-height: 40px;
    text-shadow: 0 1px 2px rgba(0,0,0,.1);
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);

 }

 .connect {
    width: 305px;
    margin: 35px auto 0 auto;
    font-size: 18px;
    font-weight: 700;
    text-shadow: 0 1px 3px rgba(0,0,0,.2);
 }

 .connect a {
    display: inline-block;
    width: 32px;
    height: 35px;
    margin-top: 15px;
    -o-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s;
    -ms-transition: all .2s;
 }

 .connect a.facebook { background: url(../image/facebook.png) center center no-repeat; }
 .connect a.twitter { background: url(../image/twitter.png) center center no-repeat; }

 .connect a:hover { background-position: center bottom; }



--- a/src/main/webapp/static/css/supersized.css
+++ b/src/main/webapp/static/css/supersized.css
@@ -0,0 +1,34 @@
 /*

 	Supersized - Fullscreen Slideshow jQuery Plugin
 	Version : 3.2.7
 	Site	: www.buildinternet.com/project/supersized
 	
 	Author	: Sam Dunn
 	Company : One Mighty Roar (www.onemightyroar.com)
 	License : MIT License / GPL License
 	
 */

 * { margin:0; padding:0; }
 body { background:#111; height:100%; }
 	img { border:none; }
 	
 	#supersized-loader { position:absolute; top:50%; left:50%; z-index:0; width:60px; height:60px; margin:-30px 0 0 -30px; text-indent:-999em; background:url(../image/progress.gif) no-repeat center center;}
 	
 	#supersized {  display:block; position:fixed; left:0; top:0; overflow:hidden; z-index:-999; height:100%; width:100%; }
 		#supersized img { width:auto; height:auto; position:relative; display:none; outline:none; border:none; }
 			#supersized.speed img { -ms-interpolation-mode:nearest-neighbor; image-rendering: -moz-crisp-edges; }	/*Speed*/
 			#supersized.quality img { -ms-interpolation-mode:bicubic; image-rendering: optimizeQuality; }			/*Quality*/
 		
 		#supersized li { display:block; list-style:none; z-index:-30; position:fixed; overflow:hidden; top:0; left:0; width:100%; height:100%; background:#111; }
 		#supersized a { width:100%; height:100%; display:block; }
 			#supersized li.prevslide { z-index:-20; }
 			#supersized li.activeslide { z-index:-10; }
 			#supersized li.image-loading { background:#111 url(../image/progress.gif) no-repeat center center; width:100%; height:100%; }
 				#supersized li.image-loading img{ visibility:hidden; }
 			#supersized li.prevslide img, #supersized li.activeslide img{ display:inline; }


 #supersized img { max-width: none !important }

--- a/src/main/webapp/static/image/backgrounds/1.jpg
+++ b/src/main/webapp/static/image/backgrounds/1.jpg
--- a/src/main/webapp/static/image/backgrounds/2.jpg
+++ b/src/main/webapp/static/image/backgrounds/2.jpg
--- a/src/main/webapp/static/image/backgrounds/3.jpg
+++ b/src/main/webapp/static/image/backgrounds/3.jpg
--- a/src/main/webapp/static/image/facebook.png
+++ b/src/main/webapp/static/image/facebook.png
--- a/src/main/webapp/static/image/progress.gif
+++ b/src/main/webapp/static/image/progress.gif
--- a/src/main/webapp/static/image/twitter.png
+++ b/src/main/webapp/static/image/twitter.png
--- a/src/main/webapp/static/js/main.js
+++ b/src/main/webapp/static/js/main.js
@@ -1,5 +1,6 @@
 function openTerminal(options) {
    //var CONNECT_TIME = 0; // 请求连接次数
    $("#form").hide();
    Rows = parseInt(options.Rows);
    var client = new WSSHClient();
    var base64 = new Base64();
--- a/src/main/webapp/static/js/supersized-init.js
+++ b/src/main/webapp/static/js/supersized-init.js
@@ -0,0 +1,30 @@
 jQuery(function($){

    $.supersized({

        // Functionality
        slide_interval     : 4000,    // Length between transitions
        transition         : 1,    // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
        transition_speed   : 1000,    // Speed of transition
        performance        : 1,    // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)

        // Size & Position
        min_width          : 0,    // Min width allowed (in pixels)
        min_height         : 0,    // Min height allowed (in pixels)
        vertical_center    : 1,    // Vertically center background
        horizontal_center  : 1,    // Horizontally center background
        fit_always         : 0,    // Image will never exceed browser width or height (Ignores min. dimensions)
        fit_portrait       : 1,    // Portrait images will not exceed browser height
        fit_landscape      : 0,    // Landscape images will not exceed browser width

        // Components
        slide_links        : 'blank',    // Individual links for each slide (Options: false, 'num', 'name', 'blank')
        slides             : [    // Slideshow Images
                                 {image : '/static/image/backgrounds/1.jpg'},
                                 {image : '/static/image/backgrounds/2.jpg'},
                                 {image : '/static/image/backgrounds/3.jpg'}
                             ]

    });

 });
--- a/src/main/webapp/static/js/supersized.3.2.7.min.js
+++ b/src/main/webapp/static/js/supersized.3.2.7.min.js