<!DOCTYPE html>
<html>
<head>
<title>Weather App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="css/custom.css" rel="stylesheet" media="screen">

<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor=black>

<input type="button" id="topButton" class="btn btn-exlarge" value="Weather Now" onClick="window.location.reload()"><br/><br/>
<center><form name="clockForm">
<input type="button" id="clockButton" class="btn btn-large" name="clockButton" value="Loading..." />
</form></center>
<div id="main" class="starter-template">

<div class="background-image"></div><br/>
<form>
<div class="row">
<div class="col-8 col-sm-10 col-lg-10">
<input autofocus type="search" id="searchCity" class="form-control input-large"
                           placeholder="Enter name of city or country"><br/>
</div>
<div class="col-4 col-sm-2 col-lg-2">
<input type="submit" id="searchButton" class="btn btn-large" value="Get"/>
</div>
</div>
</form>
<div id="output"></div>
<script id="weather-template" type="text/x-handlebars-template">
            <table class="table table-bordered table-hover">
                {{#if msg}}
                <h3 class="alert alert-info" data-dismiss="alert">{{msg}} <a class="close" href="#">x</a></h3>
                {{else}}
                <h3>
                    {{#if city}}
                    {{city}}, {{country}}
                    {{else}}
                    {{country}}
                    {{/if}}
                </h3>
                <thead>
                <tr>
                    <th width="15%">
                        Temperature
                    </th>
                    <th width="15%">
                        Humidity
                    </th>
                    <th width="70%">
                        Description
                    </th>

                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        {{temp}}
                    </td>
                    <td>
                        {{humid}}

                    </td>
                    <td>
                        {{weatherdesc}}
                    </td>

                </tr>
                </tbody>
                {{/if}}
            </table>
			
        </script> <br/>
		<center><input type="button" id="refButton" class="btn btn-large" value="Refresh" onClick="window.location.reload()">  <input type="button" id="closeButton" class="btn btn-large" value="Close" onclick="window.close()"></center>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
<script src="js/handlebars.js"></script> 
<script src="js/custom.js"></script>
<script src="js/close.js"></script>
<script src="js/time.js"></script>


</body>
</html>
