test-card/src/routes/+page.svelte

88 lines
1.4 KiB
Svelte

<script>
import { version } from '../../package.json';
</script>
<nav>
<h1>Universal Test Card</h1>
<div class="options">
<a href="card">
<i class="ti ti-device-desktop"></i>
Screen
</a>
<a href="audio">
<i class="ti ti-volume"></i>
Audio
</a>
<a href="av-sync" class="disabled">
<i class="ti ti-time-duration-off"></i>
AV&nbsp;Sync
</a>
<a href="keyboard">
<i class="ti ti-keyboard"></i>
Keyboard
</a>
<a href="mouse" class="disabled">
<i class="ti ti-mouse"></i>
Mouse
</a>
<a href="gamepad">
<i class="ti ti-device-gamepad"></i>
Gamepad
</a>
<a href="camera">
<i class="ti ti-camera"></i>
Camera
</a>
<a href="microphone" class="disabled">
<i class="ti ti-microphone"></i>
Microphone
</a>
<a href="sensors" class="disabled">
<i class="ti ti-cpu-2"></i>
Sensors
</a>
</div>
</nav>
<footer><a href="https://git.thm.place/thm/test-card">testcard v{version}</a></footer>
<style>
h1 {
text-align: center;
font-size: 3rem;
margin: 1rem;
text-transform: uppercase;
}
.options {
display: flex;
justify-content: space-evenly;
align-items: center;
gap: 2em;
& a {
text-align: center;
text-decoration: none;
&.disabled {
pointer-events: none;
opacity: 0.5;
}
}
& .ti {
display: block;
font-size: 3rem;
}
}
footer {
text-align: center;
opacity: 0.6;
margin-top: 1rem;
& a {
text-decoration: none;
}
}
</style>