Improve design of landing page

This commit is contained in:
Tor Hveem 2013-10-06 13:59:34 +02:00
parent 8520c7251a
commit 4db0a985c5

View file

@ -13,35 +13,42 @@
</head> </head>
<body ng-app="weechat"> <body ng-app="weechat">
<div ng-controller="WeechatCtrl"> <div ng-controller="WeechatCtrl">
<div ng-hide="connected"> <div ng-hide="connected" class="container">
<form class="form-horizontal"> <h2>
<legend>Connection</legend> <img src="img/favicon.png">
glowing bear
<small>
WeeChat web frontend
</small>
</h2>
<div>To start using, please enable relay in your WeeChat client:
<pre>
/set relay.network.password yourpassword
/relay add weechat 9001</pre>
Note: The communication goes directly between your browser and your weechat in clear text.
Connection settings are saved between sessions, including password, in your own browser.
</div>
<h3>Connection settings</h3>
<form role="form">
<div class="alert alert-danger" ng-show="errorMessage"> <div class="alert alert-danger" ng-show="errorMessage">
<strong>Oh no!</strong> We cannot connect! <strong>Oh no!</strong> We cannot connect!
</div> </div>
<div class="control-group"> <div class="form-group">
<label class="control-label" for="hostport">Hostport</label> <label class="control-label" for="hostport">Hostname and port</label>
<div class="controls"> <input type="text" class="form-control" id="hostport" ng-model="hostport" placeholder="Hostport">
<input type="text" id="hostport" ng-model="hostport" placeholder="Hostport"> <p class="help-block">Enter the hostname and the port to the WeeChat relay, separated by a :</p>
</div> </div>
</div> <div class="form-group">
<div class="control-group"> <label class="control-label" for="password">WeeChat relay password</label>
<label class="control-label" for="proto">Proto</label> <input type="password"class="form-control" id="password" ng-model="password" placeholder="Password">
<div class="controls"> <p class="help-block">Password will be stored in your browser session</p>
<input type="text" id="proto" ng-model="proto" placeholder="proto">
</div> </div>
</div> <div class="form-group">
<div class="control-group"> <label class="control-label" for="proto">Proto</label>
<label class="control-label" for="password">Password</label> <input type="text" class="form-control" id="proto" ng-model="proto" placeholder="proto">
<div class="controls"> <p class="help-block">Default is fine.</p>
<input type="password" id="password" ng-model="password" placeholder="Password">
</div> </div>
</div> <button class="btn btn-lg btn-primary" ng-click="connect()">Connect!</button>
<div class="control-group">
<div class="controls">
<button class="btn btn-primary" ng-click="connect()">Connect!</button>
</div>
</div>
</form> </form>
</div> </div>
<div ng-show="connected"> <div ng-show="connected">