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;
}
.TopLeft
.top
{
position: absolute;
top: 50px;
}
.left
{
position: absolute;
left: 50px;
}
.TopRight
.right
{
position: absolute;
top: 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 {
position: relative;
top :-10px;
@ -31,27 +75,6 @@ body, html {
padding-right: 5px;
font-weight: 100;
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 {

8
index.php
View File

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

17
js/main.js
View File

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