157 lines
8 KiB
HTML
157 lines
8 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Casa Lens | Casablana Test App</title>
|
|
<meta charset="utf-8" />
|
|
<link href="css/default.css" rel="stylesheet" type="text/css">
|
|
<script type="text/javascript" src="/js/default.js"></script>
|
|
</head>
|
|
<body style="width: 60%; margin: 0 auto;">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<img class="Logo" src="image/logo.png">
|
|
</div>
|
|
</td>
|
|
<td id="searchBar" style="width: 90%; vertical-align: middle; text-align: right; padding-right: 40px">
|
|
<input style="width: 80%; min-height: 30px; color: #444444;" id="location_ip" type="text"
|
|
class="textclass" name="q" size="21" maxlength="120" value="Search Zip or City" onclick="ClearText()" />
|
|
<button style="width: 120px; min-height: 30px;" type="button" onclick="FetchData()" class="tftextbtn" name="q" size="21" maxlength="120">Search</button>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div id="defaultData">
|
|
<img style="height: 100%; width: 100%" src="/image/wall.jpg">
|
|
</div>
|
|
<div id="errorData" style="display: none;">
|
|
<p style="color: #950C0C; font-size: large;">Failed to fetch the data! Please try again later.</p>
|
|
<img style="height: 100%; width: 100%" src="/image/wall.jpg">
|
|
</div>
|
|
<div id="cityData" style="display: none;">
|
|
<table style="width: 100%;">
|
|
<tr>
|
|
<td style="width: 70%;">
|
|
<h4 style="background-color: #006092; color: #fff;">Attractions</h4>
|
|
<table>
|
|
<tr>
|
|
<td style="width: 80%">
|
|
<center style="width: 100%; height: 100%;">
|
|
<img class="mainPic" id="mainPic1" style="width: 95%;"
|
|
src="/image/wall.jpg">
|
|
</center>
|
|
</td>
|
|
<td style="width: 20%">
|
|
<img class="thumbnailPic" id="thumbnailPic1" src="/image/wall.jpg" style="width: 100%;">
|
|
<img class="thumbnailPic" id="thumbnailPic2" src="/image/wall.jpg" style="width: 100%;">
|
|
<img class="thumbnailPic" id="thumbnailPic3" src="/image/wall.jpg" style="width: 100%;">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div>
|
|
<p>
|
|
<a href="http://www.bing.com/">Image </a>results by
|
|
<img src="image/bing-logo.jpg">
|
|
</p>
|
|
</div>
|
|
|
|
</td>
|
|
<td style="width: 45%; height: 100%;" id="weatherData">
|
|
<h4 style="background-color: #006092; color: #fff;">Current Weather</h4>
|
|
<table id="weatherTemplate" class="WeatherData" style="width: 100%; height: 100%; display: none">
|
|
<tr style="height: 100%; width: 100%;">
|
|
<td>
|
|
<div class="CurrentTemperature">%wt%°F</div>
|
|
<img id="weatherImg" src="%wimg%" style="float: left;">
|
|
<p>%wdesc%</p>
|
|
<hr>
|
|
</td>
|
|
</tr>
|
|
<tr style="height: 100%; width: 100%;">
|
|
<td style="vertical-align: middle; width: 100%">
|
|
<table style="width: 100%">
|
|
<tr>
|
|
<td>Min. Temperature</td>
|
|
<td style="text-align: right">%wtmin%°F</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Max. Temperature</td>
|
|
<td style="text-align: right">%wtmax%°F</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Pressure</td>
|
|
<td style="text-align: right">%wp%mb</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<div>
|
|
<p><a href="http://openweathermap.org/">Weather </a>by OpenWeatherMap</p>
|
|
<p><a href="https://developers.google.com/maps/">Postal code to location conversion </a>by Google Maps API</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td style="width: 60%; padding-right: 20px; padding-left: 20px;">
|
|
<div id="eventsData">
|
|
<h4 style="background-color: #006092; color: #fff;">Events around you</h4>
|
|
<table id="eventsTable" style="width: 100%">
|
|
<tr id="eventTemplate" style="display: none">
|
|
<td style="margin: 10px; padding-bottom: 20px">
|
|
<div class="EventTitle wrapWords"><a href="%eventlink1%">%eventtitle%</a></div>
|
|
<div class="EventDescription wrapWords" style="max-height: 200px">
|
|
%eventdescription%
|
|
<a class="read-more" href="%eventlink2%" data-omni-sm="gbl_river_readmore">...</a>
|
|
</div>
|
|
</td>
|
|
<td style="min-width: 100px">%eventvenue%</td>
|
|
<td style="min-width: 100px">%eventstarttime% </td>
|
|
</tr>
|
|
</table>
|
|
<div class="eventful-badge eventful-medium">
|
|
<img src="http://api.eventful.com/images/powered/eventful_88x31.gif"
|
|
alt="Local Events, Concerts, Tickets">
|
|
<p><a href="http://eventful.com/">Events</a> by Eventful</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td style="width: 40%; padding-left: 10px;">
|
|
<div id="moviesData">
|
|
<h4 style="background-color: #006092; color: #fff;">Now playing in Theaters</h4>
|
|
<div id="movieTemplateToHide">
|
|
<div id="movieTemplate" style="display: none">
|
|
<table>
|
|
<tr>
|
|
<td>
|
|
<h2 class="EventTitle">%mtitle%</h2>
|
|
<p>%mtheater%</p>
|
|
</td>
|
|
<td rowspan="2">
|
|
<img class="thumbnailPic" id="Img1" src="%mposter%" style="width: 100%;">
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<hr>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p><a href="http://developer.tmsapi.com/">Movie data</a> by OnConnect TMS API services</p>
|
|
<p>
|
|
<a href="http://www.bing.com/">Movie poster </a>results by
|
|
<img src="/image/bing-logo.jpg" alt="Movie poster results by Bing">
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
|
|
</table>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|