function clock_head()
{
$unit = 15;
$size1 = $unit * 10;
//xee
$size2 = $unit * 15;
//xsi
$size3 = $unit * 20;
//uiw
$size4 = $unit * 18;
//landmark
$hourclr = '#990000';
$minclr = '#000099';
$secclr = '#009900';
Head::add('csscode', '
#clockFrame{
background:#fff;
width:' . ($size3 + 40) . 'px;
height:' . ($size3 + 60) . 'px;
padding:10px;
position:relative;
}
#clock{
background:#fff;
border:2px solid grey;
width:' . $size3 . 'px;
height:' . $size3 . 'px;
position:absolute;
left:calc(50% - ' . $size3 / 2 . 'px);
top:calc(50% - ' . $size3 / 2 . 'px);
border-radius:' . $size3 / 2 . 'px;
transform:rotate(0deg) translate(0px, -2px);
}
#landmark{
border:1px solid #555;
background:#555;
width:1px;
height:10px;
margin:0px auto;
}
#landmarkSub{
border:1px solid #999;
background:#999;
width:1px;
height:5px;
margin:0px auto;
}
#landmarkFrame{
width:' . $size3 . 'px;
height:' . $size3 . 'px;
position:absolute;
left:calc(50% - ' . $size3 / 2 . 'px);
top:calc(50% - ' . $size3 / 2 . 'px);
transform:rotate(0deg);
}
#landmarkText{
text-align:center;
margin:0px auto;
}
#landmarkTextFrame{
width:' . $size4 . 'px;
height:' . $size4 . 'px;
position:absolute;
left:calc(50% - ' . $size4 / 2 . 'px);
top:calc(50% - ' . $size4 / 2 . 'px);
transform:rotate(0deg);
}
#clockCenter{
border:2px solid grey;
background:white;
width:16px;
height:16px;
position:absolute;
left:calc(50% - 9px);
top:calc(50% - 9px);
border-radius:8px;
}
' . uclock_needle_css('needleHour', $size1, $hourclr, 8, $size1 / 2) . '
' . uclock_needle_css('needleMin', $size2, $minclr, 6, $size2 / 2) . '
' . uclock_needle_css('needleSec', $size3, $secclr, 4, $size3 / 2) . '
');
Head::add('jscode', clock_js());
}
function uclock_css()
{
$unit = 15;
$size1 = $unit * 10;
//xee
$size2 = $unit * 15;
//xsi
$size3 = $unit * 20;
//uiw
$size4 = $unit * 18;
//landmark
$xeeColor = '#990000';
$xsiColor = '#000099';
$uiwColor = '#009900';
$uiwHourColor = '#990099';
return '
.xeeColor{color:' . $xeeColor . ';}
.xsiColor{color:' . $xsiColor . ';}
.uiwColor{color:' . $uiwColor . ';}
.uiwHourColor{color:' . $uiwHourColor . ';}
#digit{
position:absolute;
margin:0px auto;
font-size:small;
}
#clockFrame{
background:#fff;
width:' . ($size3 + 40) . 'px;
height:' . ($size3 + 60) . 'px;
padding:10px;
position:relative;
}
#clock{
background:#fff;
border:2px solid grey;
width:' . $size3 . 'px;
height:' . $size3 . 'px;
position:absolute;
left:calc(50% - ' . $size3 / 2 . 'px);
top:calc(50% - ' . $size3 / 2 . 'px);
border-radius:' . $size3 / 2 . 'px;
transform: rotate(0deg) translate(0px, -2px);
}
#landmark{
border:1px solid #555;
background:#555;
width:1px;
height:10px;
margin:0px auto;
}
#landmarkSub{
border:1px solid #999;
background:#999;
width:1px;
height:5px;
margin:0px auto;
}
#landmarkFrame{
width:' . $size3 . 'px;
height:' . $size3 . 'px;
position:absolute;
left:calc(50% - ' . $size3 / 2 . 'px);
top:calc(50% - ' . $size3 / 2 . 'px);
transform: rotate(0deg);
}
#landmarkText{
text-align:center;
margin:0px auto;
}
#landmarkTextFrame{
width:' . $size4 . 'px;
height:' . $size4 . 'px;
position:absolute;
left:calc(50% - ' . $size4 / 2 . 'px);
top:calc(50% - ' . $size4 / 2 . 'px);
transform: rotate(0deg);
}
#clockCenter{
border:2px solid grey;
background:white;
width:16px;
height:16px;
position:absolute;
left:calc(50% - 9px);
top:calc(50% - 9px);
border-radius:8px;
}
' . uclock_needle_css('landmarkXee', $size1, $xeeColor, 4, 10) . '
' . uclock_needle_css('needleXee', $size1, $xeeColor, 8, $size1 / 2) . '
' . uclock_needle_css('needleXsi', $size2, $xsiColor, 6, $size2 / 2) . '
' . uclock_needle_css('needleUiw', $size3, $uiwColor, 4, $size3 / 2) . '
' . uclock_needle_css('needleHour', $size2, $uiwHourColor, 4, $size3 / 2) . '
';
}
