diff --git a/src/main/resources/static/css/style.css b/src/main/resources/static/css/style.css index df676e7..80b9048 100644 --- a/src/main/resources/static/css/style.css +++ b/src/main/resources/static/css/style.css @@ -238,4 +238,9 @@ body { padding: 8px; border-radius: 4px; border: 1px solid silver; +} + +.clock { + background-image: url("../png/clock.png"); + background-repeat: no-repeat; } \ No newline at end of file diff --git a/src/main/resources/static/js/clock.js b/src/main/resources/static/js/clock.js new file mode 100644 index 0000000..42c40a1 --- /dev/null +++ b/src/main/resources/static/js/clock.js @@ -0,0 +1,85 @@ +'use strict'; + +/** + * Coolock Definition + */ +class Clock { + constructor(size, selector, color, background) { + + var canvas = $(""); + canvas.attr("id", "clockPanel"); + canvas.attr("width", size); + canvas.attr("height", size); + canvas.css("border-radius", "4px"); + canvas.css("background", background); + canvas[0].getContext("2d").canvas.width = size; + canvas[0].getContext("2d").canvas.height = size - 3; // -3 removes unneeded overlap + + $(selector).append(canvas); + var ctx = canvas[0].getContext("2d"); + this.ctx = ctx; + this.size = size; + this.background = background; + this.color = color; + + this.redraw(); + } + + drawCircle = function(ctx, x, y, r, w) { + ctx.strokeStyle = this.color; + ctx.lineWidth = w; + ctx.beginPath(); + ctx.arc(x, y, r, 0, 2 * Math.PI); + ctx.stroke(); + }; + + drawArrow = function(ctx, x1, y1, x2, y2, col) { + ctx.strokeStyle = col; + ctx.fillStyle = this.color; + ctx.lineCap = "round"; + ctx.lineWidth = 2; + ctx.beginPath(); + ctx.moveTo(x1, y1); + ctx.lineTo(x2, y2); + ctx.stroke(); + }; + + redraw = function() { + var ctx = this.ctx; + var color = this.color; + var size = this.size; + var halfSize = size / 2; + var d = new Date(); + var h = d.getHours(); + var m = d.getMinutes(); + var s = d.getSeconds(); + var hoursTotal = (h + m / 60 + s / 3600); + + ctx.clearRect(0, 0, size, size); + + ctx.beginPath(); + ctx.fillStyle = this.background; + ctx.fillRect(0, 0, size, size); + + // small hour pointer + this.drawArrow(ctx, size / 2 + 0.2 * size * Math.cos(hoursTotal * Math.PI / 6 - Math.PI / 2), + size / 2 + 0.2 * size * Math.sin(hoursTotal * Math.PI / 6 - Math.PI / 2), + halfSize, halfSize, color); + + // huge minute pointer + this.drawArrow(ctx, size / 2 + 0.4 * size * Math.cos(6 * (m + s / 60) * Math.PI / 180 - Math.PI / 2), + size / 2 + 0.4 * size * Math.sin(6 * (m + s / 60) * Math.PI / 180 - Math.PI / 2), + halfSize, halfSize, color); + + ctx.beginPath(); + ctx.arc(halfSize, halfSize, 0.04 * size, 0, Math.PI * 2); + + $("#clockPanel").attr("title", this.lz(h) + ":" + this.lz(m) + ":" + this.lz(s)); + + setTimeout(this.redraw.bind(this), 1000); + }; + + lz = function(d) { + return (d > 9) ? "" + d : "0" + d; + } +} \ No newline at end of file diff --git a/src/main/resources/static/png/clock.png b/src/main/resources/static/png/clock.png new file mode 100644 index 0000000..08dae5a Binary files /dev/null and b/src/main/resources/static/png/clock.png differ diff --git a/src/main/resources/static/png/favicon/favicon-16x16.png b/src/main/resources/static/png/favicon/favicon-16x16.png new file mode 100644 index 0000000..2fd3d38 Binary files /dev/null and b/src/main/resources/static/png/favicon/favicon-16x16.png differ diff --git a/src/main/resources/static/png/favicon/favicon-32x32.png b/src/main/resources/static/png/favicon/favicon-32x32.png new file mode 100644 index 0000000..1f5a56d Binary files /dev/null and b/src/main/resources/static/png/favicon/favicon-32x32.png differ diff --git a/src/main/resources/templates/done/item.html b/src/main/resources/templates/done/item.html index 26fbee8..89cc1a0 100644 --- a/src/main/resources/templates/done/item.html +++ b/src/main/resources/templates/done/item.html @@ -29,7 +29,6 @@
- @@ -37,7 +36,7 @@ - +
@@ -48,7 +47,6 @@
- @@ -56,7 +54,7 @@ - +
diff --git a/src/main/resources/templates/layout/main.html b/src/main/resources/templates/layout/main.html index a1ce67d..1822219 100644 --- a/src/main/resources/templates/layout/main.html +++ b/src/main/resources/templates/layout/main.html @@ -8,7 +8,6 @@ - @@ -17,9 +16,8 @@ - - + @@ -45,10 +43,13 @@
  • - + +