Untitled

<html>

<head>

    <title>thinClock</title>

    <style type="text/css">


        @font-face {

            font-family: 'Raleway';

            font-style: normal;

            font-weight: 100;

            src: local('Raleway Thin'), local('Raleway-Thin'), url('raleway100.woff') format('woff');

        }


        @font-face {

            font-family: 'Raleway';

            font-style: normal;

            font-weight: 300;

            src: local('Raleway Light'), local('Raleway-Light'), url('raleway300.woff') format('woff');

        }


        body {

            background: url('bg.jpg') center center no-repeat;

            background-size: 100%;

        }


        h1 {

            margin: 5px 0 0 0;

            text-align: left;

            color: #fff;

            font-family: 'Raleway', sans-serif;

            font-weight: 100;

            font-size: 80px;

        }


        p {

            margin: 1px 0 0 0;

            text-align: right;

            color: #fff;

            font-family: 'Raleway', sans-serif;

            font-weight: 300;

            font-size: 20px;

        }


    </style>

    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, maximum-scale=1.0">

</head>

<body>


    <h1 id="time"></h1>

    <p id="date"></p>


    <script type="text/javascript">


        function calculateTime() {

            var Make_It_12_Hour = false;


            var currentTime = new Date();

            var hours = currentTime.getHours();

            var minutes = currentTime.getMinutes();


            if (Make_It_12_Hour) {

                var ampm = hours >= 12 ? "pm" : "am";

                hours = hours % 12;

                hours = hours ? hours : 12;

                minutes = minutes < 10 ? "0" + minutes : minutes;

            } else {

                if (minutes < 10) { minutes = "0" + minutes; }

                if (hours < 10) { hours = "0" + hours; }

            }


            document.getElementById("time").innerText = hours + ":" + minutes;

        }


        function calculateDate() {

            var months = new Array("January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December");

            var currentTime = new Date();

            var day = currentTime.getDate().toString();

            var month = months[currentTime.getMonth()];

            var year = currentTime.getFullYear();


            var dayInd = (day.length >= 2) ? day.substring(day.length - 1) : day;

            var ending = "";


            switch (dayInd) {

                case "1":

                    ending = (day == "11") ? "th" : "st";

                    break;

                case "2":

                    ending = (day == "12") ? "th" : "nd";

                    break;

                case "3":

                    ending = (day == "13") ? "th" : "rd";

                    break;

                default:

                    ending = "th";

                    break;

            }


            document.getElementById("date").innerText = day + ending + " of " + month;

        }


        calculateTime();

        calculateDate();

        setInterval(calculateTime, 2000);

        setInterval(calculateDate, 60000);


    </script>


</body>

</html>