From 395d7f1d6b6f3b83f13f5f060a7f4cf80ac87694 Mon Sep 17 00:00:00 2001
From: Nils <32552517+byReqz@users.noreply.github.com>
Date: Tue, 13 Aug 2019 02:45:33 +0200
Subject: [PATCH] Add files via upload

---
 index.html | 97 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 97 insertions(+)
 create mode 100644 index.html
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..884812e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>ugly clock</title>
+<style>
+#container {
+  margin: 0 auto;
+  width: 100%;
+  text-align: center;
+}
+</style>
+<script>
+var canvas, ctx, clockWidth, centerX, centerY;
+
+function drawClockFace() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.beginPath();
+  ctx.arc(centerX, centerY, 8, 0, 2 * Math.PI, false);
+  ctx.fillStyle= "black";
+  ctx.fill();
+  ctx.closePath();
+  ctx.strokeStyle= "black";
+  for (var i= 0; i < 60; i++) {
+    ctx.save();
+    ctx.beginPath();
+    ctx.translate(centerX, centerY);
+    ctx.rotate(i * Math.PI / 30);
+    ctx.translate(0, -clockWidth / 2);
+    if ((i % 5) == 0) {
+      ctx.moveTo(0, 0);
+      ctx.lineWidth= 4;
+      ctx.lineTo(0, 10);
+    } else {
+      ctx.moveTo(0, 2);
+      ctx.lineWidth= 1;
+      ctx.lineTo(0, 7);
+    }
+    ctx.stroke();
+    ctx.restore();
+  }
+} // drawClockFace()
+
+function drawHand(length, angle) {
+  ctx.save();
+  ctx.beginPath();
+  ctx.translate(centerX, centerY);
+  ctx.rotate(Math.PI * (angle - 180) / 180);
+  ctx.moveTo(0, 0);
+  ctx.lineTo(0, length);
+  ctx.stroke();
+  ctx.restore();
+} // drawHand(.,.)
+
+function onDrawTime() {
+  drawClockFace();
+
+  var date= new Date();
+  var hours= date.getHours() % 12;
+  var minutes= date.getMinutes();
+  var seconds= date.getSeconds();
+
+  ctx.strokeStyle= "rgb(0, 0, 255)";
+  ctx.lineWidth= 6;
+  drawHand(clockWidth / 3.5, (hours + (minutes / 60)) * 30);
+
+  ctx.strokeStyle= "rgba(0, 255, 0, 0.7)";
+  ctx.lineWidth= 4;
+  drawHand(clockWidth / 2.2, minutes * 6);
+
+  ctx.strokeStyle= "red";
+  ctx.lineWidth= 1;
+  drawHand(clockWidth/2, seconds * 6);
+} // onDrawTime()
+
+function initializeClock() {
+  canvas= document.getElementById("analog_clock");
+  clockWidth= Math.min(canvas.width, canvas.height) - 10;
+  ctx= canvas.getContext("2d");
+  centerX= canvas.width / 2;
+  centerY= canvas.height / 2;
+  ctx.lineCap= "round";
+  onDrawTime();
+  setInterval(onDrawTime, 1000);
+} // initializeClock()
+
+onload= initializeClock;
+</script>
+</head>
+<body>
+<div id="container">
+  <h1>Hässliche Uhr lol</h1>
+  <canvas id="analog_clock" width="160" height="160">
+    Sorry, canvas is not supported in this browser.
+  </canvas>
+</div>
+</body>
+</html>
