% my $url = url_for 'weather';
<!DOCTYPE html>
<html>
- <head><title>DWeather</title></head>
+ <head>
+ <title>DWeather</title>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <!-- Latest compiled and minified CSS -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+
+ <!-- Optional theme -->
+ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+
+ </head>
<body>
- <h1>DWeather</h1>
+ <center><h1>High View Weather</h1></center>
+
<script>
var ws;
ws = new WebSocket('<%= $url->to_abs %>');
- document.body.innerHTML += 'ws connecting to: <%= $url->to_abs %> type_of: ' + typeof(ws) + '<br>';
+ document.body.innerHTML += '<center>ws connecting to: <%= $url->to_abs %> type_of: ' + typeof(ws) + '</center><br>';
if (typeof(ws) === 'object') {
ws.onmessage = function (event) {
var js = JSON.parse(event.data);
</script>
+<div id="container">
+<div id="start-template">
<br><br>
-<table border=1 width=80%>
+<table border=1 width=80% align="center">
<tr>
<th>Time:<td><span id="tm"> </span>
<th>Sunrise:<td><span id="Sunrise"> </span>
<th>Month:<td> <span id="Rain_Month"> </span>
<th>Year:<td> <span id="Rain_Year"> </span>
</table>
+</div>
+</div>
+ <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
+ <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
+ <!-- Latest compiled and minified JavaScript -->
+ <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>