ayo/status-indicator
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add header & footer on demo page; link to repos

Browse source
This commit is contained in:
ayo 2026-05-08 17:52:47 +02:00
parent c410f0775b
commit b673ca841e
1 changed files with 45 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

64
index.html
View file

@ -5,26 +5,52 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Component Demo</title> <title>Web Component Demo</title>
<script type="module" src="./src/status-indicator.ts"></script> <script type="module" src="./src/status-indicator.ts"></script>
<style>
main {
padding: 1em;
}
footer {
}
</style>
</head> </head>
<body> <body>
<status-indicator status="positive"> <header>
All systems operational <h1>&lt;status-indicator&gt;</h1>
</status-indicator> <p>
<br /> <a href="https://git.ayo.run/ayo/status-indicator">Ayo's Forge</a> &middot;
<status-indicator status="negative"> <a href="https://github.com/ayo-run/status-indicator">GitHub</a> &middot;
Something's wrong <a href="https://git.sr.ht/~ayoayco/status-indicator">SourceHut</a>
</status-indicator> </p>
<br /> </header>
<status-indicator status="active"> <main>
It's just fine; carry on <status-indicator status="positive">
</status-indicator> All systems operational
<br /> </status-indicator>
<status-indicator> <br />
Nothing matters <status-indicator status="negative">
</status-indicator> Something's wrong
<br /> </status-indicator>
<status-indicator status="intermediary"> <br />
Slow down... <status-indicator status="active">
</status-indicator> It's just fine; carry on
</status-indicator>
<br />
<status-indicator>
Nothing matters
</status-indicator>
<br />
<status-indicator status="intermediary">
Slow down...
</status-indicator>
</main>
<footer>
<hr />
<p>
Just keep building.
<br>
A web component by <a href="">Ayo</a>.
</p>
</footer>
</body> </body>
</html> </html>