kenmirrors/MagicMirror
1
0
Fork 0
mirror of https://github.com/MichMich/MagicMirror.git synced 2025-06-27 03:39:55 +00:00
Code Issues Projects Releases Wiki Activity

add subinfo and fix css

Browse Source
This commit is contained in:
Michael Teeuw 2014-02-24 11:19:51 +01:00
parent aaa5c1c7d6
commit 65b5ca367d
3 changed files with 66 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
css/main.css
View File

@ -11,18 +11,62 @@ body, html {
font-size: 75px; font-size: 75px;
} }
.TopLeft .top
{ {
position: absolute; position: absolute;
top: 50px; top: 50px;
}
.left
{
position: absolute;
left: 50px; left: 50px;
} }
.TopRight .right
{ {
position: absolute; position: absolute;
top: 50px;
right: 50px; right: 50px;
text-align: right;
} }
.center-ver
{
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
line-height: 100px;
}
.center-hor
{
position: absolute;
right: 50px;
left: 50px;
text-align: center;
}
.bottom
{
position: absolute;
bottom: 50px;
}
.xsmall
{
font-size: 25px;
}
.small
{
font-size: 35px;
}
.dimmed
{
color: #999;
}
.icon { .icon {
position: relative; position: relative;
top :-10px; top :-10px;
@ -31,27 +75,6 @@ body, html {
padding-right: 5px; padding-right: 5px;
font-weight: 100; font-weight: 100;
margin-right: 10px; margin-right: 10px;
}
.Center
{
position: absolute;
top: 50%;
height: 200px;
margin-top: -100px;
width: 100%;
text-align: center;
}
.Bottom
{
font-size: 35px;
position: absolute;
bottom: 50px;
right: 50px;
left: 50px;
overflow: hidden;
text-align: center;
} }
@font-face { @font-face {

8
index.php
View File

@ -9,10 +9,10 @@
</head> </head>
<body> <body>
<div class="TopLeft time"></div> <div class="top left"><div class="date xsmall dimmed"></div><div class="time"></div></div>
<div class="TopRight temp"></div> <div class="top right"><div class="forecast xsmall dimmed"></div><div class="temp"></div></div>
<div class="Center compliment"></div> <div class="center-ver center-hor"><div class="compliment"></div></div>
<div class="Bottom"> <div class="bottom center-hor"><div class="news small"></div></div>
</div> </div>

17
js/main.js
View File

@ -44,24 +44,31 @@ jQuery(document).ready(function($) {
(function updateTime() (function updateTime()
{ {
var months = ['januari','februari','maart','april','mei','juni','juli','augustus','september','oktober','november','december'];
var now = new Date(); var now = new Date();
var hh = now.getHours(); var hh = now.getHours();
var mm = now.getMinutes(); var mm = now.getMinutes();
var ss = now.getSeconds(); var ss = now.getSeconds();
var day = now.getDate();
var month = now.getMonth();
var year = now.getFullYear();
hh = (hh < 10) ? '0' + hh : hh; hh = (hh < 10) ? '0' + hh : hh;
mm = (mm < 10) ? '0' + mm : mm; mm = (mm < 10) ? '0' + mm : mm;
ss = (ss < 10) ? '0' + ss : ss; ss = (ss < 10) ? '0' + ss : ss;
var date = day + ' ' + months[month] + ' ' + year;
var time = hh + ":" + mm; var time = hh + ":" + mm;
$('.date').html(date);
$('.time').html(time); $('.time').html(time);
setTimeout(function() { setTimeout(function() {
updateTime(); updateTime();
}, 1000); }, 1000);
})(); })();
/* /*
(function updateCompliment() (function updateCompliment()
@ -112,9 +119,15 @@ jQuery(document).ready(function($) {
$.getJSON('http://api.openweathermap.org/data/2.5/weather', params, function(json, textStatus) { $.getJSON('http://api.openweathermap.org/data/2.5/weather', params, function(json, textStatus) {
var temp = Math.round(json.main.temp * 10) / 10; var temp = Math.round(json.main.temp * 10) / 10;
var temp_min = Math.round(json.main.temp_min * 10) / 10;
var temp_max = Math.round(json.main.temp_max * 10) / 10;
var iconClass = iconTable[json.weather[0].icon]; var iconClass = iconTable[json.weather[0].icon];
var icon = $('<span/>').addClass('icon').addClass(iconClass); var icon = $('<span/>').addClass('icon').addClass(iconClass);
$('.temp').updateWithText(icon.outerHTML()+temp+'&deg;', 1000); $('.temp').updateWithText(icon.outerHTML()+temp+'&deg;', 1000);
var forecast = 'Min: '+temp_min+'&deg;, Max: '+temp_max+'&deg;';
$('.forecast').updateWithText(forecast, 1000);
}); });
setTimeout(function() { setTimeout(function() {
@ -142,7 +155,7 @@ jQuery(document).ready(function($) {
(function showNews() { (function showNews() {
var newsItem = news[newsIndex]; var newsItem = news[newsIndex];
$('.Bottom').updateWithText(newsItem,2000); $('.news').updateWithText(newsItem,2000);
newsIndex--; newsIndex--;
if (newsIndex < 0) newsIndex = news.length - 1; if (newsIndex < 0) newsIndex = news.length - 1;