source/screens/demo/examples/clock.liquid

@@ -0,0 +1,34 @@
+---
+title: Clock
+tags:
+- demoExample
+---
+{% assign pageBase = "../../" -%}
+{% assign bodyClass = "body_clock" -%}
+{% layout "hippie/full.liquid" %}
+
+{% block body %}
+<main>
+	<canvas id="clock" width="512" height="512"></canvas>
+</main>
+{% endblock %}
+
+{% block script %}
+{{ block.super -}}
+<script>
+	// Page script
+	const canvas = document.getElementById('clock');
+	const ctx = canvas.getContext('2d');
+
+	function drawRing(x, y, outerRadius, innerRadius, color) {
+		ctx.beginPath();
+		ctx.arc(x, y, outerRadius, 0, Math.PI * 2);
+		ctx.arc(x, y, innerRadius, 0, Math.PI * 2, true);
+		ctx.closePath();
+		ctx.fillStyle = color;
+		ctx.fill();
+	}
+
+	drawRing(256, 256, 128, 96, 'black');
+</script>
+{% endblock %}

source/style/demo.scss

@@ -14,4 +14,5 @@
 @use "modules/songbook/songbook_module";
 @use "modules/demo/demo_module";
 @use "modules/start";
+@use "modules/clock";
 // @use "modules/YOUR-MODULE/YOUR-FILES";

source/style/modules/_clock.scss

@@ -0,0 +1,9 @@
+@use "../../hippie-style/hippie";
+
+.body_clock {
+	main {
+		@extend .sec_main_center;
+		display: flex;
+		justify-content: center;
+	}
+}