diff options
Diffstat (limited to 'start/livetiles/weather/index.html')
| -rw-r--r-- | start/livetiles/weather/index.html | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/start/livetiles/weather/index.html b/start/livetiles/weather/index.html new file mode 100644 index 0000000..833d4ed --- /dev/null +++ b/start/livetiles/weather/index.html @@ -0,0 +1,183 @@ +<html>
+<head>
+<title>Live Tile</title>
+<style>
+body { margin:0;padding:0;font-family:Segoe UI Light; }
+a {text-decoration:none;}
+.metroBig { font-size:36px; line-height:36px; }
+.live-tile, .list-tile
+{
+ color:#fff;
+ float:left;
+ height: 125px;
+ margin:0px;
+ overflow:hidden;
+ position:relative;
+ width: 258px;
+}
+.live-tile.two-wide, .list-tile.two-wide { width:390px; }
+.live-tile.two-tall, .list-tile.two-tall { height:390px; }
+.live-tile img, .list-tile img { border:none; }
+.live-tile.me>.slide-back>a.metroBig { position:absolute; left:0; bottom:0; padding: 0 0 12px 12px; text-decoration:none; }
+.live-tile a:link, .live-tile a:visited { color:#fff; text-decoration:underline; }
+.live-tile a:hover { color:#fff; text-decoration:none; }
+.live-tile p { font-size:13px; line-height: 16px; padding:10px; }
+.live-tile .tile-title, .list-tile .tile-title { position:absolute; bottom:0px; font-size:12px; left:0px; width:100%; padding:0 0 6px 6px; z-index:30; }
+.live-tile a.tile-title, .list-tile a.tile-title { text-decoration:none; }
+.live-tile.me>.metroBig { padding-top:45px; }
+
+.live-tile,.live-tile>div,.list-tile>div
+{ /* ensure elements on backside don't continue to take focus */
+ backface-visibility:hidden;
+ -webkit-backface-visibility:hidden;
+ -moz-backface-visibility:hidden;
+}
+
+.live-tile>div,.list-tile>div
+{
+ top:0px;
+ left:0px;
+ margin:0px;
+ height:100%;
+ width:100%;
+ position:absolute;
+ z-index:20;
+}
+.list-tile>div
+{
+ position:relative;
+}
+
+img.full , a.full
+{
+ display:block;
+ margin:0px;
+ height:100%;
+ width:100%;
+}
+.list-tile>div { background-color:transparent; }
+
+.live-tile>.back, .live-tile>.slide-back,.live-tile>.flip-back, .flip-list .flip-back
+{
+ position:absolute;
+ z-index:10;
+}
+
+
+#weather2 {
+ background: #2a7eee;
+ width: 254px;
+ height: 125px;
+ padding: 5px 10px;
+ overflow: hidden;
+ }
+
+ #weather2 h2 {
+ color: #ffffff;
+ font-size: 25px;
+ font-family:Segoe UI Light;
+ }
+
+ #weather2 p {
+ font-size: 25px;
+ font-family:Segoe UI Light;
+
+ }
+
+ #weather2 p span {
+ font-size: 14px;
+ font-family:Segoe UI Light;
+ }
+
+ #weather2 a:hover {
+ color: #000;
+ text-decoration: underline;
+ }
+#weather {
+ background: #2a7eee;
+ width: 254px;
+ height: 125px;
+ padding: 5px 10px;
+ overflow: hidden;
+ }
+
+ #weather h2 {
+ color: #ffffff;
+ font-size: 25px;
+ font-family:Segoe UI Light;
+ }
+
+ #weather p {
+ font-size: 25px;
+ font-family:Segoe UI Light;
+
+ }
+
+ #weather p span {
+ font-family:Segoe UI Light;
+ font-size: 14px;
+ }
+
+ #weather a:hover {
+ color: #000;
+ text-decoration: underline;
+ }
+</style>
+</head>
+<body>
+<div class="tiles">
+<a href="../../../iframeapps/weather.html" target="_parent">
+ <div class="live-tile">
+ <div id="weather2">
+ </div>
+ <div id="weather">
+ </div>
+ </div>
+</a>
+</div>
+</body>
+ <script src="jquery-1.5.1.min.js" type="text/javascript"></script>
+ <script src="MetroJs.lt.js" type="text/javascript"></script>
+ <script type="text/javascript">
+ $(document).ready(function () {
+ $(".live-tile,.flip-list").liveTile();
+ });
+ </script>
+<script src="jquery.simpleWeather.js" charset="utf-8"></script>
+<script type="text/javascript">
+ $(function() {
+
+ $.simpleWeather({
+ location: 'paris, france',
+ unit: 'c',
+ success: function(weather) {
+ html = 'Paris';
+ html += '<img style="float:left;" width="125px" src="'+weather.image+'">';
+ html += '<p>'+weather.temp+'° '+weather.units.temp+'<br /><br /><span>'+weather.currently+'</span></p>';
+ $("#weather2").html(html);
+ },
+ error: function(error) {
+ $("#weather2").html('<p>'+error+'</p>');
+ }
+ });
+ });
+ </script>
+<script type="text/javascript">
+ $(function() {
+
+ $.simpleWeather({
+ location: 'perth, australia',
+ unit: 'c',
+ success: function(weather) {
+ html = 'Perth';
+ html += '<img style="float:left;" width="125px" src="'+weather.image+'">';
+ html += '<p>'+weather.temp+'° '+weather.units.temp+'<br /><br /><span>'+weather.currently+'</span></p>';
+ $("#weather").html(html);
+ },
+ error: function(error) {
+ $("#weather").html('<p>'+error+'</p>');
+ }
+ });
+ });
+ </script>
+</html>
\ No newline at end of file |