pendorclock/demo/index.html

35 lines
1.1 KiB
HTML

<!DOCTYPE html>
<html lang="en-GB">
<head>
<meta charset="utf-8" />
<style>
body {
background: #fafafa;
}
.demo {
border: 1px solid DarkSlateGray;
padding: 1rem;
}
</style>
</head>
<body>
<div id="demo"></div>
<script type="module">
import { html, render } from "lit";
import "../dist/src/pendor-clock.js";
render(
html`
<div class="demo">
<p>Using the internal font (Audiowise from Google Fonts)</p>
<pendor-clock with-internal-font> </pendor-clock>
<p>Using the Pendorian centaur calendar and internal font (Audiowise from Google Fonts)</p>
<pendor-clock with-internal-font centaurs> </pendor-clock>
<p><a href="./demo-with-font.html">See demo with external font</a></p>
</div>
`,
document.querySelector("#demo")
);
</script>
</body>
</html>