Uhr auf Webseite

Quelle

• Projekt “SVG-Clock” von Sergey A Kryukov, 2023

Einbettung in WordPress-Seite

Die beteiligten js-Dateien werden im Bereiche “Medien” upgeloadet und in einem HTML-Block am Beginn der Seite gemeinsam mit den Style-Sheets eingebunden:

Nach dem Titel wird ein zweiter HTML-Block eingefügt, der lediglich die Tags <section></section> enthält. Der JavaScript-Code schreibt die Grafik in dieses Bereich.

<meta charset="utf-8"/>
<script src="https://clubcomputer.at/wp-content/uploads/sites/6/2023/03/SVG.js"></script>
<script src="https://clubcomputer.at/wp-content/uploads/sites/6/2023/03/clock.js"></script>
<script src="https://clubcomputer.at/wp-content/uploads/sites/6/2023/03/main.js"></script>
<style>
	* { margin: 0; padding: 0; font-family: sans-serif; box-sizing: content-box; touch-action: none; user-select: none; }
	section { text-align: center; }
	svg { height: 80vmin; width: 80vmin; }
	main { padding-left: 1em; padding-right: 1em; }
	main > section > label { margin-left: var(--small-horizontal-gap) }
	h1 { text-align: center; font-size: 110; margin-top: 0.4em; }
	/* flex: */
	html, body { height: 100%; }
	body { display: flex; flex-flow: column; }
	main { flex: auto; overflow: auto; }
	/* end flex */
	footer { background: azure; padding: 0.2em; padding-left: 1em; padding-right: 1em; border-top: solid thin gray; }
</style>