Can someone help me with some HTML editing got this from someone else but clock too small
Here it is
<html>
<head>
<title>DW Clock</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-image: url('bg.png');
background-size: 100%;
}
.hidden {
display: none;
}
#clock-container {
margin: 180px 0 0 0;
}
div.clock {
margin: 80;
width: 150px;
background-image: url('uhr.png');
background-size: 100%;
}
#clock-minute {
margin: -150px 0 0 0;
}
#clock-second {
margin: -150px 0 0 0;
}
div#date {
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: 800;
color: #c8c8c8;
text-align: center;
margin: -237px 0 0 0px;
}
p#time-placeholder {
margin: 2px 0 0 0;
}
img {
width: 150px;
height: 150px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
</head>
<body id="body">
<div id="clock-container">
<div class="clock">
<img src="hour.png" id="clock-hour" />
<img src="minute.png" id="clock-minute" />
<img src="second.png" id="clock-second" />
</div>
<div id="date" class="hidden">
<p id="date-placeholder"></p>
</div>
</div>
<script type="text/javascript">
String.prototype.format = function() {
var formatted = this;
for (var i = 0; i < arguments.length; i++) {
var regexp = new RegExp('\\{'+i+'\\}', 'gi');
formatted = formatted.replace(regexp, arguments);
}
return formatted;
};
function getHourAngle() {
var currentDate = new Date();
return Math.round((currentDate.getHours() * 30) + (currentDate.getMinutes() / 2) + (currentDate.getSeconds() / 120));
}
function getMinuteAngle() {
var currentDate = new Date();
return Math.round((currentDate.getMinutes() * 6) + (currentDate.getSeconds() / 10));
}
function getSecondAngle() {
var currentDate = new Date();
return Math.round((currentDate.getSeconds() * 6));
}
function updateClock() {
document.getElementById("clock-hour").setAttribute("style", "-webkit-transform: rotate(" + getHourAngle() + "deg);");
document.getElementById("clock-minute").setAttribute("style", "-webkit-transform: rotate(" + getMinuteAngle() + "deg);");
document.getElementById("clock-second").setAttribute("style", "-webkit-transform: rotate(" + getSecondAngle() + "deg);");
}
function calculateStatusbar() {
var Make_It_12_Hour = false;
var currentTime = new Date();
var day = currentTime.getDate();
var month = currentTime.getMonth() + 1;
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var outputTemplate = "";
if (Make_It_12_Hour) {
hours = hours % 12;
hours = hours ? hours : 12;
// 'murica mode. I really don't know who came up with this bullshit
outputTemplate = "";
} else {
outputTemplate = "";
}
if (day < 10) { day = "0" + day; }
if (month < 10) { month = "0" + month; }
if (hours < 10) { hours = "0" + hours; }
if (minutes < 10) { minutes = "0" + minutes; }
document.getElementById("date-placeholder").innerText = outputTemplate.format(day, month, hours, minutes);
}
function showDate() {
document.getElementById('date').setAttribute("class", "");
}
function hideDate() {
document.getElementById('date').setAttribute("class", "hidden");
}
calculateStatusbar();
updateClock();
setInterval(updateClock, 1000);
setInterval(calculateStatusbar, 1000);
document.getElementById('clock-container').addEventListener('touchstart', showDate, false);
document.getElementById('clock-container').addEventListener('touchend', hideDate, false);
</script>
</body>
</html>
Also would like date, day and month. Here is what i want it to look like. If you need more details just reply.
Here it is
<html>
<head>
<title>DW Clock</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background-image: url('bg.png');
background-size: 100%;
}
.hidden {
display: none;
}
#clock-container {
margin: 180px 0 0 0;
}
div.clock {
margin: 80;
width: 150px;
background-image: url('uhr.png');
background-size: 100%;
}
#clock-minute {
margin: -150px 0 0 0;
}
#clock-second {
margin: -150px 0 0 0;
}
div#date {
font-family: Helvetica, sans-serif;
font-size: 14px;
font-weight: 800;
color: #c8c8c8;
text-align: center;
margin: -237px 0 0 0px;
}
p#time-placeholder {
margin: 2px 0 0 0;
}
img {
width: 150px;
height: 150px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">
</head>
<body id="body">
<div id="clock-container">
<div class="clock">
<img src="hour.png" id="clock-hour" />
<img src="minute.png" id="clock-minute" />
<img src="second.png" id="clock-second" />
</div>
<div id="date" class="hidden">
<p id="date-placeholder"></p>
</div>
</div>
<script type="text/javascript">
String.prototype.format = function() {
var formatted = this;
for (var i = 0; i < arguments.length; i++) {
var regexp = new RegExp('\\{'+i+'\\}', 'gi');
formatted = formatted.replace(regexp, arguments);
}
return formatted;
};
function getHourAngle() {
var currentDate = new Date();
return Math.round((currentDate.getHours() * 30) + (currentDate.getMinutes() / 2) + (currentDate.getSeconds() / 120));
}
function getMinuteAngle() {
var currentDate = new Date();
return Math.round((currentDate.getMinutes() * 6) + (currentDate.getSeconds() / 10));
}
function getSecondAngle() {
var currentDate = new Date();
return Math.round((currentDate.getSeconds() * 6));
}
function updateClock() {
document.getElementById("clock-hour").setAttribute("style", "-webkit-transform: rotate(" + getHourAngle() + "deg);");
document.getElementById("clock-minute").setAttribute("style", "-webkit-transform: rotate(" + getMinuteAngle() + "deg);");
document.getElementById("clock-second").setAttribute("style", "-webkit-transform: rotate(" + getSecondAngle() + "deg);");
}
function calculateStatusbar() {
var Make_It_12_Hour = false;
var currentTime = new Date();
var day = currentTime.getDate();
var month = currentTime.getMonth() + 1;
var hours = currentTime.getHours();
var minutes = currentTime.getMinutes();
var outputTemplate = "";
if (Make_It_12_Hour) {
hours = hours % 12;
hours = hours ? hours : 12;
// 'murica mode. I really don't know who came up with this bullshit
outputTemplate = "";
} else {
outputTemplate = "";
}
if (day < 10) { day = "0" + day; }
if (month < 10) { month = "0" + month; }
if (hours < 10) { hours = "0" + hours; }
if (minutes < 10) { minutes = "0" + minutes; }
document.getElementById("date-placeholder").innerText = outputTemplate.format(day, month, hours, minutes);
}
function showDate() {
document.getElementById('date').setAttribute("class", "");
}
function hideDate() {
document.getElementById('date').setAttribute("class", "hidden");
}
calculateStatusbar();
updateClock();
setInterval(updateClock, 1000);
setInterval(calculateStatusbar, 1000);
document.getElementById('clock-container').addEventListener('touchstart', showDate, false);
document.getElementById('clock-container').addEventListener('touchend', hideDate, false);
</script>
</body>
</html>
Also would like date, day and month. Here is what i want it to look like. If you need more details just reply.
. Here it is:
