clock/clock.html at master · dneuman/clock · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<!--
Simple html page that creates a clock for old phones with old browsers.
Save this file in a folder (eg. as clock.html) on your computer, then
start a web server in a terminal window from that folder.

A simple way to do this is open a terminal window and move to the folder
holding the script (don't type '$', that's your prompt):
    $ cd path/to/folder

Now find the IP address <addr> of your computer:
    $ ipconfig getifaddr en0

You should get an address such as "10.0.1.4". If not, try en1 instead of
en0. Next start up the web server. If you have Python installed, you can
try one of these commands:
    $ python -m http.server 8080
or
    $ python3 -m http.server 8080
or
    $ python -m SimpleHTTPServer 8080

depending on whether you have Python 3 or Python 2 available.

Once running, go to the web browser on your phone and enter the link:
    http://<addr>:8080/clock.html
where <addr> is the IP address found earlier, eg 10.0.1.4

You should see a black screen with large red numbers with the correct
time. Pinch to zoom in or out to have the numbers fill the screen, plug
in the phone to keep it charged, adjust the brightness, prop it up, and
you're all set. You'll get bigger numbers with the phone on its side.

You can now close that terminal window since your phone will keep the
page running internally. Make sure you set up your phone settings so
that it doesn't shut off when plugged in.
-->
<html>
<head>
<script>
function startTime() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    var d = today.getDate();
    var w = today.getDay();
    var day = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
    m = checkTime(m);

    // Format for 12-hour clock instead of default 24-hour clock.
    // Remove these two lines for 24-hour clock.
    var sep = getSep(h);  // use sep to indicate am/pm.
    if (h > 12) {h -= 12};  // use 12-hour clock
    if (h == 0) {h = 12};

    var theTime = h + sep + m
    var theDate = day[w] + '&nbsp;' + d

    document.getElementById('text').innerHTML = theTime;
    document.getElementById('date').innerHTML = theDate;
    var t = setTimeout(startTime, 1000);  // 1-sec repeat
}
function checkTime(i) {
    if (i < 10) {i = "0" + i};  // add zero in front of numbers < 10
    return i;
}
function getSep(h) {
    var sep = '.';
    if (h >= 12) {sep = ':'};  // use ':' for pm values, '.' for am
    return sep;
}
</script>
</head>

<body onload="startTime()" style="background-color:black;">
<!-- Deep red color is used. Adjust color to your taste: #rrggbb -->
<div id="date" style="color:#dd0000; font-family:sans-serif;
		  font-size:100px; text-align:right;
		  padding-top:120px; padding-right:120px;"></div>
<div id="text" style="color:#dd0000; font-family:sans-serif;
		 font-size:256px; text-align:right;
		  line-height:0.8; padding-right:120px;"></div>

</body>
</html>